@athoscommerce/snap-preact 1.9.1 → 1.10.1-beta.150

package/dist/cjs/components/src/components/Molecules/TemplatesEditor/Components/Control.js

@@ -1,39 +1,37 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Control = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var mobx_react_lite_1 = require("mobx-react-lite");
-var hooks_1 = require("preact/hooks");
-var Assets_1 = require("../Assets");
-exports.Control = (0, mobx_react_lite_1.observer)(function (props) {
-    var type = props.type, label = props.label, description = props.description, onReset = props.onReset, display = props.display, showReset = props.showReset, value = props.value, options = props.options, onChange = props.onChange;
-    var _a = (0, hooks_1.useState)(value), inputValue = _a[0], setInputValue = _a[1];
-    (0, hooks_1.useEffect)(function () {
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const mobx_react_lite_1 = require("mobx-react-lite");
+const hooks_1 = require("preact/hooks");
+const Assets_1 = require("../Assets");
+exports.Control = (0, mobx_react_lite_1.observer)((props) => {
+    const { type, label, description, onReset, display, showReset, value, options, onChange } = props;
+    const [inputValue, setInputValue] = (0, hooks_1.useState)(value);
+    (0, hooks_1.useEffect)(() => {
         setInputValue(value);
     }, [value]);
-    return display === 'hidden' ? null : ((0, jsx_runtime_1.jsx)("div", { className: "control ".concat(type, " ").concat(display), children: (0, jsx_runtime_1.jsxs)("div", { className: "option checkbox", children: [(0, jsx_runtime_1.jsx)("label", { children: label }), (0, jsx_runtime_1.jsx)("div", { className: "reset", children: showReset ? ((0, jsx_runtime_1.jsx)("button", { title: "Reset", onClick: function () {
+    return display === 'hidden' ? null : ((0, jsx_runtime_1.jsx)("div", { className: `control ${type} ${display}`, children: (0, jsx_runtime_1.jsxs)("div", { className: "option checkbox", children: [(0, jsx_runtime_1.jsx)("label", { children: label }), (0, jsx_runtime_1.jsx)("div", { className: "reset", children: showReset ? ((0, jsx_runtime_1.jsx)("button", { title: "Reset", onClick: () => {
                             onReset();
-                        }, children: (0, jsx_runtime_1.jsx)(Assets_1.Reset, {}) })) : null }), (0, jsx_runtime_1.jsx)("div", { className: "value", title: description, children: (function () {
+                        }, children: (0, jsx_runtime_1.jsx)(Assets_1.Reset, {}) })) : null }), (0, jsx_runtime_1.jsx)("div", { className: "value", title: description, children: (() => {
                         switch (type) {
                             case 'text': {
-                                return (0, jsx_runtime_1.jsx)("input", { type: "text", value: value, onChange: function (e) { return onChange(e.target.value); }, disabled: display === 'disabled' });
+                                return (0, jsx_runtime_1.jsx)("input", { type: "text", value: value, onChange: (e) => onChange(e.target.value), disabled: display === 'disabled' });
                             }
                             case 'number': {
-                                return ((0, jsx_runtime_1.jsx)("input", { type: "number", value: value, onChange: function (e) { return onChange(Number(e.target.value)); }, disabled: display === 'disabled' }));
+                                return ((0, jsx_runtime_1.jsx)("input", { type: "number", value: value, onChange: (e) => onChange(Number(e.target.value)), disabled: display === 'disabled' }));
                             }
                             case 'checkbox': {
-                                return ((0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: value, onChange: function (e) { return onChange(e.target.checked); }, disabled: display === 'disabled' }));
+                                return ((0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: value, onChange: (e) => onChange(e.target.checked), disabled: display === 'disabled' }));
                             }
                             case 'dropdown': {
-                                return ((0, jsx_runtime_1.jsx)("select", { onChange: function (e) { return onChange(e.target.value); }, disabled: display === 'disabled', value: value, children: options === null || options === void 0 ? void 0 : options.map(function (group, groupIndex) {
-                                        return group.group ? ((0, jsx_runtime_1.jsx)("optgroup", { label: group.group, children: group.options.map(function (option, optionIndex) { return ((0, jsx_runtime_1.jsx)("option", { value: option.value, children: option.label || option.value }, "".concat(groupIndex, "-").concat(optionIndex))); }) }, groupIndex)) : (group.options.map(function (option, optionIndex) { return ((0, jsx_runtime_1.jsx)("option", { value: option.value, children: option.label || option.value }, "".concat(groupIndex, "-").concat(optionIndex))); }));
-                                    }) }));
+                                return ((0, jsx_runtime_1.jsx)("select", { onChange: (e) => onChange(e.target.value), disabled: display === 'disabled', value: value, children: options?.map((group, groupIndex) => group.group ? ((0, jsx_runtime_1.jsx)("optgroup", { label: group.group, children: group.options.map((option, optionIndex) => ((0, jsx_runtime_1.jsx)("option", { value: option.value, children: option.label || option.value }, `${groupIndex}-${optionIndex}`))) }, groupIndex)) : (group.options.map((option, optionIndex) => ((0, jsx_runtime_1.jsx)("option", { value: option.value, children: option.label || option.value }, `${groupIndex}-${optionIndex}`))))) }));
                             }
                             case 'color': {
-                                return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "color", value: value, onChange: function (e) {
+                                return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "color", value: value, onChange: (e) => {
                                                 setInputValue(e.target.value);
                                                 onChange(e.target.value);
-                                            }, disabled: display === 'disabled' }), (0, jsx_runtime_1.jsx)("input", { type: "text", className: isValidHexColor(inputValue) ? '' : 'invalid', value: inputValue, onChange: function (e) {
+                                            }, disabled: display === 'disabled' }), (0, jsx_runtime_1.jsx)("input", { type: "text", className: isValidHexColor(inputValue) ? '' : 'invalid', value: inputValue, onChange: (e) => {
                                                 setInputValue(e.target.value);
                                                 isValidHexColor(e.target.value) && onChange(e.target.value);
                                             }, disabled: display === 'disabled' })] }));
@@ -45,7 +43,7 @@ exports.Control = (0, mobx_react_lite_1.observer)(function (props) {
                     })() })] }) }));
 });
 // function to validate hex color values of the type: #333333
-var isValidHexColor = function (color) {
+const isValidHexColor = (color) => {
     if (!/^#[0-9A-F]{6}$/i.test(color)) {
         return false;
     }

package/dist/cjs/components/src/components/Molecules/TemplatesEditor/Controls/Dropdown.js

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DropdownControl = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var Assets_1 = require("../Assets");
-var DropdownControl = function (props) {
-    var label = props.label, description = props.description, onReset = props.onReset, disabled = props.disabled, showReset = props.showReset, value = props.value, options = props.options, onChange = props.onChange;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "option dropdown", children: [(0, jsx_runtime_1.jsx)("label", { children: label }), (0, jsx_runtime_1.jsx)("div", { className: "reset", children: showReset ? ((0, jsx_runtime_1.jsx)("button", { title: "Reset", onClick: function () {
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const Assets_1 = require("../Assets");
+const DropdownControl = (props) => {
+    const { label, description, onReset, disabled, showReset, value, options, onChange } = props;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "option dropdown", children: [(0, jsx_runtime_1.jsx)("label", { children: label }), (0, jsx_runtime_1.jsx)("div", { className: "reset", children: showReset ? ((0, jsx_runtime_1.jsx)("button", { title: "Reset", onClick: () => {
                         onReset();
-                    }, children: (0, jsx_runtime_1.jsx)(Assets_1.Reset, {}) })) : null }), (0, jsx_runtime_1.jsxs)("div", { className: "value", children: [(0, jsx_runtime_1.jsx)("select", { onChange: function (e) { return onChange(e.target.value); }, disabled: disabled, value: value, children: options.map(function (option, index) { return ((0, jsx_runtime_1.jsx)("option", { value: option, children: option }, index)); }) }), (0, jsx_runtime_1.jsx)("span", { children: description })] })] }));
+                    }, children: (0, jsx_runtime_1.jsx)(Assets_1.Reset, {}) })) : null }), (0, jsx_runtime_1.jsxs)("div", { className: "value", children: [(0, jsx_runtime_1.jsx)("select", { onChange: (e) => onChange(e.target.value), disabled: disabled, value: value, children: options.map((option, index) => ((0, jsx_runtime_1.jsx)("option", { value: option, children: option }, index))) }), (0, jsx_runtime_1.jsx)("span", { children: description })] })] }));
 };
 exports.DropdownControl = DropdownControl;