diff --git a/components/carousel/index.tsx b/components/carousel/index.tsx index d1319e4f26..e7a21d4901 100644 --- a/components/carousel/index.tsx +++ b/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 { static defaultProps = { dots: true, arrows: false, diff --git a/components/cascader/index.tsx b/components/cascader/index.tsx index 4185d6b4d2..51024c3d11 100644 --- a/components/cascader/index.tsx +++ b/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 +} + +type CascaderExpandTrigger = 'click' | 'hover' +interface CascaderProps { + /** 可选项数据源*/ + options:Array, + /** 默认的选中项*/ + defaultValue?:Array, + /** 指定选中项*/ + value?:Array, + /** 选择完成后的回调*/ + onChange?:(value:string, selectedOptions?:Array) => void, + /** 选择后展示的渲染函数*/ + displayRender?:(label:Array, selectedOptions?:Array) => 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 { static defaultProps = { prefixCls: 'ant-cascader', placeholder: 'Please select', diff --git a/components/index.tsx b/components/index.tsx index 4dc1f267e2..3fbb59aca4 100644 --- a/components/index.tsx +++ b/components/index.tsx @@ -2,4 +2,16 @@ import Affix from './affix'; export { Affix }; import Collapse from './collapse'; -export { Collapse }; \ No newline at end of file +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 }; \ No newline at end of file diff --git a/components/transfer/index.tsx b/components/transfer/index.tsx index b739b6d7e9..49246e0b4b 100644 --- a/components/transfer/index.tsx +++ b/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, + /** 每行数据渲染函数*/ + render?:(record:TransferItem) => any, + /** 显示在右侧框数据的key集合*/ + targetKeys:Array, + /** 变化时回调函数*/ + onChange?:(targetKeys:Array, direction:string, moveKeys:any) => void, + /** 两个穿梭框的自定义样式*/ + listStyle?:React.CSSProperties, + /** 自定义类*/ + className?:string, + /** 标题集合,顺序从左至右*/ + titles?:Array, + /** 操作文案集合,顺序从上至下*/ + operations?:Array, + /** 是否显示搜索框*/ + showSearch?:boolean, + /** 搜索框的默认值*/ + searchPlaceholder?:string, + /** 当列表为空时显示的内容*/ + notFoundContent?:React.ReactNode | string + /** 底部渲染函数*/ + footer?:(props:any) => any, + + style?:React.CSSProperties +} + +export default class Transfer extends React.Component { 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 = { diff --git a/components/transfer/list.tsx b/components/transfer/list.tsx index f4d9eeb7e8..c374b69eec 100644 --- a/components/transfer/list.tsx +++ b/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, + 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; + checkStatus?: boolean, + position?: string, + notFoundContent?: React.ReactNode | string, +} + +export default class TransferList extends React.Component { 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, }; diff --git a/components/transfer/operation.tsx b/components/transfer/operation.tsx index 0e460b6e56..77137803ad 100644 --- a/components/transfer/operation.tsx +++ b/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 { 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, diff --git a/components/transfer/search.tsx b/components/transfer/search.tsx index 153fe7f806..a33588525e 100644 --- a/components/transfer/search.tsx +++ b/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 { 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); } diff --git a/components/tree/index.tsx b/components/tree/index.tsx index b0dddf49fb..d69438fe3f 100644 --- a/components/tree/index.tsx +++ b/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 { +} + +interface TreeNodeEvent { + event:'check' | 'select', + node:TreeNode, + + checked?:boolean, + checkedNodes?:Array, + + selected?:boolean, + selectedNodes?:Array, +} + +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, + /** （受控）展开指定的树节点*/ + expandedKeys?:Array, + /** （受控）选中复选框的树节点*/ + checkedKeys?:Array, + /** 默认选中复选框的树节点*/ + defaultCheckedKeys?:Array, + /** （受控）设置选中的树节点*/ + selectedKeys?:Array, + /** 默认选中的树节点*/ + defaultSelectedKeys?:Array, + /** 展开/收起节点时触发 */ + onExpand?:(expandedKeys:Array, {node: TreeNode, expanded: boolean}) => void | PromiseLike, + /** 点击复选框触发*/ + onCheck?:(checkedKeys:Array, e:TreeNodeEvent) => void, + /** 点击树节点触发*/ + onSelect?:(selectedKeys:Array, e:TreeNodeEvent) => void, + /** filter some treeNodes as you need. it should return true */ + filterTreeNode?:(node:TreeNode) => boolean, + /** 异步加载数据*/ + loadData?:(node:TreeNode) => PromiseLike, + /** 响应右键点击*/ + 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 { 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 = ; - } return ( - + ) : checkable }> {this.props.children} );