From fb9a6963a37a2eb991ebc836f242ee2a7292d675 Mon Sep 17 00:00:00 2001 From: Gray Choi Date: Fri, 1 Jul 2016 21:52:17 +0900 Subject: [PATCH 1/2] rewrite in typescript #1846 - [x] Carousel - [x] Cascader - [x] Transfer - [x] Tree -Tree -checkable is boolean type, instead of assigning a ReactElement to it, I use Ternary Operators. --- components/carousel/index.tsx | 25 ++++++++- components/cascader/index.tsx | 48 +++++++++++++++- components/index.tsx | 14 ++++- components/transfer/index.tsx | 61 +++++++++++++------- components/transfer/list.tsx | 44 +++++++++------ components/transfer/operation.tsx | 22 ++++---- components/transfer/search.tsx | 19 ++++--- components/tree/index.tsx | 92 +++++++++++++++++++++++++++++-- 8 files changed, 257 insertions(+), 68 deletions(-) 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 a8c6efb1dd..26b44530fd 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'; @@ -6,7 +6,51 @@ import arrayTreeFilter from 'array-tree-filter'; import classNames from 'classnames'; import splitObject from '../_util/splitObject'; -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..5579772941 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,31 @@ export function isRenderResultPlainObject(result) { Object.prototype.toString.call(result) === '[object Object]'; } -export default class TransferList extends React.Component { +interface TransferListProps { + prefixCls?: string, + /** 数据源 */ + dataSource: Array, + /** 是否显示搜索框 */ + showSearch?: boolean, + /** 搜索框的默认值 */ + searchPlaceholder?: string, + /** 标题 */ + titleText?: string, + style?: React.CSSProperties, + handleFilter?: Function, + handleSelect?: Function, + handleSelectAll?: Function + /** 每行渲染函数 */ + render?: Function, + /** 主体渲染函数 */ + body?: Function, + /** 底部渲染函数 */ + footer?: Function, + /** 选中项 */ + checkedKeys?: Array; +} + +export default class TransferList extends React.Component { static defaultProps = { dataSource: [], titleText: '', @@ -27,21 +52,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} ); From 3a36d65c5e494707d22ad96121b0688662c44aa2 Mon Sep 17 00:00:00 2001 From: Gray Choi Date: Fri, 1 Jul 2016 22:03:51 +0900 Subject: [PATCH 2/2] rewrite in typescript #1846 - [x] Carousel - [x] Cascader - [x] Transfer - [x] Tree -Tree -checkable is boolean type, instead of assigning a ReactElement to it, I use Ternary Operators. --- components/transfer/list.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/components/transfer/list.tsx b/components/transfer/list.tsx index 5579772941..c374b69eec 100644 --- a/components/transfer/list.tsx +++ b/components/transfer/list.tsx @@ -18,6 +18,7 @@ interface TransferListProps { prefixCls?: string, /** 数据源 */ dataSource: Array, + filter?: TransferItem, /** 是否显示搜索框 */ showSearch?: boolean, /** 搜索框的默认值 */ @@ -27,7 +28,8 @@ interface TransferListProps { style?: React.CSSProperties, handleFilter?: Function, handleSelect?: Function, - handleSelectAll?: Function + handleSelectAll?: Function, + handleClear?: Function, /** 每行渲染函数 */ render?: Function, /** 主体渲染函数 */ @@ -36,6 +38,9 @@ interface TransferListProps { footer?: Function, /** 选中项 */ checkedKeys?: Array; + checkStatus?: boolean, + position?: string, + notFoundContent?: React.ReactNode | string, } export default class TransferList extends React.Component {