@flatbiz/antd 4.5.25 → 4.5.26

package/index.d.ts

@@ -408,7 +408,7 @@ export declare const BoxGrid: {
 	 */
 	getGridMapByRange: (minSize: number) => Record<TBoxBreakpoint, number>;
 };
-export type ButtonWrapperProps = Omit<ButtonProps, "onClick"> & {
+export type ButtonWrapperProps = Omit<ButtonProps, "onClick" | "color"> & {
 	/** 当返回 Promise 时，按钮自动loading */
 	onClick?: (e: React.MouseEvent<HTMLElement>) => Promise<TAny> | void;
 	/** 重复点击间隙，单位毫秒 默认值：500 */
@@ -421,6 +421,7 @@ export type ButtonWrapperProps = Omit<ButtonProps, "onClick"> & {
 	loadingPosition?: "left" | "center";
 	/** 移除按钮内边距，一般用于 type=link 类型下 */
 	removeGap?: boolean;
+	color?: string;
 };
 /**
  * antd Button包装组件
@@ -1368,6 +1369,347 @@ export type DragCollapseFormListProps = {
  * ```
  */
 export declare const DragCollapseFormList: (props: DragCollapseFormListProps) => import("react/jsx-runtime").JSX.Element;
+export type FormWrapperProps<Values = any> = TFormLayoutPreClassNameProps & FormProps<Values> & {
+	children: ReactNode;
+};
+/**
+ * Form 包装组件，添加对formItem的布局控制
+ * ```
+ * 1. 内置布局样式使用 preDefinedClassName.form
+ * ```
+ */
+export declare const FormWrapper: (props: FormWrapperProps) => import("react/jsx-runtime").JSX.Element;
+export type EasyFormProps = Omit<FormWrapperProps, "children"> & {
+	/**
+	 * 定义一行显示几列（当外层宽度尺寸大于 992px（lg） 时，一行显示几列）, 默认值：3
+	 * ```
+	 * 1. 当外层宽度尺寸小于992px（lg），为xs、sm、md情况下不受column值影响（column=1除外）
+	 * 2. 宽度尺寸定义
+	 *    xs: 宽度 < 576px
+	 *    sm: 宽度 ≥ 576px
+	 *    md: 宽度 ≥ 768px
+	 *    lg: 宽度 ≥ 992px
+	 *    xl: 宽度 ≥ 1200px
+	 *    xxl: 宽度 ≥ 1600px
+	 * 3. 列数尺寸定义
+	 *  {
+	 *    1: { xs: 24, sm: 24, md: 24, lg: 24, xl: 24, xxl: 24 },
+	 *    2: { xs: 24, sm: 12, md: 12, lg: 12, xl: 12, xxl: 12 },
+	 *    3: { xs: 24, sm: 12, md: 12, lg: 8, xl: 8, xxl: 8 },
+	 *    4: { xs: 24, sm: 12, md: 12, lg: 6, xl: 6, xxl: 6 },
+	 *  };
+	 * ```
+	 */
+	column?: 1 | 2 | 3 | 4;
+	/**
+	 * 强制定义一行显示几列，不考虑响应式
+	 * ```
+	 * 1. 优先级大于column
+	 * 2. 建议优先使用column配置
+	 * ```
+	 */
+	forceColumn?: 1 | 2 | 3 | 4;
+	/**
+	 * Form显示宽度，可数值、可百分比；在小屏幕尺寸（xs、sm）上无效
+	 */
+	width?: number | string;
+	/** 网格间距 */
+	gridGutter?: BoxRowProps["gutter"];
+	children: ReactNode;
+	/**
+	 * 是否为纯净模式，对EasyForm的子节点不做任何包装处理
+	 */
+	isPure?: boolean;
+	/**
+	 * true: 不使用Antd Form包裹，可在Form、EasyForm、FormWrapper内部使用
+	 */
+	nonuseFormWrapper?: boolean;
+};
+/**
+ * 简单Form布局，可自定义网格布局
+ * ```
+ * 1. demo：https://fex.qa.tcshuke.com/docs/admin/main/form/grid
+ * 2. EasyForm的children列表会进行网格化布局，可通过设置 isPure = true设置纯净模式（对EasyForm的子节点不做任何包装处理）
+ * 3. EasyForm可嵌套使用，嵌套内部的<EasyForm />节点Form相关属性失效，例如属性form、initialValues等都失效
+ *  <EasyForm form={form}>
+ *    ....
+ *    <EasyForm>...</EasyForm>
+ *    ....
+ *    <EasyForm>...</EasyForm>
+ *    ....
+ *  </EasyForm>
+ * 4. 布局网格以当前组件的宽度来计算的，不是屏幕宽度
+ * 5. EasyForm 子节点包含 hidden = true 会被忽略
+ * 6. 通过 column 可定义一行显示几列FormItem
+ * 7. 通过 labelItemVertical 可定义 formitem 竖直布局
+ * 8. 通过 formItemGap 可定义 formItem竖直方向间隙
+ * 9. 通过 forceColumn 可强制定义一行显示几列，不考虑响应式
+ * 10. 通过 labelWidth 可控制Form内部所有label的宽度（可实现整齐效果）
+ * 11. 自定义栅格占位格数，见下方`例如`
+
+ * 例如
+ * <EasyForm column={3}>
+ *	 <FormItemWrapper name="field1" label="条件1">
+ *	   <Input placeholder="请输入" allowClear={true} />
+ *	 </FormItemWrapper>
+ *	 <!-- ！！自定义栅格占位格数第一种方式：可通过使用 BoxGrid.Col 包裹元素来自定义网格占比 -->
+ *	 <BoxGrid.Col span={24}>
+ *	   <FormItemWrapper name="field5" label="条件5">
+ *	 	<Input placeholder="请输入" allowClear={true} />
+ *	   </FormItemWrapper>
+ *	 </BoxGrid.Col>
+ *	 <!-- ！！自定义栅格占位格数第二种方式：如果为FormItemWrapper组件，可设置span属性 -->
+ *	 <FormItemWrapper name="field6" label="条件6" span={24}>
+ *	   <Input placeholder="请输入" allowClear={true} />
+ *	 </FormItemWrapper>
+ *	 <FormItemWrapper noStyle span={24}>
+ *	   <Button>按钮</Buttone>
+ *	 </FormItemWrapper>
+ * </EasyForm>
+ * ```
+ */
+export declare const EasyForm: (props: EasyFormProps) => import("react/jsx-runtime").JSX.Element;
+export type EditableCardDataIndex = string | string[];
+export interface EditableCardOperation {
+	index: number;
+	add: (defaultValue: TPlainObject, insertIndex?: number) => void;
+	remove: (index: number) => void;
+	/** 同一级内移动 */
+	move: (fromIndex: number, toIndex: number) => void;
+	/** 是否可编辑 */
+	editable: boolean;
+	/**
+	 * 设置当前卡片指定字段值
+	 */
+	setCurrentRowField: (dataIndexConfigs: {
+		name: EditableCardDataIndex;
+		value?: TAny;
+	}[]) => void;
+	/** 获取当前卡片表单数据 */
+	getCurrentRowData: () => TPlainObject;
+	/**
+	 * 当前卡片表单 name
+	 * ```
+	 * 值为 field.name
+	 * ```
+	 */
+	rowFormItemName: string | number;
+	/**
+	 * 当前卡片表单完整 name
+	 * ```
+	 * 例如：['dataList', 0]
+	 * ```
+	 */
+	rowFormItemCompleteName: Array<string | number>;
+	/** 当前卡片表单验证，需要自行指定nameList（dataIndex数组） */
+	validateRowFields: (nameList: EditableCardDataIndex[]) => Promise<void>;
+	forceUpdate: () => void;
+}
+/** 卡片内字段配置 */
+export type EditableCardColumnItem = {
+	/**
+	 * 字段key值
+	 * ```
+	 * 例如：
+	 * dataIndex： 'abc'
+	 * dataIndex： ['abc', 'xyz']
+	 * ```
+	 */
+	dataIndex: EditableCardDataIndex;
+	/** 是否可编辑 */
+	editable: boolean | ((record: TPlainObject, index: number) => boolean);
+	/**
+	 * 布局占用网格数目（最大数值24）
+	 * ```
+	 * 1. 一行总共等分24份
+	 * ```
+	 */
+	gridNumber?: number;
+	/** 标题 */
+	title?: ReactElement | string;
+	/**
+	 * Form.Item props
+	 */
+	formItemProps?: Omit<FormItemWrapperProps, "children" | "name"> | ((operation: EditableCardOperation) => Omit<FormItemWrapperProps, "children" | "name">);
+	/**
+	 * 通过 operation.editable 来判断渲染结构，其中render返回的根节点会作为 Form.Item 的children
+	 * ```
+	 *  例如
+	 *  render: (operation) => {
+	 *    if (operation.editable) {
+	 *      return <Input placeholder="请输入" />;
+	 *    }
+	 *    return <Tag>{value}</Tag>;
+	 *  }
+	 *
+	 *  如果需要额外布局，可通过 formItemProps.wrapper 实现
+	 *  formItemProps: (operation) => {
+	 *    return {
+	 *      wrapper: (children) => {
+	 *        return (
+	 *          <FlexLayout fullIndex={[0]} direction="horizontal" gap={10}>
+	 *            <div>{children}</div>
+	 *            <div>额外布局</div>
+	 *          </FlexLayout>
+	 *        );
+	 *      },
+	 *    };
+	 *  },
+	 *  render: (operation) => {
+	 *    if (operation.editable) {
+	 *      return <Input placeholder="请输入" />;
+	 *    }
+	 *    return <Tag>{value}</Tag>;
+	 *  }
+	 * ```
+	 */
+	render?: (operation: EditableCardOperation) => ReactElement;
+	/**
+	 * 会在 title 之后展示一个 icon
+	 */
+	tips?: string;
+	/** 为表格header中的字段添加必填标识，如果未配置 formItemProps.rules，内部会新增一条required rule  */
+	required?: boolean;
+	/**
+	 * 隐藏域设置
+	 * ```
+	 * 如果是动态隐藏，并且在逻辑切换后无效果，可尝试执行 render.operation.forceUpdate()
+	 * ```
+	 */
+	hidden?: (record: TPlainObject, index: number) => boolean;
+};
+export type EditableCardProps = {
+	className?: string;
+	style?: React.CSSProperties;
+	/** 卡片内字段配置 */
+	columns: EditableCardColumnItem[];
+	/**
+	 * 当前Edittable处在formList内部时（必填），完整formItem的name
+	 * ```
+	 * 例如 处在formList内部
+	 * 1. formListName=[0,dataList]
+	 * 2. formListCompleteName=[xxxList, 0, dataList]
+	 * ```
+	 */
+	formListCompleteName?: Array<string | number>;
+	/** Form.List name */
+	formListName: Array<string | number> | string;
+	/**
+	 * Form.List rules
+	 * ```
+	 rules={[
+		{
+		  validator: async (_, names) => {
+			if (!names || names.length < 2) {
+			  return Promise.reject(new Error('At least 2 passengers'));
+			}
+		  },
+		},
+	  ]}
+	 * ```
+	 */
+	rules?: FormListProps["rules"];
+	/**`默认新增按钮`新增行默认值，hiddenFooterBtn != true 有效 */
+	addRowDefaultValues?: () => TPlainObject;
+	/** 隐藏底部`新增`按钮 */
+	hiddenFooterBtn?: boolean;
+	/** 顶部区域渲染 */
+	contentBeforeRender?: (formListOperation: FormListOperation, nextRowIndex: number) => ReactElement | null;
+	/** 底部区域渲染 */
+	contentAfterRender?: (formListOperation: FormListOperation, nextRowIndex: number) => ReactElement | null;
+	/** 设置默认卡片名称，设置 onCustomWrapper 后失效 */
+	onCustomGroupName?: (index: number) => string | ReactElement;
+	/** 自定义卡片包裹，同时可自定义删除按钮、新增按钮 */
+	onCustomWrapper?: (children: ReactElement, extraData: {
+		operation: FormListOperation;
+		fields: FormListFieldData[];
+		fieldItem: FormListFieldData;
+		index: number;
+		required?: boolean;
+		key: string;
+	}) => ReactElement;
+	/** 设置必填，但只有一条数据时，隐藏默认删除按钮 */
+	required?: boolean;
+	/** 默认卡片样式 */
+	cardClassName?: string;
+	/** 默认卡片样式 */
+	cardStyle?: CSSProperties;
+	/**
+	 * 每个卡片内容都使用了 EasyForm 包裹，此处可设置 EasyFormProps
+	 * ```
+	 * 可使用 EasyForm 中 FormItem布局
+	 * ```
+	 */
+	cardEasyFormProps?: Omit<EasyFormProps, "nonuseFormWrapper" | "isPure" | "children">;
+	/**
+	 * 默认卡片右侧布局，设置 onCustomWrapper 后失效
+	 * ```
+	 * 1. 通过before 、after自定义删除按钮左右布局
+	 * cardExtraRender={(extraData)=>{
+	 *   return {
+	 *      before: [<div>1</div>, <div>2</div>],
+	 *      after: [<div>3</div>, <div>4</div>],
+	 *    }
+	 *  }}
+	 * 2. 返回ReactElement，可自定义右侧布局
+	 * cardExtraRender={(extraData)=>{
+	 *   return <div>111</div>
+	 *  }}
+	 * ```
+	 */
+	cardExtraRender?: (extraData: {
+		operation: FormListOperation;
+		fields: FormListFieldData[];
+		fieldItem: FormListFieldData;
+		index: number;
+		required?: boolean;
+		key: string;
+	}) => {
+		before?: ReactElement[];
+		after?: ReactElement[];
+	} | ReactElement;
+};
+export type DragEditableCardProps = Omit<EditableCardProps, "onCustomWrapper"> & {
+	/**
+	 * 拖拽图标自定义，默认使用 DragOutlined 图标
+	 */
+	dragIcon?: ReactElement;
+	/** 禁用拖拽 */
+	disabledDrag?: boolean;
+	/**
+	 * 表格数据唯一值字段Key
+	 * ```
+	 * ```
+	 */
+	uidFieldKey: string;
+	/**
+	 * 拖拽结束事件
+	 * ```
+	 * dataSource: 拖拽完成后的数据源
+	 * dragData
+	 * 1. activeId 拖拽ID
+	 * 2. activeIndex 拖拽起始表格数组索引值
+	 * 3. overIndex 拖拽结束表格数组索引值
+	 * ```
+	 */
+	onDragChange?: (dataSource: TPlainObject[], dragData: {
+		activeId: string | number;
+		overId?: string | number;
+		activeIndex: number;
+		overIndex: number;
+	}) => void;
+	/**
+	 * 拖拽触发位置，默认在左侧
+	 */
+	dragTriggerPosition?: "left" | "right";
+};
+/**
+ * 可拖拽编辑卡片
+ * ```
+ * 1. 卡片数组必须有唯一值字段，通过参数 uidFieldKey 告诉组件
+ * ```
+ */
+export declare const DragEditableCard: (props: DragEditableCardProps) => import("react/jsx-runtime").JSX.Element;
 export type TipsWrapperProps = {
 	gap?: number;
 	className?: string;
@@ -2313,102 +2655,6 @@ export declare const dynamicNode: {
 	};
 	remove: (elementId?: string) => void;
 };
-export type FormWrapperProps<Values = any> = TFormLayoutPreClassNameProps & FormProps<Values> & {
-	children: ReactNode;
-};
-/**
- * Form 包装组件，添加对formItem的布局控制
- * ```
- * 1. 内置布局样式使用 preDefinedClassName.form
- * ```
- */
-export declare const FormWrapper: (props: FormWrapperProps) => import("react/jsx-runtime").JSX.Element;
-export type EasyFormProps = Omit<FormWrapperProps, "children"> & {
-	/**
-	 * 定义一行显示几列（当外层宽度尺寸大于 992px（lg） 时，一行显示几列）, 默认值：3
-	 * ```
-	 * 1. 当外层宽度尺寸小于992px（lg），为xs、sm、md情况下不受column值影响（column=1除外）
-	 * 2. 宽度尺寸定义
-	 *    xs: 宽度 < 576px
-	 *    sm: 宽度 ≥ 576px
-	 *    md: 宽度 ≥ 768px
-	 *    lg: 宽度 ≥ 992px
-	 *    xl: 宽度 ≥ 1200px
-	 *    xxl: 宽度 ≥ 1600px
-	 * 3. 列数尺寸定义
-	 *  {
-	 *    1: { xs: 24, sm: 24, md: 24, lg: 24, xl: 24, xxl: 24 },
-	 *    2: { xs: 24, sm: 12, md: 12, lg: 12, xl: 12, xxl: 12 },
-	 *    3: { xs: 24, sm: 12, md: 12, lg: 8, xl: 8, xxl: 8 },
-	 *    4: { xs: 24, sm: 12, md: 12, lg: 6, xl: 6, xxl: 6 },
-	 *  };
-	 * ```
-	 */
-	column?: 1 | 2 | 3 | 4;
-	/**
-	 * 强制定义一行显示几列，不考虑响应式
-	 * ```
-	 * 1. 优先级大于column
-	 * 2. 建议优先使用column配置
-	 * ```
-	 */
-	forceColumn?: 1 | 2 | 3 | 4;
-	/**
-	 * Form显示宽度，可数值、可百分比；在小屏幕尺寸（xs、sm）上无效
-	 */
-	width?: number | string;
-	/** 网格间距 */
-	gridGutter?: BoxRowProps["gutter"];
-	children: ReactNode;
-	/**
-	 * 是否为纯净模式，对EasyForm的子节点不做任何包装处理
-	 */
-	isPure?: boolean;
-};
-/**
- * 简单Form布局，可自定义网格布局
- * ```
- * 1. demo：https://fex.qa.tcshuke.com/docs/admin/main/form/grid
- * 2. EasyForm的children列表会进行网格化布局，可通过设置 isPure = true设置纯净模式（对EasyForm的子节点不做任何包装处理）
- * 3. EasyForm可嵌套使用，嵌套内部的<EasyForm />节点Form相关属性失效，例如属性form、initialValues等都失效
- *  <EasyForm form={form}>
- *    ....
- *    <EasyForm>...</EasyForm>
- *    ....
- *    <EasyForm>...</EasyForm>
- *    ....
- *  </EasyForm>
- * 4. 布局网格以当前组件的宽度来计算的，不是屏幕宽度
- * 5. EasyForm 子节点包含 hidden = true 会被忽略
- * 6. 通过 column 可定义一行显示几列FormItem
- * 7. 通过 labelItemVertical 可定义 formitem 竖直布局
- * 8. 通过 formItemGap 可定义 formItem竖直方向间隙
- * 9. 通过 forceColumn 可强制定义一行显示几列，不考虑响应式
- * 10. 通过 labelWidth 可控制Form内部所有label的宽度（可实现整齐效果）
- * 11. 自定义栅格占位格数，见下方`例如`
-
- * 例如
- * <EasyForm column={3}>
- *	 <FormItemWrapper name="field1" label="条件1">
- *	   <Input placeholder="请输入" allowClear={true} />
- *	 </FormItemWrapper>
- *	 <!-- ！！自定义栅格占位格数第一种方式：可通过使用 BoxGrid.Col 包裹元素来自定义网格占比 -->
- *	 <BoxGrid.Col span={24}>
- *	   <FormItemWrapper name="field5" label="条件5">
- *	 	<Input placeholder="请输入" allowClear={true} />
- *	   </FormItemWrapper>
- *	 </BoxGrid.Col>
- *	 <!-- ！！自定义栅格占位格数第二种方式：如果为FormItemWrapper组件，可设置span属性 -->
- *	 <FormItemWrapper name="field6" label="条件6" span={24}>
- *	   <Input placeholder="请输入" allowClear={true} />
- *	 </FormItemWrapper>
- *	 <FormItemWrapper noStyle span={24}>
- *	   <Button>按钮</Buttone>
- *	 </FormItemWrapper>
- * </EasyForm>
- * ```
- */
-export declare const EasyForm: (props: EasyFormProps) => import("react/jsx-runtime").JSX.Element;
 export type TEasyTableTableColumn<T> = ColumnsType<T>[0] & {
 	/**
 	 * @description 请使用 tipsWrapperProps 属性配置
@@ -2846,6 +3092,20 @@ export declare const EasyTable: import("react").ForwardRefExoticComponent<EasyTa
 	/** 设置启用初始化请求 */
 	setEnabledInitRequest: (cacheKey: string) => void;
 };
+/**
+ * 使用FormList实现可编辑卡片
+ * ```
+ * 1. EditableCard有两种模式，正常 & 禁用
+ * 2. 必须在外部包裹Form组件
+ * 3. 行内需要联动逻辑可使用 column.render.operation.setCurrentRowField 方法
+ * 4. 可使用DragEditableCard组件实现拖拽排序
+ * 5. 设置EditableCard disabled后，通过 LabelValueRender 组件展示数据，可通过 disabledRenderProps 配置布局
+ *
+ * demo
+ * https://fex.qa.tcshuke.com/docs/admin/main/form/grid
+ * ```
+ */
+export declare const EditableCard: (props: EditableCardProps) => import("react/jsx-runtime").JSX.Element;
 export interface EditableFieldProps {
 	className?: string;
 	style?: CSSProperties;
@@ -3699,6 +3959,10 @@ export type TLabelValueItem = {
 	tips?: string;
 	/** value 点击事件 */
 	onClick?: (e: any) => void;
+	/** 关闭tooltip功能 */
+	hideTip?: boolean;
+	/** value 渲染不使用 TextOverflow 包裹 */
+	valueNoWrapper?: boolean;
 };
 export type LabelValueRenderProps = {
 	className?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flatbiz/antd",
-  "version": "4.5.25",
+  "version": "4.5.26",
   "description": "flat-biz ui components",
   "main": "index.js",
   "typings": "index.d.ts",
@@ -31,7 +31,7 @@
     "@dimjs/model": ">=1.2.3",
     "@dimjs/model-react": ">=1.2.3",
     "@dimjs/utils": ">=1.5.1",
-    "@flatbiz/utils": ">=4.0.21",
+    "@flatbiz/utils": ">=4.0.22",
     "@wove/react": ">=1.2.23",
     "antd": ">=5.11.0",
     "dayjs": ">=1.11.9",
@@ -45,7 +45,7 @@
     "@dimjs/model": "^1.2.3",
     "@dimjs/model-react": "^1.2.3",
     "@dimjs/utils": "^1.5.1",
-    "@flatbiz/utils": "^4.0.21",
+    "@flatbiz/utils": "^4.0.22",
     "@wove/react": "^1.2.23",
     "antd": "5.11.0",
     "dayjs": "1.11.9",