Omni-ui

Пакет UI-компонентов для системы 2.0

Installation:

npm install --save omni-ui

Demo:

make storybook

или

npm run storybook

Usage:

Для совместимости с IE 11 нужно добавить импорт полифилла core-js в точку входа приложения + настройки .babelrc, как в данном пакете. import "core-js/stable";

import "core-js/stable";
import React from 'react';

import {
  Select
  DateRangePicker,
  DatePicker,
  DateTimeRangePicker,
  Toggle,
} from 'omni-ui';

import 'omni-ui/dist/default.css';


class App extends React.Component {
  render() {
    const options = [
      { value: 'red', label: 'Red' },
      { value: 'green', label: 'Green' },
      { value: 'yellow', label: 'Yellow' },
    ];

    return (
      <>
        Multiselect:
        <Select
          options={options}
          isMulti
          onChange={r => console.log('multiselect:', r)}
        />

        Select:
        <Select
          options={options}
          onChange={r => console.log('select:', r)}
        />

        DateRangePicker:
        <div>
          <DateRangePicker options={{}} onChange={r => console.log('daterange:', r)} />
        </div>

        DatePicker:
        <div>
          <DatePicker options={{}} onChange={r => console.log('date:', r)} />
        </div>

        DateTimeRangePicker:
        <div>
          <DateTimeRangePicker options={{}} onChange={r => console.log('datetimerange:', r)} />
        </div>

        Toggle button:
        <div>
          <Toggle leftLabel='left' rightLabel='right' onChange={r => console.log('toggle:', r)} />
        </div>
      </>
    );
  }
}

Specification