@flatbiz/antd 4.5.25 → 5.0.0

package/dist/drag-editable-table-pro/index.d.ts

@@ -0,0 +1,244 @@
+import { TAny, TPlainObject } from '@flatbiz/utils';
+import { FormItemProps, FormListOperation, PopoverProps, TableProps, TooltipProps } from 'antd';
+import { FormListProps } from 'antd/es/form';
+import { ColumnsType } from 'antd/es/table';
+import { CSSProperties, ReactElement, ReactNode } from 'react';
+
+export type TFormItemLayoutPreClassNameProps = {
+	/**
+	 * label宽度，Form内部所有FormItem label都生效
+	 * ```
+	 * 1. 可设置数值
+	 * 2. 可设置`auto`自适应
+	 * ```
+	 */
+	labelWidth?: "auto" | "70" | "80" | "90" | "100" | "110" | "120" | "130" | "140" | "150" | "160" | "170" | "180" | "190" | "200";
+	/** labelItem 竖直布局 */
+	labelItemVertical?: boolean;
+	/** label 对齐方式 */
+	labelAlign?: "left" | "right";
+	/**
+	 * className 中可能会包含 preDefinedClassName.formItem.xx，优先级大于 labelWidth、labelItemVertical、labelAlign
+	 */
+	className?: string;
+};
+export type FormItemWrapperProps = FormItemProps & TFormItemLayoutPreClassNameProps & {
+	wrapper?: (children: ReactNode) => ReactElement;
+	/** 设置wrapper后，before、after失效 */
+	before?: ReactNode;
+	/** 设置wrapper后，before、after失效 */
+	after?: ReactNode;
+	/** value 序列化处理 */
+	inputNormalize?: (value?: TAny) => TAny;
+	/**
+	 * onChange 参数序列化处理
+	 * 如果设置 normalize 属性，outputNormalize将失效
+	 */
+	outputNormalize?: (value?: TAny) => TAny;
+	/** 是否清除 Form.Item  */
+	isClear?: boolean;
+	/**
+	 * 栅格占位格数，最大值：24
+	 * ```
+	 * 1. 当 FormItemWrapper 处在 EasyForm 直接子节点中有效，即FormItemWrapper在EasyForm栅格中的占位格数；
+	 * ```
+	 */
+	span?: number;
+};
+export type TipsWrapperProps = {
+	gap?: number;
+	className?: string;
+	style?: CSSProperties;
+	children?: ReactNode;
+	icon?: ReactElement;
+	/** Icon添加点击事件，设置hoverTips后失效 */
+	onClick?: (event: any) => void;
+	/**
+	 * 提示效果类型
+	 * ```
+	 * 1. popover 气泡卡片，内容通过popoverProps设置
+	 * 2. tooltip 文字提示，内容通过tooltipProps设置
+	 * ```
+	 */
+	tipType?: "popover" | "tooltip";
+	popoverProps?: PopoverProps;
+	tooltipProps?: TooltipProps;
+	trigger?: "icon" | "all";
+};
+export type EditableTableProDataIndex = string | readonly (string | number)[];
+export interface EditableTableProOperation {
+	add: (defaultValue: TPlainObject, insertIndex?: number) => void;
+	remove: (index: number) => void;
+	/** 同一级内移动 */
+	move: (fromIndex: number, toIndex: number) => void;
+	/** 是否可编辑 */
+	editable: boolean;
+	/** 当前行数据层级 */
+	level: number;
+	/** 设置当前行指定字段值 */
+	setCurrentRowTargetField: (dataIndexConfigs: {
+		name: EditableTableProDataIndex;
+		value?: TAny;
+	}[]) => void;
+	/** 设置当前行 children 数据 */
+	setCurrentRowChildrenValue: (value?: TPlainObject[]) => void;
+	/** 当前行父级数据 */
+	parentItem: TPlainObject | null;
+	/** 当前行表单 name */
+	tableRowFormItemName: Array<string | number>;
+	/** 当前行表单完整 name */
+	tableRowFormItemCompleteName: Array<string | number>;
+	/** 当前行表单验证，需要自行指定nameList（dataIndex数组） */
+	validateRowFields: (nameList: EditableTableProDataIndex[]) => Promise<void>;
+}
+export type EditableTableProColumnItem = Omit<ColumnsType[0], "render" | "title" | "dataIndex"> & {
+	title?: ReactElement | string;
+	dataIndex?: EditableTableProDataIndex;
+	/** Form.Item props */
+	formItemProps?: Omit<FormItemWrapperProps, "children" | "name"> | ((value: TAny, record: TPlainObject, index: number, operation: EditableTableProOperation) => Omit<FormItemWrapperProps, "children" | "name">);
+	/**
+	 * 通过 operation.editable 来判断渲染结构，其中render返回的根节点会作为 Form.Item 的children
+	 * ```
+	 *  例如
+	 *  render: (_value, _record, _index, operation) => {
+	 *    if (operation.editable) {
+	 *      return <Input placeholder="请输入" />;
+	 *    }
+	 *    return <Tag>{value}</Tag>;
+	 *  }
+	 *
+	 *  如果需要额外布局，可通过 formItemProps.wrapper 实现
+	 *  formItemProps: (_value, _record, _index, operation) => {
+	 *    return {
+	 *      wrapper: (children) => {
+	 *        return (
+	 *          <FlexLayout fullIndex={[0]} direction="horizontal" gap={10}>
+	 *            <div>{children}</div>
+	 *            <div>额外布局</div>
+	 *          </FlexLayout>
+	 *        );
+	 *      },
+	 *    };
+	 *  },
+	 *  render: (_value, _record, _index, operation) => {
+	 *    if (operation.editable) {
+	 *      return <Input placeholder="请输入" />;
+	 *    }
+	 *    return <Tag>{value}</Tag>;
+	 *  }
+	 * ```
+	 */
+	render?: (value: TAny, record: TPlainObject, index: number, operation: EditableTableProOperation) => ReactElement;
+	/** 是否可编辑 */
+	editable: boolean | ((record: TPlainObject, index: number) => boolean);
+	/**
+	 * 会在 title 之后展示一个 icon
+	 * ```
+	 * 1. title为string类型有效
+	 * 2. 可为icon添加提示效果
+	 * 3. 可为icon添加点击事件
+	 * ```
+	 */
+	tipsWrapperProps?: string | TipsWrapperProps;
+	/** 为表格header中的字段添加必填标识，如果未配置 formItemProps.rules，内部会新增一条required rule  */
+	required?: boolean;
+};
+export type EditableTableProProps = {
+	columns: EditableTableProColumnItem[];
+	/**
+	 * 当前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;
+	/** 唯一值字段Key */
+	uidFieldKey: string;
+	/** 指定树形结构的列名，默认值：children */
+	childrenColumnName?: string;
+	/** 表格组件配置 */
+	tableProps?: Omit<TableProps<TPlainObject>, "dataSource" | "columns" | "rowKey"> & {
+		cellVerticalAlign?: "baseline" | "middle" | "top" | "bottom";
+	};
+	/**
+	 * Form.List rules
+	 * ```
+	 rules={[
+		{
+		  validator: async (_, names) => {
+			if (!names || names.length < 2) {
+			  return Promise.reject(new Error('At least 2 passengers'));
+			}
+		  },
+		},
+	  ]}
+	 * ```
+	 */
+	rules?: FormListProps["rules"];
+	className?: string;
+	style?: CSSProperties;
+	/**`默认新增按钮`新增行默认值，hiddenFooterBtn != true 有效 */
+	addRowDefaultValues?: () => TPlainObject;
+	/** 隐藏底部`新增`按钮 */
+	hiddenFooterBtn?: boolean;
+	/** 表格顶部区域渲染 */
+	tableBeforeAreaRender?: (formListOperation: FormListOperation, nextRowIndex: number) => ReactElement | null;
+	/** 表格底部区域渲染 */
+	tableAfterAreaRender?: (formListOperation: FormListOperation, nextRowIndex: number) => ReactElement | null;
+	/** 展开的行key，一般用于初始化，重新tableProps.expandable.expandedRowKeys后失效 */
+	expandedRowKeys?: string[];
+	/**
+	 * 展开图标布局，默认：layout1
+	 * ```
+	 * 1. 可编辑表格第一项为可编辑状态时，选 layout1
+	 * 2. 可编辑表格第一项为非可编辑状态时，选 layout2
+	 * ```
+	 */
+	expandedIconLayout?: "layout1" | "layout2";
+};
+export type DragEditableTableProProps = EditableTableProProps & {
+	/**
+	 * 拖拽图标自定义，默认使用 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;
+};
+/**
+ * 可拖拽编辑表格
+ * ```
+ * 1. 表格数据必须有唯一值字段，通过参数 uidFieldKey 告诉组件
+ * 2. Table 参数 components.body.row 被组件内部使用
+ * 3. 不存在多级的情况下，可使用DragEditableTablePro组件实现拖拽排序
+ * 4. 存在多级的情况下，通过上移、下移操作按钮，调用 column.render.operation.move 方法实现同一级内移动
+ * ```
+ */
+export declare const DragEditableTablePro: (props: DragEditableTableProProps) => import("react").JSX.Element;
+
+export {};

package/dist/drag-editable-table-pro/index.js

@@ -0,0 +1,53 @@
+/* eslint-disable */
+import './../fba-hooks/index.css';
+import './../pre-defined-class-name/index.css';
+import './index.css';
+/*! @flatjs/forge MIT @flatbiz/antd */
+
+export { D as DragEditableTablePro } from '../drag-BOT05TxF.js';
+import '../_rollupPluginBabelHelpers-BYm17lo8.js';
+import 'antd';
+import '@dnd-kit/core';
+import '@dnd-kit/modifiers';
+import '@dnd-kit/sortable';
+import '../editable-table-pro-B40tH9it.js';
+import '@ant-design/icons/es/icons/PlusOutlined.js';
+import '@ant-design/icons/es/icons/CloseCircleFilled.js';
+import '@dimjs/utils/class-names/class-names';
+import '@wove/react/hooks';
+import '@dimjs/lang/is-array';
+import 'react';
+import '@dimjs/model';
+import '@flatbiz/utils';
+import '../button-wrapper-l9FUsrWl.js';
+import '@ant-design/icons/es/icons/LoadingOutlined.js';
+import '@dimjs/lang/is-promise';
+import '../config-provider-wrapper-DDa_64Ce.js';
+import 'antd/es/locale/en_US.js';
+import 'antd/es/locale/zh_CN.js';
+import 'dayjs';
+import 'dayjs/plugin/advancedFormat.js';
+import 'dayjs/plugin/customParseFormat.js';
+import 'dayjs/plugin/localeData.js';
+import 'dayjs/plugin/utc.js';
+import 'dayjs/plugin/weekday.js';
+import 'dayjs/plugin/weekOfYear.js';
+import 'dayjs/plugin/weekYear.js';
+import '@dimjs/utils/extend/extend';
+import '../fba-hooks/index.js';
+import '../use-responsive-point-Bp3D3lZT.js';
+import 'dayjs/locale/en.js';
+import 'dayjs/locale/zh-cn.js';
+import 'react/jsx-runtime';
+import '../fba-utils-Dfbczn1S.js';
+import '../form-item-wrapper-CwXh7JxL.js';
+import '../pre-defined-class-name/index.js';
+import '../symbol-CX0y_DJ4.js';
+import '../tips-wrapper-Bf9nfZq3.js';
+import '@ant-design/icons/es/icons/QuestionCircleOutlined.js';
+import '@wove/react/create-ctx';
+import '@ant-design/icons/es/icons/DragOutlined.js';
+import '@dnd-kit/utilities';
+import '../icon-wrapper-CR3akisG.js';
+import '@dimjs/lang/is-undefined';
+//# sourceMappingURL=index.js.map

package/dist/drag-editable-table-pro/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/drag-form-list/index.css

@@ -0,0 +1 @@
+.block-layout{background-color:var(--block-bg-color)}.light-theme .block-layout{color:rgba(0,0,0,.88)}.dark-theme .block-layout{color:hsla(0,0%,100%,.85)}.bw-center-loading{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.ant-btn.button-remove-gap{height:auto;line-height:normal;margin:0;min-height:auto;padding:0}.drag-form-list-item-grap *{opacity:.7!important}.drag-form-list-item-disabled .drag-form-list-item-trigger{cursor:no-drop;opacity:.6}.drag-form-list-overlay{border:none;border-radius:6px;box-shadow:0 0 12px 4px rgba(34,33,81,.1)}.drag-form-list-overlay .ant-collapse-item{border-bottom:none}.drag-form-list-overlay .drag-form-list-item-trigger{background-color:transparent}.drag-form-list-icon{display:inline-block;width:30px}.drag-form-list-item{align-items:center;background-color:var(--block-bg-color);display:flex;padding:8px 0}.drag-form-list .drag-form-list-item-content{flex:1}.drag-form-list .drag-form-list-item-content .ant-form-item.form-item-group-horizontal-union,.drag-form-list .drag-form-list-item-content .ant-form-item.form-item-group-horizontal-union .ant-form-item{margin-bottom:0}.drag-form-list-item-trigger{align-items:center;border-radius:6px;cursor:move;display:inline-flex;font-size:16px;height:30px;justify-content:center;margin-right:5px;width:30px}.drag-form-list-item-trigger:hover{background-color:rgba(0,0,0,.1)}.text-symbol-wrapper{display:inline-block;position:relative}.tsw-symbol{font-size:14px;line-height:normal;position:absolute;top:50%}.tsw-symbol-before{transform:translate(-100%,-50%)}.tsw-symbol-after{transform:translate(100%,-50%)}.tsw-required .tsw-symbol{color:#ff4d4f}

package/dist/drag-form-list/index.d.ts

@@ -0,0 +1,145 @@
+import { TPlainObject } from '@flatbiz/utils';
+import { FormListFieldData, FormListOperation } from 'antd';
+import { FormListProps } from 'antd/es/form';
+import { CSSProperties, ReactElement } from 'react';
+
+export type FormItemHorizontalUnionProps = {
+	className?: string;
+	style?: CSSProperties;
+	label?: string | ReactElement;
+	/** 水平布局元素 */
+	groupConfigList: {
+		hidden?: boolean;
+		before?: ReactElement | string;
+		/**
+		 * 设置宽度
+		 * ```
+		 * 1. 自适应可设置：auto
+		 * 2. 可设置具体数值
+		 * 3. 不设置会在铺满flex剩余空间
+		 * 4. 多个未设置会等分铺满剩余空间
+		 * ```
+		 */
+		width?: number | string;
+		mainItem: ReactElement;
+		after?: ReactElement | string;
+	}[];
+	/** 水平布局原始之间的间距 */
+	gap?: number;
+	flexLayoutStyle?: CSSProperties;
+	flexLayoutClassName?: string;
+	hidden?: boolean;
+	required?: boolean;
+	colon?: boolean;
+};
+export type DragFormListContentProps = {
+	/** Form.List item fieldData */
+	formListFieldData: FormListFieldData;
+	/**
+	 * 当前阶段 完整 formItem name
+	 * ```
+	 * 1. 获取当前输入项Item数据
+	 *    form.getFieldValue(props.formStageCompleteName);
+	 * 2. 获取当前输入项Item指定字段数据
+	 *    form.getFieldValue([...props.formStageCompleteName, 'key']);
+	 * ```
+	 */
+	formStageCompleteName: (string | number)[];
+	/**
+	 * formList上一级 formItem完整name
+	 */
+	prevCompleteName: (string | number)[];
+	/** Form.List 操作项 */
+	operation: FormListOperation;
+	/** 索引 */
+	index: number;
+	/** 获取当前FormList 内部 Form.Item name */
+	getInsideFormItemName: (key: string | string[]) => Array<string | number>;
+	/** 获取当前 FormList Item 数据 */
+	getInsideFormItemData: () => TPlainObject;
+	/** 唯一值字段Key */
+	uidKey: string;
+};
+export type DragFormListProps = {
+	className?: string;
+	style?: CSSProperties;
+	itemStyle?: CSSProperties;
+	/** formList item 数据中的唯一值，默认值：uid */
+	uidFieldName?: string;
+	/** formList name */
+	name: string | number | (string | number)[];
+	/**
+	 * formList上一级 formItem完整name
+	 * ```
+	 * 1. 如果没有传 []
+	 * 2. FormList内部通过 Form.useWatch 取值需要完整 name
+	 * ```
+	 */
+	prevCompleteName: (string | number)[];
+	/** 拖拽回调 */
+	onDropChange?: (items: TPlainObject[]) => void;
+	/** 设置拖拽图标 */
+	dragIcon?: ReactElement;
+	/** 禁用拖拽，拖拽图标隐藏 */
+	dragDisabled?: boolean;
+	/** 设置item禁止拖拽   */
+	getItemDragDisabled?: (uid: string | number, index: number) => boolean;
+	/** 新增行默认值，自定义onTableAfterRender后失效 */
+	getAddRowDefaultValues?: () => TPlainObject;
+	/** 隐藏新增行按钮 */
+	hiddenAddRowButton?: boolean;
+	/** 自定义新增行按钮，getAddRowDefaultValues配置失效 */
+	onCustomAddRowButton?: (operation: FormListOperation) => ReactElement;
+	/** formListItem 内容 */
+	children: (data: DragFormListContentProps) => ReactElement;
+	/** 隐藏数据为空渲染 */
+	hiddenEmptyRender?: boolean;
+	/** formList内部渲染包装，多用于FormListWrapper嵌套布局 */
+	formListChildrenWrapper?: (props: {
+		children: ReactElement;
+	}) => ReactElement;
+	/**
+	 * Form.List rules
+	 * ```
+	 rules={[
+		{
+		  validator: async (_, names) => {
+			if (!names || names.length < 2) {
+			  return Promise.reject(new Error('At least 2 passengers'));
+			}
+		  },
+		},
+	  ]}
+	 * ```
+	 */
+	rules?: FormListProps["rules"];
+	/**
+	 * 设置FormList字段标题&必填标志
+	 * ```
+	 * demo: http://dev.flatjs.com:6007/pages/flat/oss-demo/main/form/list?env=me
+	 * 1. 会根据数组顺序进行渲染
+	 * 2. 未设置width的元素，参与等分剩余宽度
+	 * 3. 设置width 要与FormList children中的item宽度相同，不然内容与标题无法对齐
+	 * ```
+	 */
+	formListItemTitleList?: {
+		title: string;
+		required?: boolean;
+		width?: number;
+	}[];
+	/** formListItemTitle HorizontalUnionProps 配置 */
+	formListItemTitleHorizontalUnionProps?: Omit<FormItemHorizontalUnionProps, "groupConfigList">;
+	/** FormList Item 之间间隙，默认值：16 */
+	itemGap?: number;
+};
+/**
+ * 可拖拽FormList
+ * ```
+ * Demo: https://fex.qa.tcshuke.com/docs/admin/main/form/list
+ * 1. FormList数组中必须要有唯一值字段，默认值字段名称uid，可通过uidFieldName自定义设置
+ * 2. 通过 itemGap 设置FormList Item 之间间隙
+ * ```
+ */
+export declare const DragFormList: (props: DragFormListProps) => import("react").JSX.Element;
+
+export {};

package/dist/drag-form-list/index.js

@@ -0,0 +1,46 @@
+/* eslint-disable */
+import './../fba-hooks/index.css';
+import './../flex-layout/index.css';
+import './../form-item-group/index.css';
+import './index.css';
+/*! @flatjs/forge MIT @flatbiz/antd */
+
+export { D as DragFormList } from '../drag-form-list-BGqbBKJM.js';
+import '../_rollupPluginBabelHelpers-BYm17lo8.js';
+import '@dimjs/utils/class-names/class-names';
+import '@wove/react/hooks';
+import 'react';
+import 'antd';
+import '@dnd-kit/core';
+import '@dnd-kit/sortable';
+import '@flatbiz/utils';
+import '../layout-OPf8eBBY.js';
+import 'react/jsx-runtime';
+import '../button-wrapper-l9FUsrWl.js';
+import '@ant-design/icons/es/icons/LoadingOutlined.js';
+import '@dimjs/lang/is-promise';
+import '../config-provider-wrapper-DDa_64Ce.js';
+import 'antd/es/locale/en_US.js';
+import 'antd/es/locale/zh_CN.js';
+import 'dayjs';
+import 'dayjs/plugin/advancedFormat.js';
+import 'dayjs/plugin/customParseFormat.js';
+import 'dayjs/plugin/localeData.js';
+import 'dayjs/plugin/utc.js';
+import 'dayjs/plugin/weekday.js';
+import 'dayjs/plugin/weekOfYear.js';
+import 'dayjs/plugin/weekYear.js';
+import '@dimjs/utils/extend/extend';
+import '../fba-hooks/index.js';
+import '../use-responsive-point-Bp3D3lZT.js';
+import 'dayjs/locale/en.js';
+import 'dayjs/locale/zh-cn.js';
+import '../fba-utils-Dfbczn1S.js';
+import '@dimjs/lang/is-array';
+import '@dimjs/model';
+import '../form-item-group/index.js';
+import '../flex-layout-BaDncU_Z.js';
+import '../symbol-CX0y_DJ4.js';
+import '@ant-design/icons/es/icons/DragOutlined.js';
+import '@dnd-kit/utilities';
+//# sourceMappingURL=index.js.map

package/dist/drag-form-list/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}