From 77e47c5807227305d3c3190949dddd22f9470a0c Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Wed, 10 Aug 2016 09:46:56 +0800 Subject: [PATCH] refactor: add interface (#2638) --- components/index.tsx | 18 +++++++++++ components/rate/index.tsx | 14 +++++++-- components/select/index.tsx | 63 ++++++++++++++++++++++++++++++++++--- components/slider/index.tsx | 36 ++++++++++++++++++++- components/spin/index.tsx | 20 ++++++++++-- components/steps/index.tsx | 18 ++++++++++- components/switch/index.tsx | 27 +++++++++++++--- custom-typings.d.ts | 13 +++++--- typings.json | 2 +- 9 files changed, 190 insertions(+), 21 deletions(-) diff --git a/components/index.tsx b/components/index.tsx index 591635b69f..dfa205ced9 100644 --- a/components/index.tsx +++ b/components/index.tsx @@ -43,6 +43,24 @@ export { Popover }; import Progress from './progress'; export { Progress }; +import Rate from './rate'; +export { Rate }; + +import Select from './select'; +export { Select }; + +import Slider from './slider'; +export { Slider }; + +import Spin from './spin'; +export { Spin }; + +import Steps from './steps'; +export { Steps }; + +import Switch from './switch'; +export { Switch }; + import Transfer from './transfer'; export { Transfer }; diff --git a/components/rate/index.tsx b/components/rate/index.tsx index 90e30f5ff5..f0b269e39e 100644 --- a/components/rate/index.tsx +++ b/components/rate/index.tsx @@ -1,8 +1,18 @@ -import { PropTypes } from 'react'; import * as React from 'react'; +import { PropTypes } from 'react'; import RcRate from 'rc-rate'; -export default class Rate extends React.Component { +export interface RateProps { + prefixCls?: string; + count?: number; + value?: number; + defaultValue?: number; + allowHalf?: boolean; + disabled?: boolean; + onChange?: (value: number) => any; +} + +export default class Rate extends React.Component { static propTypes = { prefixCls: PropTypes.string, }; diff --git a/components/select/index.tsx b/components/select/index.tsx index 6f098e1535..9fcf9aa32f 100644 --- a/components/select/index.tsx +++ b/components/select/index.tsx @@ -1,25 +1,78 @@ import * as React from 'react'; +import { PropTypes } from 'react'; import RcSelect, { Option, OptGroup } from 'rc-select'; import classNames from 'classnames'; -export default class Select extends React.Component { +type SelectValue = string | string[] | Array<{ key: string, label: React.ReactNode }>; + +export interface SelectProps { + prefixCls?: string; + className?: string; + value?: SelectValue; + defaultValue?: SelectValue; + size?: 'default' | 'large' | 'small'; + combobox?: boolean; + notFoundContent?: React.ReactNode; + showSearch?: boolean; + transitionName?: string; + choiceTransitionName?: string; + multiple?: boolean; + allowClear?: boolean; + filterOption?: boolean | ((inputValue: string, option: Object) => any); + tags?: boolean; + onSelect?: (value: SelectValue, option: Object) => any; + onDeselect?: (value: SelectValue) => any; + onSearch?: (value: string) => any; + placeholder?: string; + dropdownMatchSelectWidth?: boolean; + optionFilterProp?: string; + optionLabelProp?: string; + disabled?: boolean; + defaultActiveFirstOption?: boolean; + labelInValue?: boolean; + getPopupContainer?: (triggerNode: React.ReactNode) => React.ReactNode; +} + +export interface SelectContext { + antLocale?: { + Select?: any, + }; +} + +export default class Select extends React.Component { static Option = Option; static OptGroup = OptGroup; static defaultProps = { prefixCls: 'ant-select', + showSearch: false, transitionName: 'slide-up', choiceTransitionName: 'zoom', - showSearch: false, }; - static contextTypes = { - antLocale: React.PropTypes.object, + static propTypes = { + prefixCls: PropTypes.string, + className: PropTypes.string, + size: PropTypes.oneOf(['default', 'large', 'small']), + combobox: PropTypes.bool, + notFoundContent: PropTypes.any, + showSearch: PropTypes.bool, + optionLabelProp: PropTypes.string, + transitionName: PropTypes.string, + choiceTransitionName: PropTypes.string, }; + context: SelectContext; + render() { let { - size, className, combobox, notFoundContent, prefixCls, showSearch, optionLabelProp, + prefixCls, + className, + size, + combobox, + notFoundContent, + showSearch, + optionLabelProp, } = this.props; const cls = classNames({ diff --git a/components/slider/index.tsx b/components/slider/index.tsx index 53290832e0..8c86c86298 100644 --- a/components/slider/index.tsx +++ b/components/slider/index.tsx @@ -1,12 +1,46 @@ import * as React from 'react'; +import { PropTypes } from 'react'; import RcSlider from 'rc-slider'; import splitObject from '../_util/splitObject'; -export default class Slider extends React.Component { + +interface SliderMarks { + [key: number]: React.ReactNode | { + style: React.CSSProperties, + label: React.ReactNode, + }; +} + +type SliderValue = number | [number, number]; + +export interface SliderProps { + range?: boolean; + min?: number; + max?: number; + step?: number | void; + marks?: SliderMarks; + dots?: boolean; + value?: SliderValue; + defaultValue?: SliderValue; + included?: boolean; + disabled?: boolean; + onChange?: (value: SliderValue) => any; + onAfterChange?: (value: SliderValue) => any; + tipFormatter?: void | ((value: number) => React.ReactNode); +} + +export default class Slider extends React.Component { static defaultProps = { prefixCls: 'ant-slider', tipTransitionName: 'zoom-down', }; + static propTypes = { + prefixCls: PropTypes.string, + tipTransitionName: PropTypes.string, + included: PropTypes.bool, + marks: PropTypes.object, + }; + render() { const [{isIncluded, marks, index, defaultIndex}, others] = splitObject(this.props, ['isIncluded', 'marks', 'index', 'defaultIndex']); diff --git a/components/spin/index.tsx b/components/spin/index.tsx index 640007a0e2..300334a245 100644 --- a/components/spin/index.tsx +++ b/components/spin/index.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; +import { PropTypes } from 'react'; import { findDOMNode } from 'react-dom'; import classNames from 'classnames'; import isCssAnimationSupported from '../_util/isCssAnimationSupported'; @@ -6,17 +7,30 @@ import warning from 'warning'; import splitObject from '../_util/splitObject'; import omit from 'object.omit'; -export default class Spin extends React.Component { +export interface SpinProps { + prefixCls?: string; + className?: string; + spinning?: boolean; + size?: 'small' | 'default' | 'large'; + tip?: string; +} + +export default class Spin extends React.Component { static defaultProps = { prefixCls: 'ant-spin', spinning: true, + size: 'default', }; static propTypes = { - className: React.PropTypes.string, - size: React.PropTypes.oneOf(['small', 'default', 'large']), + prefixCls: PropTypes.string, + className: PropTypes.string, + spinning: PropTypes.bool, + size: PropTypes.oneOf(['small', 'default', 'large']), }; + debounceTimeout: number; + constructor(props) { super(props); const spinning = this.getSpinning(props); diff --git a/components/steps/index.tsx b/components/steps/index.tsx index ecb7492364..fac3b8b748 100644 --- a/components/steps/index.tsx +++ b/components/steps/index.tsx @@ -1,7 +1,17 @@ import * as React from 'react'; +import { PropTypes } from 'react'; import RcSteps from 'rc-steps'; -export default class Steps extends React.Component { +export interface StepsProps { + prefixCls?: string; + iconPrefix?: string; + current?: number; + status?: 'wait' | 'process' | 'finish' | 'error'; + size?: 'default' | 'small'; + direction?: 'horizontal' | 'vertical'; +} + +export default class Steps extends React.Component { static Step = RcSteps.Step; static defaultProps = { @@ -10,6 +20,12 @@ export default class Steps extends React.Component { current: 0, }; + static propTypes = { + prefixCls: PropTypes.string, + iconPrefix: PropTypes.string, + current: PropTypes.number, + }; + render() { return ( diff --git a/components/switch/index.tsx b/components/switch/index.tsx index 412c3e03b1..443422c1f7 100644 --- a/components/switch/index.tsx +++ b/components/switch/index.tsx @@ -1,18 +1,37 @@ -import RcSwitch from 'rc-switch'; import * as React from 'react'; +import { PropTypes } from 'react'; +import RcSwitch from 'rc-switch'; import classNames from 'classnames'; -export default class Switch extends React.Component { +export interface SwitchProps { + prefixCls?: string; + size?: 'small' | 'default'; + className?: string; + checked?: boolean; + defaultChecked?: boolean; + onChange?: (checked: boolean) => any; + checkedChildren?: React.ReactNode; + unCheckedChildren?: React.ReactNode; +} + +export default class Switch extends React.Component { static defaultProps = { prefixCls: 'ant-switch', + size: 'default', + }; + + static propTypes = { + prefixCls: PropTypes.string, + size: PropTypes.oneOf(['small', 'default']), + className: PropTypes.string, }; render() { const { prefixCls, size, className } = this.props; - const cls = classNames({ + const classes = classNames({ [className]: !!className, [`${prefixCls}-small`]: size === 'small', }); - return ; + return ; } } diff --git a/custom-typings.d.ts b/custom-typings.d.ts index 6965046733..3fad712fd3 100644 --- a/custom-typings.d.ts +++ b/custom-typings.d.ts @@ -3,7 +3,7 @@ declare module 'classnames' { } declare module 'react-addons-pure-render-mixin' { - var exports: any; + const exports: any; export default exports; } @@ -112,7 +112,10 @@ declare module 'css-animation' { } declare module 'rc-select' { - export default function(): any; + export const Option: any; + export const OptGroup: any; + const exports: any; + export default exports; } declare module 'react-slick' { @@ -196,11 +199,13 @@ declare module 'rc-slider' { } declare module 'rc-steps' { - export default function(): any; + export const exports: any; + export default exports; } declare module 'rc-switch' { - export default function(): any; + const exports: any; + export default exports; } declare module 'rc-table' { diff --git a/typings.json b/typings.json index 940d2a3baa..e530d9268b 100644 --- a/typings.json +++ b/typings.json @@ -1,6 +1,6 @@ { "globalDependencies": { "react": "registry:dt/react#0.14.0+20160720060442", - "react-dom": "registry:dt/react-dom#0.14.0+20160412154040", + "react-dom": "registry:dt/react-dom#0.14.0+20160412154040" } }