mobile-more
Version:
基于 antd-mobile v5 扩展移动端 UI 组件
140 lines (139 loc) • 4.25 kB
TypeScript
import React from 'react';
import { PopoverProps } from 'antd-mobile';
import { WithFieldProps } from '../BizField/interface';
import { StyleWithVariable } from '../../types';
import './index.less';
export interface BizDescriptionsItemProps extends React.HTMLAttributes<HTMLDivElement> {
/**
* @description 标签。
*/
label?: React.ReactNode;
/**
* @description 标签样式。
*/
labelStyle?: React.CSSProperties;
/**
* @description 标签类名。
*/
labelClassName?: string;
/**
* @description 内容样式。
*/
contentStyle?: React.CSSProperties;
/**
* @description 内容类名。
*/
contentClassName?: string;
/**
* @description 提示文本。
*/
help?: React.ReactNode;
/**
* @description 提示图标。
*/
helpIcon?: PopoverProps['children'];
/**
* @description 提示弹出层属性。
*/
popoverProps?: Omit<PopoverProps, 'content' | 'children'>;
}
declare const BizDescriptionsItem: React.FC<BizDescriptionsItemProps>;
type DataIndexType = string | number;
type NodeNameType = 'label' | 'content';
export type BizDescriptionsItemType<DataType = any> = Pick<BizDescriptionsItemProps, 'label' | 'help' | 'helpIcon' | 'style' | 'className' | 'popoverProps' | 'children'> & {
/**
* @description 节点样式。
*/
styles?: Partial<Record<NodeNameType, React.CSSProperties>>;
/**
* @description 节点类名。
*/
classNames?: Partial<Record<NodeNameType, string>>;
/**
* @description 是否隐藏。
*/
hidden?: boolean;
/**
* @description 数据索引。
*
* 如果没有`children`，则从数据中获取`dataIndex`对应的值，根据`valueType`进行渲染。
*
* 支持对象路径，如 `a.b.c`。
*
* 数组表示多个值的索引，同样支持对象路径。
*/
dataIndex?: DataIndexType | DataIndexType[];
/**
* @description 自定义渲染。
*
* 如果没有`children`，则从数据中获取`dataIndex`对应的值，根据`valueType`进行渲染。
*
* 如果有`children`，则直接渲染`children`。
*
* @param value 当前索引值
* @param record 数据源
* @param index 当前渲染的序列号
* @returns
*/
render?: (value: any, record: DataType, index: number) => React.ReactNode;
} & WithFieldProps<DataType>;
export interface BizDescriptionsProps<DataType extends object = any> {
/**
* @description 标题。
*/
title?: React.ReactNode;
/**
* @description 冒号。
*/
colon?: boolean;
/**
* @description 自定义样式。
*/
style?: StyleWithVariable<'--font-size' | '--color' | '--title-color' | '--padding-inner' | '--justify-content' | '--flex-direction' | '--label-color' | '--label-width' | '--label-text-align' | '--content-color' | '--content-text-align'>;
/**
* @description 数据源。
*/
dataSource?: DataType;
/**
* @description 描述列表项内容。
*/
items?: BizDescriptionsItemType<DataType>[];
/**
* @deprecated 即将移除，请使用 `items` 代替。
*/
children?: React.ReactNode;
/**
* @description 类名。
*/
className?: string;
/**
* @description 提示文本。
*/
help?: React.ReactNode;
/**
* @description 提示图标。
*/
helpIcon?: PopoverProps['children'];
/**
* @description 提示弹出层属性。
*/
popoverProps?: Omit<PopoverProps, 'content' | 'children'>;
}
declare const BizDescriptions: React.FC<BizDescriptionsProps> & {
Item: typeof BizDescriptionsItem;
};
/**
* @deprecated 即将废弃，请使用 `BizDescriptionsItemProps` 替代。
*/
export type DescriptionsItemProps = BizDescriptionsItemProps;
/**
* @deprecated 即将废弃，请使用 `BizDescriptionsProps` 替代。
*/
export type DescriptionsProps = BizDescriptionsProps;
/**
* @deprecated 即将废弃，请使用 `BizDescriptions` 替代。
*/
export declare const Descriptions: React.FC<BizDescriptionsProps<any>> & {
Item: typeof BizDescriptionsItem;
};
export default BizDescriptions;