Created WrapperSelect

2025-11-04 03:43:34 +00:00 · 2019-11-27 11:34:11 +01:00 · 2019-11-27 11:34:11 +01:00 · cda2e0eab1
commit cda2e0eab1
parent a4c9556d6a
4 changed files with 118 additions and 142 deletions
--- a/packages/strapi-plugin-content-type-builder/admin/src/components/ComponentSelect/index.js
+++ b/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 { componentsGroupedByCategory, components } = useDataManager();
-  console.log({ componentsGroupedByCategory });
-  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,
+// const SingleValue = ({ children, ...props }) => {
+//   console.log({ propss: props });
+//   return <div {...props}>{children}</div>;
+// };

-        border: '1px solid #78caff !important',
-        borderColor: '#78caff !important',
-        borderTopColor: '#E3E9F3 !important',
-      };
-    },
+const ComponentSelect = ({ onChange, name, value, styles }) => {
+  const { componentsGroupedByCategory } = useDataManager();
+
+  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' }}>
-        <ul style={{ backgroundColor: '#fff', margin: '0 -10px' }}>
+      <div style={{ bordere: '1px solid black' }}>
+        <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 }}>
-      <SelectNav>
-        <div>
-          <label htmlFor={name}>{label}</label>
-        </div>
-      </SelectNav>
-      <Select
-        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>
+    <Select
+      isClearable
+      onChange={handleChange}
+      styles={styles}
+      value={{ label: value, value }}
+      options={[]}
+      components={{ MenuList: Menu }}
+    />
  );
 };

 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;
--- a/packages/strapi-plugin-content-type-builder/admin/src/components/CreatableSelect/index.js
+++ b/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 }}>
-      <SelectNav>
-        <div>
-          <label htmlFor={name}>{label}</label>
-        </div>
-      </SelectNav>
-      <Creatable
-        isClearable
-        onChange={handleChange}
-        styles={styles}
-        options={formatOptions()}
-        // menuIsOpen
-      />
-
-      {error && <ErrorMessage style={{ paddingTop: 9 }}>{error}</ErrorMessage>}
-    </SelectWrapper>
+    <Creatable
+      isClearable
+      onChange={handleChange}
+      styles={styles}
+      options={formatOptions()}
+    />
  );
 };

@ -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;
--- a/packages/strapi-plugin-content-type-builder/admin/src/components/WrapperSelect/index.js
+++ b/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;
--- a/packages/strapi-plugin-content-type-builder/admin/src/containers/FormModal/index.js
+++ b/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,
-                                    creatableSelect: CreatableSelect,
+                                    componentSelect: WrapperSelect,
+                                    // creatableSelect: CreatableSelect,
+                                    creatableSelect: WrapperSelect,
                                    customCheckboxWithChildren: CustomCheckbox,
                                    booleanBox: BooleanBox,
                                  }}