@akemona-org/strapi-plugin-content-type-builder 3.7.0

package/admin/src/components/ComponentSelect/MenuList.js

@@ -0,0 +1,110 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { components } from 'react-select';
+import { upperFirst } from 'lodash';
+import { useQuery } from 'strapi-helper-plugin';
+import useDataManager from '../../hooks/useDataManager';
+import Ul from '../SelectMenuUl';
+import Category from './Category';
+
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+
+const MenuList = ({
+  selectProps: { isAddingAComponentToAnotherComponent, name, onClickOption, refState, value },
+  ...rest
+}) => {
+  const {
+    componentsGroupedByCategory,
+    componentsThatHaveOtherComponentInTheirAttributes,
+  } = useDataManager();
+
+  const query = useQuery();
+  const Component = components.MenuList;
+  const forTarget = query.get('forTarget');
+  const uid = query.get('targetUid');
+  const isTargetAComponent = ['component', 'components'].includes(forTarget);
+
+  return (
+    <Component {...rest}>
+      <Ul>
+        {Object.keys(componentsGroupedByCategory)
+          .sort()
+          .map(categoryName => {
+            return (
+              <li key={categoryName}>
+                <Category categoryName={categoryName} />
+                <Ul style={{ marginTop: '-4px' }} maxHeight="100%">
+                  {componentsGroupedByCategory[categoryName].map(component => {
+                    if (
+                      (isAddingAComponentToAnotherComponent &&
+                        componentsThatHaveOtherComponentInTheirAttributes.includes(
+                          component.uid
+                        )) ||
+                      (isTargetAComponent && component.uid === uid)
+                    ) {
+                      return null;
+                    }
+
+                    const isSelected = value.value === component.uid;
+
+                    return (
+                      <li
+                        key={component.uid}
+                        className="li"
+                        onClick={() => {
+                          refState.current.select.blur();
+                          onClickOption({
+                            target: { name, value: component.uid },
+                          });
+                        }}
+                      >
+                        <p
+                          datadescr={upperFirst(component.schema.name)}
+                          style={{
+                            color: isSelected ? '#007eff' : '',
+                            fontWeight: isSelected ? '700' : '400',
+                          }}
+                        >
+                          {upperFirst(component.schema.name)}
+                        </p>
+                      </li>
+                    );
+                  })}
+                </Ul>
+              </li>
+            );
+          })}
+      </Ul>
+    </Component>
+  );
+};
+
+MenuList.defaultProps = {
+  selectProps: {
+    isAddingAComponentToAnotherComponent: false,
+    refState: {
+      current: {
+        select: {
+          blur: () => {},
+        },
+      },
+    },
+    value: {
+      value: '',
+    },
+  },
+};
+
+MenuList.propTypes = {
+  selectProps: PropTypes.shape({
+    isAddingAComponentToAnotherComponent: PropTypes.bool,
+    name: PropTypes.string.isRequired,
+    onClickOption: PropTypes.func.isRequired,
+    refState: PropTypes.object,
+    value: PropTypes.object,
+  }),
+};
+
+export default MenuList;

package/admin/src/components/ComponentSelect/MultipleMenuList.js

@@ -0,0 +1,271 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { components } from 'react-select';
+import { FormattedMessage } from 'react-intl';
+import { get } from 'lodash';
+import { useQuery } from 'strapi-helper-plugin';
+import { CheckboxWrapper, Label } from '@buffetjs/styles';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import useDataManager from '../../hooks/useDataManager';
+import getTrad from '../../utils/getTrad';
+import SelectCheckbox from '../SelectCheckbox';
+import Ul from '../SelectMenuUl';
+import SubUl from '../SelectMenuSubUl';
+import UpperFirst from '../UpperFirst';
+
+import hasSubArray from './utils/hasSubArray';
+import hasSomeSubArray from './utils/HasSomeSubArray';
+
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+
+const MultipleMenuList = ({
+  selectProps: { name, addComponentsToDynamicZone, inputValue, value },
+  ...rest
+}) => {
+  const { componentsGroupedByCategory, modifiedData } = useDataManager();
+  const query = useQuery();
+  const dzName = query.get('dynamicZoneTarget');
+  const alreadyUsedComponents = get(
+    modifiedData,
+    ['contentType', 'schema', 'attributes', dzName, 'components'],
+    []
+  );
+  const filteredComponentsGroupedByCategory = Object.keys(componentsGroupedByCategory).reduce(
+    (acc, current) => {
+      const filteredComponents = componentsGroupedByCategory[current].filter(({ uid }) => {
+        return !alreadyUsedComponents.includes(uid);
+      });
+
+      if (filteredComponents.length > 0) {
+        acc[current] = filteredComponents;
+      }
+
+      return acc;
+    },
+    {}
+  );
+
+  const collapsesObject = Object.keys(filteredComponentsGroupedByCategory).reduce(
+    (acc, current) => {
+      acc[current] = false;
+
+      return acc;
+    },
+    {}
+  );
+  const [collapses, setCollapses] = useState(collapsesObject);
+  const [options, setOptions] = useState(filteredComponentsGroupedByCategory);
+
+  // Search for component
+  useEffect(() => {
+    const formattedOptions = Object.keys(filteredComponentsGroupedByCategory).reduce(
+      (acc, current) => {
+        const filteredComponents = filteredComponentsGroupedByCategory[current].filter(
+          ({ schema: { name } }) => {
+            return name.includes(inputValue);
+          }
+        );
+
+        if (filteredComponents.length > 0) {
+          acc[current] = filteredComponents;
+        }
+
+        return acc;
+      },
+      {}
+    );
+
+    setOptions(formattedOptions);
+
+    const categoriesToOpen = Object.keys(formattedOptions);
+
+    if (inputValue !== '') {
+      // Close collapses
+      Object.keys(filteredComponentsGroupedByCategory)
+        .filter(cat => categoriesToOpen.indexOf(cat) === -1)
+        .forEach(catName => {
+          setCollapses(prevState => ({ ...prevState, [catName]: false }));
+        });
+
+      categoriesToOpen.forEach(catName => {
+        setCollapses(prevState => ({ ...prevState, [catName]: true }));
+      });
+    } else {
+      // Close all collapses
+      categoriesToOpen.forEach((catName, index) => {
+        setCollapses(prevState => ({ ...prevState, [catName]: index === 0 }));
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [inputValue]);
+
+  const toggleCollapse = catName => {
+    setCollapses(prevState => ({
+      ...prevState,
+      [catName]: !prevState[catName],
+    }));
+  };
+
+  const Component = components.MenuList;
+
+  const allComponentsCategory = Object.keys(options).reduce((acc, current) => {
+    const categoryCompos = options[current].map(compo => {
+      return compo.uid;
+    });
+
+    acc[current] = categoryCompos;
+
+    return acc;
+  }, {});
+
+  const getCategoryValue = categoryName => {
+    const componentsCategory = allComponentsCategory[categoryName];
+
+    return hasSubArray(value.value, componentsCategory);
+  };
+
+  const doesCategoryHasSomeElements = categoryName => {
+    const componentsCategory = allComponentsCategory[categoryName];
+
+    return hasSomeSubArray(value.value, componentsCategory);
+  };
+
+  const handleChangeCategory = ({ target }) => {
+    // refState.current.select.blur();
+    const dataTarget = {
+      name,
+      components: allComponentsCategory[target.name],
+      shouldAddComponents: target.value,
+    };
+    addComponentsToDynamicZone({ target: dataTarget });
+  };
+
+  const handleChange = ({ target }) => {
+    const dataTarget = {
+      name,
+      components: [target.name],
+      shouldAddComponents: target.value,
+    };
+
+    addComponentsToDynamicZone({ target: dataTarget });
+  };
+
+  return (
+    <Component {...rest}>
+      <Ul>
+        {Object.keys(options).length === 0 && (
+          <FormattedMessage
+            id={getTrad(
+              `components.componentSelect.no-component-available${
+                inputValue === '' ? '' : '.with-search'
+              }`
+            )}
+          >
+            {msg => <li style={{ paddingTop: 11 }}>{msg}</li>}
+          </FormattedMessage>
+        )}
+        {Object.keys(options).map(categoryName => {
+          const isChecked = getCategoryValue(categoryName);
+          const someChecked = !isChecked && doesCategoryHasSomeElements(categoryName);
+          const target = { name: categoryName, value: !isChecked };
+
+          return (
+            <li key={categoryName} className="li-multi-menu">
+              <div style={{ marginTop: 3 }}>
+                <CheckboxWrapper style={{ display: 'flex' }}>
+                  <Label
+                    htmlFor="overrideReactSelectBehavior"
+                    onClick={() => {
+                      handleChangeCategory({ target });
+                    }}
+                  >
+                    <SelectCheckbox
+                      id="checkCategory"
+                      checked={isChecked}
+                      name={categoryName}
+                      onChange={() => {}}
+                      someChecked={someChecked}
+                    />
+                    <UpperFirst content={categoryName} />
+                  </Label>
+                  <div
+                    style={{
+                      width: '150px',
+                      textAlign: 'right',
+                      flexGrow: 2,
+                    }}
+                    onClick={e => {
+                      e.stopPropagation();
+                      toggleCollapse(categoryName);
+                    }}
+                  >
+                    <FontAwesomeIcon
+                      className="chevron"
+                      icon={collapses[categoryName] ? 'chevron-up' : 'chevron-down'}
+                    />
+                  </div>
+                </CheckboxWrapper>
+              </div>
+              <SubUl tag="ul" isOpen={collapses[categoryName]}>
+                {options[categoryName].map(component => {
+                  const isChecked = get(value, 'value', []).includes(component.uid);
+                  const target = { name: component.uid, value: !isChecked };
+
+                  return (
+                    <li key={component.uid}>
+                      <CheckboxWrapper>
+                        <Label
+                          htmlFor={component.uid}
+                          message={component.schema.name}
+                          onClick={() => {
+                            handleChange({ target });
+                          }}
+                        >
+                          <SelectCheckbox
+                            id="check"
+                            name={component.uid}
+                            // Remove the handler
+                            onChange={() => {}}
+                            checked={isChecked}
+                          />
+                          {component.schema.name}
+                        </Label>
+                      </CheckboxWrapper>
+                    </li>
+                  );
+                })}
+              </SubUl>
+            </li>
+          );
+        })}
+      </Ul>
+    </Component>
+  );
+};
+
+MultipleMenuList.defaultProps = {
+  selectProps: {
+    inputValue: '',
+    refState: {
+      current: {
+        select: {
+          blur: () => {},
+        },
+      },
+    },
+    value: {},
+  },
+};
+
+MultipleMenuList.propTypes = {
+  selectProps: PropTypes.shape({
+    addComponentsToDynamicZone: PropTypes.func.isRequired,
+    inputValue: PropTypes.string,
+    name: PropTypes.string.isRequired,
+    refState: PropTypes.object,
+    value: PropTypes.object,
+  }),
+};
+
+export default MultipleMenuList;

package/admin/src/components/ComponentSelect/Value.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { components } from 'react-select';
+import { get, size } from 'lodash';
+import { FormattedMessage } from 'react-intl';
+import useDataManager from '../../hooks/useDataManager';
+import getTrad from '../../utils/getTrad';
+import UpperFirst from '../UpperFirst';
+
+const Value = ({ children, ...props }) => {
+  const SingleValue = components.SingleValue;
+  const { components: appComponents } = useDataManager();
+  const value = children;
+  const selectedComponent = get(appComponents, value, {
+    category: '',
+    schema: { name: '' },
+  });
+  const {
+    category,
+    schema: { name },
+  } = selectedComponent;
+  const {
+    selectProps: {
+      componentCategory,
+      componentName,
+      isCreatingComponent,
+      isMultiple,
+    },
+  } = props;
+
+  const displayedCategory = isCreatingComponent ? componentCategory : category;
+  const displayedName = isCreatingComponent ? componentName : name;
+  const style = { color: '#333740' };
+  const valueLength = size(value);
+  const message =
+    valueLength > '0'
+      ? getTrad('components.componentSelect.value-components')
+      : getTrad('components.componentSelect.value-component');
+
+  return (
+    <SingleValue {...props}>
+      {!!value && !isMultiple && (
+        <>
+          <span style={{ fontWeight: 700, ...style }}>
+            <UpperFirst content={displayedCategory} />
+          </span>
+          <span style={style}>&nbsp;—&nbsp;</span>
+          <span style={style}>{displayedName}</span>
+        </>
+      )}
+      {isMultiple && (
+        <FormattedMessage id={message} values={{ number: valueLength }}>
+          {msg => <span style={style}>{msg}</span>}
+        </FormattedMessage>
+      )}
+    </SingleValue>
+  );
+};
+
+Value.defaultProps = {
+  children: null,
+  selectProps: {
+    componentCategory: null,
+    componentName: null,
+    isCreatingComponent: false,
+    isMultiple: false,
+  },
+};
+
+Value.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.string),
+  ]),
+  selectProps: PropTypes.shape({
+    componentCategory: PropTypes.string,
+    componentName: PropTypes.string,
+    isCreatingComponent: PropTypes.bool,
+    isMultiple: PropTypes.bool,
+  }),
+};
+
+export default Value;

package/admin/src/components/ComponentSelect/index.js

@@ -0,0 +1,83 @@
+import React, { useRef } from 'react';
+import Select from 'react-select';
+import PropTypes from 'prop-types';
+import MenuList from './MenuList';
+import MultipleMenuList from './MultipleMenuList';
+import Value from './Value';
+
+const ComponentSelect = ({
+  addComponentsToDynamicZone,
+  componentCategoryNeededForAddingAfieldWhileCreatingAComponent,
+  componentNameNeededForAddingAfieldWhileCreatingAComponent,
+  isAddingAComponentToAnotherComponent,
+  isCreatingComponentWhileAddingAField,
+  isMultiple,
+  onChange,
+  name,
+  value,
+  styles,
+}) => {
+  // Create a ref in order to access the StateManager
+  // So we can close the menu after clicking on a menu item
+  // This allows us to get rid of the menuIsOpen state management
+  // So we let the custom components taking care of it
+  const ref = useRef();
+  const handleChange = (inputValue, actionMeta) => {
+    const { action } = actionMeta;
+
+    if (action === 'clear') {
+      onChange({ target: { name, value: '' } });
+    }
+  };
+
+  const MenuListCompo = isMultiple ? MultipleMenuList : MenuList;
+
+  return (
+    <Select
+      addComponentsToDynamicZone={addComponentsToDynamicZone}
+      isAddingAComponentToAnotherComponent={isAddingAComponentToAnotherComponent}
+      isClearable={!isMultiple}
+      isDisabled={isCreatingComponentWhileAddingAField}
+      isCreatingComponent={isCreatingComponentWhileAddingAField}
+      isMultiple={isMultiple}
+      componentCategory={componentCategoryNeededForAddingAfieldWhileCreatingAComponent}
+      componentName={componentNameNeededForAddingAfieldWhileCreatingAComponent}
+      name={name}
+      onChange={handleChange}
+      onClickOption={onChange}
+      styles={styles}
+      value={{ label: value, value }}
+      options={[]}
+      ref={ref}
+      refState={ref}
+      components={{
+        MenuList: MenuListCompo,
+        SingleValue: Value,
+      }}
+    />
+  );
+};
+
+ComponentSelect.defaultProps = {
+  componentCategoryNeededForAddingAfieldWhileCreatingAComponent: null,
+  componentNameNeededForAddingAfieldWhileCreatingAComponent: null,
+  isAddingAComponentToAnotherComponent: false,
+  isCreatingComponentWhileAddingAField: false,
+  isMultiple: false,
+  value: null,
+};
+
+ComponentSelect.propTypes = {
+  addComponentsToDynamicZone: PropTypes.func.isRequired,
+  componentCategoryNeededForAddingAfieldWhileCreatingAComponent: PropTypes.string,
+  componentNameNeededForAddingAfieldWhileCreatingAComponent: PropTypes.string,
+  isAddingAComponentToAnotherComponent: PropTypes.bool,
+  isCreatingComponentWhileAddingAField: PropTypes.bool,
+  isMultiple: PropTypes.bool,
+  name: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  styles: PropTypes.object.isRequired,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+};
+
+export default ComponentSelect;

package/admin/src/components/ComponentSelect/utils/HasSomeSubArray.js

@@ -0,0 +1,5 @@
+const hasSomeSubArray = (master, sub) => {
+  return sub.some(v => master.indexOf(v) !== -1);
+};
+
+export default hasSomeSubArray;

package/admin/src/components/ComponentSelect/utils/hasSubArray.js

@@ -0,0 +1,5 @@
+const hasSubArray = (master, sub) => {
+  return sub.every(v => master.indexOf(v) !== -1);
+};
+
+export default hasSubArray;

package/admin/src/components/CreatableSelect/index.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import Creatable from 'react-select/creatable';
+import PropTypes from 'prop-types';
+import { uniqBy } from 'lodash';
+import useDataManager from '../../hooks/useDataManager';
+
+const CreatableSelect = ({ onChange, name, styles, value }) => {
+  const { allComponentsCategories } = useDataManager();
+
+  const handleChange = (inputValue, actionMeta) => {
+    const { action } = actionMeta;
+
+    if (action === 'clear') {
+      onChange({ target: { name, value: '' } });
+    }
+
+    if (action === 'create-option' || action === 'select-option') {
+      onChange({ target: { name, value: inputValue.value } });
+    }
+  };
+
+  const formatOptions = () => {
+    const options = allComponentsCategories.map(cat => ({ value: cat, label: cat }));
+
+    if (value) {
+      return uniqBy(options.concat({ value, label: value }), 'value');
+    }
+
+    return options;
+  };
+
+  const getValue = () => {
+    return formatOptions().find(el => el.value === value);
+  };
+
+  return (
+    <Creatable
+      defaultValue={getValue()}
+      isClearable
+      onChange={handleChange}
+      styles={styles}
+      options={formatOptions()}
+    />
+  );
+};
+
+CreatableSelect.defaultProps = {
+  value: null,
+};
+
+CreatableSelect.propTypes = {
+  name: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  styles: PropTypes.object.isRequired,
+  value: PropTypes.string,
+};
+
+export default CreatableSelect;

package/admin/src/components/CustomCheckbox/StyledCustomCheckbox.js

@@ -0,0 +1,25 @@
+/**
+ *
+ * StyledCustomCheckbox
+ *
+ */
+
+import styled from 'styled-components';
+
+const StyledCustomCheckbox = styled.div`
+  width: 100%;
+  padding: 0;
+  padding-bottom: 15px;
+
+  .no-label {
+    padding-top: 7px;
+    > div:first-child {
+      padding-bottom: 13px;
+    }
+    label {
+      display: none;
+    }
+  }
+`;
+
+export default StyledCustomCheckbox;