@esvndev/es-react-config-setting 1.0.53 → 1.0.55

package/dist/index.js

@@ -18848,14 +18848,19 @@ const SettingApp = (props) => {
     const handleFormClosed = () => {
     };
     //Sự kiện giá trị thay đổi
-    const _eventChange = (obj, data) => {
-        if (data.target) {
+    const _eventChange = (obj, e) => {
+        const value = e.target.type === "checkbox" ? e.target.checked : e.target.value;
+        setFormState(prev => ({
+            ...prev,
+            [obj.id]: value
+        }));
+        if (e.target) {
             var _value = "";
             if (obj.type === 'checkbox') {
-                _value = data.target.checked ? 'true' : 'false';
+                _value = e.target.checked ? 'true' : 'false';
             }
             else {
-                _value = data.target.value;
+                _value = e.target.value;
             }
             UpdateSettingConfig({
                 Items: [{
@@ -18876,6 +18881,7 @@ const SettingApp = (props) => {
     //#endregion
     const [settingData, setSettingData] = React.useState({});
     const [dataSettingGroup, setDataSettingGroup] = React.useState([]);
+    const [formState, setFormState] = React.useState({});
     //Load data of group config and setting by group
     React.useEffect(() => {
         if (isOpen) {
@@ -18903,6 +18909,16 @@ const SettingApp = (props) => {
             }
         });
     };
+    //Cài đặt lại giá trị cho cấu hình
+    React.useEffect(() => {
+        const initialState = {};
+        if (settingData && settingData.data) {
+            settingData.data.forEach((item) => {
+                initialState[item.id] = item.value;
+            });
+        }
+        setFormState(initialState);
+    }, [settingData]);
     //Sự kiện chọn nhóm cài đặt
     const switchSettingTab = (data) => {
         const updated = dataSettingGroup.map((item) => ({
@@ -18915,34 +18931,29 @@ const SettingApp = (props) => {
     //Hàm sử dụng tạo theo loại giá trị
     const _renderInput = (root, data) => {
         console.log(data);
+        const value = formState[data.id] ?? data.value ?? "";
         switch (data.type) {
             case "switch":
             case "checkbox":
-                return (jsxRuntime.jsx("div", { className: "checkbox", title: data.description, children: jsxRuntime.jsx(Input$1, { type: "checkbox", className: "", onChange: (e) => _eventChange(data, e), value: data.value }) }, data.id));
+                return (jsxRuntime.jsx("div", { className: "checkbox", title: data.description, children: jsxRuntime.jsx(Input$1, { type: "checkbox", checked: !!value, onChange: (e) => _eventChange(data, e) }) }, data.id));
             case "radio":
-                return (jsxRuntime.jsx("div", { className: "radio-group", title: data.description, children: data.option?.map((opt, index) => (jsxRuntime.jsxs("label", { children: [jsxRuntime.jsx(Input$1, { type: "radio", name: data.name, value: opt.value, onChange: (e) => _eventChange(data, e) }), opt.name] }, index))) }, data.id));
+                return (jsxRuntime.jsx("div", { className: "radio-group", title: data.description, children: data.option?.map((opt, index) => (jsxRuntime.jsxs("label", { children: [jsxRuntime.jsx(Input$1, { type: "radio", name: data.name, value: opt.value, checked: value === opt.value, onChange: (e) => _eventChange(data, e) }), opt.name] }, index))) }, data.id));
             case "combobox":
-                return (jsxRuntime.jsx("div", { className: "combobox", title: data.description, children: jsxRuntime.jsxs(Input$1, { type: "select", className: "input-custom", name: data.name, value: data.value, id: data.name, onChange: (e) => _eventChange(data, e), children: [jsxRuntime.jsx("option", { value: "", children: "Ch\u1ECDn m\u1ED9t gi\u00E1 tr\u1ECB" }), data.option?.map((opt, index) => (jsxRuntime.jsx("option", { value: opt.value, children: opt.name }, index)))] }) }, data.id));
+                return (jsxRuntime.jsx("div", { className: "combobox", title: data.description, children: jsxRuntime.jsxs(Input$1, { type: "select", className: "input-custom", name: data.name, value: value, onChange: (e) => _eventChange(data, e), children: [jsxRuntime.jsx("option", { value: "", children: "Ch\u1ECDn m\u1ED9t gi\u00E1 tr\u1ECB" }), data.option?.map((opt, index) => (jsxRuntime.jsx("option", { value: opt.value, children: opt.name }, index)))] }) }, data.id));
             case "slider":
             case "text":
-                return (jsxRuntime.jsx("div", { className: "text-input", title: data.description, children: jsxRuntime.jsx(Input$1, { type: "text", className: "input-custom", value: data.value, placeholder: data.name, onChange: (e) => _eventChange(data, e) }) }, data.id));
             case "password":
-                return (jsxRuntime.jsx("div", { className: "text-input", title: data.description, children: jsxRuntime.jsx(Input$1, { type: "password", className: "input-custom", value: data.value, placeholder: data.name, onChange: (e) => _eventChange(data, e) }) }, data.id));
             case "number":
-                return (jsxRuntime.jsx("div", { className: "number-input", title: data.description, children: jsxRuntime.jsx(Input$1, { type: "number", className: "t-right input-custom", value: data.value, placeholder: data.name, onChange: (e) => _eventChange(data, e) }) }, data.id));
             case "date":
-                return (jsxRuntime.jsx("div", { className: "date-input", title: data.description, children: jsxRuntime.jsx(Input$1, { type: "date", className: "t-right input-custom", value: data.value, onChange: (e) => _eventChange(data, e) }) }, data.id));
             case "time":
-                return (jsxRuntime.jsx("div", { className: "date-input", title: data.description, children: jsxRuntime.jsx(Input$1, { type: "time", className: "t-right input-custom", value: data.value, onChange: (e) => _eventChange(data, e) }) }, data.id));
             case "datetime":
-                return (jsxRuntime.jsx("div", { className: "date-input", title: data.description, children: jsxRuntime.jsx(Input$1, { type: "datetime", className: "t-right input-custom", value: data.value, onChange: (e) => _eventChange(data, e) }) }, data.id));
+            case "color":
+                return (jsxRuntime.jsx("div", { className: `${data.type}-input`, title: data.description, children: jsxRuntime.jsx(Input$1, { type: data.type, className: "input-custom", value: value, placeholder: data.name, onChange: (e) => _eventChange(data, e) }) }, data.id));
             case "image":
             case "file":
-                return (jsxRuntime.jsx("div", { className: "file-input", title: data.description, children: jsxRuntime.jsx(Input$1, { type: "file", className: "input-custom", value: data.value, onChange: (e) => _eventChange(data, e) }) }, data.id));
-            case "color":
-                return (jsxRuntime.jsx("div", { className: "color-picker t-right", title: data.description, children: jsxRuntime.jsx(Input$1, { type: "color", className: "form-color input-custom", value: data.value, onChange: (e) => _eventChange(data, e) }) }, data.id));
+                return (jsxRuntime.jsx("div", { className: "file-input", title: data.description, children: jsxRuntime.jsx(Input$1, { type: "file", className: "input-custom", onChange: (e) => _eventChange(data, e) }) }, data.id));
             default:
-                return (jsxRuntime.jsx("div", { className: (data.type ?? 'normal') + '-input', title: data.description, children: jsxRuntime.jsx(Input$1, { type: data.type ?? '', value: data.value, onChange: (e) => _eventChange(data, e) }) }, data.id));
+                return (jsxRuntime.jsx("div", { className: `${data.type ?? 'normal'}-input`, title: data.description, children: jsxRuntime.jsx(Input$1, { type: data.type ?? "text", value: value, onChange: (e) => _eventChange(data, e) }) }, data.id));
         }
     };
     //hàm tạo các thông số cấu hình và cài đặt