hooks
4 years ago
images
4 years ago
BulkActionCheckbox.tsx
4 years ago
BulkActionSelect.module.scss
4 years ago
BulkActionSelect.tsx
4 years ago
Filters.tsx
4 years ago
FormSelect.module.scss
4 years ago
FormSelect.tsx
4 years ago
Input.module.scss
4 years ago
Input.tsx
4 years ago
ListTable.module.scss
4 years ago
ListTable.tsx
4 years ago
ListTablePage.module.scss
3 years ago
ListTableRows.module.scss
3 years ago
ListTableRows.tsx
4 years ago
Pagination.module.scss
4 years ago
Pagination.tsx
4 years ago
README.MD
4 years ago
RowAction.module.scss
4 years ago
RowAction.tsx
4 years ago
Select.module.scss
4 years ago
Select.tsx
4 years ago
TableCell.module.scss
4 years ago
TableCell.tsx
4 years ago
TestLabel.module.scss
4 years ago
TestLabel.tsx
4 years ago
TypeBadge.module.scss
4 years ago
TypeBadge.tsx
4 years ago
api.ts
4 years ago
index.tsx
4 years ago
FormSelect.tsx
47 lines
| 1 | import styles from './FormSelect.module.scss'; |
| 2 | import cx from "classnames"; |
| 3 | import Input from "@givewp/components/ListTable/Input"; |
| 4 | |
| 5 | export const FormSelect = ({options, name, placeholder = '', ariaLabel = '', onChange, ...rest}) => { |
| 6 | return ( |
| 7 | <> |
| 8 | <Input |
| 9 | type='search' |
| 10 | className={cx(styles.formSelect)} |
| 11 | list={`giveSearchSelect-${name}`} |
| 12 | onChange={updateSearchableSelect(options, name, onChange)} |
| 13 | autoComplete={'off'} |
| 14 | aria-label={ariaLabel} |
| 15 | placeholder={placeholder} |
| 16 | {...rest} |
| 17 | /> |
| 18 | <datalist |
| 19 | |
| 20 | id={`giveSearchSelect-${name}`} |
| 21 | onChange={onChange} |
| 22 | > |
| 23 | {options.map(({value, text}) => ( |
| 24 | <option |
| 25 | key={`${value}${text}`} |
| 26 | value={value === '0' ? text : `${text} (#${value})`} |
| 27 | /> |
| 28 | ))} |
| 29 | </datalist> |
| 30 | </> |
| 31 | ); |
| 32 | } |
| 33 | |
| 34 | const updateSearchableSelect = (options, name, onChange) => { |
| 35 | return (event) => { |
| 36 | if(event.target.value === ''){ |
| 37 | onChange(name, 0); |
| 38 | } |
| 39 | const selectedIndex = options.findIndex((option) => { |
| 40 | return event.target.value.endsWith(`(#${option.value})`); |
| 41 | }); |
| 42 | if(selectedIndex > -1){ |
| 43 | onChange(name, options[selectedIndex].value); |
| 44 | } |
| 45 | } |
| 46 | } |
| 47 |