@akemona-org/strapi-plugin-content-manager 3.7.0

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

@@ -0,0 +1,102 @@
+import React from 'react';
+import { useDragLayer } from 'react-dnd';
+import LayoutDndProvider from '../../containers/LayoutDndProvider';
+
+import ItemTypes from '../../utils/ItemTypes';
+
+import ComponentBanner from '../RepeatableComponent/Banner';
+import RelationItem from '../SelectMany/Relation';
+import { Li } from '../SelectMany/components';
+import DraggedField from '../DraggedField';
+
+const layerStyles = {
+  position: 'fixed',
+  pointerEvents: 'none',
+  zIndex: 100,
+  left: 0,
+  top: 0,
+  width: '100%',
+  height: '100%',
+};
+
+function getItemStyles(initialOffset, currentOffset, mouseOffset) {
+  if (!initialOffset || !currentOffset) {
+    return { display: 'none' };
+  }
+
+  const { x, y } = mouseOffset;
+  // TODO adjust
+  const transform = `translate(${x}px, ${y}px)`;
+
+  return {
+    transform,
+    WebkitTransform: transform,
+  };
+}
+
+const CustomDragLayer = () => {
+  const { itemType, isDragging, item, initialOffset, currentOffset, mouseOffset } = useDragLayer(
+    monitor => ({
+      item: monitor.getItem(),
+      itemType: monitor.getItemType(),
+      initialOffset: monitor.getInitialSourceClientOffset(),
+      currentOffset: monitor.getSourceClientOffset(),
+      isDragging: monitor.isDragging(),
+      mouseOffset: monitor.getClientOffset(),
+    })
+  );
+
+  function renderItem() {
+    switch (itemType) {
+      case ItemTypes.FIELD:
+        return <DraggedField name={item.id} selectedItem={item.name} />;
+      case ItemTypes.COMPONENT:
+        return (
+          <ComponentBanner
+            {...item}
+            isOpen
+            isReadOnly={false}
+            style={{
+              width: '40vw',
+              border: '1px solid #AED4FB',
+              borderRadius: 2,
+            }}
+          />
+        );
+      case ItemTypes.RELATION:
+        return (
+          <Li>
+            <RelationItem
+              data={item.data}
+              displayNavigationLink={false}
+              mainField={item.mainField}
+              isDisabled={false}
+              isDragging
+              hasDraftAndPublish={item.hasDraftAndPublish}
+            />
+          </Li>
+        );
+      case ItemTypes.EDIT_FIELD:
+      case ItemTypes.EDIT_RELATION:
+        return <DraggedField name={item.name} size={12} selectedItem={item.name} />;
+      default:
+        return null;
+    }
+  }
+
+  if (!isDragging) {
+    return null;
+  }
+
+  return (
+    <LayoutDndProvider>
+      <div style={layerStyles}>
+        <div style={getItemStyles(initialOffset, currentOffset, mouseOffset)} className="col-md-2">
+          {renderItem()}
+        </div>
+      </div>
+    </LayoutDndProvider>
+  );
+};
+
+export default CustomDragLayer;

package/admin/src/components/DraggedField/Close/index.js

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+import { Remove } from '@buffetjs/icons';
+
+const Close = styled(Remove)`
+  > path {
+    fill: #b4b6ba;
+  }
+`;
+
+export default Close;

package/admin/src/components/DraggedField/GrabWrapper.js

@@ -0,0 +1,38 @@
+/* eslint-disable */
+
+import styled, { css } from 'styled-components';
+import getColor from './utils/getColor';
+
+const GrabWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+  left: 0;
+  padding-left: 10px;
+  border-right: 1px solid
+    ${({ isOverEditBlock, isOverRemove, isSelected }) =>
+      getColor(isOverRemove, isSelected, isOverEditBlock)};
+  cursor: move;
+  z-index: 99;
+
+  ${({ isOverRemove }) =>
+    isOverRemove &&
+    css`
+      g {
+        fill: #ffa784;
+      }
+    `}
+
+  ${({ isSelected, isOverEditBlock }) =>
+    (isSelected || isOverEditBlock) &&
+    css`
+      g {
+        fill: #aed4fb;
+      }
+    `}
+`;
+
+export default GrabWrapper;

package/admin/src/components/DraggedField/Link.js

@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+
+const Link = styled.div`
+  position: absolute;
+  bottom: 4px;
+  left: 38px;
+  font-weight: 400;
+  color: #007eff;
+  cursor: pointer;
+  font-size: 13px;
+  svg {
+    margin-right: 7px;
+    font-size: 11px;
+  }
+`;
+
+export default Link;

package/admin/src/components/DraggedField/NameWrapper.js

@@ -0,0 +1,29 @@
+import styled from 'styled-components';
+
+/* eslint-disable indent */
+const NameWrapper = styled.div`
+  position: relative;
+  line-height: 26px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+
+  ${({ isOverEditBlock, isOverRemove, isSelected }) => {
+    if (isOverRemove) {
+      return `
+        color: #f64d0a;
+      `;
+    }
+
+    if (isSelected || isOverEditBlock) {
+      return `
+        color: #007eff;
+    `;
+    }
+
+    return '';
+  }}
+`;
+
+export default NameWrapper;

package/admin/src/components/DraggedField/RemoveWrapper.js

@@ -0,0 +1,32 @@
+import styled from 'styled-components';
+import getColor from './utils/getColor';
+
+/* eslint-disable indent */
+const RemoveWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+  right: 0;
+  width: 30px;
+  text-align: center;
+  background-color: ${({ isOverEditBlock, isOverRemove, isSelected }) => {
+    return getColor(isOverRemove, isSelected, isOverEditBlock);
+  }};
+  cursor: pointer;
+  svg {
+    align-self: center;
+    color: #b4b6ba;
+  }
+  ${({ isOverRemove }) =>
+    isOverRemove &&
+    `
+    path {
+      fill: #f64d0a;
+    }
+  `};
+`;
+
+export default RemoveWrapper;

package/admin/src/components/DraggedField/SubWrapper.js

@@ -0,0 +1,36 @@
+/* eslint-disable */
+
+import styled from 'styled-components';
+import getColor from './utils/getColor';
+import getHeight from './utils/getHeight';
+
+const SubWrapper = styled.div`
+  position: relative;
+  min-height: ${({ withLongerHeight }) => getHeight(withLongerHeight)};
+  ${({ withLongerHeight }) => {
+    if (!withLongerHeight) {
+      return `
+        height: 30px;
+    `;
+    }
+  }};
+
+  line-height: ${({ withLongerHeight }) => getHeight(withLongerHeight)};
+  cursor: pointer;
+
+  background: ${({ isOverEditBlock, isOverRemove, isSelected }) => {
+    if (isOverRemove) {
+      return '#ffe9e0';
+    } else if (isSelected || isOverEditBlock) {
+      return '#e6f0fb';
+    } else {
+      return '#fafafb';
+    }
+  }};
+  border: 1px solid
+    ${({ isOverEditBlock, isOverRemove, isSelected }) =>
+      getColor(isOverRemove, isSelected, isOverEditBlock)};
+  border-radius: 2px;
+`;
+
+export default SubWrapper;

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

@@ -0,0 +1,134 @@
+/* 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/components/DraggedField/index.js

@@ -0,0 +1,196 @@
+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 pluginId from '../../pluginId';
+import pluginPermissions 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';
+
+/* 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={pluginPermissions.componentsConfigurations}>
+            <FormattedMessage id={`${pluginId}.components.FieldItem.linkToComponentLayout`}>
+              {msg => (
+                <Link
+                  onClick={e => {
+                    e.stopPropagation();
+
+                    goTo(`/plugins/${pluginId}/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/components/DraggedField/utils/getColor.js

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

package/admin/src/components/DraggedField/utils/getHeight.js

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

package/admin/src/components/DraggedFieldWithPreview/Carret.js

@@ -0,0 +1,24 @@
+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;