51 lines
1.4 KiB
TypeScript
51 lines
1.4 KiB
TypeScript
import {FC, memo, useEffect, useState} 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, setState] = useState<typeof options>([])
|
|
useEffect(() => {
|
|
setState(factories
|
|
.map(factory => options.find(option => option.value === factory))
|
|
.filter(isNonNullable))
|
|
}, [factories])
|
|
|
|
console.log("fddsdfd")
|
|
return <Select
|
|
id={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 => {
|
|
setState(e as typeof options)
|
|
onSetFactories(e.map(s => s?.value))
|
|
}}
|
|
className={styles.select}
|
|
classNamePrefix={"factory-select"}
|
|
/>
|
|
}
|
|
|
|
export const FactorySelect = memo(FactorySelectBase)
|