@strapi/admin 4.6.0-alpha.1 → 4.6.0-beta.1

package/admin/src/content-manager/components/RelationInputDataManager/RelationInputDataManager.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-nested-ternary */
 import PropTypes from 'prop-types';
-import React, { memo, useMemo } from 'react';
+import React, { memo, useMemo, useState } from 'react';
 import { useIntl } from 'react-intl';
 import get from 'lodash/get';
 import pick from 'lodash/pick';
@@ -36,11 +36,20 @@ export const RelationInputDataManager = ({
   size,
   targetModel,
 }) => {
+  const [liveText, setLiveText] = useState('');
+
   const { formatMessage } = useIntl();
-  const { connectRelation, disconnectRelation, loadRelation, modifiedData, slug, initialData } =
-    useCMEditViewDataManager();
+  const {
+    slug,
+    initialData,
+    modifiedData,
+    relationConnect,
+    relationDisconnect,
+    relationLoad,
+    relationReorder,
+  } = useCMEditViewDataManager();
 
-  const relationsFromModifiedData = get(modifiedData, name) ?? [];
+  const relationsFromModifiedData = get(modifiedData, name, []);
 
   const currentLastPage = Math.ceil(get(initialData, name, []).length / RELATIONS_TO_DISPLAY);
 
@@ -54,7 +63,7 @@ export const RelationInputDataManager = ({
         ...defaultParams,
         pageSize: RELATIONS_TO_DISPLAY,
       },
-      onLoad: loadRelation,
+      onLoad: relationLoad,
       normalizeArguments: {
         mainFieldName: mainField.name,
         shouldAddLink: shouldDisplayRelationLink,
@@ -104,11 +113,11 @@ export const RelationInputDataManager = ({
       targetModel,
     });
 
-    connectRelation({ name, value: normalizedRelation, toOneRelation });
+    relationConnect({ name, value: normalizedRelation, toOneRelation });
   };
 
   const handleRelationDisconnect = (relation) => {
-    disconnectRelation({ name, id: relation.id });
+    relationDisconnect({ name, id: relation.id });
   };
 
   const handleRelationLoadMore = () => {
@@ -130,6 +139,105 @@ export const RelationInputDataManager = ({
   const handleSearchMore = () => {
     search.fetchNextPage();
   };
+  /**
+   *
+   * @param {number} index
+   * @returns {string}
+   */
+  const getItemPos = (index) => `${index + 1} of ${relationsFromModifiedData.length}`;
+
+  /**
+   *
+   * @param {number} currentIndex
+   * @param {number} oldIndex
+   */
+  const handleRelationReorder = (oldIndex, newIndex) => {
+    const item = relationsFromModifiedData[oldIndex];
+
+    setLiveText(
+      formatMessage(
+        {
+          id: getTrad('dnd.reorder'),
+          defaultMessage: '{item}, moved. New position in list: {position}.',
+        },
+        {
+          item: item.mainField ?? item.id,
+          position: getItemPos(newIndex),
+        }
+      )
+    );
+
+    relationReorder({
+      name,
+      newIndex,
+      oldIndex,
+    });
+  };
+
+  /**
+   *
+   * @param {number} index
+   * @returns {void}
+   */
+  const handleGrabItem = (index) => {
+    const item = relationsFromModifiedData[index];
+
+    setLiveText(
+      formatMessage(
+        {
+          id: getTrad('dnd.grab-item'),
+          defaultMessage: `{item}, grabbed. Current position in list: {position}. Press up and down arrow to change position, Spacebar to drop, Escape to cancel.`,
+        },
+        {
+          item: item.mainField ?? item.id,
+          position: getItemPos(index),
+        }
+      )
+    );
+  };
+
+  /**
+   *
+   * @param {number} index
+   * @returns {void}
+   */
+  const handleDropItem = (index) => {
+    const item = relationsFromModifiedData[index];
+
+    setLiveText(
+      formatMessage(
+        {
+          id: getTrad('dnd.drop-item'),
+          defaultMessage: `{item}, dropped. Final position in list: {position}.`,
+        },
+        {
+          item: item.mainField ?? item.id,
+          position: getItemPos(index),
+        }
+      )
+    );
+  };
+
+  /**
+   *
+   * @param {number} index
+   * @returns {void}
+   */
+  const handleCancel = (index) => {
+    const item = relationsFromModifiedData[index];
+
+    setLiveText(
+      formatMessage(
+        {
+          id: getTrad('dnd.cancel-item'),
+          defaultMessage: '{item}, dropped. Re-order cancelled.',
+        },
+        {
+          item: item.mainField ?? item.id,
+        }
+      )
+    );
+  };
 
   if (
     (!isFieldAllowed && isCreatingEntry) ||
@@ -163,8 +271,13 @@ export const RelationInputDataManager = ({
   return (
     <RelationInput
       error={error}
+      canReorder={!toOneRelation}
       description={description}
       disabled={isDisabled}
+      iconButtonAriaLabel={formatMessage({
+        id: getTrad('components.RelationInput.icon-button-aria-label'),
+        defaultMessage: 'Drag',
+      })}
       id={name}
       label={`${formatMessage({
         id: intlLabel.id,
@@ -183,7 +296,12 @@ export const RelationInputDataManager = ({
         id: getTrad('relation.disconnect'),
         defaultMessage: 'Remove',
       })}
+      listAriaDescription={formatMessage({
+        id: getTrad('dnd.instructions'),
+        defaultMessage: `Press spacebar to grab and re-order`,
+      })}
       listHeight={320}
+      liveText={liveText}
       loadingMessage={formatMessage({
         id: getTrad('relation.isLoading'),
         defaultMessage: 'Relations are loading',
@@ -194,9 +312,13 @@ export const RelationInputDataManager = ({
         defaultMessage: 'No relations available',
       })}
       numberOfRelationsToDisplay={RELATIONS_TO_DISPLAY}
-      onRelationConnect={(relation) => handleRelationConnect(relation)}
-      onRelationDisconnect={(relation) => handleRelationDisconnect(relation)}
-      onRelationLoadMore={() => handleRelationLoadMore()}
+      onDropItem={handleDropItem}
+      onGrabItem={handleGrabItem}
+      onCancel={handleCancel}
+      onRelationConnect={handleRelationConnect}
+      onRelationDisconnect={handleRelationDisconnect}
+      onRelationLoadMore={handleRelationLoadMore}
+      onRelationReorder={handleRelationReorder}
       onSearch={(term) => handleSearch(term)}
       onSearchNextPage={() => handleSearchMore()}
       placeholder={formatMessage(

package/admin/src/content-manager/components/RepeatableComponent/components/Accordion.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import styled from 'styled-components';
+import { Box, Typography, KeyboardNavigable } from '@strapi/design-system';
+
+export const Footer = styled(Box)`
+  overflow: hidden;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral200};
+  border-right: 1px solid ${({ theme }) => theme.colors.neutral200};
+  border-left: 1px solid ${({ theme }) => theme.colors.neutral200};
+  border-radius: 0 0 ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius};
+`;
+
+export const Content = styled(Box)`
+  border-bottom: none;
+
+  /* add the borders and make sure the top is transparent to avoid jumping with the hover effect  */
+  & > div > div {
+    border: 1px solid ${({ theme }) => theme.colors.neutral200};
+    border-top-color: transparent;
+  }
+
+  /* the top accordion _does_ need a border though */
+  & > div:first-child > div {
+    border-top: 1px solid ${({ theme }) => theme.colors.neutral200};
+  }
+
+  /* Reset all the border-radius' */
+  & > div > div,
+  & > div > div > div {
+    border-radius: unset;
+  }
+
+  /* Give the border radius back to the first accordion */
+  & > div:first-child > div,
+  & > div:first-child > div > div {
+    border-radius: ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius} 0 0;
+  }
+
+  & > div > div[data-strapi-expanded='true'] {
+    border: 1px solid ${({ theme }) => theme.colors.primary600};
+  }
+`;
+
+export const Group = ({ children, error }) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <KeyboardNavigable attributeName="data-strapi-accordion-toggle">
+      {children}
+      {error && (
+        <Box paddingTop={1}>
+          <Typography variant="pi" textColor="danger600">
+            {formatMessage(
+              { id: error.id, defaultMessage: error.defaultMessage },
+              { ...error.values }
+            )}
+          </Typography>
+        </Box>
+      )}
+    </KeyboardNavigable>
+  );
+};
+
+Group.defaultProps = {
+  error: undefined,
+};
+
+Group.propTypes = {
+  children: PropTypes.node.isRequired,
+  error: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    defaultMessage: PropTypes.string.isRequired,
+    values: PropTypes.object,
+  }),
+};

package/admin/src/content-manager/components/RepeatableComponent/components/Component.js

@@ -0,0 +1,262 @@
+/* eslint-disable import/no-cycle */
+import React, { memo, useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { getEmptyImage } from 'react-dnd-html5-backend';
+import styled from 'styled-components';
+import { useIntl } from 'react-intl';
+import toString from 'lodash/toString';
+import get from 'lodash/get';
+
+import { useCMEditViewDataManager } from '@strapi/helper-plugin';
+import {
+  Accordion,
+  AccordionToggle,
+  AccordionContent,
+  Grid,
+  GridItem,
+  Stack,
+  Box,
+  IconButton,
+} from '@strapi/design-system';
+import { Trash, Drag } from '@strapi/icons';
+
+import { useDragAndDrop } from '../../../hooks/useDragAndDrop';
+
+import { composeRefs, getTrad, ItemTypes } from '../../../utils';
+
+import Inputs from '../../Inputs';
+import FieldComponent from '../../FieldComponent';
+
+import Preview from './Preview';
+import useLazyComponents from '../../../hooks/useLazyComponents';
+
+const CustomIconButton = styled(IconButton)`
+  background-color: transparent;
+
+  svg {
+    path {
+      fill: ${({ theme, expanded }) =>
+        expanded ? theme.colors.primary600 : theme.colors.neutral600};
+    }
+  }
+
+  &:hover {
+    svg {
+      path {
+        fill: ${({ theme }) => theme.colors.primary600};
+      }
+    }
+  }
+`;
+
+const ActionsStack = styled(Stack)`
+  & .drag-handle {
+    background: unset;
+
+    svg {
+      path {
+        fill: ${({ theme, expanded }) => (expanded ? theme.colors.primary600 : undefined)};
+      }
+    }
+
+    &:hover {
+      svg {
+        path {
+          /* keeps the hover style of the accordion */
+          fill: ${({ theme }) => theme.colors.primary600};
+        }
+      }
+    }
+  }
+`;
+
+// Issues:
+// https://github.com/react-dnd/react-dnd/issues/1368
+// https://github.com/frontend-collective/react-sortable-tree/issues/490
+
+const DraggedItem = ({
+  componentFieldName,
+  componentUid,
+  fields,
+  index,
+  isOpen,
+  isReadOnly,
+  mainField,
+  moveComponentField,
+  onClickToggle,
+  toggleCollapses,
+  onGrabItem,
+  onDropItem,
+  onCancel,
+}) => {
+  const { modifiedData, removeRepeatableField, triggerFormValidation } = useCMEditViewDataManager();
+
+  const displayedValue = toString(
+    get(modifiedData, [...componentFieldName.split('.'), mainField], '')
+  );
+  const accordionRef = useRef(null);
+  const { formatMessage } = useIntl();
+
+  const [parentFieldName] = componentFieldName.split('.');
+
+  const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] =
+    useDragAndDrop(!isReadOnly, {
+      type: `${ItemTypes.COMPONENT}_${parentFieldName}`,
+      index,
+      item: {
+        displayedValue,
+      },
+      onMoveItem: moveComponentField,
+      onStart() {
+        // Close all collapses
+        toggleCollapses();
+      },
+      onEnd() {
+        // Update the errors
+        triggerFormValidation();
+      },
+      onGrabItem,
+      onDropItem,
+      onCancel,
+    });
+
+  useEffect(() => {
+    dragPreviewRef(getEmptyImage(), { captureDraggingState: false });
+  }, [dragPreviewRef, index]);
+
+  const composedAccordionRefs = composeRefs(accordionRef, dragRef);
+  const composedBoxRefs = composeRefs(boxRef, dropRef);
+
+  const { lazyComponentStore } = useLazyComponents();
+
+  return (
+    <Box ref={composedBoxRefs}>
+      {isDragging ? (
+        <Preview />
+      ) : (
+        <Accordion expanded={isOpen} onToggle={onClickToggle} id={componentFieldName} size="S">
+          <AccordionToggle
+            action={
+              isReadOnly ? null : (
+                <ActionsStack horizontal spacing={0} expanded={isOpen}>
+                  <CustomIconButton
+                    expanded={isOpen}
+                    noBorder
+                    onClick={() => {
+                      removeRepeatableField(componentFieldName);
+                      toggleCollapses();
+                    }}
+                    label={formatMessage({
+                      id: getTrad('containers.Edit.delete'),
+                      defaultMessage: 'Delete',
+                    })}
+                    icon={<Trash />}
+                  />
+                  <IconButton
+                    className="drag-handle"
+                    ref={composedAccordionRefs}
+                    forwardedAs="div"
+                    role="button"
+                    noBorder
+                    tabIndex={0}
+                    onClick={(e) => e.stopPropagation()}
+                    data-handler-id={handlerId}
+                    label={formatMessage({
+                      id: getTrad('components.DragHandle-label'),
+                      defaultMessage: 'Drag',
+                    })}
+                    onKeyDown={handleKeyDown}
+                  >
+                    <Drag />
+                  </IconButton>
+                </ActionsStack>
+              )
+            }
+            title={displayedValue}
+            togglePosition="left"
+          />
+          <AccordionContent>
+            <Stack background="neutral100" padding={6} spacing={6}>
+              {fields.map((fieldRow, key) => {
+                return (
+                  // eslint-disable-next-line react/no-array-index-key
+                  <Grid gap={4} 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 (
+                          <GridItem col={size} s={12} xs={12} key={name}>
+                            <FieldComponent
+                              componentUid={componentUid}
+                              intlLabel={{
+                                id: metadatas.label,
+                                defaultMessage: metadatas.label,
+                              }}
+                              isRepeatable={fieldSchema.repeatable}
+                              isNested
+                              name={keys}
+                              max={fieldSchema.max}
+                              min={fieldSchema.min}
+                              required={fieldSchema.required}
+                            />
+                          </GridItem>
+                        );
+                      }
+
+                      return (
+                        <GridItem key={keys} col={size} s={12} xs={12}>
+                          <Inputs
+                            componentUid={componentUid}
+                            fieldSchema={fieldSchema}
+                            keys={keys}
+                            metadatas={metadatas}
+                            queryInfos={queryInfos}
+                            size={size}
+                            customFieldInputs={lazyComponentStore}
+                          />
+                        </GridItem>
+                      );
+                    })}
+                  </Grid>
+                );
+              })}
+            </Stack>
+          </AccordionContent>
+        </Accordion>
+      )}
+    </Box>
+  );
+};
+
+DraggedItem.defaultProps = {
+  componentUid: undefined,
+  fields: [],
+  isReadOnly: false,
+  isOpen: false,
+  onGrabItem: undefined,
+  onDropItem: undefined,
+  onCancel: undefined,
+  toggleCollapses() {},
+};
+
+DraggedItem.propTypes = {
+  componentFieldName: PropTypes.string.isRequired,
+  componentUid: PropTypes.string,
+  fields: PropTypes.array,
+  index: PropTypes.number.isRequired,
+  isOpen: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  mainField: PropTypes.string.isRequired,
+  moveComponentField: PropTypes.func.isRequired,
+  onGrabItem: PropTypes.func,
+  onDropItem: PropTypes.func,
+  onCancel: PropTypes.func,
+  onClickToggle: PropTypes.func.isRequired,
+  toggleCollapses: PropTypes.func,
+};
+
+export default memo(DraggedItem);