@it-consultis/page-builder 1.1.34

package/layouts/BlocksBar/LayerPanel.js

@@ -0,0 +1,299 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _I18nContext = require("../../contexts/I18nContext");
+var _store = require("../../store");
+var _block = require("../../utils/block");
+var _MoreVert = _interopRequireDefault(require("@mui/icons-material/MoreVert"));
+var _Box = _interopRequireDefault(require("@mui/material/Box/Box.js"));
+var _Icon = _interopRequireDefault(require("@mui/material/Icon/Icon.js"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton/IconButton.js"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography/Typography.js"));
+var _SimpleTreeView = require("@mui/x-tree-view/SimpleTreeView");
+var _TreeItem = require("@mui/x-tree-view/TreeItem");
+var _react = require("react");
+var _sortablejs = _interopRequireDefault(require("sortablejs"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const LayerNode = ({
+  block,
+  blockTypes,
+  onMenuOpen,
+  setSelectedBlockId,
+  setEditingBlockId,
+  setData,
+  onChange,
+  level
+}) => {
+  const blockType = blockTypes.find(type => type.id === block.type);
+  const label = blockType?.blockLabel(block.data) || block.data.blockName || blockType?.label || block.id;
+  const children = block.data.subBlocks;
+  const hasChildren = children && children.length > 0;
+  const [subBlocksElement, setSubBlocksElement] = (0, _react.useState)(null);
+  const subBlocksRef = (0, _react.useCallback)(node => {
+    if (node) {
+      setSubBlocksElement(node);
+    }
+  }, []);
+  (0, _react.useLayoutEffect)(() => {
+    if (!subBlocksElement || !hasChildren || children.length < 2) return;
+    const sortable = new _sortablejs.default(subBlocksElement, {
+      animation: 150,
+      handle: '.sortable-handle',
+      group: `level-${level + 1}`,
+      draggable: '.MuiTreeItem-root',
+      onStart: evt => {
+        // mark the current dragging, prevent the EditorPreview from triggering dropIndex
+        evt.item.setAttribute('data-sortable-dragging', 'true');
+      },
+      onEnd: evt => {
+        // remove the dragging mark
+        evt.item.removeAttribute('data-sortable-dragging');
+      },
+      onUpdate: evt => {
+        const {
+          oldIndex
+        } = evt;
+        const {
+          newIndex
+        } = evt;
+        if (oldIndex === undefined || newIndex === undefined) return;
+        setData(prevData => {
+          const updateBlocks = blocks => {
+            return blocks.map(b => {
+              if (b.id === block.id) {
+                const newSubBlocks = [...children];
+                const [moved] = newSubBlocks.splice(oldIndex, 1);
+                newSubBlocks.splice(newIndex, 0, moved);
+                return {
+                  ...b,
+                  data: {
+                    ...b.data,
+                    subBlocks: newSubBlocks
+                  },
+                  meta: {
+                    ...b.meta,
+                    changed: Date.now()
+                  }
+                };
+              }
+              if (b.data.subBlocks) {
+                return {
+                  ...b,
+                  data: {
+                    ...b.data,
+                    subBlocks: updateBlocks(b.data.subBlocks)
+                  },
+                  meta: {
+                    ...b.meta,
+                    changed: Date.now()
+                  }
+                };
+              }
+              return b;
+            });
+          };
+          const newData = updateBlocks(prevData);
+          onChange?.(newData);
+          return newData;
+        });
+      }
+    });
+    return () => sortable.destroy();
+  }, [subBlocksElement, children, block.id, hasChildren, level, setData, onChange]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeItem.TreeItem, {
+    itemId: block.id,
+    label: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+      className: "sortable-handle",
+      sx: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        cursor: 'grab',
+        py: 0.5,
+        pr: 1,
+        width: '100%'
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+        sx: {
+          display: 'flex',
+          alignItems: 'center',
+          flex: 1
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+          sx: {
+            mr: 1,
+            fontSize: 20
+          },
+          children: blockType?.icon || 'drag_handle'
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          variant: "body2",
+          sx: {
+            flex: 1,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap'
+          },
+          children: label
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+        size: "small",
+        onClick: e => onMenuOpen(e, block.id),
+        sx: {
+          opacity: 0,
+          '.MuiTreeItem-content:hover &': {
+            opacity: 1
+          }
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MoreVert.default, {
+          fontSize: "small"
+        })
+      })]
+    }),
+    onClick: () => {
+      setSelectedBlockId(block.id);
+      setEditingBlockId(block.id);
+    },
+    children: hasChildren && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      ref: subBlocksRef,
+      children: children.map(child => /*#__PURE__*/(0, _jsxRuntime.jsx)(LayerNode, {
+        block: child,
+        blockTypes: blockTypes,
+        onMenuOpen: onMenuOpen,
+        setSelectedBlockId: setSelectedBlockId,
+        setEditingBlockId: setEditingBlockId,
+        setData: setData,
+        onChange: onChange,
+        level: level + 1
+      }, child.id))
+    })
+  }, block.id);
+};
+const LayerPanel = ({
+  onMenuOpen,
+  onChange
+}) => {
+  const t = (0, _I18nContext.useT)();
+  const {
+    data,
+    blockTypes,
+    selectedBlockId,
+    setSelectedBlockId,
+    setEditingBlockId,
+    setData,
+    isMp
+  } = (0, _store.useEditorStore)(state => state);
+  const [expandedItems, setExpandedItems] = (0, _react.useState)(['root']);
+  const treeRef = (0, _react.useRef)(null);
+  const noMpNavBarData = (0, _react.useMemo)(() => data.filter(block => (0, _block.blockFilteredMPNav)(block)), [data]);
+  (0, _react.useEffect)(() => {
+    if (!treeRef.current) return;
+    const sortable = new _sortablejs.default(treeRef.current, {
+      animation: 150,
+      handle: '.sortable-handle',
+      group: 'level-0',
+      draggable: '.MuiTreeItem-root',
+      onStart: evt => {
+        evt.item.style.cursor = 'grabbing';
+        // mark the current dragging, prevent the EditorPreview from triggering dropIndex
+        evt.item.setAttribute('data-sortable-dragging', 'true');
+      },
+      onEnd: evt => {
+        evt.item.style.cursor = 'grab';
+        // remove the dragging mark
+        evt.item.removeAttribute('data-sortable-dragging');
+      },
+      onUpdate: evt => {
+        const {
+          oldIndex
+        } = evt;
+        const {
+          newIndex
+        } = evt;
+        if (oldIndex === undefined || newIndex === undefined) return;
+        const realOldIndex = isMp ? oldIndex + 1 : oldIndex;
+        const realNewIndex = isMp ? newIndex + 1 : newIndex;
+        setData(prevData => {
+          const newData = [...prevData];
+          const [moved] = newData.splice(realOldIndex, 1);
+          newData.splice(realNewIndex, 0, moved);
+          const updatedData = newData.map(block => ({
+            ...block,
+            meta: {
+              ...block.meta,
+              changed: Date.now()
+            }
+          }));
+          onChange?.(updatedData);
+          return updatedData;
+        });
+      }
+    });
+    return () => sortable.destroy();
+  }, [setData, onChange, isMp]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+    sx: {
+      py: 2
+    },
+    children: noMpNavBarData.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+      variant: "body2",
+      color: "text.secondary",
+      sx: {
+        textAlign: 'center',
+        py: 4
+      },
+      children: t('editor.noLayers')
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_SimpleTreeView.SimpleTreeView, {
+      ref: treeRef,
+      "aria-label": "block structure",
+      expandedItems: expandedItems,
+      selectedItems: selectedBlockId || '',
+      onSelectedItemsChange: (event, itemId) => {
+        if (itemId) {
+          setSelectedBlockId(itemId);
+          setEditingBlockId(itemId);
+        }
+      },
+      onExpandedItemsChange: (event, nodeIds) => {
+        setExpandedItems(nodeIds);
+      },
+      sx: {
+        '.MuiTreeItem-root': {
+          '.MuiTreeItem-content': {
+            padding: '4px 8px',
+            borderRadius: 1,
+            '&:hover': {
+              backgroundColor: 'action.hover'
+            },
+            '&.Mui-selected': {
+              backgroundColor: 'grey[100]',
+              '&:hover': {
+                backgroundColor: 'grey[100]'
+              }
+            }
+          },
+          '.MuiTreeItem-group': {
+            marginLeft: 2,
+            paddingLeft: 1,
+            borderLeft: '1px dashed',
+            borderColor: 'divider'
+          }
+        }
+      },
+      children: noMpNavBarData.map(block => /*#__PURE__*/(0, _jsxRuntime.jsx)(LayerNode, {
+        block: block,
+        blockTypes: blockTypes,
+        onMenuOpen: onMenuOpen,
+        setSelectedBlockId: setSelectedBlockId,
+        setEditingBlockId: setEditingBlockId,
+        setData: setData,
+        onChange: onChange,
+        level: 0
+      }, block.id))
+    })
+  });
+};
+var _default = exports.default = LayerPanel;

package/layouts/BlocksBar/index.d.ts

@@ -0,0 +1,7 @@
+import { Block } from '../../types';
+import { TooltipProps } from '@mui/material/Tooltip';
+export declare const HtmlTooltip: import("@emotion/styled").StyledComponent<TooltipProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+declare const BlocksBar: ({ onChange }: {
+    onChange?(data: Block[]): void;
+}) => import("react/jsx-runtime").JSX.Element;
+export default BlocksBar;