@jswork/antd-components 1.0.99 → 1.0.101

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jswork/antd-components",
-  "version": "1.0.99",
+  "version": "1.0.101",
   "main": "dist/main.cjs.js",
   "module": "dist/main.esm.js",
   "types": "dist/main.d.ts",
@@ -41,6 +41,8 @@
   },
   "dependencies": {
     "@jswork/antd-form-builder": "^1.1.27",
+    "@jswork/event-mitt": "^2.0.17",
+    "@jswork/harmony-events": "^1.2.11",
     "@jswork/loadkit": "^1.0.6",
     "@jswork/next-dom-event": "^1.0.8",
     "@jswork/next-gpid": "^1.0.4",

package/src/lib/table.tsx

@@ -7,16 +7,24 @@
 import React from 'react';
 import { Table, TableProps } from 'antd';
 import cx from 'classnames';
+import type { EventMittNamespace } from '@jswork/event-mitt';
+import { ReactHarmonyEvents } from '@jswork/harmony-events';
 
 const CLASS_NAME = 'ac-table';
 
 type AcTableProps = TableProps & {
+  /**
+   * The identity name.
+   * @default '@'
+   */
+  name?: string;
   /**
    * 自定义数据获取函数
    * @param params { current: number; pageSize: number }
    * @returns Promise<{ data: any[]; total: number }>
    */
   fetcher: (params: { current: number; pageSize: number }) => Promise<{ data: any[]; total: number }>;
+  onPageChange?: (current: number, size: number) => void;
   rowKey?: string;
   defaultCurrent?: number;
   defaultPageSize?: number;
@@ -26,12 +34,22 @@ type AcTableProps = TableProps & {
 export class AcTable extends React.Component<AcTableProps, any> {
   static displayName = CLASS_NAME;
   static formSchema = CLASS_NAME;
+  private harmonyEvents: ReactHarmonyEvents | null = null;
+  static event: EventMittNamespace.EventMitt;
+  static events = [
+    'refetch',
+    'reset',
+  ];
+
   static defaultProps = {
+    name: '@',
     rowKey: 'id',
     defaultCurrent: 1,
     defaultPageSize: 10,
   };
 
+  public eventBus: EventMittNamespace.EventMitt = AcTable.event;
+
   constructor(props) {
     super(props);
     const { defaultCurrent, defaultPageSize } = this.props;
@@ -46,9 +64,15 @@ export class AcTable extends React.Component<AcTableProps, any> {
 
   async componentDidMount() {
     const { current, pageSize } = this.state;
+    this.harmonyEvents = ReactHarmonyEvents.create(this);
+    this.eventBus = AcTable.event;
     await this.fetchData(current, pageSize);
   }
 
+  componentWillUnmount() {
+    this.harmonyEvents?.destroy();
+  }
+
   fetchData = async (page: number, size: number) => {
     const abortController = new AbortController();
     const { fetcher } = this.props;
@@ -75,8 +99,25 @@ export class AcTable extends React.Component<AcTableProps, any> {
     }
   };
 
+  /* ----- public eventBus methods start ----- */
+  refetch = async () => {
+    const { current, pageSize } = this.state;
+    await this.fetchData(current, pageSize);
+  };
+
+  reset = async () => {
+    const { defaultCurrent, defaultPageSize } = this.props;
+    this.setState({
+      current: defaultCurrent,
+      pageSize: defaultPageSize,
+    }, () => {
+      void this.fetchData(defaultCurrent!, defaultPageSize!);
+    });
+  };
+  /* ----- public eventBus methods end  ----- */
+
   render() {
-    const { className, pagination, ...rest } = this.props;
+    const { className, pagination, onPageChange, ...rest } = this.props;
     const { dataSource, isLoading, current, pageSize, total } = this.state;
     return (
       <Table
@@ -87,6 +128,7 @@ export class AcTable extends React.Component<AcTableProps, any> {
           current,
           pageSize,
           onChange: (page, size) => {
+            onPageChange?.(page, size);
             this.setState({ current: page, pageSize: size }, () => {
               void this.fetchData(page, size);
             });

package/src/lib/use-table-command.ts

@@ -0,0 +1,22 @@
+import { AcTable } from './table';
+
+const useCommand = (inName?: string) => {
+  const name = inName || '@';
+  const execute = (command: string, ...args: any[]) =>
+    AcTable.event?.emit(`${name}:${command}`, ...args);
+
+  const listen = (cmd: string, callback: any) => AcTable.event?.on(`${name}:${cmd}`, callback);
+
+  // the command repository:
+  const refetch = () => execute('refetch');
+  const reset = () => execute('reset');
+
+  return {
+    listen,
+    execute,
+    refetch,
+    reset,
+  };
+};
+
+export default useCommand;