@flatbiz/antd 2.3.18 → 2.3.21

package/index.d.ts

@@ -5,7 +5,7 @@ import { API, ModelType } from '@dimjs/model';
 import { ButtonProps, DrawerProps, FormItemProps, InputNumberProps, InputProps, ModalProps, RadioGroupProps, SelectProps, SpaceProps, TableProps, TreeProps, TreeSelectProps, UploadProps } from 'antd';
 import { CheckboxGroupProps } from 'antd/lib/checkbox';
 import { PickerDateProps, RangePickerDateProps } from 'antd/lib/date-picker/generatePicker';
-import { FormListFieldData, FormListOperation } from 'antd/lib/form/FormList';
+import { FormListFieldData, FormListOperation, FormListProps } from 'antd/lib/form/FormList';
 import { TextAreaProps } from 'antd/lib/input';
 import { ColumnsType } from 'antd/lib/table';
 import { UploadChangeParam } from 'antd/lib/upload';
@@ -28,7 +28,7 @@ export interface ButtonOperateProps {
 	size?: SpaceProps["size"];
 }
 export declare const ButtonOperate: VFC<ButtonOperateProps>;
-export declare type DatePickerWraperProps = {
+export declare type DatePickerWrapperProps = {
 	value?: string;
 	onChange?: (value?: string) => void;
 } & Omit<PickerDateProps<moment.Moment>, "value" | "onChange">;
@@ -41,8 +41,8 @@ export declare type DatePickerWraperProps = {
  * 4. 其他格式化类型自定义format
  * ```
  */
-export declare const DatePickerWraper: VFC<DatePickerWraperProps>;
-export declare type DateRangePickerWraperProps = {
+export declare const DatePickerWrapper: VFC<DatePickerWrapperProps>;
+export declare type DateRangePickerWrapperProps = {
 	value?: [
 		string,
 		string
@@ -55,13 +55,14 @@ export declare type DateRangePickerWraperProps = {
 /**
  * DatePicker.RangePicker包装组件
  * ```
+ * TODO: 引用DatePicker.RangePicker TS有问题，待解决
  * 1. value类型为 [string, string]
  * 2. onChange返回类型 [string, string]
  * 3. 默认格式化类型 YYYY-MM-DD； 当showTime===true时，默认格式化类型YYYY-MM-DD HH:mm:ss
  * 4. 其他格式化类型自定义format
  * ```
  */
-export declare const DateRangePickerWraper: VFC<DateRangePickerWraperProps>;
+export declare const DateRangePickerWrapper: VFC<DateRangePickerWrapperProps>;
 export interface DrawerStateType {
 	title: string;
 	/**
@@ -80,7 +81,7 @@ export interface DrawerActionsParamType {
 	closeDrawer: void;
 	setDrawerItemData: Record<string, any>;
 }
-export interface DrawerOperationProps {
+export interface DrawerOperationOldProps {
 	loading?: boolean;
 	okText?: string;
 	cancelText?: string;
@@ -90,15 +91,22 @@ export interface DrawerOperationProps {
 	okButtonProps?: Omit<ButtonProps, "onClick" | "loading" | "className">;
 	cancelButtonProps?: Omit<ButtonProps, "onClick" | "loading" | "className">;
 }
-export declare type DrawerFormProps = {
+export declare type DrawerFormOldProps = {
 	className?: string;
 	/**
 	 * 整个drawer页面级的spinning <Page loading />
 	 */
 	pageLoading?: boolean;
-	operationProps?: DrawerOperationProps;
+	operationProps?: DrawerOperationOldProps;
 } & DrawerProps;
-export declare const DrawerWraper: FC<DrawerFormProps>;
+/**
+ * 弹窗机制
+ * ```
+ * 1. 默认 destroyOnClose = true
+ * 2. 默认 forceRender = false
+ * ```
+ */
+export declare const DrawerWraper: FC<DrawerFormOldProps>;
 /**
  * drawer弹窗模型
  * @param key 唯一值必传
@@ -110,68 +118,81 @@ export declare const DrawerWraper: FC<DrawerFormProps>;
  * ```
  */
 export declare const createDrawerWraperModel: (key: string) => API<ModelType<DrawerStateType, DrawerActionsParamType, any>>;
-export declare type FileUploadItem = {
-	fileKey: string;
-	fileName: string;
-};
-export declare type FileUploadProps = {
-	onChange?: (value?: FileUploadItem[]) => void;
-	onUploadError?: (message?: string) => void;
-	value?: FileUploadItem[];
-	onPreview?: (item: FileUploadItem) => void;
-	onUploadChange?: (info: UploadChangeParam<UploadFile>) => void;
+export interface DrawerStateType {
+	title: string;
 	/**
-	 * 属性映射
+	 * 显示drawer
 	 */
-	fieldNames?: {
-		fileKey?: string;
-		fileName?: string;
-	};
-} & Omit<UploadProps, "onChange" | "fileList" | "onPreview">;
+	visible: boolean;
+	/**
+	 * 用来处理form, `更新`的时候的传递当前item列表行的数据, 当`创建`的时候强制设置为 `undefined`
+	 */
+	itemData?: Record<string, any>;
+	operateType: "create" | "update" | "view" | null;
+	pageLoading?: boolean;
+}
+export interface DrawerActionsParamType {
+	openDrawerForm: Pick<DrawerStateType, "title" | "itemData" | "operateType" | "pageLoading">;
+	closeDrawer: void;
+	setDrawerItemData: Record<string, any>;
+}
+export interface DrawerOperationProps {
+	loading?: boolean;
+	okText?: string;
+	cancelText?: string;
+	onOk?: () => void;
+	onCancel?: () => void;
+	hideOkBtn?: boolean;
+	okButtonProps?: Omit<ButtonProps, "onClick" | "loading" | "className">;
+	cancelButtonProps?: Omit<ButtonProps, "onClick" | "loading" | "className">;
+}
+export declare type DrawerFormProps = {
+	className?: string;
+	/**
+	 * 整个drawer页面级的spinning <Page loading />
+	 */
+	pageLoading?: boolean;
+	operationProps?: DrawerOperationProps;
+} & DrawerProps;
 /**
- * 文件上传，结合Form使用最佳
+ * 弹窗机制
  * ```
- * 接口返回结构：
- * formData上传接口必须返回fileKey值
- * {
- *  code: '0000',
- *  data: {
- *    fileKey: '预览文件对应的fileKey'
- *  }
- * }
- * 可通过fieldNames配置接口返回值属性名称映射
+ * 1. 默认 destroyOnClose = true
+ * 2. 默认 forceRender = false
  * ```
+ */
+export declare const DrawerWrapper: FC<DrawerFormProps>;
+/**
+ * drawer弹窗模型
+ * @param key 唯一值必传
+ * @returns
+ *
  * ```
- * 最佳使用方式：
- * <Form.Item name="attachmentList" label="附件">
- *   <FileUpload action={uploadUrl} onPreview={onPreviewFile}>
- *      <Button type="primary">选择文件导入</Button>
- *   </FileUpload>
- * </Form.Item>
+ * 使用方式
+ * const [drawerState, drawerActions] = createDrawerWrapperModel('key值').useStore();
  * ```
- *
  */
-export declare const FileUpload: FC<FileUploadProps>;
-export declare type TPlainObject<T = any> = Record<string, T>;
+export declare const createDrawerWrapperModel: (key: string) => API<ModelType<DrawerStateType, DrawerActionsParamType, any>>;
 export declare type LabelValueItem<T extends string | number = string | number> = {
 	value: T;
 	label: string;
 };
+export declare type TPlainObject<T = any> = Record<string, T>;
 export declare type SelectorServiceConfig = {
 	params?: TPlainObject;
 	requiredParamsKeys?: string[];
-	fieldNames?: {
-		label: string;
-		value: string;
-	};
 	onRequest?: (params?: any) => any;
 	/**
 	 * 响应数据适配器
 	 */
 	onRequestResultAdapter?: (respData: any) => TPlainObject[];
 };
-export declare type SelectorWrapperProps = Omit<SelectProps, "filterOption" | "onSearch" | "loading" | "notFoundContent" | "options"> & {
+export declare type SelectorWrapperProps = Omit<SelectProps, "filterOption" | "onSearch" | "loading" | "notFoundContent" | "options" | "fieldNames"> & {
 	modelKey: string;
+	fieldNames?: {
+		label: string;
+		value: string;
+	};
 	/**
 	 * useEffect依赖性数组
 	 */
@@ -185,13 +206,14 @@ export declare type SelectorWrapperProps = Omit<SelectProps, "filterOption" | "o
 	 * ```
 	 * 1. 当设置selectorList后，serviceConfig、operateType=search、onSelectorListChange将失效
 	 * 2. 不支持异步数据，异步使用serviceConfig方式
+	 * 3. 如果配置fieldNames，会转换后使用
 	 * ```
 	 */
-	selectorList?: LabelValueItem<string | number>[];
+	selectorList?: TPlainObject[];
 	/**
 	 * 通过服务获取数据后回调，当设置`selectorList`后无效果
 	 */
-	onSelectorListChange?: (selectorList: LabelValueItem<string | number>[]) => void;
+	onSelectorListChange?: (dataList: LabelValueItem[]) => void;
 	/**
 	 * 添加全部选项
 	 * ```
@@ -229,8 +251,12 @@ export declare type SelectorWrapperRefApi = {
  * 3. operateType=search状态下，回填数据查询接口时，会在接口中默认添加id字段（id的值为回填的值）
  * ```
  */
-export declare const SelectorWrapper: import("react").ForwardRefExoticComponent<Omit<SelectProps<any, import("rc-select/lib/Select").DefaultOptionType>, "loading" | "options" | "filterOption" | "notFoundContent" | "onSearch"> & {
+export declare const SelectorWrapper: import("react").ForwardRefExoticComponent<Omit<SelectProps<any, import("rc-select/lib/Select").DefaultOptionType>, "loading" | "options" | "filterOption" | "notFoundContent" | "onSearch" | "fieldNames"> & {
 	modelKey: string;
+	fieldNames?: {
+		label: string;
+		value: string;
+	} | undefined;
 	/**
 	 * useEffect依赖性数组
 	 */
@@ -244,13 +270,14 @@ export declare const SelectorWrapper: import("react").ForwardRefExoticComponent<
 	 * ```
 	 * 1. 当设置selectorList后，serviceConfig、operateType=search、onSelectorListChange将失效
 	 * 2. 不支持异步数据，异步使用serviceConfig方式
+	 * 3. 如果配置fieldNames，会转换后使用
 	 * ```
 	 */
-	selectorList?: LabelValueItem<string | number>[] | undefined;
+	selectorList?: TPlainObject<any>[] | undefined;
 	/**
 	 * 通过服务获取数据后回调，当设置`selectorList`后无效果
 	 */
-	onSelectorListChange?: ((selectorList: LabelValueItem<string | number>[]) => void) | undefined;
+	onSelectorListChange?: ((dataList: LabelValueItem[]) => void) | undefined;
 	/**
 	 * 添加全部选项
 	 * ```
@@ -270,6 +297,55 @@ export declare const SelectorWrapper: import("react").ForwardRefExoticComponent<
 	operateType?: "search" | "filter" | undefined;
 	searchFieldName?: string | undefined;
 } & import("react").RefAttributes<SelectorWrapperRefApi>>;
+export declare type UploadWrapperFileItem = {
+	uid: string;
+	name: string;
+	url: string;
+};
+export declare type UploadWrapperProps<T extends TPlainObject = TPlainObject> = {
+	value?: T[];
+	onChange?: (value?: T[]) => void;
+	onUploadError?: (message?: string) => void;
+	onUploadChange?: (info: UploadChangeParam<UploadFile>) => void;
+	/**
+	 * 属性映射
+	 */
+	fieldNames?: {
+		uid: string;
+		name: string;
+		url: string;
+	};
+	/**
+	 * 接口响应数据适配器，如果配置了fieldNames，适配器返回值会再进过fieldNames转换
+	 */
+	onRequestResultAdapter?: (respData: any) => TPlainObject;
+} & Omit<UploadProps, "onChange" | "fileList">;
+/**
+ * 文件上传
+ * ```
+ * 1. 可通过配置children替换默认上传触发布局
+ * 2. 接口返回结构：
+ * formData上传接口返回值
+ * {
+ *  code: '0000',
+ *  data: {
+ *    uid: '唯一值，可使用fileKey值'
+ *    name: '文件名称'
+ *    url: '预览地址'
+ *  }
+ * }
+ * 可通过fieldNames配置接口返回值属性名称映射
+ * 3. 最佳使用方式，与Form结合使用
+ * <Form.Item name="attachmentList" label="附件">
+ *   <UploadWrapper action={uploadUrl} onPreview={onPreviewFile} />
+ * </Form.Item>
+ * ```
+ *
+ */
+export declare const UploadWrapper: FC<UploadWrapperProps>;
+export declare type EditableTableRecordType = FormListFieldData & {
+	operation: FormListOperation;
+};
 export declare type EditableInputConfig = {
 	type: "input";
 	editableComptProps?: InputProps;
@@ -278,17 +354,17 @@ export declare type EditableInputNumberConfig = {
 	type: "inputNumber";
 	editableComptProps?: InputNumberProps;
 };
-export declare type EditableSelectWraperConfig = {
+export declare type EditableSelectWrapperConfig = {
 	type: "selectorWrapper";
 	editableComptProps: SelectorWrapperProps;
 };
-export declare type EditableDatePickerWraperConfig = {
-	type: "datePickerWraper";
-	editableComptProps?: DatePickerWraperProps;
+export declare type EditableDatePickerWrapperConfig = {
+	type: "datePickerWrapper";
+	editableComptProps?: DatePickerWrapperProps;
 };
-export declare type EditableDateRangePickerWraperConfig = {
-	type: "dateRangePickerWrapers";
-	editableComptProps?: DateRangePickerWraperProps;
+export declare type EditableDateRangePickerWrapperConfig = {
+	type: "dateRangePickerWrapper";
+	editableComptProps?: DateRangePickerWrapperProps;
 };
 export declare type EditableCheckboxGroupConfig = {
 	type: "checkboxGroup";
@@ -303,8 +379,8 @@ export declare type EditableTextareaConfig = {
 	editableComptProps: TextAreaProps;
 };
 export declare type EditableFileUploadConfig = {
-	type: "fileUpload";
-	editableComptProps: FileUploadProps;
+	type: "uploadWrapper";
+	editableComptProps: UploadWrapperProps;
 };
 /**
  * 自定义编辑组件
@@ -331,7 +407,7 @@ export declare type EditableCustomConfig = {
 		completeName: Array<number | string>;
 	}) => ReactElement;
 };
-export declare type EditableTypeConfig = EditableCustomConfig | EditableInputConfig | EditableSelectWraperConfig | EditableDatePickerWraperConfig | EditableDateRangePickerWraperConfig | EditableCheckboxGroupConfig | EditableTextareaConfig | EditableInputNumberConfig | EditableRadioGroupConfig | EditableFileUploadConfig;
+export declare type EditableTypeConfig = EditableCustomConfig | EditableInputConfig | EditableSelectWrapperConfig | EditableDatePickerWrapperConfig | EditableDateRangePickerWrapperConfig | EditableCheckboxGroupConfig | EditableTextareaConfig | EditableInputNumberConfig | EditableRadioGroupConfig | EditableFileUploadConfig;
 export declare type FieldSingleConfig = {
 	editable?: boolean | ((data: {
 		tableRowIndex: number;
@@ -372,30 +448,48 @@ export declare type FormListConfig = {
 		formListItemIndex: number;
 	}) => ReactElement;
 };
-export declare type EditableTableDataSourceItem = FormListFieldData & {
-	operation: FormListOperation;
-};
+/**
+ * antd 默认render功能此处不能使用
+ */
 export declare type EditableTableColumn = Omit<ColumnsType["0"], "render"> & {
-	dataIndex: string;
+	dataIndex?: string;
 	fieldConfig?: FieldSingleConfig | FormListConfig;
 	/**
 	 * 配置操作功能处理后，fieldConfig配置将失效
+	 * ```
+	 * 1. tableRowIndex：当前row的索引值
+	 * 1. name：当前row的form.item的name值
+	 * ```
 	 */
-	operateRender?: (item: EditableTableDataSourceItem & {
+	operateRender?: (item: {
 		tableRowIndex: number;
+		name: Array<string | number>;
+		operation: FormListOperation;
 	}) => ReactElement;
 };
 export declare type EditableTableProps = {
 	name: string;
-	tableProps: Omit<TableProps<any>, "dataSource" | "columns" | "rowKey">;
+	/**
+	 * ```
+	 * antd table属性
+	 * 1. 新增cellVerticalAlign，单元格竖直方向对齐方式，设置table column onCell属性后失效
+	 * ```
+	 */
+	tableProps?: Omit<TableProps<EditableTableRecordType>, "dataSource" | "columns" | "rowKey"> & {
+		cellVerticalAlign?: "baseline" | "middle" | "top" | "bottom";
+	};
 	columns: EditableTableColumn[];
-	onTableBeforeRender?: (data: FormListOperation) => ReactElement | null;
-	onTableAfterRender?: (data: FormListOperation) => ReactElement | null;
+	onTableBeforeRender?: (formListOperation: FormListOperation, nextRowIndex: number) => ReactElement | null;
+	/**
+	 * 设置后，将覆盖底部`新增`按钮
+	 */
+	onTableAfterRender?: (formListOperation: FormListOperation, nextRowIndex: number) => ReactElement | null;
+	rules?: FormListProps["rules"];
 };
 export declare const EditableTable: (props: EditableTableProps) => JSX.Element;
 export declare type FileImportProps = {
-	onImportFinish: (data: any) => void;
-} & Omit<UploadProps, "onChange" | "fileList" | "onPreview">;
+	onImportFinish: (data?: any) => void;
+} & Omit<UploadProps, "fileList" | "showUploadList" | "itemRender" | "listType" | "multiple" | "previewFile" | "progress" | "onChange" | "onDownload" | "onRemove" | "onPreview" | "directory" | "customRequest" | "defaultFileList" | "iconRender">;
 /**
  * 文件导入
  * ```
@@ -405,6 +499,48 @@ export declare type FileImportProps = {
  * ```
  */
 export declare const FileImport: FC<FileImportProps>;
+export declare type FileUploadItem = {
+	fileKey: string;
+	fileName: string;
+};
+export declare type FileUploadProps = {
+	onChange?: (value?: FileUploadItem[]) => void;
+	onUploadError?: (message?: string) => void;
+	value?: FileUploadItem[];
+	onPreview?: (item: FileUploadItem) => void;
+	onUploadChange?: (info: UploadChangeParam<UploadFile>) => void;
+	/**
+	 * 属性映射
+	 */
+	fieldNames?: {
+		fileKey?: string;
+		fileName?: string;
+	};
+} & Omit<UploadProps, "onChange" | "fileList" | "onPreview">;
+/**
+ * 文件上传，结合Form使用最佳
+ * ```
+ * 接口返回结构：
+ * formData上传接口必须返回fileKey值
+ * {
+ *  code: '0000',
+ *  data: {
+ *    fileKey: '预览文件对应的fileKey'
+ *  }
+ * }
+ * 可通过fieldNames配置接口返回值属性名称映射
+ * ```
+ * ```
+ * 最佳使用方式：
+ * <Form.Item name="attachmentList" label="附件">
+ *   <FileUpload action={uploadUrl} onPreview={onPreviewFile}>
+ *      <Button type="primary">选择文件导入</Button>
+ *   </FileUpload>
+ * </Form.Item>
+ * ```
+ *
+ */
+export declare const FileUpload: FC<FileUploadProps>;
 export declare type FlexLayoutProps = {
 	className?: string;
 	fullIndex?: number | number[];
@@ -454,7 +590,7 @@ export interface ModalActionsParamType {
 	closeModal: void;
 	setModalItemData: Record<string, unknown>;
 }
-export interface ModalOperationProps {
+export interface ModalOperationOldProps {
 	loading?: boolean;
 	okText?: string;
 	cancelText?: string;
@@ -467,9 +603,16 @@ export interface ModalOperationProps {
 export declare type ModalFormProps = {
 	className?: string;
 	pageLoading?: boolean;
-	operationProps?: ModalOperationProps;
+	operationProps?: ModalOperationOldProps;
 	footer?: null | React.ReactNode;
 } & Omit<ModalProps, "footer" | "onOk" | "okText" | "cancelText" | "okButtonProps" | "cancelButtonProps" | "okType" | "confirmLoading">;
+/**
+ * 弹窗机制
+ * ```
+ * 1. 默认 destroyOnClose = true
+ * 2. 默认 forceRender = false
+ * ```
+ */
 export declare const ModalWraper: FC<ModalFormProps>;
 /**
  * modal弹窗模型
@@ -482,6 +625,59 @@ export declare const ModalWraper: FC<ModalFormProps>;
  * ```
  */
 export declare const createModalWraperModel: (key: string) => API<ModelType<ModalStateType, ModalActionsParamType, any>>;
+export interface ModalStateType {
+	title?: string;
+	/**
+	 * 显示modal
+	 */
+	visible: boolean;
+	/**
+	 * 用来处理form, `更新`的时候的传递当前item列表行的数据, 当`创建`的时候强制设置为 `undefined`
+	 */
+	itemData?: Record<string, unknown> | null;
+	operateType: "create" | "update" | "view";
+	pageLoading?: boolean;
+}
+export interface ModalActionsParamType {
+	openModalForm: Pick<ModalStateType, "title" | "itemData" | "operateType" | "pageLoading">;
+	closeModal: void;
+	setModalItemData: Record<string, unknown>;
+}
+export interface ModalOperationProps {
+	loading?: boolean;
+	okText?: string;
+	cancelText?: string;
+	onOk?: () => void;
+	onCancel?: () => void;
+	hideOkBtn?: boolean;
+	okButtonProps?: Omit<ButtonProps, "onClick" | "loading" | "className">;
+	cancelButtonProps?: Omit<ButtonProps, "onClick" | "loading" | "className">;
+}
+export declare type ModalFormOldProps = {
+	className?: string;
+	pageLoading?: boolean;
+	operationProps?: ModalOperationProps;
+	footer?: null | React.ReactNode;
+} & Omit<ModalProps, "footer" | "onOk" | "okText" | "cancelText" | "okButtonProps" | "cancelButtonProps" | "okType" | "confirmLoading">;
+/**
+ * 弹窗机制
+ * ```
+ * 1. 默认 destroyOnClose = true
+ * 2. 默认 forceRender = false
+ * ```
+ */
+export declare const ModalWrapper: FC<ModalFormOldProps>;
+/**
+ * modal弹窗模型
+ * @param key 唯一值必传
+ * @returns
+ *
+ * ```
+ * 使用方式
+ * const [modalState, modalActions] = createModalWrapperModel('key值').useStore();
+ * ```
+ */
+export declare const createModalWrapperModel: (key: string) => API<ModelType<ModalStateType, ModalActionsParamType, any>>;
 export declare type PageFixedFooterProps = {
 	className?: string;
 	style?: CSSProperties;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@flatbiz/antd",
-	"version": "2.3.18",
+	"version": "2.3.21",
 	"description": "flat-biz oss ui components",
 	"main": "index.js",
 	"typings": "index.d.ts",
@@ -25,12 +25,6 @@
 	"engines": {
 		"node": ">=13.8.0"
 	},
-	"devDependencies": {
-		"antd": "^4.20.0",
-		"moment": "^2.29.3",
-		"react": "^17.0.2",
-		"react-dom": "^17.0.2"
-	},
 	"peerDependencies": {
 		"@ant-design/icons": "^4.7.0",
 		"@dimjs/lang": "^1.2.9",
@@ -40,5 +34,20 @@
 		"@flatbiz/utils": "^2.3.15",
 		"@wove/react": "^1.2.10"
 	},
-	"gitHead": "216f22124d1ce0b0c1e2c389914291ec12f784a9"
+	"devDependencies": {
+		"@ant-design/icons": "^4.7.0",
+		"@dimjs/lang": "^1.2.9",
+		"@dimjs/model": "^1.1.3",
+		"@dimjs/model-react": "^1.1.4",
+		"@dimjs/utils": "^1.2.9",
+		"@flatbiz/utils": "^2.3.21",
+		"@wove/react": "^1.2.10",
+		"antd": "^4.20.0",
+		"moment": "^2.29.3",
+		"react": "^17.0.2",
+		"react-dom": "^17.0.2",
+		"react-router": "^6.3.0",
+		"react-router-dom": "^6.3.0"
+	},
+	"gitHead": "06589677717004192b67a37a1e8e0d579c71dd91"
 }