@contentstack/live-preview-utils/dist/modern/visualBuilder/components/emptyBlock.js

Contentstack provides the Live Preview SDK to establish a communication channel between the various Contentstack SDKs and your website, transmitting live changes to the preview pane.

import "../../chunk-5WRI5ZAA.js";

// src/visualBuilder/components/emptyBlock.tsx
import classNames from "classnames";
import { visualBuilderStyles } from "../visualBuilder.style.js";
import visualBuilderPostMessage from "../utils/visualBuilderPostMessage.js";
import { observeParentAndFocusNewInstance } from "../utils/multipleElementAddButton.js";
import { VisualBuilderPostMessageEvents } from "../utils/types/postMessage.types.js";
import { startCase, toLower } from "lodash-es";
import { jsx, jsxs } from "preact/jsx-runtime";
function EmptyBlock(props) {
  const { details } = props;
  const blockParentName = details.fieldSchema.display_name;
  async function sendAddInstanceEvent() {
    await visualBuilderPostMessage?.send(
      VisualBuilderPostMessageEvents.ADD_INSTANCE,
      {
        fieldMetadata: details.fieldMetadata,
        index: 0
      }
    );
    observeParentAndFocusNewInstance({
      parentCslp: details.fieldMetadata.cslpValue,
      index: 0
    });
  }
  return /* @__PURE__ */ jsxs(
    "div",
    {
      className: classNames(
        "visual-builder__empty-block",
        visualBuilderStyles()["visual-builder__empty-block"]
      ),
      children: [
        /* @__PURE__ */ jsxs(
          "div",
          {
            className: classNames(
              "visual-builder__empty-block-title",
              visualBuilderStyles()["visual-builder__empty-block-title"]
            ),
            children: [
              "This page doesn\u2019t have any",
              " ",
              /* @__PURE__ */ jsx(
                "span",
                {
                  className: classNames(
                    "visual-builder__empty-block-field-name",
                    visualBuilderStyles()["visual-builder__empty-block-field-name"]
                  ),
                  children: startCase(toLower(blockParentName))
                }
              ),
              " ",
              "added. Click the button below to add one."
            ]
          }
        ),
        /* @__PURE__ */ jsxs(
          "button",
          {
            className: classNames(
              "visual-builder__empty-block-add-button",
              visualBuilderStyles()["visual-builder__empty-block-add-button"]
            ),
            onClick: () => sendAddInstanceEvent(),
            type: "button",
            "data-testid": "visual-builder__empty-block-add-button",
            children: [
              /* @__PURE__ */ jsx(
                "span",
                {
                  className: classNames(
                    "visual-builder__empty-block-plus-icon",
                    visualBuilderStyles()["visual-builder__empty-block-plus-icon"]
                  ),
                  children: "+"
                }
              ),
              "\xA0 Add ",
              blockParentName
            ]
          }
        )
      ]
    }
  );
}
export {
  EmptyBlock
};
//# sourceMappingURL=emptyBlock.js.map