@esvndev/es-react-config-setting 1.0.18 → 1.0.19

package/dist/index.mjs

@@ -11429,14 +11429,25 @@ const SettingApp = (props) => {
         return l;
     };
     const DynamicIcon = ({ name, className }) => {
-        const LucideIcon = Icon[name]; // Lấy component icon từ object
+        const LucideIcon = Icon[name];
         return LucideIcon ? jsx(LucideIcon, { className: className }) : null;
     };
-    const [dataSetting, setDataSetting] = useState([{
+    //#endregion
+    const [settingData, setSettingData] = useState([]);
+    const [dataSettingGroup, setDataSettingGroup] = useState([{
             id: 1,
             name: t('Cài đặt chung'),
             active: true,
-            icon: 'Settings'
+            icon: 'Settings',
+            data: [{
+                    name: "Danh bạ",
+                    description: "Danh sách danh sách danh sách danh sách",
+                    data: [{
+                            name: "Hiển thị trạng thái truy cập",
+                            desciption: "Ai được phép truy cập",
+                            type: "checkbox"
+                        }]
+                }]
         }, {
             id: 2,
             name: t('Quyền riêng tư'),
@@ -11462,19 +11473,31 @@ const SettingApp = (props) => {
             name: t('Tiện ích'),
             icon: "BookOpen"
         }]);
-    //Sự kiện chọn loại cài đặt
+    //Sự kiện chọn nhóm cài đặt
     const switchSettingTab = (data) => {
-        const updated = dataSetting.map((item) => ({
+        const updated = dataSettingGroup.map((item) => ({
             ...item,
             active: item.id === data.id
         }));
-        setDataSetting(updated);
+        setDataSettingGroup(updated);
+    };
+    //hàm tạo các thông số cấu hình và cài đặt
+    const _renderView = () => {
+        return (settingData && settingData.data && settingData.data.length > 0 ? settingData.data.map((item, index) => {
+            jsxs("div", { className: "setting-section", children: [jsx("div", { className: "setting-section-label", children: jsx("div", { className: "badge", children: jsx("span", { children: item.name }) }) }), item.desrciption ?
+                        jsx("div", { className: "setting-section-desc", children: jsx("div", { className: "", children: jsx("span", { children: item.desrciption }) }) })
+                        : null, item.data && item.data.length > 0 ? item.data.map((_item, _index) => {
+                        return (jsx("div", { className: "setting-section-content ", children: jsxs("div", { className: 'flx flx-al-c flx-sp-btw setting-section-content__item' + (_index === 0 ? 'first' : (_index === _item.data.length - 1 ? 'last' : '')), children: [jsxs("div", { className: "flx flx-col", style: { flex: "0 0 fit-content" }, children: [jsx("span", { children: _item.name }), jsx("span", { className: "setting-section-content__description", children: _item.description })] }), jsx("div", { style: { maxWidth: "50%" }, children: jsx("div", { style: { width: "100%", boxSizing: "border-box" }, children: jsxs("div", { className: "flx flx-al-c z-dropdown-preview --square --l", style: { width: "100%", boxSizing: "border-box" }, children: [jsx("div", { className: "truncate flx-1" }), jsx("i", { className: "fa fa-Chevron_Down_24_Line margin-left-24" })] }) }) })] }) }));
+                    })
+                        : null] });
+        })
+            : null);
     };
     return (jsx(Fragment, { children: isOpen ?
-            jsx(Modal$1, { isOpen: true, toggle: handleModal, className: 'modal-dialog-centered modal-lg setting-modal', contentClassName: 'p-0', onOpened: handleFormOpened, onClosed: handleFormClosed, backdrop: backdrop, children: jsx(Form$1, { id: 'form-modal-globalzone', className: 'todo-modal', onSubmit: handleSubmit, children: jsxs("div", { className: "", children: [jsx(ModalHeader, { handleModal: handleModal, title: 'C\u00E0i \u0111\u1EB7t' }), jsxs(Row, { className: "m-0 gy-1 setting-modal-body-custom", children: [jsx(Col, { md: 4, xs: 12, className: "setting-menu", children: jsx(lib.Scrollbars, { autoHide: true, autoHeight: true, autoHeightMax: windowSize.innerHeight - 180, children: jsx(Row, { className: "m-0 gy-1 mb-2", children: dataSetting && dataSetting.length > 0 ?
-                                                    dataSetting.map((item) => {
+            jsx(Modal$1, { isOpen: true, toggle: handleModal, className: 'modal-dialog-centered modal-lg setting-modal', contentClassName: 'p-0', onOpened: handleFormOpened, onClosed: handleFormClosed, backdrop: backdrop, children: jsx(Form$1, { id: 'form-modal-globalzone', className: 'todo-modal', onSubmit: handleSubmit, children: jsxs("div", { className: "", children: [jsx(ModalHeader, { handleModal: handleModal, title: 'C\u00E0i \u0111\u1EB7t' }), jsxs(Row, { className: "m-0 gy-1 setting-modal-body-custom", children: [jsx(Col, { md: 4, xs: 12, className: "setting-menu", children: jsx(lib.Scrollbars, { autoHide: true, autoHeight: true, autoHeightMax: windowSize.innerHeight - 180, children: jsx(Row, { className: "m-0 gy-1 mb-2", children: dataSettingGroup && dataSettingGroup.length > 0 ?
+                                                    dataSettingGroup.map((item) => {
                                                         return (jsx("div", { className: 'setting-menu__item ' + (item.active ? 'selected' : ''), onClick: () => { switchSettingTab(item); }, children: jsxs("div", { className: "setting-menu__wrapper-content truncate", children: [jsx(DynamicIcon, { name: item.icon, className: "setting-menu__icon" }), jsx("p", { className: "setting-menu__name truncate", children: jsx("span", { children: item.name }) })] }) }, item.id));
-                                                    }) : null }) }) }), jsx(Col, { md: 8, xs: 12, className: "stack-navigation stack-page", children: jsx(lib.Scrollbars, { autoHide: true, autoHeight: true, autoHeightMax: windowSize.innerHeight - 180, children: jsx(ModalBody, { children: jsx("div", { className: "setting-section" }) }) }) })] })] }) }) })
+                                                    }) : null }) }) }), jsx(Col, { md: 8, xs: 12, className: "stack-navigation stack-page", children: jsx(lib.Scrollbars, { autoHide: true, autoHeight: true, autoHeightMax: windowSize.innerHeight - 180, children: jsx(ModalBody, { children: _renderView() }) }) })] })] }) }) })
             : null }));
 };