Merge pull request #2246 from GrayChoi/master

rewrite in typescript

components/carousel/index.tsx

@@ -15,9 +15,30 @@ if (typeof window !== 'undefined') {
 }
 
 import SlickCarousel from 'react-slick';
-import React from 'react';
+import * as React from 'react';
 
-export default class Carousel extends React.Component {
+type CarouselEffect = 'scrollx' | 'fade'
+// Carousel
+interface CarouselProps {
+  /** 动画效果函数，可取 scrollx, fade*/
+  effect?:CarouselEffect,
+  /** 是否显示面板指示点*/
+  dots?:boolean,
+  /** 垂直显示*/
+  vertical?:boolean,
+  /** 是否自动切换*/
+  autoplay?:boolean,
+  /** 动画效果*/
+  easing?:string,
+  /** 切换面板的回调*/
+  beforeChange?:(from:number, to:number) => void,
+  /** 切换面板的回调*/
+  afterChange?:(current:number) => void,
+  /** 行内样式 */
+  style?:React.CSSProperties
+}
+
+export default class Carousel extends React.Component<CarouselProps, any> {
   static defaultProps = {
     dots: true,
     arrows: false,

components/cascader/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import RcCascader from 'rc-cascader';
 import Input from '../input';
 import Icon from '../icon';
@@ -7,7 +7,51 @@ import classNames from 'classnames';
 import splitObject from '../_util/splitObject';
 import omit from 'object.omit';
 
-export default class Cascader extends React.Component {
+export interface CascaderOptionType {
+  value:string,
+  label:string,
+  disabled?:boolean,
+  children?:Array<CascaderOptionType>
+}
+
+type CascaderExpandTrigger = 'click' | 'hover'
+interface CascaderProps {
+  /** 可选项数据源*/
+  options:Array<CascaderOptionType>,
+  /** 默认的选中项*/
+  defaultValue?:Array<CascaderOptionType>,
+  /** 指定选中项*/
+  value?:Array<CascaderOptionType>,
+  /** 选择完成后的回调*/
+  onChange?:(value:string, selectedOptions?:Array<CascaderOptionType>) => void,
+  /** 选择后展示的渲染函数*/
+  displayRender?:(label:Array<string>, selectedOptions?:Array<CascaderOptionType>) => React.ReactNode,
+  /** 自定义样式*/
+  style?:React.CSSProperties,
+  /** 自定义类名*/
+  className?:string,
+  /** 自定义浮层类名*/
+  popupClassName?:string,
+  /** 浮层预设位置：`bottomLeft` `bottomRight` `topLeft` `topRight` */
+  popupPlacement?:string,
+  /** 输入框占位文本*/
+  placeholder?:string,
+  /** 输入框大小，可选 `large` `default` `small` */
+  size?:string,
+  /** 禁用*/
+  disabled?:boolean,
+  /** 是否支持清除*/
+  allowClear?:boolean,
+  /** 次级菜单的展开方式，可选 'click' 和 'hover' */
+  expandTrigger?:CascaderExpandTrigger,
+  /** 当此项为 true 时，点选每级菜单选项值都会发生变化 */
+  changeOnSelect?:boolean,
+  /** 浮层可见变化时回调 */
+  onPopupVisibleChange?: (popupVisible: boolean) => void
+  
+}
+
+export default class Cascader extends React.Component<CascaderProps, any> {
   static defaultProps = {
     prefixCls: 'ant-cascader',
     placeholder: 'Please select',

components/index.tsx

@@ -2,4 +2,16 @@ import Affix from './affix';
 export { Affix };
 
 import Collapse from './collapse';
-export { Collapse };
+export { Collapse };
+
+import Carousel from './carousel';
+export { Carousel };
+
+import Cascader from './cascader';
+export { Cascader };
+
+import Transfer from './transfer';
+export { Transfer };
+
+import Tree from './tree';
+export { Tree };

components/transfer/index.tsx

@@ -1,13 +1,51 @@
-import React, { PropTypes } from 'react';
+import * as React from 'react';
 import List, { isRenderResultPlainObject } from './list';
 import Operation from './operation';
 import Search from './search';
 import classNames from 'classnames';
 import assign from 'object-assign';
+
 function noop() {
 }
 
-export default class Transfer extends React.Component {
+export interface TransferItem {
+  key:number | string,
+  title:string,
+  description?:string,
+  chosen:boolean,
+}
+
+// Transfer
+interface TransferProps {
+  /** 数据源*/
+  dataSource:Array<TransferItem>,
+  /** 每行数据渲染函数*/
+  render?:(record:TransferItem) => any,
+  /** 显示在右侧框数据的key集合*/
+  targetKeys:Array<string>,
+  /** 变化时回调函数*/
+  onChange?:(targetKeys:Array<TransferItem>, direction:string, moveKeys:any) => void,
+  /** 两个穿梭框的自定义样式*/
+  listStyle?:React.CSSProperties,
+  /** 自定义类*/
+  className?:string,
+  /** 标题集合,顺序从左至右*/
+  titles?:Array<string>,
+  /** 操作文案集合,顺序从上至下*/
+  operations?:Array<string>,
+  /** 是否显示搜索框*/
+  showSearch?:boolean,
+  /** 搜索框的默认值*/
+  searchPlaceholder?:string,
+  /** 当列表为空时显示的内容*/
+  notFoundContent?:React.ReactNode | string
+  /** 底部渲染函数*/
+  footer?:(props:any) => any,
+
+  style?:React.CSSProperties
+}
+
+export default class Transfer extends React.Component<TransferProps, any> {
   static List = List;
   static Operation = Operation;
   static Search = Search;
@@ -25,25 +63,6 @@ export default class Transfer extends React.Component {
     footer: noop,
   };
 
-  static propTypes = {
-    prefixCls: PropTypes.string,
-    dataSource: PropTypes.array,
-    render: PropTypes.func,
-    targetKeys: PropTypes.array,
-    onChange: PropTypes.func,
-    height: PropTypes.number,
-    listStyle: PropTypes.object,
-    className: PropTypes.string,
-    titles: PropTypes.array,
-    operations: PropTypes.array,
-    showSearch: PropTypes.bool,
-    searchPlaceholder: PropTypes.string,
-    notFoundContent: PropTypes.node,
-    body: PropTypes.func,
-    footer: PropTypes.func,
-    rowKey: PropTypes.func,
-  };
-
   constructor(props) {
     super(props);
     this.state = {

components/transfer/list.tsx

@@ -1,10 +1,11 @@
-import React, { PropTypes } from 'react';
+import * as React from 'react';
 import Checkbox from '../checkbox';
 import Search from './search';
 import classNames from 'classnames';
 import Animate from 'rc-animate';
 import PureRenderMixin from 'react-addons-pure-render-mixin';
 import assign from 'object-assign';
+import { TransferItem } from './index';
 function noop() {
 }
 
@@ -13,7 +14,36 @@ export function isRenderResultPlainObject(result) {
     Object.prototype.toString.call(result) === '[object Object]';
 }
 
-export default class TransferList extends React.Component {
+interface TransferListProps {
+    prefixCls?: string,
+    /** 数据源 */
+    dataSource: Array<TransferItem>,
+    filter?: TransferItem,
+     /** 是否显示搜索框 */
+    showSearch?: boolean,
+     /** 搜索框的默认值 */
+    searchPlaceholder?: string,
+     /** 标题 */
+    titleText?: string,
+    style?: React.CSSProperties,
+    handleFilter?: Function,
+    handleSelect?: Function,
+    handleSelectAll?: Function,
+    handleClear?: Function,
+     /** 每行渲染函数 */
+    render?: Function,
+     /** 主体渲染函数 */
+    body?: Function,
+     /** 底部渲染函数 */
+    footer?: Function,
+     /** 选中项 */
+    checkedKeys?: Array<TransferItem>;
+    checkStatus?: boolean,
+    position?: string,
+    notFoundContent?: React.ReactNode | string,
+}
+
+export default class TransferList extends React.Component<TransferListProps, any> {
   static defaultProps = {
     dataSource: [],
     titleText: '',
@@ -27,21 +57,6 @@ export default class TransferList extends React.Component {
     footer: noop,
   };
 
-  static propTypes = {
-    prefixCls: PropTypes.string,
-    dataSource: PropTypes.array,
-    showSearch: PropTypes.bool,
-    searchPlaceholder: PropTypes.string,
-    titleText: PropTypes.string,
-    style: PropTypes.object,
-    handleFilter: PropTypes.func,
-    handleSelect: PropTypes.func,
-    handleSelectAll: PropTypes.func,
-    render: PropTypes.func,
-    body: PropTypes.func,
-    footer: PropTypes.func,
-  };
-
   static contextTypes = {
     antLocale: React.PropTypes.object,
   };

components/transfer/operation.tsx

@@ -1,11 +1,21 @@
-import React, { PropTypes } from 'react';
+import * as React from 'react';
 import Button from '../button';
 import Icon from '../icon';
 
 function noop() {
 }
 
-export default class TransferOperation extends React.Component {
+export interface TransferOperationProps {
+  className?: string,
+  leftArrowText?: string,
+  rightArrowText?: string,
+  moveToLeft?: Function,
+  moveToRight?: Function,
+  leftActive?: boolean,
+  rightActive?: boolean
+}
+
+export default class TransferOperation extends React.Component<TransferOperationProps, any> {
   static defaultProps = {
     leftArrowText: '',
     rightArrowText: '',
@@ -13,14 +23,6 @@ export default class TransferOperation extends React.Component {
     moveToRight: noop,
   }
 
-  static propTypes = {
-    className: PropTypes.string,
-    leftArrowText: PropTypes.string,
-    rightArrowText: PropTypes.string,
-    moveToLeft: PropTypes.func,
-    moveToRight: PropTypes.func,
-  }
-
   render() {
     const {
       moveToLeft,

components/transfer/search.tsx

@@ -1,22 +1,23 @@
-import React, { PropTypes } from 'react';
+import * as React from 'react';
 import Icon from '../icon';
 function noop() {
 }
 
-export default class Search extends React.Component {
+interface SearchProps {
+  prefixCls?: string,
+  placeholder?: string,
+  onChange?: (e: React.FormEvent) => void,
+  handleClear?: (e: React.MouseEvent) => void
+  value?: any;
+}
+
+export default class Search extends React.Component<SearchProps, any> {
   static defaultProps = {
     placeholder: '',
     onChange: noop,
     handleClear: noop,
   }
 
-  static propTypes = {
-    prefixCls: PropTypes.string,
-    placeholder: PropTypes.string,
-    onChange: PropTypes.func,
-    handleClear: PropTypes.func,
-  }
-
   handleChange = (e) => {
     this.props.onChange(e);
   }

components/tree/index.tsx

@@ -1,8 +1,90 @@
-import React from 'react';
+import * as React from 'react';
 import RcTree from 'rc-tree';
 import animation from '../_util/openAnimation';
 
-export default class Tree extends React.Component {
+interface TreeNodeProps {
+  disabled?:boolean,
+  disableCheckbox?:boolean,
+  title?:string | React.ReactNode,
+  key?:string,
+  isLeaf?:boolean
+}
+
+export class TreeNode extends React.Component<TreeNodeProps, {}> {
+}
+
+interface TreeNodeEvent {
+  event:'check' | 'select',
+  node:TreeNode,
+
+  checked?:boolean,
+  checkedNodes?:Array<TreeNode>,
+
+  selected?:boolean,
+  selectedNodes?:Array<TreeNode>,
+}
+
+interface TreeNodeMouseEvent {
+  node:TreeNode,
+  event:React.MouseEventHandler,
+}
+
+interface TreeProps {
+  showLine?:boolean,
+  className?:string,
+  /** 是否支持多选*/
+  multiple?:boolean,
+  /**是否自动展开父节点 */
+  autoExpandParent?:boolean,
+  /**checkable状态下节点选择完全受控（父子节点选中状态不再关联）*/
+  checkStrictly?:boolean,
+  /** 是否支持选中*/
+  checkable?:boolean,
+  /** 默认展开所有树节点*/
+  defaultExpandAll?:boolean,
+  /** 默认展开指定的树节点*/
+  defaultExpandedKeys?:Array<string>,
+  /** （受控）展开指定的树节点*/
+  expandedKeys?:Array<string>,
+  /** （受控）选中复选框的树节点*/
+  checkedKeys?:Array<string>,
+  /** 默认选中复选框的树节点*/
+  defaultCheckedKeys?:Array<string>,
+  /** （受控）设置选中的树节点*/
+  selectedKeys?:Array<string>,
+  /** 默认选中的树节点*/
+  defaultSelectedKeys?:Array<string>,
+  /** 展开/收起节点时触发 */
+  onExpand?:(expandedKeys:Array<string>, {node: TreeNode, expanded: boolean}) => void | PromiseLike<any>,
+  /** 点击复选框触发*/
+  onCheck?:(checkedKeys:Array<string>, e:TreeNodeEvent) => void,
+  /** 点击树节点触发*/
+  onSelect?:(selectedKeys:Array<string>, e:TreeNodeEvent) => void,
+  /** filter some treeNodes as you need. it should return true */
+  filterTreeNode?:(node:TreeNode) => boolean,
+  /** 异步加载数据*/
+  loadData?:(node:TreeNode) => PromiseLike<any>,
+  /** 响应右键点击*/
+  onRightClick?:(options:TreeNodeMouseEvent) => void,
+  /** 设置节点可拖拽（IE>8）*/
+  draggable?:boolean,
+  /** 开始拖拽时调用*/
+  onDragStart?:(options:TreeNodeMouseEvent) => void,
+  /** dragenter 触发时调用*/
+  onDragEnter?:(options:TreeNodeMouseEvent) => void,
+  /** dragover 触发时调用 */
+  onDragOver?:(options:TreeNodeMouseEvent) => void,
+  /** dragleave 触发时调用*/
+  onDragLeave?:(options:TreeNodeMouseEvent) => void,
+  /** drop 触发时调用*/
+  onDrop?:(options:TreeNodeMouseEvent) => void,
+
+  style?:React.CSSProperties,
+
+  prefixCls?: string
+}
+
+export default class Tree extends React.Component<TreeProps, any> {
   static TreeNode = RcTree.TreeNode;
 
   static defaultProps = {
@@ -15,11 +97,9 @@ export default class Tree extends React.Component {
   render() {
     const props = this.props;
     let checkable = props.checkable;
-    if (checkable) {
-      checkable = <span className={`${props.prefixCls}-checkbox-inner`}></span>;
-    }
     return (
-      <RcTree {...props} checkable={checkable}>
+      <RcTree {...props} 
+        checkable={checkable ? (<span className={`${props.prefixCls}-checkbox-inner`}></span>) : checkable }>
         {this.props.children}
       </RcTree>
     );