@jswork/antd-components 1.0.222 → 1.0.223

package/src/lib/table-links.tsx

@@ -8,12 +8,7 @@ import nx from '@jswork/next';
 import { Space } from 'antd';
 import React, { FC } from 'react';
 import { AcConfirmButton } from './confirm-button';
-
-declare global {
-  interface NxStatic {
-    $event: any;
-  }
-}
+import type { AppLocale } from './types';
 
 const locales = {
   'zh-CN': {
@@ -31,7 +26,7 @@ const locales = {
 export type AcTableLinksProps = {
   name: string;
   model?: any;
-  lang?: string;
+  lang?: AppLocale;
   extraBefore?: React.ReactNode;
   extraAfter?: React.ReactNode;
   as?: React.ComponentType<any>;
@@ -41,12 +36,12 @@ export type AcTableLinksProps = {
 
 export type TableActionArgs = {
   name: string;
-  lang?: string;
+  lang?: AppLocale;
   [key: string]: any;
 }
 
 const defaultProps = {
-  lang: 'zh-CN',
+  lang: 'zh-CN' as const,
   actions: ['edit', 'destroy'],
 };
 

package/src/lib/table-status-switcher.tsx

@@ -9,12 +9,6 @@ import React, { FC } from 'react';
 import { ReactAntStatusSwitchProps } from '@jswork/react-ant-status-switch/dist/components';
 import nx from '@jswork/next';
 
-declare global {
-  interface NxStatic {
-    $api: Record<string, any>;
-  }
-}
-
 export type AcTableStatusSwitcherProps = ReactAntStatusSwitchProps & {
   name: string;
   items: any[];

package/src/lib/table-toggle-switcher.tsx

@@ -8,12 +8,6 @@ import React, { FC } from 'react';
 import nx from '@jswork/next';
 import { Switch, SwitchProps } from 'antd';
 
-declare global {
-  interface NxStatic {
-    $api: Record<string, any>;
-  }
-}
-
 export type AcTableToggleSwitcherProps = SwitchProps & {
   name: string;
   model: any;

package/src/lib/table.tsx

@@ -20,18 +20,9 @@ import { ColumnsType } from 'antd/es/table';
 import cx from 'classnames';
 import deepEqual from 'fast-deep-equal';
 import React from 'react';
+import type { AppLocale, FetcherParams, FetcherResponse } from './types';
 import { tableAction } from './table-links';
 
-type NavigateFunction = import('react-router-dom').NavigateFunction;
-
-declare global {
-  interface NxStatic {
-    $event: any;
-    $nav: NavigateFunction;
-    $api: Record<string, any>;
-  }
-}
-
 const CLASS_NAME = 'ac-table';
 
 export type AcTableProps = TableProps & {
@@ -44,7 +35,7 @@ export type AcTableProps = TableProps & {
    * The language.
    * @default 'zh-CN'
    */
-  lang?: string;
+  lang?: AppLocale;
   /**
    * The platform module name.
    * @default admin
@@ -81,11 +72,7 @@ export type AcTableProps = TableProps & {
    * @param params { current: number; pageSize: number }
    * @returns Promise<{ data: any[]; total: number }>
    */
-  fetcher?: (params: {
-    current: number;
-    pageSize: number;
-    params?: Record<string, any>;
-  }) => Promise<{ data: any[]; total: number }>;
+  fetcher?: (params: FetcherParams) => FetcherResponse;
   /**
    * @param page
    * @param size

package/src/lib/textarea.tsx

@@ -2,11 +2,10 @@ import { Input } from 'antd';
 import { TextAreaProps } from 'antd/es/input';
 import cx from 'classnames';
 import React from 'react';
+import type { StdCallback } from './types';
 
 const CLASS_NAME = 'ac-textarea';
 const TextArea = Input.TextArea;
-type StdEventTarget = { target: { value: any } };
-type StdCallback = (inEvent: StdEventTarget) => void;
 
 export type AcTextareaProps = {
   className?: string;

package/src/lib/time-picker.tsx

@@ -2,11 +2,10 @@ import { TimePicker, TimePickerProps } from 'antd';
 import cx from 'classnames';
 import dayjs from 'dayjs';
 import React from 'react';
+import type { StdCallback } from './types';
 
 const CLASS_NAME = 'ac-time-picker';
 const STD_FORMAT = 'HH:mm:ss';
-type StdEventTarget = { target: { value: any } };
-type StdCallback = (inEvent: StdEventTarget) => void;
 
 export type AcTimePickerProps = {
   className?: string;

package/src/lib/transfer.tsx

@@ -2,11 +2,9 @@ import { Transfer, TransferProps } from 'antd';
 import cx from 'classnames';
 import React from 'react';
 import { transferLabel } from '../tpls/transfer';
+import type { StdCallback, TemplateCallback } from './types';
 
 const CLASS_NAME = 'ac-transfer';
-type StdEventTarget = { target: { value: any } };
-type StdCallback = (inEvent: StdEventTarget) => void;
-type TemplateCallback = (item: { item: any }, options?: any) => React.ReactNode;
 
 export type AcTransferProps = {
   className?: string;
@@ -26,7 +24,7 @@ export class AcTransfer extends React.Component<AcTransferProps> {
 
   get templateCallback(): any {
     const { template } = this.props;
-    return (item: any) => template({ item });
+    return (item: any) => template({ item, index: -1 });
   }
 
   state = {

package/src/lib/tree-select.tsx

@@ -3,10 +3,9 @@ import { TreeSelect, TreeSelectProps } from 'antd';
 import cx from 'classnames';
 import React from 'react';
 import { treeSelectKv } from '../tpls/kv';
+import type { StdCallback } from './types';
 
 const CLASS_NAME = 'ac-tree-select';
-type StdEventTarget = { target: { value: any } };
-type StdCallback = (inEvent: StdEventTarget) => void;
 
 // @see: https://github.com/afeiship/react-ant-tree-select
 

package/src/lib/types.ts

@@ -0,0 +1,136 @@
+/**
+ * Common TypeScript types for antd-components
+ * Shared types used across multiple components
+ */
+
+import { InputProps } from 'antd';
+import { NavigateFunction } from 'react-router-dom';
+
+/**
+ * Supported locale languages
+ * @example
+ * lang?: AppLocale;
+ */
+export type AppLocale = 'zh-CN' | 'en-US';
+
+/**
+ * Custom event target for input components
+ * @description This is a custom type that wraps onChange values in a standard format.
+ * Antd components don't always return standard React events, so we normalize
+ * all onChange callbacks to use this consistent { target: { value } } structure.
+ * @example
+ * const handleChange = (event: StdEventTarget) => {
+ *   console.log(event.target.value);
+ * };
+ * @template T The type of the value
+ */
+export type StdEventTarget<T = any> = { target: { value: T } };
+
+/**
+ * Standard callback function for value changes
+ * @description Normalized onChange callback that accepts our custom event format.
+ * @example
+ * onChange?: (inEvent: StdEventTarget) => void;
+ * @template T The type of the value
+ */
+export type StdCallback<T = any> = (inEvent: StdEventTarget<T>) => void;
+
+/**
+ * Template callback for rendering items
+ * @example
+ * renderItem?: (item: { item: any; index: number }) => React.ReactNode;
+ */
+export type TemplateCallback<T = any> = (
+  item: { item: T; index: number },
+  options?: any
+) => React.ReactNode;
+
+/**
+ * Template callback with items array
+ * @example
+ * renderItem?: (item: { item: any; index: number; items: any[] }, cb: any) => React.ReactNode;
+ */
+export type TemplateCallbackWithItems<T = any> = (
+  item: { item: T; index: number; items: T[] },
+  cb: any
+) => React.ReactNode;
+
+/**
+ * Template callback with options
+ * @example
+ * renderItem?: (item: { item: any; index: number }, options?: any) => React.ReactNode;
+ */
+export type TemplateCallbackWithOptions<T = any> = (
+  item: { item: T; index: number },
+  options?: any
+) => React.ReactNode;
+
+/**
+ * Base form props interface
+ */
+export interface BaseFormProps {
+  className?: string;
+  disabled?: boolean;
+  readOnly?: boolean;
+}
+
+/**
+ * Form props with onChange handler
+ */
+export interface FormWithOnChangeProps<T = any> extends BaseFormProps {
+  value?: T;
+  onChange?: StdCallback;
+}
+
+/**
+ * Form props with items array
+ */
+export interface FormWithItemsProps<T = any> extends FormWithOnChangeProps<T> {
+  items?: T[];
+}
+
+/**
+ * API fetcher parameters
+ */
+export interface FetcherParams {
+  current: number;
+  pageSize: number;
+  params?: Record<string, any>;
+}
+
+/**
+ * API fetcher response
+ */
+export type FetcherResponse<T = any> = Promise<{
+  data: T[];
+  total: number;
+}>;
+
+/**
+ * Table action configuration
+ */
+export interface TableActionProps {
+  name: string;
+  module?: string;
+  params?: Record<string, any>;
+  paramsAdd?: Record<string, any>;
+  paramsEdit?: Record<string, any>;
+  paramsReset?: Record<string, any>;
+  pathAdd?: string;
+  pathEdit?: string;
+}
+
+declare global {
+  interface NxStatic {
+    $event: any;
+    $api: Record<string, any>;
+    $nav: NavigateFunction;
+
+    err: (msg: string) => any;
+    msg: (msg: string) => any;
+    info: (msg: string) => any;
+    alert: (msg: string, title?: String) => any;
+    confirm: (msg: string, title?: String) => any;
+    prompt: (msg: string, options?: InputProps) => any;
+  }
+}

package/src/lib/upload-dragger.tsx

@@ -3,11 +3,10 @@ import { Upload } from 'antd';
 import { DraggerProps } from 'antd/es/upload';
 import cx from 'classnames';
 import React from 'react';
+import type { StdCallback } from './types';
 
 const CLASS_NAME = 'ac-upload-dragger';
 const { Dragger } = Upload;
-type StdEventTarget = { target: { value: any } };
-type StdCallback = (inEvent: StdEventTarget) => void;
 type CustomRequest = (inEvent: any) => Promise<any>;
 
 export type AcUploadDraggerProps = {

package/src/lib/upload.tsx

@@ -2,12 +2,10 @@ import { UploadOutlined } from '@ant-design/icons';
 import type { ButtonProps, UploadProps } from 'antd';
 import { Button, Upload } from 'antd';
 import React from 'react';
-
 import cx from 'classnames';
+import type { StdCallback } from './types';
 
 const CLASS_NAME = 'ac-upload';
-type StdEventTarget = { target: { value: any } };
-type StdCallback = (inEvent: StdEventTarget) => void;
 type CustomRequest = (inEvent: any) => Promise<any>;
 
 export type AcUploadProps = {

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

@@ -6,7 +6,8 @@ type Payload = Record<string, any>;
 
 const useCommand = (inName?: string) => {
   const name = inName || '@';
-  const execute: ExecuteFn = (command, ...args) => AcTable.event?.emit(`${name}:${command}`, ...args);
+  const execute: ExecuteFn = (command, ...args) =>
+    AcTable.event?.emit(`${name}:${command}`, ...args);
   const listen: ListenFn = (cmd, callback) => AcTable.event?.on(`${name}:${cmd}`, callback);
 
   // the command repository:
@@ -14,8 +15,8 @@ const useCommand = (inName?: string) => {
   const refetch = () => execute('refetch');
   const reset = () => execute('reset');
   const add = () => execute('add');
-  const edit = () => execute('edit');
-  const destroy = () => execute('destroy');
+  const edit = (payload: Payload) => execute('edit', payload);
+  const destroy = (payload: Payload) => execute('destroy', payload);
   const draft = (payload: Payload) => execute('draft', payload);
 
   return {