MUI - Support showSearch (autocomplete) for field select widget (#563)

Author: ukrbublik

CHANGELOG.md

@@ -4,6 +4,7 @@
   - Added read-only mode switch for rules and groups. See `showLock` and `canDeleteLocked` config options, custom JsonLogic op `locked`, `setLock` action, `lockLabel` and `lockedLabel`. Added Switch components, see `renderSwitch`. (issue #377) (PR #490)
   - Fixed issue with frozen config (`Object.freeze`) by using `clone` (issue #345) (PR #490)
   - Fix: Filter value sources for func args correctly. LHS field can be used as arg in RHS function. (PR #490)
+  - MUI - Support showSearch (autocomplete) for field select widget (issue #479 #521) (PR #563)
 - 4.7.2
   - Fixed import of rule_group with `not` (issue #548) (PR #559)
 - 4.7.1

examples/demo/config.tsx

@@ -245,6 +245,9 @@ export default (skin: string) => {
     canLeaveEmptyGroup: true,
     shouldCreateEmptyGroup: false,
     showErrorMessage: true,
+    customFieldSelectProps: {
+      showSearch: true
+    },
     // renderField: (props) => <FieldCascader {...props} />,
     // renderOperator: (props) => <FieldDropdown {...props} />,
     // renderFunc: (props) => <FieldSelect {...props} />,

modules/components/widgets/material/core/MaterialFieldAutocomplete.jsx

@@ -0,0 +1,55 @@
+import React from "react";
+import MaterialAutocomplete from "../value/MaterialAutocomplete";
+
+const itemsToListValues = (items, level = 0) => (
+  items.map(item => {
+    const {items, path, label, disabled, grouplabel} = item;
+    const prefix = "\u00A0\u00A0".repeat(level);
+    if (items) {
+      return itemsToListValues(items, level+1);
+    } else {
+      return {
+        title: label,
+        renderTitle: prefix+label,
+        value: path,
+        disabled,
+        groupTitle: level > 0 ? prefix+grouplabel : null,
+      };
+    }
+  }).flat(Infinity)
+);
+
+const filterOptionsConfig = {
+  stringify: (option) => {
+    const keysForFilter = ["title", "value", "grouplabel", "label"];
+    const valueForFilter = keysForFilter
+      .map(k => (typeof option[k] == "string" ? option[k] : ""))
+      .join("\0");
+    return valueForFilter;
+  }
+};
+
+const fieldAdapter = ({items, selectedKey, setField, ...rest}) => {
+  const listValues = itemsToListValues(items);
+  const groupBy = (option) => option.groupTitle;
+  const value = selectedKey;
+  const setValue = (value, _asyncValues) => {
+    if (!value) return undefined;
+    return setField(value);
+  };
+
+  return {
+    ...rest,
+    listValues,
+    setValue,
+    groupBy,
+    filterOptionsConfig,
+    allowCustomValues: false,
+    multiple: false,
+    value,
+  };
+};
+
+export default (props) => {
+  return <MaterialAutocomplete  {...fieldAdapter(props)} />;
+};

modules/components/widgets/material/core/MaterialFieldSelect.jsx

@@ -11,7 +11,10 @@ export default ({items, setField, selectedKey, readonly, placeholder}) => {
       const prefix = "\u00A0\u00A0".repeat(level);
       if (items) {
         return [
-          <ListSubheader disabled={disabled} key={path} disableSticky={true}>{label}</ListSubheader>,
+          <ListSubheader disabled={disabled} key={path} disableSticky={true}>
+            {prefix && <span>{prefix}</span>}
+            {label}
+          </ListSubheader>,
           renderOptions(items, level+1),
         ];
       } else {

modules/components/widgets/material/index.js

@@ -21,6 +21,7 @@ import MaterialAutocompleteWidget from "./value/MaterialAutocomplete";
 
 // field select widgets
 import MaterialFieldSelect from "./core/MaterialFieldSelect";
+import MaterialFieldAutocomplete from "./core/MaterialFieldAutocomplete";
 
 // core components
 import MaterialButton from "./core/MaterialButton";
@@ -72,6 +73,7 @@ export default {
   MaterialAutocompleteWidget,
 
   MaterialFieldSelect,
+  MaterialFieldAutocomplete,
 
   MaterialButton,
   MaterialButtonGroup,

modules/components/widgets/material/value/MaterialAutocomplete.jsx

@@ -20,8 +20,9 @@ const emptyArray = [];
 export default (props) => {
   const {
     allowCustomValues, multiple,
-    value: selectedValue, customProps, readonly, config
+    value: selectedValue, customProps, readonly, config, groupBy, filterOptionsConfig
   } = props;
+  const filterOptionsFn = filterOptionsConfig ? createFilterOptions(filterOptionsConfig) : defaultFilterOptions;
 
   // hook
   const {
@@ -64,7 +65,7 @@ export default (props) => {
   const value = hasValue ? selectedValue : (multiple ? emptyArray : null);
 
   const filterOptions = (options, params) => {
-    const filtered = defaultFilterOptions(options, params);
+    const filtered = filterOptionsFn(options, params);
     const extended = extendOptions(filtered, params);
     return extended;
   };
@@ -135,7 +136,7 @@ export default (props) => {
         {option.title}
       </React.Fragment>;
     } else {
-      return <React.Fragment>{option.title}</React.Fragment>;
+      return <React.Fragment>{option.renderTitle || option.title}</React.Fragment>;
     }
   };
 
@@ -161,6 +162,7 @@ export default (props) => {
         disabled={readonly}
         readOnly={readonly}
         options={options}
+        groupBy={groupBy}
         getOptionLabel={getOptionLabel}
         getOptionDisabled={getOptionDisabled}
         renderInput={renderInput}

modules/components/widgets/material/value/MaterialTextArea.jsx

@@ -19,7 +19,7 @@ export default (props) => {
     <FormControl fullWidth={fullWidth}>
       <TextField 
         fullWidth={fullWidth}
-        rowsMax={maxRows || defaultMaxRows}
+        maxRows={maxRows || defaultMaxRows}
         multiline={true}
         value={textValue}
         placeholder={!readonly ? placeholder : ""}

modules/config/material/index.js

@@ -19,6 +19,7 @@ const {
   MaterialAutocompleteWidget,
 
   MaterialFieldSelect,
+  MaterialFieldAutocomplete,
   MaterialConjs,
   MaterialSwitch,
   MaterialButton,
@@ -34,7 +35,9 @@ const {
 const settings = {
   ...BasicConfig.settings,
 
-  renderField: (props) => <MaterialFieldSelect {...props} />,
+  renderField: (props) => props?.customProps?.showSearch 
+    ? <MaterialFieldAutocomplete {...props} /> 
+    : <MaterialFieldSelect {...props} />,
   renderOperator: (props) => <MaterialFieldSelect {...props} />,
   renderFunc: (props) => <MaterialFieldSelect {...props} />,
   renderConjs: (props) => <MaterialConjs {...props} />,

modules/index.d.ts

@@ -947,6 +947,7 @@ interface ReadyWidgets extends VanillaWidgets {
 export interface MaterialWidgets {
   // material core widgets
   MaterialFieldSelect: ElementType<FieldProps>,
+  MaterialFieldAutocomplete: ElementType<FieldProps>,
   MaterialConjs: ElementType<ConjsProps>,
   MaterialSwitch: ElementType<SwitchProps>,
   MaterialButton: ElementType<ButtonProps>,

modules/utils/autocomplete.js

@@ -31,8 +31,15 @@ export const mergeListValues = (values, newValues, toStart = false) => {
 
 export const listValueToOption = (lv) => {
   if (lv == null) return null;
-  const {title, value} = lv;
-  return {title, value};
+  const {title, value, disabled, groupTitle, renderTitle} = lv;
+  let option = {title, value};
+  if (disabled)
+    option.disabled = disabled;
+  if (groupTitle)
+    option.groupTitle = groupTitle;
+  if (renderTitle)
+    option.renderTitle = renderTitle;
+  return option;
 };
 
 export const getListValue = (selectedValue, listValues) =>