53 lines
1.4 KiB
TypeScript
53 lines
1.4 KiB
TypeScript
import { FC, memo, useMemo } from 'react'
|
|
import Select from 'react-select'
|
|
import { isNonNullable } from '../../../src/utils'
|
|
import details from '../../../res/details.json'
|
|
import styles from './FactorySelect.module.css'
|
|
import { EntitySpan } from '../EntitySpan/EntitySpan'
|
|
|
|
interface Props {
|
|
id: string
|
|
factories: string[]
|
|
onSetFactories: (factories: string[]) => void
|
|
}
|
|
|
|
const options = details.map(detail => ({
|
|
label: detail.name,
|
|
value: detail.href
|
|
}))
|
|
|
|
const FactorySelectBase: FC<Props> = ({ id, factories, onSetFactories }) => {
|
|
const state = useMemo<typeof options>(() => {
|
|
return factories
|
|
.map(factory => options.find(option => option.value === factory))
|
|
.filter(isNonNullable)
|
|
}, [factories])
|
|
|
|
return (
|
|
<Select
|
|
id={id}
|
|
instanceId={id}
|
|
value={state}
|
|
components={{
|
|
MultiValueLabel: ({ data, innerProps }) => (
|
|
<EntitySpan {...innerProps} value={data.value} simpleStyle={true} />
|
|
),
|
|
Option: ({ innerProps, data }) => (
|
|
<div {...innerProps} className={styles.option}>
|
|
<EntitySpan value={data.value} simpleStyle={true} />
|
|
</div>
|
|
)
|
|
}}
|
|
isMulti
|
|
options={options as never}
|
|
onChange={e => {
|
|
onSetFactories(e.map(s => s?.value))
|
|
}}
|
|
className={styles.select}
|
|
classNamePrefix={'factory-select'}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export const FactorySelect = memo(FactorySelectBase)
|