@bigbinary/neeto-themes-frontend 3.1.27 → 3.1.29

package/dist/cjs/NeetoThemesBuilder.js

@@ -39,11 +39,12 @@ var LeftAlign = require('@bigbinary/neeto-icons/LeftAlign');
 var ColorPicker = require('@bigbinary/neetoui/ColorPicker');
 var Select = require('@bigbinary/neetoui/Select');
 var antd = require('antd');
+var Input = require('@bigbinary/neetoui/Input');
 var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
 var _regeneratorRuntime = require('@babel/runtime/regenerator');
 var ImageUploader = require('@bigbinary/neeto-image-uploader-frontend/ImageUploader');
 var Toastr = require('@bigbinary/neetoui/Toastr');
-var Input = require('@bigbinary/neetoui/formik/Input');
+var Input$1 = require('@bigbinary/neetoui/formik/Input');
 var Search = require('@bigbinary/neeto-molecules/Search');
 var Rating = require('@bigbinary/neeto-icons/Rating');
 var MoreDropdown = require('@bigbinary/neeto-molecules/MoreDropdown');
@@ -493,6 +494,15 @@ var buildInitialValues = function buildInitialValues(theme, themePropertiesSchem
         order = _ref$order === void 0 ? null : _ref$order,
         dependsOn = _ref.dependsOn;
       switch (kind) {
+        case "text_input":
+          return _objectSpread$3({
+            value: defaultValue || "",
+            kind: "text_input",
+            key: key,
+            dependsOn: dependsOn
+          }, order !== null && {
+            order: order
+          });
         case "color":
           return _objectSpread$3({
             value: defaultValue,
@@ -869,9 +879,38 @@ var SwitchBlock = function SwitchBlock(_ref) {
   });
 };
 
+var TextBlock = function TextBlock(_ref) {
+  var label = _ref.label,
+    name = _ref.name,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? "text" : _ref$type,
+    value = _ref.value,
+    onChange = _ref.onChange,
+    placeholder = _ref.placeholder;
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "flex items-center justify-between",
+    "data-cy": "theme-style-".concat(utils$1.joinHyphenCase(label)),
+    children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
+      "data-cy": "style-fields-labels",
+      style: "body2",
+      children: label
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "w-40",
+      children: /*#__PURE__*/jsxRuntime.jsx(Input, {
+        name: name,
+        onChange: onChange,
+        placeholder: placeholder,
+        type: type,
+        value: value
+      })
+    })]
+  });
+};
+
 var Properties = function Properties(_ref) {
   var onPropertiesChange = _ref.onPropertiesChange,
-    condition = _ref.condition;
+    condition = _ref.condition,
+    themeId = _ref.themeId;
   var _useConfigStore = useThemeUtils.useConfigStore(function (store) {
       return {
         themePropertiesSchema: store["themePropertiesSchema"]
@@ -930,6 +969,7 @@ var Properties = function Properties(_ref) {
     }
   };
   react.useEffect(function () {
+    if (!((values === null || values === void 0 ? void 0 : values.id) === themeId)) return;
     onPropertiesChange === null || onPropertiesChange === void 0 || onPropertiesChange(values, handleChange, handleColorChange);
     setTheme(values);
     setThemeState({
@@ -953,6 +993,20 @@ var Properties = function Properties(_ref) {
       var isCurrentPropertyVisible = isPropertyVisible(key, values, themePropertiesSchema);
       if (!isCurrentPropertyVisible) return null;
       switch (kind) {
+        case "text_input":
+          {
+            var index = neetoCist.findIndexBy({
+              key: key
+            }, values.properties);
+            return /*#__PURE__*/jsxRuntime.jsx(TextBlock, {
+              label: buildLabel(key, kind),
+              name: "properties[".concat(index, "].value"),
+              value: value || "",
+              onChange: function onChange(e) {
+                return setFieldValue("properties[".concat(index, "].value"), e.target.value);
+              }
+            }, key);
+          }
         case "font_family":
           return /*#__PURE__*/jsxRuntime.jsx(FontPickerBlock, {
             label: buildLabel(key, kind),
@@ -998,7 +1052,7 @@ var Properties = function Properties(_ref) {
         case "position_selector":
           {
             var _findBy4;
-            var index = neetoCist.findIndexBy({
+            var _index = neetoCist.findIndexBy({
               key: key
             }, values.properties);
             var options = (_findBy4 = neetoCist.findBy({
@@ -1010,13 +1064,13 @@ var Properties = function Properties(_ref) {
               placeholder: "left",
               value: neetoCist.toLabelAndValue(value),
               onChange: function onChange(option) {
-                return setFieldValue("properties[".concat(index, "].value"), option.value);
+                return setFieldValue("properties[".concat(_index, "].value"), option.value);
               }
             }, key);
           }
         case "boolean":
           {
-            var _index = neetoCist.findIndexBy({
+            var _index2 = neetoCist.findIndexBy({
               key: key
             }, values.properties);
             return /*#__PURE__*/jsxRuntime.jsx(SwitchBlock, {
@@ -1024,18 +1078,18 @@ var Properties = function Properties(_ref) {
               label: buildLabel(key, kind),
               name: neetoCist.snakeToCamelCase(key),
               onChange: function onChange(e) {
-                return setFieldValue("properties[".concat(_index, "].value"), String(e.target.checked));
+                return setFieldValue("properties[".concat(_index2, "].value"), String(e.target.checked));
               }
             }, key);
           }
         case "alignment_block":
           {
-            var _index2 = neetoCist.findIndexBy({
+            var _index3 = neetoCist.findIndexBy({
               key: key
             }, values.properties);
             return /*#__PURE__*/jsxRuntime.jsx(AlignmentBlock, {
               label: buildLabel(key, kind),
-              name: "properties[".concat(_index2, "].value")
+              name: "properties[".concat(_index3, "].value")
             });
           }
         default:
@@ -1215,7 +1269,7 @@ var ThemeMeta = function ThemeMeta(_ref) {
     helpPopoverProps: nameHelpPopoverProps,
     name: "name",
     title: t("neetoThemes.common.name"),
-    children: /*#__PURE__*/jsxRuntime.jsx(Input, {
+    children: /*#__PURE__*/jsxRuntime.jsx(Input$1, {
       autoFocus: true,
       "data-cy": "theme-name-property",
       name: "name"
@@ -1370,7 +1424,8 @@ var Customize = function Customize(_ref) {
             name: "style",
             title: t("neetoThemes.common.style"),
             children: /*#__PURE__*/jsxRuntime.jsx(Properties, {
-              onPropertiesChange: onPropertiesChange
+              onPropertiesChange: onPropertiesChange,
+              themeId: themeId
             })
           }), neetoCist.filterBy({
             kind: "image"