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

package/admin/src/components/FieldComponent/ResetComponent.js

@@ -0,0 +1,41 @@
+import styled from 'styled-components';
+
+const ResetComponent = styled.div`
+  position: absolute;
+  top: 0;
+  right: 15px;
+  display: flex;
+
+  cursor: pointer;
+  color: #4b515a;
+
+  > span {
+    margin-right: 10px;
+    display: none;
+  }
+
+  &:hover {
+    > div {
+      background-color: #faa684;
+    }
+    color: #f64d0a;
+    > span {
+      display: initial;
+    }
+  }
+
+  > div {
+    width: 24px;
+    height: 24px;
+    background-color: #f3f4f4;
+    text-align: center;
+    border-radius: 2px;
+    &:after {
+      content: '\f2ed';
+      font-size: 10px;
+      font-family: FontAwesome;
+    }
+  }
+`;
+
+export default ResetComponent;

package/admin/src/components/FieldComponent/Wrapper.js

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+
+/* eslint-disable indent */
+const Wrapper = styled.div`
+  position: relative;
+
+  ${({ isFromDynamicZone }) => {
+    if (isFromDynamicZone) {
+      return `
+        background-color: #fff;
+      `;
+    }
+
+    return '';
+  }}
+`;
+
+export default Wrapper;

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

@@ -0,0 +1,171 @@
+/* eslint-disable  import/no-cycle */
+import React, { memo } from 'react';
+import PropTypes from 'prop-types';
+import { size } from 'lodash';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import isEqual from 'react-fast-compare';
+import { NotAllowedInput, LabelIconWrapper } from 'strapi-helper-plugin';
+import pluginId from '../../pluginId';
+import ComponentInitializer from '../ComponentInitializer';
+import NonRepeatableComponent from '../NonRepeatableComponent';
+import RepeatableComponent from '../RepeatableComponent';
+import connect from './utils/connect';
+import select from './utils/select';
+import ComponentIcon from './ComponentIcon';
+import Label from './Label';
+import Reset from './ResetComponent';
+import Wrapper from './Wrapper';
+
+const FieldComponent = ({
+  componentFriendlyName,
+  componentUid,
+  icon,
+  isCreatingEntry,
+  isFromDynamicZone,
+  isRepeatable,
+  isNested,
+  label,
+  labelIcon,
+  max,
+  min,
+  name,
+  // Passed thanks to the connect function
+  hasChildrenAllowedFields,
+  hasChildrenReadableFields,
+  isReadOnly,
+  componentValue,
+  removeComponentFromField,
+}) => {
+  const { formatMessage } = useIntl();
+  const componentValueLength = size(componentValue);
+  const isInitialized = componentValue !== null || isFromDynamicZone;
+  const showResetComponent =
+    !isRepeatable && isInitialized && !isFromDynamicZone && hasChildrenAllowedFields;
+
+  const formattedLabelIcon = labelIcon
+    ? { icon: labelIcon.icon, title: formatMessage(labelIcon.title) }
+    : null;
+
+  if (!hasChildrenAllowedFields && isCreatingEntry) {
+    return (
+      <div className="col-12">
+        <NotAllowedInput label={label} labelIcon={formattedLabelIcon} />
+      </div>
+    );
+  }
+
+  if (!hasChildrenAllowedFields && !isCreatingEntry && !hasChildrenReadableFields) {
+    return (
+      <div className="col-12">
+        <NotAllowedInput label={label} labelIcon={formattedLabelIcon} />
+      </div>
+    );
+  }
+
+  return (
+    <Wrapper className="col-12" isFromDynamicZone={isFromDynamicZone}>
+      {isFromDynamicZone && (
+        <ComponentIcon title={componentFriendlyName}>
+          <div className="component_name">
+            <div className="component_icon">
+              <FontAwesomeIcon icon={icon} title={componentFriendlyName} />
+            </div>
+            <p>{componentFriendlyName}</p>
+          </div>
+        </ComponentIcon>
+      )}
+      <Label>
+        <span>
+          {label}&nbsp;
+          {isRepeatable && `(${componentValueLength})`}
+        </span>
+        {formattedLabelIcon && (
+          <LabelIconWrapper title={formattedLabelIcon.title}>
+            {formattedLabelIcon.icon}
+          </LabelIconWrapper>
+        )}
+      </Label>
+      {showResetComponent && (
+        <Reset
+          onClick={e => {
+            e.preventDefault();
+            e.stopPropagation();
+            removeComponentFromField(name, componentUid);
+          }}
+        >
+          <FormattedMessage id={`${pluginId}.components.reset-entry`} />
+          <div />
+        </Reset>
+      )}
+      {!isRepeatable && !isInitialized && (
+        <ComponentInitializer componentUid={componentUid} name={name} isReadOnly={isReadOnly} />
+      )}
+
+      {!isRepeatable && isInitialized && (
+        <NonRepeatableComponent
+          componentUid={componentUid}
+          isFromDynamicZone={isFromDynamicZone}
+          name={name}
+        />
+      )}
+      {isRepeatable && (
+        <RepeatableComponent
+          componentValue={componentValue}
+          componentValueLength={componentValueLength}
+          componentUid={componentUid}
+          isNested={isNested}
+          isReadOnly={isReadOnly}
+          max={max}
+          min={min}
+          name={name}
+        />
+      )}
+    </Wrapper>
+  );
+};
+
+FieldComponent.defaultProps = {
+  componentValue: null,
+  componentFriendlyName: null,
+  hasChildrenAllowedFields: false,
+  hasChildrenReadableFields: false,
+  icon: 'smile',
+  isFromDynamicZone: false,
+  isReadOnly: false,
+  isRepeatable: false,
+  isNested: false,
+  labelIcon: null,
+  max: Infinity,
+  min: -Infinity,
+};
+
+FieldComponent.propTypes = {
+  componentFriendlyName: PropTypes.string,
+  componentUid: PropTypes.string.isRequired,
+  componentValue: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+  hasChildrenAllowedFields: PropTypes.bool,
+  hasChildrenReadableFields: PropTypes.bool,
+  icon: PropTypes.string,
+  isCreatingEntry: PropTypes.bool.isRequired,
+  isFromDynamicZone: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  isRepeatable: PropTypes.bool,
+  isNested: PropTypes.bool,
+  label: PropTypes.string.isRequired,
+  labelIcon: PropTypes.shape({
+    icon: PropTypes.node.isRequired,
+    title: PropTypes.shape({
+      id: PropTypes.string.isRequired,
+      defaultMessage: PropTypes.string.isRequired,
+    }),
+  }),
+  max: PropTypes.number,
+  min: PropTypes.number,
+  name: PropTypes.string.isRequired,
+  removeComponentFromField: PropTypes.func.isRequired,
+};
+
+const Memoized = memo(FieldComponent, isEqual);
+
+export default connect(Memoized, select);

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

@@ -0,0 +1,12 @@
+import React from 'react';
+
+function connect(WrappedComponent, select) {
+  return function(props) {
+    // eslint-disable-next-line react/prop-types
+    const selectors = select(props);
+
+    return <WrappedComponent {...props} {...selectors} />;
+  };
+}
+
+export default connect;

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

@@ -0,0 +1,123 @@
+import { useMemo } from 'react';
+import { get, take } from 'lodash';
+import { useContentManagerEditViewDataManager } from 'strapi-helper-plugin';
+
+import { getFieldName } from '../../../utils';
+import { useContentTypeLayout } from '../../../hooks';
+
+function useSelect({ isFromDynamicZone, name }) {
+  const {
+    createActionAllowedFields,
+    isCreatingEntry,
+    modifiedData,
+    removeComponentFromField,
+    readActionAllowedFields,
+    updateActionAllowedFields,
+  } = useContentManagerEditViewDataManager();
+  const { contentType } = useContentTypeLayout();
+
+  // This is used for the readonly mode when updating an entry
+  const allDynamicZoneFields = useMemo(() => {
+    const attributes = get(contentType, ['attributes'], {});
+
+    const dynamicZoneFields = Object.keys(attributes).filter(attrName => {
+      return get(attributes, [attrName, 'type'], '') === 'dynamiczone';
+    });
+
+    return dynamicZoneFields;
+  }, [contentType]);
+
+  const allowedFields = useMemo(() => {
+    return isCreatingEntry ? createActionAllowedFields : updateActionAllowedFields;
+  }, [isCreatingEntry, createActionAllowedFields, updateActionAllowedFields]);
+
+  const componentValue = get(modifiedData, name, null);
+  const compoName = useMemo(() => {
+    return getFieldName(name);
+  }, [name]);
+
+  const hasChildrenAllowedFields = useMemo(() => {
+    if (isFromDynamicZone && isCreatingEntry) {
+      return true;
+    }
+
+    const includedDynamicZoneFields = allowedFields.filter(name => name === compoName[0]);
+
+    if (includedDynamicZoneFields.length > 0) {
+      return true;
+    }
+
+    const relatedChildrenAllowedFields = allowedFields
+      .map(fieldName => {
+        return fieldName.split('.');
+      })
+      .filter(fieldName => {
+        if (fieldName.length < compoName.length) {
+          return false;
+        }
+
+        const joined = take(fieldName, compoName.length).join('.');
+
+        return joined === compoName.join('.');
+      });
+
+    return relatedChildrenAllowedFields.length > 0;
+  }, [isFromDynamicZone, isCreatingEntry, allowedFields, compoName]);
+
+  // This is used only when updating an entry
+  const hasChildrenReadableFields = useMemo(() => {
+    if (isFromDynamicZone) {
+      return true;
+    }
+    if (allDynamicZoneFields.includes(compoName[0])) {
+      return true;
+    }
+
+    const allowedFields = isCreatingEntry ? [] : readActionAllowedFields;
+
+    const relatedChildrenAllowedFields = allowedFields
+      .map(fieldName => {
+        return fieldName.split('.');
+      })
+      .filter(fieldName => {
+        if (fieldName.length < compoName.length) {
+          return false;
+        }
+
+        const joined = take(fieldName, compoName.length).join('.');
+
+        return joined === compoName.join('.');
+      });
+
+    return relatedChildrenAllowedFields.length > 0;
+  }, [
+    isFromDynamicZone,
+    allDynamicZoneFields,
+    compoName,
+    isCreatingEntry,
+    readActionAllowedFields,
+  ]);
+
+  const isReadOnly = useMemo(() => {
+    if (isCreatingEntry) {
+      return false;
+    }
+
+    if (hasChildrenAllowedFields) {
+      return false;
+    }
+
+    return hasChildrenReadableFields;
+  }, [hasChildrenAllowedFields, hasChildrenReadableFields, isCreatingEntry]);
+
+  return {
+    hasChildrenAllowedFields,
+    hasChildrenReadableFields,
+    isCreatingEntry,
+    isReadOnly,
+    removeComponentFromField,
+    componentValue,
+  };
+}
+
+export default useSelect;

package/admin/src/components/FieldsReorder/Item.js

@@ -0,0 +1,249 @@
+import React, { useEffect, useRef } from 'react';
+import { useDrag, useDrop } from 'react-dnd';
+import { getEmptyImage } from 'react-dnd-html5-backend';
+import PropTypes from 'prop-types';
+import { get } from 'lodash';
+
+import useLayoutDnd from '../../hooks/useLayoutDnd';
+import DraggedFieldWithPreview from '../DraggedFieldWithPreview';
+
+import ItemTypes from '../../utils/ItemTypes';
+
+const Item = ({
+  componentUid,
+  dynamicZoneComponents,
+  itemIndex,
+  moveItem,
+  moveRow,
+  name,
+  removeField,
+  rowIndex,
+  size,
+  type,
+}) => {
+  const {
+    goTo,
+    componentLayouts,
+    metadatas,
+    setEditFieldToSelect,
+    selectedItemName,
+    setIsDraggingSibling,
+  } = useLayoutDnd();
+  const dragRef = useRef(null);
+  const dropRef = useRef(null);
+  const [{ clientOffset, isOver }, drop] = useDrop({
+    // Source code from http://react-dnd.github.io/react-dnd/examples/sortable/simple
+    // And also from https://codesandbox.io/s/6v7l7z68jk
+    accept: ItemTypes.EDIT_FIELD,
+    hover(item, monitor) {
+      if (!dropRef.current) {
+        return;
+      }
+
+      // We use the hover only to reorder full size items
+      if (item.size !== 12) {
+        return;
+      }
+
+      const dragIndex = monitor.getItem().itemIndex;
+      const hoverIndex = itemIndex;
+      const dragRow = monitor.getItem().rowIndex;
+      const targetRow = rowIndex;
+
+      // Don't replace item with themselves
+      if (dragIndex === hoverIndex && dragRow === targetRow) {
+        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 (dragRow < targetRow && hoverClientY < hoverMiddleY) {
+        return;
+      }
+
+      // Dragging upwards
+      if (dragRow > targetRow && hoverClientY > hoverMiddleY) {
+        return;
+      }
+
+      moveRow(dragRow, targetRow);
+
+      item.rowIndex = targetRow;
+      item.itemIndex = hoverIndex;
+    },
+    drop(item, monitor) {
+      if (!dropRef.current) {
+        return;
+      }
+
+      const dragIndex = monitor.getItem().itemIndex;
+      const hoverIndex = itemIndex;
+      const dragRow = monitor.getItem().rowIndex;
+      const targetRow = rowIndex;
+
+      // Don't reorder on drop for full size elements since it is already done in the hover
+      if (item.size === 12) {
+        return;
+      }
+
+      // Don't replace item with themselves
+      if (dragIndex === hoverIndex && dragRow === targetRow) {
+        return;
+      }
+
+      // Determine rectangle on screen
+      const hoverBoundingRect = dropRef.current.getBoundingClientRect();
+
+      // Scroll window if mouse near vertical edge(100px)
+
+      // Horizontal Check --
+      if (
+        Math.abs(monitor.getClientOffset().x - hoverBoundingRect.left) >
+        hoverBoundingRect.width / 1.8
+      ) {
+        moveItem(dragIndex, hoverIndex + 1, dragRow, targetRow);
+
+        item.itemIndex = hoverIndex + 1;
+        item.rowIndex = targetRow;
+
+        return;
+      }
+
+      // Vertical Check |
+
+      // Time to actually perform the action
+      moveItem(dragIndex, hoverIndex, dragRow, targetRow);
+      // Note: we're mutating the monitor item here!
+      // Generally it's better to avoid mutations,
+      // but it's good here for the sake of performance
+      // to avoid expensive index searches.
+
+      item.itemIndex = hoverIndex;
+      item.rowIndex = targetRow;
+    },
+    collect: monitor => ({
+      canDrop: monitor.canDrop(),
+      clientOffset: monitor.getClientOffset(),
+      isOver: monitor.isOver(),
+      isOverCurrent: monitor.isOver({ shallow: true }),
+      itemType: monitor.getItemType(),
+    }),
+  });
+  const [{ isDragging, getItem }, drag, preview] = useDrag({
+    begin: () => {
+      setIsDraggingSibling(true);
+    },
+    canDrag() {
+      // Each row of the layout has a max size of 12 (based on bootstrap grid system)
+      // So in order to offer a better drop zone we add the _TEMP_ div to complete the remaining substract (12 - existing)
+      // Those divs cannot be dragged
+      // If we wanted to offer the ability to create new lines in the layout (which will come later)
+      // We will need to add a 12 size _TEMP_ div to offer a drop target between each existing row.
+      return name !== '_TEMP_';
+    },
+    collect: monitor => ({
+      isDragging: monitor.isDragging(),
+      getItem: monitor.getItem(),
+    }),
+    end: () => {
+      setIsDraggingSibling(false);
+    },
+    item: { type: ItemTypes.EDIT_FIELD, itemIndex, rowIndex, name, size },
+  });
+
+  // Remove the default preview when the item is being dragged
+  // The preview is handled by the DragLayer
+  useEffect(() => {
+    preview(getEmptyImage(), { captureDraggingState: true });
+  }, [preview]);
+
+  // Create the refs
+  // We need 1 for the drop target
+  // 1 for the drag target
+  const refs = {
+    dragRef: drag(dragRef),
+    dropRef: drop(dropRef),
+  };
+
+  let showLeftCarret = false;
+  let showRightCarret = false;
+
+  if (dropRef.current && clientOffset) {
+    const hoverBoundingRect = dropRef.current.getBoundingClientRect();
+
+    showLeftCarret =
+      isOver &&
+      getItem.size !== 12 &&
+      Math.abs(clientOffset.x - hoverBoundingRect.left) <
+        hoverBoundingRect.width / 2;
+    showRightCarret =
+      isOver &&
+      getItem.size !== 12 &&
+      Math.abs(clientOffset.x - hoverBoundingRect.left) >
+        hoverBoundingRect.width / 2;
+
+    if (name === '_TEMP_') {
+      showLeftCarret = isOver && getItem.size !== 12;
+      showRightCarret = false;
+    }
+  }
+
+  return (
+    <DraggedFieldWithPreview
+      goTo={goTo}
+      componentUid={componentUid}
+      componentLayouts={componentLayouts}
+      dynamicZoneComponents={dynamicZoneComponents}
+      isDragging={isDragging}
+      label={get(metadatas, [name, 'edit', 'label'], '')}
+      name={name}
+      onClickEdit={setEditFieldToSelect}
+      onClickRemove={e => {
+        e.stopPropagation();
+        removeField(rowIndex, itemIndex);
+      }}
+      selectedItem={selectedItemName}
+      showLeftCarret={showLeftCarret}
+      showRightCarret={showRightCarret}
+      size={size}
+      type={type}
+      ref={refs}
+    />
+  );
+};
+
+Item.defaultProps = {
+  componentUid: '',
+  dynamicZoneComponents: [],
+  type: 'string',
+};
+
+Item.propTypes = {
+  componentUid: PropTypes.string,
+  dynamicZoneComponents: PropTypes.array,
+  itemIndex: PropTypes.number.isRequired,
+  moveItem: PropTypes.func.isRequired,
+  moveRow: PropTypes.func.isRequired,
+  name: PropTypes.string.isRequired,
+  removeField: PropTypes.func.isRequired,
+  rowIndex: PropTypes.number.isRequired,
+  size: PropTypes.number.isRequired,
+  type: PropTypes.string,
+};
+
+export default Item;

package/admin/src/components/FieldsReorder/components.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  display: flex;
+  margin-bottom: 6px;
+`;
+
+export default Wrapper;