@flatbiz/antd
Version:
68 lines (65 loc) • 2.14 kB
TypeScript
import { TAny } from '@flatbiz/utils';
import { MentionProps } from 'antd';
import { ReactElement } from 'react';
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[];
};
export type ParamItem = {
/** 模版参数code */
code: string;
/** 模版参数类型 文本/数字/链接 */
type: "text" | "number" | "link";
/** 模版参数 value */
value: TAny;
} & Record<string, TAny>;
export type OperationPresetProps = {
/** icon */
icon: ReactElement;
/** 模版参数文案 */
label?: string;
/** 模版参数类型 */
type: string;
/** 自增code前缀 */
codePrefix: string;
/** 自定义生成模版参数code */
codeAdapter?: () => string | undefined;
};
export type MentionEditorProps = Omit<MentionsWrapperProps, "prefix"> & {
/**
* onChange
* @item 点击的预设模版参数
*/
onSelectParam?: (item: ParamItem, prefix?: string) => void;
/** 模版参数前缀 & | $ */
prefix?: string;
/** editor 支持添加的模版参数类型 */
operations?: OperationPresetProps[];
/** 模版参数列表 */
params?: ParamItem[] | undefined;
};
/**
* 基于MentionWrapper封装的模版字符串配置组件
* 1. 提供变量,数字,链接等可选的模版参数
* 2. 不同类型模版参数可配置多个
* 3. mention 会根据 传入的params自动推断出关键字
* 4. 模版参数建议都以${_xxx}为格式
* 5. Demo: https://fex.qa.tcshuke.com/docs/admin/main/widget?key=mention-editor
*/
export declare const MentionEditor: (props: MentionEditorProps) => import("react").JSX.Element;
export {};