@it-consultis/page-builder 1.1.34

package/layouts/Sidebar/BlockForm.js

@@ -0,0 +1,517 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _Delete = _interopRequireDefault(require("@mui/icons-material/Delete"));
+var _Edit = _interopRequireDefault(require("@mui/icons-material/Edit"));
+var _EditOutlined = _interopRequireDefault(require("@mui/icons-material/EditOutlined"));
+var _FileCopy = _interopRequireDefault(require("@mui/icons-material/FileCopy"));
+var _MoreVert = _interopRequireDefault(require("@mui/icons-material/MoreVert"));
+var _Remove = _interopRequireDefault(require("@mui/icons-material/Remove"));
+var _Settings = _interopRequireDefault(require("@mui/icons-material/Settings"));
+var _Style = _interopRequireDefault(require("@mui/icons-material/Style"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
+var _Icon = _interopRequireDefault(require("@mui/material/Icon"));
+var _ListItemText = _interopRequireDefault(require("@mui/material/ListItemText"));
+var _Menu = _interopRequireDefault(require("@mui/material/Menu"));
+var _styles = require("@mui/material/styles");
+var _Tab = _interopRequireDefault(require("@mui/material/Tab"));
+var _Tabs = _interopRequireDefault(require("@mui/material/Tabs"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _react = _interopRequireWildcard(require("react"));
+var _I18nContext = require("../../contexts/I18nContext");
+var _useDebounce = _interopRequireDefault(require("../../hooks/ui-optimizations/useDebounce"));
+var _useThrottle = _interopRequireDefault(require("../../hooks/ui-optimizations/useThrottle"));
+var _store = require("../../store");
+var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon/ListItemIcon.js"));
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const PREFIX = 'BlockForm';
+const classes = {
+  root: `${PREFIX}-root`,
+  headerActions: `${PREFIX}-headerActions`,
+  labelDragIcon: `${PREFIX}-labelDragIcon`,
+  label: `${PREFIX}-label`,
+  form: `${PREFIX}-form`,
+  actions: `${PREFIX}-actions`,
+  listItemIcon: `${PREFIX}-listItemIcon`,
+  deleteActions: `${PREFIX}-deleteActions`,
+  cancelBtn: `${PREFIX}-cancelBtn`,
+  iconBtn: `${PREFIX}-iconBtn`,
+  tabs: `${PREFIX}-tabs`,
+  tabPanel: `${PREFIX}-tabPanel`
+};
+const Root = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  borderBottom: `1px solid ${theme.palette.grey[100]}`,
+  padding: theme.spacing(1.5),
+  [`& .${classes.headerActions}`]: {
+    display: 'flex',
+    backgroundColor: '#e5e5e5',
+    borderRadius: '4px',
+    padding: theme.spacing(1)
+  },
+  [`& .${classes.labelDragIcon}`]: {
+    marginRight: theme.spacing(0.25),
+    marginLeft: theme.spacing(-0.5)
+  },
+  [`& .${classes.label}`]: {
+    justifyContent: 'flex-start',
+    width: '100%',
+    padding: 0,
+    '& .MuiButton-label': {
+      padding: 0,
+      display: 'block'
+    }
+  },
+  [`& .${classes.actions}`]: {
+    marginLeft: 'auto',
+    lineHeight: 1,
+    fontSize: theme.typography.fontSize,
+    minWidth: 108,
+    display: 'flex',
+    justifyContent: 'end'
+  },
+  // [`& .${classes.form}`]: {
+  //   marginTop: theme.spacing(4)
+  // },
+  [`& .${classes.iconBtn}`]: {
+    minWidth: 0
+  },
+  [`& .${classes.listItemIcon}`]: {
+    width: 32,
+    minWidth: 32
+  },
+  [`& .${classes.deleteActions}`]: {
+    display: 'flex'
+  },
+  [`& .${classes.cancelBtn}`]: {
+    marginRight: theme.spacing(1)
+  },
+  [`& .${classes.tabs}`]: {
+    borderBottom: `1px solid ${theme.palette.divider}`
+  },
+  [`& .${classes.tabPanel}`]: {
+    padding: theme.spacing(2, 0)
+  }
+}));
+const BlockForm = props => {
+  const {
+    block,
+    blockType,
+    onChange,
+    onDelete,
+    onClone,
+    initialState = {},
+    isNested = true
+  } = props;
+  const {
+    data,
+    settings,
+    meta,
+    id,
+    type,
+    collapse
+  } = block;
+  const {
+    selectedBlockId,
+    editingBlockId,
+    setEditingBlockId,
+    setSelectedBlockId,
+    data: allBlocks,
+    setData
+  } = (0, _store.useEditorStore)(state => state);
+  const theme = (0, _styles.useTheme)();
+  const t = (0, _I18nContext.useT)();
+  const [state, setState] = (0, _react.useState)({
+    showEditForm: collapse || true,
+    showSettingsForm: false,
+    showDeleteForm: false,
+    moreAnchorEl: null,
+    activeTab: 0,
+    ...initialState
+  });
+  const rootRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    if (collapse !== undefined) {
+      setState(prevState => ({
+        ...prevState,
+        showEditForm: Boolean(collapse),
+        showDeleteForm: collapse ? false : prevState.showDeleteForm,
+        showSettingsForm: collapse ? false : prevState.showSettingsForm
+      }));
+    }
+  }, [collapse]);
+  (0, _react.useEffect)(() => {
+    const isNewBlock = meta.created === meta.changed;
+    if (isNewBlock) {
+      setEditingBlockId(id);
+    }
+  }, [id, meta.created, meta.changed, setEditingBlockId]);
+  const handleTabChange = (event, newValue) => {
+    setState({
+      ...state,
+      activeTab: newValue
+    });
+  };
+  const toggleShowEditForm = () => {
+    const newShowEditForm = !state.showEditForm;
+    setState({
+      ...state,
+      showEditForm: newShowEditForm,
+      showDeleteForm: false,
+      showSettingsForm: false
+    });
+    if (onChange) {
+      onChange(prevBlock => ({
+        ...prevBlock,
+        collapse: newShowEditForm,
+        meta: {
+          ...prevBlock.meta,
+          changed: Date.now()
+        }
+      }));
+    }
+  };
+  const toggleShowSettingsForm = () => {
+    setState({
+      ...state,
+      showEditForm: false,
+      showDeleteForm: false,
+      showSettingsForm: !state.showSettingsForm
+    });
+  };
+  const handleClickMoreBtn = e => {
+    setState({
+      ...state,
+      showEditForm: false,
+      showSettingsForm: false,
+      showDeleteForm: false,
+      moreAnchorEl: e.currentTarget
+    });
+  };
+  const handleCloseMoreMenu = () => {
+    setState({
+      ...state,
+      moreAnchorEl: null
+    });
+  };
+  const handleCloneBlock = (withData = true) => () => {
+    handleCloseMoreMenu();
+    onClone(withData);
+  };
+  const handleDeleteBlock = () => {
+    setState({
+      ...state,
+      showEditForm: false,
+      showSettingsForm: false,
+      showDeleteForm: true,
+      moreAnchorEl: null
+    });
+  };
+  const handleDeleteCancel = () => {
+    setState({
+      ...state,
+      showDeleteForm: false
+    });
+  };
+  const handleDataChange = (0, _react.useCallback)(newDataOrFn => {
+    setEditingBlockId(id);
+    onChange(prevBlock => ({
+      ...prevBlock,
+      data: typeof newDataOrFn === 'function' ? newDataOrFn(prevBlock.data) : newDataOrFn,
+      meta: {
+        ...prevBlock.meta,
+        changed: Date.now()
+      }
+    }));
+  }, [setEditingBlockId, id, onChange]);
+  const handleDebouncedDataChange = (0, _useDebounce.default)(handleDataChange);
+  const handleThrottledDataChange = (0, _useThrottle.default)(handleDataChange);
+  const handleSettingsChange = (0, _react.useCallback)(newSettingsOrFn => {
+    onChange(prevBlock => ({
+      ...prevBlock,
+      settings: typeof newSettingsOrFn === 'function' ? newSettingsOrFn(prevBlock.settings) : newSettingsOrFn,
+      meta: {
+        ...prevBlock.meta,
+        changed: Date.now()
+      }
+    }));
+  }, [onChange]);
+  const handleDebouncedSettingsChange = (0, _useDebounce.default)(handleSettingsChange);
+  const handleThrottledSettingsChange = (0, _useThrottle.default)(handleSettingsChange);
+  (0, _react.useEffect)(() => {
+    if (state.showEditForm || state.showSettingsForm) {
+      setTimeout(() => {
+        if (!rootRef.current) {
+          return;
+        }
+        const firstInput = rootRef.current.querySelector('input, textarea');
+        if (!firstInput) {
+          return;
+        }
+        firstInput.focus();
+      }, 50);
+    }
+  }, [state.showEditForm, state.showSettingsForm]);
+  const isChildOfSelected = _react.default.useMemo(() => {
+    if (!selectedBlockId || !allBlocks) return false;
+    const selectedBlock = allBlocks.find(b => b.id === selectedBlockId);
+    if (!selectedBlock) return false;
+    return JSON.stringify(selectedBlock.data).includes(id);
+  }, [selectedBlockId, allBlocks, id]);
+  const renderHeader = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: classes.headerActions,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+      display: "flex",
+      alignItems: "center",
+      gap: 1,
+      className: "sortable-handle",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+        className: (0, _clsx.default)(['sortable-handle', classes.labelDragIcon]),
+        children: blockType.icon || 'drag_handle'
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+        className: classes.label,
+        variant: "button",
+        component: "div",
+        children: blockType.blockLabel(data)
+      })]
+    }), !blockType.disabled && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: classes.actions,
+      children: [state.showEditForm && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        onClick: toggleShowEditForm,
+        className: classes.iconBtn,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Remove.default, {
+          fontSize: "small"
+        })
+      }), !state.showEditForm && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        onClick: toggleShowEditForm,
+        className: classes.iconBtn,
+        disabled: !blockType.editForm,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Edit.default, {
+          fontSize: "small"
+        })
+      }), state.showSettingsForm && blockType.settingsForm && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        onClick: toggleShowSettingsForm,
+        className: classes.iconBtn,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Remove.default, {
+          fontSize: "small"
+        })
+      }), !state.showSettingsForm && blockType.settingsForm && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        onClick: toggleShowSettingsForm,
+        className: classes.iconBtn,
+        disabled: !blockType.settingsForm,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Settings.default, {
+          fontSize: "small"
+        })
+      })]
+    }), isNested && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        className: `${classes.iconBtn} ${PREFIX}-moreBtn`,
+        onClick: handleClickMoreBtn,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MoreVert.default, {
+          fontSize: "small"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Menu.default, {
+        open: Boolean(state.moreAnchorEl),
+        anchorEl: state.moreAnchorEl,
+        transformOrigin: {
+          vertical: 0,
+          horizontal: 'left'
+        },
+        onClose: handleCloseMoreMenu,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
+          onClick: handleCloneBlock(),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
+            className: classes.listItemIcon,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FileCopy.default, {
+              fontSize: "small"
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
+            children: "Clone"
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
+          onClick: handleDeleteBlock,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
+            className: classes.listItemIcon,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Delete.default, {
+              fontSize: "small"
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
+            children: "Delete"
+          })]
+        })]
+      })]
+    })]
+  });
+  const renderContent = () => {
+    if (isNested) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [state.showEditForm && blockType.editForm && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: classes.form,
+          style: {
+            marginTop: theme.spacing(4)
+          },
+          children: /*#__PURE__*/_react.default.createElement(blockType.editForm, {
+            id,
+            type,
+            data,
+            meta,
+            settings,
+            onChange: handleDataChange,
+            onDebouncedChange: handleDebouncedDataChange,
+            onThrottledChange: handleThrottledDataChange,
+            onClose: toggleShowEditForm
+          })
+        }), blockType.settingsForm && state.showSettingsForm && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: classes.form,
+          children: /*#__PURE__*/_react.default.createElement(blockType.settingsForm, {
+            id,
+            type,
+            data,
+            meta,
+            settings,
+            onChange: handleSettingsChange,
+            onDebouncedChange: handleDebouncedSettingsChange,
+            onThrottledChange: handleThrottledSettingsChange
+          })
+        }), state.showDeleteForm && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: (0, _clsx.default)([classes.form]),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+            mb: 2,
+            children: "Are you sure you want to delete this block?"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: classes.deleteActions,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+              variant: "outlined",
+              onClick: handleDeleteCancel,
+              className: classes.cancelBtn,
+              children: t('editor.cancel')
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+              variant: "contained",
+              color: "primary",
+              onClick: onDelete,
+              startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Delete.default, {}),
+              children: t('editor.delete')
+            })]
+          })]
+        })]
+      });
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Tabs.default, {
+        value: state.activeTab,
+        onChange: handleTabChange,
+        className: classes.tabs,
+        variant: "fullWidth",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tab.default, {
+          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditOutlined.default, {
+            fontSize: "small"
+          }),
+          label: t('editor.content'),
+          sx: {
+            textTransform: 'none',
+            '& .MuiTab-iconWrapper': {
+              marginBottom: '4px'
+            }
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tab.default, {
+          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Style.default, {
+            fontSize: "small"
+          }),
+          label: t('editor.advanced'),
+          sx: {
+            textTransform: 'none',
+            '& .MuiTab-iconWrapper': {
+              marginBottom: '4px'
+            }
+          }
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: classes.tabPanel,
+        children: [state.activeTab === 0 && blockType.editForm && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: classes.form,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+            sx: {
+              textAlign: 'center',
+              pb: 2,
+              fontWeight: 'bold',
+              fontSize: '1rem'
+            },
+            children: blockType.blockLabel(data)
+          }), /*#__PURE__*/_react.default.createElement(blockType.editForm, {
+            id,
+            type,
+            data,
+            meta,
+            settings,
+            onChange: handleDataChange,
+            onDebouncedChange: handleDebouncedDataChange,
+            onThrottledChange: handleThrottledDataChange,
+            onClose: toggleShowEditForm
+          })]
+        }), state.activeTab === 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: classes.form,
+          children: blockType.settingsForm ? /*#__PURE__*/_react.default.createElement(blockType.settingsForm, {
+            id,
+            type,
+            data,
+            meta,
+            settings,
+            onChange: handleSettingsChange,
+            onDebouncedChange: handleDebouncedSettingsChange,
+            onThrottledChange: handleThrottledSettingsChange
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+            variant: "body2",
+            color: "text.secondary",
+            sx: {
+              textAlign: 'center',
+              py: 4
+            },
+            children: t('editor.noAdvanced')
+          })
+        }), state.activeTab === 2 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: classes.form,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+            variant: "body1",
+            children: "Advanced settings coming soon..."
+          })
+        })]
+      })]
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, {
+    ref: rootRef,
+    "data-id": id,
+    className: (0, _clsx.default)(['sortable-item']),
+    onClick: () => {
+      setEditingBlockId(id);
+    },
+    children: [isNested && renderHeader(), renderContent()]
+  }, id);
+};
+var _default = exports.default = /*#__PURE__*/(0, _react.memo)(BlockForm, (prevProps, props) => {
+  const {
+    block: prevBlock,
+    initialState: prevState
+  } = prevProps;
+  const {
+    block,
+    initialState: state
+  } = props;
+  if (block.meta.changed !== prevBlock.meta.changed) {
+    return false;
+  }
+  if (prevState?.showEditForm !== state?.showEditForm) {
+    return false;
+  }
+  return true;
+});

package/layouts/Sidebar/BlocksControl.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { BlockType } from '../../index';
+import { AddBlockButtonProps } from '../../layouts/Sidebar/AddBlockButton';
+import { Block } from '../../types/Block';
+type BlocksControlProps = {
+    label?: string;
+    data: Block[];
+    onChange(newData: Block[]): void;
+    blockTypes: BlockType[];
+    cardinality?: number;
+    classes?: {
+        root?: string;
+        body?: string;
+        footer?: string;
+    };
+    addBlockLabel?: string;
+    addBlockProps?: Partial<AddBlockButtonProps>;
+    isNested?: boolean;
+};
+declare const BlocksControl: React.FC<BlocksControlProps>;
+export default BlocksControl;