@webiny/app-headless-cms 0.0.0-unstable.78f581c1d2 → 0.0.0-unstable.7be00a75a9

package/admin/plugins/fieldRenderers/dateTime/utils.js

@@ -1,226 +1,59 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getDefaultFieldValue = exports.getCurrentTimeZone = exports.getCurrentLocalTime = exports.getCurrentDate = exports.UTC_TIMEZONES = exports.RemoveFieldButton = exports.DEFAULT_TIMEZONE = void 0;
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _emotion = require("emotion");
-
-var _Grid = require("@webiny/ui/Grid");
-
-var _Button = require("@webiny/ui/Button");
-
-var UTC_TIMEZONES = [{
-  value: "-12:00",
-  label: "UTC-12:00"
-}, {
-  value: "-11:00",
-  label: "UTC-11:00"
-}, {
-  value: "-10:00",
-  label: "UTC-10:00"
-}, {
-  value: "-09:30",
-  label: "UTC-09:30"
-}, {
-  value: "-09:00",
-  label: "UTC-09:00"
-}, {
-  value: "-08:00",
-  label: "UTC-08:00"
-}, {
-  value: "-07:00",
-  label: "UTC-07:00"
-}, {
-  value: "-06:00",
-  label: "UTC-06:00"
-}, {
-  value: "-05:00",
-  label: "UTC-05:00"
-}, {
-  value: "-04:30",
-  label: "UTC-04:30"
-}, {
-  value: "-04:00",
-  label: "UTC-04:00"
-}, {
-  value: "-03:30",
-  label: "UTC-03:30"
-}, {
-  value: "-03:00",
-  label: "UTC-03:00"
-}, {
-  value: "-02:00",
-  label: "UTC-02:00"
-}, {
-  value: "-01:00",
-  label: "UTC-01:00"
-}, {
-  value: "+00:00",
-  label: "UTC+00:00"
-}, {
-  value: "+01:00",
-  label: "UTC+01:00"
-}, {
-  value: "+02:00",
-  label: "UTC+02:00"
-}, {
-  value: "+03:00",
-  label: "UTC+03:00"
-}, {
-  value: "+03:30",
-  label: "UTC+03:30"
-}, {
-  value: "+04:00",
-  label: "UTC+04:00"
-}, {
-  value: "+04:30",
-  label: "UTC+04:30"
-}, {
-  value: "+05:30",
-  label: "UTC+05:30"
-}, {
-  value: "+05:45",
-  label: "UTC+05:45"
-}, {
-  value: "+06:00",
-  label: "UTC+06:00"
-}, {
-  value: "+06:30",
-  label: "UTC+06:30"
-}, {
-  value: "+07:00",
-  label: "UTC+07:00"
-}, {
-  value: "+08:00",
-  label: "UTC+08:00"
-}, {
-  value: "+08:45",
-  label: "UTC+08:45"
-}, {
-  value: "+09:00",
-  label: "UTC+09:00"
-}, {
-  value: "+09:30",
-  label: "UTC+09:30"
-}, {
-  value: "+10:00",
-  label: "UTC+10:00"
-}, {
-  value: "+10:30",
-  label: "UTC+10:30"
-}, {
-  value: "+11:00",
-  label: "UTC+11:00"
-}, {
-  value: "+11:30",
-  label: "UTC+11:30"
-}, {
-  value: "+12:00",
-  label: "UTC+12:00"
-}, {
-  value: "+12:45",
-  label: "UTC+12:45"
-}, {
-  value: "+13:00",
-  label: "UTC+13:00"
-}, {
-  value: "+14:00",
-  label: "UTC+14:00"
-}];
-exports.UTC_TIMEZONES = UTC_TIMEZONES;
-var DEFAULT_TIMEZONE = "+01:00";
-exports.DEFAULT_TIMEZONE = DEFAULT_TIMEZONE;
-
-var getDefaultFieldValue = function getDefaultFieldValue(field, bind, getCurrent) {
-  var def = field.settings ? field.settings.defaultSetValue || "null" : "null";
-
-  if (bind.value || def !== "current") {
-    return bind.value || "";
-  }
-
-  return getCurrent();
+import react from "react";
+import { Grid, IconButton } from "@webiny/admin-ui";
+const DEFAULT_TIMEZONE = "+01:00";
+const getDefaultFieldValue = (field, bind, getCurrent)=>{
+    const def = field.settings ? field.settings.defaultSetValue || "null" : "null";
+    if (bind.value || "current" !== def) return bind.value || "";
+    return getCurrent();
 };
-
-exports.getDefaultFieldValue = getDefaultFieldValue;
-
-var getCurrentTimeZone = function getCurrentTimeZone(date) {
-  if (!date) {
-    date = new Date();
-  }
-
-  var value = date.toTimeString();
-  var matches = value.match(/GMT([+-][0-9]{4})/);
-
-  if (!matches) {
-    return null;
-  }
-
-  var timezone = matches[1];
-  return "".concat(timezone.slice(0, 3), ":").concat(timezone.slice(3));
+const getCurrentTimeZone = (date)=>{
+    if (!date) date = new Date();
+    const value = date.toTimeString();
+    const matches = value.match(/GMT([+-][0-9]{4})/);
+    if (!matches) return null;
+    const timezone = matches[1];
+    return `${timezone.slice(0, 3)}:${timezone.slice(3)}`;
 };
-
-exports.getCurrentTimeZone = getCurrentTimeZone;
-
-var getCurrentLocalTime = function getCurrentLocalTime(date) {
-  if (!date) {
-    date = new Date();
-  }
-
-  var value = date.toTimeString();
-
-  var _value$split = value.split(" "),
-      _value$split2 = (0, _slicedToArray2.default)(_value$split, 1),
-      time = _value$split2[0];
-
-  if (!time || time.match(/^([0-9]{2}):([0-9]{2}):([0-9]{2})$/) === null) {
-    return "00:00:00";
-  }
-
-  return time;
+const getCurrentLocalTime = (date)=>{
+    if (!date) date = new Date();
+    const value = date.toTimeString();
+    const [time] = value.split(" ");
+    if (!time || null === time.match(/^([0-9]{2}):([0-9]{2}):([0-9]{2})$/)) return "00:00:00";
+    return time;
 };
-
-exports.getCurrentLocalTime = getCurrentLocalTime;
-
-var getCurrentDate = function getCurrentDate(date) {
-  if (!date) {
-    date = new Date();
-  }
-
-  var year = String(date.getFullYear()).padStart(4, "0");
-  var month = String(date.getMonth() + 1).padStart(2, "0");
-  var day = String(date.getDate()).padStart(2, "0");
-  return "".concat(year, "-").concat(month, "-").concat(day);
+const getCurrentDate = (date)=>{
+    if (!date) date = new Date();
+    const year = String(date.getFullYear()).padStart(4, "0");
+    const month = String(date.getMonth() + 1).padStart(2, "0");
+    const day = String(date.getDate()).padStart(2, "0");
+    return `${year}-${month}-${day}`;
 };
-
-exports.getCurrentDate = getCurrentDate;
-var deleteIconStyles = /*#__PURE__*/(0, _emotion.css)({
-  width: "100% !important",
-  height: "100% !important",
-  color: "var(--mdc-theme-text-secondary-on-background) !important"
-}, "label:deleteIconStyles;");
-
-var RemoveFieldButton = function RemoveFieldButton(_ref) {
-  var trailingIcon = _ref.trailingIcon;
-
-  if (!trailingIcon) {
-    return null;
-  }
-
-  return /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
-    span: 1
-  }, /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
-    className: deleteIconStyles,
-    onClick: trailingIcon.onClick,
-    icon: trailingIcon.icon
-  }));
+const getHHmm = (time)=>{
+    if (!time) return "";
+    const parsableTime = time || getCurrentLocalTime();
+    return parsableTime.split(":").slice(0, 2).join(":");
+};
+const getHHmmss = (time)=>{
+    const parsableTime = time || getCurrentLocalTime();
+    const parts = [
+        ...parsableTime.split(":").slice(0, 2),
+        "00"
+    ];
+    return parts.join(":");
+};
+const RemoveFieldButton = ({ trailingIcon })=>{
+    if (!trailingIcon) return null;
+    return /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 1
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex items-end justify-center h-full"
+    }, /*#__PURE__*/ react.createElement(IconButton, {
+        variant: "ghost",
+        onClick: trailingIcon.onClick,
+        icon: trailingIcon.icon,
+        className: "mb-xs-plus"
+    })));
 };
+export { DEFAULT_TIMEZONE, RemoveFieldButton, getCurrentDate, getCurrentLocalTime, getCurrentTimeZone, getDefaultFieldValue, getHHmm, getHHmmss };
 
-exports.RemoveFieldButton = RemoveFieldButton;
+//# sourceMappingURL=utils.js.map

package/admin/plugins/fieldRenderers/dateTime/utils.js.map

@@ -1 +1 @@
-{"version":3,"names":["UTC_TIMEZONES","value","label","DEFAULT_TIMEZONE","getDefaultFieldValue","field","bind","getCurrent","def","settings","defaultSetValue","getCurrentTimeZone","date","Date","toTimeString","matches","match","timezone","slice","getCurrentLocalTime","split","time","getCurrentDate","year","String","getFullYear","padStart","month","getMonth","day","getDate","deleteIconStyles","css","width","height","color","RemoveFieldButton","trailingIcon","onClick","icon"],"sources":["utils.tsx"],"sourcesContent":["import React from \"react\";\nimport { css } from \"emotion\";\nimport { Cell } from \"@webiny/ui/Grid\";\nimport { IconButton } from \"@webiny/ui/Button\";\nimport { CmsEditorField } from \"~/types\";\n\nexport const UTC_TIMEZONES = [\n    {\n        value: \"-12:00\",\n        label: \"UTC-12:00\"\n    },\n    {\n        value: \"-11:00\",\n        label: \"UTC-11:00\"\n    },\n    {\n        value: \"-10:00\",\n        label: \"UTC-10:00\"\n    },\n    {\n        value: \"-09:30\",\n        label: \"UTC-09:30\"\n    },\n    {\n        value: \"-09:00\",\n        label: \"UTC-09:00\"\n    },\n    {\n        value: \"-08:00\",\n        label: \"UTC-08:00\"\n    },\n    {\n        value: \"-07:00\",\n        label: \"UTC-07:00\"\n    },\n    {\n        value: \"-06:00\",\n        label: \"UTC-06:00\"\n    },\n    {\n        value: \"-05:00\",\n        label: \"UTC-05:00\"\n    },\n    {\n        value: \"-04:30\",\n        label: \"UTC-04:30\"\n    },\n    {\n        value: \"-04:00\",\n        label: \"UTC-04:00\"\n    },\n    {\n        value: \"-03:30\",\n        label: \"UTC-03:30\"\n    },\n    {\n        value: \"-03:00\",\n        label: \"UTC-03:00\"\n    },\n    {\n        value: \"-02:00\",\n        label: \"UTC-02:00\"\n    },\n    {\n        value: \"-01:00\",\n        label: \"UTC-01:00\"\n    },\n    {\n        value: \"+00:00\",\n        label: \"UTC+00:00\"\n    },\n    {\n        value: \"+01:00\",\n        label: \"UTC+01:00\"\n    },\n    {\n        value: \"+02:00\",\n        label: \"UTC+02:00\"\n    },\n    {\n        value: \"+03:00\",\n        label: \"UTC+03:00\"\n    },\n    {\n        value: \"+03:30\",\n        label: \"UTC+03:30\"\n    },\n    {\n        value: \"+04:00\",\n        label: \"UTC+04:00\"\n    },\n    {\n        value: \"+04:30\",\n        label: \"UTC+04:30\"\n    },\n    {\n        value: \"+05:30\",\n        label: \"UTC+05:30\"\n    },\n    {\n        value: \"+05:45\",\n        label: \"UTC+05:45\"\n    },\n    {\n        value: \"+06:00\",\n        label: \"UTC+06:00\"\n    },\n    {\n        value: \"+06:30\",\n        label: \"UTC+06:30\"\n    },\n    {\n        value: \"+07:00\",\n        label: \"UTC+07:00\"\n    },\n    {\n        value: \"+08:00\",\n        label: \"UTC+08:00\"\n    },\n    {\n        value: \"+08:45\",\n        label: \"UTC+08:45\"\n    },\n    {\n        value: \"+09:00\",\n        label: \"UTC+09:00\"\n    },\n    {\n        value: \"+09:30\",\n        label: \"UTC+09:30\"\n    },\n    {\n        value: \"+10:00\",\n        label: \"UTC+10:00\"\n    },\n    {\n        value: \"+10:30\",\n        label: \"UTC+10:30\"\n    },\n    {\n        value: \"+11:00\",\n        label: \"UTC+11:00\"\n    },\n    {\n        value: \"+11:30\",\n        label: \"UTC+11:30\"\n    },\n    {\n        value: \"+12:00\",\n        label: \"UTC+12:00\"\n    },\n    {\n        value: \"+12:45\",\n        label: \"UTC+12:45\"\n    },\n    {\n        value: \"+13:00\",\n        label: \"UTC+13:00\"\n    },\n    {\n        value: \"+14:00\",\n        label: \"UTC+14:00\"\n    }\n];\n\nexport const DEFAULT_TIMEZONE = \"+01:00\";\n\nexport const getDefaultFieldValue = (\n    field: CmsEditorField,\n    bind: {\n        value: string | null | undefined;\n    },\n    getCurrent: () => string\n): string => {\n    const def = field.settings ? field.settings.defaultSetValue || \"null\" : \"null\";\n    if (bind.value || def !== \"current\") {\n        return bind.value || \"\";\n    }\n    return getCurrent();\n};\n\nexport const getCurrentTimeZone = (date?: Date): string | null => {\n    if (!date) {\n        date = new Date();\n    }\n    const value = date.toTimeString();\n\n    const matches = value.match(/GMT([+-][0-9]{4})/);\n    if (!matches) {\n        return null;\n    }\n    const timezone = matches[1];\n    return `${timezone.slice(0, 3)}:${timezone.slice(3)}`;\n};\n\nexport const getCurrentLocalTime = (date?: Date): string => {\n    if (!date) {\n        date = new Date();\n    }\n    const value = date.toTimeString();\n\n    const [time] = value.split(\" \");\n    if (!time || time.match(/^([0-9]{2}):([0-9]{2}):([0-9]{2})$/) === null) {\n        return \"00:00:00\";\n    }\n    return time;\n};\n\nexport const getCurrentDate = (date?: Date): string => {\n    if (!date) {\n        date = new Date();\n    }\n    const year = String(date.getFullYear()).padStart(4, \"0\");\n    const month = String(date.getMonth() + 1).padStart(2, \"0\");\n    const day = String(date.getDate()).padStart(2, \"0\");\n\n    return `${year}-${month}-${day}`;\n};\n\nconst deleteIconStyles = css({\n    width: \"100% !important\",\n    height: \"100% !important\",\n    color: \"var(--mdc-theme-text-secondary-on-background) !important\"\n});\n\ninterface RemoveFieldButtonProps {\n    // TODO @ts-refactor figure out correct trailing icon type\n    // @ts-ignore\n    trailingIcon: any;\n}\nexport const RemoveFieldButton: React.FC<RemoveFieldButtonProps> = ({ trailingIcon }) => {\n    if (!trailingIcon) {\n        return null;\n    }\n    return (\n        <Cell span={1}>\n            <IconButton\n                className={deleteIconStyles}\n                onClick={trailingIcon.onClick}\n                icon={trailingIcon.icon}\n            />\n        </Cell>\n    );\n};\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAGO,IAAMA,aAAa,GAAG,CACzB;EACIC,KAAK,EAAE,QADX;EAEIC,KAAK,EAAE;AAFX,CADyB,EAKzB;EACID,KAAK,EAAE,QADX;EAEIC,KAAK,EAAE;AAFX,CALyB,EASzB;EACID,KAAK,EAAE,QADX;EAEIC,KAAK,EAAE;AAFX,CATyB,EAazB;EACID,KAAK,EAAE,QADX;EAEIC,KAAK,EAAE;AAFX,CAbyB,EAiBzB;EACID,KAAK,EAAE,QADX;EAEIC,KAAK,EAAE;AAFX,CAjByB,EAqBzB;EACID,KAAK,EAAE,QADX;EAEIC,KAAK,EAAE;AAFX,CArByB,EAyBzB;EACID,KAAK,EAAE,QADX;EAEIC,KAAK,EAAE;AAFX,CAzByB,EA6BzB;EACID,KAAK,EAAE,QADX;EAEIC,KAAK,EAAE;AAFX,CA7ByB,EAiCzB;EACID,KAAK,EAAE,QADX;EAEIC,KAAK,EAAE;AAFX,CAjCyB,EAqCzB;EACID,KAAK,EAAE,QADX;EAEIC,KAAK,EAAE;AAFX,CArCyB,EAyCzB;EACID,KAAK,EAAE,QADX;EAEIC,KAAK,EAAE;AAFX,CAzCyB,EA6CzB;EACID,KAAK,EAAE,QADX;EAEIC,KAAK,EAAE;AAFX,CA7CyB,EAiDzB;EACID,KAAK,EAAE,QADX;EAEIC,KAAK,EAAE;AAFX,CAjDyB,EAqDzB;EACID,KAAK,EAAE,QADX;EAEIC,KAAK,EAAE;AAFX,CArDyB,EAyDzB;EACID,KAAK,EAAE,QADX;EAEIC,KAAK,EAAE;AAFX,CAzDyB,EA6DzB;EACID,KAAK,EAAE,QADX;EAEIC,KAAK,EAAE;AAFX,CA7DyB,EAiEzB;EACID,KAAK,EAAE,QADX;EAEIC,KAAK,EAAE;AAFX,CAjEyB,EAqEzB;EACID,KAAK,EAAE,QADX;EAEIC,KAAK,EAAE;AAFX,CArEyB,EAyEzB;EACID,KAAK,EAAE,QADX;EAEIC,KAAK,EAAE;AAFX,CAzEyB,EA6EzB;EACID,KAAK,EAAE,QADX;EAEIC,KAAK,EAAE;AAFX,CA7EyB,EAiFzB;EACID,KAAK,EAAE,QADX;EAEIC,KAAK,EAAE;AAFX,CAjFyB,EAqFzB;EACID,KAAK,EAAE,QADX;EAEIC,KAAK,EAAE;AAFX,CArFyB,EAyFzB;EACID,KAAK,EAAE,QADX;EAEIC,KAAK,EAAE;AAFX,CAzFyB,EA6FzB;EACID,KAAK,EAAE,QADX;EAEIC,KAAK,EAAE;AAFX,CA7FyB,EAiGzB;EACID,KAAK,EAAE,QADX;EAEIC,KAAK,EAAE;AAFX,CAjGyB,EAqGzB;EACID,KAAK,EAAE,QADX;EAEIC,KAAK,EAAE;AAFX,CArGyB,EAyGzB;EACID,KAAK,EAAE,QADX;EAEIC,KAAK,EAAE;AAFX,CAzGyB,EA6GzB;EACID,KAAK,EAAE,QADX;EAEIC,KAAK,EAAE;AAFX,CA7GyB,EAiHzB;EACID,KAAK,EAAE,QADX;EAEIC,KAAK,EAAE;AAFX,CAjHyB,EAqHzB;EACID,KAAK,EAAE,QADX;EAEIC,KAAK,EAAE;AAFX,CArHyB,EAyHzB;EACID,KAAK,EAAE,QADX;EAEIC,KAAK,EAAE;AAFX,CAzHyB,EA6HzB;EACID,KAAK,EAAE,QADX;EAEIC,KAAK,EAAE;AAFX,CA7HyB,EAiIzB;EACID,KAAK,EAAE,QADX;EAEIC,KAAK,EAAE;AAFX,CAjIyB,EAqIzB;EACID,KAAK,EAAE,QADX;EAEIC,KAAK,EAAE;AAFX,CArIyB,EAyIzB;EACID,KAAK,EAAE,QADX;EAEIC,KAAK,EAAE;AAFX,CAzIyB,EA6IzB;EACID,KAAK,EAAE,QADX;EAEIC,KAAK,EAAE;AAFX,CA7IyB,EAiJzB;EACID,KAAK,EAAE,QADX;EAEIC,KAAK,EAAE;AAFX,CAjJyB,EAqJzB;EACID,KAAK,EAAE,QADX;EAEIC,KAAK,EAAE;AAFX,CArJyB,EAyJzB;EACID,KAAK,EAAE,QADX;EAEIC,KAAK,EAAE;AAFX,CAzJyB,CAAtB;;AA+JA,IAAMC,gBAAgB,GAAG,QAAzB;;;AAEA,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAuB,CAChCC,KADgC,EAEhCC,IAFgC,EAKhCC,UALgC,EAMvB;EACT,IAAMC,GAAG,GAAGH,KAAK,CAACI,QAAN,GAAiBJ,KAAK,CAACI,QAAN,CAAeC,eAAf,IAAkC,MAAnD,GAA4D,MAAxE;;EACA,IAAIJ,IAAI,CAACL,KAAL,IAAcO,GAAG,KAAK,SAA1B,EAAqC;IACjC,OAAOF,IAAI,CAACL,KAAL,IAAc,EAArB;EACH;;EACD,OAAOM,UAAU,EAAjB;AACH,CAZM;;;;AAcA,IAAMI,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,IAAD,EAAgC;EAC9D,IAAI,CAACA,IAAL,EAAW;IACPA,IAAI,GAAG,IAAIC,IAAJ,EAAP;EACH;;EACD,IAAMZ,KAAK,GAAGW,IAAI,CAACE,YAAL,EAAd;EAEA,IAAMC,OAAO,GAAGd,KAAK,CAACe,KAAN,CAAY,mBAAZ,CAAhB;;EACA,IAAI,CAACD,OAAL,EAAc;IACV,OAAO,IAAP;EACH;;EACD,IAAME,QAAQ,GAAGF,OAAO,CAAC,CAAD,CAAxB;EACA,iBAAUE,QAAQ,CAACC,KAAT,CAAe,CAAf,EAAkB,CAAlB,CAAV,cAAkCD,QAAQ,CAACC,KAAT,CAAe,CAAf,CAAlC;AACH,CAZM;;;;AAcA,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACP,IAAD,EAAyB;EACxD,IAAI,CAACA,IAAL,EAAW;IACPA,IAAI,GAAG,IAAIC,IAAJ,EAAP;EACH;;EACD,IAAMZ,KAAK,GAAGW,IAAI,CAACE,YAAL,EAAd;;EAEA,mBAAeb,KAAK,CAACmB,KAAN,CAAY,GAAZ,CAAf;EAAA;EAAA,IAAOC,IAAP;;EACA,IAAI,CAACA,IAAD,IAASA,IAAI,CAACL,KAAL,CAAW,oCAAX,MAAqD,IAAlE,EAAwE;IACpE,OAAO,UAAP;EACH;;EACD,OAAOK,IAAP;AACH,CAXM;;;;AAaA,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAACV,IAAD,EAAyB;EACnD,IAAI,CAACA,IAAL,EAAW;IACPA,IAAI,GAAG,IAAIC,IAAJ,EAAP;EACH;;EACD,IAAMU,IAAI,GAAGC,MAAM,CAACZ,IAAI,CAACa,WAAL,EAAD,CAAN,CAA2BC,QAA3B,CAAoC,CAApC,EAAuC,GAAvC,CAAb;EACA,IAAMC,KAAK,GAAGH,MAAM,CAACZ,IAAI,CAACgB,QAAL,KAAkB,CAAnB,CAAN,CAA4BF,QAA5B,CAAqC,CAArC,EAAwC,GAAxC,CAAd;EACA,IAAMG,GAAG,GAAGL,MAAM,CAACZ,IAAI,CAACkB,OAAL,EAAD,CAAN,CAAuBJ,QAAvB,CAAgC,CAAhC,EAAmC,GAAnC,CAAZ;EAEA,iBAAUH,IAAV,cAAkBI,KAAlB,cAA2BE,GAA3B;AACH,CATM;;;AAWP,IAAME,gBAAgB,gBAAG,IAAAC,YAAA,EAAI;EACzBC,KAAK,EAAE,iBADkB;EAEzBC,MAAM,EAAE,iBAFiB;EAGzBC,KAAK,EAAE;AAHkB,CAAJ,4BAAzB;;AAWO,IAAMC,iBAAmD,GAAG,SAAtDA,iBAAsD,OAAsB;EAAA,IAAnBC,YAAmB,QAAnBA,YAAmB;;EACrF,IAAI,CAACA,YAAL,EAAmB;IACf,OAAO,IAAP;EACH;;EACD,oBACI,6BAAC,UAAD;IAAM,IAAI,EAAE;EAAZ,gBACI,6BAAC,kBAAD;IACI,SAAS,EAAEN,gBADf;IAEI,OAAO,EAAEM,YAAY,CAACC,OAF1B;IAGI,IAAI,EAAED,YAAY,CAACE;EAHvB,EADJ,CADJ;AASH,CAbM"}
+{"version":3,"file":"admin/plugins/fieldRenderers/dateTime/utils.js","sources":["../../../../../src/admin/plugins/fieldRenderers/dateTime/utils.tsx"],"sourcesContent":["import React from \"react\";\nimport { Grid, IconButton } from \"@webiny/admin-ui\";\nimport type { CmsModelField } from \"~/types.js\";\n\nexport const DEFAULT_TIMEZONE = \"+01:00\";\n\nexport const getDefaultFieldValue = (\n    field: CmsModelField,\n    bind: {\n        value: string | null | undefined;\n    },\n    getCurrent: () => string\n): string => {\n    const def = field.settings ? field.settings.defaultSetValue || \"null\" : \"null\";\n    if (bind.value || def !== \"current\") {\n        return bind.value || \"\";\n    }\n    return getCurrent();\n};\n\nexport const getCurrentTimeZone = (date?: Date): string | null => {\n    if (!date) {\n        date = new Date();\n    }\n    const value = date.toTimeString();\n\n    const matches = value.match(/GMT([+-][0-9]{4})/);\n    if (!matches) {\n        return null;\n    }\n    const timezone = matches[1];\n    return `${timezone.slice(0, 3)}:${timezone.slice(3)}`;\n};\n\nexport const getCurrentLocalTime = (date?: Date): string => {\n    if (!date) {\n        date = new Date();\n    }\n    const value = date.toTimeString();\n\n    const [time] = value.split(\" \");\n    if (!time || time.match(/^([0-9]{2}):([0-9]{2}):([0-9]{2})$/) === null) {\n        return \"00:00:00\";\n    }\n    return time;\n};\n\nexport const getCurrentDate = (date?: Date): string => {\n    if (!date) {\n        date = new Date();\n    }\n    const year = String(date.getFullYear()).padStart(4, \"0\");\n    const month = String(date.getMonth() + 1).padStart(2, \"0\");\n    const day = String(date.getDate()).padStart(2, \"0\");\n\n    return `${year}-${month}-${day}`;\n};\n\nexport const getHHmm = (time?: string) => {\n    if (!time) {\n        return \"\";\n    }\n    const parsableTime = time || getCurrentLocalTime();\n    return parsableTime.split(\":\").slice(0, 2).join(\":\");\n};\n\n// Ensure a valid HH:mm:ss string, ending with :00 for seconds.\nexport const getHHmmss = (time?: string) => {\n    const parsableTime = time || getCurrentLocalTime();\n    const parts = [...parsableTime.split(\":\").slice(0, 2), \"00\"];\n\n    return parts.join(\":\");\n};\n\ninterface RemoveFieldButtonProps {\n    trailingIcon: any;\n}\nexport const RemoveFieldButton = ({ trailingIcon }: RemoveFieldButtonProps) => {\n    if (!trailingIcon) {\n        return null;\n    }\n    return (\n        <Grid.Column span={1}>\n            <div className={\"flex items-end justify-center h-full\"}>\n                <IconButton\n                    variant={\"ghost\"}\n                    onClick={trailingIcon.onClick}\n                    icon={trailingIcon.icon}\n                    className={\"mb-xs-plus\"}\n                />\n            </div>\n        </Grid.Column>\n    );\n};\n"],"names":["DEFAULT_TIMEZONE","getDefaultFieldValue","field","bind","getCurrent","def","getCurrentTimeZone","date","Date","value","matches","timezone","getCurrentLocalTime","time","getCurrentDate","year","String","month","day","getHHmm","parsableTime","getHHmmss","parts","RemoveFieldButton","trailingIcon","Grid","IconButton"],"mappings":";;AAIO,MAAMA,mBAAmB;AAEzB,MAAMC,uBAAuB,CAChCC,OACAC,MAGAC;IAEA,MAAMC,MAAMH,MAAM,QAAQ,GAAGA,MAAM,QAAQ,CAAC,eAAe,IAAI,SAAS;IACxE,IAAIC,KAAK,KAAK,IAAIE,AAAQ,cAARA,KACd,OAAOF,KAAK,KAAK,IAAI;IAEzB,OAAOC;AACX;AAEO,MAAME,qBAAqB,CAACC;IAC/B,IAAI,CAACA,MACDA,OAAO,IAAIC;IAEf,MAAMC,QAAQF,KAAK,YAAY;IAE/B,MAAMG,UAAUD,MAAM,KAAK,CAAC;IAC5B,IAAI,CAACC,SACD,OAAO;IAEX,MAAMC,WAAWD,OAAO,CAAC,EAAE;IAC3B,OAAO,GAAGC,SAAS,KAAK,CAAC,GAAG,GAAG,CAAC,EAAEA,SAAS,KAAK,CAAC,IAAI;AACzD;AAEO,MAAMC,sBAAsB,CAACL;IAChC,IAAI,CAACA,MACDA,OAAO,IAAIC;IAEf,MAAMC,QAAQF,KAAK,YAAY;IAE/B,MAAM,CAACM,KAAK,GAAGJ,MAAM,KAAK,CAAC;IAC3B,IAAI,CAACI,QAAQA,AAAqD,SAArDA,KAAK,KAAK,CAAC,uCACpB,OAAO;IAEX,OAAOA;AACX;AAEO,MAAMC,iBAAiB,CAACP;IAC3B,IAAI,CAACA,MACDA,OAAO,IAAIC;IAEf,MAAMO,OAAOC,OAAOT,KAAK,WAAW,IAAI,QAAQ,CAAC,GAAG;IACpD,MAAMU,QAAQD,OAAOT,KAAK,QAAQ,KAAK,GAAG,QAAQ,CAAC,GAAG;IACtD,MAAMW,MAAMF,OAAOT,KAAK,OAAO,IAAI,QAAQ,CAAC,GAAG;IAE/C,OAAO,GAAGQ,KAAK,CAAC,EAAEE,MAAM,CAAC,EAAEC,KAAK;AACpC;AAEO,MAAMC,UAAU,CAACN;IACpB,IAAI,CAACA,MACD,OAAO;IAEX,MAAMO,eAAeP,QAAQD;IAC7B,OAAOQ,aAAa,KAAK,CAAC,KAAK,KAAK,CAAC,GAAG,GAAG,IAAI,CAAC;AACpD;AAGO,MAAMC,YAAY,CAACR;IACtB,MAAMO,eAAeP,QAAQD;IAC7B,MAAMU,QAAQ;WAAIF,aAAa,KAAK,CAAC,KAAK,KAAK,CAAC,GAAG;QAAI;KAAK;IAE5D,OAAOE,MAAM,IAAI,CAAC;AACtB;AAKO,MAAMC,oBAAoB,CAAC,EAAEC,YAAY,EAA0B;IACtE,IAAI,CAACA,cACD,OAAO;IAEX,OAAO,WAAP,GACI,oBAACC,KAAK,MAAM;QAAC,MAAM;qBACf,oBAAC;QAAI,WAAW;qBACZ,oBAACC,YAAUA;QACP,SAAS;QACT,SAASF,aAAa,OAAO;QAC7B,MAAMA,aAAa,IAAI;QACvB,WAAW;;AAK/B"}

package/admin/plugins/fieldRenderers/dynamicZone/AddTemplate.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import type { CmsDynamicZoneTemplateWithTypename } from "../../../../types.js";
+interface UseAddTemplateParams {
+    onTemplate: (template: CmsDynamicZoneTemplateWithTypename) => void;
+}
+interface AddTemplateProps {
+    label?: string;
+    onTemplate: UseAddTemplateParams["onTemplate"];
+}
+export declare const AddTemplateButton: (props: AddTemplateProps) => React.JSX.Element;
+export {};

package/admin/plugins/fieldRenderers/dynamicZone/AddTemplate.js

@@ -0,0 +1,34 @@
+import react from "react";
+import { ReactComponent } from "@webiny/icons/add.svg";
+import { TemplateGallery } from "./TemplateGallery.js";
+import { useTemplateTypename } from "./useTemplateTypename.js";
+import { Button, Dialog } from "@webiny/admin-ui";
+const AddTemplateButton = (props)=>{
+    const { getFullTypename } = useTemplateTypename();
+    const onTemplate = (template)=>{
+        props.onTemplate({
+            ...template,
+            __typename: getFullTypename(template)
+        });
+    };
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "flex justify-between items-center"
+    }, /*#__PURE__*/ react.createElement(Dialog, {
+        size: "lg",
+        className: "w-[800px]",
+        trigger: /*#__PURE__*/ react.createElement(Button, {
+            size: "sm",
+            variant: "tertiary",
+            text: "Add a template",
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null)
+        }),
+        title: "Insert a template",
+        info: /*#__PURE__*/ react.createElement(react.Fragment, null)
+    }, /*#__PURE__*/ react.createElement(TemplateGallery, {
+        onTemplate: onTemplate,
+        onClose: ()=>{}
+    })));
+};
+export { AddTemplateButton };
+
+//# sourceMappingURL=AddTemplate.js.map

package/admin/plugins/fieldRenderers/dynamicZone/AddTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"admin/plugins/fieldRenderers/dynamicZone/AddTemplate.js","sources":["../../../../../src/admin/plugins/fieldRenderers/dynamicZone/AddTemplate.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport type { CmsDynamicZoneTemplate, CmsDynamicZoneTemplateWithTypename } from \"~/types.js\";\nimport { TemplateGallery } from \"./TemplateGallery.js\";\nimport { useTemplateTypename } from \"~/admin/plugins/fieldRenderers/dynamicZone/useTemplateTypename.js\";\nimport { Button, Dialog } from \"@webiny/admin-ui\";\n\ninterface UseAddTemplateParams {\n    onTemplate: (template: CmsDynamicZoneTemplateWithTypename) => void;\n}\n\ninterface AddTemplateProps {\n    label?: string;\n    onTemplate: UseAddTemplateParams[\"onTemplate\"];\n}\n\nexport const AddTemplateButton = (props: AddTemplateProps) => {\n    const { getFullTypename } = useTemplateTypename();\n\n    const onTemplate = (template: CmsDynamicZoneTemplate) => {\n        props.onTemplate({ ...template, __typename: getFullTypename(template) });\n    };\n\n    return (\n        <div className={\"flex justify-between items-center\"}>\n            <Dialog\n                size={\"lg\"}\n                className={\"w-[800px]\"}\n                trigger={\n                    <Button\n                        size={\"sm\"}\n                        variant={\"tertiary\"}\n                        text={\"Add a template\"}\n                        icon={<AddIcon />}\n                    />\n                }\n                title=\"Insert a template\"\n                info={<></>}\n            >\n                <TemplateGallery onTemplate={onTemplate} onClose={() => {}} />\n            </Dialog>\n        </div>\n    );\n};\n"],"names":["AddTemplateButton","props","getFullTypename","useTemplateTypename","onTemplate","template","Dialog","Button","AddIcon","TemplateGallery"],"mappings":";;;;;AAgBO,MAAMA,oBAAoB,CAACC;IAC9B,MAAM,EAAEC,eAAe,EAAE,GAAGC;IAE5B,MAAMC,aAAa,CAACC;QAChBJ,MAAM,UAAU,CAAC;YAAE,GAAGI,QAAQ;YAAE,YAAYH,gBAAgBG;QAAU;IAC1E;IAEA,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACC,QAAMA;QACH,MAAM;QACN,WAAW;QACX,uBACI,oBAACC,QAAMA;YACH,MAAM;YACN,SAAS;YACT,MAAM;YACN,oBAAM,oBAACC,gBAAOA;;QAGtB,OAAM;QACN,oBAAM;qBAEN,oBAACC,iBAAeA;QAAC,YAAYL;QAAY,SAAS,KAAO;;AAIzE"}

package/admin/plugins/fieldRenderers/dynamicZone/MultiValueDynamicZone.d.ts

@@ -0,0 +1,97 @@
+import React from "react";
+import type { BindComponent, BindComponentRenderProp, CmsDynamicZoneTemplate, CmsModelFieldRendererProps, CmsModel, CmsModelField } from "../../../../types.js";
+type GetBind = CmsModelFieldRendererProps["getBind"];
+export interface MultiValueItemContainerProps {
+    value: TemplateValue;
+    contentModel: CmsModel;
+    isFirst: boolean;
+    isLast: boolean;
+    disabled?: boolean;
+    onMoveUp: () => void;
+    onMoveDown: () => void;
+    onDelete: () => void;
+    onClone: (value: TemplateValue) => void;
+    title: React.ReactNode;
+    description: string;
+    icon: React.JSX.Element;
+    actions?: React.JSX.Element;
+    template: CmsDynamicZoneTemplate;
+    children: React.ReactNode;
+}
+export declare const MultiValueItemContainer: (({ children, ...props }: MultiValueItemContainerProps) => React.JSX.Element) & {
+    original: ({ children, ...props }: MultiValueItemContainerProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (({ children, ...props }: MultiValueItemContainerProps) => React.JSX.Element) & {
+        original: ({ children, ...props }: MultiValueItemContainerProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ children, ...props }: MultiValueItemContainerProps) => React.JSX.Element) & {
+        original: ({ children, ...props }: MultiValueItemContainerProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export interface MultiValueItemItemProps {
+    template: CmsDynamicZoneTemplate;
+    contentModel: CmsModel;
+    Bind: BindComponent;
+}
+export declare const MultiValueItem: ((props: MultiValueItemItemProps) => React.JSX.Element) & {
+    original: (props: MultiValueItemItemProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: ((props: MultiValueItemItemProps) => React.JSX.Element) & {
+        original: (props: MultiValueItemItemProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: MultiValueItemItemProps) => React.JSX.Element) & {
+        original: (props: MultiValueItemItemProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+interface TemplateValue {
+    _templateId: string;
+    [key: string]: any;
+}
+export interface MultiValueContainerProps extends MultiValueDynamicZoneProps {
+    children: React.ReactNode;
+}
+export declare const MultiValueContainer: (({ children }: MultiValueContainerProps) => React.JSX.Element) & {
+    original: ({ children }: MultiValueContainerProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (({ children }: MultiValueContainerProps) => React.JSX.Element) & {
+        original: ({ children }: MultiValueContainerProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ children }: MultiValueContainerProps) => React.JSX.Element) & {
+        original: ({ children }: MultiValueContainerProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+interface MultiValueDynamicZoneProps {
+    field: CmsModelField;
+    bind: BindComponentRenderProp;
+    contentModel: CmsModel;
+    getBind: GetBind;
+}
+export declare const MultiValueDynamicZone: (props: MultiValueDynamicZoneProps) => React.JSX.Element;
+export {};

package/admin/plugins/fieldRenderers/dynamicZone/MultiValueDynamicZone.js

@@ -0,0 +1,147 @@
+import react from "react";
+import cloneDeep from "lodash/cloneDeep.js";
+import { ReactComponent } from "@webiny/icons/delete_outline.svg";
+import { ReactComponent as library_add_svg_ReactComponent } from "@webiny/icons/library_add.svg";
+import { ReactComponent as expand_less_svg_ReactComponent } from "@webiny/icons/expand_less.svg";
+import { ReactComponent as expand_more_svg_ReactComponent } from "@webiny/icons/expand_more.svg";
+import { AddTemplateButton } from "./AddTemplate.js";
+import { TemplateIcon } from "./TemplateIcon.js";
+import { useFieldEffectiveRules } from "@webiny/app-headless-cms-common";
+import { ParentFieldProvider, useModelField } from "../../../hooks/index.js";
+import { Fields } from "../../../components/ContentEntryForm/Fields.js";
+import { makeDecoratable } from "@webiny/react-composition";
+import { TemplateProvider } from "./TemplateProvider.js";
+import { CanEditField, ParentValueIndexProvider } from "../../../components/ModelFieldProvider/index.js";
+import { useConfirmationDialog } from "@webiny/app-admin";
+import { Accordion, Tooltip } from "@webiny/admin-ui";
+const MultiValueItemContainer = makeDecoratable("MultiValueItemContainer", ({ children, ...props })=>{
+    const actions = /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+        icon: /*#__PURE__*/ react.createElement(Tooltip, {
+            trigger: /*#__PURE__*/ react.createElement(expand_less_svg_ReactComponent, null),
+            content: "Move up"
+        }),
+        onClick: props.onMoveUp,
+        disabled: props.isFirst
+    }), /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+        icon: /*#__PURE__*/ react.createElement(Tooltip, {
+            trigger: /*#__PURE__*/ react.createElement(expand_more_svg_ReactComponent, null),
+            content: "Move down"
+        }),
+        onClick: props.onMoveDown,
+        disabled: props.isLast
+    }), /*#__PURE__*/ react.createElement(Accordion.Item.Action.Separator, null), props.actions ? /*#__PURE__*/ react.createElement(react.Fragment, null, props.actions) : null, /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+        icon: /*#__PURE__*/ react.createElement(Tooltip, {
+            trigger: /*#__PURE__*/ react.createElement(library_add_svg_ReactComponent, null),
+            content: "Duplicate"
+        }),
+        onClick: ()=>props.onClone(props.value)
+    }), /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+        icon: /*#__PURE__*/ react.createElement(Tooltip, {
+            trigger: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            content: "Delete"
+        }),
+        onClick: props.onDelete
+    }));
+    return /*#__PURE__*/ react.createElement(Accordion.Item, {
+        title: props.title,
+        description: props.description,
+        icon: props.icon,
+        actions: props.disabled ? null : actions
+    }, children);
+});
+const MultiValueItem = makeDecoratable("MultiValueItem", (props)=>{
+    const { template, Bind, contentModel } = props;
+    return /*#__PURE__*/ react.createElement(TemplateProvider, {
+        template: template
+    }, /*#__PURE__*/ react.createElement(Fields, {
+        fields: template.fields,
+        layout: template.layout || [],
+        contentModel: contentModel,
+        Bind: Bind
+    }));
+});
+const TemplateValueForm = ({ value, contentModel, Bind, isLast, isFirst, onMoveUp, onMoveDown, onDelete, onClone })=>{
+    const { field } = useModelField();
+    const rules = useFieldEffectiveRules(field);
+    const disabled = !rules.canEdit || rules.disabled;
+    const templates = field.settings?.templates || [];
+    const template = templates.find((tpl)=>tpl.id === value._templateId);
+    if (!template) return null;
+    return /*#__PURE__*/ react.createElement(MultiValueItemContainer, {
+        value: value,
+        contentModel: contentModel,
+        isFirst: isFirst,
+        isLast: isLast,
+        onClone: onClone,
+        onDelete: onDelete,
+        onMoveUp: onMoveUp,
+        onMoveDown: onMoveDown,
+        title: template.name,
+        description: template.description,
+        icon: /*#__PURE__*/ react.createElement(TemplateIcon, {
+            icon: template.icon
+        }),
+        template: template,
+        disabled: disabled
+    }, /*#__PURE__*/ react.createElement(MultiValueItem, {
+        template: template,
+        contentModel: contentModel,
+        Bind: Bind
+    }));
+};
+const MultiValueContainer = makeDecoratable("MultiValueContainer", ({ children })=>/*#__PURE__*/ react.createElement(Accordion, {
+        variant: "container",
+        className: "gap-md"
+    }, /*#__PURE__*/ react.createElement(react.Fragment, null, children)));
+const MultiValueDynamicZone = (props)=>{
+    const { showConfirmation } = useConfirmationDialog({
+        message: "Are you sure you want to delete this item? This action is not reversible.",
+        acceptLabel: "Yes, I'm sure!",
+        cancelLabel: "No, leave it."
+    });
+    const { bind, getBind, contentModel } = props;
+    const onTemplate = (template)=>{
+        bind.appendValue({
+            _templateId: template.id,
+            __typename: template.__typename
+        });
+    };
+    const cloneValue = (value, index)=>{
+        bind.appendValue(cloneDeep(value), index + 1);
+    };
+    const values = bind.value || [];
+    const hasValues = values.length > 0;
+    const Bind = getBind();
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-y-lg"
+    }, hasValues ? /*#__PURE__*/ react.createElement(ParentFieldProvider, {
+        value: bind.value,
+        path: Bind.parentName
+    }, /*#__PURE__*/ react.createElement(MultiValueContainer, props, values.map((value, index)=>{
+        const Bind = getBind(index);
+        const onDelete = ()=>{
+            showConfirmation(()=>{
+                bind.removeValue(index);
+            });
+        };
+        return /*#__PURE__*/ react.createElement(ParentValueIndexProvider, {
+            key: index,
+            index: index
+        }, /*#__PURE__*/ react.createElement(Bind, null, ()=>/*#__PURE__*/ react.createElement(Bind.ValidationContainer, null, /*#__PURE__*/ react.createElement(TemplateValueForm, {
+                value: value,
+                contentModel: contentModel,
+                Bind: Bind,
+                isFirst: 0 === index,
+                isLast: index === values.length - 1,
+                onMoveUp: ()=>bind.moveValueUp(index),
+                onMoveDown: ()=>bind.moveValueDown(index),
+                onDelete: onDelete,
+                onClone: (value)=>cloneValue(value, index)
+            }))));
+    }))) : null, /*#__PURE__*/ react.createElement(CanEditField, null, /*#__PURE__*/ react.createElement(AddTemplateButton, {
+        onTemplate: onTemplate
+    })));
+};
+export { MultiValueContainer, MultiValueDynamicZone, MultiValueItem, MultiValueItemContainer };
+
+//# sourceMappingURL=MultiValueDynamicZone.js.map

package/admin/plugins/fieldRenderers/dynamicZone/MultiValueDynamicZone.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"admin/plugins/fieldRenderers/dynamicZone/MultiValueDynamicZone.js","sources":["../../../../../src/admin/plugins/fieldRenderers/dynamicZone/MultiValueDynamicZone.tsx"],"sourcesContent":["import React from \"react\";\nimport cloneDeep from \"lodash/cloneDeep.js\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete_outline.svg\";\nimport { ReactComponent as CloneIcon } from \"@webiny/icons/library_add.svg\";\nimport { ReactComponent as ArrowUpIcon } from \"@webiny/icons/expand_less.svg\";\nimport { ReactComponent as ArrowDownIcon } from \"@webiny/icons/expand_more.svg\";\nimport { AddTemplateButton } from \"./AddTemplate.js\";\nimport { TemplateIcon } from \"./TemplateIcon.js\";\nimport { useFieldEffectiveRules } from \"@webiny/app-headless-cms-common\";\nimport { ParentFieldProvider, useModelField } from \"~/admin/hooks/index.js\";\nimport { Fields } from \"~/admin/components/ContentEntryForm/Fields.js\";\nimport type {\n    BindComponent,\n    BindComponentRenderProp,\n    CmsDynamicZoneTemplate,\n    CmsModelFieldRendererProps,\n    CmsModel,\n    CmsModelField,\n    CmsDynamicZoneTemplateWithTypename\n} from \"~/types.js\";\nimport { makeDecoratable } from \"@webiny/react-composition\";\nimport { TemplateProvider } from \"~/admin/plugins/fieldRenderers/dynamicZone/TemplateProvider.js\";\nimport {\n    CanEditField,\n    ParentValueIndexProvider\n} from \"~/admin/components/ModelFieldProvider/index.js\";\nimport { useConfirmationDialog } from \"@webiny/app-admin\";\nimport { Accordion, Tooltip } from \"@webiny/admin-ui\";\n\ntype GetBind = CmsModelFieldRendererProps[\"getBind\"];\n\nexport interface MultiValueItemContainerProps {\n    value: TemplateValue;\n    contentModel: CmsModel;\n    isFirst: boolean;\n    isLast: boolean;\n    disabled?: boolean;\n    onMoveUp: () => void;\n    onMoveDown: () => void;\n    onDelete: () => void;\n    onClone: (value: TemplateValue) => void;\n    title: React.ReactNode;\n    description: string;\n    icon: React.JSX.Element;\n    actions?: React.JSX.Element;\n    template: CmsDynamicZoneTemplate;\n    children: React.ReactNode;\n}\n\nexport const MultiValueItemContainer = makeDecoratable(\n    \"MultiValueItemContainer\",\n    ({ children, ...props }: MultiValueItemContainerProps) => {\n        const actions = (\n            <>\n                <Accordion.Item.Action\n                    icon={<Tooltip trigger={<ArrowUpIcon />} content={\"Move up\"} />}\n                    onClick={props.onMoveUp}\n                    disabled={props.isFirst}\n                />\n                <Accordion.Item.Action\n                    icon={<Tooltip trigger={<ArrowDownIcon />} content={\"Move down\"} />}\n                    onClick={props.onMoveDown}\n                    disabled={props.isLast}\n                />\n                <Accordion.Item.Action.Separator />\n                {props.actions ? <>{props.actions}</> : null}\n                <Accordion.Item.Action\n                    icon={<Tooltip trigger={<CloneIcon />} content={\"Duplicate\"} />}\n                    onClick={() => props.onClone(props.value)}\n                />\n                <Accordion.Item.Action\n                    icon={<Tooltip trigger={<DeleteIcon />} content={\"Delete\"} />}\n                    onClick={props.onDelete}\n                />\n            </>\n        );\n\n        return (\n            <Accordion.Item\n                title={props.title}\n                description={props.description}\n                icon={props.icon}\n                actions={props.disabled ? null : actions}\n            >\n                {children}\n            </Accordion.Item>\n        );\n    }\n);\n\nexport interface MultiValueItemItemProps {\n    template: CmsDynamicZoneTemplate;\n    contentModel: CmsModel;\n    Bind: BindComponent;\n}\n\nexport const MultiValueItem = makeDecoratable(\n    \"MultiValueItem\",\n    (props: MultiValueItemItemProps) => {\n        const { template, Bind, contentModel } = props;\n\n        return (\n            <TemplateProvider template={template}>\n                <Fields\n                    fields={template.fields}\n                    layout={template.layout || []}\n                    contentModel={contentModel}\n                    Bind={Bind}\n                />\n            </TemplateProvider>\n        );\n    }\n);\n\ninterface TemplateValue {\n    _templateId: string;\n    [key: string]: any;\n}\n\ninterface TemplateValueFormProps {\n    value: TemplateValue;\n    contentModel: CmsModel;\n    Bind: BindComponent;\n    isFirst: boolean;\n    isLast: boolean;\n    onMoveUp: () => void;\n    onMoveDown: () => void;\n    onDelete: () => void;\n    onClone: (value: TemplateValue) => void;\n}\n\nconst TemplateValueForm = ({\n    value,\n    contentModel,\n    Bind,\n    isLast,\n    isFirst,\n    onMoveUp,\n    onMoveDown,\n    onDelete,\n    onClone\n}: TemplateValueFormProps) => {\n    const { field } = useModelField();\n    const rules = useFieldEffectiveRules(field);\n    const disabled = !rules.canEdit || rules.disabled;\n    const templates = field.settings?.templates || [];\n\n    const template: CmsDynamicZoneTemplate | undefined = templates.find(\n        tpl => tpl.id === value._templateId\n    );\n\n    if (!template) {\n        return null;\n    }\n\n    return (\n        <MultiValueItemContainer\n            value={value}\n            contentModel={contentModel}\n            isFirst={isFirst}\n            isLast={isLast}\n            onClone={onClone}\n            onDelete={onDelete}\n            onMoveUp={onMoveUp}\n            onMoveDown={onMoveDown}\n            title={template.name}\n            description={template.description}\n            icon={<TemplateIcon icon={template.icon} />}\n            template={template}\n            disabled={disabled}\n        >\n            <MultiValueItem template={template} contentModel={contentModel} Bind={Bind} />\n        </MultiValueItemContainer>\n    );\n};\n\nexport interface MultiValueContainerProps extends MultiValueDynamicZoneProps {\n    children: React.ReactNode;\n}\n\nexport const MultiValueContainer = makeDecoratable(\n    \"MultiValueContainer\",\n    ({ children }: MultiValueContainerProps) => {\n        return (\n            <Accordion variant={\"container\"} className={\"gap-md\"}>\n                <>{children}</>\n            </Accordion>\n        );\n    }\n);\n\ninterface MultiValueDynamicZoneProps {\n    // TODO: this prop might be useless, because we now have a `useModelField` hook.\n    field: CmsModelField;\n    bind: BindComponentRenderProp;\n    contentModel: CmsModel;\n    getBind: GetBind;\n}\n\nexport const MultiValueDynamicZone = (props: MultiValueDynamicZoneProps) => {\n    const { showConfirmation } = useConfirmationDialog({\n        message: `Are you sure you want to delete this item? This action is not reversible.`,\n        acceptLabel: `Yes, I'm sure!`,\n        cancelLabel: `No, leave it.`\n    });\n\n    const { bind, getBind, contentModel } = props;\n    const onTemplate = (template: CmsDynamicZoneTemplateWithTypename) => {\n        bind.appendValue({ _templateId: template.id, __typename: template.__typename });\n    };\n\n    const cloneValue = (value: TemplateValue, index: number) => {\n        bind.appendValue(cloneDeep(value), index + 1);\n    };\n\n    const values: TemplateValue[] = bind.value || [];\n    const hasValues = values.length > 0;\n\n    const Bind = getBind();\n\n    return (\n        <div className={\"flex flex-col gap-y-lg\"}>\n            {hasValues ? (\n                <ParentFieldProvider value={bind.value} path={Bind.parentName}>\n                    <MultiValueContainer {...props}>\n                        {values.map((value, index) => {\n                            const Bind = getBind(index);\n\n                            const onDelete = () => {\n                                showConfirmation(() => {\n                                    bind.removeValue(index);\n                                });\n                            };\n\n                            return (\n                                <ParentValueIndexProvider key={index} index={index}>\n                                    <Bind>\n                                        {() => (\n                                            <Bind.ValidationContainer>\n                                                <TemplateValueForm\n                                                    value={value}\n                                                    contentModel={contentModel}\n                                                    Bind={Bind}\n                                                    isFirst={index === 0}\n                                                    isLast={index === values.length - 1}\n                                                    onMoveUp={() => bind.moveValueUp(index)}\n                                                    onMoveDown={() => bind.moveValueDown(index)}\n                                                    onDelete={onDelete}\n                                                    onClone={value => cloneValue(value, index)}\n                                                />\n                                            </Bind.ValidationContainer>\n                                        )}\n                                    </Bind>\n                                </ParentValueIndexProvider>\n                            );\n                        })}\n                    </MultiValueContainer>\n                </ParentFieldProvider>\n            ) : null}\n            <CanEditField>\n                <AddTemplateButton onTemplate={onTemplate} />\n            </CanEditField>\n        </div>\n    );\n};\n"],"names":["MultiValueItemContainer","makeDecoratable","children","props","actions","Accordion","Tooltip","ArrowUpIcon","ArrowDownIcon","CloneIcon","DeleteIcon","MultiValueItem","template","Bind","contentModel","TemplateProvider","Fields","TemplateValueForm","value","isLast","isFirst","onMoveUp","onMoveDown","onDelete","onClone","field","useModelField","rules","useFieldEffectiveRules","disabled","templates","tpl","TemplateIcon","MultiValueContainer","MultiValueDynamicZone","showConfirmation","useConfirmationDialog","bind","getBind","onTemplate","cloneValue","index","cloneDeep","values","hasValues","ParentFieldProvider","ParentValueIndexProvider","CanEditField","AddTemplateButton"],"mappings":"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"}