@bigbinary/neeto-themes-frontend 3.1.27 → 3.1.29

package/dist/NeetoThemesBuilder.js

@@ -37,11 +37,12 @@ import LeftAlign from '@bigbinary/neeto-icons/LeftAlign';
 import ColorPicker from '@bigbinary/neetoui/ColorPicker';
 import Select from '@bigbinary/neetoui/Select';
 import { Slider } from 'antd';
+import Input from '@bigbinary/neetoui/Input';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
 import ImageUploader from '@bigbinary/neeto-image-uploader-frontend/ImageUploader';
 import Toastr from '@bigbinary/neetoui/Toastr';
-import Input from '@bigbinary/neetoui/formik/Input';
+import Input$1 from '@bigbinary/neetoui/formik/Input';
 import Search from '@bigbinary/neeto-molecules/Search';
 import Rating from '@bigbinary/neeto-icons/Rating';
 import MoreDropdown from '@bigbinary/neeto-molecules/MoreDropdown';
@@ -491,6 +492,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,
@@ -867,9 +877,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__*/jsxs("div", {
+    className: "flex items-center justify-between",
+    "data-cy": "theme-style-".concat(joinHyphenCase(label)),
+    children: [/*#__PURE__*/jsx(Typography, {
+      "data-cy": "style-fields-labels",
+      style: "body2",
+      children: label
+    }), /*#__PURE__*/jsx("div", {
+      className: "w-40",
+      children: /*#__PURE__*/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 = useConfigStore(function (store) {
       return {
         themePropertiesSchema: store["themePropertiesSchema"]
@@ -928,6 +967,7 @@ var Properties = function Properties(_ref) {
     }
   };
   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({
@@ -951,6 +991,20 @@ var Properties = function Properties(_ref) {
       var isCurrentPropertyVisible = isPropertyVisible(key, values, themePropertiesSchema);
       if (!isCurrentPropertyVisible) return null;
       switch (kind) {
+        case "text_input":
+          {
+            var index = findIndexBy({
+              key: key
+            }, values.properties);
+            return /*#__PURE__*/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__*/jsx(FontPickerBlock, {
             label: buildLabel(key, kind),
@@ -996,7 +1050,7 @@ var Properties = function Properties(_ref) {
         case "position_selector":
           {
             var _findBy4;
-            var index = findIndexBy({
+            var _index = findIndexBy({
               key: key
             }, values.properties);
             var options = (_findBy4 = findBy({
@@ -1008,13 +1062,13 @@ var Properties = function Properties(_ref) {
               placeholder: "left",
               value: 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 = findIndexBy({
+            var _index2 = findIndexBy({
               key: key
             }, values.properties);
             return /*#__PURE__*/jsx(SwitchBlock, {
@@ -1022,18 +1076,18 @@ var Properties = function Properties(_ref) {
               label: buildLabel(key, kind),
               name: 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 = findIndexBy({
+            var _index3 = findIndexBy({
               key: key
             }, values.properties);
             return /*#__PURE__*/jsx(AlignmentBlock, {
               label: buildLabel(key, kind),
-              name: "properties[".concat(_index2, "].value")
+              name: "properties[".concat(_index3, "].value")
             });
           }
         default:
@@ -1213,7 +1267,7 @@ var ThemeMeta = function ThemeMeta(_ref) {
     helpPopoverProps: nameHelpPopoverProps,
     name: "name",
     title: t("neetoThemes.common.name"),
-    children: /*#__PURE__*/jsx(Input, {
+    children: /*#__PURE__*/jsx(Input$1, {
       autoFocus: true,
       "data-cy": "theme-name-property",
       name: "name"
@@ -1368,7 +1422,8 @@ var Customize = function Customize(_ref) {
             name: "style",
             title: t("neetoThemes.common.style"),
             children: /*#__PURE__*/jsx(Properties, {
-              onPropertiesChange: onPropertiesChange
+              onPropertiesChange: onPropertiesChange,
+              themeId: themeId
             })
           }), filterBy({
             kind: "image"