MUI use common select

Author: rvsia

packages/common/src/select/index.js

@@ -161,7 +161,7 @@ const Select = ({
 Select.propTypes = {
   options: PropTypes.array,
   onChange: PropTypes.func,
-  classNamePrefix: PropTypes.string.isRequired,
+  classNamePrefix: PropTypes.string,
   invalid: PropTypes.bool,
   simpleValue: PropTypes.bool,
   isMulti: PropTypes.bool,

packages/mui-component-mapper/src/files/select.js

@@ -7,53 +7,27 @@ import { meta, input } from '@data-driven-forms/common/src/prop-types-templates'
 import MUISelect from './select/integration-select';
 import { useFieldApi } from '@data-driven-forms/react-form-renderer';
 
-const selectValue = (option) => option.sort((a, b) => a.label.localeCompare(b.label, 'en', { sensitivity: 'base' })).map((item) => item.value);
-
 const Select = (props) => {
-  const {
-    input,
-    isReadOnly,
-    isDisabled,
-    placeholder,
-    isRequired,
-    label,
-    helperText,
-    validateOnMount,
-    meta,
-    options,
-    isSearchable,
-    description,
-    ...rest
-  } = useFieldApi(props);
+  const { input, placeholder, label, helperText, validateOnMount, meta, isSearchable, description, ...rest } = useFieldApi(props);
   const invalid = validationError(meta, validateOnMount);
 
   return (
     <FormFieldGrid>
       <MUISelect
         fullWidth
         {...input}
-        options={options.filter((option) => Object.prototype.hasOwnProperty.call(option, 'value') && option.value !== null)}
-        placeholder={placeholder || 'Please choose'}
-        value={options.filter(({ value }) => (rest.isMulti ? input.value.includes(value) : value === input.value))}
-        isMulti={rest.isMulti}
         isSearchable={!!isSearchable}
         isClearable={false}
-        hideSelectedOptions={false}
-        closeMenuOnSelect={!rest.isMulti}
-        noOptionsMessage={() => 'No option found'}
         invalid={invalid}
-        isDisabled={isDisabled}
         textFieldProps={{
           label,
           color: invalid ? 'red' : 'blue',
           InputLabelProps: {
             shrink: true
           }
         }}
-        onChange={(option) => input.onChange(rest.isMulti ? selectValue(option) : option ? option.value : undefined)}
         input={input}
         label={label}
-        isRequired={isRequired}
         helperText={invalid || helperText || description}
         {...rest}
       />
@@ -64,10 +38,7 @@ const Select = (props) => {
 Select.propTypes = {
   input,
   meta,
-  isReadOnly: PropTypes.bool,
-  isDisabled: PropTypes.bool,
   placeholder: PropTypes.node,
-  isRequired: PropTypes.bool,
   label: PropTypes.node,
   helperText: PropTypes.node,
   validateOnMount: PropTypes.bool,
@@ -76,4 +47,9 @@ Select.propTypes = {
   description: PropTypes.node
 };
 
+Select.defaultProps = {
+  placeholder: 'Please choose',
+  noOptionsMessage: 'No option found'
+};
+
 export default Select;

packages/mui-component-mapper/src/files/select/integration-select.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import Select from 'react-select';
+import Select from '@data-driven-forms/common/src/select';
 import { emphasize, makeStyles, useTheme } from '@material-ui/core/styles';
 import { Typography, NoSsr, TextField, Paper, Chip, MenuItem, FormControl, FormHelperText, FormLabel } from '@material-ui/core';
 import CancelIcon from '@material-ui/icons/Cancel';