@flatbiz/react
Version:
flat biz ui components
1,643 lines (1,641 loc) • 81.1 kB
TypeScript
/// <reference types="prop-types" />
/// <reference types="scheduler" />
import { LabelValueItem, TImageCompressOptions, TNoopDefine, TPlainObject } from '@flatbiz/utils';
import { CSSProperties, ChangeEvent, DependencyList, DetailedHTMLProps, EffectCallback, FC, ImgHTMLAttributes, InputHTMLAttributes, MutableRefObject, ReactElement, ReactNode, RefObject, SyntheticEvent, TextareaHTMLAttributes } from 'react';
export declare const styles: () => never[];
export declare function getOwnerWindow(node?: HTMLElement | null): Window & typeof globalThis;
export declare function getOwnerDocument(node?: HTMLElement | null): Document;
export declare function contains(parent: HTMLElement, child: HTMLElement): boolean;
export declare const isWindow: (obj: any) => boolean;
export declare const getStyles: (elem: any) => any;
export declare const accessProperty: (elem: any, propName: string) => number;
export declare const getElemWidth: (elem?: HTMLElement) => number;
export declare const getElemHeight: (elem?: HTMLElement) => number;
export interface BodyAppendDivElementProps {
divElement: HTMLDivElement;
elementId: string;
}
export declare const bodyAppendDivElement: () => BodyAppendDivElementProps;
export declare const createDivElement: () => HTMLDivElement;
export declare const removeBodyChild: (element: string) => void;
/**
* 获取React dom 根节点
* @returns
*/
export declare const getRectRootNodeElement: () => HTMLDivElement;
export type TargetValue<T> = T | undefined | null;
export type TargetType = Element | Document | Window;
export type BasicDomTarget<T extends TargetType = Element> = (() => TargetValue<T>) | TargetValue<T> | MutableRefObject<TargetValue<T>>;
export declare function getTargetElement<T extends TargetType>(target: BasicDomTarget<T>, defaultElement?: T): TargetValue<T>;
export declare function generateIntArray(from: number, to: number): number[];
export type GetContainer = HTMLElement | (() => HTMLElement) | null;
export declare function resolveContainer(container: HTMLElement | (() => HTMLElement) | string | undefined | null): Element;
export type ScrollElement = HTMLElement | Window | Document;
/**
* 查询指定节点层层父节点中第一个原生滚动节点
* @param el
* @param root
* @returns
*/
export declare function getScrollParent(el: Element, root?: ScrollElement | null | undefined): Element | Document | Window | null | undefined;
export declare const isBrowser: boolean;
export interface NativeProps<S extends string = never> {
className?: string;
style?: CSSProperties & Partial<Record<S, string>>;
}
export type VarProps<S extends string = never> = Partial<Record<S, string>>;
export interface CommonProps<S extends TPlainObject = TPlainObject> {
className?: string;
style?: CSSProperties & Partial<S>;
}
export interface CommonPropsWithChildren<S extends TPlainObject = TPlainObject> {
className?: string;
style?: CSSProperties & Partial<S>;
children?: ReactNode | undefined;
}
export declare function withNativeProps<P extends NativeProps>(props: P, element: ReactElement<P>): ReactElement<P, string | import("react").JSXElementConstructor<any>>;
export interface Viewport {
currRem: number;
}
export declare const dpiPX2px: (d: number | string) => string;
export declare const px2DPIpx: (d: number | string) => string;
export declare const px2rem: (d: number) => string;
export declare const fabricViewport: () => Viewport;
/**
* 数字格式px转rem
* @param pxValue px值
* @param defaultValue 默认值
* @returns
* ```
* 1. px、defaultValue如果是字符串，不会进行如何处理
* 2. px、defaultValue如果是数字，会使用px2rem处理
* ```
*/
export declare const numberPx2rem: (pxValue?: string | number, defaultValue?: string | number) => string | number | undefined;
/**
* 数字格式px转DPIpx
* @param pxValue px值
* @param defaultValue 默认值
* @returns
* ```
* 1. px、defaultValue如果是字符串，不会进行如何处理
* 2. px、defaultValue如果是数字，会使用DPIpx处理
* ```
*/
export declare const numberPx2DPIpx: (pxValue?: string | number, defaultValue?: string | number) => string | number | undefined;
/**
* 计算H5原生滚动条滚动距离
* @param target
* @returns
*/
export declare const getScrollPosition: (target: BasicDomTarget) => {
left: number;
top: number;
};
export declare function isStyleNameSupport(styleName: string): boolean;
export declare function isStyleValueSupport(styleName: string, value: unknown): boolean;
export declare const isPassiveMode: () => boolean;
export declare const getZIndex: () => number;
export declare const Page404: (props: NativeProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
export type AutoCenterProps = CommonPropsWithChildren;
/**
* 1. 内容不够整行宽度时自动居中
* 2. 内容达到满宽后保持正常的左对齐
* @param props
* @returns
*/
export declare const AutoCenter: (props: AutoCenterProps) => JSX.Element;
export type BadgeProps = CommonPropsWithChildren & {
bgColor?: CSSProperties["color"];
content?: React.ReactNode;
top?: number;
right?: number;
fontSize?: number;
};
export declare const Badge: (props: BadgeProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
/**
* Button内置Var Style
* ```
* 1. --button-color button主色系
* 2. --button-full-solid-bg-color button在solid填充模式下的背景色，默认值：--button-color
* 3. --button-full-solid-text-color button在solid填充模式下的文字颜色，默认值：#fff
* 4. --button-full-solid-loading-color button在solid填充模式下loading颜色，默认值：solid模式默认为白色，其他模式下为--button-color
* 5. --button-full-solid-box-shadow button在solid填充模式下阴影设置，无默认值
*
* 6. --button-full-outline-bg-color button在outline填充模式下背景色，默认值：#fff
* 7. --button-full-outline-box-shadow button在outline填充模式下阴影设置，无默认值
*
* 8. --button-border-radius button button边框圆角数值，默认值：10px
* 9. --button-border-color button边框颜色，solid、outline模式下有效果
* ```
*/
export type ButtonVarStyle = {
"--button-color": CSSProperties["color"];
"--button-font-size": CSSProperties["fontSize"];
"--button-padding": CSSProperties["padding"];
"--button-full-solid-bg-color": CSSProperties["backgroundColor"];
"--button-full-solid-text-color": CSSProperties["color"];
"--button-full-solid-loading-color": CSSProperties["color"];
"--button-full-solid-box-shadow": CSSProperties["boxShadow"];
"--button-full-outline-bg-color": CSSProperties["backgroundColor"];
"--button-full-outline-box-shadow": CSSProperties["boxShadow"];
"--button-border-radius": CSSProperties["borderRadius"];
"--button-border-color": CSSProperties["borderColor"];
};
export type ButtonProps = CommonPropsWithChildren<ButtonVarStyle> & {
type?: "default" | "primary" | "secondary" | "danger";
fill?: "solid" | "outline" | "none";
size?: "mini" | "small" | "middle" | "large";
onClick?: (e: any) => void | Promise<void>;
disabled?: boolean;
inline?: boolean;
ellipsis?: boolean;
beforeIcon?: ReactNode;
afterIcon?: ReactNode;
stopPropagation?: boolean;
loading?: boolean;
/** loading全局蒙层，默认值：false */
loadingMask?: boolean;
debounceDuration?: number;
};
export declare const Button: (props: ButtonProps) => JSX.Element;
export type DayTagItem = {
date: string;
topTag?: string;
label?: string;
bottomTag?: string;
topTagColor?: string;
labelColor?: string;
bottomTagColor?: string;
className?: string;
disabled?: boolean;
};
export type CalendarProps = {
style?: CSSProperties;
/**
* 周排布方式
* ```
* week1-first: 周一在第一位
* week7-first: 周日在第一位
* ```
*/
weekType?: "week1-first" | "week7-first";
/**
* 前后是否填满上一个月和下一个月数据
*/
isFill?: boolean;
minDate: string;
maxDate: string;
onDisabledClick?: (dayItem: TMonthDayItem) => void;
/**
* 选择类型，单选、双选
*/
selectedType?: "two-select" | "one-select";
/** 隐藏月份标题 */
hideMonthTitle?: boolean;
onPreChange?: (dayItem: TMonthDayItem) => Promise<void>;
onChange: (dayInfo: string | string[]) => void;
/**
* 赋值后则为受控更新
*/
value?: string | string[];
defaultValue?: string | string[];
selectedStartTag?: string;
selectedEndTag?: string;
/**
* 配置日历标签，例如：[{ date: '2022-06-03', tag: '端午' }]
*/
dayTagList?: DayTagItem[];
onDayCellRender?: (dayItem: TMonthDayItem & {
dayTagInfo?: DayTagItem;
}) => ReactElement;
tips?: string | ReactElement;
onTips?: () => void;
titleSticky?: boolean;
};
export type TMonthDayItem = {
type?: "empty" | "prev" | "next";
label: string;
week: number;
date: string;
inScope?: boolean;
};
export type CalendarRefApi = {
scrollToTarget: () => void;
};
/**
* 日历组件
* @param props
* @returns
* ```
* 1. 涉及到时间的 格式均为：YYYY-MM-DD（包括：minDate、maxDate、value、defaultValue等）
* 2. dayTagList 配置日历标签，例如：节假日显示
* 3. selectedType 选择类型，单选、双选；默认值：two-select
* 4. weekType: 星期显示格式，周日是否显示在第一列；默认值：week7-first
* 5. 虚拟dom渲染
* androd: 支持前后虚拟dom渲染
* iphone: 支持后虚拟dom渲染（前dom在虚拟变更时webview会上移，固无法实现前虚拟dom效果）
* ```
*/
export declare const Calendar: import("react").ForwardRefExoticComponent<CalendarProps & import("react").RefAttributes<CalendarRefApi>>;
export type ModalDrawerProps = {
visible?: boolean;
mask?: boolean;
onMaskClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
destroyOnClose?: boolean;
forceRender?: boolean;
getContainer?: GetContainer;
onBeforeOpen?: () => void;
onAfterOpen?: () => void;
onBeforeClose?: () => void;
onAfterClose?: () => void;
position?: "bottom" | "top" | "left" | "right";
bodyClassName?: string;
bodyStyle?: CSSProperties;
maskClassName?: string;
maskStyle?: CSSProperties;
closeByMask?: boolean;
onClose?: (operate?: "mask" | "closeIcon") => void;
inline?: boolean;
closeIcon?: boolean;
title?: string | JSX.Element;
bodyRef?: (node: HTMLDivElement) => void;
duration?: number;
} & CommonPropsWithChildren<{
"--modal-border-radius": CSSProperties["borderRadius"];
}>;
export declare const ModalDrawer: FC<ModalDrawerProps>;
export type TCalendarModalChangeData = {
label: string;
value: string;
} | {
label: string;
value: LabelValueItem<string>[];
};
export type CalendarDrawerProps = {
title?: string;
closeIcon?: boolean;
visible?: boolean;
className?: string;
onClose?: TNoopDefine;
modalDrawerProps?: Omit<ModalDrawerProps, "className" | "visible" | "onClose" | "title" | "closeIcon">;
calendarProps: Omit<CalendarProps, "onChange" | "value">;
calendarHeight?: number;
/**
* 是否自动回调
* true / 没有确定按钮
*/
autoFinish?: boolean;
onChange?: (data?: TCalendarModalChangeData) => void;
/**
* 赋值后则为受控更新
*/
value?: string | string[];
};
export declare const CalendarDrawer: FC<CalendarDrawerProps>;
export type CheckListItemValue = string | number;
export type CheckListValue = CheckListItemValue[] | CheckListItemValue | undefined;
export declare const CheckListContext: import("react").Context<{
checkedValues: CheckListItemValue[];
onChange: (value: CheckListItemValue, defaultChange?: boolean) => void;
checkedClassPrefix: string;
stopPropagation?: boolean | undefined;
} | null>;
export type CheckListSelectedValue<T extends "multi" | "radio"> = (T extends "multi" ? CheckListItemValue[] : CheckListItemValue) | CheckListItemValue | CheckListItemValue[];
export type CheckListProps = {
multiple?: boolean;
onChange?: (value: CheckListSelectedValue<never>, operateValue: CheckListItemValue) => void;
onPreChange?: (value: CheckListItemValue) => Promise<void>;
value?: CheckListValue;
defaultValue?: CheckListValue;
beforeExtra?: ReactNode;
afterExtra?: ReactNode;
checkedClassPrefix: string;
stopPropagation?: boolean;
required?: boolean;
} & CommonPropsWithChildren;
export declare const CheckList: (props: CheckListProps) => JSX.Element;
export type CheckListItemContentProps = {
checked?: boolean;
disabled?: boolean;
onClick?: (event: any) => void;
className?: string;
readOnly?: boolean;
};
export type CheckListItemProps = {
value: CheckListItemValue;
disabled?: boolean;
readOnly?: boolean;
children?: string | ReactElement | ((data: CheckListItemContentProps) => ReactElement);
};
export declare const CheckListItem: (props: CheckListItemProps) => ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").FunctionComponentElement<any> | null;
export type CheckboxProps = Omit<CheckListProps, "checkedClassPrefix"> & {
children?: ReactElement | ReactElement[];
};
export declare const Checkbox: (props: CheckboxProps) => ReactElement<any, string | import("react").JSXElementConstructor<any>>;
/**
* ----check-checked-bg-color 默认值: --v-color-primary
* --check-disabled-bg-color 默认值: #ebedf0
*/
export type CheckIconVarStyle = "--check-size" | "--check-bg-color" | "--check-checked-bg-color" | "--check-disabled-bg-color" | "--check-border-color" | "--check-border-radius" | "--check-checked-bg-image";
export type CheckIconProps = {
checked?: boolean;
disabled?: boolean;
onClick?: (e: any) => void;
} & NativeProps<CheckIconVarStyle>;
export declare const CheckIcon: (props: CheckIconProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
export type CheckboxItemProps = {
reverse?: boolean;
checkIconProps?: Pick<CheckIconProps, "style">;
clickArea?: "all" | "checkIcon";
className?: string;
children?: ReactElement;
} & CheckListItemProps;
/**
* ```
* reverse: 勾选区域和文字区域位置对换
* clickArea: 点击区域
* ```
*/
export declare const CheckboxItem: (props: CheckboxItemProps) => JSX.Element;
export type CollapseProps = Omit<CheckListProps, "checkedClassPrefix"> & {
children?: ReactElement;
};
export declare const Collapse: (props: CollapseProps) => ReactElement<any, string | import("react").JSXElementConstructor<any>>;
export type CustomTitleProps = {
checked: boolean;
};
export type CollapseItemProps = {
value: string | number;
title: string | ReactElement;
disabled?: boolean;
hideArrow?: boolean;
} & CommonPropsWithChildren;
/**
* CollapseItem
* ```
* 1. 当属性title为React Dom时，会接收到checked属性
* ```
*/
export declare const CollapseItem: (props: CollapseItemProps) => JSX.Element;
/**
* 倒计时
* ```
* 1. seconds 倒计时秒数
* 2. 默认分隔符 x天x时x分x秒
* ```
*/
export type CountDownProps = {
className?: string;
style?: CSSProperties;
seconds: number;
split?: {
d?: string;
h?: string;
m?: string;
s?: string;
};
onEnd?: TNoopDefine;
};
export declare const CountDown: FC<CountDownProps>;
export type PickerColumnValue = string | number;
export type PickerColumnItem<T extends PickerColumnValue = PickerColumnValue> = {
value: T;
label: string;
};
export type PickerProps = {
pickerDataList: PickerColumnItem[];
value?: PickerColumnValue;
onChange?: (pickerColumnItem: PickerColumnItem) => void;
itemHeight?: number;
} & CommonProps<{
"--height": CSSProperties["height"];
}>;
export declare const Picker: (props: PickerProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
export interface DateViewProps {
minDate: string;
maxDate: string;
defaultDate: string;
value?: string;
onChange?: (pickerColumnItem: PickerColumnItem<string>) => void;
itemHeight?: number;
className?: string;
}
/**
* 选择日期
* 1. 如果minDate、maxDate数据有异常，则系统为minDate、maxDate重新赋值，赋值规则为currentDate的前后两年
*
* https://stackoverflow.com/questions/4310953/invalid-date-in-safari
*/
export declare const DateView: (props: DateViewProps) => JSX.Element | null;
export interface DatePickerProps {
className?: string;
visible?: boolean;
title: string | JSX.Element;
modalProps?: Omit<ModalDrawerProps, "visible" | "className" | "onClose">;
onClose?: () => void;
dateViewProps: Omit<DateViewProps, "className" | "defaultDate" | "onChange" | "value">;
value?: string;
onChange?: (pickerColumnItem: PickerColumnItem<string>) => void;
defaultDate?: string;
}
/**
* 日期选择
*/
export declare const DatePicker: {
(props: DatePickerProps): JSX.Element;
domTypeName: string;
};
export type DateRangePickerChangeParam = {
label: string;
value: Array<PickerColumnItem<string> | null>;
};
export interface DateRangePickerProps {
title?: string | JSX.Element;
closeIcon?: boolean;
visible?: boolean;
value?: [
string | PickerColumnItem<string> | null,
string | PickerColumnItem<string> | null
];
onChange?: (value?: DateRangePickerChangeParam) => void;
modalProps?: Omit<ModalDrawerProps, "visible" | "className" | "title" | "closeIcon">;
onClose?: () => void;
isUnite?: boolean;
dateViewProps: {
minDate: string;
maxDate: string;
};
className?: string;
leftOperateBtn?: {
btnName: string;
onClick?: () => void;
};
header?: JSX.Element;
startDateIsRequired?: boolean;
}
export type DateRangePickerRefApi = {
onChangeTab: (tab: "left" | "right") => void;
};
/**
* 选择日期区间
* ```
* 1. value可设置开始时间和结束时间，['2022-01-01', '2022-02-02']
*
* 2. 如果minDate、maxDate数据有异常，则系统为minDate、maxDate重新赋值，赋值规则为value设置的前后两年
* ```
*/
export declare const DateRangePicker: import("react").ForwardRefExoticComponent<DateRangePickerProps & import("react").RefAttributes<DateRangePickerRefApi>>;
export type ModalProps = {
visible?: boolean;
mask?: boolean;
onMaskClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
destroyOnClose?: boolean;
forceRender?: boolean;
getContainer?: GetContainer;
onBeforeOpen?: () => void;
onAfterOpen?: () => void;
onBeforeClose?: () => void;
onAfterClose?: () => void;
bodyClassName?: string;
bodyStyle?: CSSProperties;
maskClassName?: string;
maskStyle?: CSSProperties;
onClose?: (operate?: "mask" | "closeIcon") => void;
closeByMask?: boolean;
closeIcon?: boolean;
title?: string | JSX.Element;
duration?: number;
clickStopPropagation?: boolean;
} & CommonPropsWithChildren<{
"--modal-border-radius": CSSProperties["borderRadius"];
}>;
export declare const Modal: FC<ModalProps>;
export type ModalAlertProps = ModalProps & {
btnName?: string | JSX.Element;
onClick?: () => void | Promise<void>;
buttonProps?: Omit<ButtonProps, "onClick" | "stopPropagation">;
};
export declare const ModalAlert: FC<ModalAlertProps>;
export type TDialogAlertProps = Omit<ModalAlertProps, "visible" | "getContainer" | "onClose" | "destroyOnClose" | "children"> & {
content: string | JSX.Element;
};
export declare const dialogAlert: (props: TDialogAlertProps) => void;
export type GridProps = {
columns: number;
columnHeight?: number;
gap?: number | [
number,
number
];
} & CommonPropsWithChildren;
/**
* 网格布局
* ```
* 1. columns 水平方向上网格格数
* 2. columnHeight 单个网格高度，视觉稿高度，数值将被转换成rem
* 3. gap 网格间隙，默认值：30
* a. number：上下左右相同
* b. [number, number]: [上下，左右]
* ```
*/
export declare const Grid: (props: GridProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
export type GridItemProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
xSpan?: number;
ySpan?: number;
} & NativeProps;
/**
* Grid单元格
* ```
* 1. xSpan: 单元格水平方向格数
* 1. ySpan: 单元格竖直方向格数
* ```
*/
export declare const GridItem: FC<GridItemProps>;
export type ModalConfirmProps = ModalProps & {
children: string | JSX.Element;
cancelText?: string | JSX.Element;
okText?: string | JSX.Element;
onCancel?: () => void | Promise<void>;
onOK?: () => void | Promise<void>;
reverse?: boolean;
gridGap?: GridProps["gap"];
okButtonProps?: Omit<ButtonProps, "onClick" | "stopPropagation">;
cancelButtonProps?: Omit<ButtonProps, "onClick" | "stopPropagation">;
};
export declare const ModalConfirm: FC<ModalConfirmProps>;
export type TDialogConfirmProps = Omit<ModalConfirmProps, "visible" | "getContainer" | "onClose" | "onClick" | "destroyOnClose" | "children"> & {
content: string | JSX.Element;
};
export declare const dialogConfirm: (props: TDialogConfirmProps) => void;
export type DialogDrawerProps = ModalDrawerProps & {
children: JSX.Element;
};
export declare const dialogDrawer: {
show: (props: DialogDrawerProps) => void;
close: () => void;
};
export interface DialogMessage {
message: string;
onClose?: () => void;
duration?: number;
showMask?: boolean;
className?: string;
}
export declare const dialogMessage: (props: string | DialogMessage) => void;
export type DialogModalProps = Omit<ModalProps, "visible" | "getContainer" | "onClose" | "children"> & {
content: JSX.Element;
};
export declare const dialogModal: {
show: (props: DialogModalProps) => {
closeId: string;
};
close: (params?: {
closeId: string;
}) => void;
};
export declare const dialogPageSpinner: {
show: () => void;
hide: () => void;
};
export interface DialogSpinnerProps {
message?: string;
className?: string;
hideMask?: boolean;
}
export declare const dialogSpinner: {
show: (props?: DialogSpinnerProps) => void;
close: () => void;
};
export interface DialogToastProps {
message: string;
status?: "success" | "error" | "warn";
onClose?: () => void;
duration?: number | false;
hideMask?: boolean;
className?: string;
}
export declare const dialogToast: (props: DialogToastProps) => void;
export type DividerProps = {
height: number | string;
};
/**
* 分割线
* @param props
* @returns
*/
export declare const Divider: (props: DividerProps) => JSX.Element;
export type DropMenuProps = {
content: ReactElement | string;
direction: "bottom" | "top";
visible: boolean;
onClose: () => void;
modalDrawerProps?: Omit<ModalDrawerProps, "visible" | "direction" | "onClose">;
} & CommonPropsWithChildren;
export declare const DropMenu: (props: DropMenuProps) => ReactElement<any, string | import("react").JSXElementConstructor<any>>;
export type TDynamicNodeProps = {
className?: string;
getContainer?: HTMLElement | (() => HTMLElement) | string;
content?: ReactElement;
fixed?: boolean;
style?: CSSProperties;
};
/**
* 动态添加 element 元素
* ```
* 1. 默认添加到 body 下
* 2. 可通过 getContainer 参数设置添加位置
* ```
*/
export declare const dynamicNode: {
append: (props?: TDynamicNodeProps) => {
elementId: string;
};
remove: (elementId?: string) => void;
};
export interface EmptyProps {
text?: string | ReactElement;
desc?: string;
button?: string | ReactElement;
className?: string;
style?: CSSProperties;
isShow: boolean;
}
export declare const Empty: (props: EmptyProps) => JSX.Element | null;
export type FlexLayoutProps = {
fullIndex?: number | number[];
direction?: "vertical" | "horizontal";
height?: number | string;
onClick?: () => void;
gap?: number;
} & CommonPropsWithChildren;
/**
* flex布局
* @param props
* @returns
*/
export declare const FlexLayout: (props: FlexLayoutProps) => JSX.Element;
export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "disbled" | "readOnly">;
declare const Input: {
(props: InputProps): JSX.Element;
domTypeName: string;
};
export type FormItemVarStyle = "--v-form-label-color" | "--v-form-label-font-size" | "--v-form-label-width" | "--v-form-value-color" | "--v-form-value-font-size" | "--v-form-placeholder-color" | "--v-form-placeholder-font-size" | "--v-form-item-border";
export type FormProps = NativeProps<FormItemVarStyle> & {
form: FormMethods;
initialValues?: FieldsData;
onValuesChange?: (changedValues: FieldsData, allValues: FieldsData) => void;
/**
* 是否设置触发异常时，滑到一车区域，默认值 true
*/
scrollIntoView?: boolean;
/**
* 显示默认的异常方式，设置后Form.Item属性showErrorMessage失效
*/
showErrorMessage?: boolean;
children?: ReactNode | ReactNode[];
};
export type FieldItemProps = NativeProps<FormItemVarStyle> & {
name: string;
label?: string | ReactElement;
rules?: RuleItem[];
className?: string;
onClear?: () => void;
children: ReactElement;
validateTrigger?: Array<"onChange" | "onBlur">;
onValidateResponse?: (errorList: FormErrorItem[]) => void;
format?: number[] | ((value?: string) => string);
/**
* 显示默认的异常方式，默认值true
*/
showErrorMessage?: boolean;
/**
* 移动滚动处理
*/
onScrollIntoView?: () => void;
onItemValueChange?: (value: FieldValue, allValues: FieldsData) => void;
showTips?: boolean;
onTips?: () => void;
/**
* 只对输入类型有效
* 1. before-after: 移除前后空格
* 2. all: 移除所有空格
*/
removeSpace?: false | "before-after" | "all";
dependencies?: string[];
/**
* label和value的布局
*/
layout?: "horizontal" | "vertical";
disabled?: boolean;
readOnly?: boolean;
suffix?: JSX.Element | string;
prefix?: JSX.Element | string;
hideRequiredMark?: boolean;
/**
* value 对齐方式；默认值：left
*/
valueAlign?: "left" | "right";
/**
* 自定义结构，label相关配置失效
*/
isCustom?: boolean;
};
export interface FieldItemCustomProps {
label?: string | ReactElement;
name: string;
rules?: FieldRequiredRule[];
className?: string;
children: JSX.Element;
showErrorMessage?: boolean;
onScrollIntoView?: () => void;
onItemValueChange?: (value: FieldValue, allValues: FieldsData) => void;
}
export interface FormErrorItem {
message: string;
name: string;
value: FieldValue;
type: "required" | "regExp" | "custom";
}
export interface FormMethods {
getFieldValue: (name: string) => FieldValue;
getFieldsValue: () => FieldsData;
setFieldsValue: (data: FieldsData) => void;
validateFields: (names?: string[]) => FormErrorItem[];
validateField: (name: string) => FormErrorItem[];
/**
* 验证是否存在未输入的必输项
* ```
* true: 存在必输项
* false: 不存在必输项
* ```
*/
validateFieldsRequired: (names?: string[]) => boolean;
/**
* 清楚页面所有已显示的验证消息
*/
clearValidateMessage: () => void;
/**
* 重置form value为initialValues
*/
onReset: (values?: FieldsData) => void;
/**
* 快捷获取Form.Modal picker控件的value值
* ```
* 例如：
* string | number => string | number;
* { label: 'xx', value: '3' } => '3'
* { label: 'xx', value: { label: 'xx', value: '3' } } => '3'
* { label: 'xx', value: ['1', '2', '3'] } => ['1', '2', '3']
* { label: 'xx', value: [{ label: 'xx', value: '1' },{ label: 'xx', value: '2' }] } => ['1', '2']
* ```
*/
getFormModalPickerValue: <T extends string | number>(value: FieldValue) => T | T[] | undefined;
/**
* 快捷获取Form.Modal非picker控件的value值
* 例如：
* { label: 'xx', value: T } => T
*/
getFormModalValue: (value: FieldValue) => unknown;
_this: any;
}
export type FieldRequiredRule = {
required: boolean;
message: string;
};
export type FieldRegExpRule = {
reg: RegExp;
message: string;
};
export type FieldCustomRule = (data: FieldsData) => {
status: false;
message: string;
} | {
status: true;
};
/**
* 校验规则类型
* 1. 只有字段值类型为字符串的FieldRegExpRule校验才会生效
*/
export type RuleItem = FieldRequiredRule | FieldRegExpRule | FieldCustomRule;
export type FieldValue = string | number | undefined | boolean | Record<string, any> | any[];
export type FieldsData = Record<string, FieldValue>;
/**
* 自定义组件props
*/
export interface FormItemCustomComptProps<V extends FieldValue = FieldValue> {
value?: V;
onChange?: (value?: V) => void;
}
export type FormPickerColumnValueType = PickerColumnValue | PickerColumnItem<PickerColumnValue> | PickerColumnItem<PickerColumnValue>[];
export type FormPickerColumnItem<T extends PickerColumnValue | PickerColumnItem<PickerColumnValue> | PickerColumnItem<PickerColumnValue>[] = FormPickerColumnValueType> = {
label: string;
value: T;
};
export type TFormModalColumnItemValue = string | number;
export type FormModalColumnItem = {
label: string;
value: any;
extraData?: TPlainObject;
};
export type FormTextColumnItem = {
label: string;
value: any;
};
/**
* 自定义Form.Text组件props
*/
export interface FormTextItemCustomComptProps<V extends FieldValue = FieldValue> extends FormItemCustomComptProps<V> {
clickTigger?: number;
}
export type FormModalRefApi = {
onClose: () => void;
};
export type FormModalProps = {
className?: string;
/** isPure = true 无效 */
placeholder?: string;
/** isPure = true 无效 */
adapter?: (value?: FormModalColumnItem) => string | JSX.Element;
children: ReactElement;
/** isPure = true 无效 */
loading?: boolean;
/**
* 是否自定义modal
* ```
* 与 isPure 的与别在于，存在 ListItem 的结构
* ```
*/
isCustom?: boolean;
/**
* 纯净模块
* ```
* 1. 没有任何结构，只做 modal 的状态代理
* 2. 纯净模式默认无触发modal操作结构，可通过pureAction自定义处理
* ```
*/
isPure?: boolean;
/**
* 纯净模块触发节点；isPure = true有效
* @param
* ```
* <FormModal
* isPure
* pureAction={({ onClick }) => {
* return <div onClick={onClick}>点我弹框</div>;
* }}
* >
* <Modal>1</Modal>
* </FormModal>
* ```
*/
pureAction?: (data: {
onClick: (event: any) => void;
}) => ReactElement;
};
declare const FormModal: import("react").ForwardRefExoticComponent<FormModalProps & import("react").RefAttributes<FormModalRefApi>>;
export type ArrowIconVarStyle = "--arrow-color";
export type ArrowDirection = "top" | "right" | "bottom" | "left";
export type ArrowIconProps = {
direction?: ArrowDirection;
fill?: "solid" | "outline" | "none";
disabled?: boolean;
size?: number;
} & NativeProps<ArrowIconVarStyle>;
export declare const ArrowIcon: (props: ArrowIconProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
export type ListItemVarStyle = {
"--list-item-align-items": CSSProperties["alignItems"];
"--list-item-justify-content": CSSProperties["justifyContent"];
};
export type ListItemProps = {
prefix?: string | ReactElement;
extra?: string | ReactElement;
onClick?: (e: React.MouseEvent) => void;
title?: string | ReactElement;
description?: string | ReactElement;
arrow?: true | ArrowIconProps;
icon?: ReactElement;
} & CommonPropsWithChildren<ListItemVarStyle>;
/**
* @param props
* @returns
* ```
* 1. 自定义icon 在未设置arrow情况下有效
* ```
*/
export declare const ListItem: (props: ListItemProps) => ReactElement<any, string | import("react").JSXElementConstructor<any>>;
export type FormTextProps = {
className?: string;
placeholder?: string;
arrow?: ListItemProps["arrow"];
children?: ReactElement;
};
declare const FormText: {
(props: FormTextProps): JSX.Element;
domTypeName: string;
};
export type TextareaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "value" | "defaultValue" | "onChange"> & {
onChange?: (value: string, event: ChangeEvent) => void;
showCount?: boolean;
};
declare const Textarea: {
(props: TextareaProps): JSX.Element;
domTypeName: string;
};
/**
* 键盘Key类型
*```
* xSpan：水平方向跨度
* ySpan：竖直方向跨度
*```
*/
export type KeyboardKeyItem = string | {
key: string;
name: string;
xSpan?: number;
ySpan?: number;
};
export type KeyboardProps = {
type?: "pure_number" | "number" | "idcard";
customKey?: "-" | "." | "X" | null;
customKeyboardKeyList?: KeyboardKeyItem[];
showOkButton?: boolean;
randomOrder?: boolean;
gridColumns?: number;
onConfirm?: () => void;
onBackSpace?: () => void;
onInput: (key: string) => void;
} & NativeProps;
export declare const Keyboard: import("react").NamedExoticComponent<KeyboardProps>;
export type KeyboardModalProps = {
title?: string | JSX.Element;
visible?: boolean;
keyboardProps: KeyboardProps;
modalProps?: Omit<ModalDrawerProps, "visible" | "className" | "title" | "closeIcon" | "onClose">;
closeIcon?: boolean;
onClose: () => void;
} & NativeProps;
export declare const KeyboardModalInner: FC<KeyboardModalProps>;
export declare const KeyboardModal: import("react").NamedExoticComponent<KeyboardModalProps>;
export type VirtualInputProps = {
disabled?: boolean;
readOnly?: boolean;
placeholder?: string;
onFocus?: () => void;
onBlur?: () => void;
onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
keyboardProps?: Omit<KeyboardProps, "onInput" | "onBackSpace" | "onConfirm">;
modalProps?: Omit<ModalDrawerProps, "visible" | "className" | "onClose" | "bodyRef">;
maxLength?: number;
autoConfirm?: boolean;
value?: string;
onChange?: (value: string, key?: string) => void;
} & NativeProps;
declare const VirtualInput: {
(props: VirtualInputProps): JSX.Element;
domTypeName: string;
};
declare const FormItem: FC<FieldItemProps>;
declare const useForm: (form?: FormMethods) => [
FormMethods
];
export type FormStaticMethods = {
Input: typeof Input;
Item: typeof FormItem;
Textarea: typeof Textarea;
useForm: typeof useForm;
VirtualInput: typeof VirtualInput;
/**
* 自定义FormItem，可用于跳转页面取值交互
* ```
* 比普通自定义FormItem，多了一个clickTigger属性，用于触发click事件通知
* ```
*/
Text: typeof FormText;
/**
* 自定义FormItem，用于非Picker类的弹框结构
* 1. 如果为Picker选择器类型的，使用Form.Picker最合适
* 2. 用于非Picker类的弹框结构
*/
Modal: typeof FormModal;
};
/**
* Form组件
* ```
* 1. disabled只有设置在Form.item才能起到作用
* ```
*/
export declare const Form: ((props: FormProps) => JSX.Element) & {
useForm: (form?: FormMethods | undefined) => [
FormMethods
];
useFormInstance: () => FormMethods;
Item: import("react").FC<FieldItemProps>;
Input: {
(props: InputProps): JSX.Element;
domTypeName: string;
};
Textarea: {
(props: Omit<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, "value" | "defaultValue" | "onChange"> & {
onChange?: ((value: string, event: import("react").ChangeEvent<Element>) => void) | undefined;
showCount?: boolean | undefined;
}): JSX.Element;
domTypeName: string;
};
/**
* 虚拟键盘
* ```
* 1. 内置键盘包括：纯数字键盘、金额键盘、身份证键盘
* 2. 可自定义键盘键值，例如自定义车牌省份键盘
* ```
*/
VirtualInput: {
(props: VirtualInputProps): JSX.Element;
domTypeName: string;
};
/**
* 自定义FormItem，可用于跳转页面取值交互
* ```
* 1. 比普通自定义FormItem，多了一个clickTigger属性，用于触发click事件通知
* 2. Form.Text的children props可继承FormTextItemCustomComptProps获取隐藏自定义组件属性
* ```
*/
Text: {
(props: FormTextProps): JSX.Element;
domTypeName: string;
};
/**
* 自定义FormItem，用于弹框结构
* ```
* 弹窗类结构包括两类
* picker类
* 1. 包括：DatePicker、DateRangePicker、ModalUpPicker、TabSelect、ModalSelector等选择器弹窗组件
* a. 此类组件在取值时，使用form.getFormModalPickerValue()可直接获取value值
* b. 赋值结构必须时 value
* 2. 自定义弹框（设置isCustom=true）
* a. 自定义弹框响应数据中，不要存在label、value的定义字段
* b. 回填结构必须是 { label、value }结构，其中label用于页面Form.Item中展示
* ```
*/
Modal: import("react").ForwardRefExoticComponent<FormModalProps & import("react").RefAttributes<FormModalRefApi>>;
};
export type SearchInputFormItemProps = Omit<FieldItemProps, "children"> & {
inputProps?: InputProps;
searchIcon?: "prefix" | "suffix";
onSearch?: (keyword?: string) => void;
};
/**
* 搜索框，必须在Form中使用
* @param props
* @returns
*/
export declare const SearchInputFormItem: (props: SearchInputFormItemProps) => JSX.Element;
export type GapProps = {
className?: string;
style?: CSSProperties;
height?: number;
bgColor?: CSSProperties["backgroundColor"];
};
/**
* 间隙组件
*/
export declare const Gap: FC<GapProps>;
export declare const useArrayChange: <T>(dataList: T[], forceUpdate?: boolean) => readonly [
T[],
{
add: (dataItem: T | T[], isUnshift?: boolean) => void;
update: (index: number, dataItem: T) => void;
delete: (index: number) => T[];
resetList: (dataList: T[]) => void;
getList: () => T[];
}
];
export declare const useClosePageSpinner: () => void;
export type UseCountdownParam = {
targetDate: Date | number | string;
onEnd?: () => void;
};
export interface UseCountdownFormattedRes {
days: number;
hours: number;
minutes: number;
seconds: number;
milliseconds: number;
}
/**
* 倒计时
* @param options
* @returns
*/
export declare const useCountdown: (options: UseCountdownParam) => UseCountdownFormattedRes;
export declare const useEffectCustom: (fn: EffectCallback, deps: DependencyList) => void;
export declare const useEffectCustomAsync: (fn: () => Promise<void>, deps: DependencyList) => void;
export declare const useLockFn: <P extends unknown[] = unknown[], V = unknown>(fn: (...args: P) => Promise<V>) => (...args: P) => Promise<V | undefined>;
/**
* 原生api中用来监听node节点变化
* @param effect
* @param targetRef
* @param options
*/
export declare function useMutationEffect(effect: () => void, target: BasicDomTarget<Element | Document>, options: MutationObserverInit): void;
export type PageErrorProps = {
message?: string;
className?: string;
btnName?: string;
buttonProps?: ButtonProps;
};
export type pageInitRequestOptions = {
getPageErrorContainer?: () => Element | null;
pageErrorProps?: Omit<PageErrorProps, "message">;
};
/**
* 页面初始化请求结构
* @param onRequest 返回值为promise的函数
* ```
* 1. onRequest返回resolve，会执行dialogPageSpinner.hide操作
* 2. onRequest返回reject，会显示页面异常效果
* 3. getPageErrorContainer配置异常页面渲染父级
*
* 可配置window参数
* 1. _account_error = {
* btnName: 按钮名称，默认值：重新登录
* btnType: button类型
* btnFill: button填充模式
* code: 账户异常code码，数组格式,
* logout: 点击登录按钮事件，函数类型
* }
* ```
*/
export declare const usePageInitRequest: (onRequest: () => Promise<any>, options?: pageInitRequestOptions) => void;
export type ShouldUpdateFunc<T> = (prev: T | undefined, next: T) => boolean;
export declare function usePrevious<T>(state: T, shouldUpdate?: ShouldUpdateFunc<T>): T | undefined;
export type Options<T> = {
value?: T;
defaultValue: T;
onChange?: (v: T) => void;
};
export declare function usePropsValue<T>(options: Options<T>): readonly [
T,
(v: T) => void
];
/**
* 监听元素的大小更改
* @param effect
* @param targetRef
*/
export declare function useResizeEffect(effect: () => void, targetRef: RefObject<HTMLElement>): void;
export type ScrollListenController = (val: Position) => boolean;
export type Position = {
left: number;
top: number;
};
/**
* 监听 document & element 滚动
* 理论上 document的监听和element元素的监听是分开的，相互不会影响的，但在iphone中element元素的滚动会触发document的监听
* 例如：一个自然页面，监听页面的滚动，即对document的滚动监听，但是页面中一个弹窗中设置了overflow=scroll，在弹窗内容滚动时，会触发document的滚动监听
* @param callback
* @param scrollTarget 滚动Dom或者Ref
* @param shouldUpdate
*/
export declare const useScrollCallback: (callback: (position: Position) => void, scrollTarget?: BasicDomTarget<Element | Document>, shouldUpdate?: ScrollListenController) => void;
export interface IfProps {
isTrue: boolean;
children?: ReactNode;
}
export declare const If: (props: IfProps) => JSX.Element | null;
export type ImageProps = {
src: string;
lazy?: boolean;
threshold?: number;
imgProps?: Omit<DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "src" | "width" | "height" | "onClick" | "onError" | "onLoad">;
width?: string | number;
height?: string | number;
loading?: ReactNode;
onClick?: (event: React.MouseEvent<HTMLDivElement, Event>) => void;
onError?: (event: SyntheticEvent<HTMLImageElement, Event>) => void;
fit?: CSSProperties["objectFit"];
} & NativeProps;
export declare const Image: FC<ImageProps>;
export type ImageViewerProps = {
images: string[];
visible: boolean;
onClose: () => void;
initActiveIndex?: number;
onAfterClose?: () => void;
destroyOnClose?: boolean;
loop?: boolean;
lazy?: boolean;
maxZoom?: number;
};
export type TDialogImageViewerProps = Pick<ImageViewerProps, "images" | "initActiveIndex">;
export declare const ImageViewer: import("react").FC<ImageViewerProps> & {
show: (props: TDialogImageViewerProps) => void;
};
export type LazyDetectorProps = {
className?: string;
onChange: (inView: boolean) => void;
unobserve?: boolean;
rootMargin?: string;
};
/**
* 判断是否进出最近一个原生滚动条父节点可视区域
* ```
* 1. unobserve表示触发监听后，是否销毁监听功能
* ```
*/
export declare const InVisibleView: (props: LazyDetectorProps) => JSX.Element;
export type IndexBarOptionKey = string | number;
export type IndexBarOption = {
key: IndexBarOptionKey;
name: string;
};
export type IndexBarProps = {
onChange: (key: any) => void;
options: IndexBarOption[];
onTouchStart?: () => void;
onTouchEnd?: () => void;
activeKey?: IndexBarOptionKey;
} & NativeProps;
export declare const IndexBar: (props: IndexBarProps) => JSX.Element;
export type IphoneBottomAdaptiveProps = {
bgColor?: string;
};
export declare const IphoneBottomAdaptive: FC<IphoneBottomAdaptiveProps>;
export type ListProps = {
mode?: "default" | "card";
gap?: number;
} & CommonPropsWithChildren<ListItemVarStyle>;
export declare const List: (props: ListProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
export type ModalFullProps = ModalProps;
export declare const ModalFull: FC<ModalFullProps>;
export type ModalPoptipProps = {
content: string | JSX.Element;
} & Omit<ModalProps, "getContainer">;
export declare const ModalPoptip: (props: ModalPoptipProps) => JSX.Element;
export type TModalSelectorDataItem = {
label: string;
value: string | number;
extraData?: TPlainObject;
};
export type TModalSelectorValue = string | number | Array<string | number>;
export type TModalSelectorRespItem = TModalSelectorDataItem | {
label: string;
value: TModalSelectorDataItem[];
};
export interface ModalSelectorProps {
visible?: boolean;
className?: string;
title: string | ReactElement;
value?: TModalSelectorValue;
multiple?: boolean;
selectorList: TModalSelectorDataItem[];
onClose?: () => void;
onChange?: (value?: TModalSelectorRespItem) => void;
/**
* 弹框中是否添加选择确认按钮，默认值true
*/
needSelectConfirm?: boolean;
required?: boolean;
onValueChange?: (data?: TModalSelectorDataItem | TModalSelectorDataItem[]) => void;
labelAdaptive?: (dataItem: TModalSelectorDataItem) => ReactElement | string;
checkItemAdaptive?: (checkItem: TModalSelectorDataItem & CheckListItemContentProps) => ReactElement;
showSearch?: true | Omit<SearchInputFormItemProps, "name" | "onSearch">;
/**
* 文案配置
*/
copyWritingConfigs?: {
selectorListIsEmpty?: string | ReactElement;
searchListIsEmpty?: string | ReactElement;
confirmButton?: string | ReactElement;
};
contentBeforeRender?: ReactElement;
contentAfterRender?: ReactElement;
/**
* 选择器列表高度，默认值600，组件会对数值进行px2rem处理
*/
selectorListHeight?: number;
modalDrawerProps?: Omit<ModalDrawerProps, "visible" | "className" | "title" | "onClose">;
}
/**
* 弹框勾选组件
* ```
* 1. 与Form结合使用取值方式
* 例如：
* b. 取值格式: { label: '白金会员', value: '1' }
* 可通过使用form.getFormModalPickerValue(value) 直接取值 => '1'
* ```
*/
export declare const ModalSelector: FC<ModalSelectorProps>;
export type TModalUpPickerDataItem = {
label: string;
value: string | number;
extraData?: TPlainObject;
};
export interface ModalUpPickerProps {
className?: string;
visible?: boolean;
title: string;
itemHeight?: number;
pickerDataList: TModalUpPickerDataItem[];
onChange?: PickerProps["onChange"];
onClose?: () => void;
value?: PickerProps["value"];
drawerProps?: Omit<ModalDrawerProps, "visible" | "className">;
header?: ReactElement | string;
onValueChange?: (selectedData?: TModalUpPickerDataItem) => {};
}
/**
* 自定义选择器
* ```
* 1. 可自定义header结构
* 2. 与Form结合使用赋值与取值方式
* 例如：
* a. 赋值格式: { label: '白金会员', value: '1' }
* b. 取值格式:
* {
* label: '白金会员',
* value: '1'
* }
* 可通过使用form.getFormModalPickerValue(value) 直接取值 => '1'
* ```
*/
export declare const ModalUpPicker: (props: ModalUpPickerProps) => JSX.Element;
export type NativeInfiniteScrollProps = {
onLoadMore: () => Promise<any>;
hasMore: boolean;
visible?: boolean;
children?: ReactNode | ReactNode[];
noMoreText?: string | ReactElement;
} & NativeProps;
export type NativeInfiniteScrollRefApi = {
scrollToTop: () => void;
};
export declare const NativeInfiniteScroll: import("react").ForwardRefExoticComponent<{
onLoadMore: () => Promise<any>;
hasMore: boolean;
visible?: boolean | undefined;
children?: ReactNode | ReactNode[];
noMoreText?: string | ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
} & NativeProps<never> & import("react").RefAttributes<NativeInfiniteScrollRefApi>>;
export type PullStatus = "pulling" | "canRelease" | "refreshing" | "complete";
export type NativePullToRefreshProps = {
onRefresh: () => Promise<any>;
pullingText?: ReactNode;
canReleaseText?: ReactNode;
refreshingText?: ReactNode;
completeText?: ReactNode;
completeDelay?: number;
headHeight?: number;
threshold?: number;
renderText?: (status: PullStatus) => ReactNode;
className?: string;
style?: CSSProperties;
children?: ReactNode | ReactNode[];
};
export type NativePullToRefreshRefApi = {
scrollToTop: () => void;
};
export declare const NativePullToRefresh: import("react").ForwardRefExoticComponent<NativePullToRefreshProps & import("react").RefAttributes<NativePullToRefreshRefApi>>;
export type NativeListViewProps = {
height?: number | string;
infiniteScrollProps: NativeInfiniteScrollProps;
pullToRefreshProps: NativePullToRefreshProps;
className?: string;
style?: CSSProperties;
onInitialize?: () => void;
children?: ReactNode | ReactNode[];
empty?: ReactElement;
loading?: ReactElement;
};
export type NativeListViewRefApi = {
scrollToTop: () => void;
};
export declare const NativeListView: import("react").ForwardRefExoticComponent<NativeListViewProps & import("react").RefAttributes<NativeListViewRefApi>>;
export type NativeScrollType = "x" | "y" | "xy" | "hidden";
export type NativeScrollProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
scroll?: NativeScrollType;
height?: string | number;
children: ReactNode | ReactNode[];
} & NativeProps;
/**
* Html原生滚动条
* ```
* 当父节点存在高度时，滚动条才会生效，滚动条事件才会生效
* ```
*/
export declare const NativeScroll: import("react").ForwardRefExoticComponent<Omit<NativeScrollProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
export type NoticeBarProps = CommonPropsWithChildren & {
prefix?: ReactNode;
extra?: ReactNode;
/**
* 滚动速度，单位 px/s
* 需要滚动的总宽度/speed 为滚动时长
*/
speed?: number;
loop?: boolean;
onAnimatingEnd?: () => void;
/**
* 是否自动开始滚动，默认值true
*/
autoStart?: boolean;
/**
* 开始滚动的延迟，单位 ms
* autoStart=false，无效
*/
delay?: number;
/**
* 受控状态
*/
controlledStatus?: "start" | "stop";
/**
* 内容未达到最大宽度，显示时长，单位 ms
* 时间到会调用onAnimatingEnd方法
*/
duration?: number;
};
/**
* 通知栏
*
* ```
* 默认值设置
* delay: 2000
* autoStart: true,
* loop: true,
* // 滚动速度，单位 px/s（需要滚动的总宽度/speed）
* speed: 50,
* duration: 2000
* ```
*/
export declare const NoticeBar: FC<NoticeBarProps>;
export type NoticeBarListProps = {
height: number | string;
className?: string;
style?: CSSProperties;
noticeContent: ReactNode[];
prefix?: ReactNode;
extra?: ReactNode;
speed?: number;
/**
* 开始滚动的延迟，单位 ms
* autoStart=false，无效
*/
delay?: number;
/**
* 内容未达到最大宽度，显示时长
*/
duration?: number;
};
/**
* 通知栏多条消息
* @param props
* @returns
*/
export declare const NoticeBarList: FC<NoticeBarListProps>;
export type NumberAnimationProps = {
startNumber: number;
endNumber: number;
delay?: number;
precision?: number;
duration?: number;
} & NativeProps;
/**
* 数字动画组件
* ```
* 1. delay: 延迟滚动毫秒时间；默认值：400
* 2. precision: 数字显示精度；默认值：0
* 3. duration: 动画持续毫秒时间；默认值：1500
* ```
*/
export declare const NumberAnimation: FC<NumberAnimationProps>;
export type PageProps = {
isFixed?: boolean;
flexFullIndex?: number | number[];
} & CommonPropsWithChildren;
export declare const Page: (props: PageProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
export type DialogPageErrorProps = PageErrorProps & {
getContainer?: () => Element | null;
};
export declare const PageError: (props: PageErrorProps) => JSX.Element;
export declare const dialogPageError: {
show: (props?: DialogPageErrorProps | undefined) => void;
hide: () => void;
};
export type PasscodeProps = CommonPropsWithChildren & {
gridsCount?: number;
value: string;
isPlain?: boolean;
isError?: boolean;
isFocused?: boolean;
onFocus?: (e: React.FocusEvent<HTMLDivElement>) => void;
onBlur?: () => void;
};
export declare const Passcode: (props: PasscodeProps) => JSX.Element;
export type PasscodeInputProps = CommonPropsWithChildren & {
defaultValue?: string;
onInputFinish: (value: string) => Promise<void>;
gridsCount?: number;
isPlain?: boolean;
};
export declare const PasscodeInput: (props: PasscodeInputProps) => JSX.Element;
export type PasscodeKeyboardProps = {
gridsCount?: number;
isPlain?: boolean;
defaultValue?: string;
onInputFinish: (value: string) => Promise<void>;
className?: string;
style?: CSSProperties;
};
export declare const PasscodeKeyboard: FC<PasscodeKeyboardProps>;
export type PickerCascadeDataSourceItem = PickerColumnItem & {
children?: PickerColumnItem[];
};
export type PickerCascadeProps = {
dataSource: PickerCascadeDataSourceItem[];
value?: PickerColumnValue[];
onChange?: (pickerColumnItem: PickerColumnItem[]) => void;
} & CommonProps<{
"--height": CSSProperties["height"];
}>;
export declare const PickerCascade: (props: PickerCascadeProps) => JSX.Element;
export interface ModalUpPickerCascadeProps {
className?: string;
visible?: boolean;
title: string;
itemHeight?: number;
dataSource: PickerCascadeProps["dataSource"];
onChange?: (data: {
label: string;
value: PickerColumnItem<PickerColumnValue>[];
}) => void;
onClose?: () => void;
value?: PickerCascadeProps["value"];
drawerProps?: Omit<ModalDrawerProps, "visible" | "className">;
header?: ReactElement | string;
onValueChange?: (selectedData?: LabelValueItem[]) => {};
}
/**
* 级联选择器
* ```
* 1. 可自定义header结构
* 2. 与Form结合使用赋值与取值方式
* 例如：
* a. 赋值格式1: { label: '三国演义/诸葛亮', value: [{ label: '三国演义', value: '1' }, { label: '诸葛亮', value: '1-1' }]}
* a. 赋值格式2: { label: '三国演义/诸葛亮', value: ['1', '1-1']}
* b. 取值格式:
* {
* label: '三国演义/诸葛亮',
* value: [{ label: '三国演义', value: '1' }, { label: '诸葛亮', value: '1-1' }]
* }
* 可通过使用form.getFormModalPickerValue(value) 直接取值 => ['1', '1-1']
* ```
*/
export declare const ModalUpPickerCascade: (props: ModalUpPickerCascadeProps) => JSX.Element;
export interface IProgressProps {
value: number;
size?: number;
gap?: number;
className?: string;
isRotate?: boolean;
children?: ReactNode;
}
export declare const Progress: (props: IProgressProps) => JSX.Element | null;
export type SelectorOptionItem = {
label: string;
value: CheckListItemValue;
labelElement?: JSX.Element;
disabled?: boolean;
readOnly?: boolean;
};
export type SelectorItemAdapterProps = {
label: string | JSX.Element;
checked?: boolean;
disabled?: boolean;
readOnly?: boolean;
};
export type SelectorProps = Omit<CheckListProps, "checkedClassPrefix"> & {
gap?: number | [
number,
number
];
options: Array<SelectorOptionItem>;
mode: "freedom" | "grid";
gridProps?: {
columns: number;
columnHeight?: number;
};
freedomProps?: {
wrap?: boolean;
style?: CSSProperties;
};
disabled?: boolean;
adapter?: (data: SelectorItemAdapterProps) => JSX.Element;
};
/**
* 选择器
* @param props
* @returns
* ```
* 1. mode：'freedom' | 'grid';
* 选择器包含两种模式，分别是freedom（自由模式）和grid（网格模式）
* 2. 自由模式: SelectorItem宽度不固定，随内容而变化; 具体由参数FreedomProps控制
* 3. 网格模式: SelectorItem宽度为外层宽度的