From ffc4a11f68329c0783249937f0fe5f2900fd7e21 Mon Sep 17 00:00:00 2001 From: bang Date: Fri, 11 Mar 2016 16:53:35 +0800 Subject: [PATCH] Type definitions for Antd --- antd/antd-tests.tsx | 483 ++++++++++++++++++ antd/antd.d.ts | 1148 +++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 1631 insertions(+) create mode 100644 antd/antd-tests.tsx create mode 100644 antd/antd.d.ts diff --git a/antd/antd-tests.tsx b/antd/antd-tests.tsx new file mode 100644 index 0000000000..91cf213d8f --- /dev/null +++ b/antd/antd-tests.tsx @@ -0,0 +1,483 @@ +/// +/// +import React = __React +/*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 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/antd.d.ts b/antd/antd.d.ts new file mode 100644 index 0000000000..96e473c544 --- /dev/null +++ b/antd/antd.d.ts @@ -0,0 +1,1148 @@ +// Type definitions for Antd v0.12.8 +// Project: http://ant.design +// Definitions by: bang88 +// Definitions: https://github.com/borisyankov/DefinitelyTyped + + +/// +declare namespace Antd { + + import React = __React + + // Affix + interface AffixProps extends React.Props { + offset?: number + } + export class Affix extends React.Component{ } + + + // Alert + interface AlertProps extends React.Props { + type: string, + closable?: boolean, + closeText?: React.ReactNode, + message: React.ReactNode, + description?: React.ReactNode, + onClose?: Function, + showIcon?: boolean + } + export class Alert extends React.Component{ } + + + // Badge + export class Badge extends React.Component{ } + interface BadgeProps extends React.Props { + count: number, + overflowCount?: number, + dot?: boolean + } + + + // Button + interface ButtonProps extends React.Props{ + span?: string, + order?: string, + offset?: string, + push?: string, + pull?: string, + className?: string + } + export class Col extends React.Component{ } + + + + + // Menu + interface MenuItemProps extends React.Props { + disabled?: boolean, + key: string + } + export class MenuItem extends React.Component{ } + + interface MenuSubMenuProps extends React.Props { + title: string | React.ReactNode, + children?: MenuItem | MenuSubMenu + } + export class MenuSubMenu extends React.Component{ } + + interface MenuItemGroupProps extends React.Props { + title: string | React.ReactNode, + children?: MenuItem + } + export class MenuItemGroup extends React.Component{ } + + + // enum + enum MenuTheme { + light, + dark + } + enum MenuMode { + vertical, + horizontal, + inline + } + interface MenuProps extends React.Props { + theme?: MenuTheme | string, + mode?: MenuMode | string, + selectedKeys?: Array, + defaultSelectedKeys?: Array, + openKeys?: Array, + defaultOpenKeys?: Array, + onSelect?: (item: any, key: string, selectedKeys: Array) => void, + onDeselect?: (item: any, key: string, selectedKeys: Array) => void, + onClick?: (item: any, key: string) => void, + style?: Object + } + 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 + export const message: { + success: MessageFunc + error: MessageFunc + info: MessageFunc + loading: MessageFunc + config: (options: { 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 extends React.Props { + visible?: boolean, + 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 + } + 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, + duration?: number + }) => void + + 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 extends React.Props { + current?: number, + defaultCurrent?: number, + total: number, + defaultPageSize?: number, + pageSize?: number, + onChange?: Function, + showSizeChanger?: boolean, + pageSizeOptions?: Array + onShowSizeChange?: Function, + showQuickJumper?: boolean, + size?: string, + simple?: Object, + showTotal?: Function + } + export class Pagination extends React.Component{ } + + + + + // Popconfirm + enum Placement { + top, left, right, bottom + } + interface PopconfirmProps extends React.Props { + placement?: Placement | string, + title?: string, + onConfirm?: Function, + onCancel?: Function, + onVisibleChange?: (visible: boolean) => void, + okText?: string, + cancelText?: string + } + export class Popconfirm extends React.Component{ } + + + + + // Popover + enum Trigger { + hover, focus, click + } + enum PopoverPlacement { + top, + left, right, bottom, + topLeft, topRight, bottomLeft, bottomRight, + leftTop, leftBottom, rightTop, rightBottom + } + interface PopoverProps extends React.Props { + trigger?: Trigger | string, + placement?: PopoverPlacement | string, + title?: React.ReactNode | string, + overlay?: React.ReactNode | string, + prefixCls?: string, + visible?: boolean, + onVisibleChange?: Function + } + export class Popover extends React.Component{ } + + + + + // Progress + enum ProgressStatus { + normal, + exception, + active + } + + interface LineProps extends React.Props { + percent: number, + format?: (percent: any) => void, + status?: ProgressStatus | string, + strokeWidth?: number, + showInfo?: boolean + } + export class Line extends React.Component{ } + + interface CircleProps extends React.Props { + percent: number, + format?: (percent: any) => void, + status?: ProgressStatus | string, + strokeWidth?: number, + width?: number + } + export class Circle extends React.Component{ } + + export const Progress: { + Line: typeof Line, + Circle: typeof Circle + } + + + // QueueAnim + interface QueueAnimProps extends React.Props { + type?: string | Array, + animConfig?: Object | Array, + delay?: number | Array, + duration?: number | Array, + interval?: number | Array, + leaveReverse?: boolean, + ease?: string | Array, + animatingClassName?: Array, + component?: string + } + export class QueueAnim extends React.Component{ } + + + + + // Radio + enum RadioGroupSize { + large, + default, + small + } + interface RadioGroupProps extends React.Props { + onChange?: (e: Event) => void, + value?: string, + defaultValue?: string, + size?: RadioGroupSize | string + } + export class RadioGroup extends React.Component{ } + + + interface RadioProps extends React.Props { + checked?: boolean, + defaultChecked?: boolean, + value?: any + } + export class Radio extends React.Component{ + static Group: typeof RadioGroup + static Button: typeof Button + } + + + + // Select + interface SelectOptionProps extends React.Props { + disabled?: boolean, + key?: string, + value: string + } + export class SelectOption extends React.Component{ } + + interface SelectOptGroupProps extends React.Props { + label: string | React.ReactNode, + key?: string + } + export class SelectOptGroup extends React.Component{ } + + interface SelectProps extends React.Props
{ + rowSelection?: RowSelection, + pagination?: Object, + size?: string, + dataSource: Array, + columns: Columns, + rowKey?: (record: any, index: number) => string, + expandedRowRender?: Function, + defaultExpandedRowKeys?: Array, + onChange?: (pagination: Object, filters: any, sorter: any) => void, + loading?: boolean, + locale?: Object, + indentSize?: number, + onRowClick?: (record: any, index: number) => void, + useFixedHeader?: boolean, + bordered?: boolean, + showHeader?: boolean, + footer?: (currentPageData: Object) => void + + } + export class Table extends React.Component{ } + + + + // Tabs + interface TabPaneProps extends React.Props { + tab: React.ReactNode | string + } + export class TabPane extends React.Component{ } + + enum TabsType { + line, card, 'editable-card' + } + enum TabsPosition { + top, + right, + bottom, + left + } + interface TabsProps extends React.Props { + activeKey?: string, + defaultActiveKey?: string, + onChange?: Function, + onTabClick?: Function, + tabBarExtraContent?: React.ReactNode, + type?: TabsType | string, + tabPosition?: TabsPosition | string, + onEdit?: (targetKey: string, action: any) => void + } + export class Tabs extends React.Component{ + static TabPane: typeof TabPane + } + + + + + // Tag + interface TagProps extends React.Props { + closable?: boolean, + onClose?: Function, + afterClose?: Function, + color?: string + } + export class Tag extends React.Component{ } + + + + + + + // TimePicker + interface TimePickerProps extends React.Props { + + value?: string | Date, + defaultValue?: string | Date, + format?: string, + onChange?: (Date: Date) => void, + disabled?: boolean, + placeholder?: string, + locale?: Object, + hideDisabledOptions?: boolean, + disabledHours?: Function, + disabledMinutes?: Function, + disabledSeconds?: Function + + } + export class TimePicker extends React.Component{ } + + + + + // Timeline + interface TimeLineItemProps extends React.Props { + color?: string + } + export class TimeLineItem extends React.Component{ } + + interface TimelineProps extends React.Props { + pending?: boolean | React.ReactNode + } + export class Timeline extends React.Component{ + static Item: typeof TimeLineItem + } + + + + // Tooltip + + interface TooltipProps extends React.Props { + placement?: PopoverPlacement | string, + title?: string | React.ReactNode + } + export class Tooltip extends React.Component{ } + + + + + + // Transfer + interface TransferProps extends React.Props { + dataSource: Array, + render?: (record: Object) => any, + 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 + } + export class Transfer extends React.Component{ } + + + + + + // Tree + interface TreeNodeProps extends React.Props { + disabled?: boolean, + disableCheckbox?: boolean, + title?: string | React.ReactNode, + key?: string, + isLeaf?: boolean + } + export class TreeNode extends React.Component{ } + + interface TreeProps extends React.Props { + 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, + filterTreeNode?: (node: any) => boolean, + loadData?: (node: any) => void, + onRightClick?: (options: { event: Event, node: any }) => void, + draggable?: boolean, + onDragStart?: (options: { event: Event, node: any }) => void, + onDragEnter?: (options: { event: Event, node: any, expandedKeys: any }) => void, + onDragOver?: (options: { event: Event, node: any }) => void, + onDragLeave?: (options: { event: Event, node: any }) => void, + onDrop?: (options: { event: Event, node: any, dragNode: any, dragNodesKeys: any }) => void, + } + export class Tree extends React.Component{ + static TreeNode: typeof TreeNode + } + + + + + + // TreeSelect + interface TreeSelectTreeNodeProps extends React.Props { + disabled?: boolean, + key: string, + value?: string, + title?: React.ReactNode | string, + isLeaf?: boolean + } + export class TreeSelectTreeNode extends React.Component{ } + + type TreeData = Array<{ value: any, label: string, children: TreeData }> + interface TreeSelectProps extends React.Props { + style?: Object, + value?: string | Array, + defaultValue?: string | Array, + multiple?: boolean, + tags?: boolean, + onSelect?: (value: any) => void, + onChange?: (value: any, label: any) => void, + allowClear?: boolean, + onSearch?: (value: any) => void, + placeholder?: string, + searchPlaceholder?: string, + dropdownStyle?: Object, + dropdownMatchSelectWidth?: boolean, + combobox?: boolean, + size?: string, + showSearch?: boolean, + disabled?: boolean, + treeDefaultExpandAll?: boolean, + treeCheckable?: boolean, + filterTreeNode?: (treeNode: any) => void, + treeNodeFilterProp?: string, + treeNodeLabelProp?: string, + treeData?: TreeData, + loadData?: (node: any) => void + } + export class TreeSelect extends React.Component{ + static TreeNode: typeof TreeSelectTreeNode + } + + + + + + + // Upload + interface UploadProps extends React.Props { + name?: string, + action: string, + data?: Object, + headers?: Object, + showUploadList?: boolean, + multiple?: boolean, + accept?: string, + beforeUpload?: Function, + onChange?: (info: Object) => void, + listType?: string, + className?: string + + } + export class Upload extends React.Component{ } + + + + + + +} + + +// 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 +} \ No newline at end of file