| 15 | } |
| 16 | |
| 17 | export function EditAdminOptionModal({ |
| 18 | Body, |
| 19 | Header, |
| 20 | option, |
| 21 | allOptions, |
| 22 | }: EditAdminOptionModalProps) { |
| 23 | const groupedOptions = useMemo(() => { |
| 24 | const options = option.groupingInfo |
| 25 | ? allOptions.filter(o => o.groupingInfo?.name === option.groupingInfo?.name) |
| 26 | : [option]; |
| 27 | options.sort((a, b) => (a.groupingInfo?.order || 0) - (b.groupingInfo?.order || 0)); |
| 28 | return options; |
| 29 | }, []); // eslint-disable-line react-hooks/exhaustive-deps |
| 30 | |
| 31 | return ( |
| 32 | <Fragment> |
| 33 | <Header closeButton>Edit Option {option.groupingInfo ? 'Group' : null}</Header> |
| 34 | <Body> |
| 35 | <Alert.Container> |
| 36 | <Alert variant="info" showIcon={false}> |
| 37 | Options setting through _admin is deprecated. Please use the options |
| 38 | automator. |
| 39 | </Alert> |
| 40 | </Alert.Container> |
| 41 | {groupedOptions.map(o => ( |
| 42 | <EditOption key={o.name} option={o} /> |
| 43 | ))} |
| 44 | </Body> |
| 45 | </Fragment> |
| 46 | ); |
| 47 | } |
| 48 | |
| 49 | function EditOption({option}: {option: SerializedOption}) { |
| 50 | return option.fieldType === 'bool' ? ( |