@plone/volto 18.0.0-alpha.43 → 18.0.0-alpha.44

package/dist/server/assets/ContentTypeLayout-4t4HDZ3j.js

@@ -0,0 +1,547 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import React__default, { Component } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { compose } from "redux";
+import { Link } from "react-router-dom";
+import { g as getSchema, c1 as updateSchema, bH as getControlpanel, bG as updateControlpanel, h as hasBlocksData, i as getBlocksFieldname, j as getBlocksLayoutFieldname, T as Toast, bI as getParentUrl, I as Icon, o as backSVG, F as Form, k as clearSVG } from "../entry-server.js";
+import { createPortal } from "react-dom";
+import { Segment, Button } from "semantic-ui-react";
+import { toast } from "react-toastify";
+import { injectIntl, defineMessages, FormattedMessage } from "react-intl";
+import { nth, join } from "lodash-es";
+import { E as Error2 } from "./Error-MJ-ObF_2.js";
+import { T as Toolbar } from "./Toolbar-DVsVq7NQ.js";
+import { S as Sidebar } from "./Sidebar-DuoR_j80.js";
+import { s as saveSVG } from "./save-C0BIu8AK.js";
+import "classnames";
+import "moment";
+import "react-router";
+import "react-router-hash-link";
+import "tlds";
+import "prepend-http";
+import "lodash-move";
+import "react-dom/server";
+import "react-transition-group";
+import "promise-file-reader";
+import "uuid";
+import "pretty-bytes";
+import "react-side-effect";
+import "github-slugger";
+import "slate";
+import "hoist-non-react-statics";
+import "query-string";
+import "slate-react";
+import "prettier/standalone";
+import "prettier/parser-html";
+import "prismjs/components/prism-core.js";
+import "react-animate-height";
+import "react-popper";
+import "react-sortable-hoc";
+import "react-dates/initialize.js";
+import "react-anchor-link-smooth-scroll";
+import "jwt-decode";
+import "react-router-config";
+import "react-fast-compare";
+import "object-assign";
+import "lodash-es/split.js";
+import "lodash-es/join.js";
+import "lodash-es/trim.js";
+import "react-cookie";
+import "react-intl-redux";
+import "universal-cookie";
+import "slate-hyperscript";
+import "is-hotkey";
+import "react-dropzone";
+import "react-intersection-observer";
+import "is-url";
+import "lodash-es/isUndefined.js";
+import "lodash-es/isString.js";
+import "redux-mock-store";
+import "serialize-javascript";
+import "superagent";
+import "connected-react-router";
+import "react-beautiful-dnd";
+import "detect-browser";
+import "locale";
+import "history";
+import "redux-thunk";
+import "redux-localstorage-simple";
+import "debug";
+import "express";
+import "http-proxy-middleware";
+import "./users-BY0qskQF.js";
+import "./User-CeYa32LY.js";
+import "./PersonalInformation--cOokZv2.js";
+import "./sidebar-BGq8uRxG.js";
+const messages = defineMessages({
+  changesSaved: {
+    id: "Changes saved.",
+    defaultMessage: "Changes saved."
+  },
+  back: {
+    id: "Back",
+    defaultMessage: "Back"
+  },
+  save: {
+    id: "Save",
+    defaultMessage: "Save"
+  },
+  cancel: {
+    id: "Cancel",
+    defaultMessage: "Cancel"
+  },
+  info: {
+    id: "Info",
+    defaultMessage: "Info"
+  },
+  enable: {
+    id: "Enable editable Blocks",
+    defaultMessage: "Enable editable Blocks"
+  }
+});
+class ContentTypeLayout extends Component {
+  /**
+   * Constructor
+   * @method constructor
+   * @param {Object} props Component properties
+   * @constructs ContentTypeLayout
+   */
+  constructor(props) {
+    super(props);
+    /**
+     * Submit handler
+     * @method onSubmit
+     * @param {object} data Form data.
+     * @returns {undefined}
+     */
+    __publicField(this, "onSubmit", (data) => {
+      const schema = { properties: {} };
+      Object.keys(data).filter((k) => data[k]).forEach((k) => schema.properties[k] = { default: data[k] });
+      this.props.updateSchema(this.props.id, schema);
+    });
+    /**
+     * Cancel handler
+     * @method onCancel
+     * @returns {undefined}
+     */
+    __publicField(this, "onCancel", () => {
+      const url = getParentUrl(this.props.pathname);
+      this.props.history.push(getParentUrl(url));
+    });
+    /**
+     * Enable blocks handler
+     * @method onEnableBlocks
+     * @returns {undefined}
+     */
+    __publicField(this, "onEnableBlocks", () => {
+      var _a, _b;
+      const { properties = {} } = this.props.schema;
+      const blocksFieldName = getBlocksFieldname(properties);
+      const blocksLayoutFieldname = getBlocksLayoutFieldname(properties);
+      const schema = {
+        fieldsets: [
+          {
+            id: "layout",
+            title: "Layout",
+            fields: ["blocks", "blocks_layout"]
+          }
+        ],
+        properties: {
+          blocks: {
+            title: "Blocks",
+            type: "dict",
+            widget: "json",
+            factory: "JSONField",
+            default: ((_a = properties[blocksFieldName]) == null ? void 0 : _a.default) || {}
+          },
+          blocks_layout: {
+            title: "Blocks Layout",
+            type: "dict",
+            widget: "json",
+            factory: "JSONField",
+            default: ((_b = properties[blocksLayoutFieldname]) == null ? void 0 : _b.default) || { items: [] }
+          }
+        }
+      };
+      this.props.updateSchema(this.props.id, schema);
+    });
+    /**
+     * Disable Blocks behavior handler
+     * @method onDisableBlocksBehavior
+     * @returns {undefined}
+     */
+    __publicField(this, "onDisableBlocksBehavior", () => {
+      this.props.updateControlpanel(this.props.controlpanel["@id"], {
+        [this.state.readOnlyBehavior]: false,
+        "volto.blocks.editable.layout": true
+      });
+    });
+    /**
+     * Enable Blocks behavior handler
+     * @method onEnableBlocksBehavior
+     * @returns {undefined}
+     */
+    __publicField(this, "onEnableBlocksBehavior", () => {
+      this.props.updateControlpanel(this.props.controlpanel["@id"], {
+        "volto.blocks.editable.layout": true
+      });
+    });
+    this.state = {
+      visual: false,
+      content: null,
+      readOnlyBehavior: null,
+      error: null,
+      isClient: false
+    };
+    this.form = React__default.createRef();
+  }
+  /**
+   * Component did mount
+   * @method componentDidMount
+   * @returns {undefined}
+   */
+  componentDidMount() {
+    this.props.getControlpanel(join([this.props.parent, this.props.id], "/"));
+    this.props.getSchema(this.props.id);
+    this.setState({ isClient: true });
+  }
+  /**
+   * Component will receive props
+   * @method componentWillReceiveProps
+   * @param {Object} nextProps Next properties
+   * @returns {undefined}
+   */
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    var _a, _b, _c, _d;
+    if (this.props.cpanelRequest.get.loading && nextProps.cpanelRequest.get.error) {
+      this.setState({
+        error: nextProps.cpanelRequest.get.error
+      });
+    }
+    if (this.props.schemaRequest.loading && nextProps.schemaRequest.loaded) {
+      const properties = ((_a = nextProps.schema) == null ? void 0 : _a.properties) || {};
+      const content = {};
+      for (const key in properties) {
+        const value = properties[key].default;
+        if (value) {
+          content[key] = value;
+        }
+      }
+      if (hasBlocksData(properties)) {
+        this.setState({
+          visual: true
+        });
+        const blocksFieldName = getBlocksFieldname(properties);
+        const blocksLayoutFieldname = getBlocksLayoutFieldname(properties);
+        content[blocksFieldName] = ((_b = properties[blocksFieldName]) == null ? void 0 : _b.default) || {};
+        content[blocksLayoutFieldname] = ((_c = properties[blocksLayoutFieldname]) == null ? void 0 : _c.default) || { items: [] };
+        const blocksBehavior = ((_d = properties[blocksFieldName]) == null ? void 0 : _d.behavior) || "";
+        this.setState({
+          readOnlyBehavior: !blocksBehavior.includes("generated") ? blocksBehavior : ""
+        });
+      } else {
+        this.setState({
+          visual: false,
+          readOnlyBehavior: ""
+        });
+      }
+      this.setState({
+        content
+      });
+    }
+    if (this.props.schemaRequest.update.loading && nextProps.schemaRequest.update.loaded) {
+      this.props.getSchema(this.props.id);
+      toast.info(
+        /* @__PURE__ */ jsx(
+          Toast,
+          {
+            info: true,
+            title: this.props.intl.formatMessage(messages.info),
+            content: this.props.intl.formatMessage(messages.changesSaved)
+          }
+        )
+      );
+    }
+    if (this.props.cpanelRequest.update.loading && nextProps.cpanelRequest.update.loaded) {
+      this.onEnableBlocks();
+    }
+  }
+  /**
+   * Render method.
+   * @method render
+   * @returns {string} Markup for the component.
+   */
+  render() {
+    var _a, _b, _c, _d, _e, _f;
+    if (this.state.error) {
+      return /* @__PURE__ */ jsx(Error2, { error: this.state.error });
+    }
+    if (!this.state.visual) {
+      if (!this.state.content) {
+        return /* @__PURE__ */ jsx("div", {});
+      }
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(
+          Segment,
+          {
+            placeholder: true,
+            id: "page-controlpanel-layout",
+            className: "ui container center aligned",
+            children: [
+              /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                FormattedMessage,
+                {
+                  id: "Can not edit Layout for <strong>{type}</strong> content-type as it doesn't have support for <strong>Volto Blocks</strong> enabled",
+                  defaultMessage: "Can not edit Layout for <strong>{type}</strong> content-type as it doesn't have support for <strong>Volto Blocks</strong> enabled",
+                  values: {
+                    strong: (...chunks) => /* @__PURE__ */ jsx("strong", { children: chunks }),
+                    type: ((_b = (_a = this.props) == null ? void 0 : _a.controlpanel) == null ? void 0 : _b.title) || this.props.id
+                  }
+                }
+              ) }),
+              /* @__PURE__ */ jsx("div", { className: "ui divider" }),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  primary: true,
+                  onClick: this.onEnableBlocksBehavior,
+                  content: this.props.intl.formatMessage(messages.enable)
+                }
+              )
+            ]
+          }
+        ),
+        this.state.isClient && createPortal(
+          /* @__PURE__ */ jsx(
+            Toolbar,
+            {
+              pathname: this.props.pathname,
+              hideDefaultViewButtons: true,
+              inner: /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+                Link,
+                {
+                  className: "item",
+                  to: "#",
+                  onClick: () => this.onCancel(),
+                  children: /* @__PURE__ */ jsx(
+                    Icon,
+                    {
+                      name: backSVG,
+                      size: "30px",
+                      className: "contents circled",
+                      title: this.props.intl.formatMessage(messages.back)
+                    }
+                  )
+                }
+              ) })
+            }
+          ),
+          document.getElementById("toolbar")
+        )
+      ] });
+    }
+    if (this.state.readOnlyBehavior) {
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(
+          Segment,
+          {
+            placeholder: true,
+            id: "page-controlpanel-layout",
+            className: "ui container center aligned",
+            children: [
+              /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                FormattedMessage,
+                {
+                  id: "Can not edit Layout for <strong>{type}</strong> content-type as the <strong>Blocks behavior</strong> is enabled and <strong>read-only</strong>",
+                  defaultMessage: "Can not edit Layout for <strong>{type}</strong> content-type as the <strong>Blocks behavior</strong> is enabled and <strong>read-only</strong>",
+                  values: {
+                    strong: (...chunks) => /* @__PURE__ */ jsx("strong", { children: chunks }),
+                    type: ((_d = (_c = this.props) == null ? void 0 : _c.controlpanel) == null ? void 0 : _d.title) || this.props.id
+                  }
+                }
+              ) }),
+              /* @__PURE__ */ jsx("div", { className: "ui divider" }),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  primary: true,
+                  onClick: this.onDisableBlocksBehavior,
+                  content: this.props.intl.formatMessage(messages.enable)
+                }
+              )
+            ]
+          }
+        ),
+        this.state.isClient && createPortal(
+          /* @__PURE__ */ jsx(
+            Toolbar,
+            {
+              pathname: this.props.pathname,
+              hideDefaultViewButtons: true,
+              inner: /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+                Link,
+                {
+                  className: "item",
+                  to: "#",
+                  onClick: () => this.onCancel(),
+                  children: /* @__PURE__ */ jsx(
+                    Icon,
+                    {
+                      name: backSVG,
+                      size: "30px",
+                      className: "contents circled",
+                      title: this.props.intl.formatMessage(messages.back)
+                    }
+                  )
+                }
+              ) })
+            }
+          ),
+          document.getElementById("toolbar")
+        )
+      ] });
+    }
+    const blocksFieldName = getBlocksFieldname(
+      ((_e = this.props.schema) == null ? void 0 : _e.properties) || {}
+    );
+    const blocksLayoutFieldname = getBlocksLayoutFieldname(
+      ((_f = this.props.schema) == null ? void 0 : _f.properties) || {}
+    );
+    return /* @__PURE__ */ jsxs("div", { id: "page-controlpanel-layout", children: [
+      /* @__PURE__ */ jsx(
+        Form,
+        {
+          isAdminForm: true,
+          ref: this.form,
+          schema: {
+            fieldsets: [
+              {
+                id: "layout",
+                title: "Layout",
+                fields: [blocksFieldName, blocksLayoutFieldname]
+              }
+            ],
+            properties: {
+              ...this.props.schema.properties[blocksFieldName],
+              ...this.props.schema.properties[blocksLayoutFieldname]
+            },
+            required: []
+          },
+          formData: this.state.content,
+          onSubmit: this.onSubmit,
+          onCancel: this.onCancel,
+          pathname: this.props.pathname,
+          visual: this.state.visual,
+          hideActions: true
+        }
+      ),
+      this.state.isClient && createPortal(
+        /* @__PURE__ */ jsx(Sidebar, { settingsTab: true, documentTab: false }),
+        document.getElementById("sidebar")
+      ),
+      this.state.isClient && createPortal(
+        /* @__PURE__ */ jsx(
+          Toolbar,
+          {
+            pathname: this.props.pathname,
+            hideDefaultViewButtons: true,
+            inner: /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  id: "toolbar-save",
+                  className: "save",
+                  "aria-label": this.props.intl.formatMessage(messages.save),
+                  onClick: () => this.form.current.onSubmit(),
+                  disabled: this.props.schemaRequest.update.loading,
+                  loading: this.props.schemaRequest.update.loading,
+                  children: /* @__PURE__ */ jsx(
+                    Icon,
+                    {
+                      name: saveSVG,
+                      className: "circled",
+                      size: "30px",
+                      title: this.props.intl.formatMessage(messages.save)
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  className: "cancel",
+                  "aria-label": this.props.intl.formatMessage(messages.cancel),
+                  onClick: () => this.onCancel(),
+                  children: /* @__PURE__ */ jsx(
+                    Icon,
+                    {
+                      name: clearSVG,
+                      className: "circled",
+                      size: "30px",
+                      title: this.props.intl.formatMessage(messages.cancel)
+                    }
+                  )
+                }
+              )
+            ] })
+          }
+        ),
+        document.getElementById("toolbar")
+      )
+    ] });
+  }
+}
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+__publicField(ContentTypeLayout, "propTypes", {
+  updateControlpanel: PropTypes.func.isRequired,
+  getControlpanel: PropTypes.func.isRequired,
+  getSchema: PropTypes.func.isRequired,
+  updateSchema: PropTypes.func.isRequired,
+  id: PropTypes.string.isRequired,
+  parent: PropTypes.string.isRequired,
+  pathname: PropTypes.string.isRequired,
+  schemaRequest: PropTypes.objectOf(PropTypes.any).isRequired,
+  cpanelRequest: PropTypes.objectOf(PropTypes.any).isRequired,
+  schema: PropTypes.objectOf(PropTypes.any),
+  controlpanel: PropTypes.shape({
+    "@id": PropTypes.string,
+    data: PropTypes.object,
+    schema: PropTypes.object,
+    title: PropTypes.string
+  })
+});
+/**
+ * Default properties.
+ * @property {Object} defaultProps Default properties.
+ * @static
+ */
+__publicField(ContentTypeLayout, "defaultProps", {
+  schema: {},
+  controlpanel: null
+});
+const ContentTypeLayout$1 = compose(
+  injectIntl,
+  connect(
+    (state, props) => ({
+      schema: state.schema.schema,
+      schemaRequest: state.schema,
+      cpanelRequest: state.controlpanels,
+      controlpanel: state.controlpanels.controlpanel,
+      pathname: props.location.pathname,
+      id: nth(props.location.pathname.split("/"), -2),
+      parent: nth(props.location.pathname.split("/"), -3)
+    }),
+    { getSchema, updateSchema, getControlpanel, updateControlpanel }
+  )
+)(ContentTypeLayout);
+export {
+  ContentTypeLayout$1 as default
+};