From ffd8ec4f3bb9a05e36a0624730e765009e1b7e45 Mon Sep 17 00:00:00 2001
From: ronronscelestes <julie.plantey@gmail.com>
Date: Fri, 29 Oct 2021 16:36:46 +0200
Subject: [PATCH] added dnd

---
 .../DraggedItem/DragHandleWrapper.js          |   8 -
 .../DraggedItem/IconButtonCustoms.js          |  25 ++
 .../DraggedItem/Preview.js                    |  12 +-
 .../RepeatableComponent/DraggedItem/index.js  | 247 ++++++++----------
 .../components/RepeatableComponent/index.js   |  12 +-
 5 files changed, 143 insertions(+), 161 deletions(-)
 delete mode 100644 packages/core/admin/admin/src/content-manager/components/RepeatableComponent/DraggedItem/DragHandleWrapper.js
 create mode 100644 packages/core/admin/admin/src/content-manager/components/RepeatableComponent/DraggedItem/IconButtonCustoms.js

diff --git a/packages/core/admin/admin/src/content-manager/components/RepeatableComponent/DraggedItem/DragHandleWrapper.js b/packages/core/admin/admin/src/content-manager/components/RepeatableComponent/DraggedItem/DragHandleWrapper.js
deleted file mode 100644
index 058661680b..0000000000
--- a/packages/core/admin/admin/src/content-manager/components/RepeatableComponent/DraggedItem/DragHandleWrapper.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import styled from 'styled-components';
-import { IconButton } from '@strapi/design-system/IconButton';
-
-const DragHandleWrapper = styled(IconButton)`
-  cursor: move;
-`;
-
-export default DragHandleWrapper;
diff --git a/packages/core/admin/admin/src/content-manager/components/RepeatableComponent/DraggedItem/IconButtonCustoms.js b/packages/core/admin/admin/src/content-manager/components/RepeatableComponent/DraggedItem/IconButtonCustoms.js
new file mode 100644
index 0000000000..0548f5d357
--- /dev/null
+++ b/packages/core/admin/admin/src/content-manager/components/RepeatableComponent/DraggedItem/IconButtonCustoms.js
@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+import { IconButton } from '@strapi/design-system/IconButton';
+
+export 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};
+      }
+    }
+  }
+`;
+
+export const DragHandleWrapper = styled(CustomIconButton)`
+  cursor: move;
+`;
diff --git a/packages/core/admin/admin/src/content-manager/components/RepeatableComponent/DraggedItem/Preview.js b/packages/core/admin/admin/src/content-manager/components/RepeatableComponent/DraggedItem/Preview.js
index aa46268519..ffddb4759c 100644
--- a/packages/core/admin/admin/src/content-manager/components/RepeatableComponent/DraggedItem/Preview.js
+++ b/packages/core/admin/admin/src/content-manager/components/RepeatableComponent/DraggedItem/Preview.js
@@ -1,20 +1,14 @@
 import React from 'react';
 import styled from 'styled-components';
 import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
 
 const StyledBox = styled(Box)`
-  border: 1px dashed ${({ theme }) => theme.colors.primary500};
+  outline: 1px dashed ${({ theme }) => theme.colors.primary500};
+  outline-offset: -1px;
 `;
 
 const Preview = () => {
-  return (
-    <StyledBox padding={8} background="primary100">
-      <Box>
-        <Flex />
-      </Box>
-    </StyledBox>
-  );
+  return <StyledBox padding={6} background="primary100" />;
 };
 
 export default Preview;
diff --git a/packages/core/admin/admin/src/content-manager/components/RepeatableComponent/DraggedItem/index.js b/packages/core/admin/admin/src/content-manager/components/RepeatableComponent/DraggedItem/index.js
index 8367084db3..ce7cf04b9a 100644
--- a/packages/core/admin/admin/src/content-manager/components/RepeatableComponent/DraggedItem/index.js
+++ b/packages/core/admin/admin/src/content-manager/components/RepeatableComponent/DraggedItem/index.js
@@ -5,9 +5,7 @@ import { useDrag, useDrop } from 'react-dnd';
 import { getEmptyImage } from 'react-dnd-html5-backend';
 import { useIntl } from 'react-intl';
 import toString from 'lodash/toString';
-import styled from 'styled-components';
 import { Accordion, AccordionToggle, AccordionContent } from '@strapi/design-system/Accordion';
-import { IconButton } from '@strapi/design-system/IconButton';
 import { Grid, GridItem } from '@strapi/design-system/Grid';
 import { Stack } from '@strapi/design-system/Stack';
 import { Box } from '@strapi/design-system/Box';
@@ -18,30 +16,9 @@ import getTrad from '../../../utils/getTrad';
 import Inputs from '../../Inputs';
 import FieldComponent from '../../FieldComponent';
 import Preview from './Preview';
+import { CustomIconButton, DragHandleWrapper } from './IconButtonCustoms';
 import { connect, select } from './utils';
 
-// FIXME
-// Temporary workaround to remove the overflow until we migrate the react-select for the relations
-// to the DS one
-
-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}
-      }
-    }
-  }
-`;
-
 /* eslint-disable react/no-array-index-key */
 
 // Issues:
@@ -165,48 +142,45 @@ const DraggedItem = ({
   };
 
   return (
-    <Box data-strapi-acc>
+    <Box ref={refs ? refs.dropRef : null} data-strapi-is-dragging={isDragging}>
       {isDragging && <Preview />}
-      {!isDragging &&
-        <Accordion 
-          expanded={isOpen} 
-          toggle={onClickToggle} 
-          id={componentFieldName}
-          size="S"
-        >
+      {!isDragging && (
+        <Accordion expanded={isOpen} toggle={onClickToggle} id={componentFieldName} size="S">
           <AccordionToggle
             action={
-              isReadOnly ? null : 
-              <Stack horizontal size={0}>
-                <CustomIconButton 
-                  expanded={isOpen} 
-                  noBorder 
-                  onClick={() => {
-                    removeRepeatableField(componentFieldName);
-                    toggleCollapses();
-                  }}
-                  label={formatMessage({
-                    id: getTrad('containers.Edit.delete'),
-                    defaultMessage: 'Delete',
-                  })}
-                  icon={<Trash />} 
-                />
-                <CustomIconButton
-                  expanded={isOpen} 
-                  noBorder 
-                  label={formatMessage({
-                    id: getTrad('components.DragHandle-label'),
-                    defaultMessage: 'Drag',
-                  })}
-                  icon={<Drag />} 
-                />
-              </Stack>
+              isReadOnly ? null : (
+                <Stack horizontal size={0}>
+                  <CustomIconButton
+                    expanded={isOpen}
+                    noBorder
+                    onClick={() => {
+                      removeRepeatableField(componentFieldName);
+                      toggleCollapses();
+                    }}
+                    label={formatMessage({
+                      id: getTrad('containers.Edit.delete'),
+                      defaultMessage: 'Delete',
+                    })}
+                    icon={<Trash />}
+                  />
+                  <DragHandleWrapper
+                    expanded={isOpen}
+                    icon={<Drag />}
+                    label={formatMessage({
+                      id: getTrad('components.DragHandle-label'),
+                      defaultMessage: 'Drag',
+                    })}
+                    noBorder
+                    ref={refs.dragRef}
+                  />
+                </Stack>
+              )
             }
             title={toString(displayedValue)}
             togglePosition="left"
           />
           <AccordionContent>
-            <Stack background='neutral100' padding={6} size={6}>
+            <Stack background="neutral100" padding={6} size={6}>
               {fields.map((fieldRow, key) => {
                 return (
                   <Grid gap={4} key={key}>
@@ -253,88 +227,89 @@ const DraggedItem = ({
               })}
             </Stack>
           </AccordionContent>
-        </Accordion>}
+        </Accordion>
+      )}
     </Box>
-  //   <StyledBox ref={refs ? refs.dropRef : null}>
-  //     {isDragging && <Preview />}
-  //     {!isDragging && (
-  //       <Accordion expanded={isOpen} toggle={onClickToggle} id={componentFieldName}>
-  //         <AccordionToggle
-  //           action={
-  //             isReadOnly ? null : (
-  //               <Flex>
-  //                 <IconButton
-  //                   icon={<Trash />}
-  //                 />
-  //                 <Box paddingLeft={2}>
-  //                   <DragHandleWrapper
-  //                     ref={refs.dragRef}
-  //                     icon={<Drag />}
-  //                   />
-  //                 </Box>
-  //               </Flex>
-  //             )
-  //           }
-  //         />
-  //         <AccordionContent>
-  //           <Box
-  //             background="neutral100"
-  //             paddingLeft={6}
-  //             paddingRight={6}
-  //             paddingTop={6}
-  //             paddingBottom={6}
-  //           >
-  //             <Stack size={6}>
-  //               {fields.map((fieldRow, key) => {
-  //                 return (
-  //                   <Grid gap={4} key={key}>
-  //                     {fieldRow.map(({ name, fieldSchema, metadatas, queryInfos, size }) => {
-  //                       const isComponent = fieldSchema.type === 'component';
-  //                       const keys = `${componentFieldName}.${name}`;
+    //   <StyledBox ref={refs ? refs.dropRef : null}>
+    //     {isDragging && <Preview />}
+    //     {!isDragging && (
+    //       <Accordion expanded={isOpen} toggle={onClickToggle} id={componentFieldName}>
+    //         <AccordionToggle
+    //           action={
+    //             isReadOnly ? null : (
+    //               <Flex>
+    //                 <IconButton
+    //                   icon={<Trash />}
+    //                 />
+    //                 <Box paddingLeft={2}>
+    //                   <DragHandleWrapper
+    //                     ref={refs.dragRef}
+    //                     icon={<Drag />}
+    //                   />
+    //                 </Box>
+    //               </Flex>
+    //             )
+    //           }
+    //         />
+    //         <AccordionContent>
+    //           <Box
+    //             background="neutral100"
+    //             paddingLeft={6}
+    //             paddingRight={6}
+    //             paddingTop={6}
+    //             paddingBottom={6}
+    //           >
+    //             <Stack size={6}>
+    //               {fields.map((fieldRow, key) => {
+    //                 return (
+    //                   <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;
+    //                       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 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
-  //                             fieldSchema={fieldSchema}
-  //                             keys={keys}
-  //                             metadatas={metadatas}
-  //                             // onBlur={hasErrors ? checkFormErrors : null}
-  //                             queryInfos={queryInfos}
-  //                           />
-  //                         </GridItem>
-  //                       );
-  //                     })}
-  //                   </Grid>
-  //                 );
-  //               })}
-  //             </Stack>
-  //           </Box>
-  //         </AccordionContent>
-  //       </Accordion>
-  //     )}
-  //   </StyledBox>
+    //                       return (
+    //                         <GridItem key={keys} col={size} s={12} xs={12}>
+    //                           <Inputs
+    //                             fieldSchema={fieldSchema}
+    //                             keys={keys}
+    //                             metadatas={metadatas}
+    //                             // onBlur={hasErrors ? checkFormErrors : null}
+    //                             queryInfos={queryInfos}
+    //                           />
+    //                         </GridItem>
+    //                       );
+    //                     })}
+    //                   </Grid>
+    //                 );
+    //               })}
+    //             </Stack>
+    //           </Box>
+    //         </AccordionContent>
+    //       </Accordion>
+    //     )}
+    //   </StyledBox>
   );
 };
 
diff --git a/packages/core/admin/admin/src/content-manager/components/RepeatableComponent/index.js b/packages/core/admin/admin/src/content-manager/components/RepeatableComponent/index.js
index 4c09bdc09a..6579942844 100644
--- a/packages/core/admin/admin/src/content-manager/components/RepeatableComponent/index.js
+++ b/packages/core/admin/admin/src/content-manager/components/RepeatableComponent/index.js
@@ -1,6 +1,6 @@
 import React, { memo, useCallback, useMemo, useState } from 'react';
 /* eslint-disable import/no-cycle */
-// import { useDrop } from 'react-dnd';
+import { useDrop } from 'react-dnd';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
@@ -15,7 +15,7 @@ import Plus from '@strapi/icons/Plus';
 // import { ErrorMessage } from '@buffetjs/styles';
 import { getMaxTempKey, getTrad } from '../../utils';
 import { useContentTypeLayout } from '../../hooks';
-// import ItemTypes from '../../utils/ItemTypes';
+import ItemTypes from '../../utils/ItemTypes';
 import ComponentInitializer from '../ComponentInitializer';
 import connect from './utils/connect';
 import select from './utils/select';
@@ -49,7 +49,7 @@ const RepeatableComponent = ({
   const toggleNotification = useNotification();
   const { formatMessage } = useIntl();
   const [collapseToOpen, setCollapseToOpen] = useState('');
-  // const [, drop] = useDrop({ accept: ItemTypes.COMPONENT });
+  const [, drop] = useDrop({ accept: ItemTypes.COMPONENT });
   const { getComponentLayout } = useContentTypeLayout();
   const componentLayoutData = useMemo(() => getComponentLayout(componentUid), [
     componentUid,
@@ -112,11 +112,7 @@ const RepeatableComponent = ({
   }
 
   return (
-    <Box
-      hasRadius 
-      background='neutral0' 
-      shadow='tableShadow'
-    >
+    <Box hasRadius background="neutral0" shadow="tableShadow" ref={drop}>
       <AccordionGroupCustom
         footer={
           <Flex justifyContent="center" height="48px" background="neutral0" hasRadius>