@quillforms/block-editor/build/components/skeleton/index.js

Quill forms block editor

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _element = require("@wordpress/element");
var _rendererCore = require("@quillforms/renderer-core");
var _themeEditor = require("@quillforms/theme-editor");
var _data = require("@wordpress/data");
var _editor = _interopRequireDefault(require("./editor"));
var _lodash = require("lodash");
var _classnames = _interopRequireDefault(require("classnames"));
var _adminComponents = require("@quillforms/admin-components");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress Dependencies
 */

/**
 * Internal Dependencies
 */

/**
 * External Dependencies
 */

const editLabel = (0, _adminComponents.withErrorBoundary)(({
  childId,
  childIndex,
  parentId
}) => {
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_editor.default, {
    childId: childId,
    childIndex: childIndex,
    parentId: parentId,
    type: "label"
  });
}, {
  title: 'Builder Editor Error',
  message: 'Error happened in the builder.',
  actionLabel: 'Retry',
  showDetails: true
});
const editDescription = (0, _adminComponents.withErrorBoundary)(() => {
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_editor.default, {
    type: "description"
  });
}, {
  title: 'Builder  Editor Error',
  message: 'Error happened in the builder.',
  actionLabel: 'Retry',
  showDetails: true
});
const Skeleton = (0, _adminComponents.withErrorBoundary)(() => {
  const {
    currentChildBlockId
  } = (0, _data.useSelect)(select => {
    return {
      currentChildBlockId: select('quillForms/block-editor').getCurrentChildBlockId()
    };
  });
  const themeId = (0, _themeEditor.useCurrentThemeId)();
  const currentTheme = (0, _themeEditor.useCurrentTheme)();
  const {
    hasThemesFinishedResolution,
    hasFontsFinishedResolution,
    themesList,
    customFontsList,
    currentBlockBeingEdited,
    currentBlockBeingEditedId,
    blocks,
    messages,
    settings,
    customCSS
  } = (0, _data.useSelect)(select => {
    var _customFontsSelector$;
    // hasFinishedResolution isn't in select map and until now, @types/wordpress__data doesn't have it by default.
    const {
      hasFinishedResolution
    } = select('quillForms/theme-editor');
    const customFontsSelector = select('quillForms/custom-fonts');
    return {
      hasThemesFinishedResolution: hasFinishedResolution('getThemesList'),
      hasFontsFinishedResolution:
      // @ts-expect-error
      customFontsSelector ? customFontsSelector.hasFinishedResolution('getFontsList') : true,
      themesList: select('quillForms/theme-editor').getThemesList(),
      customFontsList: (_customFontsSelector$ = customFontsSelector?.getFontsList()) !== null && _customFontsSelector$ !== void 0 ? _customFontsSelector$ : [],
      currentBlockBeingEdited: select('quillForms/block-editor').getCurrentBlock(),
      currentChildBlockId: select('quillForms/block-editor').getCurrentChildBlockId(),
      currentBlockBeingEditedId: select('quillForms/block-editor').getCurrentBlockId(),
      blocks: select('quillForms/block-editor').getBlocks(true),
      messages: select('quillForms/messages-editor').getMessages(),
      settings: select('quillForms/settings-editor').getSettings(),
      customCSS: select('quillForms/code-editor').getCustomCSS()
    };
  });
  const {
    goToBlock,
    setSwiper
  } = (0, _data.useDispatch)('quillForms/renderer-core');
  const {
    setCurrentBlock,
    setCurrentChildBlock
  } = (0, _data.useDispatch)('quillForms/block-editor');
  const $themesList = (0, _lodash.cloneDeep)(themesList);
  if (themeId) {
    $themesList[$themesList.findIndex(theme => theme.id === themeId)] = {
      id: themeId,
      ...currentTheme
    };
  }
  (0, _element.useEffect)(() => {
    if (!currentBlockBeingEditedId && blocks.length > 0) {
      setCurrentBlock(blocks[0].id);
    }
  }, [hasThemesFinishedResolution]);
  (0, _element.useEffect)(() => {
    if (currentBlockBeingEdited?.name === 'partial-submission-point') return;
    // const formFields = blocks.filter(
    //     (block) =>
    //         block.name !== 'thankyou-screen' &&
    //         block.name !== 'welcome-screen' &&
    //         block.name !== 'partial-submission-point'
    // );

    // // const $thankyouScreens = blocks
    // //     .filter((block) => block.name === 'thankyou-screen')
    // //     .concat({
    // //         id: 'default_thankyou_screen',
    // //         name: 'thankyou-screen',
    // //     });

    // // const $welcomeScreens = map(
    // //     blocks.filter((block) => block.name === 'welcome-screen'),
    // //     (block) => omit(block, ['name'])
    // // );

    // // const $currentPath = cloneDeep(formFields);
    // // // setSwiper({
    // // //     walkPath: $currentPath,
    // // //     welcomeScreens: $welcomeScreens,
    // // //     thankyouScreens: $thankyouScreens,
    // // //     currentBlockId: currentBlockBeingEdited?.id,
    // // // });

    if (currentBlockBeingEditedId !== undefined && currentBlockBeingEditedId !== 'partial-submission-point') goToBlock(currentBlockBeingEditedId);
  }, [
  // blocks,
  currentBlockBeingEditedId, currentChildBlockId, currentBlockBeingEdited, hasThemesFinishedResolution]);

  // Ensure the active child block is visible on the screen
  (0, _element.useEffect)(() => {
    if (currentChildBlockId) {
      const blockElement = document.querySelector(`.renderer-core-child-block-${currentChildBlockId}`);
      if (blockElement) {
        const rect = blockElement.getBoundingClientRect();
        const isVisible = rect.top >= 0 && rect.bottom <= window.innerHeight;
        if (!isVisible) {
          blockElement.scrollIntoView({
            behavior: 'smooth',
            // Smooth scrolling
            block: 'end',
            // Scroll to the center of the viewport
            inline: 'nearest'
          });
        }
      }
    }
  }, [currentChildBlockId]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    className: (0, _classnames.default)("block-editor-block-edit__skeleton", {
      'is-child-active': currentChildBlockId
    }),
    children: blocks.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_rendererCore.Form, {
      formObj: {
        blocks: (0, _lodash.cloneDeep)(blocks).filter(block => block.name !== 'partial-submission-point'),
        theme: currentTheme?.properties,
        messages,
        // partialSubmissionPoint,
        themesList: $themesList,
        settings,
        customCSS
      },
      applyLogic: false,
      customFonts: customFontsList,
      onSubmit: () => {},
      editor: {
        mode: 'on',
        editLabel,
        editDescription,
        isChildActive: id => id === currentChildBlockId,
        setIsChildActive: id => setCurrentChildBlock(id),
        onClick: id => {
          setCurrentChildBlock(null);
          setCurrentBlock(id);
        }
      }
    })
  });
}, {
  title: 'Builder Error',
  message: 'Error happened in the builder.',
  actionLabel: 'Retry',
  showDetails: true
});
var _default = exports.default = Skeleton;
//# sourceMappingURL=index.js.map