@strapi/admin 4.0.0-next.12 → 4.0.0-next.16

package/admin/src/content-manager/components/RepeatableComponent/DraggedItem/DragHandleWrapper.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+import { IconButton } from '@strapi/parts/IconButton';
+
+const DragHandleWrapper = styled(IconButton)`
+  cursor: move;
+`;
+
+export default DragHandleWrapper;

package/admin/src/content-manager/components/RepeatableComponent/DraggedItem/Preview.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Box } from '@strapi/parts/Box';
+import { Row } from '@strapi/parts/Row';
+
+const Preview = () => {
+  return (
+    <Box padding={6}>
+      <Box background="primary600" paddingTop={2}>
+        <Row />
+      </Box>
+    </Box>
+  );
+};
+
+export default Preview;

package/admin/src/content-manager/components/RepeatableComponent/DraggedItem/index.js

@@ -1,16 +1,36 @@
 /* eslint-disable import/no-cycle */
-import React, { memo, useEffect, useRef, useState } from 'react';
+import React, { memo, useEffect, useRef } 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 { useIntl } from 'react-intl';
+import toString from 'lodash/toString';
+import styled from 'styled-components';
+import { Accordion, AccordionToggle, AccordionContent } from '@strapi/parts/Accordion';
+import { Box } from '@strapi/parts/Box';
+import { Row } from '@strapi/parts/Row';
+import { IconButton } from '@strapi/parts/IconButton';
+import { Grid, GridItem } from '@strapi/parts/Grid';
+import { Stack } from '@strapi/parts/Stack';
+import DeleteIcon from '@strapi/icons/DeleteIcon';
+import DragHandle from '@strapi/icons/Drag';
 import ItemTypes from '../../../utils/ItemTypes';
+import getTrad from '../../../utils/getTrad';
 import Inputs from '../../Inputs';
 import FieldComponent from '../../FieldComponent';
-import Banner from '../Banner';
-import FormWrapper from '../FormWrapper';
+import DragHandleWrapper from './DragHandleWrapper';
+import Preview from './Preview';
 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 StyledBox = styled(Box)`
+  > div {
+    overflow: visible;
+  }
+`;
+
 /* eslint-disable react/no-array-index-key */
 
 // Issues:
@@ -19,12 +39,14 @@ import { connect, select } from './utils';
 
 const DraggedItem = ({
   componentFieldName,
-  doesPreviousFieldContainErrorsAndIsOpen,
-  hasErrors,
-  hasMinError,
-  isFirst,
-  isReadOnly,
+  // FIXME: errors
+  // doesPreviousFieldContainErrorsAndIsOpen,
+  // hasErrors,
+  // hasMinError,
+  // isFirst,
+  isOdd,
   isOpen,
+  isReadOnly,
   onClickToggle,
   schema,
   toggleCollapses,
@@ -32,21 +54,15 @@ const DraggedItem = ({
   moveComponentField,
   removeRepeatableField,
   triggerFormValidation,
-  checkFormErrors,
+  // checkFormErrors,
   displayedValue,
 }) => {
   const dragRef = useRef(null);
   const dropRef = useRef(null);
-  const [showForm, setShowForm] = useState(false);
+  const { formatMessage } = useIntl();
 
   const fields = schema.layouts.edit;
 
-  useEffect(() => {
-    if (isOpen) {
-      setShowForm(true);
-    }
-  }, [isOpen]);
-
   const [, drop] = useDrop({
     accept: ItemTypes.COMPONENT,
     canDrop() {
@@ -139,94 +155,119 @@ const DraggedItem = ({
   };
 
   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;
+    <StyledBox ref={refs ? refs.dropRef : null}>
+      {isDragging && <Preview />}
+      {!isDragging && (
+        <Accordion expanded={isOpen} toggle={onClickToggle} id={componentFieldName}>
+          <AccordionToggle
+            variant={isOdd ? 'primary' : 'secondary'}
+            title={toString(displayedValue)}
+            togglePosition="left"
+            action={
+              isReadOnly ? null : (
+                <Row>
+                  <IconButton
+                    onClick={() => {
+                      removeRepeatableField(componentFieldName);
+                      toggleCollapses();
+                    }}
+                    label={formatMessage({
+                      id: getTrad('containers.Edit.delete'),
+                      defaultMessage: 'Edit',
+                    })}
+                    icon={<DeleteIcon />}
+                  />
+                  <Box paddingLeft={2}>
+                    <DragHandleWrapper
+                      ref={refs.dragRef}
+                      label={formatMessage({
+                        id: getTrad('components.DragHandle-label'),
+                        defaultMessage: 'Drag',
+                      })}
+                      icon={<DragHandle />}
+                    />
+                  </Box>
+                </Row>
+              )
+            }
+          />
+          <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;
+
+                          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}
+                              />
+                            </GridItem>
+                          );
+                        }
 
                         return (
-                          <FieldComponent
-                            componentUid={componentUid}
-                            isRepeatable={fieldSchema.repeatable}
-                            key={name}
-                            label={metadatas.label}
-                            isNested
-                            name={keys}
-                            max={fieldSchema.max}
-                            min={fieldSchema.min}
-                          />
+                          <GridItem key={keys} col={size} s={12} xs={12}>
+                            <Inputs
+                              fieldSchema={fieldSchema}
+                              keys={keys}
+                              metadatas={metadatas}
+                              // onBlur={hasErrors ? checkFormErrors : null}
+                              queryInfos={queryInfos}
+                            />
+                          </GridItem>
                         );
-                      }
-
-                      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>
-    </>
+                      })}
+                    </Grid>
+                  );
+                })}
+              </Stack>
+            </Box>
+          </AccordionContent>
+        </Accordion>
+      )}
+    </StyledBox>
   );
 };
 
 DraggedItem.defaultProps = {
-  doesPreviousFieldContainErrorsAndIsOpen: false,
-  hasErrors: false,
-  hasMinError: false,
-  isFirst: false,
+  // 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,
+  // doesPreviousFieldContainErrorsAndIsOpen: PropTypes.bool,
+  // hasErrors: PropTypes.bool,
+  // hasMinError: PropTypes.bool,
+  // isFirst: PropTypes.bool,
+  isOdd: PropTypes.bool.isRequired,
   isOpen: PropTypes.bool,
   isReadOnly: PropTypes.bool.isRequired,
   onClickToggle: PropTypes.func.isRequired,
@@ -235,12 +276,15 @@ DraggedItem.propTypes = {
   moveComponentField: PropTypes.func.isRequired,
   removeRepeatableField: PropTypes.func.isRequired,
   triggerFormValidation: PropTypes.func.isRequired,
-  checkFormErrors: PropTypes.func.isRequired,
+  // checkFormErrors: PropTypes.func.isRequired,
   displayedValue: PropTypes.string.isRequired,
 };
 
 const Memoized = memo(DraggedItem);
 
-export default connect(Memoized, select);
+export default connect(
+  Memoized,
+  select
+);
 
 export { DraggedItem };

package/admin/src/content-manager/components/RepeatableComponent/DraggedItem/utils/select.js

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import { get, toString } from 'lodash';
-import { useContentManagerEditViewDataManager } from '@strapi/helper-plugin';
+import { useCMEditViewDataManager } from '@strapi/helper-plugin';
 
 function useSelect({ schema, componentFieldName }) {
   const {
@@ -9,7 +9,7 @@ function useSelect({ schema, componentFieldName }) {
     moveComponentField,
     removeRepeatableField,
     triggerFormValidation,
-  } = useContentManagerEditViewDataManager();
+  } = useCMEditViewDataManager();
 
   const mainField = useMemo(() => get(schema, ['settings', 'mainField'], 'id'), [schema]);
   const displayedValue = toString(

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

@@ -2,18 +2,20 @@ 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 get from 'lodash/get';
+import take from 'lodash/take';
+// import { FormattedMessage } from 'react-intl';
 import { useNotification } from '@strapi/helper-plugin';
-import { ErrorMessage } from '@buffetjs/styles';
+import { Box } from '@strapi/parts/Box';
+// import { ErrorMessage } from '@buffetjs/styles';
 import { getMaxTempKey, getTrad } from '../../utils';
 import { useContentTypeLayout } from '../../hooks';
 import ItemTypes from '../../utils/ItemTypes';
+import ComponentInitializer from '../ComponentInitializer';
 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,
@@ -24,7 +26,7 @@ const RepeatableComponent = ({
   isNested,
   isReadOnly,
   max,
-  min,
+  // min,
   name,
 }) => {
   const toggleNotification = useNotification();
@@ -54,7 +56,8 @@ const RepeatableComponent = ({
   const toggleCollapses = () => {
     setCollapseToOpen('');
   };
-  const missingComponentsValue = min - componentValueLength;
+  // TODO
+  // const missingComponentsValue = min - componentValueLength;
   const errorsArray = componentErrorKeys.map(key => get(formErrors, [key, 'id'], ''));
 
   const hasMinError = get(errorsArray, [0], '').includes('min');
@@ -86,83 +89,144 @@ const RepeatableComponent = ({
     toggleNotification,
   ]);
 
+  if (componentValueLength === 0) {
+    return <ComponentInitializer isReadOnly={isReadOnly} onClick={handleClick} />;
+  }
+
   return (
-    <div>
-      {componentValueLength === 0 && (
-        <EmptyComponent hasMinError={hasMinError}>
-          <FormattedMessage id={getTrad('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>
+    <Box hasRadius borderColor="neutral200">
+      <Box ref={drop}>
+        {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}
+              // TODO
+              doesPreviousFieldContainErrorsAndIsOpen={doesPreviousFieldContainErrorsAndIsOpen}
+              hasErrors={hasErrors}
+              hasMinError={hasMinError}
+              isFirst={index === 0}
+              isOdd={index % 2 === 1}
+              isOpen={isOpen}
+              isReadOnly={isReadOnly}
+              key={key}
+              onClickToggle={() => {
+                if (isOpen) {
+                  setCollapseToOpen('');
+                } else {
+                  setCollapseToOpen(key);
+                }
+              }}
+              parentName={name}
+              schema={componentLayoutData}
+              toggleCollapses={toggleCollapses}
+            />
+          );
+        })}
+      </Box>
       <Button
-        hasMinError={hasMinError}
+        // TODO
+        // hasMinError={hasMinError}
         disabled={isReadOnly}
-        withBorderRadius={false}
-        doesPreviousFieldContainErrorsAndIsClosed={
-          componentValueLength > 0 &&
-          componentErrorKeys.includes(`${name}.${componentValueLength - 1}`) &&
-          componentValue[componentValueLength - 1].__temp_key__ !== collapseToOpen
-        }
-        type="button"
+        // TODO
+        // doesPreviousFieldContainErrorsAndIsClosed={
+        //   componentValueLength > 0 &&
+        //   componentErrorKeys.includes(`${name}.${componentValueLength - 1}`) &&
+        //   componentValue[componentValueLength - 1].__temp_key__ !== collapseToOpen
+        // }
         onClick={handleClick}
-      >
-        <i className="fa fa-plus" />
-        <FormattedMessage id={getTrad('containers.EditView.add.new')} />
-      </Button>
-      {hasMinError && (
-        <ErrorMessage>
-          <FormattedMessage
-            id={getTrad(
-              `components.DynamicZone.missing${
-                missingComponentsValue > 1 ? '.plural' : '.singular'
-              }`
-            )}
-            values={{ count: missingComponentsValue }}
-          />
-        </ErrorMessage>
-      )}
-    </div>
+      />
+    </Box>
   );
+
+  // return (
+  //   <div>
+  //     {componentValueLength === 0 && (
+  //       <EmptyComponent hasMinError={hasMinError}>
+  //         <FormattedMessage id={getTrad('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={getTrad('containers.EditView.add.new')} />
+  //     </Button>
+  //     {hasMinError && (
+  //       <ErrorMessage>
+  //         <FormattedMessage
+  //           id={getTrad(
+  //             `components.DynamicZone.missing${
+  //               missingComponentsValue > 1 ? '.plural' : '.singular'
+  //             }`
+  //           )}
+  //           values={{ count: missingComponentsValue }}
+  //         />
+  //       </ErrorMessage>
+  //     )}
+  //   </div>
+  // );
 };
 
 RepeatableComponent.defaultProps = {
@@ -171,7 +235,7 @@ RepeatableComponent.defaultProps = {
   formErrors: {},
   isNested: false,
   max: Infinity,
-  min: -Infinity,
+  // min: -Infinity,
 };
 
 RepeatableComponent.propTypes = {
@@ -183,7 +247,7 @@ RepeatableComponent.propTypes = {
   isNested: PropTypes.bool,
   isReadOnly: PropTypes.bool.isRequired,
   max: PropTypes.number,
-  min: PropTypes.number,
+  // min: PropTypes.number,
   name: PropTypes.string.isRequired,
 };
 

package/admin/src/content-manager/components/RepeatableComponent/utils/select.js

@@ -1,7 +1,7 @@
-import { useContentManagerEditViewDataManager } from '@strapi/helper-plugin';
+import { useCMEditViewDataManager } from '@strapi/helper-plugin';
 
 function useSelect() {
-  const { addRepeatableComponentToField, formErrors } = useContentManagerEditViewDataManager();
+  const { addRepeatableComponentToField, formErrors } = useCMEditViewDataManager();
 
   return {
     addRepeatableComponentToField,