@flatbiz/antd 4.4.2 → 4.4.4

package/index.d.ts

@@ -5,7 +5,7 @@
 import { API, ModelType } from '@dimjs/model';
 import { DateFormatType, TAny, TNoopDefine, TPlainObject } from '@flatbiz/utils';
 import { IAllProps } from '@tinymce/tinymce-react';
-import { AlertProps, ButtonProps, CardProps, CascaderProps, CheckboxProps, CollapseProps, ColorPickerProps, DrawerProps, DropdownProps, FormInstance, FormItemProps, FormListFieldData, FormListOperation, InputNumberProps, InputProps, ModalProps, PaginationProps, PopconfirmProps, PopoverProps, RadioGroupProps, RowProps, SelectProps, SpaceProps, SwitchProps, TableProps, TabsProps, TagProps, TimePickerProps, TimeRangePickerProps, TooltipProps, TreeProps, TreeSelectProps, UploadProps } from 'antd';
+import { AlertProps, ButtonProps, CardProps, CascaderProps, CheckboxProps, CollapseProps, ColorPickerProps, DrawerProps, DropdownProps, FormInstance, FormItemProps, FormListFieldData, FormListOperation, InputNumberProps, InputProps, MentionProps, ModalProps, PaginationProps, PopconfirmProps, PopoverProps, RadioGroupProps, RowProps, SelectProps, SpaceProps, SwitchProps, TableProps, TabsProps, TagProps, TimePickerProps, TimeRangePickerProps, TooltipProps, TreeProps, TreeSelectProps, UploadProps } from 'antd';
 import { ConfigProviderProps } from 'antd/es/config-provider';
 import { PickerDateProps, RangePickerDateProps } from 'antd/es/date-picker/generatePicker';
 import { FormListProps } from 'antd/es/form';
@@ -21,6 +21,162 @@ import { IAceEditorProps } from 'react-ace';
 import { SplitProps } from 'react-split';
 import { Editor as TinyMCEEditor } from 'tinymce';
 
+export type AceEditorGroovyProps = Omit<IAceEditorProps, "onLoad" | "mode" | "value" | "onChange" | "theme"> & {
+	/** 编辑器高度，默认值：100%，可输入值例如 300px、100% */
+	height?: string;
+	value?: string | TPlainObject | TPlainObject[];
+	onChange?: (value?: string | TPlainObject | TPlainObject[]) => void;
+	/** 配置输入自动提示关键字 */
+	autoCompleterList?: {
+		name: string;
+		desc?: string;
+	}[];
+	/**
+	 * 编辑器主题配置，例如：github、terminal、xcode
+	 * ```
+	 * 1. 顶部引入 import 'ace-builds/src-noconflict/theme-xxxx';
+	 * 2. 配置 theme = xxxx
+	 * ```
+	 */
+	theme?: string;
+};
+/**
+ * groovy编辑器
+ * ```
+ * 1. 受控组件，需要使用value、onChange配合显示数据
+ * 2. heigth 默认为100%，如果外层无高度，需要自定义设置height属性
+ * 3. 通过 autoCompleterList 配置自动提示关键字
+ * 4. 通过 hiddenVerifyBtn、hiddenFormatterBtn可隐藏底部操作按钮
+ * 5. 通过 theme 配置编辑器主题，例如：
+ *    5.1 顶部引入 import 'ace-builds/src-noconflict/theme-xxxx';
+ *    5.2 配置 theme = xxxx
+ * ```
+ */
+export declare const AceEditorGroovy: (props: AceEditorGroovyProps) => import("react/jsx-runtime").JSX.Element;
+export type AceEditorJavaProps = Omit<IAceEditorProps, "onLoad" | "mode" | "value" | "onChange" | "theme"> & {
+	/** 编辑器高度，默认值：100%，可输入值例如 300px、100% */
+	height?: string;
+	value?: string | TPlainObject | TPlainObject[];
+	onChange?: (value?: string | TPlainObject | TPlainObject[]) => void;
+	/** 配置输入自动提示关键字 */
+	autoCompleterList?: {
+		name: string;
+		desc?: string;
+	}[];
+	/**
+	 * 编辑器主题配置，例如：github、terminal、xcode
+	 * ```
+	 * 1. 顶部引入 import 'ace-builds/src-noconflict/theme-xxxx';
+	 * 2. 配置 theme = xxxx
+	 * ```
+	 */
+	theme?: string;
+};
+/**
+ * java编辑器
+ * ```
+ * 1. 受控组件，需要使用value、onChange配合显示数据
+ * 2. heigth 默认为100%，如果外层无高度，需要自定义设置height属性
+ * 3. 通过 autoCompleterList 配置自动提示关键字
+ * 4. 通过 hiddenVerifyBtn、hiddenFormatterBtn可隐藏底部操作按钮
+ * 5. 通过 theme 配置编辑器主题，例如：
+ *    5.1 顶部引入 import 'ace-builds/src-noconflict/theme-xxxx';
+ *    5.2 配置 theme = xxxx
+ * ```
+ */
+export declare const AceEditorJava: (props: AceEditorJavaProps) => import("react/jsx-runtime").JSX.Element;
+export type AceEditorJsonProps = Omit<IAceEditorProps, "onLoad" | "mode" | "value" | "onChange" | "theme"> & {
+	/** 编辑器高度，默认值：100%，可输入值例如 300px、100% */
+	height?: string;
+	value?: string | TPlainObject | TPlainObject[];
+	onChange?: (value?: string | TPlainObject | TPlainObject[]) => void;
+	/** 配置输入自动提示关键字 */
+	autoCompleterList?: {
+		name: string;
+		desc?: string;
+	}[];
+	/** 是否隐藏【验证数据】按钮 */
+	hiddenVerifyBtn?: boolean;
+	/**
+	 * 编辑器主题配置，例如：github、terminal、xcode
+	 * ```
+	 * 1. 顶部引入 import 'ace-builds/src-noconflict/theme-xxxx';
+	 * 2. 配置 theme = xxxx
+	 * ```
+	 */
+	theme?: string;
+};
+/**
+ * Json编辑器
+ * ```
+ * 1. 受控组件，需要使用value、onChange配合显示数据
+ * 2. heigth 默认为100%，如果外层无高度，需要自定义设置height属性
+ * 3. 通过 autoCompleterList 配置自动提示关键字
+ * 4. 通过 hiddenVerifyBtn 配置隐藏底部操作按钮
+ * 5. 通过 theme 配置编辑器主题，例如：
+ *    5.1 顶部引入 import 'ace-builds/src-noconflict/theme-xxxx';
+ *    5.2 配置 theme = xxxx
+ * ```
+ */
+export declare const AceEditorJson: (props: AceEditorJsonProps) => import("react/jsx-runtime").JSX.Element;
+export type AceEditorMysqlProps = Omit<IAceEditorProps, "onLoad" | "theme" | "mode" | "value" | "onChange"> & {
+	/** 编辑器高度，默认值：100%，可输入值例如 300px、100% */
+	height?: string;
+	value?: string;
+	onChange?: (value?: string) => void;
+	/** 配置输入自动提示关键字 */
+	autoCompleterList?: {
+		name: string;
+		desc?: string;
+	}[];
+	/** 隐藏【美化】按钮 */
+	hiddenFormatterBtn?: boolean;
+	/**
+	 * 编辑器主题配置，例如：github、terminal、xcode
+	 * ```
+	 * 1. 顶部引入 import 'ace-builds/src-noconflict/theme-xxxx';
+	 * 2. 配置 theme = xxxx
+	 * ```
+	 */
+	theme?: string;
+};
+export declare const AceEditorMysql: (props: AceEditorMysqlProps) => import("react/jsx-runtime").JSX.Element;
+export type AceEditorXmlProps = Omit<IAceEditorProps, "onLoad" | "mode" | "value" | "onChange" | "theme"> & {
+	/** 编辑器高度，默认值：100%，可输入值例如 300px、100% */
+	height?: string;
+	value?: string | TPlainObject | TPlainObject[];
+	onChange?: (value?: string | TPlainObject | TPlainObject[]) => void;
+	/** 配置输入自动提示关键字 */
+	autoCompleterList?: {
+		name: string;
+		desc?: string;
+	}[];
+	/** 隐藏【验证数据】按钮 */
+	hiddenVerifyBtn?: boolean;
+	/** 隐藏【美化】按钮 */
+	hiddenFormatterBtn?: boolean;
+	/**
+	 * 编辑器主题配置，例如：github、terminal、xcode
+	 * ```
+	 * 1. 顶部引入 import 'ace-builds/src-noconflict/theme-xxxx';
+	 * 2. 配置 theme = xxxx
+	 * ```
+	 */
+	theme?: string;
+};
+/**
+ * xml编辑器
+ * ```
+ * 1. 受控组件，需要使用value、onChange配合显示数据
+ * 2. heigth 默认为100%，如果外层无高度，需要自定义设置height属性
+ * 3. 通过 autoCompleterList 配置自动提示关键字
+ * 4. 通过 hiddenVerifyBtn、hiddenFormatterBtn可隐藏底部操作按钮
+ * 5. 通过 theme 配置编辑器主题，例如：
+ *    5.1 顶部引入 import 'ace-builds/src-noconflict/theme-xxxx';
+ *    5.2 配置 theme = xxxx
+ * ```
+ */
+export declare const AceEditorXml: (props: AceEditorXmlProps) => import("react/jsx-runtime").JSX.Element;
 export type AlertWrapperProps = AlertProps & {
 	size?: "small" | "default" | "large";
 };
@@ -1353,6 +1509,8 @@ export type EditableTableProps = {
 	hiddenFooterBtn?: boolean;
 	/** 新增行默认值，自定义onTableAfterRender后失效 */
 	getAddRowDefaultValues?: () => TPlainObject;
+	/** 空效果显示尺寸，默认值：small */
+	emptyShowSize?: "small" | "large";
 };
 export type EditableTableRefApi = {
 	/** 可用于表格行选择操作时，获取操作列数据 */
@@ -2512,6 +2670,10 @@ export type IconWrapperProps = {
 	onClick?: (event: any) => void;
 	hideHoverBgColor?: boolean;
 	hidden?: boolean;
+	/** 图标对比文字的位置，默认：brefore */
+	position?: "before" | "after";
+	/** 图标与文字之间的间距 */
+	gap?: number;
 };
 export declare const IconWrapper: (props: IconWrapperProps) => import("react/jsx-runtime").JSX.Element | null;
 export type InputSearchWrapperProps = Omit<SearchProps, "defaultValue">;
@@ -2580,6 +2742,7 @@ export type JsonEditorProps = Omit<IAceEditorProps, "onLoad" | "mode" | "value"
 };
 /**
  * Json编辑器
+ * @deprecated 已过期，请使用 AceEditorJson 组件
  * ```
  * 1. 受控组件，需要使用value、onChange配合显示数据
  * 2. heigth 默认为100%，如果外层无高度，需要自定义设置height属性
@@ -2657,6 +2820,47 @@ export declare const LocalLoading: import("react").ForwardRefExoticComponent<Loc
 		onRequest: (params?: TPlainObject) => void;
 	};
 };
+export type MentionsWrapperProps = Omit<MentionProps, "value" | "onChange" | "onClick" | "onCursorChange" | "options" | "id" | "split" | "validateSearch" | "ref" | "prefix"> & {
+	value?: string;
+	onChange?: (value?: string) => void;
+	/** 设置列表提示关键字，例如：@、$等 */
+	prefix?: string | string[];
+	onClick?: (value?: string) => void;
+	/** 光标移动回调 */
+	onCursorChange?: (position: number) => void;
+	/**
+	 * 输入框内整体关键词列表
+	 * ```
+	 * 整体关键词交互
+	 * 1. 光标可整体移动
+	 * 2. 光标不会存在关键词内部
+	 * 3. 删除时，整体删除
+	 * ```
+	 */
+	options?: string[];
+};
+/**
+ * 基于Antd Mentions进行二次封装，可实现输入内关键字整体控制，包括光标移动、关键词删除等
+ * ```
+ * 可实现
+ * 1. 控制光标输入
+ * 2. 可设置关键词，光标不会出现在关键词内部
+ * 3. 可整体删除关键词
+ *
+ * 应用场景例如：
+ * 1. 公式输入
+ * (【xx金额1】+【xx金额2】)*2
+ * <MentionsWrapper prefix="$" options={['【xx金额1】', '【xx金额2】']}/>
+ *
+ * 2. 短信模板设置
+ * 您的订单号为${订单号}，订单交易时间为${订单时间}
+ * <MentionsWrapper prefix="$" options={['${订单号}', '${订单时间}']}/>
+ *
+ * demo：https://fex.qa.tcshuke.com/docs/admin/main/other/widget
+ * ```
+ *
+ */
+export declare const MentionsWrapper: (props: MentionsWrapperProps) => import("react/jsx-runtime").JSX.Element;
 export type onClick = (e?: React.MouseEvent<HTMLElement>) => void;
 export interface ModalActionProps {
 	children: ReactElement | ((data: {
@@ -3079,6 +3283,7 @@ export type SearchFormRefApi = {
  */
 export declare const SearchForm: import("react").ForwardRefExoticComponent<SearchFormProps & import("react").RefAttributes<SearchFormRefApi>>;
 export interface ISearchMenuProps {
+	size?: "small" | "default";
 	/**
 	 * 如果传了value，就变成受控组件
 	 * 目前只支持单选
@@ -3798,18 +4003,22 @@ export type TextOverflowRenderProps = {
  */
 export declare const TextOverflowRender: (props: TextOverflowRenderProps) => import("react/jsx-runtime").JSX.Element;
 export type TextSymbolWrapperProps = {
+	className?: string;
+	style?: CSSProperties;
+	/** 内置图标类型 */
 	symbolType?: "required";
 	/** 自定义标记符号，优先级大于 symbolType */
-	symbol?: string;
+	symbol?: ReactNode;
 	/** 标记位置，默认：brefore */
 	position?: "before" | "after";
+	/** 显示文本 */
 	text?: string | ReactElement;
 	symbolStyle?: CSSProperties;
 	onSymbolClick?: (event: any) => void;
-	className?: string;
-	style?: CSSProperties;
 	/** 只隐藏符号，不隐藏文案 */
 	hiddenSymbol?: boolean;
+	/** 图标与文字之间的间距 */
+	gap?: number;
 };
 /**
  * 为文字添加符号，例如：必填符号

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flatbiz/antd",
-  "version": "4.4.2",
+  "version": "4.4.4",
   "description": "flat-biz ui components",
   "main": "index.js",
   "typings": "index.d.ts",
@@ -53,7 +53,10 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "ahooks": "^3.7.5",
-    "react-is": "^18.2.0"
+    "react-is": "^18.2.0",
+    "react-ace": "^10.1.0",
+    "sql-formatter": "^15.0.2",
+    "xml-formatter": "^3.6.2"
   },
   "dependencies": {
     "dequal": "2.0.3",
@@ -66,7 +69,9 @@
     "use-intl": "3.0.0-rc.6",
     "react-split": "2.0.14",
     "react-is": "^18.2.0",
-    "react-ace": "^10.1.0"
+    "react-ace": "^10.1.0",
+    "sql-formatter": "^15.0.2",
+    "xml-formatter": "^3.6.2"
   },
   "gitHead": "4378d433b73ee28fd7cb4c64bed8571f993eb5a9"
 }