@akemona-org/strapi-plugin-content-manager 3.7.0

package/admin/src/components/RepeatableComponent/DraggedItem/index.js

@@ -0,0 +1,245 @@
+/* eslint-disable import/no-cycle */
+import React, { memo, useEffect, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import { Collapse } from 'reactstrap';
+import { useDrag, useDrop } from 'react-dnd';
+import { getEmptyImage } from 'react-dnd-html5-backend';
+import ItemTypes from '../../../utils/ItemTypes';
+import Inputs from '../../Inputs';
+import FieldComponent from '../../FieldComponent';
+import Banner from '../Banner';
+import FormWrapper from '../FormWrapper';
+import { connect, select } from './utils';
+
+/* eslint-disable react/no-array-index-key */
+
+// Issues:
+// https://github.com/react-dnd/react-dnd/issues/1368
+// https://github.com/frontend-collective/react-sortable-tree/issues/490
+
+const DraggedItem = ({
+  componentFieldName,
+  doesPreviousFieldContainErrorsAndIsOpen,
+  hasErrors,
+  hasMinError,
+  isFirst,
+  isReadOnly,
+  isOpen,
+  onClickToggle,
+  schema,
+  toggleCollapses,
+  // Retrieved from the select function
+  moveComponentField,
+  removeRepeatableField,
+  triggerFormValidation,
+  checkFormErrors,
+  displayedValue,
+}) => {
+  const dragRef = useRef(null);
+  const dropRef = useRef(null);
+  const [showForm, setShowForm] = useState(false);
+
+  const fields = schema.layouts.edit;
+
+  useEffect(() => {
+    if (isOpen) {
+      setShowForm(true);
+    }
+  }, [isOpen]);
+
+  const [, drop] = useDrop({
+    accept: ItemTypes.COMPONENT,
+    canDrop() {
+      return false;
+    },
+    hover(item, monitor) {
+      if (!dropRef.current) {
+        return;
+      }
+
+      const dragPath = item.originalPath;
+      const hoverPath = componentFieldName;
+      const fullPathToComponentArray = dragPath.split('.');
+      const dragIndexString = fullPathToComponentArray
+        .slice()
+        .splice(-1)
+        .join('');
+      const hoverIndexString = hoverPath
+        .split('.')
+        .splice(-1)
+        .join('');
+      const pathToComponentArray = fullPathToComponentArray.slice(
+        0,
+        fullPathToComponentArray.length - 1
+      );
+      const dragIndex = parseInt(dragIndexString, 10);
+      const hoverIndex = parseInt(hoverIndexString, 10);
+
+      // Don't replace items with themselves
+      if (dragIndex === hoverIndex) {
+        return;
+      }
+
+      // Determine rectangle on screen
+      const hoverBoundingRect = dropRef.current.getBoundingClientRect();
+      // Get vertical middle
+      const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
+      // Determine mouse position
+      const clientOffset = monitor.getClientOffset();
+      // Get pixels to the top
+      const hoverClientY = clientOffset.y - hoverBoundingRect.top;
+
+      // Only perform the move when the mouse has crossed half of the items height
+      // When dragging downwards, only move when the cursor is below 50%
+      // When dragging upwards, only move when the cursor is above 50%
+      // Dragging downwards
+      if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
+        return;
+      }
+      // Dragging upwards
+      if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
+        return;
+      }
+      // Time to actually perform the action in the data
+      moveComponentField(pathToComponentArray, dragIndex, hoverIndex);
+
+      item.originalPath = hoverPath;
+    },
+  });
+  const [{ isDragging }, drag, preview] = useDrag({
+    item: {
+      type: ItemTypes.COMPONENT,
+      displayedValue,
+      originalPath: componentFieldName,
+    },
+    begin: () => {
+      // Close all collapses
+      toggleCollapses(-1);
+    },
+    end: () => {
+      // Update the errors
+      triggerFormValidation();
+    },
+    collect: monitor => ({
+      isDragging: monitor.isDragging(),
+    }),
+  });
+
+  useEffect(() => {
+    preview(getEmptyImage(), { captureDraggingState: false });
+  }, [preview]);
+
+  // Create the refs
+  // We need 1 for the drop target
+  // 1 for the drag target
+  const refs = {
+    dragRef: drag(dragRef),
+    dropRef: drop(dropRef),
+  };
+
+  return (
+    <>
+      <Banner
+        componentFieldName={componentFieldName}
+        hasErrors={hasErrors}
+        hasMinError={hasMinError}
+        isFirst={isFirst}
+        displayedValue={displayedValue}
+        doesPreviousFieldContainErrorsAndIsOpen={doesPreviousFieldContainErrorsAndIsOpen}
+        isDragging={isDragging}
+        isOpen={isOpen}
+        isReadOnly={isReadOnly}
+        onClickToggle={onClickToggle}
+        onClickRemove={() => {
+          removeRepeatableField(componentFieldName);
+          toggleCollapses();
+        }}
+        ref={refs}
+      />
+      <Collapse
+        isOpen={isOpen}
+        style={{ backgroundColor: '#FAFAFB' }}
+        onExited={() => setShowForm(false)}
+      >
+        {!isDragging && (
+          <FormWrapper hasErrors={hasErrors} isOpen={isOpen} isReadOnly={isReadOnly}>
+            {showForm &&
+              fields.map((fieldRow, key) => {
+                return (
+                  <div className="row" key={key}>
+                    {fieldRow.map(({ name, fieldSchema, metadatas, queryInfos, size }) => {
+                      const isComponent = fieldSchema.type === 'component';
+                      const keys = `${componentFieldName}.${name}`;
+
+                      if (isComponent) {
+                        const componentUid = fieldSchema.component;
+
+                        return (
+                          <FieldComponent
+                            componentUid={componentUid}
+                            isRepeatable={fieldSchema.repeatable}
+                            key={name}
+                            label={metadatas.label}
+                            isNested
+                            name={keys}
+                            max={fieldSchema.max}
+                            min={fieldSchema.min}
+                          />
+                        );
+                      }
+
+                      return (
+                        <div key={name} className={`col-${size}`}>
+                          <Inputs
+                            autoFocus={false}
+                            fieldSchema={fieldSchema}
+                            keys={keys}
+                            metadatas={metadatas}
+                            onBlur={hasErrors ? checkFormErrors : null}
+                            queryInfos={queryInfos}
+                          />
+                        </div>
+                      );
+                    })}
+                  </div>
+                );
+              })}
+          </FormWrapper>
+        )}
+      </Collapse>
+    </>
+  );
+};
+
+DraggedItem.defaultProps = {
+  doesPreviousFieldContainErrorsAndIsOpen: false,
+  hasErrors: false,
+  hasMinError: false,
+  isFirst: false,
+  isOpen: false,
+  toggleCollapses: () => {},
+};
+
+DraggedItem.propTypes = {
+  componentFieldName: PropTypes.string.isRequired,
+  doesPreviousFieldContainErrorsAndIsOpen: PropTypes.bool,
+  hasErrors: PropTypes.bool,
+  hasMinError: PropTypes.bool,
+  isFirst: PropTypes.bool,
+  isOpen: PropTypes.bool,
+  isReadOnly: PropTypes.bool.isRequired,
+  onClickToggle: PropTypes.func.isRequired,
+  schema: PropTypes.object.isRequired,
+  toggleCollapses: PropTypes.func,
+  moveComponentField: PropTypes.func.isRequired,
+  removeRepeatableField: PropTypes.func.isRequired,
+  triggerFormValidation: PropTypes.func.isRequired,
+  checkFormErrors: PropTypes.func.isRequired,
+  displayedValue: PropTypes.string.isRequired,
+};
+
+const Memoized = memo(DraggedItem);
+
+export default connect(Memoized, select);
+
+export { DraggedItem };

package/admin/src/components/RepeatableComponent/DraggedItem/utils/connect.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function connect(WrappedComponent, select) {
+  return function(props) {
+    const selectors = select(props);
+
+    return <WrappedComponent {...props} {...selectors} />;
+  };
+}
+
+export default connect;

package/admin/src/components/RepeatableComponent/DraggedItem/utils/index.js

@@ -0,0 +1,2 @@
+export { default as connect } from './connect';
+export { default as select } from './select';

package/admin/src/components/RepeatableComponent/DraggedItem/utils/select.js

@@ -0,0 +1,30 @@
+import { useMemo } from 'react';
+import { get, toString } from 'lodash';
+import { useContentManagerEditViewDataManager } from 'strapi-helper-plugin';
+
+function useSelect({ schema, componentFieldName }) {
+  const {
+    checkFormErrors,
+    modifiedData,
+    moveComponentField,
+    removeRepeatableField,
+    triggerFormValidation,
+  } = useContentManagerEditViewDataManager();
+
+  const mainField = useMemo(() => get(schema, ['settings', 'mainField'], 'id'), [schema]);
+  const displayedValue = toString(
+    get(modifiedData, [...componentFieldName.split('.'), mainField], '')
+  );
+
+  return {
+    displayedValue,
+    mainField,
+    checkFormErrors,
+    moveComponentField,
+    removeRepeatableField,
+    schema,
+    triggerFormValidation,
+  };
+}
+
+export default useSelect;

package/admin/src/components/RepeatableComponent/EmptyComponent.js

@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+
+/* eslint-disable indent */
+const EmptyComponent = styled.div`
+  height: 71px;
+  border: 1px solid rgba(227, 233, 243, 0.75);
+  border-top-left-radius: 2px;
+  border-top-right-radius: 2px;
+  border-bottom: 0;
+  line-height: 66px;
+  text-align: center;
+  background-color: #fff;
+
+  ${({ hasMinError }) =>
+    hasMinError &&
+    `
+    border-color: #FAA684;
+  `}
+
+  > p {
+    color: #9ea7b8;
+    font-size: 13px;
+    font-weight: 500;
+  }
+`;
+
+export default EmptyComponent;

package/admin/src/components/RepeatableComponent/FormWrapper.js

@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+
+/* eslint-disable indent */
+
+const FormWrapper = styled.div`
+  padding-top: 24px;
+  padding-left: 20px;
+  padding-right: 20px;
+  padding-bottom: 10px;
+  border-top: 1px solid
+    ${({ hasErrors, isOpen, isReadOnly }) => {
+      if (hasErrors) {
+        return '#ffa784';
+      }
+      if (isOpen && !isReadOnly) {
+        return '#AED4FB';
+      }
+
+      return 'rgba(227, 233, 243, 0.75)';
+    }};
+`;
+
+FormWrapper.defaultProps = {
+  isReadOnly: false,
+};
+
+export default FormWrapper;

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

@@ -0,0 +1,187 @@
+import React, { memo, useCallback, useMemo, useState } from 'react';
+/* eslint-disable import/no-cycle */
+import { useDrop } from 'react-dnd';
+import PropTypes from 'prop-types';
+import { get, take } from 'lodash';
+import { FormattedMessage } from 'react-intl';
+import { ErrorMessage } from '@buffetjs/styles';
+import pluginId from '../../pluginId';
+import { getMaxTempKey } from '../../utils';
+import { useContentTypeLayout } from '../../hooks';
+import ItemTypes from '../../utils/ItemTypes';
+import connect from './utils/connect';
+import select from './utils/select';
+import Button from './AddFieldButton';
+import DraggedItem from './DraggedItem';
+import EmptyComponent from './EmptyComponent';
+
+const RepeatableComponent = ({
+  addRepeatableComponentToField,
+  formErrors,
+  componentUid,
+  componentValue,
+  componentValueLength,
+  isNested,
+  isReadOnly,
+  max,
+  min,
+  name,
+}) => {
+  const [collapseToOpen, setCollapseToOpen] = useState('');
+  const [, drop] = useDrop({ accept: ItemTypes.COMPONENT });
+  const { getComponentLayout } = useContentTypeLayout();
+  const componentLayoutData = useMemo(() => getComponentLayout(componentUid), [
+    componentUid,
+    getComponentLayout,
+  ]);
+
+  const nextTempKey = useMemo(() => {
+    return getMaxTempKey(componentValue || []) + 1;
+  }, [componentValue]);
+
+  const componentErrorKeys = Object.keys(formErrors)
+    .filter(errorKey => {
+      return take(errorKey.split('.'), isNested ? 3 : 1).join('.') === name;
+    })
+    .map(errorKey => {
+      return errorKey
+        .split('.')
+        .slice(0, name.split('.').length + 1)
+        .join('.');
+    });
+
+  const toggleCollapses = () => {
+    setCollapseToOpen('');
+  };
+  const missingComponentsValue = min - componentValueLength;
+  const errorsArray = componentErrorKeys.map(key => get(formErrors, [key, 'id'], ''));
+
+  const hasMinError = get(errorsArray, [0], '').includes('min');
+
+  const handleClick = useCallback(() => {
+    if (!isReadOnly) {
+      if (componentValueLength < max) {
+        const shouldCheckErrors = hasMinError;
+
+        addRepeatableComponentToField(name, componentUid, shouldCheckErrors);
+
+        setCollapseToOpen(nextTempKey);
+      } else if (componentValueLength >= max) {
+        strapi.notification.info(`${pluginId}.components.notification.info.maximum-requirement`);
+      }
+    }
+  }, [
+    addRepeatableComponentToField,
+    componentUid,
+    componentValueLength,
+    hasMinError,
+    isReadOnly,
+    max,
+    name,
+    nextTempKey,
+  ]);
+
+  return (
+    <div>
+      {componentValueLength === 0 && (
+        <EmptyComponent hasMinError={hasMinError}>
+          <FormattedMessage id={`${pluginId}.components.empty-repeatable`}>
+            {msg => <p>{msg}</p>}
+          </FormattedMessage>
+        </EmptyComponent>
+      )}
+      <div ref={drop}>
+        {componentValueLength > 0 &&
+          componentValue.map((data, index) => {
+            const key = data.__temp_key__;
+            const isOpen = collapseToOpen === key;
+            const componentFieldName = `${name}.${index}`;
+            const previousComponentTempKey = get(componentValue, [index - 1, '__temp_key__']);
+            const doesPreviousFieldContainErrorsAndIsOpen =
+              componentErrorKeys.includes(`${name}.${index - 1}`) &&
+              index !== 0 &&
+              collapseToOpen === previousComponentTempKey;
+
+            const hasErrors = componentErrorKeys.includes(componentFieldName);
+
+            return (
+              <DraggedItem
+                componentFieldName={componentFieldName}
+                componentUid={componentUid}
+                doesPreviousFieldContainErrorsAndIsOpen={doesPreviousFieldContainErrorsAndIsOpen}
+                hasErrors={hasErrors}
+                hasMinError={hasMinError}
+                isFirst={index === 0}
+                isReadOnly={isReadOnly}
+                isOpen={isOpen}
+                key={key}
+                onClickToggle={() => {
+                  if (isOpen) {
+                    setCollapseToOpen('');
+                  } else {
+                    setCollapseToOpen(key);
+                  }
+                }}
+                parentName={name}
+                schema={componentLayoutData}
+                toggleCollapses={toggleCollapses}
+              />
+            );
+          })}
+      </div>
+      <Button
+        hasMinError={hasMinError}
+        disabled={isReadOnly}
+        withBorderRadius={false}
+        doesPreviousFieldContainErrorsAndIsClosed={
+          componentValueLength > 0 &&
+          componentErrorKeys.includes(`${name}.${componentValueLength - 1}`) &&
+          componentValue[componentValueLength - 1].__temp_key__ !== collapseToOpen
+        }
+        type="button"
+        onClick={handleClick}
+      >
+        <i className="fa fa-plus" />
+        <FormattedMessage id={`${pluginId}.containers.EditView.add.new`} />
+      </Button>
+      {hasMinError && (
+        <ErrorMessage>
+          <FormattedMessage
+            id={`${pluginId}.components.DynamicZone.missing${
+              missingComponentsValue > 1 ? '.plural' : '.singular'
+            }`}
+            values={{ count: missingComponentsValue }}
+          />
+        </ErrorMessage>
+      )}
+    </div>
+  );
+};
+
+RepeatableComponent.defaultProps = {
+  componentValue: null,
+  componentValueLength: 0,
+  formErrors: {},
+  isNested: false,
+  max: Infinity,
+  min: -Infinity,
+};
+
+RepeatableComponent.propTypes = {
+  addRepeatableComponentToField: PropTypes.func.isRequired,
+  componentUid: PropTypes.string.isRequired,
+  componentValue: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
+  componentValueLength: PropTypes.number,
+  formErrors: PropTypes.object,
+  isNested: PropTypes.bool,
+  isReadOnly: PropTypes.bool.isRequired,
+  max: PropTypes.number,
+  min: PropTypes.number,
+  name: PropTypes.string.isRequired,
+};
+
+const Memoized = memo(RepeatableComponent);
+
+export default connect(Memoized, select);
+
+export { RepeatableComponent };

package/admin/src/components/RepeatableComponent/reducer.js

@@ -0,0 +1,73 @@
+import { fromJS } from 'immutable';
+import getTrad from '../../utils/getTrad';
+
+const initialState = fromJS({ collapses: [] });
+
+const getMax = arr => {
+  if (arr.size === 0) {
+    return -1;
+  }
+
+  return Math.max.apply(
+    Math,
+    arr.toJS().map(o => o._temp__id)
+  );
+};
+
+const reducer = (state, action) => {
+  switch (action.type) {
+    case 'ADD_NEW_FIELD':
+      return state.update('collapses', list => {
+        return list
+          .map(obj => obj.update('isOpen', () => false))
+          .push(fromJS({ isOpen: true, _temp__id: getMax(list) + 1 }));
+      });
+    case 'MOVE_COLLAPSE':
+      return state.updateIn(['collapses'], list => {
+        const oldList = list;
+        const newList = list
+          .delete(action.dragIndex)
+          .insert(action.hoverIndex, state.getIn(['collapses', action.dragIndex]));
+
+        // Fix for
+        // https://github.com/react-dnd/react-dnd/issues/1368
+        // https://github.com/frontend-collective/react-sortable-tree/issues/490
+        if (oldList.size !== newList.size) {
+          strapi.notification.toggle({
+            type: 'warning',
+            message: getTrad('components.repeatable.reorder.error'),
+          });
+
+          return oldList;
+        }
+
+        return newList;
+      });
+    case 'TOGGLE_COLLAPSE':
+      return state.update('collapses', list => {
+        return list.map((obj, index) => {
+          if (index === action.index) {
+            return obj.update('isOpen', v => !v);
+          }
+
+          return obj.update('isOpen', () => false);
+        });
+      });
+    case 'REMOVE_COLLAPSE':
+      return state
+        .removeIn(['collapses', action.index])
+        .update('collapses', list => list.map(obj => obj.set('isOpen', false)))
+        .update('collapses', list => {
+          if (action.shouldAddEmptyField) {
+            return list.push(fromJS({ isOpen: true }));
+          }
+
+          return list;
+        });
+    default:
+      return state;
+  }
+};
+
+export default reducer;
+export { initialState };

package/admin/src/components/RepeatableComponent/utils/connect.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function connect(WrappedComponent, select) {
+  return function(props) {
+    const selectors = select(props);
+
+    return <WrappedComponent {...props} {...selectors} />;
+  };
+}
+
+export default connect;

package/admin/src/components/RepeatableComponent/utils/select.js

@@ -0,0 +1,12 @@
+import { useContentManagerEditViewDataManager } from 'strapi-helper-plugin';
+
+function useSelect() {
+  const { addRepeatableComponentToField, formErrors } = useContentManagerEditViewDataManager();
+
+  return {
+    addRepeatableComponentToField,
+    formErrors,
+  };
+}
+
+export default useSelect;