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

package/admin/src/content-manager/components/DraggedField/Wrapper.js

@@ -1,129 +0,0 @@
-/* eslint-disable */
-
-import styled, { css } from 'styled-components';
-import PropTypes from 'prop-types';
-import getColor from './utils/getColor';
-import getHeight from './utils/getHeight';
-
-const Wrapper = styled.div`
-  ${({ withLongerHeight }) =>
-    !withLongerHeight &&
-    css`
-      height: 30px;
-    `};
-  min-height: ${({ withLongerHeight }) => getHeight(withLongerHeight)};
-  padding: 0 10px 0 0;
-  flex-basis: calc(100% / ${props => props.count});
-  flex-shrink: 1;
-  min-width: 130px;
-  position: relative;
-
-  .sub_wrapper {
-    position: relative;
-    cursor: pointer;
-    background-color: ${({ isOverEditBlock, isOverRemove, isSelected, isSub }) => {
-      if (isOverRemove) {
-        return '#ffe9e0';
-      } else if (isSelected || isOverEditBlock) {
-        return '#e6f0fb';
-      } else if (isSub) {
-        return '#ffffff';
-      } else {
-        return '#F2F3F4';
-      }
-    }};
-    border: 1px solid
-      ${({ isOverEditBlock, isOverRemove, isSelected }) =>
-        getColor(isOverRemove, isSelected, isOverEditBlock)};
-    border-radius: 2px;
-    padding-left: 38px;
-    padding-right: 38px;
-
-    ${({ isSub }) =>
-      isSub &&
-      css`
-        padding-left: 12px !important;
-        padding-right: 12px !important;
-
-        .grab,
-        .remove {
-          display: none;
-        }
-      `}
-
-    .name {
-      font-size: 13px;
-      font-weight: 500;
-
-      ${({ isOverEditBlock, isSelected }) =>
-        (isSelected || isOverEditBlock) &&
-        css`
-          color: #007eff;
-        `}
-
-      ${({ isOverRemove }) =>
-        isOverRemove &&
-        css`
-          color: #f64d0a;
-        `}
-    }
-    .grab {
-      border-right: 1px solid
-        ${({ isOverEditBlock, isOverRemove, isSelected }) =>
-          getColor(isOverRemove, isSelected, isOverEditBlock)};
-
-      ${({ isOverEditBlock, isSelected }) =>
-        (isSelected || isOverEditBlock) &&
-        css`
-          g {
-            fill: #aed4fb;
-          }
-        `}
-
-      ${({ isOverRemove }) =>
-        isOverRemove &&
-        css`
-          g {
-            fill: #ffa784;
-          }
-        `}
-    }
-
-    .remove {
-      background-color: ${({ isOverEditBlock, isOverRemove, isSelected }) =>
-        getColor(isOverRemove, isSelected, isOverEditBlock)};
-      cursor: pointer;
-      svg {
-        align-self: center;
-
-        ${({ isOverEditBlock, isSelected }) =>
-          (isSelected || isOverEditBlock) &&
-          css`
-            path {
-              fill: #007eff;
-            }
-          `}
-
-        ${({ isOverRemove }) =>
-          isOverRemove &&
-          css`
-            path {
-              fill: #f64d0a;
-            }
-          `}
-      }
-    }
-  }
-`;
-
-Wrapper.defaultProps = {
-  count: 1,
-  isSelected: false,
-};
-
-Wrapper.propTypes = {
-  count: PropTypes.number,
-  isSelected: PropTypes.bool,
-};
-
-export default Wrapper;

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

@@ -1,198 +0,0 @@
-import React, { forwardRef, useState } from 'react';
-import PropTypes from 'prop-types';
-import { isEmpty } from 'lodash';
-import { FormattedMessage } from 'react-intl';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Grab, GrabLarge, Pencil } from '@buffetjs/icons';
-import { CheckPermissions } from '@strapi/helper-plugin';
-import { getTrad } from '../../utils';
-import permissions from '../../../permissions';
-import useLayoutDnd from '../../hooks/useLayoutDnd';
-import GrabWrapper from './GrabWrapper';
-import Link from './Link';
-import NameWrapper from './NameWrapper';
-import RemoveWrapper from './RemoveWrapper';
-import SubWrapper from './SubWrapper';
-import Wrapper from './Wrapper';
-import Close from './Close';
-
-const cmPermissions = permissions.contentManager;
-
-/* eslint-disable */
-const DraggedField = forwardRef(
-  (
-    {
-      children,
-      count,
-      goTo,
-      componentUid,
-      isDragging,
-      isHidden,
-      isOverDynamicZone,
-      isSub,
-      label,
-      name,
-      onClick,
-      onRemove,
-      selectedItem,
-      style,
-      type,
-      withLongerHeight,
-    },
-    ref
-  ) => {
-    const { isDraggingSibling } = useLayoutDnd();
-    const [isOverRemove, setIsOverRemove] = useState(false);
-    const [isOverEditBlock, setIsOverEditBlock] = useState(false);
-    const opacity = isDragging ? 0.2 : 1;
-    const isSelected = selectedItem === name;
-    const showEditBlockOverState = isOverEditBlock && !isOverDynamicZone;
-    const displayedLabel = isEmpty(label) ? name : label;
-
-    return (
-      <Wrapper
-        count={count}
-        onDrag={() => setIsOverEditBlock(false)}
-        isSelected={isSelected}
-        isSub={isSub}
-        isOverEditBlock={showEditBlockOverState}
-        isOverRemove={isOverRemove}
-        style={style}
-        withLongerHeight={withLongerHeight}
-      >
-        {!isHidden && (
-          <SubWrapper
-            className="sub_wrapper"
-            isSelected={isSelected}
-            isOverEditBlock={isOverEditBlock}
-            isOverRemove={isOverRemove}
-            onMouseEnter={() => {
-              if (!isSub && !isDraggingSibling) {
-                setIsOverEditBlock(true);
-              }
-            }}
-            onMouseLeave={() => {
-              setIsOverEditBlock(false);
-            }}
-            onClick={() => {
-              onClick(name);
-            }}
-            style={{ opacity }}
-            withLongerHeight={withLongerHeight}
-          >
-            <GrabWrapper
-              className="grab"
-              isSelected={isSelected}
-              isOverEditBlock={showEditBlockOverState}
-              isOverRemove={isOverRemove}
-              ref={ref}
-              onClick={e => {
-                e.stopPropagation();
-                e.preventDefault();
-              }}
-            >
-              {withLongerHeight ? (
-                <GrabLarge style={{ marginRight: 10, cursor: 'move' }} />
-              ) : (
-                <Grab style={{ marginRight: 10, cursor: 'move' }} />
-              )}
-            </GrabWrapper>
-            <NameWrapper
-              className="name"
-              isSelected={isSelected}
-              isOverEditBlock={showEditBlockOverState}
-              isOverRemove={isOverRemove}
-            >
-              {children ? (
-                <>
-                  <span>{displayedLabel}</span>
-                  {children}
-                </>
-              ) : (
-                <span>{displayedLabel}</span>
-              )}
-            </NameWrapper>
-            <RemoveWrapper
-              className="remove"
-              isSelected={isSelected}
-              isOverEditBlock={showEditBlockOverState}
-              isOverRemove={isOverRemove}
-              onClick={onRemove}
-              onMouseEnter={() => {
-                if (!isSub) {
-                  setIsOverRemove(true);
-                }
-              }}
-              onMouseLeave={() => setIsOverRemove(false)}
-            >
-              {isOverRemove && !isSelected && <Close />}
-              {((showEditBlockOverState && !isOverRemove) || isSelected) && <Pencil />}
-              {!showEditBlockOverState && !isOverRemove && !isSelected && (
-                <Close width="10px" height="10px" />
-              )}
-            </RemoveWrapper>
-          </SubWrapper>
-        )}
-        {type === 'component' && (
-          <CheckPermissions permissions={cmPermissions.componentsConfigurations}>
-            <FormattedMessage id={getTrad('components.FieldItem.linkToComponentLayout')}>
-              {msg => (
-                <Link
-                  onClick={e => {
-                    e.stopPropagation();
-
-                    goTo(`/content-manager/components/${componentUid}/configurations/edit`);
-                  }}
-                >
-                  <FontAwesomeIcon icon="cog" />
-                  {msg}
-                </Link>
-              )}
-            </FormattedMessage>
-          </CheckPermissions>
-        )}
-      </Wrapper>
-    );
-  }
-);
-
-DraggedField.defaultProps = {
-  children: null,
-  count: 1,
-  goTo: () => {},
-  componentUid: null,
-  isDragging: false,
-  isHidden: false,
-  isOverDynamicZone: false,
-  isSub: false,
-  label: '',
-  onClick: () => {},
-  onRemove: () => {},
-  selectedItem: '',
-  shouldToggleDraggedFieldOverState: false,
-  style: {},
-  withLongerHeight: false,
-};
-
-DraggedField.propTypes = {
-  children: PropTypes.node,
-  count: PropTypes.number,
-  goTo: PropTypes.func,
-  componentUid: PropTypes.string,
-  isDragging: PropTypes.bool,
-  isHidden: PropTypes.bool,
-  isOverDynamicZone: PropTypes.bool,
-  isSub: PropTypes.bool,
-  label: PropTypes.string,
-  name: PropTypes.string.isRequired,
-  onClick: PropTypes.func,
-  onRemove: PropTypes.func,
-  selectedItem: PropTypes.string,
-  style: PropTypes.object,
-  type: PropTypes.string,
-  withLongerHeight: PropTypes.bool,
-};
-
-DraggedField.displayName = 'DraggedField';
-
-export default DraggedField;

package/admin/src/content-manager/components/DraggedField/utils/getColor.js

@@ -1,12 +0,0 @@
-const getColor = (isOverRemove, isSelected, isOverEditBlock) => {
-  if (isOverRemove) {
-    return '#ffa784';
-  }
-  if (isSelected || isOverEditBlock) {
-    return '#aed4fb';
-  }
-
-  return '#e9eaeb';
-};
-
-export default getColor;

package/admin/src/content-manager/components/DraggedField/utils/getHeight.js

@@ -1,3 +0,0 @@
-const getHeight = withLongerHeight => (withLongerHeight ? '102px' : '30px');
-
-export default getHeight;

package/admin/src/content-manager/components/DraggedFieldWithPreview/Carret.js

@@ -1,24 +0,0 @@
-import styled from 'styled-components';
-
-/* eslint-disable indent */
-const Carret = styled.div`
-  position: absolute;
-  ${({ right }) => {
-    if (right) {
-      return `
-      right: -4px;
-    `;
-    }
-
-    return `
-    left: -1px;
-  `;
-  }}
-  height: 100%;
-  width: 2px;
-  margin-right: 3px;
-  border-radius: 2px;
-  background: #007eff;
-`;
-
-export default Carret;

package/admin/src/content-manager/components/DraggedFieldWithPreview/DynamicComponent.js

@@ -1,71 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { useHistory } from 'react-router-dom';
-import PropTypes from 'prop-types';
-import { hasPermissions, useRBACProvider } from '@strapi/helper-plugin';
-import permissions from '../../../permissions';
-import DynamicComponentCard from '../DynamicComponentCard';
-import Tooltip from './Tooltip';
-
-const cmPermissions = permissions.contentManager;
-
-const DynamicComponent = ({ componentUid, friendlyName, icon, setIsOverDynamicZone }) => {
-  const [isOver, setIsOver] = useState(false);
-  const [{ isLoading, canAccess }, setState] = useState({ isLoading: true, canAccess: false });
-  const { push } = useHistory();
-  const { allPermissions } = useRBACProvider();
-
-  useEffect(() => {
-    const checkPermission = async () => {
-      try {
-        const canAccess = await hasPermissions(
-          allPermissions,
-          cmPermissions.componentsConfigurations
-        );
-
-        setState({ isLoading: false, canAccess });
-      } catch (err) {
-        setState({ isLoading: false });
-      }
-    };
-
-    checkPermission();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const handleMouseEvent = () => {
-    setIsOverDynamicZone(v => !v);
-    setIsOver(v => !v);
-  };
-
-  return (
-    <DynamicComponentCard
-      componentUid={componentUid}
-      friendlyName={friendlyName}
-      icon={icon}
-      isOver={isOver}
-      onClick={() => {
-        if (!isLoading && canAccess) {
-          push(`/content-manager/components/${componentUid}/configurations/edit`);
-        }
-      }}
-      onMouseEvent={handleMouseEvent}
-      tradId="components.DraggableAttr.edit"
-    >
-      <Tooltip isOver={isOver}>{componentUid}</Tooltip>
-    </DynamicComponentCard>
-  );
-};
-
-DynamicComponent.defaultProps = {
-  friendlyName: '',
-  icon: 'smile',
-};
-
-DynamicComponent.propTypes = {
-  componentUid: PropTypes.string.isRequired,
-  friendlyName: PropTypes.string,
-  icon: PropTypes.string,
-  setIsOverDynamicZone: PropTypes.func.isRequired,
-};
-
-export default DynamicComponent;

package/admin/src/content-manager/components/DraggedFieldWithPreview/DynamicZoneWrapper.js

@@ -1,10 +0,0 @@
-import styled from 'styled-components';
-
-const DynamicZoneWrapper = styled.div`
-  display: flex;
-  margin: 5px 0 0px 0;
-  overflow: auto;
-  height: 119px;
-`;
-
-export default DynamicZoneWrapper;

package/admin/src/content-manager/components/DraggedFieldWithPreview/Tooltip.js

@@ -1,19 +0,0 @@
-import styled from 'styled-components';
-
-const Tooltip = styled.div`
-  position: absolute;
-  bottom: -10px;
-  left: 105px;
-  visibility: ${({ isOver }) => (isOver ? 'visible' : 'hidden')};
-  line-height: 20px;
-  height: 20px;
-  padding: 0 10px;
-  background-color: #000000;
-  font-size: 12px;
-  color: #fff;
-  opacity: 0.5;
-  border: 1px solid #e3e9f3;
-  z-index: 99;
-`;
-
-export default Tooltip;

package/admin/src/content-manager/components/DraggedFieldWithPreview/Wrapper.js

@@ -1,23 +0,0 @@
-import styled from 'styled-components';
-import PropTypes from 'prop-types';
-
-const Wrapper = styled.div`
-  display: flex;
-  position: relative;
-  min-height: ${({ withLongerHeight }) => (withLongerHeight ? '102px' : '30px')};
-
-  .sub {
-    width: 100%;
-    padding: 0 5px;
-  }
-`;
-
-Wrapper.defaultProps = {
-  withLongerHeight: false,
-};
-
-Wrapper.propTypes = {
-  withLongerHeight: PropTypes.bool,
-};
-
-export default Wrapper;

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

@@ -1,194 +0,0 @@
-import React, { forwardRef, useState } from 'react';
-import { get } from 'lodash';
-import PropTypes from 'prop-types';
-import DraggedField from '../DraggedField';
-import PreviewCarret from '../PreviewCarret';
-import Carret from './Carret';
-import DynamicZoneWrapper from './DynamicZoneWrapper';
-import Wrapper from './Wrapper';
-import DynamicComponent from './DynamicComponent';
-
-/* eslint-disable react/no-array-index-key */
-
-const DraggedFieldWithPreview = forwardRef(
-  (
-    {
-      goTo,
-      componentUid,
-      componentLayouts,
-      dynamicZoneComponents,
-      isDragging,
-      label,
-      name,
-      onClickEdit,
-      onClickRemove,
-      selectedItem,
-      showLeftCarret,
-      showRightCarret,
-      size,
-      style,
-      type,
-    },
-    refs
-  ) => {
-    const isHidden = name === '_TEMP_';
-    const [dragStart, setDragStart] = useState(false);
-    const [isOverDynamicZone, setIsOverDynamicZone] = useState(false);
-    const opacity = isDragging ? 0.2 : 1;
-    const isFullSize = size === 12;
-    const display = isFullSize && dragStart ? 'none' : '';
-    const width = isFullSize && dragStart ? 0 : '100%';
-    const higherFields = ['json', 'text', 'file', 'media', 'component', 'richtext', 'dynamiczone'];
-    const withLongerHeight = higherFields.includes(type) && !dragStart;
-    const getCompoInfos = uid => get(componentLayouts, [uid, 'info'], { name: '', icon: '' });
-
-    const componentData = get(componentLayouts, [componentUid], {});
-    const componentLayout = get(componentData, ['layouts', 'edit'], []);
-    const getWrapperWitdh = colNum => `${(1 / 12) * colNum * 100}%`;
-
-    return (
-      <div
-        style={{ width: getWrapperWitdh(size) }}
-        onDrag={() => {
-          if (isFullSize && !dragStart) {
-            setDragStart(true);
-          }
-        }}
-        onDragEnd={() => {
-          if (isFullSize) {
-            setDragStart(false);
-          }
-        }}
-      >
-        <Wrapper ref={refs.dropRef} withLongerHeight={withLongerHeight} style={style}>
-          {dragStart && isFullSize && <PreviewCarret style={{ marginRight: '-10px' }} />}
-          <>
-            {showLeftCarret && <Carret />}
-
-            <div className="sub" style={{ width, opacity }}>
-              <DraggedField
-                goTo={goTo}
-                componentUid={componentUid}
-                isHidden={isHidden}
-                isOverDynamicZone={isOverDynamicZone}
-                label={label}
-                name={name}
-                onClick={onClickEdit}
-                onRemove={onClickRemove}
-                ref={refs.dragRef}
-                selectedItem={selectedItem}
-                style={{ display, marginRight: 0, paddingRight: 0 }}
-                type={type}
-                withLongerHeight={withLongerHeight}
-              >
-                {type === 'component' &&
-                  componentLayout.map((row, i) => {
-                    const marginBottom = i === componentLayout.length - 1 ? '29px' : '';
-                    const marginTop = i === 0 ? '5px' : '';
-
-                    return (
-                      <div
-                        style={{
-                          display: 'flex',
-                          marginBottom,
-                          marginTop,
-                        }}
-                        key={i}
-                      >
-                        {row.map(field => {
-                          const fieldType = get(
-                            componentData,
-                            ['attributes', field.name, 'type'],
-                            ''
-                          );
-                          const label = get(
-                            componentData,
-                            ['metadatas', field.name, 'edit', 'label'],
-                            ''
-                          );
-
-                          return (
-                            <div
-                              key={field.name}
-                              style={{
-                                width: getWrapperWitdh(field.size),
-                                marginBottom: '6px',
-                              }}
-                            >
-                              <DraggedField
-                                label={label}
-                                name={field.name}
-                                isSub
-                                withLongerHeight={higherFields.includes(fieldType)}
-                              />
-                            </div>
-                          );
-                        })}
-                      </div>
-                    );
-                  })}
-                {type === 'dynamiczone' && (
-                  <DynamicZoneWrapper>
-                    {dynamicZoneComponents.map(compo => {
-                      const { name, icon } = getCompoInfos(compo);
-
-                      return (
-                        <DynamicComponent
-                          key={compo}
-                          componentUid={compo}
-                          friendlyName={name}
-                          icon={icon}
-                          setIsOverDynamicZone={setIsOverDynamicZone}
-                        />
-                      );
-                    })}
-                  </DynamicZoneWrapper>
-                )}
-              </DraggedField>
-            </div>
-            {showRightCarret && <Carret right />}
-          </>
-        </Wrapper>
-      </div>
-    );
-  }
-);
-
-DraggedFieldWithPreview.defaultProps = {
-  goTo: () => {},
-  componentLayouts: {},
-  componentUid: null,
-  dynamicZoneComponents: [],
-  isDragging: false,
-  label: '',
-  onClickEdit: () => {},
-  onClickRemove: () => {},
-  selectedItem: '',
-  showLeftCarret: false,
-  showRightCarret: false,
-  size: 1,
-  style: {},
-  type: 'string',
-};
-
-DraggedFieldWithPreview.propTypes = {
-  goTo: PropTypes.func,
-  componentLayouts: PropTypes.object,
-  componentUid: PropTypes.string,
-  dynamicZoneComponents: PropTypes.array,
-  isDragging: PropTypes.bool,
-  label: PropTypes.string,
-  name: PropTypes.string.isRequired,
-  onClickEdit: PropTypes.func,
-  onClickRemove: PropTypes.func,
-  selectedItem: PropTypes.string,
-  showLeftCarret: PropTypes.bool,
-  showRightCarret: PropTypes.bool,
-  size: PropTypes.number,
-  style: PropTypes.object,
-  type: PropTypes.string,
-};
-
-DraggedFieldWithPreview.displayName = 'DraggedFieldWithPreview';
-
-export default DraggedFieldWithPreview;