From c3e57af5216ca2dad4e0f7d281bd3b1716b17794 Mon Sep 17 00:00:00 2001 From: yiminghe Date: Fri, 27 May 2016 16:01:52 +0800 Subject: [PATCH] refactor d.ts --- README.md | 12 +- index.d.ts | 2000 +++++++++++++++++++++++++++++++++++ package.json | 2 +- type-definitions/antd.d.ts | 2006 ------------------------------------ 4 files changed, 2010 insertions(+), 2010 deletions(-) create mode 100644 index.d.ts delete mode 100644 type-definitions/antd.d.ts diff --git a/README.md b/README.md index f4fe02936c..e77befd88c 100644 --- a/README.md +++ b/README.md @@ -68,9 +68,15 @@ Normal browsers and Internet Explorer 8+. ## TypeScript -```js -/// -... +tsconfig.json + +``` +{ + "compilerOptions": { + "moduleResolution": "node", + "jsx": "preserve" + } +} ``` ## Links diff --git a/index.d.ts b/index.d.ts new file mode 100644 index 0000000000..2e6306c7ef --- /dev/null +++ b/index.d.ts @@ -0,0 +1,2000 @@ +// originated by: bang88 , Bruce Mitchener + +import * as React from 'react' + + +// Affix +interface AffixProps { + /** + * 距离窗口顶部达到指定偏移量后触发 + */ + offsetTop?:number, + offsetBottom?:number, + style?:React.CSSProperties +} +/** + * # Affix + * 将页面元素钉在可视范围。 + * ## 何时使用 + * 当内容区域比较长，需要滚动页面时，这部分内容对应的操作或者导航需要在滚动范围内始终展现。常用于侧边菜单和按钮组合。 + * 页面可视范围过小时，慎用此功能以免遮挡页面内容。 + */ +export class Affix extends React.Component { +} + +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 { +} + + +interface BadgeProps { + /** 展示的数字，大于 overflowCount 时显示为 `${overflowCount}+`，为 0 时隐藏*/ + count:number, + /** 展示封顶的数字值*/ + overflowCount?:number, + /** 不展示数字，只有一个小红点*/ + dot?:boolean, + + style?:React.CSSProperties +} +// Badge +/** + * #Badge + * + * 图标右上角的圆形徽标数字。 + + * ## 何时使用 + + * 一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数，通过醒目视觉形式吸引用户处理。 + * + */ +export class Badge extends React.Component { +} + +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`，则尺寸为中。*/ +declare class ButtonGroup extends React.Component { +} + +/** + * #Button + 按钮用于开始一个即时操作。 + + ## 何时使用 + + 标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。*/ +export class Button extends React.Component { + static Group:typeof ButtonGroup +} + +// Breadcrumb + +interface BreadcrumbItemProps { + /** 链接，如不传则不可点击 */ + href?:string +} +export class BreadcrumbItem extends React.Component { +} + +interface BreadcrumbProps { + prefixCls?:string, + /** router 的路由栈信息 */ + routes?:Array, + /** 路由的参数*/ + 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 { + 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 { +} + +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 { +} + +export interface CascaderOptionType { + value:string, + label:string, + disabled?:boolean, + children?:Array +} + +type CascaderExpandTrigger = 'click' | 'hover' +// Cascader +interface CascaderProps { + /** 可选项数据源*/ + options:Array, + /** 默认的选中项*/ + defaultValue?:Array, + /** 指定选中项*/ + value?:Array, + /** 选择完成后的回调*/ + onChange?:(value:string, selectedOptions:CascaderOptionType) => void, + /** 选择后展示的渲染函数*/ + displayRender?:(label:Array) => 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 { +} + +// 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, + /** 指定选中的选项*/ + value?:Array, + /** 指定可选项*/ + options?:Array | Array, + /** 变化时回调函数*/ + onChange?:(checkedValue:Array) => void, + + disabled?:boolean, + + style?:React.CSSProperties +} +/** Checkbox 组*/ +declare class CheckboxGroup extends React.Component { +} +/** + * #Checkbox + 多选框。 + + ## 何时使用 + + - 在一组可选项中进行多项选择时； + - 单独使用可以表示两种状态之间的切换，和 `switch` 类似。区别在于切换 `switch` 会直接触发状态改变，而 `checkbox` 一般用于状态标记，需要和提交操作配合。 + */ +export class Checkbox extends React.Component { + static Group:typeof CheckboxGroup +} + +// Collapse + +interface CollapseProps { + /** 当前激活 tab 面板的 key*/ + activeKey?:Array | string, + /** 初始化选中面板的key */ + defaultActiveKey?:Array, + /** accordion 为 true 的时候，一次只可以打开一个面板 */ + accordion?:boolean, + /** 切换面板的回调*/ + onChange?:(key:string) => void, + + style?:React.CSSProperties +} + +interface CollapsePanelProps { + /** 对应 activeKey */ + key:string, + /** 面板头内容*/ + header:React.ReactNode, + + style?:React.CSSProperties +} + +declare class CollapsePanel extends React.Component { +} +/** + * #Collapse + 可以折叠/展开的内容区域。 + + ## 何时使用 + + - 对复杂区域进行分组和隐藏，保持页面的整洁。 + - `手风琴` 是一种特殊的折叠面板，只允许单个内容区域展开。*/ +export class Collapse extends React.Component { + 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, + defaultValue?:Array, + format?:string, + onChange?:(date:Array, dateString:Array) => void, + style:React.CSSProperties, + showTime:boolean | Object + +} +declare class RangePicker extends React.Component { +} + +interface MonthPickProps { + value?:DatePickerDateType, + defaultValue?:DatePickerDateType, + /** 展示的日期格式，配置参考 [GregorianCalendarFormat](https://github.com/yiminghe/gregorian-calendar-format)*/ + format?:string, + /** 时间发生变化的回调，发生在用户选择时间时*/ + onChange?:(date:Date) => void, + /** 禁用*/ + disabled?:boolean, + style?:React.CSSProperties, + /** 格外的弹出日历样式*/ + popupStyle?:React.CSSProperties, + /** 输入框大小，`large` 高度为 32px，`small` 为 22px，默认是 28px*/ + size?:'large' | 'small', + /** 国际化配置*/ + locale?:Object, + /** 定义浮层的容器，默认为 body 上新建 div*/ + getCalendarContainer?:Function +} +declare class MonthPicker extends React.Component { +} +/** + * #DatePicker + 输入或选择日期的控件。 + + ## 何时使用 + + 当用户需要输入一个日期，可以点击标准输入框，弹出日期面板进行选择。*/ +export class DatePicker extends React.Component { + static RangePicker:typeof RangePicker + static MonthPicker:typeof MonthPicker +} + +// Dropdown + +interface DropdownProps { + /** 触发下拉的行为 ['click'] or ['hover']*/ + trigger?:Array, + /** 菜单节点*/ + overlay:React.ReactNode, + + style?:React.CSSProperties +} + +interface DropdownButtonProps { + /** 按钮类型*/ + type?:'primary' | 'ghost' | 'dash', + /** 点击左侧按钮的回调*/ + onClick?:React.FormEventHandler, + /** 触发下拉的行为*/ + trigger?:'click' | 'hover', + /** 菜单节点*/ + overlay:React.ReactNode, + + visible?:boolean, + + onVisibleChange?:(visible:boolean) => void, + + style?:React.CSSProperties +} + +declare class DropdownButton extends React.Component { +} +/** + * #Dropdown + 向下弹出的列表。 + + ## 何时使用 + + 当页面上的操作命令过多时，用此组件可以收纳操作元素。点击或移入触点，会出现一个下拉菜单。可在列表中进行选择，并执行相应的命令。 + */ +export class Dropdown extends React.Component { + static Button:typeof DropdownButton +} + +export interface FormItemLabelColOption { + span:number, + offset:number +} + +// Form +interface FormItemProps { + prefixCls?:string, + /** label 标签的文本*/ + label?:string, + /** label 标签布局，通 `` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}`*/ + labelCol?:FormItemLabelColOption, + /** 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol*/ + wrapperCol?:FormItemLabelColOption, + /** 提示信息，如不设置，则会根据校验规则自动生成 */ + help?:string, + /** 额外的提示信息，和 help 类似，当需要错误信息和提示文案同时出现时，可以使用这个。*/ + extra?:string, + /** 是否必填，如不设置，则会根据校验规则自动生成 */ + validateStatus?:'success' | 'warning' | 'error' | 'validating', + /** 配合 validateStatus 属性使用，是否展示校验状态图标 */ + hasFeedback?:boolean, + + className?:string, + + required?:boolean, + + style?:React.CSSProperties +} +/** + 表单一定会包含表单域，表单域可以是输入控件，标准表单域，标签，下拉菜单，文本域等。 + + 这里我们分别封装了表单域 `` 和输入控件 ``。*/ +export class FormItem extends React.Component { +} + +interface FormComponentProps { + form:CreateFormOptions +} +export class FormComponent extends React.Component { +} + +// function create +type CreateFormOptions = { + /** 获取一组输入控件的值，如不传入参数，则获取全部组件的值*/ + getFieldsValue():(fieldNames?:Array) => any + /** 获取一个输入控件的值*/ + getFieldValue():(fieldName:string) => any + /** 设置一组输入控件的值*/ + setFieldsValue():(obj:Object) => void + /** 设置一组输入控件的值*/ + setFields():(obj:Object) => void + /** 校验并获取一组输入域的值与 Error*/ + validateFields():(fieldNames?:Array, options?:Object, callback?:(erros:any, values:any) => void) => any + /** 与 `validateFields` 相似，但校验完后，如果校验不通过的菜单域不在可见范围内，则自动滚动进可见范围 */ + validateFieldsAndScroll():(fieldNames?:Array, options?:Object, callback?:(erros:any, values:any) => void) => any + /** 获取某个输入控件的 Error */ + getFieldError():(name:string) => Object + /** 判断一个输入控件是否在校验状态*/ + isFieldValidating():(name:string) => Object + /**重置一组输入控件的值与状态，如不传入参数，则重置所有组件*/ + resetFields():(names?:Array) => void + + getFieldsValue():(id:string, options:{ + /** 子节点的值的属性，如 Checkbox 的是 'checked'*/ + valuePropName?:string, + /** 子节点的初始值，类型、可选值均由子节点决定*/ + initialValue?:any, + /** 收集子节点的值的时机*/ + trigger?:string, + /** 校验子节点值的时机*/ + validateTrigger?:string, + /** 校验规则，参见 [async-validator](https://github.com/yiminghe/async-validator) */ + rules?:Array, + /** 必填输入控件唯一标志*/ + id?:string + }) => Array +} + +interface ComponentDecorator { + (component:T):T; +} +interface FormProps { + prefixCls?:string, + /** 水平排列布局*/ + horizontal?:boolean, + /** 行内排列布局*/ + inline?:boolean, + /** 经 `Form.create()` 包装过的组件会自带 `this.props.form` 属性，直接传给 Form 即可*/ + form?:Object, + /** 数据验证成功后回调事件*/ + onSubmit?:React.FormEventHandler, + + style?:React.CSSProperties +} + +interface FormCreateOption { + /** + * 当 `Form.Item` 子节点的值发生改变时触发，可以把对应的值转存到 Redux store + */ + onFieldsChange?:(props:any, fields:Array) => void, + /** 把 props 转为对应的值，可用于把 Redux store 中的值读出 */ + mapPropsToFields?:(props:any) => void +} +/** + * #Form + 具有数据收集、校验和提交功能的表单，包含复选框、单选框、输入框、下拉选择框等元素。 + + ## 表单 + + 我们为 `form` 提供了以下两种排列方式： + + - 水平排列：可以实现 `label` 标签和表单控件的水平排列; + - 行内排列：使其表现为 `inline-block` 级别的控件。 + */ +export class Form extends React.Component { + static Item:typeof FormItem + + static create(options?:FormCreateOption):ComponentDecorator +} + + +// Icon +interface IconProps { + /** 图标类型*/ + type:string, + + style?:React.CSSProperties +} +/** + * #Icon + 有含义的矢量图形，每一个图标打倒一个敌人。 + + ## 图标的命名规范 + + 我们为每个图标赋予了语义化的命名，命名规则如下: + + - 实心和描线图标保持同名，用 `-o` 来区分，比如 `question-circle`(实心) 和 `question-circle-o`(描线)； + + - 命名顺序：`[icon名]-[形状可选]-[描线与否]-[方向可选]`。 + + ## 如何使用 + + 使用 `` 标签声明组件，指定图标对应的 type 属性，示例代码如下: + + ```html + + ``` + + 最终会渲染为： + + ```html + + ```*/ +export class Icon extends React.Component { +} + +// Input +interface InputProps { + /** 【必须】声明 input 类型，同原生 input 标签的 type 属性*/ + type?:string, + id?:string, + /** 控件大小，默认值为 default 。注：标准表单内的输入框大小限制为 large。 {'large','default','small'}*/ + size?:string, + /** 是否禁用状态，默认为 false*/ + disabled?:boolean, + value?:any, + /** 设置初始默认值*/ + defaultValue?:any, + className?:string, + /** 带标签的 input，设置前置标签*/ + addonBefore?:React.ReactNode, + /** 带标签的 input，设置后置标签*/ + addonAfter?:React.ReactNode, + prefixCls?:string, + placeholder?:string, + onChange?:React.FormEventHandler, + style:React.CSSProperties +} +export class Input extends React.Component { +} + +// InputNumber +interface InputNumberProps { + /** 最小值*/ + min:number, + /** 最大值*/ + max:number, + /** 当前值*/ + value?:number, + /** 每次改变步数*/ + step?:number, + /** 初始值*/ + defaultValue?:number, + /** 变化回调*/ + onChange?:React.FormEventHandler, + /** 禁用*/ + disabled?:boolean, + /** 输入框大小*/ + size?:string, + + style?:React.CSSProperties + +} +/** + * #InputNumber + 通过鼠标或键盘，输入范围内的数值。 + + ## 何时使用 + + 当需要获取标准数值时。*/ +export class InputNumber extends React.Component { +} + + +// Layout +// Row +interface RowProps { + gutter?:number, + type?:'flex', + align?:'top' | 'middle' | 'bottom', + justify?:'start' | 'end' | 'center' | 'space-around' | 'space-between', + style?:React.CSSProperties, + className?:string, +} +export class Row extends React.Component { +} + +// Col +interface ColProps { + span?:number, + order?:number, + offset?:string, + push?:string, + pull?:string, + className?:string, + style?:React.CSSProperties +} +/** + 在多数业务情况下，Ant Design需要在设计区域内解决大量信息收纳的问题，因此在12栅格系统的基础上，我们将整个设计建议区域按照24等分的原则进行划分。 + + 划分之后的信息区块我们称之为“盒子”。建议横向排列的盒子数量最多四个，最少一个。“盒子”在整个屏幕上占比见上图。设计部分基于盒子的单位定制盒子内部的排版规则，以保证视觉层面的舒适感。 + + ## 概述 + + 布局的栅格化系统，我们是基于行（row）和列（col）来定义信息区块的外部框架，以保证页面的每个区域能够稳健地排布起来。下面简单介绍一下它的工作原理： + + * 通过`row`在水平方向建立一组`column`（简写col） + * 你的内容应当放置于`col`内，并且，只有`col`可以作为`row`的直接元素 + * 栅格系统中的列是指1到24的值来表示其跨越的范围。例如，三个等宽的列可以使用`.col-8`来创建 + * 如果一个`row`中的`col`总和超过24，那么多余的`col`会作为一个整体另起一行排列 + + ## Flex 布局 + + 我们的栅格化系统支持 Flex 布局，允许子元素在父节点内的水平对齐方式 - 居左、居中、居右、等宽排列、分散排列。子元素与子元素之间，支持顶部对齐、垂直居中对齐、底部对齐的方式。同时，支持使用 order 来定义元素的排列顺序。 + + Flex 布局是基于 24 栅格来定义每一个“盒子”的宽度，但排版则不拘泥于栅格。*/ +export class Col extends React.Component { +} + +// Menu +interface MenuItemProps { + /** + * (是否禁用) + * + * @type {boolean} + */ + disabled?:boolean, + key?:string, + style?:React.CSSProperties + +} +export class MenuItem extends React.Component { +} + +interface MenuSubMenuProps { + disabled?:boolean, + key?:string, + /** + * (子菜单项值) + * + * @type {(string | React.ReactNode)} + */ + title:string | React.ReactNode, + /** + * (子菜单的菜单项) + * + * @type {(MenuItem | MenuSubMenu)} + */ + children?:Array, + + onTitleClick?:Function, + + style?:React.CSSProperties +} +export class MenuSubMenu extends React.Component { +} + +interface MenuItemGroupProps { + /** + * (分组标题) + * + * @type {(string | React.ReactNode)} + */ + title:string | React.ReactNode, + /** + * (分组的菜单项) + * + * @type {MenuItem} + */ + children?:Array, + + style?:React.CSSProperties +} +export class MenuItemGroup extends React.Component { +} + +interface MenuProps { + /** 主题颜色*/ + theme?:'light' | 'dark', + /** 菜单类型 enum: `vertical` `horizontal` `inline`*/ + mode?:'vertical' | 'horizontal' | 'inline', + /** 当前选中的菜单项 key 数组*/ + selectedKeys?:Array, + /** 初始选中的菜单项 key 数组*/ + defaultSelectedKeys?:Array, + /** 当前展开的菜单项 key 数组*/ + openKeys?:Array, + /** 初始展开的菜单项 key 数组*/ + defaultOpenKeys?:Array, + + onOpen?:Function, + + onClose?:Function, + + /** + * 被选中时调用 + * + * @type {(item: any, key: string, selectedKeys: Array) => void} + */ + onSelect?:(item:any, key:string, selectedKeys:Array) => void, + /** 取消选中时调用*/ + onDeselect?:(item:any, key:string, selectedKeys:Array) => void, + /** 点击 menuitem 调用此函数*/ + onClick?:(item:any, key:string) => void, + /** 根节点样式*/ + style?:React.CSSProperties +} +/** + # Menu + 为页面和功能提供导航的菜单列表。 + + ## 何时使用 + + 导航菜单是一个网站的灵魂，用户依赖导航在各个页面中进行跳转。一般分为顶部导航和侧边导航，顶部导航提供全局性的类目和功能，侧边导航提供多级结构来收纳和排列网站架构。 + + 更多布局和导航的范例可以参考：[常用布局](/spec/layout)。*/ +export class Menu extends React.Component { + static Item:typeof MenuItem + static SubMenu:typeof MenuSubMenu + static ItemGroup:typeof MenuItemGroup + static Divider:typeof React.Component +} + +// Message +type MessageFunc = (/** 提示内容*/ + content:string, + /** 自动关闭的延时*/ + duration?:number) => void +/** + * #Message + 全局展示操作反馈信息。 + + ## 何时使用 + + - 可提供成功、警告和错误等反馈信息。 + - 顶部居中显示并自动消失，是一种不打断用户操作的轻量级提示方式。*/ +export const message:{ + + success:MessageFunc + error:MessageFunc + info:MessageFunc + loading:MessageFunc + config:(options:{ + /** + * 消息距离顶部的位置 + * + * @type {number} + */ + top:number, + duration?:number + }) => void + destroy:() => void +} + +// Modal +type ModalFunc = (options:{ + visible?:boolean, + title?:React.ReactNode | string, + content?:React.ReactNode | string, + onOk?:Function, + onCancel?:Function, + width?:string | number, + iconClassName?:string, + okText?:string, + cancelText?:string +}) => void + +interface ModalProps { + /** 对话框是否可见*/ + visible?:boolean, + /** 确定按钮 loading*/ + confirmLoading?:boolean, + /** 标题*/ + title?:React.ReactNode | string, + /** 是否显示右上角的关闭按钮*/ + closable?:boolean, + /** 点击确定回调*/ + onOk?:Function, + /** 点击遮罩层或右上角叉或取消按钮的回调*/ + onCancel?:Function, + /** 宽度*/ + width?:string | number, + /** 底部内容*/ + footer?:React.ReactNode | string, + /** 确认按钮文字*/ + okText?:string, + /** 取消按钮文字*/ + cancelText?:string, + /** 点击蒙层是否允许关闭*/ + maskClosable?:boolean, + + style?:React.CSSProperties, + + wrapClassName?:string +} + +/** + # Modal + 模态对话框。 + + ## 何时使用 + + 需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用 `Modal` 在当前页面正中打开一个浮层，承载相应的操作。 + + 另外当需要一个简洁的确认框询问用户时，可以使用精心封装好的 `ant.Modal.confirm()` 等方法。*/ +export class Modal extends React.Component { + static info:ModalFunc + static success:ModalFunc + static error:ModalFunc + static confirm:ModalFunc +} + +// Notification +type NotificationFunc = (config:{ + /** 通知提醒标题，必选 */ + message:React.ReactNode | string, + /** 通知提醒内容，必选*/ + description:React.ReactNode | string, + /** 自定义关闭按钮*/ + btn?:React.ReactNode | string, + /** 当前通知唯一标志*/ + key?:string, + /** 点击默认关闭按钮时触发的回调函数*/ + onClose?:Function, + /** 默认 4.5 秒后自动关闭，配置为 null 则不自动关闭*/ + duration?:number +}) => void +/** + * #notification + 全局展示通知提醒信息。 + + ## 何时使用 + + 在系统右上角显示通知提醒信息。经常用于以下情况： + + - 较为复杂的通知内容。 + - 带有交互的通知，给出用户下一步的行动点。 + - 系统主动推送。*/ +export const notification:{ + success:NotificationFunc + error:NotificationFunc + info:NotificationFunc + warn:NotificationFunc + close:(key:string) => void + destroy:() => void + config:(options:{ + /** 消息距离顶部的位置*/ + top:number + }) => void + +} + + +// Pagination +interface PaginationProps { + /** 当前页数*/ + current?:number, + /** 默认的当前页数*/ + defaultCurrent?:number, + /** 数据总数*/ + total:number, + /** 初始的每页条数*/ + defaultPageSize?:number, + /** 每页条数*/ + pageSize?:number, + /** 页码改变的回调，参数是改变后的页码*/ + onChange?:Function, + /** 是否可以改变 pageSize */ + showSizeChanger?:boolean, + /** 指定每页可以显示多少条*/ + pageSizeOptions?:Array + /** pageSize 变化的回调 */ + onShowSizeChange?:Function, + /** 是否可以快速跳转至某页*/ + showQuickJumper?:boolean, + /** 当为「small」时，是小尺寸分页 */ + size?:string, + /** 当添加该属性时，显示为简单分页*/ + simple?:Object, + /** 用于显示总共有多少条数据*/ + showTotal?:Function, + + style?:React.CSSProperties +} +/** + * #Pagination + 采用分页的形式分隔长列表，每次只加载一个页面。 + + ## 何时使用 + + - 当加载/渲染所有数据将花费很多时间时； + - 可切换页码浏览数据。*/ +export class Pagination extends React.Component { +} + + +interface PopconfirmProps { + /** + * 气泡框位置，可选 `top/left/right/bottom` + * + * @type {(Placement | string)} + */ + placement?:'top' | 'left' | 'right' | 'bottom', + /** 确认框的描述*/ + title?:string, + /** 点击确认的回调*/ + onConfirm?:Function, + onCancel?:Function, + /** 显示隐藏的回调*/ + onVisibleChange?:(visible:boolean) => void, + /** 确认按钮文字*/ + okText?:string, + /** 取消按钮文字*/ + cancelText?:string, + + style?:React.CSSProperties +} +/** + * #Popconfirm + 点击元素，弹出气泡式的确认框。 + + ## 何时使用 + + 目标元素的操作需要用户进一步的确认时，在目标元素附近弹出浮层提示，询问用户。 + + 和 `confirm` 弹出的全屏居中模态对话框相比，交互形式更轻量。 + */ +export class Popconfirm extends React.Component { +} + +type PopoverPlacement = 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom' +type PropverTrigger = 'hover' | 'focus' | 'click' + +interface PopoverProps { + /** 触发行为，可选 `hover/focus/click` */ + trigger?:PropverTrigger, + /** 气泡框位置，可选 `top/left/right/bottom` `topLeft/topRight/bottomLeft/bottomRight` `leftTop/leftBottom/rightTop/rightBottom`*/ + placement?:PopoverPlacement + /** 卡片标题*/ + title?:React.ReactNode | string, + /** 卡片内容*/ + overlayClassName?:string, + + overlayStyle?:React.CSSProperties, + + prefixCls?:string, + /** 用于手动控制浮层显隐*/ + visible?:boolean, + /** 显示隐藏改变的回调*/ + onVisibleChange?:Function, + + getTooltipContainer?:Function, + + content?:React.ReactNode, + + style?:React.CSSProperties +} +/** + * #Popover + 点击/鼠标移入元素，弹出气泡式的卡片浮层。 + + ## 何时使用 + + 当目标元素有进一步的描述和相关操作时，可以收纳到卡片中，根据用户的操作行为进行展现。 + + 和 `Tooltip` 的区别是，用户可以对浮层上的元素进行操作，因此它可以承载更复杂的内容，比如链接或按钮等。 + */ +export class Popover extends React.Component { +} + +// Progress +type ProgressStatus = 'success' | 'active' | 'exception' +type ProgressType = 'line' | 'circle' + +interface ProgressProps { + type?:ProgressType, + percent?:number, + format?:(percent:number) => string, + status?:ProgressStatus, + showInfo?:boolean, + strokeWidth?:number, + width?:number, + style?:React.CSSProperties +} +/** + * #Progress + 展示操作的当前进度。 + + ## 何时使用 + + 在操作需要较长时间才能完成时，为用户显示该操作的当前进度和状态。 + + * 当一个操作会打断当前界面，或者需要在后台运行，且耗时可能超过2秒时； + * 当需要显示一个操作完成的百分比时。*/ +export class Progress extends React.Component { + +} + +// Radio +type RadioGroupSize = 'large' | 'default' | 'small' + +interface RadioGroupProps { + /** 选项变化时的回调函数*/ + onChange?:React.FormEventHandler, + /** 用于设置当前选中的值*/ + value?:string, + /** 默认选中的值*/ + defaultValue?:string, + /** 大小，只对按钮样式生效*/ + size?:RadioGroupSize, + + style?:React.CSSProperties +} +export class RadioGroup extends React.Component { +} + +interface RadioProps { + /** 指定当前是否选中*/ + checked?:boolean, + /** 初始是否选中*/ + defaultChecked?:boolean, + /** 根据 value 进行比较，判断是否选中 */ + value?:any, + + style?:React.CSSProperties +} +/** + * #Radio + 单选框。 + + ## 何时使用 + + - 用于在多个备选项中选中单个状态。 + - 和 Select 的区别是，Radio 所有选项默认可见，方便用户在比较中选择，因此选项不宜过多。 + */ +export class Radio extends React.Component { + static Group:typeof RadioGroup + static Button:typeof RadioButton +} + +interface RadioButtonProps { + value:string, + style?:React.CSSProperties +} + +export class RadioButton extends React.Component { +} + + +// Select +interface SelectOptionProps { + /** 是否禁用*/ + disabled?:boolean, + /** 如果 react 需要你设置此项，此项值与 value 的值相同，然后可以省略 value 设置*/ + key?:string, + /** 默认根据此属性值进行筛选*/ + value:string +} +export class SelectOption extends React.Component { +} + +interface SelectOptGroupProps { + /** 组名*/ + label:string | React.ReactNode, + key?:string +} +export class SelectOptGroup extends React.Component { +} + +interface SelectProps { + /** 指定当前选中的条目*/ + value?:string | Array, + /** 指定默认选中的条目*/ + defaultValue?:string | Array, + /** 支持多选*/ + multiple?:boolean, + /** 支持清除, 单选模式有效*/ + allowClear?:boolean, + /** 是否根据输入项进行筛选，可为一个函数，返回满足要求的 option 即可*/ + filterOption?:boolean | Function, + /** 可以把随意输入的条目作为 tag，输入项不需要与下拉选项匹配*/ + tags?:boolean, + /** 被选中时调用，参数为选中项的 value 值 */ + onSelect?:(value:any, option:any) => void, + /** 取消选中时调用，参数为选中项的 option value 值，仅在 multiple 或 tags 模式下生效*/ + onDeselect?:(value:any, option:any) => void, + /** 选中option，或input的value变化(combobox 模式下)时，调用此函数*/ + onChange?:(value:any, label:any) => void, + /** 文本框值变化时回调*/ + onSearch?:(value:string) => void, + /** 选择框默认文字*/ + placeholder?:string, + /** 搜索框默认文字*/ + searchPlaceholder?:string, + /** 当下拉列表为空时显示的内容*/ + notFoundContent?:string, + /** 下拉菜单和选择器同宽*/ + dropdownMatchSelectWidth?:boolean, + /** 搜索时过滤对应的 option 属性，如设置为 children 表示对内嵌内容进行搜索*/ + optionFilterProp?:string, + /** 输入框自动提示模式*/ + combobox?:SVGSymbolElement, + /** 选择框大小，可选 `large` `small` */ + size?:string, + /** 在下拉中显示搜索框*/ + showSearch?:boolean, + /** 是否禁用*/ + disabled?:boolean, + style?:React.CSSProperties +} +/** + * #Select + 类似 Select2 的选择器。 + + ## 何时使用 + + 弹出一个下拉菜单给用户选择操作，用于代替原生的选择器，或者需要一个更优雅的多选器时。*/ +export class Select extends React.Component { + static Option:typeof SelectOption + static OptGroup:typeof SelectOptGroup +} + +interface SliderMark { + [key:string]:any +} + +// Slider +interface SliderProps { + /** 最小值*/ + min?:number, + /** 最大值*/ + max?:number, + /** 步长，取值必须大于 0，并且可被 (max - min) 整除。当 `marks` 不为空对象时，可以设置 `step` 为 `null`，此时 Slider 的可选值仅有 marks 标出来的部分。*/ + step?:number, + /** 分段标记，key 的类型必须为 `Number` 且取值在闭区间 [min, max] 内*/ + marks?:SliderMark, + /** 设置当前取值。当 `range` 为 `false` 时，使用 `Number`，否则用 `[Number, Number]`*/ + value?:number | Array, + /** 设置当前取值。当 `range` 为 `false` 时，使用 `Number`，否则用 `[Number, Number]`*/ + defaultValue?:number | Array, + /** `marks` 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列*/ + included?:boolean, + /** 值为 `true` 时，滑块为禁用状态*/ + disabled?:boolean, + /** 当 `range` 为 `true` 时，该属性可以设置是否允许两个滑块交换位置。*/ + allowCross?:boolean, + /** 当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入。*/ + onChange?:Function, + /** 与 `onmouseup` 触发时机一致，把当前值作为参数传入。*/ + onAfterChange?:Function, + /** Slider 会把当前值传给 `tipFormatter`，并在 Tooltip 中显示 `tipFormatter` 的返回值，若为 null，则隐藏 Tooltip。*/ + tipFormatter?:Function | any, + range?:boolean, + + style?:React.CSSProperties +} +/** + * #Slider + 滑动型输入器，展示当前值和可选范围。 + + ## 何时使用 + + 当用户需要在数值区间/自定义区间内进行选择时，可为连续或离散值。*/ +export class Slider extends React.Component { +} + +// Spin +interface SpinProps { + /** spin组件中点的大小，可选值为 small default large*/ + size?:'small' | 'default' | 'large', + /** 用于内嵌其他组件的模式，可以关闭 loading 效果*/ + spinning?:boolean, + + tip?:string, + + style?:React.CSSProperties +} +/** + * #Spin + 用于页面和区块的加载中状态。 + + ## 何时使用 + + 页面局部处于等待异步数据或正在渲染过程时，合适的加载动效会有效缓解用户的焦虑。 + */ +export class Spin extends React.Component { +} + +// Steps +type StepStatus = 'wait' | 'process' | 'finish' | 'error' + +interface StepProps { + /** 可选参数，指定状态。当不配置该属性时，会使用父Steps元素的current来自动指定状态。*/ + status?:StepStatus, + /** 必要参数，标题。*/ + title:string | React.ReactNode, + /** 可选参数，步骤的详情描述。*/ + description?:string | React.ReactNode, + /** 可选参数，步骤的Icon。如果不指定，则使用默认的样式。*/ + icon?:string | React.ReactNode, + + style?:React.CSSProperties +} +export class Step extends React.Component { +} + +interface StepsProps { + status?:StepStatus, + /** 可选参数，指定当前处理正在执行状态的步骤，从0开始记数。在子Step元素中，可以通过status属性覆盖状态。*/ + current?:number, + /** 可选参数，指定大小（目前只支持普通和迷你两种大小）。 small, default */ + size?:'default' | 'small', + /** 可选参数，指定步骤条方向（目前支持水平和竖直两种方向，默认水平方向）。*/ + direction?:string, + /** 可选参数，指定步骤的详细描述文字的最大宽度。*/ + maxDescriptionWidth?:number, + + style?:React.CSSProperties + +} +/** + * #Steps + 引导用户按照流程完成任务的导航条。 + + ## 何时使用 + + 当任务复杂或者存在先后关系时，将其分解成一系列步骤，从而简化任务。*/ +export class Steps extends React.Component { + static Step:typeof Step +} + +// Switch +interface SwitchProps { + /** 指定当前是否选中*/ + checked?:boolean, + /** 初始是否选中*/ + defaultChecked?:boolean, + /** 变化时回调函数*/ + onChange?:(checked:boolean) => void, + /** 选中时的内容*/ + checkedChildren?:React.ReactNode, + /** 非选中时的内容*/ + unCheckedChildren?:React.ReactNode, + /** 开关大小*/ + size?:string, + + style?:React.CSSProperties +} +/** + * #Switch + 开关选择器。 + + ## 何时使用 + + - 需要表示开关状态/两种状态之间的切换时； + - 和 `checkbox `的区别是，切换 `switch` 会直接触发状态改变，而 `checkbox` 一般用于状态标记，需要和提交操作配合。 + */ +export class Switch extends React.Component { +} + +// Table +type RowSelectionType = 'checkbox' | 'radio' + +type SelectedRowKeys = Array + +interface RowSelection { + type?:RowSelectionType, + selectedRowKeys?:SelectedRowKeys, + onChange?:(selectedRowKeys:SelectedRowKeys, selectedRows:any) => void, + getCheckboxProps?:(record:any) => void, + onSelect?:(record:any, selected:any, selectedRows:any) => void, + onSelectAll?:(rselectedecord:any, selectedRows:any, changeRows:any) => void, + style?:React.CSSProperties +} + +type Columns = Array +interface Column { + /** React 需要的 key，建议设置*/ + key:string | number, + /** 列头显示文字*/ + title?:string | React.ReactNode, + /** 列数据在数据项中对应的 key*/ + dataIndex?:string, + /** 生成复杂数据的渲染函数，参数分别为当前列的值，当前列数据，列索引，@return里面可以设置表格[行/列合并](#demo-colspan-rowspan)*/ + render?:(text?:any, record?:any, index?:number) => React.ReactNode, + /** 表头的筛选菜单项*/ + filters?:Array, + /** 本地模式下，确定筛选的运行函数*/ + onFilter?:Function, + /** 是否多选*/ + filterMultiple?:boolean, + /** 排序函数，本地排序使用一个函数，需要服务端排序可设为 true */ + sorter?:boolean | Function, + /** 表头列合并,设置为 0 时，不渲染*/ + colSpan?:number, + /** 列宽度*/ + width?:string | number, + /** 列的 className*/ + className?:string, + + fixed?:boolean | 'left' | 'right', + + filteredValue?:Array, + + sortOrder?:boolean | 'ascend' | 'descend' +} + +interface TableProps { + /** 列表项是否可选择*/ + rowSelection?:RowSelection, + /** 分页器*/ + pagination?:Object, + /** 正常或迷你类型 : `default` or `small` */ + size?:string, + /** 数据数组*/ + dataSource:Array, + /** 表格列的配置描述*/ + columns:Columns, + /** 表格行 key 的取值*/ + rowKey?:(record:any, index:number) => string, + /** 额外的展开行*/ + expandedRowRender?:Function, + /** 默认展开的行*/ + defaultExpandedRowKeys?:Array, + /** 分页、排序、筛选变化时触发*/ + onChange?:(pagination:Object, filters:any, sorter:any) => void, + /** 页面是否加载中*/ + loading?:boolean, + /** 默认文案设置，目前包括排序、过滤、空数据文案: `{ filterConfirm: '确定', filterReset: '重置', emptyText: '暂无数据' }` */ + locale?:Object, + /** 展示树形数据时，每层缩进的宽度，以 px 为单位*/ + indentSize?:number, + /** 处理行点击事件*/ + onRowClick?:(record:any, index:number) => void, + /** 是否固定表头*/ + useFixedHeader?:boolean, + /** 是否展示外边框和列边框*/ + bordered?:boolean, + /** 是否显示表头*/ + showHeader?:boolean, + /** 表格底部自定义渲染函数*/ + footer?:(currentPageData:Object) => void, + + style?:React.CSSProperties +} +/** + * #Table + 展示行列数据。 + + ## 何时使用 + + - 当有大量结构化的数据需要展现时； + - 当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时。*/ +export class Table extends React.Component { +} + +// Tabs +interface TabPaneProps { + /** 选项卡头显示文字*/ + tab:React.ReactNode | string, + + style?:React.CSSProperties +} +export class TabPane extends React.Component { +} + +type TabsType = 'line' | 'card' | 'editable-card' +type TabsPosition = 'top' | 'right' | 'bottom' | 'left'; + +interface TabsProps extends React.Props { + /** 当前激活 tab 面板的 key */ + activeKey?:string, + /** 初始化选中面板的 key，如果没有设置 activeKey*/ + defaultActiveKey?:string, + /** 切换面板的回调*/ + onChange?:(activeKey:string) => void, + /** tab 被点击的回调 */ + onTabClick?:Function, + /** tab bar 上额外的元素 */ + tabBarExtraContent?:React.ReactNode, + /** 页签的基本样式，可选 `line`、`card` `editable-card` 类型*/ + type?:TabsType, + /** 页签位置，可选值有 `top` `right` `bottom` `left`*/ + tabPosition?:TabsPosition, + /** 新增和删除页签的回调，在 `type="editable-card"` 时有效*/ + onEdit?:(targetKey:string, action:any) => void, + + style?:React.CSSProperties +} +/** + * #Tabs + 选项卡切换组件。 + + ## 何时使用 + + 提供平级的区域将大块内容进行收纳和展现，保持界面整洁。 + + Ant Design 依次提供了三级选项卡，分别用于不同的场景。 + + - 卡片式的页签，提供可关闭的样式，常用于容器顶部。 + - 标准线条式页签，用于容器内部的主功能切换，这是最常用的 Tabs。 + - [RadioButton](/components/radio/#demo-radiobutton) 可作为更次级的页签来使用。*/ +export class Tabs extends React.Component { + static TabPane:typeof TabPane +} + +// Tag +interface TagProps { + /** 标签是否可以关闭*/ + closable?:boolean, + /** 关闭时的回调*/ + onClose?:Function, + /** 动画关闭后的回调*/ + afterClose?:Function, + /** 标签的色彩*/ + color?:string, + + style?:React.CSSProperties +} +/** + * #Tag + 进行标记和分类的小标签。 + + ## 何时使用 + + - 用于标记事物的属性和维度。 + - 进行分类。*/ +export class Tag extends React.Component { +} + +// TimePicker +interface TimePickerProps { + /** 默认时间*/ + value?:string | Date, + /** 初始默认时间*/ + defaultValue?:string | Date, + /** 展示的时间格式 : "HH:mm:ss"、"HH:mm"、"mm:ss" */ + format?:string, + /** 时间发生变化的回调*/ + onChange?:(Date:Date) => void, + /** 禁用全部操作*/ + disabled?:boolean, + /** 没有值的时候显示的内容*/ + placeholder?:string, + /** 国际化配置*/ + locale?:Object, + /** 隐藏禁止选择的选项*/ + hideDisabledOptions?:boolean, + /** 禁止选择部分小时选项*/ + disabledHours?:Function, + /** 禁止选择部分分钟选项*/ + disabledMinutes?:Function, + /** 禁止选择部分秒选项*/ + disabledSeconds?:Function, + + style?:React.CSSProperties +} +/** + * #TimePicker + 输入或选择时间的控件。 + + 何时使用 + -------- + + 当用户需要输入一个时间，可以点击标准输入框，弹出时间面板进行选择。 + */ +export class TimePicker extends React.Component { +} + +// Timeline +interface TimeLineItemProps { + /** 指定圆圈颜色。*/ + color?:string, + dot?:React.ReactNode, + style?:React.CSSProperties +} +export class TimeLineItem extends React.Component { +} + +interface TimelineProps { + /** 指定最后一个幽灵节点是否存在或内容*/ + pending?:boolean | React.ReactNode, + + style?:React.CSSProperties +} +/** + * #Timeline + 垂直展示的时间流信息。 + + ## 何时使用 + + - 当有一系列信息需要从上至下按时间排列时； + - 需要有一条时间轴进行视觉上的串联时；*/ +export class Timeline extends React.Component { + static Item:typeof TimeLineItem +} + +// Tooltip +interface TooltipProps { + /** 气泡框位置，可选 `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom`*/ + placement?:PopoverPlacement, + /** 提示文字*/ + title?:string | React.ReactNode, + + style?:React.CSSProperties +} +/** + * #Tooltip + 简单的文字提示气泡框。 + + ## 何时使用 + + 鼠标移入则显示提示，移出消失，气泡浮层不承载复杂文本和操作。 + + 可用来代替系统默认的 `title` 提示，提供一个`按钮/文字/操作`的文案解释。*/ +export class Tooltip extends React.Component { +} + +interface TransferItem { + key:number | string, + title:string, + description?:string, + chosen:boolean, +} + +// Transfer +interface TransferProps { + /** 数据源*/ + dataSource:Array, + /** 每行数据渲染函数*/ + render?:(record:TransferItem) => any, + /** 显示在右侧框数据的key集合*/ + targetKeys:Array, + /** 变化时回调函数*/ + onChange?:(targetKeys:Array, direction:string, moveKeys:any) => void, + /** 两个穿梭框的自定义样式*/ + listStyle?:React.CSSProperties, + /** 自定义类*/ + className?:string, + /** 标题集合,顺序从左至右*/ + titles?:Array, + /** 操作文案集合,顺序从上至下*/ + operations?:Array, + /** 是否显示搜索框*/ + showSearch?:boolean, + /** 搜索框的默认值*/ + searchPlaceholder?:string, + /** 当列表为空时显示的内容*/ + notFoundContent?:React.ReactNode | string + /** 底部渲染函数*/ + footer?:(props:any) => any, + + style?:React.CSSProperties +} +/** + * #Transfer + 双栏穿梭选择框。 + + ## 何时使用 + + 用直观的方式在两栏中移动元素，完成选择行为。 + */ +export class Transfer extends React.Component { +} + + +// Tree +interface TreeNodeProps { + disabled?:boolean, + disableCheckbox?:boolean, + title?:string | React.ReactNode, + key?:string, + isLeaf?:boolean +} +export class TreeNode extends React.Component { +} + +interface TreeNodeEvent { + event:'check' | 'select', + node:TreeNode, + + checked?:boolean, + checkedNodes?:Array, + + selected?:boolean, + selectedNodes?:Array, +} + +interface TreeNodeMouseEvent { + node:TreeNode, + event:React.MouseEventHandler, +} + +interface TreeProps { + showLine?:boolean, + className?:string, + /** 是否支持多选*/ + multiple?:boolean, + /**是否自动展开父节点 */ + autoExpandParent?:boolean, + /**checkable状态下节点选择完全受控（父子节点选中状态不再关联）*/ + checkStrictly?:boolean, + /** 是否支持选中*/ + checkable?:boolean, + /** 默认展开所有树节点*/ + defaultExpandAll?:boolean, + /** 默认展开指定的树节点*/ + defaultExpandedKeys?:Array, + /** （受控）展开指定的树节点*/ + expandedKeys?:Array, + /** （受控）选中复选框的树节点*/ + checkedKeys?:Array, + /** 默认选中复选框的树节点*/ + defaultCheckedKeys?:Array, + /** （受控）设置选中的树节点*/ + selectedKeys?:Array, + /** 默认选中的树节点*/ + defaultSelectedKeys?:Array, + /** 展开/收起节点时触发 */ + onExpand?:(expandedKeys:Array, {node: TreeNode, expanded: boolean}) => void | PromiseLike, + /** 点击复选框触发*/ + onCheck?:(checkedKeys:Array, e:TreeNodeEvent) => void, + /** 点击树节点触发*/ + onSelect?:(selectedKeys:Array, e:TreeNodeEvent) => void, + /** filter some treeNodes as you need. it should return true */ + filterTreeNode?:(node:TreeNode) => boolean, + /** 异步加载数据*/ + loadData?:(node:TreeNode) => PromiseLike, + /** 响应右键点击*/ + onRightClick?:(options:TreeNodeMouseEvent) => void, + /** 设置节点可拖拽（IE>8）*/ + draggable?:boolean, + /** 开始拖拽时调用*/ + onDragStart?:(options:TreeNodeMouseEvent) => void, + /** dragenter 触发时调用*/ + onDragEnter?:(options:TreeNodeMouseEvent) => void, + /** dragover 触发时调用 */ + onDragOver?:(options:TreeNodeMouseEvent) => void, + /** dragleave 触发时调用*/ + onDragLeave?:(options:TreeNodeMouseEvent) => void, + /** drop 触发时调用*/ + onDrop?:(options:TreeNodeMouseEvent) => void, + + style?:React.CSSProperties +} +/** + * #Tree + * 文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构。使用`树控件`可以完整展现其中的层级关系，并具有展开收起选择等交互功能。 + */ +export class Tree extends React.Component { + static TreeNode:typeof TreeNode +} + + +// TreeSelect +interface TreeSelectTreeNodeProps { + disabled?:boolean, + /** 此项必须设置（其值在整个树范围内唯一）*/ + key:string, + /** 默认根据此属性值进行筛选*/ + value?:string, + /** 树节点显示的内容*/ + title?:React.ReactNode | string, + /** 是否是叶子节点*/ + isLeaf?:boolean +} +export class TreeSelectTreeNode extends React.Component { +} + +interface TreeData { + key:string + value:string, + label:React.ReactNode, + children?:Array +} + +interface TreeSelectProps { + style?:React.CSSProperties, + /** 指定当前选中的条目*/ + value?:string | Array, + /** 指定默认选中的条目*/ + defaultValue?:string | Array, + /** 支持多选*/ + multiple?:boolean, + /** 可以把随意输入的条目作为 tag，输入项不需要与下拉选项匹配*/ + tags?:boolean, + /** 被选中时调用，参数为选中项的 value 值*/ + onSelect?:(value:any) => void, + /** 选中option，或input的value变化(combobox 模式下)时，调用此函数*/ + onChange?:(value:any, label:any) => void, + /** 显示清除按钮*/ + allowClear?:boolean, + /** 文本框值变化时回调*/ + onSearch?:(value:any) => void, + /** 选择框默认文字*/ + placeholder?:string, + /** 搜索框默认文字*/ + searchPlaceholder?:string, + /** 下拉菜单的样式*/ + dropdownStyle?:React.CSSProperties, + /** 下拉菜单和选择器同宽*/ + dropdownMatchSelectWidth?:boolean, + /** 输入框自动提示模式*/ + combobox?:boolean, + /** 选择框大小，可选 `large` `small`*/ + size?:'large' | 'small', + /** 在下拉中显示搜索框*/ + showSearch?:boolean, + /** 是否禁用*/ + disabled?:boolean, + /** 默认展开所有树节点*/ + treeDefaultExpandAll?:boolean, + /** 显示checkbox*/ + treeCheckable?:boolean, + /** 是否根据输入项进行筛选，返回值true*/ + filterTreeNode?:(treeNode:any) => boolean, + /** 输入项过滤对应的 treeNode 属性*/ + treeNodeFilterProp?:string, + /** 作为显示的prop设置*/ + treeNodeLabelProp?:string, + /** treeNodes数据，如果设置则不需要手动构造TreeNode节点（如果value在整个树范围内不唯一，需要设置`key`其值为整个树范围内的唯一id*/ + treeData?:Array, + + treeDataSimpleMode?:boolean, + /** 异步加载数据*/ + loadData?:(node:any) => void, + + showCheckedStrategy?:'SHOW_ALL' | 'SHOW_PARENT' | 'SHOW_CHILD' + +} +/** + * #TreeSelect + 树型选择控件。 + + ## 何时使用 + + 类似 Select 的选择控件，可选择的数据结构是一个树形结构时，可以使用 TreeSelect，例如公司层级、学科系统、分类目录等等。 + */ +export class TreeSelect extends React.Component { + static TreeNode:typeof TreeSelectTreeNode +} + + +type UploadFileStatus = 'error' | 'success' | 'done' | 'uploading' | 'removed' + +export interface HttpRequestHeader { + [key:string]:string; +} + +interface File { + uid:number, + size:number, + name:string, + lastModifiedDate?:Date, + url?:string, + status?:UploadFileStatus, + percent?:number, +} + +interface UploadChangeParam { + file:File, + fileList:Array, + event?:{ percent:number }, +} + +// Upload +interface UploadProps { + /** 可选参数, 上传的文件 */ + name?:string, + + defaultFileList?:Array, + + fileList?:Array, + /** 必选参数, 上传的地址 */ + action:string, + /** 可选参数, 上传所需参数 */ + data?:Object, + /** 可选参数, 设置上传的请求头部，IE10 以上有效*/ + headers?:HttpRequestHeader, + /** 可选参数, 是否展示 uploadList, 默认开启 */ + showUploadList?:boolean, + /** 可选参数, 是否支持多选文件，`ie10+` 支持。开启后按住 ctrl 可选择多个文件。*/ + multiple?:boolean, + /** 可选参数, 接受上传的文件类型, 详见 input accept Attribute */ + accept?:string, + /** 可选参数, 上传文件之前的钩子，参数为上传的文件，若返回 `false` 或者 Promise 则停止上传。**注意：该方法不支持老 IE**。*/ + beforeUpload?:(file:File) => boolean | PromiseLike, + /** 可选参数, 上传文件改变时的状态，详见 onChange */ + onChange?:(info:UploadChangeParam) => void, + /** 上传列表的内建样式，支持两种基本样式 `text` or `picture` */ + listType?:'text' | 'picture', + /** 自定义类名*/ + className?:string, + + onPreview?:(file:File) => void, + + onRemove?:(file:File) => void, + + supportServerRender?:boolean, + + style?:React.CSSProperties +} +/** + * #Upload + 文件选择上传和拖拽上传控件。 + + ## 何时使用 + + 上传是将信息（网页、文字、图片、视频等）通过网页或者上传工具发布到远程服务器上的过程。 + + - 当需要上传一个或一些文件时。 + - 当需要展现上传的进度时。 + - 当需要使用拖拽交互时。*/ +export class Upload extends React.Component { +} + +interface RateProps { + count?:number, + value?:number, + defaultValue?:number, + onChange?:(value:number) => void, + allowHalf?:boolean, + disabled?:boolean, + style?:React.CSSProperties +} +export class Rate extends React.Component { +} + +interface CardProps { + title?:React.ReactNode, + extra?:React.ReactNode, + bordered?:boolean, + bodyStyle?:React.CSSProperties, + style?:React.CSSProperties, + loading?:boolean +} +export class Card extends React.Component { +} + +interface LocaleProviderProps { + locale?:any +} +export class LocaleProvider extends React.Component { +} diff --git a/package.json b/package.json index 0ebda09fa9..825fcf3e36 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,7 @@ "files": [ "dist", "lib", - "type-definitions" + "index.d.ts" ], "typings": "type-definitions/antd.d.ts", "license": "MIT", diff --git a/type-definitions/antd.d.ts b/type-definitions/antd.d.ts deleted file mode 100644 index bc64df86d5..0000000000 --- a/type-definitions/antd.d.ts +++ /dev/null @@ -1,2006 +0,0 @@ -// Type definitions for Antd v1.0.1 -// Project: http://ant.design -// Definitions by: bang88 , Bruce Mitchener -// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped - -import * as React from 'react' - -declare module "antd" { - // Affix - interface AffixProps { - /** - * 距离窗口顶部达到指定偏移量后触发 - */ - offsetTop?: number, - offsetBottom?: number, - style?: React.CSSProperties - } - /** - * # Affix - * 将页面元素钉在可视范围。 - * ## 何时使用 - * 当内容区域比较长，需要滚动页面时，这部分内容对应的操作或者导航需要在滚动范围内始终展现。常用于侧边菜单和按钮组合。 - * 页面可视范围过小时，慎用此功能以免遮挡页面内容。 - */ - export class Affix extends React.Component { - } - - 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 { - } - - - interface BadgeProps { - /** 展示的数字，大于 overflowCount 时显示为 `${overflowCount}+`，为 0 时隐藏*/ - count: number, - /** 展示封顶的数字值*/ - overflowCount?: number, - /** 不展示数字，只有一个小红点*/ - dot?: boolean, - - style?: React.CSSProperties - } - // Badge - /** - * #Badge - * - * 图标右上角的圆形徽标数字。 - - * ## 何时使用 - - * 一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数，通过醒目视觉形式吸引用户处理。 - * - */ - export class Badge extends React.Component { - } - - 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 { - } - - /** - * #Button - 按钮用于开始一个即时操作。 - - ## 何时使用 - - 标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。*/ - export class Button extends React.Component { - static Group: typeof ButtonGroup - } - - // Breadcrumb - - interface BreadcrumbItemProps { - /** 链接，如不传则不可点击 */ - href?: string - } - export class BreadcrumbItem extends React.Component { - } - - interface BreadcrumbProps { - prefixCls?: string, - /** router 的路由栈信息 */ - routes?: Array, - /** 路由的参数*/ - 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 { - 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 { - } - - 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 { - } - - export interface CascaderOptionType { - value: string, - label: string, - disabled?: boolean, - children?: Array - } - - type CascaderExpandTrigger = 'click' | 'hover' - // Cascader - interface CascaderProps { - /** 可选项数据源*/ - options: Array, - /** 默认的选中项*/ - defaultValue?: Array, - /** 指定选中项*/ - value?: Array, - /** 选择完成后的回调*/ - onChange?: (value: string, selectedOptions: CascaderOptionType) => void, - /** 选择后展示的渲染函数*/ - displayRender?: (label: Array) => 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 { - } - - // 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, - /** 指定选中的选项*/ - value?: Array, - /** 指定可选项*/ - options?: Array | Array, - /** 变化时回调函数*/ - onChange?: (checkedValue: Array) => void, - - disabled?: boolean, - - style?: React.CSSProperties - } - /** Checkbox 组*/ - class CheckboxGroup extends React.Component { - } - /** - * #Checkbox - 多选框。 - - ## 何时使用 - - - 在一组可选项中进行多项选择时； - - 单独使用可以表示两种状态之间的切换，和 `switch` 类似。区别在于切换 `switch` 会直接触发状态改变，而 `checkbox` 一般用于状态标记，需要和提交操作配合。 - */ - export class Checkbox extends React.Component { - static Group: typeof CheckboxGroup - } - - // Collapse - - interface CollapseProps { - /** 当前激活 tab 面板的 key*/ - activeKey?: Array | string, - /** 初始化选中面板的key */ - defaultActiveKey?: Array, - /** 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 { - } - /** - * #Collapse - 可以折叠/展开的内容区域。 - - ## 何时使用 - - - 对复杂区域进行分组和隐藏，保持页面的整洁。 - - `手风琴` 是一种特殊的折叠面板，只允许单个内容区域展开。*/ - export class Collapse extends React.Component { - 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, - defaultValue?: Array, - format?: string, - onChange?: (date: Array, dateString: Array) => void, - style: React.CSSProperties, - showTime: boolean | Object - - } - class RangePicker extends React.Component { - } - - interface MonthPickProps { - value?: DatePickerDateType, - defaultValue?: DatePickerDateType, - /** 展示的日期格式，配置参考 [GregorianCalendarFormat](https://github.com/yiminghe/gregorian-calendar-format)*/ - format?: string, - /** 时间发生变化的回调，发生在用户选择时间时*/ - onChange?: (date: Date) => void, - /** 禁用*/ - disabled?: boolean, - style?: React.CSSProperties, - /** 格外的弹出日历样式*/ - popupStyle?: React.CSSProperties, - /** 输入框大小，`large` 高度为 32px，`small` 为 22px，默认是 28px*/ - size?: 'large' | 'small', - /** 国际化配置*/ - locale?: Object, - /** 定义浮层的容器，默认为 body 上新建 div*/ - getCalendarContainer?: Function - } - class MonthPicker extends React.Component { - } - /** - * #DatePicker - 输入或选择日期的控件。 - - ## 何时使用 - - 当用户需要输入一个日期，可以点击标准输入框，弹出日期面板进行选择。*/ - export class DatePicker extends React.Component { - static RangePicker: typeof RangePicker - static MonthPicker: typeof MonthPicker - } - - // Dropdown - - interface DropdownProps { - /** 触发下拉的行为 ['click'] or ['hover']*/ - trigger?: Array, - /** 菜单节点*/ - overlay: React.ReactNode, - - style?: React.CSSProperties - } - - interface DropdownButtonProps { - /** 按钮类型*/ - type?: 'primary' | 'ghost' | 'dash', - /** 点击左侧按钮的回调*/ - onClick?: React.FormEventHandler, - /** 触发下拉的行为*/ - trigger?: 'click' | 'hover', - /** 菜单节点*/ - overlay: React.ReactNode, - - visible?: boolean, - - onVisibleChange?: (visible: boolean) => void, - - style?: React.CSSProperties - } - - class DropdownButton extends React.Component { - } - /** - * #Dropdown - 向下弹出的列表。 - - ## 何时使用 - - 当页面上的操作命令过多时，用此组件可以收纳操作元素。点击或移入触点，会出现一个下拉菜单。可在列表中进行选择，并执行相应的命令。 - */ - export class Dropdown extends React.Component { - static Button: typeof DropdownButton - } - - export interface FormItemLabelColOption { - span: number, - offset: number - } - - // Form - interface FormItemProps { - prefixCls?: string, - /** label 标签的文本*/ - label?: string, - /** label 标签布局，通 `` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}`*/ - labelCol?: FormItemLabelColOption, - /** 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol*/ - wrapperCol?: FormItemLabelColOption, - /** 提示信息，如不设置，则会根据校验规则自动生成 */ - help?: string, - /** 额外的提示信息，和 help 类似，当需要错误信息和提示文案同时出现时，可以使用这个。*/ - extra?: string, - /** 是否必填，如不设置，则会根据校验规则自动生成 */ - validateStatus?: 'success' | 'warning' | 'error' | 'validating', - /** 配合 validateStatus 属性使用，是否展示校验状态图标 */ - hasFeedback?: boolean, - - className?: string, - - required?: boolean, - - style?: React.CSSProperties - } - /** - 表单一定会包含表单域，表单域可以是输入控件，标准表单域，标签，下拉菜单，文本域等。 - - 这里我们分别封装了表单域 `` 和输入控件 ``。*/ - export class FormItem extends React.Component { - } - - interface FormComponentProps { - form: CreateFormOptions - } - export class FormComponent extends React.Component { - } - - // function create - type CreateFormOptions = { - /** 获取一组输入控件的值，如不传入参数，则获取全部组件的值*/ - getFieldsValue(): (fieldNames?: Array) => any - /** 获取一个输入控件的值*/ - getFieldValue(): (fieldName: string) => any - /** 设置一组输入控件的值*/ - setFieldsValue(): (obj: Object) => void - /** 设置一组输入控件的值*/ - setFields(): (obj: Object) => void - /** 校验并获取一组输入域的值与 Error*/ - validateFields(): (fieldNames?: Array, options?: Object, callback?: (erros: any, values: any) => void) => any - /** 与 `validateFields` 相似，但校验完后，如果校验不通过的菜单域不在可见范围内，则自动滚动进可见范围 */ - validateFieldsAndScroll(): (fieldNames?: Array, options?: Object, callback?: (erros: any, values: any) => void) => any - /** 获取某个输入控件的 Error */ - getFieldError(): (name: string) => Object - /** 判断一个输入控件是否在校验状态*/ - isFieldValidating(): (name: string) => Object - /**重置一组输入控件的值与状态，如不传入参数，则重置所有组件*/ - resetFields(): (names?: Array) => void - - getFieldsValue(): (id: string, options: { - /** 子节点的值的属性，如 Checkbox 的是 'checked'*/ - valuePropName?: string, - /** 子节点的初始值，类型、可选值均由子节点决定*/ - initialValue?: any, - /** 收集子节点的值的时机*/ - trigger?: string, - /** 校验子节点值的时机*/ - validateTrigger?: string, - /** 校验规则，参见 [async-validator](https://github.com/yiminghe/async-validator) */ - rules?: Array, - /** 必填输入控件唯一标志*/ - id?: string - }) => Array - } - - interface ComponentDecorator { - (component: T): T; - } - interface FormProps { - prefixCls?: string, - /** 水平排列布局*/ - horizontal?: boolean, - /** 行内排列布局*/ - inline?: boolean, - /** 经 `Form.create()` 包装过的组件会自带 `this.props.form` 属性，直接传给 Form 即可*/ - form?: Object, - /** 数据验证成功后回调事件*/ - onSubmit?: React.FormEventHandler, - - style?: React.CSSProperties - } - - interface FormCreateOption { - /** - * 当 `Form.Item` 子节点的值发生改变时触发，可以把对应的值转存到 Redux store - */ - onFieldsChange?: (props: any, fields: Array) => void, - /** 把 props 转为对应的值，可用于把 Redux store 中的值读出 */ - mapPropsToFields?: (props: any) => void - } - /** - * #Form - 具有数据收集、校验和提交功能的表单，包含复选框、单选框、输入框、下拉选择框等元素。 - - ## 表单 - - 我们为 `form` 提供了以下两种排列方式： - - - 水平排列：可以实现 `label` 标签和表单控件的水平排列; - - 行内排列：使其表现为 `inline-block` 级别的控件。 - */ - export class Form extends React.Component { - static Item: typeof FormItem - static create(options?: FormCreateOption): ComponentDecorator - } - - - // Icon - interface IconProps { - /** 图标类型*/ - type: string, - - style?: React.CSSProperties - } - /** - * #Icon - 有含义的矢量图形，每一个图标打倒一个敌人。 - - ## 图标的命名规范 - - 我们为每个图标赋予了语义化的命名，命名规则如下: - - - 实心和描线图标保持同名，用 `-o` 来区分，比如 `question-circle`(实心) 和 `question-circle-o`(描线)； - - - 命名顺序：`[icon名]-[形状可选]-[描线与否]-[方向可选]`。 - - ## 如何使用 - - 使用 `` 标签声明组件，指定图标对应的 type 属性，示例代码如下: - - ```html - - ``` - - 最终会渲染为： - - ```html - - ```*/ - export class Icon extends React.Component { - } - - // Input - interface InputProps { - /** 【必须】声明 input 类型，同原生 input 标签的 type 属性*/ - type?: string, - id?: string, - /** 控件大小，默认值为 default 。注：标准表单内的输入框大小限制为 large。 {'large','default','small'}*/ - size?: string, - /** 是否禁用状态，默认为 false*/ - disabled?: boolean, - value?: any, - /** 设置初始默认值*/ - defaultValue?: any, - className?: string, - /** 带标签的 input，设置前置标签*/ - addonBefore?: React.ReactNode, - /** 带标签的 input，设置后置标签*/ - addonAfter?: React.ReactNode, - prefixCls?: string, - placeholder?: string, - onChange?: React.FormEventHandler, - style: React.CSSProperties - } - export class Input extends React.Component { - } - - // InputNumber - interface InputNumberProps { - /** 最小值*/ - min: number, - /** 最大值*/ - max: number, - /** 当前值*/ - value?: number, - /** 每次改变步数*/ - step?: number, - /** 初始值*/ - defaultValue?: number, - /** 变化回调*/ - onChange?: React.FormEventHandler, - /** 禁用*/ - disabled?: boolean, - /** 输入框大小*/ - size?: string, - - style?: React.CSSProperties - - } - /** - * #InputNumber - 通过鼠标或键盘，输入范围内的数值。 - - ## 何时使用 - - 当需要获取标准数值时。*/ - export class InputNumber extends React.Component { - } - - - // Layout - // Row - interface RowProps { - gutter?: number, - type?: 'flex', - align?: 'top' | 'middle' | 'bottom', - justify?: 'start' | 'end' | 'center' | 'space-around' | 'space-between', - style?: React.CSSProperties, - className?: string, - } - export class Row extends React.Component { - } - - // Col - interface ColProps { - span?: number, - order?: number, - offset?: string, - push?: string, - pull?: string, - className?: string, - style?: React.CSSProperties - } - /** - 在多数业务情况下，Ant Design需要在设计区域内解决大量信息收纳的问题，因此在12栅格系统的基础上，我们将整个设计建议区域按照24等分的原则进行划分。 - - 划分之后的信息区块我们称之为“盒子”。建议横向排列的盒子数量最多四个，最少一个。“盒子”在整个屏幕上占比见上图。设计部分基于盒子的单位定制盒子内部的排版规则，以保证视觉层面的舒适感。 - - ## 概述 - - 布局的栅格化系统，我们是基于行（row）和列（col）来定义信息区块的外部框架，以保证页面的每个区域能够稳健地排布起来。下面简单介绍一下它的工作原理： - - * 通过`row`在水平方向建立一组`column`（简写col） - * 你的内容应当放置于`col`内，并且，只有`col`可以作为`row`的直接元素 - * 栅格系统中的列是指1到24的值来表示其跨越的范围。例如，三个等宽的列可以使用`.col-8`来创建 - * 如果一个`row`中的`col`总和超过24，那么多余的`col`会作为一个整体另起一行排列 - - ## Flex 布局 - - 我们的栅格化系统支持 Flex 布局，允许子元素在父节点内的水平对齐方式 - 居左、居中、居右、等宽排列、分散排列。子元素与子元素之间，支持顶部对齐、垂直居中对齐、底部对齐的方式。同时，支持使用 order 来定义元素的排列顺序。 - - Flex 布局是基于 24 栅格来定义每一个“盒子”的宽度，但排版则不拘泥于栅格。*/ - export class Col extends React.Component { - } - - // Menu - interface MenuItemProps { - /** - * (是否禁用) - * - * @type {boolean} - */ - disabled?: boolean, - key?: string, - style?: React.CSSProperties - - } - export class MenuItem extends React.Component { - } - - interface MenuSubMenuProps { - disabled?: boolean, - key?: string, - /** - * (子菜单项值) - * - * @type {(string | React.ReactNode)} - */ - title: string | React.ReactNode, - /** - * (子菜单的菜单项) - * - * @type {(MenuItem | MenuSubMenu)} - */ - children?: Array, - - onTitleClick?: Function, - - style?: React.CSSProperties - } - export class MenuSubMenu extends React.Component { - } - - interface MenuItemGroupProps { - /** - * (分组标题) - * - * @type {(string | React.ReactNode)} - */ - title: string | React.ReactNode, - /** - * (分组的菜单项) - * - * @type {MenuItem} - */ - children?: Array, - - style?: React.CSSProperties - } - export class MenuItemGroup extends React.Component { - } - - interface MenuProps { - /** 主题颜色*/ - theme?: 'light' | 'dark', - /** 菜单类型 enum: `vertical` `horizontal` `inline`*/ - mode?: 'vertical' | 'horizontal' | 'inline', - /** 当前选中的菜单项 key 数组*/ - selectedKeys?: Array, - /** 初始选中的菜单项 key 数组*/ - defaultSelectedKeys?: Array, - /** 当前展开的菜单项 key 数组*/ - openKeys?: Array, - /** 初始展开的菜单项 key 数组*/ - defaultOpenKeys?: Array, - - onOpen?: Function, - - onClose?: Function, - - /** - * 被选中时调用 - * - * @type {(item: any, key: string, selectedKeys: Array) => void} - */ - onSelect?: (item: any, key: string, selectedKeys: Array) => void, - /** 取消选中时调用*/ - onDeselect?: (item: any, key: string, selectedKeys: Array) => void, - /** 点击 menuitem 调用此函数*/ - onClick?: (item: any, key: string) => void, - /** 根节点样式*/ - style?: React.CSSProperties - } - /** - # Menu - 为页面和功能提供导航的菜单列表。 - - ## 何时使用 - - 导航菜单是一个网站的灵魂，用户依赖导航在各个页面中进行跳转。一般分为顶部导航和侧边导航，顶部导航提供全局性的类目和功能，侧边导航提供多级结构来收纳和排列网站架构。 - - 更多布局和导航的范例可以参考：[常用布局](/spec/layout)。*/ - export class Menu extends React.Component { - static Item: typeof MenuItem - static SubMenu: typeof MenuSubMenu - static ItemGroup: typeof MenuItemGroup - static Divider: typeof React.Component - } - - // Message - type MessageFunc = ( - /** 提示内容*/ - content: string, - /** 自动关闭的延时*/ - duration?: number - ) => void - /** - * #Message - 全局展示操作反馈信息。 - - ## 何时使用 - - - 可提供成功、警告和错误等反馈信息。 - - 顶部居中显示并自动消失，是一种不打断用户操作的轻量级提示方式。*/ - export const message: { - - success: MessageFunc - error: MessageFunc - info: MessageFunc - loading: MessageFunc - config: (options: { - /** - * 消息距离顶部的位置 - * - * @type {number} - */ - top: number, - duration?: number - }) => void - destroy: () => void - } - - // Modal - type ModalFunc = (options: { - visible?: boolean, - title?: React.ReactNode | string, - content?: React.ReactNode | string, - onOk?: Function, - onCancel?: Function, - width?: string | number, - iconClassName?: string, - okText?: string, - cancelText?: string - }) => void - - interface ModalProps { - /** 对话框是否可见*/ - visible?: boolean, - /** 确定按钮 loading*/ - confirmLoading?: boolean, - /** 标题*/ - title?: React.ReactNode | string, - /** 是否显示右上角的关闭按钮*/ - closable?: boolean, - /** 点击确定回调*/ - onOk?: Function, - /** 点击遮罩层或右上角叉或取消按钮的回调*/ - onCancel?: Function, - /** 宽度*/ - width?: string | number, - /** 底部内容*/ - footer?: React.ReactNode | string, - /** 确认按钮文字*/ - okText?: string, - /** 取消按钮文字*/ - cancelText?: string, - /** 点击蒙层是否允许关闭*/ - maskClosable?: boolean, - - style?: React.CSSProperties, - - wrapClassName?: string - } - - /** - # Modal - 模态对话框。 - - ## 何时使用 - - 需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用 `Modal` 在当前页面正中打开一个浮层，承载相应的操作。 - - 另外当需要一个简洁的确认框询问用户时，可以使用精心封装好的 `ant.Modal.confirm()` 等方法。*/ - export class Modal extends React.Component { - static info: ModalFunc - static success: ModalFunc - static error: ModalFunc - static confirm: ModalFunc - } - - // Notification - type NotificationFunc = ( - config: { - /** 通知提醒标题，必选 */ - message: React.ReactNode | string, - /** 通知提醒内容，必选*/ - description: React.ReactNode | string, - /** 自定义关闭按钮*/ - btn?: React.ReactNode | string, - /** 当前通知唯一标志*/ - key?: string, - /** 点击默认关闭按钮时触发的回调函数*/ - onClose?: Function, - /** 默认 4.5 秒后自动关闭，配置为 null 则不自动关闭*/ - duration?: number - }) => void - /** - * #notification - 全局展示通知提醒信息。 - - ## 何时使用 - - 在系统右上角显示通知提醒信息。经常用于以下情况： - - - 较为复杂的通知内容。 - - 带有交互的通知，给出用户下一步的行动点。 - - 系统主动推送。*/ - export const notification: { - success: NotificationFunc - error: NotificationFunc - info: NotificationFunc - warn: NotificationFunc - close: (key: string) => void - destroy: () => void - config: (options: { - /** 消息距离顶部的位置*/ - top: number - }) => void - - } - - - // Pagination - interface PaginationProps { - /** 当前页数*/ - current?: number, - /** 默认的当前页数*/ - defaultCurrent?: number, - /** 数据总数*/ - total: number, - /** 初始的每页条数*/ - defaultPageSize?: number, - /** 每页条数*/ - pageSize?: number, - /** 页码改变的回调，参数是改变后的页码*/ - onChange?: Function, - /** 是否可以改变 pageSize */ - showSizeChanger?: boolean, - /** 指定每页可以显示多少条*/ - pageSizeOptions?: Array - /** pageSize 变化的回调 */ - onShowSizeChange?: Function, - /** 是否可以快速跳转至某页*/ - showQuickJumper?: boolean, - /** 当为「small」时，是小尺寸分页 */ - size?: string, - /** 当添加该属性时，显示为简单分页*/ - simple?: Object, - /** 用于显示总共有多少条数据*/ - showTotal?: Function, - - style?: React.CSSProperties - } - /** - * #Pagination - 采用分页的形式分隔长列表，每次只加载一个页面。 - - ## 何时使用 - - - 当加载/渲染所有数据将花费很多时间时； - - 可切换页码浏览数据。*/ - export class Pagination extends React.Component { - } - - - interface PopconfirmProps { - /** - * 气泡框位置，可选 `top/left/right/bottom` - * - * @type {(Placement | string)} - */ - placement?: 'top' | 'left' | 'right' | 'bottom', - /** 确认框的描述*/ - title?: string, - /** 点击确认的回调*/ - onConfirm?: Function, - onCancel?: Function, - /** 显示隐藏的回调*/ - onVisibleChange?: (visible: boolean) => void, - /** 确认按钮文字*/ - okText?: string, - /** 取消按钮文字*/ - cancelText?: string, - - style?: React.CSSProperties - } - /** - * #Popconfirm - 点击元素，弹出气泡式的确认框。 - - ## 何时使用 - - 目标元素的操作需要用户进一步的确认时，在目标元素附近弹出浮层提示，询问用户。 - - 和 `confirm` 弹出的全屏居中模态对话框相比，交互形式更轻量。 - */ - export class Popconfirm extends React.Component { - } - - type PopoverPlacement = 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom' - type PropverTrigger = 'hover' | 'focus' | 'click' - - interface PopoverProps { - /** 触发行为，可选 `hover/focus/click` */ - trigger?: PropverTrigger, - /** 气泡框位置，可选 `top/left/right/bottom` `topLeft/topRight/bottomLeft/bottomRight` `leftTop/leftBottom/rightTop/rightBottom`*/ - placement?: PopoverPlacement - /** 卡片标题*/ - title?: React.ReactNode | string, - /** 卡片内容*/ - overlayClassName?: string, - - overlayStyle?: React.CSSProperties, - - prefixCls?: string, - /** 用于手动控制浮层显隐*/ - visible?: boolean, - /** 显示隐藏改变的回调*/ - onVisibleChange?: Function, - - getTooltipContainer?: Function, - - content?: React.ReactNode, - - style?: React.CSSProperties - } - /** - * #Popover - 点击/鼠标移入元素，弹出气泡式的卡片浮层。 - - ## 何时使用 - - 当目标元素有进一步的描述和相关操作时，可以收纳到卡片中，根据用户的操作行为进行展现。 - - 和 `Tooltip` 的区别是，用户可以对浮层上的元素进行操作，因此它可以承载更复杂的内容，比如链接或按钮等。 - */ - export class Popover extends React.Component { - } - - // Progress - type ProgressStatus = 'success' | 'active' | 'exception' - type ProgressType = 'line' | 'circle' - - interface ProgressProps { - type?: ProgressType, - percent?: number, - format?: (percent: number) => string, - status?: ProgressStatus, - showInfo?: boolean, - strokeWidth?: number, - width?: number, - style?: React.CSSProperties - } - /** - * #Progress - 展示操作的当前进度。 - - ## 何时使用 - - 在操作需要较长时间才能完成时，为用户显示该操作的当前进度和状态。 - - * 当一个操作会打断当前界面，或者需要在后台运行，且耗时可能超过2秒时； - * 当需要显示一个操作完成的百分比时。*/ - export class Progress extends React.Component{ - - } - - // Radio - type RadioGroupSize = 'large' | 'default' | 'small' - - interface RadioGroupProps { - /** 选项变化时的回调函数*/ - onChange?: React.FormEventHandler, - /** 用于设置当前选中的值*/ - value?: string, - /** 默认选中的值*/ - defaultValue?: string, - /** 大小，只对按钮样式生效*/ - size?: RadioGroupSize, - - style?: React.CSSProperties - } - export class RadioGroup extends React.Component { - } - - interface RadioProps { - /** 指定当前是否选中*/ - checked?: boolean, - /** 初始是否选中*/ - defaultChecked?: boolean, - /** 根据 value 进行比较，判断是否选中 */ - value?: any, - - style?: React.CSSProperties - } - /** - * #Radio - 单选框。 - - ## 何时使用 - - - 用于在多个备选项中选中单个状态。 - - 和 Select 的区别是，Radio 所有选项默认可见，方便用户在比较中选择，因此选项不宜过多。 - */ - export class Radio extends React.Component { - static Group: typeof RadioGroup - static Button: typeof RadioButton - } - - interface RadioButtonProps { - value: string, - style?: React.CSSProperties - } - - export class RadioButton extends React.Component { - } - - - // Select - interface SelectOptionProps { - /** 是否禁用*/ - disabled?: boolean, - /** 如果 react 需要你设置此项，此项值与 value 的值相同，然后可以省略 value 设置*/ - key?: string, - /** 默认根据此属性值进行筛选*/ - value: string - } - export class SelectOption extends React.Component { - } - - interface SelectOptGroupProps { - /** 组名*/ - label: string | React.ReactNode, - key?: string - } - export class SelectOptGroup extends React.Component { - } - - interface SelectProps { - /** 指定当前选中的条目*/ - value?: string | Array, - /** 指定默认选中的条目*/ - defaultValue?: string | Array, - /** 支持多选*/ - multiple?: boolean, - /** 支持清除, 单选模式有效*/ - allowClear?: boolean, - /** 是否根据输入项进行筛选，可为一个函数，返回满足要求的 option 即可*/ - filterOption?: boolean | Function, - /** 可以把随意输入的条目作为 tag，输入项不需要与下拉选项匹配*/ - tags?: boolean, - /** 被选中时调用，参数为选中项的 value 值 */ - onSelect?: (value: any, option: any) => void, - /** 取消选中时调用，参数为选中项的 option value 值，仅在 multiple 或 tags 模式下生效*/ - onDeselect?: (value: any, option: any) => void, - /** 选中option，或input的value变化(combobox 模式下)时，调用此函数*/ - onChange?: (value: any, label: any) => void, - /** 文本框值变化时回调*/ - onSearch?: (value: string) => void, - /** 选择框默认文字*/ - placeholder?: string, - /** 搜索框默认文字*/ - searchPlaceholder?: string, - /** 当下拉列表为空时显示的内容*/ - notFoundContent?: string, - /** 下拉菜单和选择器同宽*/ - dropdownMatchSelectWidth?: boolean, - /** 搜索时过滤对应的 option 属性，如设置为 children 表示对内嵌内容进行搜索*/ - optionFilterProp?: string, - /** 输入框自动提示模式*/ - combobox?: SVGSymbolElement, - /** 选择框大小，可选 `large` `small` */ - size?: string, - /** 在下拉中显示搜索框*/ - showSearch?: boolean, - /** 是否禁用*/ - disabled?: boolean, - style?: React.CSSProperties - } - /** - * #Select - 类似 Select2 的选择器。 - - ## 何时使用 - - 弹出一个下拉菜单给用户选择操作，用于代替原生的选择器，或者需要一个更优雅的多选器时。*/ - export class Select extends React.Component { - static Option: typeof SelectOption - static OptGroup: typeof SelectOptGroup - } - - interface SliderMark { - [key: string]: any - } - - // Slider - interface SliderProps { - /** 最小值*/ - min?: number, - /** 最大值*/ - max?: number, - /** 步长，取值必须大于 0，并且可被 (max - min) 整除。当 `marks` 不为空对象时，可以设置 `step` 为 `null`，此时 Slider 的可选值仅有 marks 标出来的部分。*/ - step?: number, - /** 分段标记，key 的类型必须为 `Number` 且取值在闭区间 [min, max] 内*/ - marks?: SliderMark, - /** 设置当前取值。当 `range` 为 `false` 时，使用 `Number`，否则用 `[Number, Number]`*/ - value?: number | Array, - /** 设置当前取值。当 `range` 为 `false` 时，使用 `Number`，否则用 `[Number, Number]`*/ - defaultValue?: number | Array, - /** `marks` 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列*/ - included?: boolean, - /** 值为 `true` 时，滑块为禁用状态*/ - disabled?: boolean, - /** 当 `range` 为 `true` 时，该属性可以设置是否允许两个滑块交换位置。*/ - allowCross?: boolean, - /** 当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入。*/ - onChange?: Function, - /** 与 `onmouseup` 触发时机一致，把当前值作为参数传入。*/ - onAfterChange?: Function, - /** Slider 会把当前值传给 `tipFormatter`，并在 Tooltip 中显示 `tipFormatter` 的返回值，若为 null，则隐藏 Tooltip。*/ - tipFormatter?: Function | any, - range?: boolean, - - style?: React.CSSProperties - } - /** - * #Slider - 滑动型输入器，展示当前值和可选范围。 - - ## 何时使用 - - 当用户需要在数值区间/自定义区间内进行选择时，可为连续或离散值。*/ - export class Slider extends React.Component { - } - - // Spin - interface SpinProps { - /** spin组件中点的大小，可选值为 small default large*/ - size?: 'small' | 'default' | 'large', - /** 用于内嵌其他组件的模式，可以关闭 loading 效果*/ - spinning?: boolean, - - tip?: string, - - style?: React.CSSProperties - } - /** - * #Spin - 用于页面和区块的加载中状态。 - - ## 何时使用 - - 页面局部处于等待异步数据或正在渲染过程时，合适的加载动效会有效缓解用户的焦虑。 - */ - export class Spin extends React.Component { - } - - // Steps - type StepStatus = 'wait' | 'process' | 'finish' | 'error' - - interface StepProps { - /** 可选参数，指定状态。当不配置该属性时，会使用父Steps元素的current来自动指定状态。*/ - status?: StepStatus, - /** 必要参数，标题。*/ - title: string | React.ReactNode, - /** 可选参数，步骤的详情描述。*/ - description?: string | React.ReactNode, - /** 可选参数，步骤的Icon。如果不指定，则使用默认的样式。*/ - icon?: string | React.ReactNode, - - style?: React.CSSProperties - } - export class Step extends React.Component { - } - - interface StepsProps { - status?: StepStatus, - /** 可选参数，指定当前处理正在执行状态的步骤，从0开始记数。在子Step元素中，可以通过status属性覆盖状态。*/ - current?: number, - /** 可选参数，指定大小（目前只支持普通和迷你两种大小）。 small, default */ - size?: 'default' | 'small', - /** 可选参数，指定步骤条方向（目前支持水平和竖直两种方向，默认水平方向）。*/ - direction?: string, - /** 可选参数，指定步骤的详细描述文字的最大宽度。*/ - maxDescriptionWidth?: number, - - style?: React.CSSProperties - - } - /** - * #Steps - 引导用户按照流程完成任务的导航条。 - - ## 何时使用 - - 当任务复杂或者存在先后关系时，将其分解成一系列步骤，从而简化任务。*/ - export class Steps extends React.Component { - static Step: typeof Step - } - - // Switch - interface SwitchProps { - /** 指定当前是否选中*/ - checked?: boolean, - /** 初始是否选中*/ - defaultChecked?: boolean, - /** 变化时回调函数*/ - onChange?: (checked: boolean) => void, - /** 选中时的内容*/ - checkedChildren?: React.ReactNode, - /** 非选中时的内容*/ - unCheckedChildren?: React.ReactNode, - /** 开关大小*/ - size?: string, - - style?: React.CSSProperties - } - /** - * #Switch - 开关选择器。 - - ## 何时使用 - - - 需要表示开关状态/两种状态之间的切换时； - - 和 `checkbox `的区别是，切换 `switch` 会直接触发状态改变，而 `checkbox` 一般用于状态标记，需要和提交操作配合。 - */ - export class Switch extends React.Component { - } - - // Table - type RowSelectionType = 'checkbox' | 'radio' - - type SelectedRowKeys = Array - - interface RowSelection { - type?: RowSelectionType, - selectedRowKeys?: SelectedRowKeys, - onChange?: (selectedRowKeys: SelectedRowKeys, selectedRows: any) => void, - getCheckboxProps?: (record: any) => void, - onSelect?: (record: any, selected: any, selectedRows: any) => void, - onSelectAll?: (rselectedecord: any, selectedRows: any, changeRows: any) => void, - style?: React.CSSProperties - } - - type Columns = Array - interface Column { - /** React 需要的 key，建议设置*/ - key: string | number, - /** 列头显示文字*/ - title?: string | React.ReactNode, - /** 列数据在数据项中对应的 key*/ - dataIndex?: string, - /** 生成复杂数据的渲染函数，参数分别为当前列的值，当前列数据，列索引，@return里面可以设置表格[行/列合并](#demo-colspan-rowspan)*/ - render?: (text?: any, record?: any, index?: number) => React.ReactNode, - /** 表头的筛选菜单项*/ - filters?: Array, - /** 本地模式下，确定筛选的运行函数*/ - onFilter?: Function, - /** 是否多选*/ - filterMultiple?: boolean, - /** 排序函数，本地排序使用一个函数，需要服务端排序可设为 true */ - sorter?: boolean | Function, - /** 表头列合并,设置为 0 时，不渲染*/ - colSpan?: number, - /** 列宽度*/ - width?: string | number, - /** 列的 className*/ - className?: string, - - fixed?: boolean | 'left' | 'right', - - filteredValue?: Array, - - sortOrder?: boolean | 'ascend' | 'descend' - } - - interface TableProps { - /** 列表项是否可选择*/ - rowSelection?: RowSelection, - /** 分页器*/ - pagination?: Object, - /** 正常或迷你类型 : `default` or `small` */ - size?: string, - /** 数据数组*/ - dataSource: Array, - /** 表格列的配置描述*/ - columns: Columns, - /** 表格行 key 的取值*/ - rowKey?: (record: any, index: number) => string, - /** 额外的展开行*/ - expandedRowRender?: Function, - /** 默认展开的行*/ - defaultExpandedRowKeys?: Array, - /** 分页、排序、筛选变化时触发*/ - onChange?: (pagination: Object, filters: any, sorter: any) => void, - /** 页面是否加载中*/ - loading?: boolean, - /** 默认文案设置，目前包括排序、过滤、空数据文案: `{ filterConfirm: '确定', filterReset: '重置', emptyText: '暂无数据' }` */ - locale?: Object, - /** 展示树形数据时，每层缩进的宽度，以 px 为单位*/ - indentSize?: number, - /** 处理行点击事件*/ - onRowClick?: (record: any, index: number) => void, - /** 是否固定表头*/ - useFixedHeader?: boolean, - /** 是否展示外边框和列边框*/ - bordered?: boolean, - /** 是否显示表头*/ - showHeader?: boolean, - /** 表格底部自定义渲染函数*/ - footer?: (currentPageData: Object) => void, - - style?: React.CSSProperties - } - /** - * #Table - 展示行列数据。 - - ## 何时使用 - - - 当有大量结构化的数据需要展现时； - - 当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时。*/ - export class Table extends React.Component { - } - - // Tabs - interface TabPaneProps { - /** 选项卡头显示文字*/ - tab: React.ReactNode | string, - - style?: React.CSSProperties - } - export class TabPane extends React.Component { - } - - type TabsType = 'line' | 'card' | 'editable-card' - type TabsPosition = 'top' | 'right' | 'bottom' | 'left'; - - interface TabsProps extends React.Props { - /** 当前激活 tab 面板的 key */ - activeKey?: string, - /** 初始化选中面板的 key，如果没有设置 activeKey*/ - defaultActiveKey?: string, - /** 切换面板的回调*/ - onChange?: (activeKey: string) => void, - /** tab 被点击的回调 */ - onTabClick?: Function, - /** tab bar 上额外的元素 */ - tabBarExtraContent?: React.ReactNode, - /** 页签的基本样式，可选 `line`、`card` `editable-card` 类型*/ - type?: TabsType, - /** 页签位置，可选值有 `top` `right` `bottom` `left`*/ - tabPosition?: TabsPosition, - /** 新增和删除页签的回调，在 `type="editable-card"` 时有效*/ - onEdit?: (targetKey: string, action: any) => void, - - style?: React.CSSProperties - } - /** - * #Tabs - 选项卡切换组件。 - - ## 何时使用 - - 提供平级的区域将大块内容进行收纳和展现，保持界面整洁。 - - Ant Design 依次提供了三级选项卡，分别用于不同的场景。 - - - 卡片式的页签，提供可关闭的样式，常用于容器顶部。 - - 标准线条式页签，用于容器内部的主功能切换，这是最常用的 Tabs。 - - [RadioButton](/components/radio/#demo-radiobutton) 可作为更次级的页签来使用。*/ - export class Tabs extends React.Component { - static TabPane: typeof TabPane - } - - // Tag - interface TagProps { - /** 标签是否可以关闭*/ - closable?: boolean, - /** 关闭时的回调*/ - onClose?: Function, - /** 动画关闭后的回调*/ - afterClose?: Function, - /** 标签的色彩*/ - color?: string, - - style?: React.CSSProperties - } - /** - * #Tag - 进行标记和分类的小标签。 - - ## 何时使用 - - - 用于标记事物的属性和维度。 - - 进行分类。*/ - export class Tag extends React.Component { - } - - // TimePicker - interface TimePickerProps { - /** 默认时间*/ - value?: string | Date, - /** 初始默认时间*/ - defaultValue?: string | Date, - /** 展示的时间格式 : "HH:mm:ss"、"HH:mm"、"mm:ss" */ - format?: string, - /** 时间发生变化的回调*/ - onChange?: (Date: Date) => void, - /** 禁用全部操作*/ - disabled?: boolean, - /** 没有值的时候显示的内容*/ - placeholder?: string, - /** 国际化配置*/ - locale?: Object, - /** 隐藏禁止选择的选项*/ - hideDisabledOptions?: boolean, - /** 禁止选择部分小时选项*/ - disabledHours?: Function, - /** 禁止选择部分分钟选项*/ - disabledMinutes?: Function, - /** 禁止选择部分秒选项*/ - disabledSeconds?: Function, - - style?: React.CSSProperties - } - /** - * #TimePicker - 输入或选择时间的控件。 - - 何时使用 - -------- - - 当用户需要输入一个时间，可以点击标准输入框，弹出时间面板进行选择。 - */ - export class TimePicker extends React.Component { - } - - // Timeline - interface TimeLineItemProps { - /** 指定圆圈颜色。*/ - color?: string, - dot?: React.ReactNode, - style?: React.CSSProperties - } - export class TimeLineItem extends React.Component { - } - - interface TimelineProps { - /** 指定最后一个幽灵节点是否存在或内容*/ - pending?: boolean | React.ReactNode, - - style?: React.CSSProperties - } - /** - * #Timeline - 垂直展示的时间流信息。 - - ## 何时使用 - - - 当有一系列信息需要从上至下按时间排列时； - - 需要有一条时间轴进行视觉上的串联时；*/ - export class Timeline extends React.Component { - static Item: typeof TimeLineItem - } - - // Tooltip - interface TooltipProps { - /** 气泡框位置，可选 `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom`*/ - placement?: PopoverPlacement, - /** 提示文字*/ - title?: string | React.ReactNode, - - style?: React.CSSProperties - } - /** - * #Tooltip - 简单的文字提示气泡框。 - - ## 何时使用 - - 鼠标移入则显示提示，移出消失，气泡浮层不承载复杂文本和操作。 - - 可用来代替系统默认的 `title` 提示，提供一个`按钮/文字/操作`的文案解释。*/ - export class Tooltip extends React.Component { - } - - interface TransferItem { - key: number | string, - title: string, - description?: string, - chosen: boolean, - } - - // Transfer - interface TransferProps { - /** 数据源*/ - dataSource: Array, - /** 每行数据渲染函数*/ - render?: (record: TransferItem) => any, - /** 显示在右侧框数据的key集合*/ - targetKeys: Array, - /** 变化时回调函数*/ - onChange?: (targetKeys: Array, direction: string, moveKeys: any) => void, - /** 两个穿梭框的自定义样式*/ - listStyle?: React.CSSProperties, - /** 自定义类*/ - className?: string, - /** 标题集合,顺序从左至右*/ - titles?: Array, - /** 操作文案集合,顺序从上至下*/ - operations?: Array, - /** 是否显示搜索框*/ - showSearch?: boolean, - /** 搜索框的默认值*/ - searchPlaceholder?: string, - /** 当列表为空时显示的内容*/ - notFoundContent?: React.ReactNode | string - /** 底部渲染函数*/ - footer?: (props: any) => any, - - style?: React.CSSProperties - } - /** - * #Transfer - 双栏穿梭选择框。 - - ## 何时使用 - - 用直观的方式在两栏中移动元素，完成选择行为。 - */ - export class Transfer extends React.Component { - } - - - // Tree - interface TreeNodeProps { - disabled?: boolean, - disableCheckbox?: boolean, - title?: string | React.ReactNode, - key?: string, - isLeaf?: boolean - } - export class TreeNode extends React.Component { - } - - interface TreeNodeEvent { - event: 'check' | 'select', - node: TreeNode, - - checked?: boolean, - checkedNodes?: Array, - - selected?: boolean, - selectedNodes?: Array, - } - - interface TreeNodeMouseEvent { - node: TreeNode, - event: React.MouseEventHandler, - } - - interface TreeProps { - showLine?: boolean, - className?: string, - /** 是否支持多选*/ - multiple?: boolean, - /**是否自动展开父节点 */ - autoExpandParent?: boolean, - /**checkable状态下节点选择完全受控（父子节点选中状态不再关联）*/ - checkStrictly?: boolean, - /** 是否支持选中*/ - checkable?: boolean, - /** 默认展开所有树节点*/ - defaultExpandAll?: boolean, - /** 默认展开指定的树节点*/ - defaultExpandedKeys?: Array, - /** （受控）展开指定的树节点*/ - expandedKeys?: Array, - /** （受控）选中复选框的树节点*/ - checkedKeys?: Array, - /** 默认选中复选框的树节点*/ - defaultCheckedKeys?: Array, - /** （受控）设置选中的树节点*/ - selectedKeys?: Array, - /** 默认选中的树节点*/ - defaultSelectedKeys?: Array, - /** 展开/收起节点时触发 */ - onExpand?: (expandedKeys: Array, { node: TreeNode, expanded: boolean}) => void | PromiseLike, - /** 点击复选框触发*/ - onCheck?: (checkedKeys: Array, e: TreeNodeEvent) => void, - /** 点击树节点触发*/ - onSelect?: (selectedKeys: Array, e: TreeNodeEvent) => void, - /** filter some treeNodes as you need. it should return true */ - filterTreeNode?: (node: TreeNode) => boolean, - /** 异步加载数据*/ - loadData?: (node: TreeNode) => PromiseLike, - /** 响应右键点击*/ - onRightClick?: (options: TreeNodeMouseEvent) => void, - /** 设置节点可拖拽（IE>8）*/ - draggable?: boolean, - /** 开始拖拽时调用*/ - onDragStart?: (options: TreeNodeMouseEvent) => void, - /** dragenter 触发时调用*/ - onDragEnter?: (options: TreeNodeMouseEvent) => void, - /** dragover 触发时调用 */ - onDragOver?: (options: TreeNodeMouseEvent) => void, - /** dragleave 触发时调用*/ - onDragLeave?: (options: TreeNodeMouseEvent) => void, - /** drop 触发时调用*/ - onDrop?: (options: TreeNodeMouseEvent) => void, - - style?: React.CSSProperties - } - /** - * #Tree - * 文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构。使用`树控件`可以完整展现其中的层级关系，并具有展开收起选择等交互功能。 - */ - export class Tree extends React.Component { - static TreeNode: typeof TreeNode - } - - - // TreeSelect - interface TreeSelectTreeNodeProps { - disabled?: boolean, - /** 此项必须设置（其值在整个树范围内唯一）*/ - key: string, - /** 默认根据此属性值进行筛选*/ - value?: string, - /** 树节点显示的内容*/ - title?: React.ReactNode | string, - /** 是否是叶子节点*/ - isLeaf?: boolean - } - export class TreeSelectTreeNode extends React.Component { - } - - interface TreeData { - key: string - value: string, - label: React.ReactNode, - children?: Array - } - - interface TreeSelectProps { - style?: React.CSSProperties, - /** 指定当前选中的条目*/ - value?: string | Array, - /** 指定默认选中的条目*/ - defaultValue?: string | Array, - /** 支持多选*/ - multiple?: boolean, - /** 可以把随意输入的条目作为 tag，输入项不需要与下拉选项匹配*/ - tags?: boolean, - /** 被选中时调用，参数为选中项的 value 值*/ - onSelect?: (value: any) => void, - /** 选中option，或input的value变化(combobox 模式下)时，调用此函数*/ - onChange?: (value: any, label: any) => void, - /** 显示清除按钮*/ - allowClear?: boolean, - /** 文本框值变化时回调*/ - onSearch?: (value: any) => void, - /** 选择框默认文字*/ - placeholder?: string, - /** 搜索框默认文字*/ - searchPlaceholder?: string, - /** 下拉菜单的样式*/ - dropdownStyle?: React.CSSProperties, - /** 下拉菜单和选择器同宽*/ - dropdownMatchSelectWidth?: boolean, - /** 输入框自动提示模式*/ - combobox?: boolean, - /** 选择框大小，可选 `large` `small`*/ - size?: 'large' | 'small', - /** 在下拉中显示搜索框*/ - showSearch?: boolean, - /** 是否禁用*/ - disabled?: boolean, - /** 默认展开所有树节点*/ - treeDefaultExpandAll?: boolean, - /** 显示checkbox*/ - treeCheckable?: boolean, - /** 是否根据输入项进行筛选，返回值true*/ - filterTreeNode?: (treeNode: any) => boolean, - /** 输入项过滤对应的 treeNode 属性*/ - treeNodeFilterProp?: string, - /** 作为显示的prop设置*/ - treeNodeLabelProp?: string, - /** treeNodes数据，如果设置则不需要手动构造TreeNode节点（如果value在整个树范围内不唯一，需要设置`key`其值为整个树范围内的唯一id*/ - treeData?: Array, - - treeDataSimpleMode?: boolean, - /** 异步加载数据*/ - loadData?: (node: any) => void, - - showCheckedStrategy?: 'SHOW_ALL' | 'SHOW_PARENT' | 'SHOW_CHILD' - - } - /** - * #TreeSelect - 树型选择控件。 - - ## 何时使用 - - 类似 Select 的选择控件，可选择的数据结构是一个树形结构时，可以使用 TreeSelect，例如公司层级、学科系统、分类目录等等。 - */ - export class TreeSelect extends React.Component { - static TreeNode: typeof TreeSelectTreeNode - } - - - type UploadFileStatus = 'error' | 'success' | 'done' | 'uploading' | 'removed' - - export interface HttpRequestHeader { - [key: string]: string; - } - - interface File { - uid: number, - size: number, - name: string, - lastModifiedDate?: Date, - url?: string, - status?: UploadFileStatus, - percent?: number, - } - - interface UploadChangeParam { - file: File, - fileList: Array, - event?: { percent: number }, - } - - // Upload - interface UploadProps { - /** 可选参数, 上传的文件 */ - name?: string, - - defaultFileList?: Array, - - fileList?: Array, - /** 必选参数, 上传的地址 */ - action: string, - /** 可选参数, 上传所需参数 */ - data?: Object, - /** 可选参数, 设置上传的请求头部，IE10 以上有效*/ - headers?: HttpRequestHeader, - /** 可选参数, 是否展示 uploadList, 默认开启 */ - showUploadList?: boolean, - /** 可选参数, 是否支持多选文件，`ie10+` 支持。开启后按住 ctrl 可选择多个文件。*/ - multiple?: boolean, - /** 可选参数, 接受上传的文件类型, 详见 input accept Attribute */ - accept?: string, - /** 可选参数, 上传文件之前的钩子，参数为上传的文件，若返回 `false` 或者 Promise 则停止上传。**注意：该方法不支持老 IE**。*/ - beforeUpload?: (file: File) => boolean | PromiseLike, - /** 可选参数, 上传文件改变时的状态，详见 onChange */ - onChange?: (info: UploadChangeParam) => void, - /** 上传列表的内建样式，支持两种基本样式 `text` or `picture` */ - listType?: 'text' | 'picture', - /** 自定义类名*/ - className?: string, - - onPreview?: (file: File) => void, - - onRemove?: (file: File) => void, - - supportServerRender?: boolean, - - style?: React.CSSProperties - } - /** - * #Upload - 文件选择上传和拖拽上传控件。 - - ## 何时使用 - - 上传是将信息（网页、文字、图片、视频等）通过网页或者上传工具发布到远程服务器上的过程。 - - - 当需要上传一个或一些文件时。 - - 当需要展现上传的进度时。 - - 当需要使用拖拽交互时。*/ - export class Upload extends React.Component { - } - - interface RateProps { - count?: number, - value?: number, - defaultValue?: number, - onChange?: (value: number) => void, - allowHalf?: boolean, - disabled?: boolean, - style?: React.CSSProperties - } - export class Rate extends React.Component { - } - - interface CardProps { - title?: React.ReactNode, - extra?: React.ReactNode, - bordered?: boolean, - bodyStyle?: React.CSSProperties, - style?: React.CSSProperties, - loading?: boolean - } - export class Card extends React.Component { - } - - interface LocaleProviderProps { - locale?: any - } - export class LocaleProvider extends React.Component{ - } -}