52 lines
1.3 KiB
JavaScript
52 lines
1.3 KiB
JavaScript
import classnames from 'classnames'
|
|
import { useSelect } from 'downshift'
|
|
import * as R from 'ramda'
|
|
import React from 'react'
|
|
import Arrowdown from 'src/styling/icons/action/arrow/regular.svg?react'
|
|
|
|
import styles from './Select.module.css'
|
|
|
|
function Select({ className, label, items, ...props }) {
|
|
const {
|
|
isOpen,
|
|
selectedItem,
|
|
getToggleButtonProps,
|
|
getLabelProps,
|
|
getMenuProps,
|
|
getItemProps,
|
|
} = useSelect({
|
|
items,
|
|
selectedItem: props.selectedItem,
|
|
onSelectedItemChange: item => {
|
|
props.onSelectedItemChange(item.selectedItem)
|
|
},
|
|
})
|
|
|
|
const selectClassNames = {
|
|
[styles.select]: true,
|
|
[styles.selectFiltered]: props.defaultAsFilter
|
|
? true
|
|
: !R.equals(selectedItem, props.default),
|
|
[styles.open]: isOpen,
|
|
}
|
|
|
|
return (
|
|
<div className={classnames(selectClassNames, className)}>
|
|
<label {...getLabelProps()}>{label}</label>
|
|
<button {...getToggleButtonProps()}>
|
|
<span className={styles.selectedItem}>{selectedItem.display}</span>
|
|
<Arrowdown />
|
|
</button>
|
|
<ul {...getMenuProps()}>
|
|
{isOpen &&
|
|
items.map(({ code, display }, index) => (
|
|
<li key={`${code}${index}`} {...getItemProps({ code, index })}>
|
|
<span>{display}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Select
|