-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #474 from Panenco/feat/select-input-stories
feat: select-input-stories
- Loading branch information
Showing
5 changed files
with
227 additions
and
116 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,127 @@ | ||
| import * as React from 'react'; | ||
| import { ComponentMeta } from '@storybook/react'; | ||
| import { SelectInput } from 'components/select'; | ||
| import { Col, Row } from 'components'; | ||
| import docs from './readme.md'; | ||
|
|
||
| export default { | ||
| title: 'Example/SelectInput', | ||
| component: SelectInput, | ||
| parameters: { | ||
| docs: { | ||
| description: { | ||
| component: docs, | ||
| }, | ||
| }, | ||
| controls: { disabled: true }, | ||
| }, | ||
| } as ComponentMeta<typeof SelectInput>; | ||
|
|
||
| const options = [ | ||
| { label: 'Chip', value: 'Chip_1' }, | ||
| { label: 'Chip', value: 'Chip_2' }, | ||
| { | ||
| label: 'Group 1', | ||
| options: [ | ||
| { label: 'G1-Option 1', value: 'G1-Option_1' }, | ||
| { label: 'G1-option 2', value: 'G1-Option_2' }, | ||
| ], | ||
| }, | ||
| { | ||
| label: 'Group 2', | ||
| options: [ | ||
| { label: 'G2-Option 1 ', value: 'G2-Option_1' }, | ||
| { label: 'G2-Option 2', value: 'G2-Option_2' }, | ||
| { label: 'G2-Option 3', value: 'G2-Option_3' }, | ||
| ], | ||
| }, | ||
| ]; | ||
|
|
||
| const defaultDeletableOptions = [ | ||
| { label: 'Chip 1', value: 'Chip_1' }, | ||
| { label: 'Chip 2', value: 'Chip_2' }, | ||
| { label: 'Chip 3', value: 'Chip_3' }, | ||
| { label: 'Chip 4', value: 'Chip_4' }, | ||
| { label: 'Chip 5', value: 'Chip_5' }, | ||
| ]; | ||
|
|
||
| const FullDemoTemplate = () => { | ||
| const [deletableOptions, setDeletableOptions] = React.useState(defaultDeletableOptions); | ||
|
|
||
| const [value, setValue] = React.useState< | ||
| | { | ||
| label: string; | ||
| value: string; | ||
| } | ||
| | undefined | ||
| >(undefined); | ||
|
|
||
| const [multiValue, setMultiValue] = React.useState< | ||
| { | ||
| label: string; | ||
| value: string; | ||
| }[] | ||
| >([]); | ||
|
|
||
| const handleChange = (val) => { | ||
| setValue(val); | ||
| }; | ||
|
|
||
| const handleDeleteMultiOption = (val) => { | ||
| setMultiValue(multiValue?.filter((current) => current.value !== val.value)); | ||
| }; | ||
|
|
||
| const handleNewOption = (val) => { | ||
| setDeletableOptions((prevOptions) => [...prevOptions, { label: val, value: val }]); | ||
| }; | ||
|
|
||
| const handleDeleteItem = (data) => { | ||
| setDeletableOptions((prevOptions) => prevOptions.filter((i) => i.value !== data.value)); | ||
| }; | ||
|
|
||
| return ( | ||
| <Row> | ||
| <Col xs='12' sm='6'> | ||
| <SelectInput options={options} title='Single Select' subTitle='Sub title' placeholder='Choose one option' /> | ||
| </Col> | ||
| <Col xs='12' sm='6'> | ||
| <SelectInput | ||
| options={options} | ||
| title='Multi Select' | ||
| subTitle='Sub title' | ||
| isMulti | ||
| chipIconSize={4} | ||
| placeholder='Choose many options ...' | ||
| value={multiValue} | ||
| onChange={setMultiValue} | ||
| onDeleteOption={handleDeleteMultiOption} | ||
| /> | ||
| </Col> | ||
| <Col xs='12' sm='6'> | ||
| <SelectInput | ||
| options={deletableOptions} | ||
| title='Creatable Select' | ||
| subTitle='Sub title' | ||
| placeholder='Choose or create ...' | ||
| value={value} | ||
| onChange={handleChange} | ||
| onCreateOption={handleNewOption} | ||
| onDeleteItem={handleDeleteItem} | ||
| creatable | ||
| /> | ||
| </Col> | ||
| <Col xs='12' sm='6'> | ||
| <SelectInput options={options} title='Select with Error' subTitle='Sub title' error='Error options' /> | ||
| </Col> | ||
| <Col xs='12' sm='6'> | ||
| <SelectInput title='Disabled select' subTitle='Sub title' placeholder='Disabled' isDisabled /> | ||
| </Col> | ||
| </Row> | ||
| ); | ||
| }; | ||
|
|
||
| export const FullDemo = FullDemoTemplate.bind({}); | ||
| FullDemo.decorators = [(Story) => <div style={{ minHeight: '600px' }}>{Story()}</div>]; | ||
| FullDemo.parameters = { | ||
| controls: { disable: true }, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,98 @@ | ||
| ## Usage | ||
|
|
||
| ```js | ||
| ... | ||
| import { SelectInput } from '@panenco/ui'; | ||
|
|
||
| const options = [ | ||
| { label: 'Chip', value: '1' }, | ||
| { label: 'Chip', value: '2' }, | ||
| { | ||
| label: 'Group 1', | ||
| options: [ | ||
| { label: 'G1-Option 1', value: 'value_1' }, | ||
| { label: 'G1-option 2', value: 'value_2' }, | ||
| ], | ||
| }, | ||
| { | ||
| label: 'Group 2', | ||
| options: [ | ||
| { label: 'G2-Option 1 ', value: 'value_3' }, | ||
| { label: 'G2-Option 2', value: 'value_4' }, | ||
| { label: 'G2-Option 3', value: 'value_5' }, | ||
| ], | ||
| }, | ||
| ]; | ||
|
|
||
|
|
||
| const render = () => { | ||
| return ( | ||
| <SelectInput | ||
| options={options} | ||
| title="Multi Select" | ||
| subTitle="Sub title" | ||
| isMulti | ||
| placeholder="Choose many options ..." | ||
| /> | ||
| ); | ||
| } | ||
| ... | ||
| ``` | ||
|
|
||
| --- | ||
|
|
||
| ### Properties | ||
|
|
||
| This component base on [**react-select**](https://react-select.com/home) library, wrapper inherits **props** from react-select interface and extends with selectWrapperProps object. | ||
|
|
||
| - placeholder - component placeholder; | ||
| - error - set state if has error; | ||
| - options - array of options that populate the select menu; | ||
| - isMulti - support multiple selected options; | ||
| - isDisabled - set disabled state; | ||
| - title - set component title; | ||
| - subTitle - set component subtitle; | ||
| - selectWrapperProps - object which should add if you want extends some functionality; | ||
| - onDeleteOption - function which will be called on click by chip's close icon (for multi select); | ||
| - chipTextWeight - text weight; | ||
| - chipTextSize - size chip's text content (by default **typography.s** from your theme); | ||
| - chipTextTypography - object with 2 properties (weight and size); | ||
| - chipIcon - icon for chip (multiply select); | ||
| - chipIconSize - size chip's icon; | ||
| - filterOption - custom method to filter whether an option should be displayed in the menu (by default, filtration is performed by option label); | ||
| - wrapperSelectSizes - object which contain 3 property l, m and s (independ from grid layout) and set size for input element; | ||
| - hideChips - don't render the chips | ||
| - ref - ref; | ||
| - onDeleteItem - a callback which is triggered when you delete an item, if passed adds a bin icon in the right side of option component; | ||
| - deleteItemIcon - custom delete icon (works only if onDeleteItem prop is defined); | ||
|
|
||
| Else you can using Async, Creatable and AsyncCreatable Select with next props | ||
|
|
||
| - async - use Async Select; | ||
| - creatable - use Creatable Select; | ||
| - async + creatable - use AsyncCreatable Select; | ||
|
|
||
| | propName | propType | defaultValue | isRequired | | ||
| | ------------------ | ----------------------------------------------------------------------- | ------------ | ---------- | | ||
| | placeholder | string | Select... | - | | ||
| | error | string | - | - | | ||
| | title | string | - | - | | ||
| | subTitle | string | - | - | | ||
| | isDisabled | boolean | - | - | | ||
| | isMulti | boolean | - | - | | ||
| | async | boolean | - | - | | ||
| | creatable | boolean | - | - | | ||
| | selectWrapperProps | React.HTMLAttributes (HTMLDivElement) | - | - | | ||
| | filterOption | ({data, label, value}, string) => boolean or null | - | - | | ||
| | chipTextWeight | string | - | - | | ||
| | chipTextSize | {textSize: string, lineHeight: size} | - | - | | ||
| | chipTextTypography | {size: {textSize: string, lineHeight: size} , weight: string} | - | - | | ||
| | chipIcon | [IconType](/?path=/story/icon--icon-component) \| keyof typeof icons.sm | xCircle | - | | ||
| | chipIconSize | string | - | - | | ||
| | onDeleteOption | (option) => void | - | - | | ||
| | hideChips | boolean | - | - | | ||
| | ref | React.RefObject | - | - | | ||
| | onDeleteItem | (data) => any | - | - | | ||
| | deleteItemIcon | any | - | - | | ||
|
|
||
| It's a basic props what we using, you can look more complete documentation [**here**](https://react-select.com/home) |
This file was deleted.
Oops, something went wrong.