You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2009 lines
61 KiB
2009 lines
61 KiB
// Type definitions for Antd v1.0.1
|
|
// Project: http://ant.design
|
|
// Definitions by: bang88 <https://github.com/bang88>, Bruce Mitchener <https://github.com/waywardmonkeys/>
|
|
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
|
|
|
import * as React from 'react'
|
|
|
|
declare namespace Antd {
|
|
// Affix
|
|
interface AffixProps {
|
|
/**
|
|
* 距离窗口顶部达到指定偏移量后触发
|
|
*/
|
|
offsetTop?: number,
|
|
offsetBottom?: number,
|
|
style?: React.CSSProperties
|
|
}
|
|
/**
|
|
* # Affix
|
|
* 将页面元素钉在可视范围。
|
|
* ## 何时使用
|
|
* 当内容区域比较长，需要滚动页面时，这部分内容对应的操作或者导航需要在滚动范围内始终展现。常用于侧边菜单和按钮组合。
|
|
* 页面可视范围过小时，慎用此功能以免遮挡页面内容。
|
|
*/
|
|
export class Affix extends React.Component<AffixProps, {}> {
|
|
}
|
|
|
|
type AlertType = 'success' | 'info' | 'warning' | 'error'
|
|
|
|
// Alert
|
|
interface AlertProps {
|
|
/**
|
|
* 必选参数，指定警告提示的样式，有四种选择`success`、`info`、`warn`、`error`
|
|
*/
|
|
type: AlertType,
|
|
/**可选参数，默认不显示关闭按钮 */
|
|
closable?: boolean,
|
|
/**可选参数，自定义关闭按钮 */
|
|
closeText?: React.ReactNode,
|
|
/**必选参数，警告提示内容 */
|
|
message: React.ReactNode,
|
|
/**可选参数，警告提示的辅助性文字介绍 */
|
|
description?: React.ReactNode,
|
|
/**可选参数，关闭时触发的回调函数 */
|
|
onClose?: Function,
|
|
/**可选参数，是否显示辅助图标 */
|
|
showIcon?: boolean,
|
|
|
|
style?: React.CSSProperties
|
|
}
|
|
|
|
/**
|
|
* # Alert
|
|
* 警告提示，展现需要关注的信息。
|
|
|
|
* ## 何时使用
|
|
|
|
* - 当某个页面需要向用户显示警告的信息时。
|
|
* - 非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。
|
|
* */
|
|
export class Alert extends React.Component<AlertProps, {}> {
|
|
}
|
|
|
|
|
|
interface BadgeProps {
|
|
/** 展示的数字，大于 overflowCount 时显示为 `${overflowCount}+`，为 0 时隐藏*/
|
|
count: number,
|
|
/** 展示封顶的数字值*/
|
|
overflowCount?: number,
|
|
/** 不展示数字，只有一个小红点*/
|
|
dot?: boolean,
|
|
|
|
style?: React.CSSProperties
|
|
}
|
|
// Badge
|
|
/**
|
|
* #Badge
|
|
*
|
|
* 图标右上角的圆形徽标数字。
|
|
|
|
* ## 何时使用
|
|
|
|
* 一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数，通过醒目视觉形式吸引用户处理。
|
|
*
|
|
*/
|
|
export class Badge extends React.Component<BadgeProps, {}> {
|
|
}
|
|
|
|
type ButtonType = 'primary' | 'ghost' | 'dashed'
|
|
type ButtonShape = 'circle' | 'circle-outline'
|
|
type ButtonSize = 'small' | 'large'
|
|
// Button
|
|
interface ButtonProps {
|
|
/** 设置按钮类型，可选值为 `primary` `ghost` 或者不设 */
|
|
type?: ButtonType,
|
|
/** 设置 `button` 原生的 `type` 值，可选值请参考 HTML标准*/
|
|
htmlType?: string,
|
|
|
|
icon?: string,
|
|
/** 设置按钮形状，可选值为 `circle` `circle-outline` 或者不设*/
|
|
shape?: ButtonShape,
|
|
/** 设置按钮大小，可选值为 `small` `large` 或者不设*/
|
|
size?: ButtonSize,
|
|
/** `click` 事件的 handler*/
|
|
onClick?: React.FormEventHandler,
|
|
/** 设置按钮载入状态*/
|
|
loading?: boolean,
|
|
|
|
disabled?: boolean,
|
|
|
|
style?: React.CSSProperties
|
|
}
|
|
|
|
|
|
interface ButtonGroupProps {
|
|
/** 设置按钮大小，可选值为 `small` `large` 或者不设*/
|
|
size?: ButtonSize,
|
|
|
|
style?: React.CSSProperties
|
|
}
|
|
|
|
/**
|
|
可以将多个 `Button` 放入 `Button.Group` 的容器中。
|
|
|
|
通过设置 `size` 为 `large` `small` 分别把按钮组合设为大、小尺寸。若不设置 `size`，则尺寸为中。*/
|
|
class ButtonGroup extends React.Component<ButtonGroupProps, {}> {
|
|
}
|
|
|
|
/**
|
|
* #Button
|
|
按钮用于开始一个即时操作。
|
|
|
|
## 何时使用
|
|
|
|
标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。*/
|
|
export class Button extends React.Component<ButtonProps, {}> {
|
|
static Group: typeof ButtonGroup
|
|
}
|
|
|
|
// Breadcrumb
|
|
|
|
interface BreadcrumbItemProps {
|
|
/** 链接，如不传则不可点击 */
|
|
href?: string
|
|
}
|
|
export class BreadcrumbItem extends React.Component<BreadcrumbItemProps, {}> {
|
|
}
|
|
|
|
interface BreadcrumbProps {
|
|
prefixCls?: string,
|
|
/** router 的路由栈信息 */
|
|
routes?: Array<React.ReactNode>,
|
|
/** 路由的参数*/
|
|
params?: Object,
|
|
/** 分隔符自定义*/
|
|
separator?: string | React.ReactNode,
|
|
linkRender?: (path: string, name: string) => React.ReactNode,
|
|
nameRender?: (name: string) => React.ReactNode
|
|
|
|
style?: React.CSSProperties
|
|
}
|
|
/**
|
|
* #Breadcrumb
|
|
显示当前页面在系统层级结构中的位置，并能向上返回。
|
|
|
|
## 何时使用
|
|
|
|
- 当系统拥有超过两级以上的层级结构时；
|
|
- 当需要告知用户“你在哪里”时；
|
|
- 当需要向上导航的功能时。*/
|
|
export class Breadcrumb extends React.Component<BreadcrumbProps, {}> {
|
|
static Item: typeof BreadcrumbItem
|
|
}
|
|
|
|
export interface GregorianCalendar {
|
|
getMonth(): number,
|
|
getYear(): number,
|
|
getDayOfMonth(): string,
|
|
getHourOfDay(): string,
|
|
getMinutes(): number,
|
|
getSeconds(): number,
|
|
getMilliSeconds(): number,
|
|
getWeekOfYear(): number,
|
|
getWeekOfMonth(): number,
|
|
getDayOfYear(): number,
|
|
getDayOfWeek(): number,
|
|
getDayOfWeekInMonth(): number,
|
|
getWeekYear(): number,
|
|
getWeeksInWeekYear(): number
|
|
}
|
|
|
|
type CalendarMode = 'month' | 'year';
|
|
|
|
// Calendar
|
|
interface CalendarProps {
|
|
/** 自定义渲染月单元格*/
|
|
monthCellRender?: (value: GregorianCalendar, locale: any) => React.ReactNode,
|
|
/** 自定义渲染日期单元格*/
|
|
dateCellRender?: (value: GregorianCalendar) => React.ReactNode,
|
|
/** 是否全屏显示*/
|
|
fullscreen?: boolean,
|
|
/** 国际化配置*/
|
|
locale?: Object,
|
|
prefixCls?: string,
|
|
className?: string,
|
|
/** 日期面板变化回调*/
|
|
onPanelChange?: (value: GregorianCalendar, mode: CalendarMode) => void,
|
|
/** 展示日期*/
|
|
value?: Date,
|
|
/** 默认展示日期*/
|
|
defaultValue?: Date,
|
|
/** 初始模式，`month/year`*/
|
|
mode?: CalendarMode,
|
|
|
|
style?: React.CSSProperties
|
|
}
|
|
/**
|
|
* #Calendar
|
|
按照日历形式展示数据的容器。
|
|
|
|
## 何时使用
|
|
|
|
当数据是日期或按照日期划分时，例如日程、课表、价格日历等，农历等。目前支持年/月切换。
|
|
*/
|
|
export class Calendar extends React.Component<CalendarProps, {}> {
|
|
}
|
|
|
|
type CarouselEffect = 'scrollx' | 'fade'
|
|
// Carousel
|
|
interface CarouselProps {
|
|
/** 动画效果函数，可取 scrollx, fade*/
|
|
effect?: CarouselEffect,
|
|
/** 是否显示面板指示点*/
|
|
dots?: boolean,
|
|
/** 垂直显示*/
|
|
vertical?: boolean,
|
|
/** 是否自动切换*/
|
|
autoplay?: boolean,
|
|
/** 动画效果*/
|
|
easing?: string,
|
|
/** 切换面板的回调*/
|
|
beforeChange?: (from: number, to: number) => void,
|
|
/** 切换面板的回调*/
|
|
afterChange?: (current: number) => void,
|
|
|
|
style?: React.CSSProperties
|
|
}
|
|
/**
|
|
* #Carousel
|
|
旋转木马，一组轮播的区域。
|
|
|
|
## 何时使用
|
|
|
|
- 当有一组平级的内容。
|
|
- 当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。
|
|
- 常用于一组图片或卡片轮播。
|
|
*/
|
|
export class Carousel extends React.Component<CarouselProps, {}> {
|
|
}
|
|
|
|
export interface CascaderOptionType {
|
|
value: string,
|
|
label: string,
|
|
disabled?: boolean,
|
|
children?: Array<CascaderOptionType>
|
|
}
|
|
|
|
type CascaderExpandTrigger = 'click' | 'hover'
|
|
// Cascader
|
|
interface CascaderProps {
|
|
/** 可选项数据源*/
|
|
options: Array<CascaderOptionType>,
|
|
/** 默认的选中项*/
|
|
defaultValue?: Array<CascaderOptionType>,
|
|
/** 指定选中项*/
|
|
value?: Array<CascaderOptionType>,
|
|
/** 选择完成后的回调*/
|
|
onChange?: (value: string, selectedOptions: CascaderOptionType) => void,
|
|
/** 选择后展示的渲染函数*/
|
|
displayRender?: (label: Array<string>) => React.ReactNode,
|
|
/** 自定义样式*/
|
|
style?: React.CSSProperties,
|
|
/** 自定义类名*/
|
|
className?: string,
|
|
/** 自定义浮层类名*/
|
|
popupClassName?: string,
|
|
/** 浮层预设位置：`bottomLeft` `bottomRight` `topLeft` `topRight` */
|
|
popupPlacement?: string,
|
|
/** 输入框占位文本*/
|
|
placeholder?: string,
|
|
/** 输入框大小，可选 `large` `default` `small` */
|
|
size?: string,
|
|
/** 禁用*/
|
|
disabled?: boolean,
|
|
/** 是否支持清除*/
|
|
allowClear?: boolean,
|
|
|
|
expandTrigger?: CascaderExpandTrigger,
|
|
|
|
changeOnSelect?: boolean
|
|
}
|
|
/**
|
|
* #Cascader
|
|
级联选择框。
|
|
|
|
|
|
## 何时使用
|
|
|
|
- 需要从一组相关联的数据集合进行选择，例如省市区，公司层级，事物分类等。
|
|
- 从一个较大的数据集合中进行选择时，用多级分类进行分隔，方便选择。
|
|
- 比起 Select 组件，可以在同一个浮层中完成选择，有较好的体验。*/
|
|
export class Cascader extends React.Component<CascaderProps, {}> {
|
|
}
|
|
|
|
// Checkbox
|
|
interface CheckboxProps {
|
|
/** 指定当前是否选中*/
|
|
checked?: boolean,
|
|
/** 初始是否选中*/
|
|
defaultChecked?: boolean,
|
|
/** 变化时回调函数*/
|
|
onChange?: React.FormEventHandler,
|
|
|
|
style?: React.CSSProperties
|
|
}
|
|
|
|
export interface CheckboxOptionType {
|
|
label: string,
|
|
value: string,
|
|
disabled?: boolean
|
|
}
|
|
|
|
interface CheckboxGroupProps {
|
|
/** 默认选中的选项*/
|
|
defaultValue?: Array<string>,
|
|
/** 指定选中的选项*/
|
|
value?: Array<string>,
|
|
/** 指定可选项*/
|
|
options?: Array<CheckboxOptionType> | Array<string>,
|
|
/** 变化时回调函数*/
|
|
onChange?: (checkedValue: Array<string>) => void,
|
|
|
|
disabled?: boolean,
|
|
|
|
style?: React.CSSProperties
|
|
}
|
|
/** Checkbox 组*/
|
|
class CheckboxGroup extends React.Component<CheckboxGroupProps, {}> {
|
|
}
|
|
/**
|
|
* #Checkbox
|
|
多选框。
|
|
|
|
## 何时使用
|
|
|
|
- 在一组可选项中进行多项选择时；
|
|
- 单独使用可以表示两种状态之间的切换，和 `switch` 类似。区别在于切换 `switch` 会直接触发状态改变，而 `checkbox` 一般用于状态标记，需要和提交操作配合。
|
|
*/
|
|
export class Checkbox extends React.Component<CheckboxProps, {}> {
|
|
static Group: typeof CheckboxGroup
|
|
}
|
|
|
|
// Collapse
|
|
|
|
interface CollapseProps {
|
|
/** 当前激活 tab 面板的 key*/
|
|
activeKey?: Array<string> | string,
|
|
/** 初始化选中面板的key */
|
|
defaultActiveKey?: Array<string>,
|
|
/** accordion 为 true 的时候，一次只可以打开一个面板 */
|
|
accordion?: boolean,
|
|
/** 切换面板的回调*/
|
|
onChange?: (key: string) => void,
|
|
|
|
style?: React.CSSProperties
|
|
}
|
|
|
|
interface CollapsePanelProps {
|
|
/** 对应 activeKey */
|
|
key: string,
|
|
/** 面板头内容*/
|
|
header: React.ReactNode,
|
|
|
|
style?: React.CSSProperties
|
|
}
|
|
|
|
class CollapsePanel extends React.Component<CollapsePanelProps, {}> {
|
|
}
|
|
/**
|
|
* #Collapse
|
|
可以折叠/展开的内容区域。
|
|
|
|
## 何时使用
|
|
|
|
- 对复杂区域进行分组和隐藏，保持页面的整洁。
|
|
- `手风琴` 是一种特殊的折叠面板，只允许单个内容区域展开。*/
|
|
export class Collapse extends React.Component<CollapseProps, {}> {
|
|
static Panel: typeof CollapsePanel
|
|
}
|
|
|
|
type DatePickerDateType = string | Date;
|
|
|
|
// DatePicker
|
|
interface DatePickerProps {
|
|
|
|
value?: DatePickerDateType,
|
|
defaultValue?: DatePickerDateType,
|
|
/** 展示的日期格式，配置参考 [GregorianCalendarFormat](https://github.com/yiminghe/gregorian-calendar-format)*/
|
|
format?: string,
|
|
/** 不可选择的日期*/
|
|
disabledDate?: Function,
|
|
/** 时间发生变化的回调，发生在用户选择时间时*/
|
|
onChange?: (date: Date, dateString: string) => void,
|
|
/** 禁用*/
|
|
disabled?: boolean,
|
|
style?: React.CSSProperties,
|
|
/** 格外的弹出日历样式*/
|
|
popupStyle?: React.CSSProperties,
|
|
/** 输入框大小，`large` 高度为 32px，`small` 为 22px，默认是 28px*/
|
|
size?: 'large' | 'small',
|
|
/** 国际化配置*/
|
|
locale?: Object,
|
|
/** 增加时间选择功能*/
|
|
showTime?: boolean,
|
|
/** 点击确定按钮的回调*/
|
|
onOk?: (value: Date) => void,
|
|
/** 定义浮层的容器，默认为 body 上新建 div*/
|
|
getCalendarContainer?: Function
|
|
|
|
}
|
|
|
|
interface RangePickProps {
|
|
value?: Array<DatePickerDateType>,
|
|
defaultValue?: Array<DatePickerDateType>,
|
|
format?: string,
|
|
onChange?: (date: Array<Date>, dateString: Array<string>) => void,
|
|
style: React.CSSProperties,
|
|
showTime: boolean | Object
|
|
|
|
}
|
|
class RangePicker extends React.Component<RangePickProps, {}> {
|
|
}
|
|
|
|
interface MonthPickProps {
|
|
value?: DatePickerDateType,
|
|
defaultValue?: DatePickerDateType,
|
|
/** 展示的日期格式，配置参考 [GregorianCalendarFormat](https://github.com/yiminghe/gregorian-calendar-format)*/
|
|
format?: string,
|
|
/** 时间发生变化的回调，发生在用户选择时间时*/
|
|