diff --git a/root/static/scripts/edit/components/Multiselect.js b/root/static/scripts/edit/components/Multiselect.js index 549cca109ca..4c7363832fd 100644 --- a/root/static/scripts/edit/components/Multiselect.js +++ b/root/static/scripts/edit/components/Multiselect.js @@ -42,22 +42,22 @@ export type MultiselectValueStateT = { ... }; -export type MultiselectValuePropsT< +export type MultiselectStateT< V: AutocompleteEntityItemT, VS: MultiselectValueStateT, > = { - +buildExtraChildren?: ($Exact) => React$Node, - +dispatch: (MultiselectActionT) => void, - +state: $Exact, + +max: number | null, + +values: $ReadOnlyArray<$Exact>, + ... }; -export type MultiselectStateT< +export type MultiselectValuePropsT< V: AutocompleteEntityItemT, VS: MultiselectValueStateT, > = { - +max: number | null, - +values: $ReadOnlyArray<$Exact>, - ... + +buildExtraChildren?: ($Exact) => React$Node, + +dispatch: (MultiselectActionT) => void, + +state: $Exact, }; export type MultiselectPropsT< @@ -67,6 +67,7 @@ export type MultiselectPropsT< > = { +addLabel: string, +buildExtraValueChildren?: ($Exact) => React$Node, + +buildValues: ($Exact, ($Exact) => React$Node) => React$Node, +dispatch: (MultiselectActionT) => void, +state: $Exact, }; @@ -156,22 +157,10 @@ export function runReducer< } } -type MultiselectValueComponentT = React$AbstractComponent< - MultiselectValuePropsT< - AutocompleteEntityItemT, - MultiselectValueStateT, - >, - mixed, ->; - -export const MultiselectValue: MultiselectValueComponentT = React.memo(< +component _MultiselectValue< V: AutocompleteEntityItemT, VS: MultiselectValueStateT, ->({ - buildExtraChildren, - dispatch, - state, -}: MultiselectValuePropsT): React$MixedElement => { +>(...{buildExtraChildren, dispatch, state}: MultiselectValuePropsT) { const autocompleteDispatch = React.useCallback( (action: AutocompleteActionT) => { dispatch({ @@ -212,18 +201,43 @@ export const MultiselectValue: MultiselectValueComponentT = React.memo(< /> ); -}); +} -const Multiselect = (React.memo(< - V: AutocompleteEntityItemT, - VS: MultiselectValueStateT, - S: MultiselectStateT, ->({ +const MultiselectValue: React$AbstractComponent< + MultiselectValuePropsT +> = React.memo(_MultiselectValue); + +export function buildValues( + ...props: MultiselectValuePropsT +): React.MixedElement { + return ( + <> + {props.state.values.map(valueAttribute => ( + + ))} + + ); +} + +component _Multiselect(...{ addLabel, + buildValues, buildExtraValueChildren, dispatch, state, -}: MultiselectPropsT): React$MixedElement => { +}: MultiselectPropsT< + AutocompleteEntityItemT, + MultiselectValueStateT, + MultiselectStateT< + AutocompleteEntityItemT, + MultiselectValueStateT, + > +>) { const handleAdd = React.useCallback(() => { dispatch({type: 'add-value'}); }, [dispatch]); @@ -232,26 +246,9 @@ const Multiselect = (React.memo(< return accum + (valueAttribute.removed ? 0 : 1); }, 0); - // XXX: https://github.com/facebook/flow/issues/7672 - const GenericMultiselectValue = ( - // $FlowIgnore[incompatible-cast] - MultiselectValue: - React$AbstractComponent< - MultiselectValuePropsT, - mixed, - > - ); - return ( <> - {state.values.map(valueAttribute => ( - - ))} + {buildValues(state, buildExtraValueChildren)} {(state.max == null || state.max < rowCount) ? (