@akemona-org/strapi-plugin-content-type-builder 3.7.0

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

@@ -0,0 +1,295 @@
+/**
+ *
+ * List
+ *
+ */
+
+/* eslint-disable import/no-cycle */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { get } from 'lodash';
+import { useGlobalContext, ListButton } from 'strapi-helper-plugin';
+import { Button } from '@buffetjs/core';
+import { Plus } from '@buffetjs/icons';
+
+import pluginId from '../../pluginId';
+import useListView from '../../hooks/useListView';
+import useDataManager from '../../hooks/useDataManager';
+import DynamicZoneList from '../DynamicZoneList';
+import ComponentList from '../ComponentList';
+import Wrapper from './List';
+
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+
+function List({
+  className,
+  customRowComponent,
+  items,
+  addComponentToDZ,
+  targetUid,
+  mainTypeName,
+  editTarget,
+  isFromDynamicZone,
+  isNestedInDZComponent,
+  isMain,
+  firstLoopComponentName,
+  firstLoopComponentUid,
+  secondLoopComponentName,
+  secondLoopComponentUid,
+  isSub,
+  dzName,
+}) {
+  const { formatMessage, emitEvent } = useGlobalContext();
+  const { isInDevelopmentMode, modifiedData } = useDataManager();
+  const { openModalAddField } = useListView();
+  const onClickAddField = () => {
+    emitEvent('hasClickedCTBAddFieldBanner');
+    const firstComponentIcon = get(
+      modifiedData,
+      ['components', firstLoopComponentUid, 'schema', 'icon'],
+      ''
+    );
+    const firstComponentCategory = get(
+      modifiedData,
+      ['components', firstLoopComponentUid, 'category'],
+      null
+    );
+    const firstComponentFriendlyName = get(
+      modifiedData,
+      ['components', firstLoopComponentUid, 'schema', 'name'],
+      null
+    );
+    const secondComponentCategory = get(
+      modifiedData,
+      ['components', secondLoopComponentUid, 'category'],
+      null
+    );
+    const secondComponentFriendlyName = get(
+      modifiedData,
+      ['components', secondLoopComponentUid, 'schema', 'name'],
+      null
+    );
+    const secondComponentIcon = get(
+      modifiedData,
+      ['components', secondLoopComponentUid, 'schema', 'icon'],
+      ''
+    );
+    const headerIconName1 =
+      editTarget === 'contentType'
+        ? get(modifiedData, ['contentType', 'schema', 'kind'], null)
+        : editTarget;
+
+    let firstHeaderObject = {
+      header_label_1: mainTypeName,
+      header_icon_name_1: headerIconName1,
+      header_icon_isCustom_1: false,
+      header_info_category_1: null,
+      header_info_name_1: null,
+    };
+    let secondHeaderObject = {
+      header_label_2: firstLoopComponentName,
+      header_icon_name_2: 'component',
+      header_icon_isCustom_2: false,
+      header_info_category_2: firstComponentCategory,
+      header_info_name_2: firstComponentFriendlyName,
+    };
+    let thirdHeaderObject = {
+      header_icon_name_3: 'component',
+      header_icon_isCustom_3: false,
+      header_info_category_3: secondComponentCategory,
+      header_info_name_3: secondComponentFriendlyName,
+    };
+    let fourthHeaderObject = {
+      header_icon_name_4: null,
+      header_icon_isCustom_4: false,
+      header_info_category_4: secondComponentCategory,
+      header_info_name_4: secondComponentFriendlyName,
+    };
+
+    if (firstLoopComponentName) {
+      firstHeaderObject = {
+        ...firstHeaderObject,
+        header_icon_name_1: firstComponentIcon,
+        header_icon_isCustom_1: true,
+      };
+    }
+
+    if (secondLoopComponentUid) {
+      firstHeaderObject = {
+        ...firstHeaderObject,
+        header_icon_name_1: secondComponentIcon,
+        header_icon_isCustom_1: true,
+      };
+      thirdHeaderObject = {
+        ...thirdHeaderObject,
+        header_label_3: secondLoopComponentName,
+      };
+    }
+
+    if (isFromDynamicZone || isNestedInDZComponent) {
+      secondHeaderObject = {
+        ...secondHeaderObject,
+        header_label_2: dzName,
+        header_icon_name_2: 'dynamiczone',
+        header_icon_isCustom_2: false,
+        header_info_category_2: null,
+        header_info_name_2: null,
+      };
+      thirdHeaderObject = {
+        ...thirdHeaderObject,
+        header_icon_name_3: isNestedInDZComponent ? 'component' : null,
+        header_label_3: firstLoopComponentName,
+        header_info_category_3: firstComponentCategory,
+        header_info_name_3: firstComponentFriendlyName,
+      };
+      fourthHeaderObject = {
+        ...fourthHeaderObject,
+        header_label_4: secondLoopComponentName,
+      };
+    }
+
+    openModalAddField(
+      editTarget,
+      targetUid,
+      firstHeaderObject,
+      secondHeaderObject,
+      thirdHeaderObject,
+      fourthHeaderObject
+    );
+  };
+
+  /* eslint-disable indent */
+  const addButtonProps = {
+    icon: !isSub ? <Plus fill="#007eff" width="11px" height="11px" /> : false,
+    color: 'primary',
+    label: isInDevelopmentMode
+      ? formatMessage({
+          id: !isSub
+            ? `${pluginId}.form.button.add.field.to.${
+                modifiedData.contentType
+                  ? modifiedData.contentType.schema.kind
+                  : editTarget || 'collectionType'
+              }`
+            : `${pluginId}.form.button.add.field.to.component`,
+          defaultMessage: 'Add another field',
+        })
+      : null,
+    onClick: onClickAddField,
+  };
+  /* eslint-enable indent */
+
+  if (!targetUid) {
+    return null;
+  }
+
+  return (
+    <>
+      <Wrapper className={className} isFromDynamicZone={isFromDynamicZone}>
+        <table>
+          <tbody>
+            {items.map(item => {
+              const { type } = item;
+              const CustomRow = customRowComponent;
+
+              return (
+                <React.Fragment key={item.name}>
+                  <CustomRow
+                    {...item}
+                    dzName={dzName}
+                    isNestedInDZComponent={isNestedInDZComponent}
+                    targetUid={targetUid}
+                    mainTypeName={mainTypeName}
+                    editTarget={editTarget}
+                    firstLoopComponentName={firstLoopComponentName}
+                    firstLoopComponentUid={firstLoopComponentUid}
+                    isFromDynamicZone={isFromDynamicZone}
+                    secondLoopComponentName={secondLoopComponentName}
+                    secondLoopComponentUid={secondLoopComponentUid}
+                  />
+
+                  {type === 'component' && (
+                    <ComponentList
+                      {...item}
+                      customRowComponent={customRowComponent}
+                      targetUid={targetUid}
+                      dzName={dzName}
+                      isNestedInDZComponent={isFromDynamicZone}
+                      mainTypeName={mainTypeName}
+                      editTarget={editTarget}
+                      firstLoopComponentName={firstLoopComponentName}
+                      firstLoopComponentUid={firstLoopComponentUid}
+                    />
+                  )}
+
+                  {type === 'dynamiczone' && (
+                    <DynamicZoneList
+                      {...item}
+                      customRowComponent={customRowComponent}
+                      addComponent={addComponentToDZ}
+                      targetUid={targetUid}
+                      mainTypeName={mainTypeName}
+                    />
+                  )}
+                </React.Fragment>
+              );
+            })}
+          </tbody>
+        </table>
+        {isMain && isInDevelopmentMode && (
+          <ListButton>
+            <Button {...addButtonProps} />
+          </ListButton>
+        )}
+        {!isMain && (
+          <ListButton>
+            <Button {...addButtonProps} />
+          </ListButton>
+        )}
+      </Wrapper>
+      {isSub && (
+        <div className="plus-icon" onClick={onClickAddField}>
+          {isInDevelopmentMode && <Plus fill={isFromDynamicZone ? '#007EFF' : '#b4b6ba'} />}
+        </div>
+      )}
+    </>
+  );
+}
+
+List.defaultProps = {
+  addComponentToDZ: () => {},
+  className: null,
+  customRowComponent: null,
+  dzName: null,
+  firstLoopComponentName: null,
+  firstLoopComponentUid: null,
+  isFromDynamicZone: false,
+  isNestedInDZComponent: false,
+  isMain: false,
+  isSub: false,
+  items: [],
+  secondLoopComponentName: null,
+  secondLoopComponentUid: null,
+  targetUid: null,
+};
+
+List.propTypes = {
+  addComponentToDZ: PropTypes.func,
+  className: PropTypes.string,
+  customRowComponent: PropTypes.func,
+  dzName: PropTypes.string,
+  editTarget: PropTypes.string.isRequired,
+  firstLoopComponentName: PropTypes.string,
+  firstLoopComponentUid: PropTypes.string,
+  isFromDynamicZone: PropTypes.bool,
+  isNestedInDZComponent: PropTypes.bool,
+  isMain: PropTypes.bool,
+  items: PropTypes.instanceOf(Array),
+  mainTypeName: PropTypes.string.isRequired,
+  secondLoopComponentName: PropTypes.string,
+  secondLoopComponentUid: PropTypes.string,
+  targetUid: PropTypes.string,
+  isSub: PropTypes.bool,
+};
+
+export default List;

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

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+import { Button } from '@buffetjs/core';
+
+const ListHeaderButton = styled(Button)`
+  padding-left: 15px;
+  padding-right: 15px;
+`;
+
+export default ListHeaderButton;

package/admin/src/components/ListHeader/Title.js

@@ -0,0 +1,19 @@
+/**
+ *
+ * Title
+ *
+ */
+
+import styled from 'styled-components';
+import { colors } from 'strapi-helper-plugin';
+
+const Title = styled.p`
+  margin-bottom: 0;
+  color: ${colors.blueTxt};
+  font-family: 'Lato';
+  font-size: 1.8rem;
+  font-weight: bold;
+  line-height: 2.2rem;
+`;
+
+export default Title;

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

@@ -0,0 +1,24 @@
+/**
+ *
+ * Wrapper
+ *
+ */
+
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  position: relative;
+  padding: 2.1rem 6rem 1.7rem 3rem;
+  background-color: white;
+  .list-header-actions {
+    position: absolute;
+    top: 1.8rem;
+    right: 3rem;
+    button {
+      outline: 0;
+      margin-left: 10px;
+    }
+  }
+`;
+
+export default Wrapper;

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Title from './Title';
+import Wrapper from './Wrapper';
+
+/* eslint-disable react/jsx-one-expression-per-line */
+function ListHeader({ actions, title }) {
+  return (
+    <Wrapper>
+      <div className="list-header-actions">{actions}</div>
+      <div className="list-header-title">
+        {title.map(item => {
+          return <Title key={item}>{item}&nbsp;</Title>;
+        })}
+      </div>
+    </Wrapper>
+  );
+}
+
+ListHeader.defaultProps = {
+  actions: [],
+  title: [],
+};
+
+ListHeader.propTypes = {
+  actions: PropTypes.arrayOf(
+    PropTypes.shape({
+      disabled: PropTypes.bool,
+      onClick: PropTypes.func,
+      title: PropTypes.string,
+    })
+  ),
+  title: PropTypes.arrayOf(PropTypes.string),
+};
+
+export default ListHeader;

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

@@ -0,0 +1,76 @@
+/**
+ *
+ * Wrapper
+ *
+ */
+
+import styled from 'styled-components';
+import { colors } from 'strapi-helper-plugin';
+
+/* eslint-disable indent */
+
+const Wrapper = styled.tr`
+  background-color: transparent;
+  p {
+    margin-bottom: 0;
+  }
+  img {
+    width: 35px;
+  }
+  button {
+    cursor: pointer;
+  }
+  td:first-of-type {
+    padding-left: 3rem;
+    position: relative;
+    img {
+      width: 35px;
+      height: 20px;
+      position: absolute;
+      top: calc(50% - 10px);
+      left: 3rem;
+    }
+    img + p {
+      width: 237px;
+      padding-left: calc(3rem + 35px);
+    }
+  }
+  td:nth-child(2) {
+    ${({ loopNumber }) => {
+      return `
+        width: calc(25rem - ${5 * loopNumber}rem);
+      `;
+    }}
+    p {
+      font-weight: 500;
+    }
+  }
+  td:last-child {
+    text-align: right;
+    &:not(:first-of-type) {
+      font-size: 10px;
+    }
+  }
+  &.relation-row {
+    background: linear-gradient(135deg, rgba(28, 93, 231, 0.05), rgba(239, 243, 253, 0));
+  }
+  &.clickable {
+    &:hover {
+      cursor: pointer;
+      background-color: ${colors.grey};
+      & + tr {
+        &::before {
+          background-color: transparent;
+        }
+      }
+    }
+  }
+  .button-container {
+    svg {
+      color: #333740;
+      vertical-align: middle;
+    }
+  }
+`;
+
+export default Wrapper;