# rookee-base-components-ext

> react base components for rookee.ru

Latest version **1.0.14** (published 2018-12-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install rookee-base-components-ext
pnpm add rookee-base-components-ext
yarn add rookee-base-components-ext
bun add rookee-base-components-ext
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.14 |
| Published | 2018-12-10 |
| First published | 2018-10-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 151.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | npmidev |

## Links

- npm: https://www.npmjs.com/package/rookee-base-components-ext
- npm.io page: https://npm.io/package/rookee-base-components-ext

## Dependencies (3)

- [color](https://npm.io/package/color.md) ^3.0.0
- [react-jss](https://npm.io/package/react-jss.md) ^8.6.1
- [babel-plugin-transform-decorators-legacy](https://npm.io/package/babel-plugin-transform-decorators-legacy.md) ^1.3.5

## Recent versions

- 1.0.14 (latest) — 2018-12-10
- 1.0.8-alpha — 2018-10-01

## README

## 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>

---
_Source: https://npm.io/package/rookee-base-components-ext · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._