@flexis/ui
Version:
Styleless React Components
112 lines • 10.5 kB
JavaScript
/* tslint:disable: no-magic-numbers */
import React from 'react';
import { action } from '@storybook/addon-actions';
import { boolean, number } from '@storybook/addon-knobs/react';
import { storiesOf } from '../../helpers/stories';
import Button from '../Button';
import CustomFlatSelect, { CustomFlatSelectOption } from './';
export const stylableApi = `
Stylable API
---
- ::option
- ::label
- ::input
`;
export const events = {
onChange: action('change')
};
export default storiesOf('CustomFlatSelect', module)
.addParameters({
info: stylableApi
})
.add('with basic state', () => (<CustomFlatSelect {...events} id='toggleSelect' style={{ width: '10rem' }} disabled={boolean('Disabled', false)}>
<CustomFlatSelectOption value={0}>
Option #1
</CustomFlatSelectOption>
<CustomFlatSelectOption value={1}>
Option #2
</CustomFlatSelectOption>
<CustomFlatSelectOption value={2}>
Option #3
</CustomFlatSelectOption>
</CustomFlatSelect>))
.add('with option button', () => (<CustomFlatSelect {...events} id='toggleSelect' style={{ width: '10rem' }} disabled={boolean('Disabled', false)}>
<CustomFlatSelectOption value={0}>
<Button type='button'>
Option #1
</Button>
</CustomFlatSelectOption>
<CustomFlatSelectOption value={1}>
Option #2
</CustomFlatSelectOption>
<CustomFlatSelectOption value={2}>
Option #3
</CustomFlatSelectOption>
</CustomFlatSelect>))
.add('with disabled state', () => (<CustomFlatSelect {...events} style={{ width: '10rem' }} disabled={boolean('Disabled', true)}>
<CustomFlatSelectOption value={0}>
Option #1
</CustomFlatSelectOption>
<CustomFlatSelectOption value={1}>
Option #2
</CustomFlatSelectOption>
<CustomFlatSelectOption value={2}>
Option #3
</CustomFlatSelectOption>
</CustomFlatSelect>))
.add('with default value', () => (<CustomFlatSelect {...events} style={{ width: '10rem' }} name='select' defaultValue={1} disabled={boolean('Disabled', false)}>
<CustomFlatSelectOption value={0}>
Option #1
</CustomFlatSelectOption>
<CustomFlatSelectOption value={1}>
Option #2
</CustomFlatSelectOption>
<CustomFlatSelectOption value={2}>
Option #3
</CustomFlatSelectOption>
</CustomFlatSelect>))
.add('with value', () => (<CustomFlatSelect {...events} style={{ width: '10rem' }} name='select' value={number('Value', 1)} disabled={boolean('Disabled', false)}>
<CustomFlatSelectOption value={0}>
Option #1
</CustomFlatSelectOption>
<CustomFlatSelectOption value={1}>
Option #2
</CustomFlatSelectOption>
<CustomFlatSelectOption value={2}>
Option #3
</CustomFlatSelectOption>
</CustomFlatSelect>))
.add('with default multiple values', () => (<CustomFlatSelect {...events} style={{ width: '10rem' }} name='select' defaultValue={[1, 2]} disabled={boolean('Disabled', false)} multiple>
<CustomFlatSelectOption value={0}>
Option #1
</CustomFlatSelectOption>
<CustomFlatSelectOption value={1}>
Option #2
</CustomFlatSelectOption>
<CustomFlatSelectOption value={2}>
Option #3
</CustomFlatSelectOption>
</CustomFlatSelect>))
.add('with basic multiple state', () => (<CustomFlatSelect {...events} style={{ width: '10rem' }} id='select' name='select' disabled={boolean('Disabled', false)} multiple>
<CustomFlatSelectOption value={0}>
Option #1
</CustomFlatSelectOption>
<CustomFlatSelectOption value={1}>
Option #2
</CustomFlatSelectOption>
<CustomFlatSelectOption value={2}>
Option #3
</CustomFlatSelectOption>
</CustomFlatSelect>))
.add('with multiple values', () => (<CustomFlatSelect {...events} style={{ width: '10rem' }} name='select' value={[1, 2]} disabled={boolean('Disabled', false)} multiple>
<CustomFlatSelectOption value={0}>
Option #1
</CustomFlatSelectOption>
<CustomFlatSelectOption value={1}>
Option #2
</CustomFlatSelectOption>
<CustomFlatSelectOption value={2}>
Option #3
</CustomFlatSelectOption>
</CustomFlatSelect>));
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ3VzdG9tRmxhdFNlbGVjdC5zdG9yaWVzLmpzeCIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0N1c3RvbUZsYXRTZWxlY3QvQ3VzdG9tRmxhdFNlbGVjdC5zdG9yaWVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxzQ0FBc0M7QUFDdEMsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBQzFCLE9BQU8sRUFDTixNQUFNLEVBQ04sTUFBTSwwQkFBMEIsQ0FBQztBQUNsQyxPQUFPLEVBQ04sT0FBTyxFQUNQLE1BQU0sRUFDTixNQUFNLDhCQUE4QixDQUFDO0FBQ3RDLE9BQU8sRUFDTixTQUFTLEVBQ1QsTUFBTSx1QkFBdUIsQ0FBQztBQUMvQixPQUFPLE1BQU0sTUFBTSxXQUFXLENBQUM7QUFDL0IsT0FBTyxnQkFBZ0IsRUFBRSxFQUN4QixzQkFBc0IsRUFDdEIsTUFBTSxJQUFJLENBQUM7QUFFWixNQUFNLENBQUMsTUFBTSxXQUFXLEdBQUc7Ozs7OztDQU0xQixDQUFDO0FBRUYsTUFBTSxDQUFDLE1BQU0sTUFBTSxHQUFHO0lBQ3JCLFFBQVEsRUFBRSxNQUFNLENBQUMsUUFBUSxDQUFDO0NBQzFCLENBQUM7QUFFRixlQUFlLFNBQVMsQ0FBQyxrQkFBa0IsRUFBRSxNQUFNLENBQUM7S0FDbEQsYUFBYSxDQUFDO0lBQ2QsSUFBSSxFQUFFLFdBQVc7Q0FDakIsQ0FBQztLQUNELEdBQUcsQ0FDSCxrQkFBa0IsRUFDbEIsR0FBRyxFQUFFLENBQUMsQ0FDTCxDQUFDLGdCQUFnQixDQUNoQixJQUFJLE1BQU0sQ0FBQyxDQUNYLEVBQUUsQ0FBQyxjQUFjLENBQ2pCLEtBQUssQ0FBQyxDQUFDLEVBQUUsS0FBSyxFQUFFLE9BQU8sRUFBRSxDQUFDLENBQzFCLFFBQVEsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxVQUFVLEVBQUUsS0FBSyxDQUFDLENBQUMsQ0FFckM7SUFBQSxDQUFDLHNCQUFzQixDQUFDLEtBQUssQ0FB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