Created WrapperSelect

packages/strapi-plugin-content-type-builder/admin/src/components/ComponentSelect/index.js

@@ -1,140 +1,87 @@
 import React from 'react';
 import Select from 'react-select';
 import PropTypes from 'prop-types';
-import { SelectWrapper, SelectNav } from 'strapi-helper-plugin';
-import { ErrorMessage } from '@buffetjs/styles';
 import useDataManager from '../../hooks/useDataManager';
 
-const ComponentSelect = ({ error, label, onChange, name }) => {
+// const SingleValue = ({ children, ...props }) => {
-  const { componentsGroupedByCategory, components } = useDataManager();
+//   console.log({ propss: props });
-  console.log({ componentsGroupedByCategory });
+//   return <div {...props}>{children}</div>;
-  const styles = {
+// };
-    container: base => ({
-      ...base,
-      'z-index': 9999,
-      // padding: 0,
-    }),
-    control: (base, state) => ({
-      ...base,
-      'z-index': 9999,
-      border: state.isFocused
-        ? '1px solid #78caff !important'
-        : error
-        ? '1px solid red !important'
-        : '1px solid #E3E9F3 !important',
-    }),
-    menu: base => {
-      return {
-        ...base,
 
-        border: '1px solid #78caff !important',
+const ComponentSelect = ({ onChange, name, value, styles }) => {
-        borderColor: '#78caff !important',
+  const { componentsGroupedByCategory } = useDataManager();
-        borderTopColor: '#E3E9F3 !important',
+
-      };
+  const handleChange = (inputValue, actionMeta) => {
-    },
+    const { action } = actionMeta;
+
+    if (action === 'clear') {
+      onChange({ target: { name, value: '' } });
+    }
   };
+
   const Menu = props => {
     console.log({ props });
 
     return (
-      <div style={{ border: '1px solid black' }}>
+      <div style={{ bordere: '1px solid black' }}>
-        <ul style={{ backgroundColor: '#fff', margin: '0 -10px' }}>
+        <ul
+          style={{
+            backgroundColor: '#fff',
+            // margin: '0 -10px',
+            maxHeight: 150,
+            overflow: 'auto',
+          }}
+        >
           {Object.keys(componentsGroupedByCategory).map(categoryName => {
             return (
               <li key={categoryName}>
                 {categoryName}
                 <ul>
                   {componentsGroupedByCategory[categoryName].map(component => {
-                    return <li key={component.uid}>{component.schema.name}</li>;
+                    return (
+                      <li
+                        key={component.uid}
+                        onClick={e => {
+                          e.stopPropagation();
+                          console.log('click');
+                          onChange({ target: { name, value: component.uid } });
+                        }}
+                      >
+                        {component.schema.name}
+                      </li>
+                    );
                   })}
                 </ul>
               </li>
             );
           })}
         </ul>
-        {/* <ul>
-          <li>
-            Default
-            <ul>
-              <li>Closing period</li>
-            </ul>
-          </li>
-        </ul> */}
       </div>
     );
   };
-  const formattedOptions = Object.keys(componentsGroupedByCategory).reduce(
-    (acc, current) => {
-      const optionValueObject = componentsGroupedByCategory[current];
-      const option = {
-        label: current,
-        value: optionValueObject.map(val => val.uid),
-        // value:
-        options: optionValueObject.map(val => ({
-          label: val.schema.name,
-          value: val.uid,
-        })),
-      };
 
-      acc.push(option);
-      return acc;
-    },
-    []
-  );
-  const formattedOptions2 = Object.keys(components).reduce((acc, current) => {
-    const option = {
-      label: `${current} - ${components[current].schema.name}`,
-      value: current,
-    };
-
-    acc.push(option);
-
-    return acc;
-  }, []);
-
-  console.log(formattedOptions);
   return (
-    <SelectWrapper className="form-group" style={{ marginBottom: 0 }}>
+    <Select
-      <SelectNav>
+      isClearable
-        <div>
+      onChange={handleChange}
-          <label htmlFor={name}>{label}</label>
+      styles={styles}
-        </div>
+      value={{ label: value, value }}
-      </SelectNav>
+      options={[]}
-      <Select
+      components={{ MenuList: Menu }}
-        isClearable
+    />
-        // onChange={handleChange}
-        styles={styles}
-        // value={{ label: 'coucou', value: 'coucou' }}
-        // value="coucou"
-        options={formattedOptions2}
-        // options={[
-        //   {
-        //     label: 'coucou',
-        //     value: 'coucou',
-        //     options: [{ label: 'un', value: 'deux' }],
-        //   },
-        // ]}
-        // options={componentsGroupedByCategory}
-        components={{ Menu }}
-        menuIsOpen
-        // options={formatOptions()}
-        // menuIsOpen
-      />
-
-      {error && <ErrorMessage style={{ paddingTop: 9 }}>{error}</ErrorMessage>}
-    </SelectWrapper>
   );
 };
 
 ComponentSelect.defaultProps = {
   error: null,
+  value: null,
 };
 
 ComponentSelect.propTypes = {
-  error: PropTypes.string,
-  label: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired,
+  styles: PropTypes.object.isRequired,
+  value: PropTypes.string,
 };
 
 export default ComponentSelect;

packages/strapi-plugin-content-type-builder/admin/src/components/CreatableSelect/index.js

@@ -1,11 +1,9 @@
 import React from 'react';
 import Creatable from 'react-select/creatable';
 import PropTypes from 'prop-types';
-import { SelectWrapper, SelectNav } from 'strapi-helper-plugin';
-import { ErrorMessage } from '@buffetjs/styles';
 import useDataManager from '../../hooks/useDataManager';
 
-const CreatableSelect = ({ error, label, onChange, name }) => {
+const CreatableSelect = ({ onChange, name, styles }) => {
   const { allComponentsCategories } = useDataManager();
 
   const handleChange = (inputValue, actionMeta) => {
@@ -20,45 +18,17 @@ const CreatableSelect = ({ error, label, onChange, name }) => {
     }
   };
 
-  const styles = {
-    control: (base, state) => ({
-      ...base,
-      border: state.isFocused
-        ? '1px solid #78caff !important'
-        : error
-        ? '1px solid red !important'
-        : '1px solid #E3E9F3 !important',
-    }),
-    menu: base => {
-      return {
-        ...base,
-        border: '1px solid #78caff !important',
-        borderColor: '#78caff !important',
-        borderTopColor: '#E3E9F3 !important',
-      };
-    },
-  };
   const formatOptions = () => {
     return allComponentsCategories.map(cat => ({ value: cat, label: cat }));
   };
 
   return (
-    <SelectWrapper className="form-group" style={{ marginBottom: 0 }}>
+    <Creatable
-      <SelectNav>
+      isClearable
-        <div>
+      onChange={handleChange}
-          <label htmlFor={name}>{label}</label>
+      styles={styles}
-        </div>
+      options={formatOptions()}
-      </SelectNav>
+    />
-      <Creatable
-        isClearable
-        onChange={handleChange}
-        styles={styles}
-        options={formatOptions()}
-        // menuIsOpen
-      />
-
-      {error && <ErrorMessage style={{ paddingTop: 9 }}>{error}</ErrorMessage>}
-    </SelectWrapper>
   );
 };
 
@@ -67,10 +37,9 @@ CreatableSelect.defaultProps = {
 };
 
 CreatableSelect.propTypes = {
-  error: PropTypes.string,
-  label: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired,
+  styles: PropTypes.object.isRequired,
 };
 
 export default CreatableSelect;

packages/strapi-plugin-content-type-builder/admin/src/components/WrapperSelect/index.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { SelectWrapper, SelectNav } from 'strapi-helper-plugin';
+import { ErrorMessage } from '@buffetjs/styles';
+import CreatableSelect from '../CreatableSelect';
+import ComponentSelect from '../ComponentSelect';
+
+const WrapperSelect = ({ error, label, name, type, ...rest }) => {
+  const styles = {
+    container: base => ({
+      ...base,
+      'z-index': 9999,
+    }),
+    control: (base, state) => ({
+      ...base,
+      border: state.isFocused
+        ? '1px solid #78caff !important'
+        : error
+        ? '1px solid red !important'
+        : '1px solid #E3E9F3 !important',
+    }),
+    menu: base => {
+      return {
+        ...base,
+        border: '1px solid #78caff !important',
+        borderColor: '#78caff !important',
+        borderTopColor: '#E3E9F3 !important',
+      };
+    },
+  };
+
+  const Component =
+    type === 'creatableSelect' ? CreatableSelect : ComponentSelect;
+
+  return (
+    <SelectWrapper className="form-group" style={{ marginBottom: 0 }}>
+      <SelectNav>
+        <div>
+          <label htmlFor={name}>{label}</label>
+        </div>
+      </SelectNav>
+      <Component name={name} {...rest} styles={styles} />
+
+      {error && <ErrorMessage style={{ paddingTop: 9 }}>{error}</ErrorMessage>}
+    </SelectWrapper>
+  );
+};
+
+WrapperSelect.defaultProps = {
+  error: null,
+};
+
+WrapperSelect.propTypes = {
+  error: PropTypes.string,
+  label: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+};
+
+export default WrapperSelect;

packages/strapi-plugin-content-type-builder/admin/src/containers/FormModal/index.js

@@ -21,13 +21,12 @@ import useDataManager from '../../hooks/useDataManager';
 import AttributeOption from '../../components/AttributeOption';
 import BooleanBox from '../../components/BooleanBox';
 import ComponentIconPicker from '../../components/ComponentIconPicker';
-import ComponentSelect from '../../components/ComponentSelect';
 import CustomCheckbox from '../../components/CustomCheckbox';
-import CreatableSelect from '../../components/CreatableSelect';
 import ModalHeader from '../../components/ModalHeader';
 import HeaderModalNavContainer from '../../components/HeaderModalNavContainer';
 import RelationForm from '../../components/RelationForm';
 import HeaderNavLink from '../../components/HeaderNavLink';
+import WrapperSelect from '../../components/WrapperSelect';
 import getTrad from '../../utils/getTrad';
 import getAttributes from './utils/attributes';
 import forms from './utils/forms';
@@ -602,8 +601,9 @@ const FormModal = () => {
                                 <Inputs
                                   customInputs={{
                                     componentIconPicker: ComponentIconPicker,
-                                    componentSelect: ComponentSelect,
+                                    componentSelect: WrapperSelect,
-                                    creatableSelect: CreatableSelect,
+                                    // creatableSelect: CreatableSelect,
+                                    creatableSelect: WrapperSelect,
                                     customCheckboxWithChildren: CustomCheckbox,
                                     booleanBox: BooleanBox,
                                   }}