|
| 1 | +import React, { useState } from 'react' |
| 2 | +import type { AutocompleteItem, TagSelectorProps } from '@toptal/picasso' |
| 3 | +import { Container, TagSelector, Typography } from '@toptal/picasso' |
| 4 | +import { isSubstring, SPACING_4 } from '@toptal/picasso-utils' |
| 5 | + |
| 6 | +const allOptions = [ |
| 7 | + { value: 'AF', text: 'Afghanistan' }, |
| 8 | + { value: 'AI', text: 'Aland Islands' }, |
| 9 | + { value: 'ALB', text: 'Albania' }, |
| 10 | + { value: 'ALG', text: 'Algeria' }, |
| 11 | + { value: 'BY', text: 'Belarus' }, |
| 12 | + { value: 'HR', text: 'Croatia' }, |
| 13 | + { value: 'LU', text: 'Lithuania' }, |
| 14 | + { value: 'SK', text: 'Slovakia' }, |
| 15 | + { value: 'SP', text: 'Spain' }, |
| 16 | + { value: 'UA', text: 'Ukraine' }, |
| 17 | +] |
| 18 | + |
| 19 | +const EMPTY_INPUT_VALUE = '' |
| 20 | +const getDisplayValue = (item: AutocompleteItem | null) => |
| 21 | + (item && item.text) || EMPTY_INPUT_VALUE |
| 22 | + |
| 23 | +const filterOptions = (str = '') => { |
| 24 | + if (str === '') { |
| 25 | + return allOptions |
| 26 | + } |
| 27 | + |
| 28 | + const result = allOptions.filter(option => |
| 29 | + isSubstring(str, getDisplayValue(option)) |
| 30 | + ) |
| 31 | + |
| 32 | + return result.length > 0 ? result : null |
| 33 | +} |
| 34 | + |
| 35 | +const TagSelectWithSize = ({ |
| 36 | + size, |
| 37 | + value, |
| 38 | + options, |
| 39 | + inputValue, |
| 40 | + onChange, |
| 41 | + onInputChange, |
| 42 | +}: TagSelectorProps) => ( |
| 43 | + <TagSelector |
| 44 | + size={size} |
| 45 | + data-testid='component' |
| 46 | + options={options} |
| 47 | + placeholder='Start typing...' |
| 48 | + value={value} |
| 49 | + inputValue={inputValue} |
| 50 | + getDisplayValue={getDisplayValue} |
| 51 | + onChange={onChange} |
| 52 | + onInputChange={onInputChange} |
| 53 | + /> |
| 54 | +) |
| 55 | + |
| 56 | +const Example = () => { |
| 57 | + const [options, setOptions] = useState<AutocompleteItem[] | null>(allOptions) |
| 58 | + const [value, setValue] = useState<AutocompleteItem[]>([ |
| 59 | + allOptions[0], |
| 60 | + allOptions[1], |
| 61 | + allOptions[2], |
| 62 | + ]) |
| 63 | + const [inputValue, setInputValue] = useState(EMPTY_INPUT_VALUE) |
| 64 | + |
| 65 | + const onChange = selectedValues => { |
| 66 | + window.console.log('onChange values: ', selectedValues) |
| 67 | + setValue(selectedValues) |
| 68 | + } |
| 69 | + |
| 70 | + const onInputChange = newInputValue => { |
| 71 | + window.console.log('onInputChange value: ', newInputValue) |
| 72 | + setInputValue(newInputValue) |
| 73 | + setOptions(filterOptions(newInputValue)) |
| 74 | + } |
| 75 | + |
| 76 | + return ( |
| 77 | + <div> |
| 78 | + {(['medium', 'large'] as const).map(size => ( |
| 79 | + <Container key={size} bottom={SPACING_4}> |
| 80 | + <Typography variant='body' titleCase> |
| 81 | + {size} |
| 82 | + </Typography> |
| 83 | + <TagSelectWithSize |
| 84 | + options={options} |
| 85 | + size={size} |
| 86 | + value={value} |
| 87 | + inputValue={inputValue} |
| 88 | + onChange={onChange} |
| 89 | + onInputChange={onInputChange} |
| 90 | + /> |
| 91 | + </Container> |
| 92 | + ))} |
| 93 | + </div> |
| 94 | + ) |
| 95 | +} |
| 96 | + |
| 97 | +export default Example |
0 commit comments