Skip to content

Commit

Permalink
[WIP] Fix Multiselect flow issues and convert to component syntax
Browse files Browse the repository at this point in the history
  • Loading branch information
reosarevok committed May 17, 2024
1 parent 8d66563 commit c91c5d4
Show file tree
Hide file tree
Showing 3 changed files with 64 additions and 58 deletions.
106 changes: 48 additions & 58 deletions root/static/scripts/edit/components/Multiselect.js
Original file line number Diff line number Diff line change
Expand Up @@ -42,22 +42,22 @@ export type MultiselectValueStateT<V> = {
...
};

export type MultiselectValuePropsT<
export type MultiselectStateT<
V: AutocompleteEntityItemT,
VS: MultiselectValueStateT<V>,
> = {
+buildExtraChildren?: ($Exact<VS>) => React$Node,
+dispatch: (MultiselectActionT<V>) => void,
+state: $Exact<VS>,
+max: number | null,
+values: $ReadOnlyArray<$Exact<VS>>,
...
};

export type MultiselectStateT<
export type MultiselectValuePropsT<
V: AutocompleteEntityItemT,
VS: MultiselectValueStateT<V>,
> = {
+max: number | null,
+values: $ReadOnlyArray<$Exact<VS>>,
...
+buildExtraChildren?: ($Exact<VS>) => React$Node,
+dispatch: (MultiselectActionT<V>) => void,
+state: $Exact<VS>,
};

export type MultiselectPropsT<
Expand All @@ -67,6 +67,7 @@ export type MultiselectPropsT<
> = {
+addLabel: string,
+buildExtraValueChildren?: ($Exact<VS>) => React$Node,
+buildValues: ($Exact<S>, ($Exact<VS>) => React$Node) => React$Node,
+dispatch: (MultiselectActionT<V>) => void,
+state: $Exact<S>,
};
Expand Down Expand Up @@ -156,22 +157,10 @@ export function runReducer<
}
}

type MultiselectValueComponentT = React$AbstractComponent<
MultiselectValuePropsT<
AutocompleteEntityItemT,
MultiselectValueStateT<AutocompleteEntityItemT>,
>,
mixed,
>;

export const MultiselectValue: MultiselectValueComponentT = React.memo(<
component _MultiselectValue<
V: AutocompleteEntityItemT,
VS: MultiselectValueStateT<V>,
>({
buildExtraChildren,
dispatch,
state,
}: MultiselectValuePropsT<V, VS>): React$MixedElement => {
>(...{buildExtraChildren, dispatch, state}: MultiselectValuePropsT<V, VS>) {
const autocompleteDispatch = React.useCallback(
(action: AutocompleteActionT<V>) => {
dispatch({
Expand Down Expand Up @@ -212,18 +201,43 @@ export const MultiselectValue: MultiselectValueComponentT = React.memo(<
/>
</div>
);
});
}

const Multiselect = (React.memo(<
V: AutocompleteEntityItemT,
VS: MultiselectValueStateT<V>,
S: MultiselectStateT<V, VS>,
>({
const MultiselectValue: React$AbstractComponent<
MultiselectValuePropsT<V, VS>
> = React.memo(_MultiselectValue);

export function buildValues<V, VS>(
...props: MultiselectValuePropsT<V, VS>
): React.MixedElement {
return (
<>
{props.state.values.map(valueAttribute => (
<MultiselectValue
buildExtraChildren={props.buildExtraChildren}
dispatch={props.dispatch}
key={valueAttribute.key}
state={valueAttribute}
/>
))}
</>
);
}

component _Multiselect(...{
addLabel,
buildValues,
buildExtraValueChildren,
dispatch,
state,
}: MultiselectPropsT<V, VS, S>): React$MixedElement => {
}: MultiselectPropsT<
AutocompleteEntityItemT,
MultiselectValueStateT<AutocompleteEntityItemT>,
MultiselectStateT<
AutocompleteEntityItemT,
MultiselectValueStateT<AutocompleteEntityItemT>,
>
>) {
const handleAdd = React.useCallback(() => {
dispatch({type: 'add-value'});
}, [dispatch]);
Expand All @@ -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<V, VS>,
mixed,
>
);

return (
<>
{state.values.map(valueAttribute => (
<GenericMultiselectValue
buildExtraChildren={buildExtraValueChildren}
dispatch={dispatch}
key={valueAttribute.key}
state={valueAttribute}
/>
))}
{buildValues(state, buildExtraValueChildren)}
{(state.max == null || state.max < rowCount) ? (
<button
className="add-item with-label"
Expand All @@ -263,16 +260,9 @@ const Multiselect = (React.memo(<
) : null}
</>
);
}): React$AbstractComponent<
MultiselectPropsT<
AutocompleteEntityItemT,
MultiselectValueStateT<AutocompleteEntityItemT>,
MultiselectStateT<
AutocompleteEntityItemT,
MultiselectValueStateT<AutocompleteEntityItemT>,
>,
>,
mixed,
>);
}

const Multiselect: React$AbstractComponent<React.PropsOf<_Multiselect>> =
React.memo(_Multiselect);

export default Multiselect;
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@ import localizeLinkAttributeTypeName
import {uniqueId} from '../../../common/utility/numbers.js';
import Multiselect, {
type MultiselectPropsT,
type MultiselectValuePropsT,
buildValues as buildMultiselectValues,
runReducer as runMultiselectReducer,
updateValue as updateMultiselectValue,
} from '../../../edit/components/Multiselect.js';
Expand Down Expand Up @@ -186,6 +188,11 @@ component MultiselectAttributeComponent(
dispatch(state.key, action);
}, [dispatch, state.key]);

const buildValues: MultiselectValuePropsT<
LinkAttrTypeT,
DialogMultiselectAttributeValueStateT,
> = buildMultiselectValues;

const buildExtraValueChildren = React.useCallback((
valueState: DialogMultiselectAttributeValueStateT,
) => {
Expand Down Expand Up @@ -237,6 +244,7 @@ component MultiselectAttributeComponent(
<LinkAttrTypeMultiselect
addLabel={addLabel}
buildExtraValueChildren={buildExtraValueChildren}
buildValues={buildValues}
dispatch={multiselectDispatch}
state={state}
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,8 @@ import {uniqueId} from '../../common/utility/numbers.js';
import Multiselect, {
type MultiselectActionT,
type MultiselectPropsT,
type MultiselectValuePropsT,
buildValues as buildMultiselectValues,
runReducer as runMultiselectReducer,
} from '../../edit/components/Multiselect.js';
import type {
Expand Down Expand Up @@ -115,6 +117,11 @@ type WorkLanguageMultiselectPropsT = {
+state: MultiselectLanguageStateT,
};

const buildValues: MultiselectValuePropsT<
LanguageT,
MultiselectLanguageValueStateT,
> = buildMultiselectValues;

// XXX: https://github.com/facebook/flow/issues/7672
const LanguageMultiselect = (
// $FlowIgnore
Expand Down Expand Up @@ -145,6 +152,7 @@ const WorkLanguageMultiselect: React$AbstractComponent<
<td className="lyrics-languages">
<LanguageMultiselect
addLabel={l('Add lyrics language')}
buildValues={buildValues}
dispatch={dispatch}
state={state}
/>
Expand Down

0 comments on commit c91c5d4

Please sign in to comment.