Merge branch 'bang88-typings'

components/index.tsx

@@ -16,4 +16,20 @@ import Transfer from './transfer';
 export { Transfer };
 
 import Tree from './tree';
-export { Tree };
+export { Tree };
+
+import Tabs from './tabs';
+export { Tabs }
+
+import Tag from './tag';
+export { Tag }
+
+import TimePicker from './time-picker';
+export { TimePicker }
+
+import Timeline from './timeline';
+export { Timeline }
+
+import Tooltip from './tooltip';
+export { Tooltip }
+

components/tabs/index.tsx

@@ -1,19 +1,61 @@
 import RcTabs from 'rc-tabs';
-import React, { cloneElement } from 'react';
+// import React, { cloneElement } from 'react';
+import * as React from 'react';
+
+const {cloneElement} = React;
+
 import classNames from 'classnames';
+
 import Icon from '../icon';
 
-export default class Tabs extends React.Component {
-  static TabPane = RcTabs.TabPane;
+type TabsType = 'line' | 'card' | 'editable-card'
+type TabsPosition = 'top' | 'right' | 'bottom' | 'left';
+
+export interface TabsProps {
+  /** 当前激活 tab 面板的 key    */
+  activeKey?: string;
+  /** 初始化选中面板的 key，如果没有设置 activeKey*/
+  defaultActiveKey?: string;
+  /** 是否隐藏加号图标，在 `type="editable-card"` 时有效 */
+  hideAdd?: boolean;
+  /** 切换面板的回调*/
+  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;
+  /** 大小，提供 default 和 small 两种大小    */
+  size?: 'default' | 'small';
+
+  style?: React.CSSProperties;
+}
+
+
+// Tabs
+export interface TabPaneProps {
+  /** 选项卡头显示文字*/
+  tab: React.ReactNode | string;
+
+  style?: React.CSSProperties;
+}
+
+export default class Tabs extends React.Component<TabsProps, any> {
+  static TabPane: TabPaneProps = RcTabs.TabPane;
 
   static defaultProps = {
     prefixCls: 'ant-tabs',
     animation: 'slide-horizontal',
     type: 'line', // or 'card' 'editable-card'
-    onChange() {},
-    onEdit() {},
+    onChange() { },
+    onEdit() { },
     hideAdd: false,
-  }
+  };
 
   createNewTab = (targetKey) => {
     this.props.onEdit(targetKey, 'add');
@@ -33,7 +75,7 @@ export default class Tabs extends React.Component {
 
   render() {
     let { prefixCls, size, tabPosition, animation, type,
-          children, tabBarExtraContent, hideAdd } = this.props;
+      children, tabBarExtraContent, hideAdd } = this.props;
     let className = classNames({
       [this.props.className]: !!this.props.className,
       [`${prefixCls}-mini`]: size === 'small' || size === 'mini',
@@ -50,7 +92,7 @@ export default class Tabs extends React.Component {
         return cloneElement(child, {
           tab: <div>
             {child.props.tab}
-            <Icon type="cross" onClick={(e) => this.removeTab(child.key, e)} />
+            <Icon type="cross" onClick={(e) => this.removeTab(child.key, e) } />
           </div>,
           key: child.key || index,
         });
@@ -78,7 +120,7 @@ export default class Tabs extends React.Component {
         tabBarExtraContent={tabBarExtraContent}
         onChange={this.handleChange}
         animation={animation}
-      >
+        >
         {children}
       </RcTabs>
     );

components/tag/index.tsx

@@ -6,12 +6,24 @@ import classNames from 'classnames';
 import splitObject from '../_util/splitObject';
 import omit from 'object.omit';
 
-export default class Tag extends React.Component {
+export interface TagProps {
+  /** 标签是否可以关闭*/
+  closable?: boolean,
+  /** 关闭时的回调*/
+  onClose?: Function,
+  /** 动画关闭后的回调*/
+  afterClose?: Function,
+  /** 标签的色彩*/
+  color?: string,
+
+  style?: React.CSSProperties
+}
+export default class Tag extends React.Component<TagProps, any> {
   static defaultProps = {
     prefixCls: 'ant-tag',
     closable: false,
-    onClose() {},
-    afterClose() {},
+    onClose() { },
+    afterClose() { },
   }
 
   constructor(props) {
@@ -70,13 +82,13 @@ export default class Tag extends React.Component {
         transitionName={`${prefixCls}-zoom`}
         transitionAppear
         onEnd={this.animationEnd}
-      >
+        >
         {this.state.closed ? null : (
           <div data-show={!this.state.closing} {...divProps} className={classString}>
             <span className={`${prefixCls}-text`}>{children}</span>
             {closeIcon}
           </div>
-        )}
+        ) }
       </Animate>
     );
   }

components/time-picker/index.tsx

@@ -5,7 +5,35 @@ import defaultLocale from './locale/zh_CN';
 import classNames from 'classnames';
 import GregorianCalendar from 'gregorian-calendar';
 import assign from 'object-assign';
-export default class TimePicker extends React.Component {
+
+// TimePicker
+export 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
+}
+export default class TimePicker extends React.Component<TimePickerProps, any> {
   static defaultProps = {
     format: 'HH:mm:ss',
     prefixCls: 'ant-time-picker',
@@ -109,9 +137,9 @@ export default class TimePicker extends React.Component {
         {...props}
         className={className}
         locale={locale}
-        formatter={this.getFormatter()}
+        formatter={this.getFormatter() }
         onChange={this.handleChange}
-      />
+        />
     );
   }
 }

components/timeline/Timeline.tsx

@@ -2,7 +2,14 @@ import * as React from 'react';
 import classNames from 'classnames';
 import TimelineItem from './TimelineItem';
 import splitObject from '../_util/splitObject';
-export default class Timeline extends React.Component {
+
+export interface TimelineProps {
+  /** 指定最后一个幽灵节点是否存在或内容*/
+  pending?: boolean | React.ReactNode,
+
+  style?: React.CSSProperties
+}
+export default class Timeline extends React.Component<TimelineProps, any> {
   static defaultProps = {
     prefixCls: 'ant-timeline',
   }
@@ -10,8 +17,8 @@ export default class Timeline extends React.Component {
   render() {
     const [{
       prefixCls, children, pending, className
-    },restProps] = splitObject(this.props,
-      ['prefixCls', 'children', 'pending','className']);
+    }, restProps] = splitObject(this.props,
+      ['prefixCls', 'children', 'pending', 'className']);
     const pendingNode = typeof pending === 'boolean' ? null : pending;
     const classString = classNames({
       [prefixCls]: true,

components/timeline/TimelineItem.tsx

@@ -1,7 +1,15 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import splitObject from '../_util/splitObject';
-export default class TimelineItem extends React.Component {
+
+// Timeline
+export interface TimeLineItemProps {
+  /** 指定圆圈颜色。*/
+  color?: string,
+  dot?: React.ReactNode,
+  style?: React.CSSProperties
+}
+export default class TimelineItem extends React.Component<TimeLineItemProps, any> {
   static defaultProps = {
     prefixCls: 'ant-timeline',
     color: 'blue',
@@ -12,8 +20,8 @@ export default class TimelineItem extends React.Component {
   render() {
     const [{
       prefixCls, color, last, children, pending, className, dot
-    },restProps] = splitObject(this.props,
-      ['prefixCls', 'color', 'last','children','pending','className','dot']);
+    }, restProps] = splitObject(this.props,
+      ['prefixCls', 'color', 'last', 'children', 'pending', 'className', 'dot']);
 
     const itemClassName = classNames({
       [`${prefixCls}-item`]: true,

components/tooltip/index.tsx

@@ -1,19 +1,30 @@
-import React, { cloneElement } from 'react';
+import * as React from 'react';
+const { cloneElement } = React;
 import RcTooltip from 'rc-tooltip';
 import getPlacements from '../popover/placements';
 
 const placements = getPlacements({
   verticalArrowShift: 8,
 });
+type PopoverPlacement = 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom'
 
-export default class Tooltip extends React.Component {
+// Tooltip
+export interface TooltipProps {
+  /** 气泡框位置，可选 `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom`*/
+  placement?: PopoverPlacement,
+  /** 提示文字*/
+  title?: string | React.ReactNode,
+
+  style?: React.CSSProperties
+}
+export default class Tooltip extends React.Component<TooltipProps, any> {
   static defaultProps = {
     prefixCls: 'ant-tooltip',
     placement: 'top',
     transitionName: 'zoom-big',
     mouseEnterDelay: 0.1,
     mouseLeaveDelay: 0.1,
-    onVisibleChange() {},
+    onVisibleChange() { },
   }
 
   constructor(props) {
@@ -86,7 +97,7 @@ export default class Tooltip extends React.Component {
         ref="tooltip"
         {...this.props}
         onVisibleChange={this.onVisibleChange}
-      >
+        >
         {visible ? cloneElement(children, { className: childrenCls }) : children}
       </RcTooltip>
     );