diff --git a/components/alert/index.tsx b/components/alert/index.tsx index 6a4f8464b6..0b27f1b902 100644 --- a/components/alert/index.tsx +++ b/components/alert/index.tsx @@ -1,10 +1,31 @@ import * as React from 'react'; -import ReactDOM from 'react-dom'; +import * as ReactDOM from 'react-dom'; import Animate from 'rc-animate'; import Icon from '../icon'; import classNames from 'classnames'; -export default class Alert extends React.Component { +interface AlertProps { + /** + * Type of Alert styles, options:`success`, `info`, `warning`, `error` + */ + type: 'success' | 'info' | 'warning' | 'error'; + /** Whether Alert can be closed */ + closable?: boolean; + /** Close text to show */ + closeText?: React.ReactNode; + /** Content of Alert */ + message: React.ReactNode; + /** Additional content of Alert */ + description?: React.ReactNode; + /** Callback when close Alert */ + onClose?: (event) => void; + /** Whether to show icon */ + showIcon?: boolean; + style?: React.CSSProperties; + prefixCls?: string; +} + +export default class Alert extends React.Component { static defaultProps = { prefixCls: 'ant-alert', showIcon: false, @@ -20,7 +41,7 @@ export default class Alert extends React.Component { } handleClose = (e) => { e.preventDefault(); - let dom = ReactDOM.findDOMNode(this); + let dom = ReactDOM.findDOMNode(this) as HTMLElement; dom.style.height = `${dom.offsetHeight}px`; // Magic code // 重复一次后才能正确设置 height diff --git a/components/back-top/index.jsx b/components/back-top/index.tsx similarity index 84% rename from components/back-top/index.jsx rename to components/back-top/index.tsx index 98402643bb..721fdc9f5c 100644 --- a/components/back-top/index.jsx +++ b/components/back-top/index.tsx @@ -20,17 +20,21 @@ function getScroll(w, top) { return ret; } -export default class BackTop extends React.Component { - - static propTypes = { - visibilityHeight: React.PropTypes.number, - } +interface BackTopProps { + visibilityHeight?: number; + onClick?: (event) => void; + prefixCls?: string; + className?: string; +} +export default class BackTop extends React.Component { static defaultProps = { onClick() {}, visibilityHeight: 400, prefixCls: 'ant-back-top', - } + }; + + scrollEvent: any; constructor(props) { super(props); @@ -41,7 +45,9 @@ export default class BackTop extends React.Component { } scrollToTop = (e) => { - if (e) e.preventDefault(); + if (e) { + e.preventDefault(); + } this.setScrollTop(0); this.props.onClick(e); } @@ -69,7 +75,7 @@ export default class BackTop extends React.Component { } render() { - const { prefixCls, className, children, ...otherProps } = this.props; + const { prefixCls, className, children } = this.props; const classString = classNames({ [prefixCls]: true, [className]: !!className, @@ -86,7 +92,10 @@ export default class BackTop extends React.Component { }; // fix https://fb.me/react-unknown-prop - const divProps = omit(otherProps, [ + const divProps = omit(this.props, [ + 'prefixCls', + 'className', + 'children', 'visibilityHeight', ]); diff --git a/components/badge/ScrollNumber.tsx b/components/badge/ScrollNumber.tsx index 2d733fe2f1..76ed566eea 100644 --- a/components/badge/ScrollNumber.tsx +++ b/components/badge/ScrollNumber.tsx @@ -1,4 +1,5 @@ -import React, {createElement} from 'react'; +import * as React from 'react'; +import { createElement, Component } from 'react'; import {findDOMNode} from 'react-dom'; import isCssAnimationSupported from '../_util/isCssAnimationSupported'; import assign from 'object-assign'; @@ -12,7 +13,7 @@ function getNumberArray(num) { .map(i => Number(i)) : []; } -export default class ScrollNumber extends React.Component { +export default class ScrollNumber extends Component { static defaultProps = { prefixCls: 'ant-scroll-number', count: null, @@ -32,6 +33,8 @@ export default class ScrollNumber extends React.Component { height: React.PropTypes.number, }; + lastCount: any; + constructor(props) { super(props); this.state = { diff --git a/components/badge/index.tsx b/components/badge/index.tsx index 50a8d4cccb..e326905133 100644 --- a/components/badge/index.tsx +++ b/components/badge/index.tsx @@ -3,7 +3,19 @@ import Animate from 'rc-animate'; import ScrollNumber from './ScrollNumber'; import classNames from 'classnames'; -export default class Badge extends React.Component { +interface BadgeProps { + /** Number to show in badge */ + count: number | string; + /** Max count to show */ + overflowCount?: number; + /** whether to show red dot without number */ + dot?: boolean; + style?: React.CSSProperties; + prefixCls?: string; + className?: string; +} + +export default class Badge extends React.Component { static defaultProps = { prefixCls: 'ant-badge', count: null, diff --git a/components/breadcrumb/Breadcrumb.tsx b/components/breadcrumb/Breadcrumb.tsx index 414ef8967a..381660040b 100644 --- a/components/breadcrumb/Breadcrumb.tsx +++ b/components/breadcrumb/Breadcrumb.tsx @@ -1,4 +1,5 @@ -import React, { cloneElement } from 'react'; +import * as React from 'react'; +import { cloneElement } from 'react'; import BreadcrumbItem from './BreadcrumbItem'; const defaultNameRender = (breadcrumbName, route, params) => { @@ -13,7 +14,19 @@ const defaultNameRender = (breadcrumbName, route, params) => { return {name}; }; -export default class Breadcrumb extends React.Component { +interface BreadcrumbProps { + prefixCls?: string; + routes?: Array; + params?: Object; + separator?: string | React.ReactNode; + linkRender?: (link, name, paths: Array) => React.ReactNode; + nameRender?: (breadcrumbName, route, params) => React.ReactNode; + style?: React.CSSProperties; +} + +export default class Breadcrumb extends React.Component { + static Item: any; + static defaultProps = { prefixCls: 'ant-breadcrumb', separator: '/', @@ -56,7 +69,7 @@ export default class Breadcrumb extends React.Component { return null; }); } else { - crumbs = React.Children.map(children, (element, index) => { + crumbs = React.Children.map(children, (element: any, index) => { return cloneElement(element, { separator, key: index, diff --git a/components/breadcrumb/BreadcrumbItem.tsx b/components/breadcrumb/BreadcrumbItem.tsx index 2512ae7a43..580d9d9d0e 100644 --- a/components/breadcrumb/BreadcrumbItem.tsx +++ b/components/breadcrumb/BreadcrumbItem.tsx @@ -1,7 +1,12 @@ import * as React from 'react'; import splitObject from '../_util/splitObject'; -export default class BreadcrumbItem extends React.Component { +interface BreadcrumbItemProps { + separator?: React.ReactNode; + href?: string; +} + +export default class BreadcrumbItem extends React.Component { static defaultProps = { prefixCls: 'ant-breadcrumb', separator: '/', diff --git a/components/breadcrumb/index.en-US.md b/components/breadcrumb/index.en-US.md index c3c81d8357..c376881b46 100644 --- a/components/breadcrumb/index.en-US.md +++ b/components/breadcrumb/index.en-US.md @@ -28,5 +28,5 @@ A breadcrumb displays the current location within a hierarchy. It allows going b | routes | The routing stack information of router | Array | | - | | params | Routing parameter | Object | | - | | separator | Custom separator | String or Element | | '/' | -| linkRender | Custom link function，and react-router configuration | Function(href, name) | | - | -| nameRender | Custom link function，and react-router configuration | Function(name) | | - | +| linkRender | Custom link function，and react-router configuration | Function(href, name, paths) | | - | +| nameRender | Custom link function，and react-router configuration | Function(breadcrumbName, route, params) | | - | diff --git a/components/button/button-group.tsx b/components/button/button-group.tsx index ee445ea6a5..8bb5b9d71f 100644 --- a/components/button/button-group.tsx +++ b/components/button/button-group.tsx @@ -4,7 +4,15 @@ import splitObject from '../_util/splitObject'; const prefix = 'ant-btn-group-'; -export default function ButtonGroup(props) { +type ButtonSize = 'small' | 'large' + +interface ButtonGroupProps { + size?: ButtonSize; + style?: React.CSSProperties; + className?: string; +} + +export default function ButtonGroup(props: ButtonGroupProps) { const [{ size, className }, others] = splitObject(props, ['size', 'className']); // large => lg @@ -22,7 +30,3 @@ export default function ButtonGroup(props) { return
; } - -ButtonGroup.propTypes = { - size: React.PropTypes.oneOf(['large', 'small']), -}; diff --git a/components/button/button.tsx b/components/button/button.tsx index b6f32e5db5..10a7a189a9 100644 --- a/components/button/button.tsx +++ b/components/button/button.tsx @@ -24,7 +24,26 @@ function insertSpace(child) { return child; } -export default class Button extends React.Component { +type ButtonType = 'primary' | 'ghost' | 'dashed' +type ButtonShape = 'circle' | 'circle-outline' +type ButtonSize = 'small' | 'large' + +interface ButtonProps { + type?: ButtonType; + htmlType?: string; + icon?: string; + shape?: ButtonShape; + size?: ButtonSize; + onClick?: React.FormEventHandler; + loading?: boolean; + disabled?: boolean; + style?: React.CSSProperties; + prefixCls?: string; +} + +export default class Button extends React.Component { + static Group: any; + static defaultProps = { prefixCls: 'ant-btn', onClick() {}, @@ -42,6 +61,9 @@ export default class Button extends React.Component { icon: React.PropTypes.string, }; + timeout: any; + clickedTimeout: any; + componentWillUnmount() { if (this.clickedTimeout) { clearTimeout(this.clickedTimeout); @@ -55,7 +77,7 @@ export default class Button extends React.Component { button.className = button.className.replace(` ${this.props.prefixCls}-clicked`, ''); } - handleClick = (...args) => { + handleClick = (e) => { // Add click effect const buttonNode = findDOMNode(this); this.clearButton(buttonNode); @@ -63,12 +85,12 @@ export default class Button extends React.Component { clearTimeout(this.timeout); this.timeout = setTimeout(() => this.clearButton(buttonNode), 500); - this.props.onClick(...args); + this.props.onClick(e); } // Handle auto focus when click button in Chrome handleMouseUp = (e) => { - findDOMNode(this).blur(); + (findDOMNode(this) as HTMLElement).blur(); if (this.props.onMouseUp) { this.props.onMouseUp(e); } diff --git a/components/card/index.tsx b/components/card/index.tsx index b32236d738..094495151c 100644 --- a/components/card/index.tsx +++ b/components/card/index.tsx @@ -1,7 +1,18 @@ import * as React from 'react'; import classNames from 'classnames'; import splitObject from '../_util/splitObject'; -export default props => { + +interface CardProps { + title?: React.ReactNode; + extra?: React.ReactNode; + bordered?: boolean; + bodyStyle?: React.CSSProperties; + style?: React.CSSProperties; + loading?: boolean; + children?: any; +} + +export default (props: CardProps) => { const [{ prefixCls = 'ant-card', className, extra, bodyStyle, title, loading, bordered = true, diff --git a/components/index.tsx b/components/index.tsx index e4f9fbc046..6ad621be9f 100644 --- a/components/index.tsx +++ b/components/index.tsx @@ -1,7 +1,23 @@ import Affix from './affix'; export { Affix }; -// export {default as } does not work for ie8 +import Alert from './alert'; +export { Alert }; + +import BackTop from './back-top'; +export { BackTop }; + +import Badge from './badge'; +export { Badge }; + +import Breadcrumb from './breadcrumb'; +export { Breadcrumb }; + +import Button from './button'; +export { Button }; + +import Card from './card'; +export { Card }; import Collapse from './collapse'; export { Collapse };