@jswork/antd-components 1.0.219 → 1.0.220

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jswork/antd-components",
-  "version": "1.0.219",
+  "version": "1.0.220",
   "main": "dist/main.cjs.js",
   "module": "dist/main.esm.js",
   "types": "dist/main.d.ts",
@@ -64,7 +64,6 @@
     "@jswork/next-tmpl": "^1.0.7",
     "@jswork/next-tree-walk": "^1.0.7",
     "@jswork/next-unique": "^1.0.2",
-    "@jswork/noop": "^1.0.0",
     "@jswork/react-codeflask": "^1.1.2",
     "@jswork/react-list": "^1.4.3",
     "@jswork/url-sync-flat": "^1.0.8",

package/src/lib/_abstract-upload.tsx

@@ -1,10 +1,10 @@
-import React, { ReactNode } from 'react';
-import Sortable from 'sortablejs';
 import { loadScript, loadStyle } from '@jswork/loadkit';
+import { UploadFile } from 'antd';
 import { DraggerProps } from 'antd/es/upload';
 import { UploadChangeParam } from 'antd/es/upload/interface';
-import { UploadFile } from 'antd';
+import React, { ReactNode } from 'react';
 import { flushSync } from 'react-dom';
+import Sortable from 'sortablejs';
 
 import '@jswork/next-gpid';
 
@@ -45,7 +45,7 @@ export class AcAbstractUpload extends React.Component<AcAbstractUploadProps, Sta
   constructor(inProps: AcAbstractUploadProps) {
     super(inProps);
     this.state = {
-      fileList: this.toFileList(inProps.value)
+      fileList: this.toFileList(inProps.value),
     };
   }
 
@@ -72,7 +72,7 @@ export class AcAbstractUpload extends React.Component<AcAbstractUploadProps, Sta
       ghostClass: 'sortable-ghost',
       chosenClass: 'sortable-chosen',
       dragClass: 'sortable-drag',
-      onEnd: this.handleSortEnd
+      onEnd: this.handleSortEnd,
     });
   }
 
@@ -112,7 +112,7 @@ export class AcAbstractUpload extends React.Component<AcAbstractUploadProps, Sta
   doChange = (inValue) => {
     const { onChange, transformResponse } = this.props;
     const value = inValue.map((item) => item.response ?? item);
-    onChange!({ target: { value: transformResponse!(value) } });
+    onChange?.({ target: { value: transformResponse!(value) } });
   };
 
   previewFile = (file): Promise<string> => {

package/src/lib/breadcrumb.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import noop from '@jswork/noop';
 import { Breadcrumb, BreadcrumbProps } from 'antd';
 import ReactList, { TemplateArgs } from '@jswork/react-list';
 import { breadcrumbDefault } from '../tpls/breadcrumb';
@@ -25,7 +24,6 @@ export type AcBreadcrumbProps = {
 export class AcBreadcrumb extends React.Component<AcBreadcrumbProps> {
   static displayName = CLASS_NAME;
   static defaultProps = {
-    onChange: noop,
     template: breadcrumbDefault,
   };
 

package/src/lib/button.tsx

@@ -4,12 +4,12 @@
  * @LastEditors: aric 1290657123@qq.com
  * @LastEditTime: 2025-10-25 07:32:18
  */
-import React, { FC } from 'react';
-import { Button, ButtonProps } from 'antd';
 import {
-  ArrowLeftOutlined, BulbOutlined,
+  ArrowLeftOutlined,
+  BulbOutlined,
   CheckOutlined,
-  CloseOutlined, CopyOutlined,
+  CloseOutlined,
+  CopyOutlined,
   DownloadOutlined,
   EditOutlined,
   EyeOutlined,
@@ -20,8 +20,29 @@ import {
   SaveOutlined,
   SyncOutlined,
 } from '@ant-design/icons';
+import { Button, ButtonProps } from 'antd';
+import React, { FC } from 'react';
 
-const locals = {
+// 类型定义
+export type Locale = 'zh-CN' | 'en-US';
+type ActionType =
+  | 'create'
+  | 'edit'
+  | 'del'
+  | 'view'
+  | 'preview'
+  | 'save'
+  | 'export'
+  | 'imp'
+  | 'refresh'
+  | 'back'
+  | 'submit'
+  | 'cancel'
+  | 'sync'
+  | 'copy';
+
+// 文案
+const locals: Record<Locale, Record<ActionType, string>> = {
   'zh-CN': {
     create: '添加',
     edit: '编辑',
@@ -56,66 +77,91 @@ const locals = {
   },
 };
 
-const t = (locale: string, key: string) => {
-  return locals[locale][key] || key;
-};
-
-type AcButtonProps = ButtonProps & {
-  lang?: string;
+// 图标映射
+const iconMap: Record<ActionType, React.ReactNode> = {
+  create: <PlusOutlined />,
+  edit: <EditOutlined />,
+  del: <CloseOutlined />,
+  view: <EyeOutlined />,
+  preview: <BulbOutlined />,
+  save: <SaveOutlined />,
+  export: <DownloadOutlined />,
+  imp: <ImportOutlined />,
+  refresh: <ReloadOutlined />,
+  back: <ArrowLeftOutlined />,
+  submit: <CheckOutlined />,
+  cancel: <RedoOutlined />,
+  sync: <SyncOutlined />,
+  copy: <CopyOutlined />,
+};
+
+// 国际化工具函数
+const t = (locale: Locale, key: ActionType): string => {
+  return locals[locale]?.[key] ?? key;
+};
+
+// 通用按钮组件
+interface ActionButtonProps extends ButtonProps {
+  action: ActionType;
+  lang?: Locale;
 }
 
-export const BtnCreate: FC<AcButtonProps> = ({ lang = 'zh-CN', ...props }) => {
-  return <Button size="small" icon={<PlusOutlined />} children={t(lang, 'create')} {...props} />;
-};
-
-export const BtnEdit: FC<AcButtonProps> = ({ lang = 'zh-CN', ...props }) => {
-  return <Button size="small" icon={<EditOutlined />} children={t(lang, 'edit')} {...props} />;
-};
-
-export const BtnDelete: FC<AcButtonProps> = ({ lang = 'zh-CN', ...props }) => {
-  return <Button size="small" icon={<CloseOutlined />} children={t(lang, 'del')} {...props} />;
-};
-
-export const BtnView: FC<AcButtonProps> = ({ lang = 'zh-CN', ...props }) => {
-  return <Button size="small" icon={<EyeOutlined />} children={t(lang, 'view')} {...props} />;
-};
-
-export const BtnPreview: FC<AcButtonProps> = ({ lang = 'zh-CN', ...props }) => {
-  return <Button size="small" icon={<BulbOutlined />} children={t(lang, 'preview')} {...props} />;
-};
-
-export const BtnSave: FC<AcButtonProps> = ({ lang = 'zh-CN', ...props }) => {
-  return <Button size="small" icon={<SaveOutlined />} children={t(lang, 'save')} {...props} />;
-};
-
-export const BtnExport: FC<AcButtonProps> = ({ lang = 'zh-CN', ...props }) => {
-  return <Button size="small" icon={<DownloadOutlined />} children={t(lang, 'export')} {...props} />;
-};
-
-export const BtnImport: FC<AcButtonProps> = ({ lang = 'zh-CN', ...props }) => {
-  return <Button size="small" icon={<ImportOutlined />} children={t(lang, 'imp')} {...props} />;
-};
-
-export const BtnRefresh: FC<AcButtonProps> = ({ lang = 'zh-CN', ...props }) => {
-  return <Button size="small" icon={<ReloadOutlined />} children={t(lang, 'refresh')} {...props} />;
-};
-
-export const BtnBack: FC<AcButtonProps> = ({ lang = 'zh-CN', ...props }) => {
-  return <Button size="small" icon={<ArrowLeftOutlined />} children={t(lang, 'back')} {...props} />;
-};
-
-export const BtnSubmit: FC<AcButtonProps> = ({ lang = 'zh-CN', ...props }) => {
-  return <Button size="small" icon={<CheckOutlined />} children={t(lang, 'submit')} {...props} />;
-};
-
-export const BtnCancel: FC<AcButtonProps> = ({ lang = 'zh-CN', ...props }) => {
-  return <Button size="small" icon={<RedoOutlined />} children={t(lang, 'cancel')} {...props} />;
-};
-
-export const BtnSync: FC<AcButtonProps> = ({ lang = 'zh-CN', ...props }) => {
-  return <Button size="small" icon={<SyncOutlined />} children={t(lang, 'sync')} {...props} />;
-};
-
-export const BtnCopy: FC<AcButtonProps> = ({ lang = 'zh-CN', ...props }) => {
-  return <Button size="small" icon={<CopyOutlined />} children={t(lang, 'copy')} {...props} />;
-};
+const ActionButton: FC<ActionButtonProps> = ({
+  action,
+  lang = 'zh-CN',
+  size = 'small',
+  children,
+  ...props
+}) => {
+  const text = children ?? t(lang, action);
+  const icon = iconMap[action];
+  return (
+    <Button size={size} icon={icon} {...props}>
+      {text}
+    </Button>
+  );
+};
+
+// 导出具体命名的按钮（保持 API 兼容）
+export const BtnCreate = (props: ButtonProps & { lang?: Locale }) => (
+  <ActionButton action="create" {...props} />
+);
+export const BtnEdit = (props: ButtonProps & { lang?: Locale }) => (
+  <ActionButton action="edit" {...props} />
+);
+export const BtnDelete = (props: ButtonProps & { lang?: Locale }) => (
+  <ActionButton action="del" {...props} />
+);
+export const BtnView = (props: ButtonProps & { lang?: Locale }) => (
+  <ActionButton action="view" {...props} />
+);
+export const BtnPreview = (props: ButtonProps & { lang?: Locale }) => (
+  <ActionButton action="preview" {...props} />
+);
+export const BtnSave = (props: ButtonProps & { lang?: Locale }) => (
+  <ActionButton action="save" {...props} />
+);
+export const BtnExport = (props: ButtonProps & { lang?: Locale }) => (
+  <ActionButton action="export" {...props} />
+);
+export const BtnImport = (props: ButtonProps & { lang?: Locale }) => (
+  <ActionButton action="imp" {...props} />
+);
+export const BtnRefresh = (props: ButtonProps & { lang?: Locale }) => (
+  <ActionButton action="refresh" {...props} />
+);
+export const BtnBack = (props: ButtonProps & { lang?: Locale }) => (
+  <ActionButton action="back" {...props} />
+);
+export const BtnSubmit = (props: ButtonProps & { lang?: Locale }) => (
+  <ActionButton action="submit" {...props} />
+);
+export const BtnCancel = (props: ButtonProps & { lang?: Locale }) => (
+  <ActionButton action="cancel" {...props} />
+);
+export const BtnSync = (props: ButtonProps & { lang?: Locale }) => (
+  <ActionButton action="sync" {...props} />
+);
+export const BtnCopy = (props: ButtonProps & { lang?: Locale }) => (
+  <ActionButton action="copy" {...props} />
+);

package/src/lib/card-extras.tsx

@@ -4,10 +4,10 @@
  * @LastEditors: aric 1290657123@qq.com
  * @LastEditTime: 2025-10-31 14:07:56
  */
+import nx from '@jswork/next';
 import { Space, SpaceProps } from 'antd';
 import React, { FC, Fragment } from 'react';
-import nx from '@jswork/next';
-import { BtnBack, BtnCreate, BtnRefresh } from './button';
+import { BtnBack, BtnCreate, BtnRefresh, Locale } from './button';
 
 declare global {
   interface NxStatic {
@@ -17,21 +17,24 @@ declare global {
 
 export type AcCardExtrasProps = SpaceProps & {
   name: string;
-  lang?: string;
+  lang?: Locale;
   as?: React.ComponentType<any>;
   extraBefore?: React.ReactNode;
   extraAfter?: React.ReactNode;
   asProps?: any;
-  actions?: string []
-}
+  actions?: string[];
+};
 
 const defaultExtras = {
-  lang: 'zh-CN',
+  lang: 'zh-CN' as const,
   actions: ['refetch', 'add'],
 };
 
 export const AcCardExtras: FC<AcCardExtrasProps> = (props) => {
-  const { name, lang, as, extraBefore, extraAfter, asProps, actions } = { ...defaultExtras, ...props };
+  const { name, lang, as, extraBefore, extraAfter, asProps, actions } = {
+    ...defaultExtras,
+    ...props,
+  };
   const handleRefresh = () => nx.$event?.emit?.(`${name}:refetch`);
   const handleReset = () => nx.$event?.emit?.(`${name}:reset`);
   const handleAdd = () => nx.$event?.emit?.(`${name}:add`);
@@ -47,7 +50,9 @@ export const AcCardExtras: FC<AcCardExtrasProps> = (props) => {
   return (
     <AsComponent {...asProps}>
       {extraBefore}
-      {actions?.map((action) => <Fragment key={action}>{items[action]}</Fragment>)}
+      {actions?.map((action) => (
+        <Fragment key={action}>{items[action]}</Fragment>
+      ))}
       {extraAfter}
     </AsComponent>
   );

package/src/lib/checkable-dropdown.tsx

@@ -1,9 +1,8 @@
-import React from 'react';
-import noop from '@jswork/noop';
-import { Checkbox, Dropdown, Button, MenuProps } from 'antd';
 import { DownOutlined } from '@ant-design/icons';
 import '@jswork/next-dom-event';
+import { Button, Checkbox, Dropdown, MenuProps } from 'antd';
 import { SizeType } from 'antd/es/config-provider/SizeContext';
+import React from 'react';
 
 const CLASS_NAME = 'ac-checkable-dropdown';
 const locales = { 'zh-CN': { selectAll: '全部' }, 'en-US': { selectAll: 'All' } };
@@ -27,17 +26,16 @@ export class AcCheckableDropdown extends React.Component<AcCheckableDropdownProp
   static id = 1;
   static defaultProps = {
     lang: 'zh-CN',
-    onChange: noop,
     items: [],
     value: [],
-    width: 140
+    width: 140,
   };
 
   private readonly overlayClass = `${CLASS_NAME}-overlay--${AcCheckableDropdown.id++}`;
 
   state = {
     visible: false,
-    value: this.props.value
+    value: this.props.value,
   };
 
   private overlayRes: any;
@@ -73,7 +71,7 @@ export class AcCheckableDropdown extends React.Component<AcCheckableDropdownProp
             }}>
             {this.t('selectAll')}
           </Checkbox>
-        )
+        ),
       },
       { type: 'divider' },
       ...items!.map((opt) => {
@@ -91,9 +89,9 @@ export class AcCheckableDropdown extends React.Component<AcCheckableDropdownProp
               checked={shouldChecked}>
               {opt.label}
             </Checkbox>
-          )
+          ),
         };
-      })
+      }),
     ] as MenuProps['items'];
   }
 
@@ -106,7 +104,7 @@ export class AcCheckableDropdown extends React.Component<AcCheckableDropdownProp
     const { onChange } = this.props;
     const target = { value: inValue };
     this.setState(target);
-    onChange!({ target });
+    onChange?.({ target });
   };
 
   componentDidMount() {

package/src/lib/checkable-tag-list.tsx

@@ -1,8 +1,7 @@
-import React from 'react';
-import noop from '@jswork/noop';
-import cx from 'classnames';
 import ReactList from '@jswork/react-list';
-import { Space, Button } from 'antd';
+import { Button, Space } from 'antd';
+import cx from 'classnames';
+import React from 'react';
 import { AcCheckableTag } from './checkable-tag';
 
 const CLASS_NAME = 'ac-checkable-tag-list';
@@ -46,7 +45,6 @@ export class AcCheckableTagList extends React.Component<AcCheckableTagListProps>
   static defaultProps = {
     lang: 'zh-CN',
     value: [],
-    onChange: noop,
   };
 
   state = {
@@ -68,7 +66,7 @@ export class AcCheckableTagList extends React.Component<AcCheckableTagListProps>
     const { onChange } = this.props;
     const target = { value: inEvent };
     this.setState(target, () => {
-      onChange!({ target });
+      onChange?.({ target });
     });
   };
 
@@ -122,7 +120,6 @@ export class AcCheckableTagList extends React.Component<AcCheckableTagListProps>
   }
 }
 
-
 export const AcCheckableTagListFc = (props: AcCheckableTagListProps) => {
   return <AcCheckableTagList {...props} />;
 };

package/src/lib/checkable-tag.tsx

@@ -1,9 +1,8 @@
-import React, { ReactNode } from 'react';
-import noop from '@jswork/noop';
+import { CloseOutlined } from '@ant-design/icons';
 import { Tag } from 'antd';
-import cx from 'classnames';
 import { CheckableTagProps } from 'antd/es/tag';
-import { CloseOutlined } from '@ant-design/icons';
+import cx from 'classnames';
+import React, { ReactNode } from 'react';
 
 const CLASS_NAME = 'ac-checkable-tag';
 const { CheckableTag } = Tag;
@@ -34,8 +33,6 @@ export class AcCheckableTag extends React.Component<AcCheckableTagProps> {
     disabled: false,
     toggleable: false,
     propagation: false,
-    onChange: noop,
-    onCloseClick: noop,
   };
 
   state = {
@@ -63,14 +60,14 @@ export class AcCheckableTag extends React.Component<AcCheckableTagProps> {
     const { onChange } = this.props;
     const target = { value: inEvent };
     this.setState(target, () => {
-      onChange!({ target });
+      onChange?.({ target });
     });
   };
 
   handleCloseClick = (inEvent) => {
     const { propagation, onCloseClick } = this.props;
     !propagation && inEvent.stopPropagation();
-    onCloseClick!(inEvent);
+    onCloseClick?.(inEvent);
   };
 
   render() {

package/src/lib/checkbox-group.tsx

@@ -1,10 +1,9 @@
-import React from 'react';
 import ReactList from '@jswork/react-list';
-import noop from '@jswork/noop';
 import { Checkbox } from 'antd';
+import { CheckboxGroupProps } from 'antd/es/checkbox';
 import cx from 'classnames';
+import React from 'react';
 import { checkboxKv } from '../tpls/kv';
-import { CheckboxGroupProps } from 'antd/es/checkbox';
 
 const CLASS_NAME = 'ac-checkbox-group';
 type StdEventTarget = { target: { value: any } };
@@ -27,8 +26,6 @@ export class AcCheckboxGroup extends React.Component<AcCheckboxGroupProps> {
     items: [],
     value: [],
     template: checkboxKv,
-    onChange: noop,
-    onSearch: noop,
   };
 
   state = {
@@ -49,8 +46,8 @@ export class AcCheckboxGroup extends React.Component<AcCheckboxGroupProps> {
     const target = { value: inEvent };
     const stdEvent = { target };
     this.setState(target, () => {
-      onChange!(stdEvent);
-      onSearch!(stdEvent);
+      onChange?.(stdEvent);
+      onSearch?.(stdEvent);
     });
   };
 
@@ -74,4 +71,3 @@ export class AcCheckboxGroup extends React.Component<AcCheckboxGroupProps> {
 export const AcCheckboxGroupFc = (props: AcCheckboxGroupProps) => {
   return <AcCheckboxGroup {...props} />;
 };
-

package/src/lib/checkbox.tsx

@@ -1,7 +1,6 @@
-import React, { HTMLAttributes } from 'react';
-import noop from '@jswork/noop';
 import { Checkbox, CheckboxProps } from 'antd';
 import cx from 'classnames';
+import React, { HTMLAttributes } from 'react';
 
 const CLASS_NAME = 'ac-checkbox';
 type StdEventTarget = { target: { value: any } };
@@ -17,9 +16,7 @@ export type AcCheckboxProps = {
 export class AcCheckbox extends React.Component<AcCheckboxProps> {
   static displayName = CLASS_NAME;
   static formSchema = CLASS_NAME;
-  static defaultProps = {
-    onChange: noop,
-  };
+  static defaultProps = {};
 
   state = {
     value: this.props.value,
@@ -39,7 +36,7 @@ export class AcCheckbox extends React.Component<AcCheckboxProps> {
     const target = { value: checked };
 
     this.setState(target, () => {
-      onChange!({ target });
+      onChange?.({ target });
     });
   };
 
@@ -58,8 +55,6 @@ export class AcCheckbox extends React.Component<AcCheckboxProps> {
   }
 }
 
-
 export const AcCheckboxFc = (props: AcCheckboxProps) => {
   return <AcCheckbox {...props} />;
 };
-

package/src/lib/codeflask.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import noop from '@jswork/noop';
 import ReactCodeFlask from '@jswork/react-codeflask';
 
 const CLASS_NAME = 'ac-codeflask';
@@ -8,7 +7,6 @@ export class AcCodeFlask extends React.Component {
   static displayName = CLASS_NAME;
   static formSchema = CLASS_NAME;
   static defaultProps = {
-    onChange: noop,
   };
 
   render() {

package/src/lib/color-picker.tsx

@@ -1,4 +1,3 @@
-import noop from '@jswork/noop';
 import { ColorPicker, ColorPickerProps } from 'antd';
 import cx from 'classnames';
 import React from 'react';
@@ -16,9 +15,7 @@ export type AcColorPickerProps = {
 export class AcColorPicker extends React.Component<AcColorPickerProps> {
   static displayName = CLASS_NAME;
   static formSchema = CLASS_NAME;
-  static defaultProps = {
-    onChange: noop,
-  };
+  static defaultProps = {};
 
   state = { value: this.props.value };
 
@@ -40,7 +37,7 @@ export class AcColorPicker extends React.Component<AcColorPickerProps> {
     const { onChange } = this.props;
     const target = { value: '' };
     this.setState({ value: '' });
-    onChange!({ target });
+    onChange?.({ target });
   };
 
   render() {

package/src/lib/editable-tag-group.tsx

@@ -1,11 +1,10 @@
+import '@jswork/next-dom-event';
+import '@jswork/next-unique';
+import { Button, Tag } from 'antd';
 import cx from 'classnames';
+import deepEqual from 'fast-deep-equal';
 import React, { createRef } from 'react';
-import noop from '@jswork/noop';
 import AutosizeInput from 'react-input-autosize';
-import { Button, Tag } from 'antd';
-import deepEqual from 'fast-deep-equal';
-import '@jswork/next-dom-event';
-import '@jswork/next-unique';
 import { AcInteractiveList } from './interactive-list';
 
 const CLASS_NAME = 'ac-editable-tag-group';
@@ -54,7 +53,6 @@ export class AcEditableTagGroup extends React.Component<AcEditableTagGroupProps>
     value: [],
     min: 0,
     max: 10,
-    onChange: noop,
     triggers: [' ', 'Tab'],
   };
 
@@ -181,13 +179,12 @@ export class AcEditableTagGroup extends React.Component<AcEditableTagGroupProps>
   };
 
   handleChange = (inValue, inCallback?) => {
-    const callback = inCallback || noop;
     const { onChange } = this.props;
     const value = inValue.map((item) => item.trim());
     const target = { value };
     this.setState(target, () => {
       onChange!({ target });
-      callback(value);
+      inCallback?.(value);
     });
   };
 
@@ -235,4 +232,3 @@ export class AcEditableTagGroup extends React.Component<AcEditableTagGroupProps>
 export const AcEditableTagGroupFc = (props: AcEditableTagGroupProps) => {
   return <AcEditableTagGroup {...props} />;
 };
-