@flatbiz/antd 3.2.18 → 3.2.19

package/index.d.ts

@@ -3,7 +3,8 @@
 
 import { API, ModelType } from '@dimjs/model';
 import { DateFormatType, TAny, TNoopDefine, TPlainObject } from '@flatbiz/utils';
-import { ButtonProps, CascaderProps, DrawerProps, DropdownProps, FormInstance, FormItemProps, InputNumberProps, InputProps, ModalProps, PopconfirmProps, RadioGroupProps, RowProps, SelectProps, SpaceProps, SwitchProps, TableProps, TabsProps, TimePickerProps, TimeRangePickerProps, TooltipProps, TreeProps, TreeSelectProps, UploadProps } from 'antd';
+import { IAllProps } from '@tinymce/tinymce-react';
+import { ButtonProps, CascaderProps, DrawerProps, DropdownProps, FormInstance, FormItemProps, InputNumberProps, InputProps, ModalProps, PaginationProps, PopconfirmProps, RadioGroupProps, RowProps, SelectProps, SpaceProps, SwitchProps, TableProps, TabsProps, TimePickerProps, TimeRangePickerProps, TooltipProps, TreeProps, TreeSelectProps, UploadProps } from 'antd';
 import { CheckboxGroupProps } from 'antd/lib/checkbox';
 import { ConfigProviderProps } from 'antd/lib/config-provider';
 import { PickerDateProps, RangePickerDateProps } from 'antd/lib/date-picker/generatePicker';
@@ -13,6 +14,7 @@ import { ColumnsType } from 'antd/lib/table';
 import { UploadChangeParam } from 'antd/lib/upload';
 import { UploadFile } from 'antd/lib/upload/interface';
 import { CSSProperties, DependencyList, Dispatch, EffectCallback, FC, ReactElement, ReactNode, SetStateAction } from 'react';
+import { Editor as TinyMCEEditor } from 'tinymce';
 
 export declare const styles: () => void;
 export type ButtonWrapperProps = Omit<ButtonProps, "onClick" | "loading" | "hidden" | "color"> & {
@@ -573,6 +575,7 @@ export type EasyTableServiceConfig = {
 };
 export type EasyTableProps = {
 	children: ReactElement | ReactElement[];
+	/** EasyTable唯一值，可用于缓存查询条件 */
 	modelKey: string;
 	/** 接口数据配置 */
 	serviceConfig: EasyTableServiceConfig;
@@ -603,18 +606,73 @@ export type EasyTableProps = {
 	onDataSourceChange?: (dataSource: TAny) => void;
 	/** 如果自定义查询按钮，可设置 Form onFinish */
 	onFormFinish?: (values?: TPlainObject) => void;
+	/** 在父节点高度下，上下铺满；默认值：true */
+	isFull?: boolean;
+	/** 查询条件固定，不随滚动条滚动  */
+	filterFixed?: boolean;
+	/** 分页区域固定，不随滚动条滚动 */
+	paginationFixed?: boolean;
+	/**
+	 * 1. 配合paginationFixed=true一起使用有效果
+	 * 2. 当使用Table内的pagination时，在EasyTable.Table中配置分页属性
+	 */
+	pagination?: PaginationProps;
+	/**
+	 * 查询条件展开、收起，被收起key数组；数组内容为EasyTable.Filter 子节点key值
+	 */
+	foldKeys?: string[];
 };
 /**
  * 对 查询条件+表格数据 进行深度封装，内置数据交互处理
  * ```
- * 1. 需要获取查询条件、主动发起请求等可通过ref操作
+ * 1. 需要获取查询条件、主动发起请求等可通过ref、useEasyTable操作
  * 2. 可通过属性 initRequest 设置初始化是否请求数据
  * 3. 可通过属性 fieldNames 来设置自定义变量，默认值为：list、total、pageNo、pageSize
+ * 4. isFull=true，设置【在父节点高度下，上下铺满】（默认值：true）
+ * 5. filterFixed=true，设置查询条件固定，不随滚动条滚动
+ * 6. paginationFixed=true，可设置分页条件在底部固定，不随滚动条滚动
+ * 7. foldKeys=string[]，查询条件展开、收起，被收起数组内容为EasyTable.Filter 子节点key值
+ * 8. windows环境下，会在EasyTable.Table外部包装一下 TableScrollbar，提示高windows下table左右滚动体验
  *
  * Demo https://fex.qa.tcshuke.com/docs/admin/main/crud/easy-table
  * ```
  */
 export declare const EasyTable: import("react").ForwardRefExoticComponent<EasyTableProps & import("react").RefAttributes<EasyTableRefApi>>;
+export type FormColProps = {
+	span?: number;
+	/** 屏幕 < 576px  */
+	xs?: number;
+	/** 屏幕 ≥ 576px */
+	sm?: number;
+	/** 屏幕 ≥ 768px */
+	md?: number;
+	/** 屏幕 ≥ 992px */
+	lg?: number;
+	/** 屏幕 ≥ 1200px */
+	xl?: number;
+	/** 屏幕 ≥ 1600px */
+	xxl?: number;
+	/** 强制单独一行 */
+	forceAloneRow?: boolean;
+	children?: ReactNode | ReactNode[];
+};
+/**
+ * 网格响应式布局，默认值：{ xs: 24, sm: 12, md: 12, lg: 8, xl: 8, xxl: 6 }
+ *```
+ * 1. 设置 span 栅格占位格数，不考虑响应式
+ * 2. grid 自定义响应式网格布局
+ * xs: 屏幕 < 576px
+ * sm: 屏幕 ≥ 576px
+ * md: 屏幕 ≥ 768px
+ * lg: 屏幕 ≥ 992px
+ * xl: 屏幕 ≥ 1200px
+ * xxl: 屏幕 ≥ 1600px
+ * ```
+ */
+export declare const FormCol: {
+	(props: FormColProps): JSX.Element;
+	domTypeName: string;
+};
 export type FormOperateColProps = {
 	className?: string;
 	leftList?: Array<ReactElement | null>;
@@ -636,6 +694,17 @@ export declare const FormOperateCol: {
 	(props: FormOperateColProps): JSX.Element;
 	domTypeName: string;
 };
+export type FormRowProps = RowProps & {
+	children?: ReactNode | ReactNode[];
+};
+/**
+ * FormItem网格响应式布局
+ *```
+ * 1. 应用场景：Form条件布局
+ * 2. 子元素只能是 FormCol、FormOperateCol，其他会被忽略
+ * 3. 所有子元素中只能存在一个 FormOperateCol
+ */
+export declare const FormRow: (props: FormRowProps) => JSX.Element;
 export type EasyTableFilterProps = {
 	children: ReactElement | ReactElement[] | ((form: FormInstance) => ReactElement);
 	/** isPure = true时无效 */
@@ -679,8 +748,19 @@ export type EasyTableFilterProps = {
  *```
  */
 export declare const EasyTableFilter: (props: EasyTableFilterProps) => JSX.Element;
+/**
+ * 在 EasyTable子组件内才可使用
+ * @returns
+ */
+export declare const useEasyTable: () => EasyTableRefApi;
+/**
+ *
+ * @deprecated 已过去，请使用 useEasyTable
+ * @returns
+ */
+export declare const useEasyTablRef: () => import("react").MutableRefObject<EasyTableRefApi>;
 export type EasyTableTableProps = Omit<TableProps<TAny>, "dataSource" | "loading" | "rowKey"> & {
-	children?: ReactElement;
+	children?: ReactElement | ReactElement[];
 	/** 表格行 key 的取值 */
 	rowKey: string;
 };
@@ -692,7 +772,6 @@ export type EasyTableTableProps = Omit<TableProps<TAny>, "dataSource" | "loading
  * ```
  */
 export declare const EasyTableTable: (props: EasyTableTableProps) => JSX.Element;
-export declare const useEasyTablRef: () => import("react").MutableRefObject<EasyTableRefApi>;
 export interface EditableFieldProps {
 	className?: string;
 	editRender: ReactElement | ((data: {
@@ -1057,21 +1136,34 @@ export type EditableTableProps = {
 	rules?: FormListProps["rules"];
 };
 export declare const EditableTable: (props: EditableTableProps) => JSX.Element;
-export type varStyles = "--fa-color-primary" | "--fa-color-secondary" | "--fa-color-warning" | "--fa-color-danger" | "--fa-color-success" | "--editor-card-bgcolor";
 export type EditorWrapperProps = {
-	onChange: (data?: string) => void;
+	onChange?: (data?: string) => void;
 	value?: string;
 	editorInitParams?: TPlainObject;
-	editorProps?: TPlainObject;
-	varStyle?: Record<varStyles, CSSProperties["color"]>;
+	editorProps?: {
+		disabled?: boolean;
+		onKeyDown?: (event: any) => void;
+	};
 	height?: number | string;
+	/** 上传图片服务 */
+	onUploadImage?: (file: File) => Promise<string>;
+	className?: string;
 };
 /**
  * 富文本编辑器，配置参考tinymce
+ * @deprecated 已过时，请使用 RichTextEditor 组件
  * @param props
  * @returns
+ * ```
+ * 1. 如果需要粘贴上传图片服务，需要提供 onUploadImage 上传图片接口
+ * 2. 如果不需要粘贴上传图片，可配置 editorInitParams.paste_data_images = false
+ * 3. 获取富文本实例，通过editorInitParams.setup(editor)函数获取
+ * 4. 可在 editorInitParams 中自定义 plugins、toolbar
+ * 5. 预览富文本数据，使用 EditorViewer 组件
+ *
+ * ```
  */
-export declare const EditorWrapper: (props: any) => JSX.Element;
+export declare const EditorWrapper: (props: EditorWrapperProps) => JSX.Element;
 export type FileImportProps = {
 	onImportFinish: (data?: any) => void;
 	buttonName?: string | ReactElement;
@@ -1156,52 +1248,6 @@ export type FlexLayoutProps = {
  * @returns
  */
 export declare const FlexLayout: (props: FlexLayoutProps) => JSX.Element;
-export type FormColProps = {
-	span?: number;
-	/** 屏幕 < 576px  */
-	xs?: number;
-	/** 屏幕 ≥ 576px */
-	sm?: number;
-	/** 屏幕 ≥ 768px */
-	md?: number;
-	/** 屏幕 ≥ 992px */
-	lg?: number;
-	/** 屏幕 ≥ 1200px */
-	xl?: number;
-	/** 屏幕 ≥ 1600px */
-	xxl?: number;
-	/** 强制单独一行 */
-	forceAloneRow?: boolean;
-	children?: ReactNode | ReactNode[];
-};
-/**
- * 网格响应式布局，默认值：{ xs: 24, sm: 12, md: 12, lg: 8, xl: 8, xxl: 6 }
- *```
- * 1. 设置 span 栅格占位格数，不考虑响应式
- * 2. grid 自定义响应式网格布局
- * xs: 屏幕 < 576px
- * sm: 屏幕 ≥ 576px
- * md: 屏幕 ≥ 768px
- * lg: 屏幕 ≥ 992px
- * xl: 屏幕 ≥ 1200px
- * xxl: 屏幕 ≥ 1600px
- * ```
- */
-export declare const FormCol: {
-	(props: FormColProps): JSX.Element;
-	domTypeName: string;
-};
-export type FormRowProps = RowProps & {
-	children?: ReactNode | ReactNode[];
-};
-/**
- * FormItem网格响应式布局
- *```
- * 1. 应用场景：Form条件布局
- * 2. 子元素只能是 FormCol、FormOperateCol，其他会被忽略
- * 3. 所有子元素中只能存在一个 FormOperateCol
- */
-export declare const FormRow: (props: FormRowProps) => JSX.Element;
 export type FormItemHorizontalUnionProps = {
 	className?: string;
 	style?: CSSProperties;
@@ -1653,6 +1699,43 @@ export type TRelationTreeOperate = {
 	onChange: (name: string, value: any) => void;
 };
 export declare const RelationTree: (props: RelationTreeProps) => JSX.Element;
+export interface RichTextEditorProps extends Omit<IAllProps, "onChange"> {
+	onChange?: (data?: string) => void;
+	/** 上传图片服务 */
+	onUploadImage?: (file: File) => Promise<string>;
+	className?: string;
+	/** 图片点击预览 */
+	imgPreview?: boolean;
+}
+/**
+ * 富文本编辑器，配置参考tinymce
+ * @param props
+ * @returns
+ * ```
+ * 1. 如果需要粘贴上传图片服务，需要提供 onUploadImage 上传图片接口
+ * 2. 如果不需要粘贴上传图片，可配置 editorInitParams.paste_data_images = false
+ * 3. 获取富文本实例，通过editorInitParams.setup(editor)函数获取
+ * 4. 可在 editorInitParams 中自定义 plugins、toolbar
+ * 5. 预览富文本数据，使用 EditorViewer 组件
+ *
+ * ```
+ */
+export declare const RichTextEditor: (props: RichTextEditorProps) => JSX.Element;
+export type RichTextViewerProps = {
+	data: string;
+	className?: string;
+	fullscreen?: boolean;
+	onInit?: (editor: TinyMCEEditor) => void;
+	children?: ReactElement;
+	style?: CSSProperties;
+	fullscreenIconTips?: string;
+};
+/**
+ * 预览 RichTextEditor 生成的富文本数据
+ * @param props
+ * @returns
+ */
+export declare const RichTextViewer: (props: RichTextViewerProps) => JSX.Element;
 export type RuleDataItem = {
 	title?: string | ReactElement;
 	desc?: string | ReactElement;
@@ -1926,6 +2009,25 @@ export type TableTitleTooltipProps = {
 	style?: CSSProperties;
 };
 export declare const TableTitleTooltip: (props: TableTitleTooltipProps) => JSX.Element;
+export type TableScrollProps = {
+	children: React.ReactNode;
+	/**
+	 * y轴的滚动条
+	 */
+	target?: HTMLElement;
+};
+/**
+ * 表格x轴浮动滚动条
+ * ```
+ * 使用方法
+ * <TableScrollbar>
+ *    <Table/>
+ * </TableScrollbar>
+ * ```
+ */
+export declare const TableScrollbar: ({ children, target, ...props }: TableScrollProps) => import("react").FunctionComponentElement<{
+	summary: (...args: any[]) => JSX.Element;
+}>;
 export type TabsWrapperProps = TabsProps & {
 	/** Tabs Header 提供 Sticky 效果，默认值：true  */
 	isSticky?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flatbiz/antd",
-  "version": "3.2.18",
+  "version": "3.2.19",
   "description": "flat-biz oss ui components",
   "main": "index.js",
   "typings": "index.d.ts",
@@ -25,18 +25,22 @@
   "engines": {
     "node": ">=13.8.0"
   },
+  "dependencies": {
+    "@tinymce/tinymce-react": "^4.3.0"
+  },
   "peerDependencies": {
     "@ant-design/icons": ">=4.7.0",
     "@dimjs/lang": ">=1.2.23",
     "@dimjs/model": ">=1.1.8",
     "@dimjs/model-react": ">=1.1.8",
     "@dimjs/utils": ">=1.2.23",
-    "@flatbiz/utils": ">=3.0.15",
-    "@wove/react": ">=1.2.22",
+    "@flatbiz/utils": ">=4.0.6",
+    "@wove/react": ">=1.2.23",
     "antd": ">=4.22.2 < 5.0.0",
     "moment": ">=2.29.4",
     "react": ">=18.2.0",
-    "react-dom": ">=18.2.0"
+    "react-dom": ">=18.2.0",
+    "ahooks": "^3.7.5"
   },
   "devDependencies": {
     "@ant-design/icons": "^4.7.0",
@@ -44,13 +48,14 @@
     "@dimjs/model": "^1.1.8",
     "@dimjs/model-react": "^1.1.8",
     "@dimjs/utils": "^1.2.23",
-    "@flatbiz/utils": "^4.0.4",
-    "@wove/react": "^1.2.21",
+    "@flatbiz/utils": "^4.0.6",
+    "@wove/react": "^1.2.23",
     "antd": "4.24.5",
     "dequal": "^2.0.3",
     "moment": "^2.29.4",
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "ahooks": "^3.7.5"
   },
   "gitHead": "4378d433b73ee28fd7cb4c64bed8571f993eb5a9"
 }