fix(common): change useFlatOptions to optionsTransformer

- for more generic usage

Author: rvsia

packages/common/src/select/flat-options.d.ts

@@ -0,0 +1,31 @@
+import { ReactNode } from "react";
+
+interface Option {
+    label: string | ReactNode;
+    value: any;
+    selectAll?: boolean;
+    selectNone?: boolean;
+}
+
+interface ResultedOption {
+    label?: string | ReactNode;
+    value?: any;
+    selectAll?: boolean;
+    selectNone?: boolean;
+    group?: string | ReactNode;
+    divider?: boolean;
+}
+
+
+interface Options {
+    label?: string | ReactNode;
+    value?: any;
+    divider?: boolean;
+    selectAll?: boolean;
+    selectNone?: boolean;
+    options?: Option[];
+}
+
+declare const flatOptions: (options: Options[]) => ResultedOption[];
+
+export default flatOptions;

packages/common/src/select/flat-options.js

@@ -0,0 +1,3 @@
+const flatOptions = (options) => options.flatMap((option) => (option.options ? [{ group: option.label }, ...option.options] : [option]));
+
+export default flatOptions;

packages/common/src/select/index.d.ts

@@ -1,3 +1,4 @@
 export { default } from './select';
 export * from './select';
 export { default as parseInternalValue } from './parse-internal-value';
+export { default as flatOptions } from './flat-options';

packages/common/src/select/index.js

@@ -1,2 +1,3 @@
 export { default } from './select';
 export { default as parseInternalValue } from './parse-internal-value';
+export { default as flatOptions } from './flat-options';

packages/common/src/select/reducer.js

@@ -1,11 +1,16 @@
-export const flatOptions = (options) => options.flatMap((option) => (option.options ? [{ group: option.label }, ...option.options] : [option]));
+export const init = ({ propsOptions, optionsTransformer }) => ({
+  isLoading: false,
+  options: optionsTransformer ? optionsTransformer(propsOptions) : propsOptions,
+  promises: {},
+  isInitialLoaded: false,
+});
 
-const reducer = (state, { type, payload, options = [] }) => {
+const reducer = (state, { type, payload, options = [], optionsTransformer }) => {
   switch (type) {
     case 'updateOptions':
       return {
         ...state,
-        options: state.useFlatOptions ? flatOptions(payload) : payload,
+        options: optionsTransformer ? optionsTransformer(payload) : payload,
         isLoading: false,
         promises: {},
       };
@@ -17,7 +22,7 @@ const reducer = (state, { type, payload, options = [] }) => {
     case 'setOptions':
       return {
         ...state,
-        options: state.useFlatOptions ? flatOptions(payload) : payload,
+        options: optionsTransformer ? optionsTransformer(payload) : payload,
       };
     case 'initialLoaded':
       return {
@@ -31,8 +36,8 @@ const reducer = (state, { type, payload, options = [] }) => {
           ...state.promises,
           ...payload,
         },
-        options: state.useFlatOptions
-          ? flatOptions([...state.options, ...options.filter(({ value }) => !state.options.find((option) => option.value === value))])
+        options: optionsTransformer
+          ? optionsTransformer([...state.options, ...options.filter(({ value }) => !state.options.find((option) => option.value === value))])
           : [...state.options, ...options.filter(({ value }) => !state.options.find((option) => option.value === value))],
       };
     default:

packages/common/src/select/select.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import isEqual from 'lodash/isEqual';
 import fnToString from '../utils/fn-to-string';
-import reducer, { flatOptions } from './reducer';
+import reducer, { init } from './reducer';
 import useIsMounted from '../hooks/use-is-mounted';
 
 const getSelectValue = (stateValue, simpleValue, isMulti, allOptions) => {
@@ -73,16 +73,11 @@ const Select = ({
   loadOptionsChangeCounter,
   SelectComponent,
   noValueUpdates,
-  useFlatOptions,
+  optionsTransformer,
   ...props
 }) => {
-  const [state, dispatch] = useReducer(reducer, {
-    isLoading: false,
-    options: useFlatOptions ? flatOptions(propsOptions) : propsOptions,
-    useFlatOptions,
-    promises: {},
-    isInitialLoaded: false,
-  });
+  const [state, originalDispatch] = useReducer(reducer, { optionsTransformer, propsOptions }, init);
+  const dispatch = (action) => originalDispatch({ ...action, optionsTransformer });
 
   const isMounted = useIsMounted();
 
@@ -222,7 +217,7 @@ Select.propTypes = {
   isSearchable: PropTypes.bool,
   SelectComponent: PropTypes.elementType.isRequired,
   noValueUpdates: PropTypes.bool,
-  useFlatOptions: PropTypes.bool,
+  optionsTransformer: PropTypes.func,
 };
 
 Select.defaultProps = {

packages/pf4-component-mapper/src/select/select.js

@@ -19,7 +19,7 @@ const Select = (props) => {
       id={id || input.name}
       FormGroupProps={FormGroupProps}
     >
-      <DataDrivenSelect {...input} {...rest} isDisabled={isDisabled || isReadOnly} useFlatOptions />
+      <DataDrivenSelect {...input} {...rest} isDisabled={isDisabled || isReadOnly} />
     </FormGroup>
   );
 };

packages/pf4-component-mapper/src/select/select/select.js

@@ -1,7 +1,7 @@
 import React, { useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 
-import DataDrivenSelect from '@data-driven-forms/common/select';
+import DataDrivenSelect, { flatOptions } from '@data-driven-forms/common/select';
 import parseInternalValue from '@data-driven-forms/common/select/parse-internal-value';
 import Downshift from 'downshift';
 import { CaretDownIcon, CloseIcon, CircleNotchIcon } from '@patternfly/react-icons';
@@ -262,7 +262,15 @@ InternalSelect.propTypes = {
 const Select = ({ menuIsPortal, ...props }) => {
   const menuPortalTarget = menuIsPortal ? document.body : undefined;
 
-  return <DataDrivenSelect SelectComponent={InternalSelect} menuPortalTarget={menuPortalTarget} menuIsPortal={menuIsPortal} {...props} />;
+  return (
+    <DataDrivenSelect
+      SelectComponent={InternalSelect}
+      menuPortalTarget={menuPortalTarget}
+      menuIsPortal={menuIsPortal}
+      {...props}
+      optionsTransformer={flatOptions}
+    />
+  );
 };
 
 Select.propTypes = {