@strapi/admin 4.10.1-experimental.0 → 4.10.2-alpha.0

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

@@ -1,67 +0,0 @@
-/**
- *
- * OverlayBlockerProvider
- *
- */
-import React, { useEffect, useState } from 'react';
-import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import { OverlayBlockerContext } from '@strapi/helper-plugin';
-
-const overlayContainer = document.createElement('div');
-overlayContainer.setAttribute('id', 'overlayBlocker');
-
-const Overlay = styled.div`
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 1140;
-`;
-
-const Portal = ({ isOpen }) => {
-  useEffect(() => {
-    document.body.appendChild(overlayContainer);
-
-    return () => {
-      document.body.removeChild(overlayContainer);
-    };
-  }, []);
-
-  if (isOpen) {
-    return ReactDOM.createPortal(<Overlay />, overlayContainer);
-  }
-
-  return null;
-};
-
-Portal.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
-};
-
-const OverlayBlockerProvider = ({ children }) => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  const lockApp = () => {
-    setIsOpen(true);
-  };
-
-  const unlockApp = () => {
-    setIsOpen(false);
-  };
-
-  return (
-    <OverlayBlockerContext.Provider value={{ lockApp, unlockApp }}>
-      {children}
-      <Portal isOpen={isOpen} />
-    </OverlayBlockerContext.Provider>
-  );
-};
-
-OverlayBlockerProvider.propTypes = {
-  children: PropTypes.node.isRequired,
-};
-
-export default OverlayBlockerProvider;

package/admin/src/content-manager/components/DragLayer/ComponentDragPreview.js

@@ -1,83 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import { pxToRem } from '@strapi/helper-plugin';
-import { Box, Flex, Typography, IconButton } from '@strapi/design-system';
-import { Trash, Drag, CarretDown } from '@strapi/icons';
-
-const DragPreviewBox = styled(Box)`
-  border: 1px solid ${({ theme }) => theme.colors.neutral200};
-`;
-
-const DropdownIconWrapper = styled(Box)`
-  height: ${32 / 16}rem;
-  width: ${32 / 16}rem;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  svg {
-    height: ${6 / 16}rem;
-    width: ${11 / 16}rem;
-    > path {
-      fill: ${({ theme }) => theme.colors.neutral600};
-    }
-  }
-`;
-
-const ToggleButton = styled.button`
-  border: none;
-  background: transparent;
-  display: block;
-  width: 100%;
-  text-align: unset;
-  padding: 0;
-`;
-
-const DragPreview = ({ displayedValue }) => {
-  return (
-    <DragPreviewBox
-      paddingLeft={3}
-      paddingRight={3}
-      paddingTop={3}
-      paddingBottom={3}
-      hasRadius
-      background="neutral0"
-      width={pxToRem(300)}
-    >
-      <Flex justifyContent="space-between">
-        <ToggleButton type="button">
-          <Flex>
-            <DropdownIconWrapper background="neutral200">
-              <CarretDown />
-            </DropdownIconWrapper>
-            <Flex gap={2} paddingLeft={6} maxWidth={pxToRem(150)}>
-              <Typography textColor="neutral700" ellipsis>
-                {displayedValue}
-              </Typography>
-            </Flex>
-          </Flex>
-        </ToggleButton>
-        <Box paddingLeft={3}>
-          <Flex>
-            <IconButton noBorder>
-              <Trash />
-            </IconButton>
-            <Box paddingLeft={2}>
-              <IconButton noBorder>
-                <Drag />
-              </IconButton>
-            </Box>
-          </Flex>
-        </Box>
-      </Flex>
-    </DragPreviewBox>
-  );
-};
-
-DragPreview.propTypes = {
-  displayedValue: PropTypes.string.isRequired,
-};
-
-export default DragPreview;

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

@@ -1,85 +0,0 @@
-import React from 'react';
-import { useDragLayer } from 'react-dnd';
-import LayoutDndProvider from '../LayoutDndProvider';
-
-import ItemTypes from '../../utils/ItemTypes';
-import CardPreview from '../../pages/ListSettingsView/components/CardPreview';
-
-import ComponentPreview from './ComponentDragPreview';
-import { RelationDragPreview } from './RelationDragPreview';
-
-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(),
-    })
-  );
-
-  if (!isDragging) {
-    return null;
-  }
-
-  /**
-   * Because a user may have multiple relations / dynamic zones / repeable fields in the same content type,
-   * we append the fieldName for the item type to make them unique, however, we then want to extract that
-   * first type to apply the correct preview.
-   */
-  const [actualType] = itemType.split('_');
-
-  return (
-    <LayoutDndProvider>
-      <div style={layerStyles}>
-        <div style={getItemStyles(initialOffset, currentOffset, mouseOffset)} className="col-md-2">
-          {[ItemTypes.EDIT_FIELD, ItemTypes.FIELD].includes(itemType) && (
-            <CardPreview labelField={item.labelField} />
-          )}
-          {actualType === ItemTypes.COMPONENT && (
-            <ComponentPreview displayedValue={item.displayedValue} />
-          )}
-          {actualType === ItemTypes.DYNAMIC_ZONE && (
-            <ComponentPreview displayedValue={item.displayedValue} />
-          )}
-          {actualType === ItemTypes.RELATION && (
-            <RelationDragPreview
-              displayedValue={item.displayedValue}
-              status={item.status}
-              width={item.width}
-            />
-          )}
-        </div>
-      </div>
-    </LayoutDndProvider>
-  );
-};
-
-export default CustomDragLayer;

package/admin/src/content-manager/contexts/LayoutDnd.js

@@ -1,5 +0,0 @@
-import { createContext } from 'react';
-
-const LayoutDndContext = createContext();
-
-export default LayoutDndContext;

package/admin/src/content-manager/hooks/useCallbackRef.js

@@ -1,23 +0,0 @@
-import * as React from 'react';
-
-/**
- * A custom hook that converts a callback to a ref to avoid triggering re-renders when passed as a
- * prop or avoid re-executing effects when passed as a dependency
- *
- * @type {<T extends (...args: any[]) => any>(callback: T | undefined) => T}
- */
-export const useCallbackRef = (callback) => {
-  const callbackRef = React.useRef(callback);
-
-  React.useEffect(() => {
-    callbackRef.current = callback;
-  });
-
-  // https://github.com/facebook/react/issues/19240
-  return React.useMemo(
-    () =>
-      (...args) =>
-        callbackRef.current?.(...args),
-    []
-  );
-};

package/admin/src/content-manager/hooks/useLayoutDnd.js

@@ -1,6 +0,0 @@
-import { useContext } from 'react';
-import LayoutDndContext from '../contexts/LayoutDnd';
-
-const useLayoutDnd = () => useContext(LayoutDndContext);
-
-export default useLayoutDnd;

package/admin/src/content-manager/pages/ListSettingsView/utils/ellipsisCardTitle.js

@@ -1,7 +0,0 @@
-const ellipsisCardTitle = (title) => {
-  const formatedTitle = title.length > 20 ? `${title.substring(0, 20)}...` : title;
-
-  return formatedTitle;
-};
-
-export default ellipsisCardTitle;