fix(mui): use mui select instead of react select

Author: Hyperkid123

packages/common/babel.config.js

@@ -58,12 +58,25 @@ const createSuirCJSTransform = (env = 'commonjs') => [
   `semantic-ui-react-${env}`
 ];
 
+const createMuiLabTransform = (env) => [
+  'transform-imports',
+  {
+    '@material-ui/lab': {
+      transform: (importName) => (env ? `@material-ui/lab/${env}/${importName}` : `@material-ui/lab/${importName}`),
+      preventFullImport: false,
+      skipDefaultConversion: false
+    }
+  },
+  `MUI-LAB-${env || 'CJS'}`
+];
+
 module.exports = {
   extends: '../../babel.config.js',
   env: {
     cjs: {
       plugins: [
         createSuirCJSTransform('commonjs'),
+        createMuiLabTransform(),
         [
           'transform-imports',
           {
@@ -155,6 +168,7 @@ module.exports = {
     esm: {
       plugins: [
         createSuirCJSTransform('es'),
+        createMuiLabTransform('esm'),
         [
           'transform-imports',
           {

packages/common/src/select/index.js

@@ -101,6 +101,7 @@ const Select = ({
         {...props}
         classNamePrefix={classNamePrefix}
         isDisabled={true}
+        isFetching={true}
         placeholder={loadingMessage}
         options={state.options}
         onChange={() => {}}

packages/common/src/select/parse-internal-value.js

@@ -0,0 +1,24 @@
+/**
+ * Parses internal select value based on isMulti attribute
+ * @param {Array} value value of the ddf internal select implementaion
+ * @param {Boolean} isMulti if true, select is multi value
+ * @returns {Array|String|Number|Boolean|Object|undefined|null}
+ */
+const parseInternalValue = (value, isMulti = false) => {
+  let internalValue = value;
+  if (isMulti && Array.isArray(internalValue)) {
+    internalValue = value.map((item) => (typeof item === 'object' ? item.value : item));
+  }
+
+  if (!isMulti && Array.isArray(internalValue) && internalValue[0]) {
+    internalValue = typeof internalValue[0] === 'object' ? internalValue[0].value : internalValue[0];
+  }
+
+  if (!isMulti && Array.isArray(internalValue) && !internalValue[0]) {
+    internalValue = undefined;
+  }
+
+  return internalValue;
+};
+
+export default parseInternalValue;

packages/mui-component-mapper/demo/index.js

@@ -12,6 +12,7 @@ import fieldArraySchema from './demo-schemas/field-array-schema';
 
 import Button from '@material-ui/core/Button';
 import wizardSchema from './demo-schemas/wizard-schema';
+import validatorTypes from '@data-driven-forms/react-form-renderer/dist/cjs/validator-types';
 
 const theme = createMuiTheme({
   typography: {
@@ -29,6 +30,117 @@ const compositeMapper = {
   }
 };
 
+const options = [
+  {
+    label: 'One',
+    value: 1
+  },
+  {
+    label: 'Two',
+    value: 2
+  },
+  {
+    label: 'Three',
+    value: 3
+  },
+  {
+    label: 'Four',
+    value: 4
+  },
+  {
+    label: 'Five',
+    value: 5
+  },
+  {
+    label: 'Six',
+    value: 6
+  },
+  {
+    label: 'Seven',
+    value: 7
+  },
+  {
+    label: 'Eight',
+    value: 8
+  },
+  {
+    label: 'Nine',
+    value: 9
+  },
+  {
+    label: 'Ten',
+    value: 10
+  }
+];
+
+const loadOptions = (filter) =>
+  new Promise((res) =>
+    setTimeout(() => {
+      console.log('filter', filter);
+      if (filter && filter.length > 0) {
+        return res(options.filter(({ label }) => label.toLocaleLowerCase().includes(filter.toLocaleLowerCase())));
+      }
+
+      return res(options.slice(0, 3));
+    }, 1500)
+  );
+
+const selectSchema = {
+  fields: [
+    {
+      name: 'searchable-async-select',
+      component: componentTypes.SELECT,
+      label: 'Searchable async select',
+      loadOptions,
+      isSearchable: true,
+      isRequired: true,
+      validate: [{ type: validatorTypes.REQUIRED }],
+      closeMenuOnSelect: false
+    },
+    {
+      name: 'default-select',
+      component: componentTypes.SELECT,
+      label: 'Default select',
+      options,
+      placeholder: 'Select'
+    },
+    {
+      name: 'disabled-select',
+      component: componentTypes.SELECT,
+      label: 'Disabled select',
+      options,
+      isDisabled: true
+    },
+    {
+      name: 'clearable-select',
+      component: componentTypes.SELECT,
+      label: 'Clearable select',
+      options,
+      isClearable: true
+    },
+    {
+      name: 'multi-select',
+      component: componentTypes.SELECT,
+      label: 'Multi select',
+      options,
+      isMulti: true
+    },
+    {
+      name: 'searchable-select',
+      component: componentTypes.SELECT,
+      label: 'Searchable select',
+      options,
+      isSearchable: true
+    },
+    {
+      name: 'async-select',
+      component: componentTypes.SELECT,
+      label: 'Async select',
+      loadOptions
+    }
+  ]
+};
+
 const App = () => {
   const [schema, setSchema] = useState(wizardSchema);
 
@@ -42,16 +154,15 @@ const App = () => {
           <Button onClick={() => setSchema(demoSchema)}>Demo schema</Button>
           <Button onClick={() => setSchema(fieldArraySchema)}>Field array</Button>
           <Button onClick={() => setSchema(wizardSchema)}>Wizard</Button>
+          <Button onClick={() => setSchema(selectSchema)}>Select</Button>
         </Grid>
-        <Grid item xs={12}>
-          <FormRenderer
-            onSubmit={console.log}
-            componentMapper={compositeMapper}
-            FormTemplate={(props) => <FormTemplate {...props} />}
-            schema={schema}
-            onCancel={() => console.log('canceling')}
-          />
-        </Grid>
+        <FormRenderer
+          onSubmit={console.log}
+          componentMapper={compositeMapper}
+          FormTemplate={(props) => <FormTemplate {...props} />}
+          schema={schema}
+          onCancel={() => console.log('canceling')}
+        />
       </Grid>
     </ThemeProvider>
   );

packages/mui-component-mapper/package.json

@@ -71,12 +71,11 @@
   "dependencies": {
     "@date-io/date-fns": "^1.0.1",
     "@date-io/moment": "^1.0.1",
-    "classnames": "^2.2.6",
     "clsx": "^1.0.4",
     "date-fns": "^1.30.1",
     "material-ui-pickers": "^2.2.4",
     "moment": "^2.23.0",
-    "react-select": "^2.2.0"
+    "@material-ui/lab": "^4.0.0-alpha.53"
   },
   "postpublish": "export RELEASE_DEMO=true"
 }