diff --git a/components/alert/index.tsx b/components/alert/index.tsx old mode 100644 new mode 100755 index 942ee6d142..826815869f --- a/components/alert/index.tsx +++ b/components/alert/index.tsx @@ -18,7 +18,7 @@ export interface AlertProps { /** Additional content of Alert */ description?: React.ReactNode; /** Callback when close Alert */ - onClose?: (event) => void; + onClose?: React.MouseEventHandler; /** Whether to show icon */ showIcon?: boolean; style?: React.CSSProperties; diff --git a/components/auto-complete/index.tsx b/components/auto-complete/index.tsx old mode 100644 new mode 100755 index a2bada7958..84b9d167e4 --- a/components/auto-complete/index.tsx +++ b/components/auto-complete/index.tsx @@ -1,5 +1,6 @@ import React from 'react'; -import Select, { Option, OptGroup } from '../select'; +import Select, { OptionProps, OptGroupProps } from '../select'; +import { Option, OptGroup } from 'rc-select'; import classNames from 'classnames'; export interface SelectedValue { @@ -23,13 +24,13 @@ export interface AutoCompleteProps { defaultValue?: string | Array | SelectedValue | Array; value?: string | Array | SelectedValue | Array; allowClear?: boolean; - onChange?: (value) => void; + onChange?: (value: string | Array | SelectedValue | Array) => void; disabled?: boolean; } export default class AutoComplete extends React.Component { - static Option = Option; - static OptGroup = OptGroup; + static Option = Option as React.ClassicComponentClass; + static OptGroup = OptGroup as React.ClassicComponentClass; static defaultProps = { prefixCls: 'ant-select', diff --git a/components/back-top/index.tsx b/components/back-top/index.tsx old mode 100644 new mode 100755 index cbeff89769..c8f8815d9e --- a/components/back-top/index.tsx +++ b/components/back-top/index.tsx @@ -25,7 +25,7 @@ const easeInOutCubic = (t, b, c, d) => { export interface BackTopProps { visibilityHeight?: number; - onClick?: (event) => void; + onClick?: React.MouseEventHandler; target?: () => HTMLElement | Window; prefixCls?: string; className?: string; diff --git a/components/breadcrumb/Breadcrumb.tsx b/components/breadcrumb/Breadcrumb.tsx old mode 100644 new mode 100755 index 0754a4aec2..bbc7116192 --- a/components/breadcrumb/Breadcrumb.tsx +++ b/components/breadcrumb/Breadcrumb.tsx @@ -8,7 +8,7 @@ export interface BreadcrumbProps { routes?: Array; params?: Object; separator?: string | React.ReactNode; - itemRender?: (route, params, routes, paths) => React.ReactNode; + itemRender?: (route: any, params: any, routes: Array, paths: Array) => React.ReactNode; style?: React.CSSProperties; }; diff --git a/components/date-picker/index.tsx b/components/date-picker/index.tsx old mode 100644 new mode 100755 index c98e71eb71..5d82c4b671 --- a/components/date-picker/index.tsx +++ b/components/date-picker/index.tsx @@ -16,7 +16,7 @@ export interface PickerProps { popupStyle?: React.CSSProperties; locale?: any; size?: 'large' | 'small' | 'default'; - getCalendarContainer?: (trigger) => React.ReactNode; + getCalendarContainer?: (trigger: any) => React.ReactNode; prefixCls?: string; inputPrefixCls?: string; } @@ -37,7 +37,7 @@ const DatePicker = wrapPicker(createPicker(RcCalendar)) as React.ClassicComponen export interface MonthPickerProps extends PickerProps, SinglePickerProps { } -const MonthPicker = wrapPicker(createPicker(MonthCalendar), 'YYYY-MM') as React.ClassicComponentClass; +const MonthPicker = wrapPicker(createPicker(MonthCalendar), 'YYYY-MM'); export interface RangePickerProps extends PickerProps { value?: [moment.Moment, moment.Moment]; @@ -48,9 +48,14 @@ export interface RangePickerProps extends PickerProps { } assign(DatePicker, { - RangePicker: wrapPicker(RangePicker) as React.ClassicComponentClass, + RangePicker: wrapPicker(RangePicker), Calendar, MonthPicker, }); -export default DatePicker; +export interface DatePickerDecorator extends React.ClassicComponentClass { + RangePicker: React.ClassicComponentClass; + MonthPicker: React.ClassicComponentClass; +} + +export default DatePicker as DatePickerDecorator; diff --git a/components/form/Form.tsx b/components/form/Form.tsx old mode 100644 new mode 100755 index 5024554865..e3e335a830 --- a/components/form/Form.tsx +++ b/components/form/Form.tsx @@ -42,11 +42,9 @@ export type WrappedFormUtils = { validateFields(options: Object, callback: (erros: any, values: any) => void): any; validateFields(callback: (erros: any, values: any) => void): any; /** 与 `validateFields` 相似，但校验完后，如果校验不通过的菜单域不在可见范围内，则自动滚动进可见范围 */ - validateFieldsAndScroll( - fieldNames?: Array, - options?: Object, - callback?: (erros: any, values: any) => void - ): void; + validateFieldsAndScroll(fieldNames?: Array, + options?: Object, + callback?: (erros: any, values: any) => void): void; /** 获取某个输入控件的 Error */ getFieldError(name: string): Object[]; /** 判断一个输入控件是否在校验状态*/ @@ -62,7 +60,7 @@ export type WrappedFormUtils = { /** 收集子节点的值的时机 */ trigger?: string; /** 可以把 onChange 的参数转化为控件的值，例如 DatePicker 可设为：(date, dateString) => dateString */ - getValueFromEvent?: (...args) => any; + getValueFromEvent?: (...args: any[]) => any; /** 校验子节点值的时机 */ validateTrigger?: string; /** 校验规则，参见 [async-validator](https://github.com/yiminghe/async-validator) */ @@ -83,6 +81,8 @@ export interface ComponentDecorator { (component: T): T; } +let warnedGetFieldProps = false; + export default class Form extends React.Component { static defaultProps = { prefixCls: 'ant-form', @@ -121,16 +121,25 @@ export default class Form extends React.Component { form: this.props.form, }; }, - render() { - const getFieldProps = this.props.form.getFieldProps; - function deprecatedGetFieldProps(name, option) { + componentWillMount() { + if (!warnedGetFieldProps) { + this.getFieldProps = this.props.form.getFieldProps; + } + }, + deprecatedGetFieldProps(name, option) { + if (!warnedGetFieldProps) { + warnedGetFieldProps = true; warning( false, - '`getFieldProps` is deprecated and will be removed in future, please use `getFieldDecorator` instead' + '`getFieldProps` is not recommended, please use `getFieldDecorator` instead' ); - return getFieldProps(name, option); } - this.props.form.getFieldProps = deprecatedGetFieldProps; + return this.getFieldProps(name, option); + }, + render() { + if (!warnedGetFieldProps) { + this.props.form.getFieldProps = this.deprecatedGetFieldProps; + } const withRef: any = {}; if (options && options.withRef) { diff --git a/components/icon/index.tsx b/components/icon/index.tsx old mode 100644 new mode 100755 index e758f44357..4460b49e3a --- a/components/icon/index.tsx +++ b/components/icon/index.tsx @@ -6,7 +6,7 @@ export interface IconProps { type: string; className?: string; title?: string; - onClick?: (e) => void; + onClick?: React.MouseEventHandler; spin?: boolean; } diff --git a/components/message/index.tsx b/components/message/index.tsx old mode 100644 new mode 100755 index 8874acfd43..0ea7ef2e9f --- a/components/message/index.tsx +++ b/components/message/index.tsx @@ -55,7 +55,7 @@ function notice( type ConfigContent = React.ReactNode | string; type ConfigDuration = number; -type ConfigOnClose = () => void; +export type ConfigOnClose = () => void; export interface ConfigOptions { top?: number; @@ -64,7 +64,7 @@ export interface ConfigOptions { } export default { - info(content: ConfigContent, duration?: ConfigDuration, onClose?: ConfigOnClose) { + info(content: ConfigContent, duration?: ConfigDuration, onClose?: () => ConfigOnClose) { return notice(content, duration, 'info', onClose); }, success(content: ConfigContent, duration?: ConfigDuration, onClose?: ConfigOnClose) { diff --git a/components/notification/index.tsx b/components/notification/index.tsx old mode 100644 new mode 100755 index 5c0cbe2d36..3cc659645b --- a/components/notification/index.tsx +++ b/components/notification/index.tsx @@ -92,8 +92,19 @@ function notice(args) { }); } -const api = { - open(args) { +const api: { + success?(args: ArgsProps): void; + error?(args: ArgsProps): void; + info?(args: ArgsProps): void; + warn?(args: ArgsProps): void; + warning?(args: ArgsProps): void; + + open(args: ArgsProps): void; + close(key: string): void; + config(options: ConfigProps): void; + destroy(): void; +} = { + open(args: ArgsProps) { notice(args); }, close(key) { diff --git a/components/select/index.tsx b/components/select/index.tsx old mode 100644 new mode 100755 index 1b7e667437..8c5323e3b8 --- a/components/select/index.tsx +++ b/components/select/index.tsx @@ -35,7 +35,7 @@ export interface SelectProps { style?: React.CSSProperties; dropdownStyle?: React.CSSProperties; dropdownMenuStyle?: React.CSSProperties; - onChange?: (value) => void; + onChange?: (value: SelectValue) => void; } export interface OptionProps { @@ -53,7 +53,8 @@ export interface SelectContext { }; } -export { Option, OptGroup }; +// => It is needless to export the declaration of below two inner components. +// export { Option, OptGroup }; export default class Select extends React.Component { static Option = Option as React.ClassicComponentClass; diff --git a/components/switch/index.tsx b/components/switch/index.tsx old mode 100644 new mode 100755 index 7547480f9d..993152aa3d --- a/components/switch/index.tsx +++ b/components/switch/index.tsx @@ -12,6 +12,7 @@ export interface SwitchProps { onChange?: (checked: boolean) => any; checkedChildren?: React.ReactNode; unCheckedChildren?: React.ReactNode; + disabled?: boolean; } export default class Switch extends React.Component { diff --git a/components/table/Table.tsx b/components/table/Table.tsx old mode 100644 new mode 100755 index d60850ff34..8b8ed39f62 --- a/components/table/Table.tsx +++ b/components/table/Table.tsx @@ -750,7 +750,7 @@ export default class Table extends React.Component { const { pagination } = this.state; if (pagination.size) { size = pagination.size; - } else if (this.props.size === 'middle' || this.props.size === 'small') { + } else if (this.props.size as string === 'middle' || this.props.size === 'small') { size = 'small'; } let total = pagination.total || this.getLocalData().length; diff --git a/components/table/filterDropdown.tsx b/components/table/filterDropdown.tsx old mode 100644 new mode 100755 index 66e573f31a..5e25cf88de --- a/components/table/filterDropdown.tsx +++ b/components/table/filterDropdown.tsx @@ -6,7 +6,7 @@ import Checkbox from '../checkbox'; import Radio from '../radio'; export interface FilterDropdownMenuWrapperProps { - onClick?: Function; + onClick?: React.MouseEventHandler; children?: any; className?: string; } diff --git a/components/tabs/index.tsx b/components/tabs/index.tsx old mode 100644 new mode 100755 index 9143e46fcc..526e027255 --- a/components/tabs/index.tsx +++ b/components/tabs/index.tsx @@ -75,7 +75,7 @@ export default class Tabs extends React.Component { } = this.props; let className = classNames({ [this.props.className]: !!this.props.className, - [`${prefixCls}-mini`]: size === 'small' || size === 'mini', + [`${prefixCls}-mini`]: size === 'small' || size as string === 'mini', [`${prefixCls}-vertical`]: tabPosition === 'left' || tabPosition === 'right', [`${prefixCls}-card`]: type.indexOf('card') >= 0, [`${prefixCls}-${type}`]: true, diff --git a/components/transfer/style/index.less b/components/transfer/style/index.less index 8045d2e6ff..0d85178d10 100644 --- a/components/transfer/style/index.less +++ b/components/transfer/style/index.less @@ -16,7 +16,7 @@ border-radius: @border-radius-base; vertical-align: middle; position: relative; - width: 160px; + width: 180px; height: 200px; padding-top: 33px; diff --git a/components/upload/demo/inplace.md b/components/upload/demo/inplace.md new file mode 100644 index 0000000000..03c79ae477 --- /dev/null +++ b/components/upload/demo/inplace.md @@ -0,0 +1,72 @@ +--- +order: 9 +title: + zh-CN: 上传图片原位显示 + en-US: Show uploaded image in-place +--- + +## zh-CN + +上传图片原位显示。 + +## en-US + +Show uploaded image in-place. + +```jsx +import { Upload, Icon } from 'antd'; + +const Demo = React.createClass({ + getInitialState() { + return {}; + }, + handleChange(info) { + if (info.file.status === 'done') { + this.setState({ + // Get this url from response in real world. + imageUrl: 'https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg', + }); + } + }, + render() { + const imageUrl = this.state.imageUrl; + return ( + + { + imageUrl ? + : + + } + + ); + }, +}); + +ReactDOM.render(, mountNode); +``` + +```css +#components-upload-demo-inplace .avatar-uploader, +#components-upload-demo-inplace .avatar-uploader-trigger, +#components-upload-demo-inplace .avatar { + width: 150px; + height: 150px; +} +#components-upload-demo-inplace .avatar-uploader { + display: block; + border: 1px solid #d9d9d9; + border-radius: 6px; + cursor: pointer; +} +#components-upload-demo-inplace .avatar-uploader-trigger { + display: table-cell; + vertical-align: middle; + font-size: 28px; +} +``` diff --git a/components/upload/index.tsx b/components/upload/index.tsx index 531d9636b9..001a9bfbb4 100644 --- a/components/upload/index.tsx +++ b/components/upload/index.tsx @@ -247,6 +247,7 @@ export default class Upload extends React.Component { onProgress: this.onProgress, onSuccess: this.onSuccess, }); + delete rcUploadProps.className; const uploadList = showUploadList ? ( ; fileList?: Array; action: string; - data?: Object | ((File) => any); + data?: Object | ((file: File) => any); headers?: HttpRequestHeader; showUploadList?: boolean; multiple?: boolean; diff --git a/site/theme/template/Content/MainContent.jsx b/site/theme/template/Content/MainContent.jsx index cc2071a4be..d420708642 100644 --- a/site/theme/template/Content/MainContent.jsx +++ b/site/theme/template/Content/MainContent.jsx @@ -84,7 +84,7 @@ export default class MainContent extends React.Component { const disabled = item.disabled; const url = item.filename.replace(/(\/index)?((\.zh-CN)|(\.en-US))?\.md$/i, '').toLowerCase(); const child = !item.link ? - + {text} : diff --git a/site/theme/template/Content/index.jsx b/site/theme/template/Content/index.jsx index b15d27a1fd..d2a2f9b92b 100644 --- a/site/theme/template/Content/index.jsx +++ b/site/theme/template/Content/index.jsx @@ -1,13 +1,9 @@ import React from 'react'; import Promise from 'bluebird'; import MainContent from './MainContent'; +import * as utils from '../utils'; -// locale copy from layout -const language = (typeof localStorage === 'undefined' || !localStorage.getItem('locale')) ? - navigator.language : localStorage.getItem('locale'); -const isZhCN = language === 'zh-CN'; -const locale = isZhCN ? 'zh-CN' : 'en-US'; - +const locale = utils.isZhCN() ? 'zh-CN' : 'en-US'; export function collect(nextProps, callback) { const pageData = nextProps.location.pathname === 'changelog' ? nextProps.data.CHANGELOG : nextProps.pageData; diff --git a/site/theme/template/Home/Banner.jsx b/site/theme/template/Home/Banner.jsx index 73f4ffa194..c884c8e14f 100644 --- a/site/theme/template/Home/Banner.jsx +++ b/site/theme/template/Home/Banner.jsx @@ -16,7 +16,8 @@ function typeFunc(a) { return 'left'; } -export default function Banner() { +export default function Banner({ location }) { + const query = location.query; return (