From 09e7ae01c29d3bce827ca7f87970563bded7ae1d Mon Sep 17 00:00:00 2001 From: Wei Zhu Date: Tue, 7 Mar 2017 20:08:35 +0800 Subject: [PATCH] Add antd to not needed packages --- antd/antd-tests.tsx | 483 ---------- antd/index.d.ts | 2083 ---------------------------------------- antd/tsconfig.json | 24 - notNeededPackages.json | 8 +- 4 files changed, 7 insertions(+), 2591 deletions(-) delete mode 100644 antd/antd-tests.tsx delete mode 100644 antd/index.d.ts delete mode 100644 antd/tsconfig.json diff --git a/antd/antd-tests.tsx b/antd/antd-tests.tsx deleted file mode 100644 index 1319455e91..0000000000 --- a/antd/antd-tests.tsx +++ /dev/null @@ -1,483 +0,0 @@ -/// - -/*import { - Affix, - Button, - Alert, - Badge, - Breadcrumb, - Calendar, - Carousel, - Cascader, - Checkbox, - Collapse, - DatePicker, - Dropdown, - Icon, - Form, - Input, - InputNumber, - Row, - Col, - Menu, - message, - Modal, - notification, - Pagination, - Popconfirm, - Popover, - Progress, - QueueAnim, - Radio, - Select, - Slider, - Spin, - Steps, - Switch, - Table, - Tabs, - Tag, - TimePicker, - Timeline, - Tooltip, - Transfer, - Tree, - TreeSelect, - Upload, - - - -} from 'antd';*/ - -import * as React from 'react' -import Affix from 'antd/lib/Affix' -import Button from 'antd/lib/Button' -import Alert from 'antd/lib/Alert' -import Badge from 'antd/lib/Badge' -import Breadcrumb from 'antd/lib/Breadcrumb' -import Calendar from 'antd/lib/Calendar' -import Carousel from 'antd/lib/Carousel' -import Cascader from 'antd/lib/Cascader' -import Checkbox from 'antd/lib/Checkbox' -import Collapse from 'antd/lib/Collapse' -import DatePicker from 'antd/lib/DatePicker' -import Dropdown from 'antd/lib/Dropdown' -import Icon from 'antd/lib/Icon' -import Form from 'antd/lib/Form' -import Input from 'antd/lib/Input' -import InputNumber from 'antd/lib/InputNumber' -import Row from 'antd/lib/Row' -import Col from 'antd/lib/Col' -import Menu from 'antd/lib/Menu' -import message from 'antd/lib/message' -import Modal from 'antd/lib/Modal' -import notification from 'antd/lib/notification' -import Pagination from 'antd/lib/Pagination' -import Popconfirm from 'antd/lib/Popconfirm' -import Popover from 'antd/lib/Popover' -import Progress from 'antd/lib/Progress' -import QueueAnim from 'antd/lib/QueueAnim' -import Radio from 'antd/lib/Radio' -import Select from 'antd/lib/Select' -import Slider from 'antd/lib/Slider' -import Spin from 'antd/lib/Spin' -import Steps from 'antd/lib/Steps' -import Switch from 'antd/lib/Switch' -import Table from 'antd/lib/Table' -import Tabs from 'antd/lib/Tabs' -import Tag from 'antd/lib/Tag' -import TimePicker from 'antd/lib/TimePicker' -import Timeline from 'antd/lib/Timeline' -import Tooltip from 'antd/lib/Tooltip' -import Transfer from 'antd/lib/Transfer' -import Tree from 'antd/lib/Tree' -import TreeSelect from 'antd/lib/TreeSelect' -import Upload from 'antd/lib/Upload' - -const ButtonGroup = Button.Group; -const CheckboxGroup = Checkbox.Group; -const Panel = Collapse.Panel; -const RangePicker = DatePicker.RangePicker; -const MonthPicker = DatePicker.MonthPicker; -const DropdownButton = Dropdown.Button; -const SubMenu = Menu.SubMenu; -const MenuItemGroup = Menu.ItemGroup; -const ProgressCircle = Progress.Circle; -const ProgressLine = Progress.Line; -const RadioGroup = Radio.Group; -const Option = Select.Option; -const OptGroup = Select.OptGroup; -const Step = Steps.Step; -const FormItem = Form.Item; -const TabPane = Tabs.TabPane; -const TreeNode = Tree.TreeNode; -const TreeSelectTreeNode = TreeSelect.TreeNode; - -const onChange = () => { } - -const options = [{ - value: 'zhejiang', - label: '浙江', - children: [{ - value: 'hangzhou', - label: '杭州', - children: [{ - value: 'xihu', - label: '西湖', - }], - }], -}, { - value: 'jiangsu', - label: '江苏', - children: [{ - value: 'nanjing', - label: '南京', - children: [{ - value: 'zhonghuamen', - label: '中华门', - }], - }], - }]; - -const columns = [{ - title: '姓名', - dataIndex: 'name', - key: 'name', - render(text: any) { - return {text}; - } -}, { - title: '年龄', - dataIndex: 'age', - key: 'age', - }, { - title: '住址', - dataIndex: 'address', - key: 'address', - }, { - title: '操作', - key: 'operation', - render(text: any, record: any) { - return ( - - 操作一{record.name} - - 操作二 - - - 更多 - - - ); - } - }]; -const data = [{ - key: '1', - name: '胡彦斌', - age: 32, - address: '西湖区湖底公园1号' -}, { - key: '2', - name: '胡彦祖', - age: 42, - address: '西湖区湖底公园1号' - }, { - key: '3', - name: '李大嘴', - age: 32, - address: '西湖区湖底公园1号' - }]; - -// tests -class AccountForm extends React.Component{ - render() { - const { getFieldProps } = this.props.form; - return ( -
- - - - - - - - - - -
- ); - } -} - -var Account = Form.create()(AccountForm); - -// app -class App extends React.Component{ - render() { - message.success('success') - message.config({ top: 100 }) - message.destroy() - message.info('info', 1000) - message.error('error', 3500) - - Modal.info({ title: 'hello' }); - Modal.success({ cancelText: 'No' }) - notification.success({ - message: 'hello', - description: 'test' - }) - const props = { - name: 'file', - action: '/upload.do', - onChange(info: any) { - if (info.file.status !== 'uploading') { - console.log(info.file, info.fileList); - } - if (info.file.status === 'done') { - message.success(`${info.file.name} 上传成功。`); - } else if (info.file.status === 'error') { - message.error(`${info.file.name} 上传失败。`); - } - } - }; - return
- Affix - - - test - - - - - - - - - - - - 首页 - 应用中心 - 应用列表 - 某应用 - - - - - -

1

-

2

-

3

-

4

- - - - - - - -

test1

- - -

test2

- - -

test3

- - - - - - Hello Dp
}> - - 触发链接 - - - dpb

} type="primary"> - 某功能按钮 - - - - - - - - 导航一 - - - 导航 - 子菜单}> - - 选项1 - 选项2 - - - 选项3 - 选项4 - - - - - - - - - - , - - - remove - - Overlay} title="title"> - - - - - - - - - - - - - - - - - - -
demo1
-
demo2
-
demo3
-
demo4
- - - - A - B - C - D - - - - - - - - - - - - - - - - - - - - , - - - - 选项卡一内容 - 选项卡二内容 - 选项卡三内容 - - - 标签一 - 标签二 - { } }>标签三 - 标签四（链接） - - - - - - 创建服务现场 2015-09-01 - 初步排除网络异常 2015-09-01 - 技术测试异常 2015-09-01 - 网络异常正在修复 2015-09-01 - - - - - 鼠标移上来就会出现提示 - - - - - - - - - - - - - - - sss} key="0-0-1-0" /> - - - - - - - - - - - - - - - - - - - sss} key="random3" /> - - - - - - } -} diff --git a/antd/index.d.ts b/antd/index.d.ts deleted file mode 100644 index f262eda45f..0000000000 --- a/antd/index.d.ts +++ /dev/null @@ -1,2083 +0,0 @@ -// Type definitions for Antd v0.12.10 -// Project: http://ant.design -// Definitions by: bang88 , Bruce Mitchener -// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped -// TypeScript Version: 2.1 - -/// - -declare namespace Antd { - // Affix - interface AffixProps { - /** - * 达到指定偏移量后触发 - */ - offset?: number - } - /** - * # Affix - * 将页面元素钉在可视范围。 - * ## 何时使用 - * 当内容区域比较长，需要滚动页面时，这部分内容对应的操作或者导航需要在滚动范围内始终展现。常用于侧边菜单和按钮组合。 - * 页面可视范围过小时，慎用此功能以免遮挡页面内容。 - */ - export class Affix extends React.Component { - render(): JSX.Element - } - - - // Alert - interface AlertProps { - /** - * 必选参数，指定警告提示的样式，有四种选择`success`、`info`、`warn`、`error` - */ - type: string, - /**可选参数，默认不显示关闭按钮 */ - closable?: boolean, - /**可选参数，自定义关闭按钮 */ - closeText?: React.ReactNode, - /**必选参数，警告提示内容 */ - message: React.ReactNode, - /**可选参数，警告提示的辅助性文字介绍 */ - description?: React.ReactNode, - /**可选参数，关闭时触发的回调函数 */ - onClose?: Function, - /**可选参数，是否显示辅助图标 */ - showIcon?: boolean - } - - - /** - * # Alert - * 警告提示，展现需要关注的信息。 - - * ## 何时使用 - - * - 当某个页面需要向用户显示警告的信息时。 - * - 非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。 - * */ - export class Alert extends React.Component { - render(): JSX.Element - } - - - // Badge - /** - * #Badge - * - * 图标右上角的圆形徽标数字。 - - * ## 何时使用 - - * 一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数，通过醒目视觉形式吸引用户处理。 - * - */ - export class Badge extends React.Component { - render(): JSX.Element - } - interface BadgeProps { - /** 展示的数字，大于 overflowCount 时显示为 `${overflowCount}+`，为 0 时隐藏*/ - count: number, - /** 展示封顶的数字值*/ - overflowCount?: number, - /** 不展示数字，只有一个小红点*/ - dot?: boolean - } - - - // Button - interface ButtonProps { - /** 设置按钮类型，可选值为 `primary` `ghost` 或者不设 */ - type?: ButtonType | string, - /** 设置按钮形状，可选值为 `circle` `circle-outline` 或者不设*/ - shape?: string, - /** 设置按钮大小，可选值为 `small` `large` 或者不设*/ - size?: string, - /** 设置 `button` 原生的 `type` 值，可选值请参考 HTML标准*/ - htmlType?: string, - /** `click` 事件的 handler*/ - onClick?: Function, - /** 设置按钮载入状态*/ - loading?: boolean, - /** 样式名*/ - className?: string, - } - - - enum ButtonType { - primary, - ghost, - dashed - } - - interface ButtonGroupProps { - /** 设置按钮大小，可选值为 `small` `large` 或者不设*/ - size?: string - - } - - /** - 可以将多个 `Button` 放入 `Button.Group` 的容器中。 - - 通过设置 `size` 为 `large` `small` 分别把按钮组合设为大、小尺寸。若不设置 `size`，则尺寸为中。*/ - class ButtonGroup extends React.Component { - render(): JSX.Element - } - - /** - * #Button - 按钮用于开始一个即时操作。 - - ## 何时使用 - - 标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。*/ - export class Button extends React.Component { - static Group: typeof ButtonGroup - render(): JSX.Element - } - - - - // Breadcrumb - - interface BreadcrumbItemProps { - /** 链接，如不传则不可点击 */ - href?: string - } - export class BreadcrumbItem extends React.Component { - render(): JSX.Element - } - - interface BreadcrumbProps { - /** router 的路由栈信息 */ - routes?: Array, - /** 路由的参数*/ - params?: Object, - /** 分隔符自定义*/ - separator?: string | React.ReactNode - } - /** - * #Breadcrumb - 显示当前页面在系统层级结构中的位置，并能向上返回。 - - ## 何时使用 - - - 当系统拥有超过两级以上的层级结构时； - - 当需要告知用户“你在哪里”时； - - 当需要向上导航的功能时。*/ - export class Breadcrumb extends React.Component { - static Item: typeof BreadcrumbItem - render(): JSX.Element - } - - - // Calendar - interface CalendarProps { - /** 自定义渲染月单元格*/ - monthCellRender?: Function, - /** 自定义渲染日期单元格*/ - dateCellRender?: Function, - /** 是否全屏显示*/ - fullscreen?: boolean, - /** 国际化配置*/ - locale?: Object, - prefixCls?: string, - className?: string, - style?: Object, - /** 日期面板变化回调*/ - onPanelChange?: Function, - /** 展示日期*/ - value?: Date, - /** 默认展示日期*/ - defaultValue?: Date, - /** 初始模式，`month/year`*/ - mode?: string - } - /** - * #Calendar - 按照日历形式展示数据的容器。 - - ## 何时使用 - - 当数据是日期或按照日期划分时，例如日程、课表、价格日历等，农历等。目前支持年/月切换。 - */ - export class Calendar extends React.Component { - render(): JSX.Element - } - - - // Carousel - interface CarouselProps { - /** 动画效果函数，可取 scrollx, fade*/ - effect?: string, - /** 是否显示面板指示点*/ - dots?: boolean, - /** 垂直显示*/ - vertical?: boolean, - /** 是否自动切换*/ - autoplay?: boolean, - /** 动画效果*/ - easing?: string, - /** 切换面板的回调*/ - beforeChange?: Function, - /** 切换面板的回调*/ - afterChange?: Function - } - /** - * #Carousel - 旋转木马，一组轮播的区域。 - - ## 何时使用 - - - 当有一组平级的内容。 - - 当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。 - - 常用于一组图片或卡片轮播。 - */ - export class Carousel extends React.Component { - render(): JSX.Element - } - - - - // Cascader - interface CascaderProps { - /** 可选项数据源*/ - options: Object, - /** 默认的选中项*/ - defaultValue?: Array, - /** 指定选中项*/ - value?: Array, - /** 选择完成后的回调*/ - onChange?: Function, - /** 选择后展示的渲染函数*/ - displayRender?: Function, - /** 自定义样式*/ - style?: Object, - /** 自定义类名*/ - className?: string, - /** 自定义浮层类名*/ - popupClassName?: string, - /** 浮层预设位置：`bottomLeft` `bottomRight` `topLeft` `topRight` */ - popupPlacement?: string, - /** 输入框占位文本*/ - placeholder?: string, - /** 输入框大小，可选 `large` `default` `small` */ - size?: string, - /** 禁用*/ - disabled?: boolean, - /** 是否支持清除*/ - allowClear?: boolean - - } - /** - * #Cascader - 级联选择框。 - - - ## 何时使用 - - - 需要从一组相关联的数据集合进行选择，例如省市区，公司层级，事物分类等。 - - 从一个较大的数据集合中进行选择时，用多级分类进行分隔，方便选择。 - - 比起 Select 组件，可以在同一个浮层中完成选择，有较好的体验。*/ - export class Cascader extends React.Component { - render(): JSX.Element - } - - - - - // Checkbox - interface CheckboxProps { - /** 指定当前是否选中*/ - checked?: boolean, - /** 初始是否选中*/ - defaultChecked?: boolean, - /** 变化时回调函数*/ - onChange?: Function - } - - interface CheckboxGroupProps { - /** 默认选中的选项*/ - defaultValue?: Array, - /** 指定选中的选项*/ - value?: Array, - /** 指定可选项*/ - options?: Array, - /** 变化时回调函数*/ - onChange?: Function - } - /** Checkbox 组*/ - class CheckboxGroup extends React.Component { - render(): JSX.Element - } - /** - * #Checkbox - 多选框。 - - ## 何时使用 - - - 在一组可选项中进行多项选择时； - - 单独使用可以表示两种状态之间的切换，和 `switch` 类似。区别在于切换 `switch` 会直接触发状态改变，而 `checkbox` 一般用于状态标记，需要和提交操作配合。 - */ - export class Checkbox extends React.Component { - static Group: typeof CheckboxGroup - render(): JSX.Element - } - - - - // Collapse - - interface CollapseProps { - /** 当前激活 tab 面板的 key*/ - activeKey?: Array | string, - /** 初始化选中面板的key */ - defaultActiveKey?: Array, - /** 切换面板的回调*/ - onChange?: Function - - } - class CollapsePanel extends React.Component<{ - /** 对应 activeKey */ - key: string, - /** 面板头内容*/ - header: React.ReactNode | string - }, {}> { - render(): JSX.Element - } - /** - * #Collapse - 可以折叠/展开的内容区域。 - - ## 何时使用 - - - 对复杂区域进行分组和隐藏，保持页面的整洁。 - - `手风琴` 是一种特殊的折叠面板，只允许单个内容区域展开。*/ - export class Collapse extends React.Component { - static Panel: typeof CollapsePanel - render(): JSX.Element - } - - - - // DatePicker - interface DatePickerProps { - - value?: string | Date, - defaultValue?: string | Date, - /** 展示的日期格式，配置参考 [GregorianCalendarFormat](https://github.com/yiminghe/gregorian-calendar-format)*/ - format?: string, - /** 不可选择的日期*/ - disabledDate?: Function, - /** 时间发生变化的回调，发生在用户选择时间时*/ - onChange?: Function, - /** 禁用*/ - disabled?: boolean, - style?: Object, - /** 格外的弹出日历样式*/ - popupStyle?: Object, - /** 输入框大小，`large` 高度为 32px，`small` 为 22px，默认是 28px*/ - size?: string, - /** 国际化配置*/ - locale?: Object, - /** 增加时间选择功能*/ - showTime?: boolean, - /** 点击确定按钮的回调*/ - onOk?: Function, - /** 定义浮层的容器，默认为 body 上新建 div*/ - getCalendarContainer?: Function - - } - interface RangePickProps extends DatePickerProps { - - } - class RangePicker extends React.Component { - render(): JSX.Element - } - class MonthPicker extends React.Component { - render(): JSX.Element - } - /** - * #DatePicker - 输入或选择日期的控件。 - - ## 何时使用 - - 当用户需要输入一个日期，可以点击标准输入框，弹出日期面板进行选择。*/ - export class DatePicker extends React.Component, {}> { - static RangePicker: typeof RangePicker - static MonthPicker: typeof MonthPicker - render(): JSX.Element - } - - - - - // Dropdown - - interface DropdownProps { - /** 触发下拉的行为 ['click'] or ['hover']*/ - trigger?: Array, - /** 菜单节点*/ - overlay: React.ReactNode - - } - - class DropdownButton extends React.Component<{ - /** 按钮类型*/ - type?: string, - /** 点击左侧按钮的回调*/ - onClick?: Function, - /** 触发下拉的行为*/ - trigger?: string, - /** 菜单节点*/ - overlay: React.ReactNode - }, {}> { - render(): JSX.Element - } - /** - * #Dropdown - 向下弹出的列表。 - - ## 何时使用 - - 当页面上的操作命令过多时，用此组件可以收纳操作元素。点击或移入触点，会出现一个下拉菜单。可在列表中进行选择，并执行相应的命令。 - */ - export class Dropdown extends React.Component { - static Button: typeof DropdownButton - render(): JSX.Element - } - - - - // Form - - interface FormItemProps { - prefixCls?: string, - /** label 标签的文本*/ - label?: React.ReactNode, - /** label 标签布局，通 `` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}`*/ - labelCol?: Object, - /** 提示信息，如不设置，则会根据校验规则自动生成 */ - help?: React.ReactNode | boolean, - /** 额外的提示信息，和 help 类似，当需要错误信息和提示文案同时出现时，可以使用这个。*/ - extra?: string, - /** 是否必填，如不设置，则会根据校验规则自动生成 */ - validateStatus?: string, - /** 配合 validateStatus 属性使用，是否展示校验状态图标 */ - hasFeedback?: boolean, - /** 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol*/ - wrapperCol?: Object, - className?: string, - required?: boolean, - id?: string - } - /** - 表单一定会包含表单域，表单域可以是输入控件，标准表单域，标签，下拉菜单，文本域等。 - - 这里我们分别封装了表单域 `` 和输入控件 ``。*/ - export class FormItem extends React.Component { - render(): JSX.Element - } - interface FormComponentProps { - form: CreateFormOptions - } - export class FormComponent extends React.Component { - render(): JSX.Element - } - - // 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?: (e: React.FormEvent
) => void, - } - /** - * #Form - 具有数据收集、校验和提交功能的表单，包含复选框、单选框、输入框、下拉选择框等元素。 - - ## 表单 - - 我们为 `form` 提供了以下两种排列方式： - - - 水平排列：可以实现 `label` 标签和表单控件的水平排列; - - 行内排列：使其表现为 `inline-block` 级别的控件。 - */ - export class Form extends React.Component { - static Item: typeof FormItem - static create(options?: { - /** - * 当 `Form.Item` 子节点的值发生改变时触发，可以把对应的值转存到 Redux store - */ - onFieldsChange?: (props: Object, fields: Array) => void, - /** 把 props 转为对应的值，可用于把 Redux store 中的值读出 */ - mapPropsToFields?: (props: Object) => void - }): ComponentDecorator - render(): JSX.Element - } - - - - - - // Icon - interface IconProps { - /** 图标类型*/ - type: string - } - /** - * #Icon - 有含义的矢量图形，每一个图标打倒一个敌人。 - - ## 图标的命名规范 - - 我们为每个图标赋予了语义化的命名，命名规则如下: - - - 实心和描线图标保持同名，用 `-o` 来区分，比如 `question-circle`(实心) 和 `question-circle-o`(描线)； - - - 命名顺序：`[icon名]-[形状可选]-[描线与否]-[方向可选]`。 - - ## 如何使用 - - 使用 `` 标签声明组件，指定图标对应的 type 属性，示例代码如下: - - ```html - - ``` - - 最终会渲染为： - - ```html - - ```*/ - export class Icon extends React.Component { - render(): JSX.Element - } - - - - - // Input - interface InputProps { - /** 【必须】声明 input 类型，同原生 input 标签的 type 属性*/ - type?: string, - id: string | number, - /** 控件大小，默认值为 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 - } - export class Input extends React.Component { - render(): JSX.Element - } - - - - - // InputNumber - interface InputNumberProps { - /** 最小值*/ - min: number, - /** 最大值*/ - max: number, - /** 当前值*/ - value?: number, - /** 每次改变步数*/ - step?: number, - /** 初始值*/ - defaultValue?: number, - /** 变化回调*/ - onChange?: Function, - /** 禁用*/ - disabled?: boolean, - /** 输入框大小*/ - size?: string - - } - /** - * #InputNumber - 通过鼠标或键盘，输入范围内的数值。 - - ## 何时使用 - - 当需要获取标准数值时。*/ - export class InputNumber extends React.Component { - render(): JSX.Element - } - - - // Layout - // Row - interface RowProps { - type?: string, - align?: string, - justify?: string, - className?: string - } - export class Row extends React.Component { - render(): JSX.Element - } - - // Col - interface ColProps { - span?: string, - order?: string, - offset?: string, - push?: string, - pull?: string, - className?: string - } - /** - 在多数业务情况下，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 { - render(): JSX.Element - } - - - - - // Menu - interface MenuItemProps { - /** - * (是否禁用) - * - * @type {boolean} - */ - disabled?: boolean, - key: string - } - export class MenuItem extends React.Component { - render(): JSX.Element - } - - interface MenuSubMenuProps { - /** - * (子菜单项值) - * - * @type {(string | React.ReactNode)} - */ - title: string | React.ReactNode, - /** - * (子菜单的菜单项) - * - * @type {(MenuItem | MenuSubMenu)} - */ - children?: JSX.Element[] - } - export class MenuSubMenu extends React.Component { - render(): JSX.Element - } - - interface MenuItemGroupProps { - /** - * (分组标题) - * - * @type {(string | React.ReactNode)} - */ - title: string | React.ReactNode, - /** - * (分组的菜单项) - * - * @type {MenuItem} - */ - children?: JSX.Element[] - } - export class MenuItemGroup extends React.Component { - render(): JSX.Element - } - - - // enum - enum MenuTheme { - light, - dark - } - enum MenuMode { - vertical, - horizontal, - inline - } - interface MenuProps { - /** 主题颜色*/ - theme?: MenuTheme | string, - /** 菜单类型 enum: `vertical` `horizontal` `inline`*/ - mode?: MenuMode | string, - /** 当前选中的菜单项 key 数组*/ - selectedKeys?: Array, - /** 初始选中的菜单项 key 数组*/ - defaultSelectedKeys?: Array, - /** 当前展开的菜单项 key 数组*/ - openKeys?: Array, - /** 初始展开的菜单项 key 数组*/ - defaultOpenKeys?: Array, - /** - * 被选中时调用 - * - * @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?: Object - } - /** - # 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 - render(): JSX.Element - } - - - - // 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 - }) => void - destroy: () => void - } - - // Modal - type ModalFunc = (options: { - visible?: boolean, - title?: 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 - } - - /** - # Modal - 模态对话框。 - - ## 何时使用 - - 需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用 `Modal` 在当前页面正中打开一个浮层，承载相应的操作。 - - 另外当需要一个简洁的确认框询问用户时，可以使用精心封装好的 `ant.Modal.confirm()` 等方法。*/ - export class Modal extends React.Component { - static info: ModalFunc - static success: ModalFunc - static error: ModalFunc - static confirm: ModalFunc - render(): JSX.Element - } - - - - - // 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 - } - /** - * #Pagination - 采用分页的形式分隔长列表，每次只加载一个页面。 - - ## 何时使用 - - - 当加载/渲染所有数据将花费很多时间时； - - 可切换页码浏览数据。*/ - export class Pagination extends React.Component { - render(): JSX.Element - } - - - - - // Popconfirm - enum Placement { - top, left, right, bottom - } - interface PopconfirmProps { - /** - * 气泡框位置，可选 `top/left/right/bottom` - * - * @type {(Placement | string)} - */ - placement?: Placement | string, - /** 确认框的描述*/ - title?: string, - /** 点击确认的回调*/ - onConfirm?: Function, - onCancel?: Function, - /** 显示隐藏的回调*/ - onVisibleChange?: (visible: boolean) => void, - /** 确认按钮文字*/ - okText?: string, - /** 取消按钮文字*/ - cancelText?: string - } - /** - * #Popconfirm - 点击元素，弹出气泡式的确认框。 - - ## 何时使用 - - 目标元素的操作需要用户进一步的确认时，在目标元素附近弹出浮层提示，询问用户。 - - 和 `confirm` 弹出的全屏居中模态对话框相比，交互形式更轻量。 - */ - export class Popconfirm extends React.Component { - render(): JSX.Element - } - - - - - // Popover - enum Trigger { - hover, focus, click - } - enum PopoverPlacement { - top, - left, right, bottom, - topLeft, topRight, bottomLeft, bottomRight, - leftTop, leftBottom, rightTop, rightBottom - } - interface PopoverProps { - /** 触发行为，可选 `hover/focus/click` */ - trigger?: Trigger | string, - /** 气泡框位置，可选 `top/left/right/bottom` `topLeft/topRight/bottomLeft/bottomRight` `leftTop/leftBottom/rightTop/rightBottom`*/ - placement?: PopoverPlacement | string, - /** 卡片标题*/ - title?: React.ReactNode | string, - /** 卡片内容*/ - overlay?: React.ReactNode | string, - prefixCls?: string, - /** 用于手动控制浮层显隐*/ - visible?: boolean, - /** 显示隐藏改变的回调*/ - onVisibleChange?: Function - } - /** - * #Popover - 点击/鼠标移入元素，弹出气泡式的卡片浮层。 - - ## 何时使用 - - 当目标元素有进一步的描述和相关操作时，可以收纳到卡片中，根据用户的操作行为进行展现。 - - 和 `Tooltip` 的区别是，用户可以对浮层上的元素进行操作，因此它可以承载更复杂的内容，比如链接或按钮等。 - */ - export class Popover extends React.Component { - render(): JSX.Element - } - - - - - // Progress - enum ProgressStatus { - normal, - exception, - active - } - - interface LineProps { - /** 百分比*/ - percent: number, - /** 内容的模板函数*/ - format?: (percent: any) => void, - /** 状态，可选：normal、exception、active*/ - status?: ProgressStatus | string, - /** 进度条线的宽度，单位是px*/ - strokeWidth?: number, - /** 是否显示进度数值和状态图标*/ - showInfo?: boolean - } - export class Line extends React.Component { - render(): JSX.Element - } - - interface CircleProps { - /** 百分比*/ - percent: number, - /** 内容的模板函数*/ - format?: (percent: any) => void, - /** 状态，可选：normal、exception*/ - status?: ProgressStatus | string, - /** 进度条线的宽度，单位是进度条画布宽度的百分比*/ - strokeWidth?: number, - /** 必填，进度条画布宽度，单位px。这里没有提供height属性设置，Line型高度就是strokeWidth，Circle型高度等于width*/ - width?: number - } - export class Circle extends React.Component { - render(): JSX.Element - } - /** - * #Progress - 展示操作的当前进度。 - - ## 何时使用 - - 在操作需要较长时间才能完成时，为用户显示该操作的当前进度和状态。 - - * 当一个操作会打断当前界面，或者需要在后台运行，且耗时可能超过2秒时； - * 当需要显示一个操作完成的百分比时。*/ - export const Progress: { - Line: typeof Line, - Circle: typeof Circle - } - - - // QueueAnim - interface QueueAnimProps { - /** 动画内置参数 `left` `right` `top` `bottom` `scale` `scaleBig` `scaleX` `scaleY`*/ - type?: string | Array, - /** 配置动画参数 如 `{opacity:[1, 0],translateY:[0, -30]}` 具体参考 [velocity](http://julian.com/research/velocity) 的写法*/ - animConfig?: Object | Array, - /** 整个动画的延时,以毫秒为单位*/ - delay?: number | Array, - /** 每个动画的时间,以毫秒为单位*/ - duration?: number | Array, - /** 每个动画的间隔时间,以毫秒为单位*/ - interval?: number | Array, - /** 出场时是否倒放,从最后一个 dom 开始往上播放 */ - leaveReverse?: boolean, - /** 动画的缓动函数,[查看详细](http://julian.com/research/velocity/#easing)*/ - ease?: string | Array, - /** 进出场动画进行中的类名*/ - animatingClassName?: Array, - /** QueueAnim 替换的标签名*/ - component?: string - } - /** - * #QueueAnim - 通过简单的配置对一组元素添加串行的进场动画效果。 - - ## 何时使用 - - - 从内容A到内容B的转变过程时能有效的吸引用户注意力，突出视觉中心，提高整体视觉效果。 - - - 小的信息元素排布或块状较多的情况下，根据一定的路径层次依次进场，区分维度层级，来凸显量级，使页面转场更加流畅和舒适，提高整体视觉效果和产品的质感。 - - - 特别适合首页和需要视觉展示效果的宣传页，以及单页应用的切换页面动效。 - */ - export class QueueAnim extends React.Component { - render(): JSX.Element - } - - - - - // Radio - enum RadioGroupSize { - large, - default, - small - } - interface RadioGroupProps { - /** 选项变化时的回调函数*/ - onChange?: (e: Event) => void, - /** 用于设置当前选中的值*/ - value?: string, - /** 默认选中的值*/ - defaultValue?: string, - /** 大小，只对按钮样式生效*/ - size?: RadioGroupSize | string - } - export class RadioGroup extends React.Component { - render(): JSX.Element - } - - - interface RadioProps { - /** 指定当前是否选中*/ - checked?: boolean, - /** 初始是否选中*/ - defaultChecked?: boolean, - /** 根据 value 进行比较，判断是否选中 */ - value?: any - } - /** - * #Radio - 单选框。 - - ## 何时使用 - - - 用于在多个备选项中选中单个状态。 - - 和 Select 的区别是，Radio 所有选项默认可见，方便用户在比较中选择，因此选项不宜过多。 - */ - export class Radio extends React.Component { - static Group: typeof RadioGroup - static Button: typeof Button - render(): JSX.Element - } - - - - // Select - interface SelectOptionProps { - /** 是否禁用*/ - disabled?: boolean, - /** 如果 react 需要你设置此项，此项值与 value 的值相同，然后可以省略 value 设置*/ - key?: string, - /** 默认根据此属性值进行筛选*/ - value: string - } - export class SelectOption extends React.Component { - render(): JSX.Element - } - - interface SelectOptGroupProps { - /** 组名*/ - label: string | React.ReactNode, - key?: string - } - export class SelectOptGroup extends React.Component { - render(): JSX.Element - } - - 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?: Object - } - /** - * #Select - 类似 Select2 的选择器。 - - ## 何时使用 - - 弹出一个下拉菜单给用户选择操作，用于代替原生的选择器，或者需要一个更优雅的多选器时。*/ - export class Select extends React.Component { - static Option: typeof SelectOption - static OptGroup: typeof SelectOptGroup - render(): JSX.Element - } - - - - // Slider - interface SliderProps { - /** 最小值*/ - min?: number, - /** 最大值*/ - max?: number, - /** 步长，取值必须大于 0，并且可被 (max - min) 整除。当 `marks` 不为空对象时，可以设置 `step` 为 `null`，此时 Slider 的可选值仅有 marks 标出来的部分。*/ - step?: number, - /** 分段标记，key 的类型必须为 `Number` 且取值在闭区间 [min, max] 内*/ - marks?: { key: number, value: any }, - /** 设置当前取值。当 `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 - } - /** - * #Slider - 滑动型输入器，展示当前值和可选范围。 - - ## 何时使用 - - 当用户需要在数值区间/自定义区间内进行选择时，可为连续或离散值。*/ - export class Slider extends React.Component { - render(): JSX.Element - } - - - - - // Spin - interface SpinProps { - /** spin组件中点的大小，可选值为 small default large*/ - size?: string, - /** 用于内嵌其他组件的模式，可以关闭 loading 效果*/ - spining?: boolean - } - /** - * #Spin - 用于页面和区块的加载中状态。 - - ## 何时使用 - - 页面局部处于等待异步数据或正在渲染过程时，合适的加载动效会有效缓解用户的焦虑。 - */ - export class Spin extends React.Component { - render(): JSX.Element - } - - - - - // Steps - enum StepStatus { - wait, process, finish - } - interface StepProps { - /** 可选参数，指定状态。当不配置该属性时，会使用父Steps元素的current来自动指定状态。*/ - status?: StepStatus | string, - /** 必要参数，标题。*/ - title: string | React.ReactNode, - /** 可选参数，步骤的详情描述。*/ - description?: string | React.ReactNode, - /** 可选参数，步骤的Icon。如果不指定，则使用默认的样式。*/ - icon?: string | React.ReactNode - } - export class Step extends React.Component { - render(): JSX.Element - } - - interface StepsProps { - /** 可选参数，指定当前处理正在执行状态的步骤，从0开始记数。在子Step元素中，可以通过status属性覆盖状态。*/ - current?: number, - /** 可选参数，指定大小（目前只支持普通和迷你两种大小）。 small, default */ - size?: string, - /** 可选参数，指定步骤条方向（目前支持水平和竖直两种方向，默认水平方向）。*/ - direction?: string, - /** 可选参数，指定步骤的详细描述文字的最大宽度。*/ - maxDescriptionWidth?: number - - } - /** - * #Steps - 引导用户按照流程完成任务的导航条。 - - ## 何时使用 - - 当任务复杂或者存在先后关系时，将其分解成一系列步骤，从而简化任务。*/ - export class Steps extends React.Component { - static Step: typeof Step - render(): JSX.Element - } - - - - // Switch - interface SwitchProps { - /** 指定当前是否选中*/ - checked?: boolean, - /** 初始是否选中*/ - defaultChecked?: boolean, - /** 变化时回调函数*/ - onChange?: (checked: boolean) => void, - /** 选中时的内容*/ - checkedChildren?: React.ReactNode, - /** 非选中时的内容*/ - unCheckedChildren?: React.ReactNode, - /** 开关大小*/ - size?: string - } - /** - * #Switch - 开关选择器。 - - ## 何时使用 - - - 需要表示开关状态/两种状态之间的切换时； - - 和 `checkbox `的区别是，切换 `switch` 会直接触发状态改变，而 `checkbox` 一般用于状态标记，需要和提交操作配合。 - */ - export class Switch extends React.Component { - render(): JSX.Element - } - - - - - // Table - enum RowSelectionType { - checkbox, - radio - } - type SelectedRowKeys = Array - interface RowSelection { - type?: RowSelectionType | string, - 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 - } - interface Columns { - /** React 需要的 key，建议设置*/ - key?: string, - /** 列头显示文字*/ - 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 - } - 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 - - } - /** - * #Table - 展示行列数据。 - - ## 何时使用 - - - 当有大量结构化的数据需要展现时； - - 当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时。*/ - export class Table extends React.Component { - render(): JSX.Element - } - - - - // Tabs - interface TabPaneProps { - /** 选项卡头显示文字*/ - tab: React.ReactNode | string - } - export class TabPane extends React.Component { - render(): JSX.Element - } - - enum TabsType { - line, card, 'editable-card' - } - enum TabsPosition { - top, - right, - bottom, - left - } - interface TabsProps { - /** 当前激活 tab 面板的 key */ - activeKey?: string, - /** 初始化选中面板的 key，如果没有设置 activeKey*/ - defaultActiveKey?: string, - /** 切换面板的回调*/ - onChange?: Function, - /** tab 被点击的回调 */ - onTabClick?: Function, - /** tab bar 上额外的元素 */ - tabBarExtraContent?: React.ReactNode, - /** 页签的基本样式，可选 `line`、`card` `editable-card` 类型*/ - type?: TabsType | string, - /** 页签位置，可选值有 `top` `right` `bottom` `left`*/ - tabPosition?: TabsPosition | string, - /** 新增和删除页签的回调，在 `type="editable-card"` 时有效*/ - onEdit?: (targetKey: string, action: any) => void - } - /** - * #Tabs - 选项卡切换组件。 - - ## 何时使用 - - 提供平级的区域将大块内容进行收纳和展现，保持界面整洁。 - - Ant Design 依次提供了三级选项卡，分别用于不同的场景。 - - - 卡片式的页签，提供可关闭的样式，常用于容器顶部。 - - 标准线条式页签，用于容器内部的主功能切换，这是最常用的 Tabs。 - - [RadioButton](/components/radio/#demo-radiobutton) 可作为更次级的页签来使用。*/ - export class Tabs extends React.Component { - static TabPane: typeof TabPane - render(): JSX.Element - } - - - - - // Tag - interface TagProps { - /** 标签是否可以关闭*/ - closable?: boolean, - /** 关闭时的回调*/ - onClose?: Function, - /** 动画关闭后的回调*/ - afterClose?: Function, - /** 标签的色彩*/ - color?: string - } - /** - * #Tag - 进行标记和分类的小标签。 - - ## 何时使用 - - - 用于标记事物的属性和维度。 - - 进行分类。*/ - export class Tag extends React.Component { - render(): JSX.Element - } - - - - - - - // 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 - - } - /** - * #TimePicker - 输入或选择时间的控件。 - - 何时使用 - -------- - - 当用户需要输入一个时间，可以点击标准输入框，弹出时间面板进行选择。 - */ - export class TimePicker extends React.Component { - render(): JSX.Element - } - - - - - // Timeline - interface TimeLineItemProps { - /** 指定圆圈颜色。*/ - color?: string - } - export class TimeLineItem extends React.Component { - render(): JSX.Element - } - - interface TimelineProps { - /** 指定最后一个幽灵节点是否存在或内容*/ - pending?: boolean | React.ReactNode - } - /** - * #Timeline - 垂直展示的时间流信息。 - - ## 何时使用 - - - 当有一系列信息需要从上至下按时间排列时； - - 需要有一条时间轴进行视觉上的串联时；*/ - export class Timeline extends React.Component { - static Item: typeof TimeLineItem - render(): JSX.Element - } - - - - // Tooltip - - interface TooltipProps { - /** 气泡框位置，可选 `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom`*/ - placement?: PopoverPlacement | string, - /** 提示文字*/ - title?: string | React.ReactNode - } - /** - * #Tooltip - 简单的文字提示气泡框。 - - ## 何时使用 - - 鼠标移入则显示提示，移出消失，气泡浮层不承载复杂文本和操作。 - - 可用来代替系统默认的 `title` 提示，提供一个`按钮/文字/操作`的文案解释。*/ - export class Tooltip extends React.Component { - render(): JSX.Element - } - - - - - - // Transfer - interface TransferProps { - /** 数据源*/ - dataSource: Array, - /** 每行数据渲染函数*/ - render?: (record: Object) => any, - /** 显示在右侧框数据的key集合*/ - targetKeys: Array, - /** 变化时回调函数*/ - onChange?: (targetKeys: any, direction: string, moveKeys: any) => void, - /** 两个穿梭框的自定义样式*/ - listStyle?: Object, - /** 自定义类*/ - className?: string, - /** 标题集合,顺序从左至右*/ - titles?: Array, - /** 操作文案集合,顺序从上至下*/ - operations?: Array, - /** 是否显示搜索框*/ - showSearch?: boolean, - /** 搜索框的默认值*/ - searchPlaceholder?: string, - /** 当列表为空时显示的内容*/ - notFoundContent?: React.ReactNode | string - /** 底部渲染函数*/ - footer?: (props: any) => any - } - /** - * #Transfer - 双栏穿梭选择框。 - - ## 何时使用 - - 用直观的方式在两栏中移动元素，完成选择行为。 - */ - export class Transfer extends React.Component { - render(): JSX.Element - } - - - - - - // Tree - interface TreeNodeProps { - disabled?: boolean, - disableCheckbox?: boolean, - title?: string | React.ReactNode, - key?: string, - isLeaf?: boolean - } - export class TreeNode extends React.Component { - render(): JSX.Element - } - - interface TreeProps { - showLine?: boolean, - className?: string, - /** 是否支持多选*/ - multiple?: boolean, - /** 是否支持选中*/ - checkable?: boolean, - /** 默认展开所有树节点*/ - defaultExpandAll?: boolean, - /** 默认展开指定的树节点*/ - defaultExpandedKeys?: Array, - /** （受控）展开指定的树节点*/ - expandedKeys?: Array, - /** （受控）选中复选框的树节点*/ - checkedKeys?: Array, - /** 默认选中复选框的树节点*/ - defaultCheckedKeys?: Array, - /** （受控）设置选中的树节点*/ - selectedKeys?: Array, - /** 默认选中的树节点*/ - defaultSelectedKeys?: Array, - /** 展开/收起节点时触发 */ - onExpand?: (node: any, expanded: any, expandedKeys: any) => void, - /** 点击复选框触发*/ - onCheck?: (checkedKeys: any, e: { checked: boolean, checkedNodes: any, node: any, event: Event }) => void, - /** 点击树节点触发*/ - onSelect?: (selectedKeys: any, e: { selected: boolean, selectedNodes: any, node: any, event: Event }) => void, - /** filter some treeNodes as you need. it should return true */ - filterTreeNode?: (node: any) => boolean, - /** 异步加载数据*/ - loadData?: (node: any) => void, - /** 响应右键点击*/ - onRightClick?: (options: { event: Event, node: any }) => void, - /** 设置节点可拖拽（IE>8）*/ - draggable?: boolean, - /** 开始拖拽时调用*/ - onDragStart?: (options: { event: Event, node: any }) => void, - /** dragenter 触发时调用*/ - onDragEnter?: (options: { event: Event, node: any, expandedKeys: any }) => void, - /** dragover 触发时调用 */ - onDragOver?: (options: { event: Event, node: any }) => void, - /** dragleave 触发时调用*/ - onDragLeave?: (options: { event: Event, node: any }) => void, - /** drop 触发时调用*/ - onDrop?: (options: { event: Event, node: any, dragNode: any, dragNodesKeys: any }) => void, - } - /** - * #Tree - * 文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构。使用`树控件`可以完整展现其中的层级关系，并具有展开收起选择等交互功能。 - */ - export class Tree extends React.Component { - static TreeNode: typeof TreeNode - render(): JSX.Element - } - - - - - - // TreeSelect - interface TreeSelectTreeNodeProps { - disabled?: boolean, - /** 此项必须设置（其值在整个树范围内唯一）*/ - key: string, - /** 默认根据此属性值进行筛选*/ - value?: string, - /** 树节点显示的内容*/ - title?: React.ReactNode | string, - /** 是否是叶子节点*/ - isLeaf?: boolean - } - export class TreeSelectTreeNode extends React.Component { - render(): JSX.Element - } - - type TreeData = Array<{ value: any, label: string, children: TreeData }> - interface TreeSelectProps { - style?: Object, - /** 指定当前选中的条目*/ - 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?: Object, - /** 下拉菜单和选择器同宽*/ - dropdownMatchSelectWidth?: boolean, - /** 输入框自动提示模式*/ - combobox?: boolean, - /** 选择框大小，可选 `large` `small`*/ - size?: string, - /** 在下拉中显示搜索框*/ - 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?: TreeData, - /** 异步加载数据*/ - loadData?: (node: any) => void - } - /** - * #TreeSelect - 树型选择控件。 - - ## 何时使用 - - 类似 Select 的选择控件，可选择的数据结构是一个树形结构时，可以使用 TreeSelect，例如公司层级、学科系统、分类目录等等。 - */ - export class TreeSelect extends React.Component { - static TreeNode: typeof TreeSelectTreeNode - render(): JSX.Element - } - - - - - - - // Upload - interface UploadProps { - /** 可选参数, 上传的文件 */ - name?: string, - /** 必选参数, 上传的地址 */ - action: string, - /** 可选参数, 上传所需参数 */ - data?: Object, - /** 可选参数, 设置上传的请求头部，IE10 以上有效*/ - headers?: Object, - /** 可选参数, 是否展示 uploadList, 默认开启 */ - showUploadList?: boolean, - /** 可选参数, 是否支持多选文件，`ie10+` 支持。开启后按住 ctrl 可选择多个文件。*/ - multiple?: boolean, - /** 可选参数, 接受上传的文件类型, 详见 input accept Attribute */ - accept?: string, - /** 可选参数, 上传文件之前的钩子，参数为上传的文件，若返回 `false` 或者 Promise 则停止上传。**注意：该方法不支持老 IE**。*/ - beforeUpload?: Function, - /** 可选参数, 上传文件改变时的状态，详见 onChange */ - onChange?: (info: Object) => void, - /** 上传列表的内建样式，支持两种基本样式 `text` or `picture` */ - listType?: string, - /** 自定义类名*/ - className?: string - - } - /** - * #Upload - 文件选择上传和拖拽上传控件。 - - ## 何时使用 - - 上传是将信息（网页、文字、图片、视频等）通过网页或者上传工具发布到远程服务器上的过程。 - - - 当需要上传一个或一些文件时。 - - 当需要展现上传的进度时。 - - 当需要使用拖拽交互时。*/ - export class Upload extends React.Component { - render(): JSX.Element - } - - - - - - -} - - -// export all antd -declare module 'antd' { - export = Antd -} -// single export point -declare module 'antd/lib/Affix' { - export default Antd.Affix -} -declare module 'antd/lib/Button' { - export default Antd.Button -} -declare module 'antd/lib/Alert' { - export default Antd.Alert -} -declare module 'antd/lib/Badge' { - export default Antd.Badge -} -declare module 'antd/lib/Breadcrumb' { - export default Antd.Breadcrumb -} -declare module 'antd/lib/Calendar' { - export default Antd.Calendar -} -declare module 'antd/lib/Carousel' { - export default Antd.Carousel -} -declare module 'antd/lib/Cascader' { - export default Antd.Cascader -} -declare module 'antd/lib/Checkbox' { - export default Antd.Checkbox -} -declare module 'antd/lib/Collapse' { - export default Antd.Collapse -} -declare module 'antd/lib/DatePicker' { - export default Antd.DatePicker -} -declare module 'antd/lib/Dropdown' { - export default Antd.Dropdown -} -declare module 'antd/lib/Icon' { - export default Antd.Icon -} -declare module 'antd/lib/Form' { - export default Antd.Form -} -declare module 'antd/lib/Input' { - export default Antd.Input -} -declare module 'antd/lib/InputNumber' { - export default Antd.InputNumber -} -declare module 'antd/lib/Row' { - export default Antd.Row -} -declare module 'antd/lib/Col' { - export default Antd.Col -} -declare module 'antd/lib/Menu' { - export default Antd.Menu -} -declare module 'antd/lib/message' { - export default Antd.message -} -declare module 'antd/lib/Modal' { - export default Antd.Modal -} -declare module 'antd/lib/notification' { - export default Antd.notification -} -declare module 'antd/lib/Pagination' { - export default Antd.Pagination -} -declare module 'antd/lib/Popconfirm' { - export default Antd.Popconfirm -} -declare module 'antd/lib/Popover' { - export default Antd.Popover -} -declare module 'antd/lib/Progress' { - export default Antd.Progress -} -declare module 'antd/lib/QueueAnim' { - export default Antd.QueueAnim -} -declare module 'antd/lib/Radio' { - export default Antd.Radio -} -declare module 'antd/lib/Select' { - export default Antd.Select -} -declare module 'antd/lib/Slider' { - export default Antd.Slider -} -declare module 'antd/lib/Spin' { - export default Antd.Spin -} -declare module 'antd/lib/Steps' { - export default Antd.Steps -} -declare module 'antd/lib/Switch' { - export default Antd.Switch -} -declare module 'antd/lib/Table' { - export default Antd.Table -} -declare module 'antd/lib/Tabs' { - export default Antd.Tabs -} -declare module 'antd/lib/Tag' { - export default Antd.Tag -} -declare module 'antd/lib/TimePicker' { - export default Antd.TimePicker -} -declare module 'antd/lib/Timeline' { - export default Antd.Timeline -} -declare module 'antd/lib/Tooltip' { - export default Antd.Tooltip -} -declare module 'antd/lib/Transfer' { - export default Antd.Transfer -} -declare module 'antd/lib/Tree' { - export default Antd.Tree -} -declare module 'antd/lib/TreeSelect' { - export default Antd.TreeSelect -} -declare module 'antd/lib/Upload' { - export default Antd.Upload -} diff --git a/antd/tsconfig.json b/antd/tsconfig.json deleted file mode 100644 index 6b7785ac6c..0000000000 --- a/antd/tsconfig.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "compilerOptions": { - "module": "commonjs", - "lib": [ - "es6", - "dom" - ], - "noImplicitAny": true, - "noImplicitThis": true, - "strictNullChecks": false, - "baseUrl": "../", - "jsx": "react", - "typeRoots": [ - "../" - ], - "types": [], - "noEmit": true, - "forceConsistentCasingInFileNames": true - }, - "files": [ - "index.d.ts", - "antd-tests.tsx" - ] -} \ No newline at end of file diff --git a/notNeededPackages.json b/notNeededPackages.json index a7db12a6bf..27b2764051 100644 --- a/notNeededPackages.json +++ b/notNeededPackages.json @@ -311,6 +311,12 @@ "typingsPackageName": "raven-js", "sourceRepoURL": "https://github.com/getsentry/raven-js", "asOfVersion": "3.10.0" + }, + { + "libraryName": "antd", + "typingsPackageName": "antd", + "sourceRepoURL": "https://github.com/ant-design/ant-design", + "asOfVersion": "1.0.0" } ] -} \ No newline at end of file +}