Компонент Select

Extends React.Component

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' },
];
<Select
  options={options}
  isMulti
  onChange={r => console.log(r)}
/>

State компонента MultiSelect

Type: {selected: Array<any>}

Props, передаваемые в Select

Type: {isMulti: boolean, options: Array<Option>, onChange: Function, selected: Array<any>, disableSearch: boolean?, shouldToggleOnHover: boolean, hasSelectAll: boolean, overrideStrings: {}?, maxHeight: number}

Функция для получения подписей элементов

Компонент DatePicker - рисует календарь и дает возможность выбора даты

Extends React.Component

Props, передаваемые в DatePicker

Type: {options: {}?, onChange: Function, value: any?}

Компонент DateRangePicker - рисует 2 календаря и дает возможность выбора диапазона дат

Extends React.Component

Props, передаваемые в DateRangePicker

Type: {options: {}?, onChange: Function, value: {start: any, end: any}}

Компонент DateTimeRangePicker - рисует 2 календаря и дает возможность выбора диапазона дат с указанием времени начальной даты и конечной

Extends React.Component

Props, передаваемые в DateTimeRangePicker

Type: {options: {}?, onChange: Function, value: {start: any, end: any}}

Компонент Toggle - двухпозиционная кнопка

Extends React.Component

<Toggle leftLabel='left' rightLabel='right' onChange={r => console.log(r)} />

Props, передаваемые в Toggle

Type: {leftLabel: string, rightLabel: string, rightPosition: boolean, disabled: boolean, onChange: Function}

State компонента Toggle

Type: {rightPosition: boolean, disabled: boolean}

Компонент Modal - модальное окно

Extends React.Component

<Modal isOpen={this.state.modal}>
  <Modal.Header toggle={this.toggle}>Заголовок</Modal.Header>
  <Modal.Body>
    Содержимое модального окна
    { this.state.isLoading && <div className='omni-modal__loader'/> }
  </Modal.Body>
  <Modal.Footer>Содержимое футера</Modal.Footer>
</Modal>

Props компонента Modal

Type: {children: any, isOpen: boolean}

State компонента Modal

Type: {isOpen: boolean, closing: boolean}

Компонент Tooltip - подсказка, отображаемая при наведении/клике на элемент. Прикрепляется к родительскому элементу. У родительского элемента должен быть задан любой position, кроме static. Если не задан или static, то position будет насильно установлен в relative !!!

Extends React.Component

<div style='position:relative'>
  <Tooltip content='Содержимое подсказки' />
</div>
или
<div>
  <Tooltip>Содержимое подсказки</Tooltip>
</div>

Props, передаваемые в Tooltip

Type: {isVisible: any, offset: string, event: string, fixed: boolean, maxHeight: number, arrowPosition: string, closeButton: boolean, title: string, content: any, children: any}

State компонента Tooltip

Type: {isVisible: boolean, offset: string, arrowPosition: string, callCounter: number}

Заголовок окна с подсказкой

Props компонента TooltipHeader

Type: {title: string, close: Function}

Компонент Search - поисковая строка и список с результатами поиска

Extends React.Component

<Search
  onChange={*функция, принимает значения введенные в поисковую строку и выполняет поиск*}
  result={*массив - результат работы функции, переданной в onChange*}
  onClickResult={*функция, принимает значение выбранного элемента из списка result*}
/>

Props, передаваемые в Search

Type: {onChange: Function, result: Array<any>, onClickResult: Function}

State компонента Search

Type: {searchHasFocus: boolean, searchText: string, resultIsOpen: boolean}

Компонент ResultItem - отображает один элемент из списка результатов поиска

Extends React.Component

Props, передаваемые в ResultItem

Type: {value: string, onClickItem: Function}

State компонента ResultItem

Type: {hovered: boolean}