plain-design 1.0.0-beta.99 → 3.0.0

package/src/packages/components/AutoTable/setting/useTableOption.setting.senior.sort.tsx

@@ -1,6 +1,6 @@
 import {eTableOptionSettingView} from "./useTableOption.setting.utils";
 import {eTableOptionSortMode, iTableOptionSortMeta} from "../use/useTableOption.sort";
-import {computed, reactive} from "plain-design-composition";
+import {computed, reactive} from "@peryl/react-compose";
 import {Table} from "../../Table";
 import {PlcDraggier} from "../../Table/standard/PlcDraggier/PlcDraggier";
 import {Plc} from "../../Plc";
@@ -57,15 +57,21 @@ export const useTableOptionSettingSeniorSort = AutoModule.createRegistration((
   const handler = {
     add: (val: { field: string, title: string }) => {state.data.push({ ...val, desc: true });},
     remove: (index: number) => {state.data.splice(index, 1);},
-    apply: () => {
-      sortState.useSenior([...state.data]);
+    apply: (autoReload: boolean) => {
+      sortState.useSenior([...state.data], autoReload);
     },
-    clear: () => {
-      state.data = [];
-      handler.apply();
+    update(sortData: iTableOptionSortMeta[], autoReload: boolean) {
+      state.data = sortData;
+      handler.apply(autoReload);
+    },
+    clear: (autoReload: boolean) => {
+      handler.update([], autoReload);
     },
   };
 
+  const applyAndReload = () => handler.apply(true);
+  const clearAndReload = () => handler.clear(true);
+
   setting.useTableOptionSettingInner({
     key: eTableOptionSettingView.sort,
     title: i18n.$it('table.seniorSort').d('高级排序'),
@@ -88,7 +94,7 @@ export const useTableOptionSettingSeniorSort = AutoModule.createRegistration((
         <div className="auto-table-setting-senior-sort" key="senior-sort">
           <div className="auto-table-setting-senior-sort-header">
             <div>
-              <Button label={i18n.$it('base.edit.apply').d("应用")} mode="fill" icon="pi-find-replace" onClick={handler.apply}/>
+              <Button label={i18n.$it('base.edit.apply').d("应用")} mode="fill" icon="pi-find-replace" onClick={applyAndReload}/>
               {!!availablePlcOptions.value.length && (
                 <Dropdown
                   v-slots={{
@@ -100,7 +106,7 @@ export const useTableOptionSettingSeniorSort = AutoModule.createRegistration((
                 />
               )}
             </div>
-            <Button label={i18n.$it('base.clear').d("清空")} icon="pi-delete" status="error" onClick={handler.clear}/>
+            <Button label={i18n.$it('base.clear').d("清空")} icon="pi-delete" status="error" onClick={clearAndReload}/>
           </div>
           <Table data={state.data} defaultEditable editSourceData>
             <PlcDraggier v-model={state.data}/>
@@ -113,4 +119,5 @@ export const useTableOptionSettingSeniorSort = AutoModule.createRegistration((
     },
   });
 
+  return { methods: handler };
 });

package/src/packages/components/AutoTable/setting/useTableOption.setting.tsx

@@ -1,109 +1,109 @@
-import {classnames, computed, getComponentCls, reactive, SimpleFunction} from "plain-design-composition";
-import {iTableOptionSettingConfig, iTableOptionSettingInnerUser} from "./useTableOption.setting.utils";
-import {$dialog} from "../../$dialog";
-import {Scroll} from "../../Scroll";
-import '../utils/TableOption.space';
-import i18n from "../../i18n";
-import {AutoModule} from "../utils/AutoModule";
-
-declare module '../utils/TableOption.space' {
-  namespace TableOptionSpace {
-    interface iTableOption {
-      setting: ReturnType<typeof useTableOptionSetting>;
-    }
-  }
-}
-
-export const useTableOptionSetting = AutoModule.createRegistration((
-  {
-    config,
-  }
-) => {
-
-  const state = reactive({
-    settingConfigs: [] as iTableOptionSettingConfig[],
-    activeKey: null as null | string,
-    closeSetting: null as null | SimpleFunction,
-  });
-
-  const isOpen = computed(() => !!state.closeSetting);
-
-  const useTableOptionSettingInner: iTableOptionSettingInnerUser = (config) => {
-    state.settingConfigs.push(config);
-    return { isOpen: () => isOpen.value && state.activeKey === config.key };
-  };
-
-  const openSetting = async (key: string) => {
-
-    const settingConfigs = state.settingConfigs.sort((a, b) => a.seq - b.seq);
-    const showConfig = state.settingConfigs.find(i => i.key === key);
-    !!showConfig && showConfig.beforeOpen && (await showConfig.beforeOpen());
-    state.activeKey = key;
-
-    /*已经打开就不用在打开一个dialog了，直接切换activeKey*/
-    if (isOpen.value) {return state.closeSetting;}
-
-    state.closeSetting = $dialog({
-      status: null,
-      size: config.size,
-      position: 'right',
-      width: null as any,
-      destroyOnClose: false,
-      footAlign: 'left',
-      noContentPadding: true,
-      externalClass: getComponentCls('auto-table-setting-dialog'),
-      title: i18n.$it('base.setting').d('设置'),
-      cancelButton: true,
-      cancelButtonText: i18n.$it('base.close').d('关闭'),
-      onHide: () => {state.closeSetting = null;},
-      render: () => {
-        return (
-          <div className={'auto-table-setting-wrapper'}>
-            <div className="auto-table-setting-nav">
-              {[null, ...settingConfigs, null].map((item, index) => (
-                <div key={index} className={classnames([
-                  'auto-table-setting-nav-item',
-                  {
-                    'auto-table-setting-nav-item-active': !!item && item.key === state.activeKey,
-                    'auto-table-setting-nav-item-prev': !!settingConfigs[index] && settingConfigs[index].key === state.activeKey,
-                    'auto-table-setting-nav-item-next': !!settingConfigs[index - 2] && settingConfigs[index - 2].key === state.activeKey,
-                  }
-                ])} onClick={async () => {
-                  if (!item) {return;}
-                  !!item.beforeOpen && (await item.beforeOpen());
-                  state.activeKey = item.key;
-                }}>
-                  <div className="auto-table-setting-nav-item-inner">
-                    {item?.title}
-                  </div>
-                </div>
-              ))}
-            </div>
-            <div className="auto-table-setting-body">
-              <Scroll>
-                <div className="auto-table-setting-body-inner">
-                  {(() => {
-                    const r = settingConfigs.find(i => i.key === state.activeKey);
-                    if (!r) {return null;}
-                    const content = !!r.render && r.render();
-                    return (
-                      <div className={classnames(['auto-table-setting-content', { 'auto-table-setting-content-pending': !!r && r.contentPending !== false }])}>
-                        {content}
-                      </div>
-                    );
-                  })()}
-                </div>
-              </Scroll>
-            </div>
-          </div>
-        );
-      },
-    });
-
-    return closeSetting;
-  };
-
-  const closeSetting = () => state.closeSetting?.();
-
-  return { openSetting, closeSetting, useTableOptionSettingInner };
-});
+import {classnames, computed, getComponentCls, reactive, SimpleFunction} from "@peryl/react-compose";
+import {iTableOptionSettingConfig, iTableOptionSettingInnerUser} from "./useTableOption.setting.utils";
+import {$dialog} from "../../$dialog";
+import {Scroll} from "../../Scroll";
+import '../utils/TableOption.space';
+import i18n from "../../i18n";
+import {AutoModule} from "../utils/AutoModule";
+
+declare module '../utils/TableOption.space' {
+  namespace TableOptionSpace {
+    interface iTableOption {
+      setting: ReturnType<typeof useTableOptionSetting>;
+    }
+  }
+}
+
+export const useTableOptionSetting = AutoModule.createRegistration((
+  {
+    config,
+  }
+) => {
+
+  const state = reactive({
+    settingConfigs: [] as iTableOptionSettingConfig[],
+    activeKey: null as null | string,
+    closeSetting: null as null | SimpleFunction,
+  });
+
+  const isOpen = () => !!state.closeSetting;
+
+  const useTableOptionSettingInner: iTableOptionSettingInnerUser = (config) => {
+    state.settingConfigs.push(config);
+    return { isOpen: () => isOpen() && state.activeKey === config.key };
+  };
+
+  const openSetting = async (key: string) => {
+
+    const settingConfigs = state.settingConfigs.sort((a, b) => a.seq - b.seq);
+    const showConfig = state.settingConfigs.find(i => i.key === key);
+    !!showConfig && showConfig.beforeOpen && (await showConfig.beforeOpen());
+    state.activeKey = key;
+
+    /*已经打开就不用在打开一个dialog了，直接切换activeKey*/
+    if (isOpen()) {return state.closeSetting;}
+
+    state.closeSetting = $dialog({
+      status: null,
+      size: config.size,
+      position: 'right',
+      width: null as any,
+      destroyOnClose: false,
+      footAlign: 'left',
+      noContentPadding: true,
+      externalClass: getComponentCls('auto-table-setting-dialog'),
+      title: i18n.$it('base.setting').d('设置'),
+      cancelButton: true,
+      cancelButtonText: i18n.$it('base.close').d('关闭'),
+      onHide: () => {state.closeSetting = null;},
+      render: () => {
+        return (
+          <div className={'auto-table-setting-wrapper'}>
+            <div className="auto-table-setting-nav">
+              {[null, ...settingConfigs, null].map((item, index) => (
+                <div key={index} className={classnames([
+                  'auto-table-setting-nav-item',
+                  {
+                    'auto-table-setting-nav-item-active': !!item && item.key === state.activeKey,
+                    'auto-table-setting-nav-item-prev': !!settingConfigs[index] && settingConfigs[index].key === state.activeKey,
+                    'auto-table-setting-nav-item-next': !!settingConfigs[index - 2] && settingConfigs[index - 2].key === state.activeKey,
+                  }
+                ])} onClick={async () => {
+                  if (!item) {return;}
+                  !!item.beforeOpen && (await item.beforeOpen());
+                  state.activeKey = item.key;
+                }}>
+                  <div className="auto-table-setting-nav-item-inner">
+                    {item?.title}
+                  </div>
+                </div>
+              ))}
+            </div>
+            <div className="auto-table-setting-body">
+              <Scroll>
+                <div className="auto-table-setting-body-inner">
+                  {(() => {
+                    const r = settingConfigs.find(i => i.key === state.activeKey);
+                    if (!r) {return null;}
+                    const content = !!r.render && r.render();
+                    return (
+                      <div className={classnames(['auto-table-setting-content', { 'auto-table-setting-content-pending': !!r && r.contentPending !== false }])}>
+                        {content}
+                      </div>
+                    );
+                  })()}
+                </div>
+              </Scroll>
+            </div>
+          </div>
+        );
+      },
+    });
+
+    return closeSetting;
+  };
+
+  const closeSetting = () => state.closeSetting?.();
+
+  return { openSetting, closeSetting, useTableOptionSettingInner };
+});

package/src/packages/components/AutoTable/setting/useTableOption.setting.utils.ts

@@ -1,5 +1,5 @@
-import {RenderNode} from "plain-design-composition";
-import {createEnum} from "plain-utils/utils/createEnum";
+import {RenderNode} from "@peryl/react-compose";
+import {createEnum} from "@peryl/utils/createEnum";
 
 /**
  * 在自定义面板中注册一个面板的参数类型