From 45690bc5e4074864984ad60a866683a750905523 Mon Sep 17 00:00:00 2001 From: Bruce Mitchener Date: Tue, 15 Mar 2016 11:31:35 +0700 Subject: [PATCH] antd: Add render methods for all React.Component subclasses. If React's React.Component is made abstract and the render method flagged as abstract (which would be good), then all of the antd components need to indicate that they have a render method. --- antd/antd.d.ts | 234 +++++++++++++++++++++++++++++++++++-------------- 1 file changed, 170 insertions(+), 64 deletions(-) diff --git a/antd/antd.d.ts b/antd/antd.d.ts index ac23dcdc75..608d649a55 100644 --- a/antd/antd.d.ts +++ b/antd/antd.d.ts @@ -23,7 +23,9 @@ declare namespace Antd { * 当内容区域比较长,需要滚动页面时,这部分内容对应的操作或者导航需要在滚动范围内始终展现。常用于侧边菜单和按钮组合。 * 页面可视范围过小时,慎用此功能以免遮挡页面内容。 */ - export class Affix extends React.Component{ } + export class Affix extends React.Component { + render(): JSX.Element + } // Alert @@ -56,7 +58,9 @@ declare namespace Antd { * - 当某个页面需要向用户显示警告的信息时。 * - 非浮层的静态展现形式,始终展现,不会自动消失,用户可以点击关闭。 * */ - export class Alert extends React.Component{ } + export class Alert extends React.Component { + render(): JSX.Element + } // Badge @@ -70,7 +74,9 @@ declare namespace Antd { * 一般出现在通知图标或头像的右上角,用于显示需要处理的消息条数,通过醒目视觉形式吸引用户处理。 * */ - export class Badge extends React.Component{ } + export class Badge extends React.Component { + render(): JSX.Element + } interface BadgeProps extends React.Props { /** 展示的数字,大于 overflowCount 时显示为 `${overflowCount}+`,为 0 时隐藏*/ count: number, @@ -116,8 +122,8 @@ declare namespace Antd { 可以将多个 `Button` 放入 `Button.Group` 的容器中。 通过设置 `size` 为 `large` `small` 分别把按钮组合设为大、小尺寸。若不设置 `size`,则尺寸为中。*/ - class ButtonGroup extends React.Component{ - + class ButtonGroup extends React.Component { + render(): JSX.Element } /** @@ -127,8 +133,9 @@ declare namespace Antd { ## 何时使用 标记了一个(或封装一组)操作命令,响应用户点击行为,触发相应的业务逻辑。*/ - export class Button extends React.Component{ + export class Button extends React.Component { static Group: typeof ButtonGroup + render(): JSX.Element } @@ -139,7 +146,9 @@ declare namespace Antd { /** 链接,如不传则不可点击 */ href?: string } - export class BreadcrumbItem extends React.Component{ } + export class BreadcrumbItem extends React.Component { + render(): JSX.Element + } interface BreadcrumbProps extends React.Props { /** router 的路由栈信息 */ @@ -158,8 +167,9 @@ declare namespace Antd { - 当系统拥有超过两级以上的层级结构时; - 当需要告知用户“你在哪里”时; - 当需要向上导航的功能时。*/ - export class Breadcrumb extends React.Component{ + export class Breadcrumb extends React.Component { static Item: typeof BreadcrumbItem + render(): JSX.Element } @@ -193,7 +203,9 @@ declare namespace Antd { 当数据是日期或按照日期划分时,例如日程、课表、价格日历等,农历等。目前支持年/月切换。 */ - export class Calendar extends React.Component{ } + export class Calendar extends React.Component { + render(): JSX.Element + } // Carousel @@ -223,7 +235,9 @@ declare namespace Antd { - 当内容空间不足时,可以用走马灯的形式进行收纳,进行轮播展现。 - 常用于一组图片或卡片轮播。 */ - export class Carousel extends React.Component{ } + export class Carousel extends React.Component { + render(): JSX.Element + } @@ -267,7 +281,9 @@ declare namespace Antd { - 需要从一组相关联的数据集合进行选择,例如省市区,公司层级,事物分类等。 - 从一个较大的数据集合中进行选择时,用多级分类进行分隔,方便选择。 - 比起 Select 组件,可以在同一个浮层中完成选择,有较好的体验。*/ - export class Cascader extends React.Component{ } + export class Cascader extends React.Component { + render(): JSX.Element + } @@ -293,7 +309,9 @@ declare namespace Antd { onChange?: Function } /** Checkbox 组*/ - class CheckboxGroup extends React.Component{ } + class CheckboxGroup extends React.Component { + render(): JSX.Element + } /** * #Checkbox 多选框。 @@ -303,8 +321,9 @@ declare namespace Antd { - 在一组可选项中进行多项选择时; - 单独使用可以表示两种状态之间的切换,和 `switch` 类似。区别在于切换 `switch` 会直接触发状态改变,而 `checkbox` 一般用于状态标记,需要和提交操作配合。 */ - export class Checkbox extends React.Component{ + export class Checkbox extends React.Component { static Group: typeof CheckboxGroup + render(): JSX.Element } @@ -325,7 +344,9 @@ declare namespace Antd { key: string, /** 面板头内容*/ header: React.ReactNode | string - }, {}>{ } + }, {}> { + render(): JSX.Element + } /** * #Collapse 可以折叠/展开的内容区域。 @@ -334,8 +355,9 @@ declare namespace Antd { - 对复杂区域进行分组和隐藏,保持页面的整洁。 - `手风琴` 是一种特殊的折叠面板,只允许单个内容区域展开。*/ - export class Collapse extends React.Component{ + export class Collapse extends React.Component { static Panel: typeof CollapsePanel + render(): JSX.Element } @@ -371,8 +393,12 @@ declare namespace Antd { interface RangePickProps extends DatePickerProps { } - class RangePicker extends React.Component{ } - class MonthPicker extends React.Component{ } + class RangePicker extends React.Component { + render(): JSX.Element + } + class MonthPicker extends React.Component { + render(): JSX.Element + } /** * #DatePicker 输入或选择日期的控件。 @@ -380,9 +406,10 @@ declare namespace Antd { ## 何时使用 当用户需要输入一个日期,可以点击标准输入框,弹出日期面板进行选择。*/ - export class DatePicker extends React.Component, {}>{ + export class DatePicker extends React.Component, {}> { static RangePicker: typeof RangePicker static MonthPicker: typeof MonthPicker + render(): JSX.Element } @@ -407,7 +434,9 @@ declare namespace Antd { trigger?: string, /** 菜单节点*/ overlay: React.ReactNode - }, {}>{ } + }, {}> { + render(): JSX.Element + } /** * #Dropdown 向下弹出的列表。 @@ -416,8 +445,9 @@ declare namespace Antd { 当页面上的操作命令过多时,用此组件可以收纳操作元素。点击或移入触点,会出现一个下拉菜单。可在列表中进行选择,并执行相应的命令。 */ - export class Dropdown extends React.Component{ + export class Dropdown extends React.Component { static Button: typeof DropdownButton + render(): JSX.Element } @@ -448,11 +478,15 @@ declare namespace Antd { 表单一定会包含表单域,表单域可以是输入控件,标准表单域,标签,下拉菜单,文本域等。 这里我们分别封装了表单域 `` 和输入控件 ``。*/ - export class FormItem extends React.Component{ } + export class FormItem extends React.Component { + render(): JSX.Element + } interface FormComponentProps extends React.Props { form: CreateFormOptions } - export class FormComponent extends React.Component{ } + export class FormComponent extends React.Component { + render(): JSX.Element + } // function create type CreateFormOptions = { @@ -518,7 +552,7 @@ declare namespace Antd { - 水平排列:可以实现 `label` 标签和表单控件的水平排列; - 行内排列:使其表现为 `inline-block` 级别的控件。 */ - export class Form extends React.Component{ + export class Form extends React.Component { static Item: typeof FormItem static create(options?: { /** @@ -528,6 +562,7 @@ declare namespace Antd { /** 把 props 转为对应的值,可用于把 Redux store 中的值读出 */ mapPropsToFields?: (props: Object) => void }): ComponentDecorator + render(): JSX.Element } @@ -564,7 +599,9 @@ declare namespace Antd { ```html ```*/ - export class Icon extends React.Component{ } + export class Icon extends React.Component { + render(): JSX.Element + } @@ -589,7 +626,9 @@ declare namespace Antd { prefixCls?: string, placeholder?: string } - export class Input extends React.Component{ } + export class Input extends React.Component { + render(): JSX.Element + } @@ -621,7 +660,9 @@ declare namespace Antd { ## 何时使用 当需要获取标准数值时。*/ - export class InputNumber extends React.Component{ } + export class InputNumber extends React.Component { + render(): JSX.Element + } // Layout @@ -632,7 +673,9 @@ declare namespace Antd { justify?: string, className?: string } - export class Row extends React.Component{ } + export class Row extends React.Component { + render(): JSX.Element + } // Col interface ColProps extends React.Props { @@ -662,7 +705,9 @@ declare namespace Antd { 我们的栅格化系统支持 Flex 布局,允许子元素在父节点内的水平对齐方式 - 居左、居中、居右、等宽排列、分散排列。子元素与子元素之间,支持顶部对齐、垂直居中对齐、底部对齐的方式。同时,支持使用 order 来定义元素的排列顺序。 Flex 布局是基于 24 栅格来定义每一个“盒子”的宽度,但排版则不拘泥于栅格。*/ - export class Col extends React.Component{ } + export class Col extends React.Component { + render(): JSX.Element + } @@ -677,7 +722,9 @@ declare namespace Antd { disabled?: boolean, key: string } - export class MenuItem extends React.Component{ } + export class MenuItem extends React.Component { + render(): JSX.Element + } interface MenuSubMenuProps extends React.Props { /** @@ -693,7 +740,9 @@ declare namespace Antd { */ children?: MenuItem | MenuSubMenu } - export class MenuSubMenu extends React.Component{ } + export class MenuSubMenu extends React.Component { + render(): JSX.Element + } interface MenuItemGroupProps extends React.Props { /** @@ -709,7 +758,9 @@ declare namespace Antd { */ children?: MenuItem } - export class MenuItemGroup extends React.Component{ } + export class MenuItemGroup extends React.Component { + render(): JSX.Element + } // enum @@ -757,11 +808,12 @@ declare namespace Antd { 导航菜单是一个网站的灵魂,用户依赖导航在各个页面中进行跳转。一般分为顶部导航和侧边导航,顶部导航提供全局性的类目和功能,侧边导航提供多级结构来收纳和排列网站架构。 更多布局和导航的范例可以参考:[常用布局](/spec/layout)。*/ - export class Menu extends React.Component{ + 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 } @@ -844,11 +896,12 @@ declare namespace Antd { 需要用户处理事务,又不希望跳转页面以致打断工作流程时,可以使用 `Modal` 在当前页面正中打开一个浮层,承载相应的操作。 另外当需要一个简洁的确认框询问用户时,可以使用精心封装好的 `ant.Modal.confirm()` 等方法。*/ - export class Modal extends React.Component{ + export class Modal extends React.Component { static info: ModalFunc static success: ModalFunc static error: ModalFunc static confirm: ModalFunc + render(): JSX.Element } @@ -935,7 +988,9 @@ declare namespace Antd { - 当加载/渲染所有数据将花费很多时间时; - 可切换页码浏览数据。*/ - export class Pagination extends React.Component{ } + export class Pagination extends React.Component { + render(): JSX.Element + } @@ -973,7 +1028,9 @@ declare namespace Antd { 和 `confirm` 弹出的全屏居中模态对话框相比,交互形式更轻量。 */ - export class Popconfirm extends React.Component{ } + export class Popconfirm extends React.Component { + render(): JSX.Element + } @@ -1013,7 +1070,9 @@ declare namespace Antd { 和 `Tooltip` 的区别是,用户可以对浮层上的元素进行操作,因此它可以承载更复杂的内容,比如链接或按钮等。 */ - export class Popover extends React.Component{ } + export class Popover extends React.Component { + render(): JSX.Element + } @@ -1037,7 +1096,9 @@ declare namespace Antd { /** 是否显示进度数值和状态图标*/ showInfo?: boolean } - export class Line extends React.Component{ } + export class Line extends React.Component { + render(): JSX.Element + } interface CircleProps extends React.Props { /** 百分比*/ @@ -1051,7 +1112,9 @@ declare namespace Antd { /** 必填,进度条画布宽度,单位px。这里没有提供height属性设置,Line型高度就是strokeWidth,Circle型高度等于width*/ width?: number } - export class Circle extends React.Component{ } + export class Circle extends React.Component { + render(): JSX.Element + } /** * #Progress 展示操作的当前进度。 @@ -1101,7 +1164,9 @@ declare namespace Antd { - 特别适合首页和需要视觉展示效果的宣传页,以及单页应用的切换页面动效。 */ - export class QueueAnim extends React.Component{ } + export class QueueAnim extends React.Component { + render(): JSX.Element + } @@ -1122,7 +1187,9 @@ declare namespace Antd { /** 大小,只对按钮样式生效*/ size?: RadioGroupSize | string } - export class RadioGroup extends React.Component{ } + export class RadioGroup extends React.Component { + render(): JSX.Element + } interface RadioProps extends React.Props { @@ -1142,9 +1209,10 @@ declare namespace Antd { - 用于在多个备选项中选中单个状态。 - 和 Select 的区别是,Radio 所有选项默认可见,方便用户在比较中选择,因此选项不宜过多。 */ - export class Radio extends React.Component{ + export class Radio extends React.Component { static Group: typeof RadioGroup static Button: typeof Button + render(): JSX.Element } @@ -1158,14 +1226,18 @@ declare namespace Antd { /** 默认根据此属性值进行筛选*/ value: string } - export class SelectOption extends React.Component{ } + export class SelectOption extends React.Component { + render(): JSX.Element + } interface SelectOptGroupProps extends React.Props { /** 组名*/ label: string | React.ReactNode, key?: string } - export class SelectOptGroup extends React.Component{ } + export class SelectOptGroup extends React.Component { + render(): JSX.Element + } interface SelectProps extends React.Props