1.0.14 • Published 5 years ago

rookee-base-components-ext v1.0.14

Weekly downloads
1
License
MIT
Repository
-
Last release
5 years ago

Test

run npm i
run webpack
open /public/index.html in your browser

Usage

Import

import {
    Button, Container, Input, Checkbox, Radio,
    Grid, Dropdown, DropdownElement, Popover, Alert,
    ExtendedModal, TextArea, Progress, Hint, AutoComplete
} from '../components/index.jsx';

Container

<Container>
    ...
    ...
</Container>

Button

<Button>Default</Button>
<Button disabled={true}>Disabled</Button>
<Button className='cancel'>Cancel</Button>
<Button className='cancel' disabled={true}>Disabled</Button>
<Button className='big'>Default</Button>
<Button className='big' disabled={true}>Disabled</Button>
<Button inProgress={true} className='cancel'>Default</Button>
<Button inProgress={true} className='big'>Disabled</Button>
<Button inProgress={true}>Disabled</Button>

Input

<Input
    value={state.inputText}
    onChange={(e) => this.setState({ inputText: e.target.value }) }
    label='Регион работы'
    desc={!state.inputText.length ? 'Укажите регион' : null}
    className={!state.inputText.length ? 'error' : null}
/>
<Input
    value='Disabled'
    disabled={true}
    onChange={(e) => this.setState({ inputText: e.target.value }) }
    label='Регион работы'
/>
<Input
    value={state.inputText}
    onChange={(e) => this.setState({ inputText: e.target.value }) }
    label='Регион работы'
    desc={!state.inputText.length ? 'Укажите регион' : null}
    className={!state.inputText.length ? 'min error' : 'min'}
/>
<Input
    value='Disabled'
    disabled={true}
    onChange={(e) => this.setState({ inputText: e.target.value }) }
    label='Регион работы'
    className='min'
/>

Phone

<Phone
    codes={['+7', '+380', '+375']}
    defaultValue={state.phoneInfo.value}
    onChange={(changeInfo) => this.setState({ phoneInfo: changeInfo }) }
    className={state.phoneInfo.value.length === 0 ? 'error' : null}
    label='Номер телефона'
    codeLabel='Код'
    desc={state.phoneInfo.value.length === 0 ? 'Введите телефон' : null}
/>

AutoComplete

<AutoComplete
    array={[
        { value: 'Москва' },
        { value: 'Тула' },
        { value: 'Питер' },
        { value: 'Алупки' },
        { value: 'Тверь' },
        { value: 'Московская область' },
        { value: 'Тульская область' },
        { value: 'Тверская область' },
    ]}
    minLength={2}
    onChange={(index) => console.log(index)}
/>

TextArea

<TextArea
    onChange={(e) => { this.setState({ areaText: e.target.value }) }}
    desc={state.areaText.length === 0 && 'Введите что-нибудь'}
    className={state.areaText.length === 0 && 'error'}
>
    {state.areaText}
</TextArea>
<TextArea disabled={true} onChange={(e) => { this.setState({ areaText: e.target.value }) }}>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit
</TextArea>
<TextArea
    onChange={(e) => { this.setState({ areaText: e.target.value }) }}
    desc={state.areaText.length === 0 && 'Введите что-нибудь'}
    className={state.areaText.length === 0 ? 'big error' : 'big'}
>
    {state.areaText}
</TextArea>
<TextArea className='big' disabled={true} onChange={(e) => { this.setState({ areaText: e.target.value }) }}>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit
</TextArea>

Checkbox

<Checkbox
    id='checkbox1'
    text='Продаю товары'
    checked={state.checkbox1}
    onChange={() => this.setState({checkbox1 : !state.checkbox1})}
/>
<Checkbox
    id='checkbox2'
    text='Оказываю услуги'
    checked={state.checkbox2}
    onChange={() => this.setState({checkbox2 : !state.checkbox2})}
/>
<Checkbox
    id='checkbox3'
    text='И то и другое'
    checked={state.checkbox3}
    onChange={() => this.setState({checkbox3 : !state.checkbox3})}
/>
<Checkbox id='checkbox3' text='Disabled' disabled={true} />

Radio

<Radio id='radio1' text='На усмотрение копирайтера' checked={state.radio} onChange={() => this.setState({radio : !state.radio})} />
<Radio id='radio2' text='Из списка' checked={!state.radio} onChange={() => this.setState({radio : !state.radio})} />
<Radio id='radio3' text='Disabled' disabled={true} />

DropDown

<Dropdown>
    <DropdownElement selected={true}>1000</DropdownElement>
    <DropdownElement selected={false}>2000</DropdownElement>
    <DropdownElement selected={false}>3000</DropdownElement>
</Dropdown>
<Dropdown disabled={true}>
    <DropdownElement selected={true}>1000</DropdownElement>
    <DropdownElement selected={false}>2000</DropdownElement>
    <DropdownElement selected={false}>3000</DropdownElement>
</Dropdown>
<br/>
<Dropdown className='big'>
    <DropdownElement selected={true}>1000</DropdownElement>
    <DropdownElement selected={false}>2000</DropdownElement>
    <DropdownElement selected={false}>3000</DropdownElement>
</Dropdown>
<Dropdown className='big' disabled={true}>
    <DropdownElement selected={true}>1000</DropdownElement>
    <DropdownElement selected={false}>2000</DropdownElement>
    <DropdownElement selected={false}>3000</DropdownElement>
</Dropdown>

Popover

<Popover trigger='click' head={<div className='test-popover-head'>Откроется вниз при клике</div>}>
    <div className='test-popover-body' style={{width: 170, height: 100, background: 'antiquewhite'}}></div>
</Popover>
<Popover trigger='hover' head={<div className='test-popover-head'>Откроется вниз при наведении</div>}>
    <div className='test-popover-body' style={{width: 200, height: 100, background: 'antiquewhite'}}></div>
</Popover>
<Popover trigger='click' className='up' head={<div className='test-popover-head'>Откроется вверх при клике</div>}>
    <div className='test-popover-body' style={{width: 180, height: 100, background: 'antiquewhite'}}></div>
</Popover>

Hint

<Hint
    head='Обычный'
    text='тут написано какое-нибудь пояснения для пользователя'
/>
<Hint
    head='Наверх'
    text='тут написано какое-нибудь пояснения для пользователя'
    className='up'
/>
<Hint
    head='Направо'
    text='тут написано какое-нибудь пояснения для пользователя'
    className='right'
/>
<Hint
    head='Наверх и Направо'
    text='тут написано какое-нибудь пояснения для пользователя'
    className='right up'
/>
<br />
<Hint
    head='Обычный Светлый'
    text='тут написано какое-нибудь пояснения для пользователя'
    className='light'
/>
<Hint
    head='Наверх Светлый'
    text='тут написано какое-нибудь пояснения для пользователя'
    className='light up'
/>
<Hint
    head='Направо Светлый'
    text='тут написано какое-нибудь пояснения для пользователя'
    className='light right'
/>
<Hint
    head='Наверх и Направо Светлый'
    text='тут написано какое-нибудь пояснения для пользователя'
    className='light right up'
/>
<br />
<Hint
    head='Обычный Ховер'
    text='тут написано какое-нибудь пояснения для пользователя'
    trigger='hover'
/>
<Hint
    head='Наверх'
    text='тут написано какое-нибудь пояснения для пользователя'
    className='up'
    trigger='hover'
/>
<Hint
    head='Направо'
    text='тут написано какое-нибудь пояснения для пользователя'
    className='right'
    trigger='hover'
/>
<Hint
    head='Наверх и Направо'
    text='тут написано какое-нибудь пояснения для пользователя'
    className='right up'
    trigger='hover'
/>

Grid

<Grid
    head={{
        'id проекта': 'id проекта',
        'название': 'название',
        'телефон': 'телефон',
        'адрес': 'адрес',
    }}
    body={state.gridData}
/>
<Grid
    head={{
        'id проекта': 'id проекта',
        'название': 'название',
        'телефон': 'телефон',
        'адрес': 'адрес',
    }}
    body={state.gridData}
    className='outline'
/>
<Grid
    head={{
        'id проекта': 'id проекта',
        'название': 'название',
        'телефон': 'телефон',
        'адрес': 'адрес',
    }}
    noDataText='Нет данных'
/>

Alert

<Alert text='good alert' className='' show={true} />
<Alert text='warning alert' className='warning' show={true} />
<Alert text='error alert' className='error' show={true} />

Modals

<ExtendedModal
    close={() => { this.setState({showModal : false}) }}
    needCloseIcon={state.needCloseIcon}
    title='Lorem ipsum dolor sit amet'
    text={`Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`}
>
    <Button onClick={() => { this.setState({showModal : false}) }}>Закрыть</Button>
</ExtendedModal>

Progress

<Progress maxwidth={300} percent={45} />
<Progress maxwidth={300} percent={0} />
<Progress maxwidth={300} percent={100} />

Spoiler

<Spoiler
    collapsedHeight={50}
    expandText='Нажмите, чтобы раскрыть спойлер'
    collapseText='Кликните, дабы убрать большую часть спойлера "под кат"'
    textFull={true}
>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac nulla a leo vestibulum auctor mattis ac ligula. Cras sit amet lacus commodo, pulvinar nisl ac, auctor erat. Morbi sed dolor blandit, imperdiet massa sed, dapibus purus. Nam tristique eros et cursus elementum. Sed leo sem, consectetur a sem in, blandit tristique lorem. Integer ullamcorper eget mi nec dictum. Pellentesque sed leo mauris. Donec quis eleifend diam, vel sagittis nisi.</div>
</Spoiler>

Accordion

<Accordion
    title='Нажмите, чтобы раскрыть аккордеон'
    className=''
>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac nulla a leo vestibulum auctor mattis ac ligula. Cras sit amet lacus commodo, pulvinar nisl ac, auctor erat. Morbi sed dolor blandit, imperdiet massa sed, dapibus purus. Nam tristique eros et cursus elementum. Sed leo sem, consectetur a sem in, blandit tristique lorem. Integer ullamcorper eget mi nec dictum. Pellentesque sed leo mauris. Donec quis eleifend diam, vel sagittis nisi.</div>
</Accordion>

Flipper

<Flipper classname="bottom || top">
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac nulla a leo vestibulum auctor mattis ac ligula.
        Cras sit amet lacus commodo, pulvinar nisl ac, auctor erat. Morbi sed dolor blandit, imperdiet massa sed, dapibus purus.
        Nam tristique eros et cursus elementum. Sed leo sem, consectetur a sem in, blandit tristique lorem. Integer ullamcorper eget mi nec dictum. <br/>
        Pellentesque sed leo mauris. Donec quis eleifend diam, vel sagittis nisi.</div>
</Flipper>

PopupLayer

<PopupLayer
    width={800}
    show={state.showLeftLayer}
    close={() => {
        this.setState({
            showLeftLayer: false
        })
    }}
>
    Тут что-нибудь
</PopupLayer>
babel-plugin-transform-decorators-legacyreact-jsscolor
@everything-registry/sub-chunk-2683
1.0.14

5 years ago

1.0.8-alpha

6 years ago