diff --git a/components/collapse/Collapse.tsx b/components/collapse/Collapse.tsx index 35eb6761151d..73e55b722dbf 100644 --- a/components/collapse/Collapse.tsx +++ b/components/collapse/Collapse.tsx @@ -45,14 +45,15 @@ export default class Collapse extends React.Component { renderExpandIcon = (panelProps: PanelProps = {}, prefixCls: string) => { const { expandIcon } = this.props; - const icon = expandIcon ? ( + const icon = (expandIcon ? ( expandIcon(panelProps) ) : ( - ); + )) as React.ReactNode; + return React.isValidElement(icon) ? React.cloneElement(icon as any, { - className: `${prefixCls}-arrow`, + className: classNames(icon.props.className, `${prefixCls}-arrow`), }) : icon; }; diff --git a/components/collapse/__tests__/index.test.js b/components/collapse/__tests__/index.test.js index 35a065e9f8f8..d2c5104721ce 100644 --- a/components/collapse/__tests__/index.test.js +++ b/components/collapse/__tests__/index.test.js @@ -27,6 +27,22 @@ describe('Collapse', () => { expect(wrapper.render()).toMatchSnapshot(); }); + it('should keep the className of the expandIcon', () => { + const wrapper = mount( + ( + + )} + > + + , + ); + + expect(wrapper.find('.custom-expandicon-classname').exists()).toBe(true); + }); + it('should render extra node of panel', () => { const wrapper = mount( diff --git a/components/collapse/style/index.less b/components/collapse/style/index.less index 47d016cc2dcd..066403e04ccd 100644 --- a/components/collapse/style/index.less +++ b/components/collapse/style/index.less @@ -70,7 +70,7 @@ .@{collapse-prefix-cls}-arrow { right: @padding-md; - left: initial; + left: auto; } } } diff --git a/components/config-provider/context.ts b/components/config-provider/context.ts new file mode 100644 index 000000000000..37f2426cccd0 --- /dev/null +++ b/components/config-provider/context.ts @@ -0,0 +1,30 @@ +import createReactContext from '@ant-design/create-react-context'; +import defaultRenderEmpty, { RenderEmptyHandler } from './renderEmpty'; +import { Locale } from '../locale-provider'; + +export interface CSPConfig { + nonce?: string; +} + +export interface ConfigConsumerProps { + getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement; + rootPrefixCls?: string; + getPrefixCls: (suffixCls: string, customizePrefixCls?: string) => string; + renderEmpty: RenderEmptyHandler; + csp?: CSPConfig; + autoInsertSpaceInButton?: boolean; + locale?: Locale; +} + +export const ConfigContext = createReactContext({ + // We provide a default function for Context without provider + getPrefixCls: (suffixCls: string, customizePrefixCls?: string) => { + if (customizePrefixCls) return customizePrefixCls; + + return `ant-${suffixCls}`; + }, + + renderEmpty: defaultRenderEmpty, +}); + +export const ConfigConsumer = ConfigContext.Consumer; diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx index 721f68a49c6d..92a30c37fd06 100644 --- a/components/config-provider/index.tsx +++ b/components/config-provider/index.tsx @@ -2,27 +2,13 @@ // SFC has specified a displayName, but not worked. /* eslint-disable react/display-name */ import * as React from 'react'; -import createReactContext from '@ant-design/create-react-context'; -import defaultRenderEmpty, { RenderEmptyHandler } from './renderEmpty'; +import { RenderEmptyHandler } from './renderEmpty'; import LocaleProvider, { Locale, ANT_MARK } from '../locale-provider'; import LocaleReceiver from '../locale-provider/LocaleReceiver'; +import { ConfigConsumer, ConfigContext, CSPConfig, ConfigConsumerProps } from './context'; -export { RenderEmptyHandler }; - -export interface CSPConfig { - nonce?: string; -} - -export interface ConfigConsumerProps { - getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement; - rootPrefixCls?: string; - getPrefixCls: (suffixCls: string, customizePrefixCls?: string) => string; - renderEmpty: RenderEmptyHandler; - csp?: CSPConfig; - autoInsertSpaceInButton?: boolean; - locale?: Locale; -} +export { RenderEmptyHandler, ConfigConsumer, CSPConfig, ConfigConsumerProps }; export const configConsumerProps = [ 'getPopupContainer', @@ -44,19 +30,6 @@ export interface ConfigProviderProps { locale?: Locale; } -const ConfigContext = createReactContext({ - // We provide a default function for Context without provider - getPrefixCls: (suffixCls: string, customizePrefixCls?: string) => { - if (customizePrefixCls) return customizePrefixCls; - - return `ant-${suffixCls}`; - }, - - renderEmpty: defaultRenderEmpty, -}); - -export const ConfigConsumer = ConfigContext.Consumer; - class ConfigProvider extends React.Component { getPrefixCls = (suffixCls: string, customizePrefixCls?: string) => { const { prefixCls = 'ant' } = this.props; diff --git a/components/descriptions/__tests__/__snapshots__/demo.test.js.snap b/components/descriptions/__tests__/__snapshots__/demo.test.js.snap index e4058197be7e..34ce57cb88f2 100644 --- a/components/descriptions/__tests__/__snapshots__/demo.test.js.snap +++ b/components/descriptions/__tests__/__snapshots__/demo.test.js.snap @@ -904,7 +904,7 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`] Usage Time @@ -920,7 +920,7 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`] 2019-04-24 18:00:00 diff --git a/components/descriptions/demo/vertical-border.md b/components/descriptions/demo/vertical-border.md index cd38cdee0f50..4f0a061736db 100644 --- a/components/descriptions/demo/vertical-border.md +++ b/components/descriptions/demo/vertical-border.md @@ -22,7 +22,7 @@ ReactDOM.render( Prepaid YES 2018-04-24 18:00:00 - + 2019-04-24 18:00:00 diff --git a/components/drawer/index.en-US.md b/components/drawer/index.en-US.md index 3dfd0d78cb25..3f1b99c1f0cd 100644 --- a/components/drawer/index.en-US.md +++ b/components/drawer/index.en-US.md @@ -32,7 +32,7 @@ A Drawer is a panel that is typically overlaid on top of a page and slides in fr | title | The title for Drawer. | string\|ReactNode | - | 3.7.0 | | visible | Whether the Drawer dialog is visible or not. | boolean | false | 3.7.0 | | width | Width of the Drawer dialog. | string\|number | 256 | 3.7.0 | -| height | placement is `top` or `bottom`, height of the Drawer dialog. | string\|number | - | 3.9.0 | +| height | placement is `top` or `bottom`, height of the Drawer dialog. | string\|number | 256 | 3.9.0 | | className | The class name of the container of the Drawer dialog. | string | - | 3.8.0 | | zIndex | The `z-index` of the Drawer. | Number | 1000 | 3.7.0 | | placement | The placement of the Drawer. | 'top' \| 'right' \| 'bottom' \| 'left' | 'right' | 3.7.0 | diff --git a/components/form/index.en-US.md b/components/form/index.en-US.md index 725fa47d26cd..f3c59864ae70 100644 --- a/components/form/index.en-US.md +++ b/components/form/index.en-US.md @@ -177,7 +177,7 @@ If you use `react@<15.3.0`, then, you can't use `getFieldDecorator` in stateless | id | The unique identifier is required. support [nested fields format](https://github.com/react-component/form/pull/48). | string | | | | options.getValueFromEvent | Specify how to get value from event or other onChange arguments | function(..args) | [reference](https://github.com/react-component/form#option-object) | | | options.getValueProps | Get the component props according to field value. | function(value): any | [reference](https://github.com/react-component/form#option-object) | 3.9.0 | -| options.initialValue | You can specify initial value, type, optional value of children node. (Note: Because `Form` will test equality with `===` internally, we recommend to use variable as `initialValue`, instead of literal) | | n/a | | +| options.initialValue | You can specify initial value, type, optional value of children node. ([Note: Because `Form` will test equality with `===` internally, we recommend to use variable as `initialValue`, instead of literal](https://github.com/ant-design/ant-design/issues/4093)) | | n/a | | | options.normalize | Normalize value to form component, [a select-all example](https://codepen.io/afc163/pen/JJVXzG?editors=001) | function(value, prevValue, allValues): any | - | | | options.preserve | Keep the field even if field removed | boolean | - | 3.12.0 | | options.rules | Includes validation rules. Please refer to "Validation Rules" part for details. | object\[] | n/a | | diff --git a/components/form/index.zh-CN.md b/components/form/index.zh-CN.md index fd6e88d1ca42..ca307248135a 100644 --- a/components/form/index.zh-CN.md +++ b/components/form/index.zh-CN.md @@ -179,7 +179,7 @@ validateFields(['field1', 'field2'], options, (errors, values) => { | --- | --- | --- | --- | --- | | id | 必填输入控件唯一标志。支持嵌套式的[写法](https://github.com/react-component/form/pull/48)。 | string | | | | options.getValueFromEvent | 可以把 onChange 的参数（如 event）转化为控件的值 | function(..args) | [reference](https://github.com/react-component/form#option-object) | | -| options.initialValue | 子节点的初始值，类型、可选值均由子节点决定(注意：由于内部校验时使用 `===` 判断是否变化，建议使用变量缓存所需设置的值而非直接使用字面量)) | | | | +| options.initialValue | 子节点的初始值，类型、可选值均由子节点决定([注意：由于内部校验时使用 `===` 判断是否变化，建议使用变量缓存所需设置的值而非直接使用字面量](https://github.com/ant-design/ant-design/issues/4093)) | | | | | options.normalize | 转换默认的 value 给控件，[一个选择全部的例子](https://codepen.io/afc163/pen/JJVXzG?editors=001) | function(value, prevValue, allValues): any | - | | | options.preserve | 即便字段不再使用，也保留该字段的值 | boolean | - | 3.12.0 | | options.rules | 校验规则，参考下方文档 | object\[] | | | diff --git a/components/input/TextArea.tsx b/components/input/TextArea.tsx index 830830e0fd11..23fe3d5f7cd1 100644 --- a/components/input/TextArea.tsx +++ b/components/input/TextArea.tsx @@ -6,6 +6,7 @@ import ResizeObserver from 'rc-resize-observer'; import calculateNodeHeight from './calculateNodeHeight'; import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; import raf from '../_util/raf'; +import warning from '../_util/warning'; export interface AutoSizeType { minRows?: number; @@ -16,7 +17,9 @@ export type HTMLTextareaProps = React.TextareaHTMLAttributes; } @@ -84,11 +87,11 @@ class TextArea extends React.Component { }; resizeTextarea = () => { - const { autosize } = this.props; - if (!autosize || !this.textAreaRef) { + const autoSize = this.props.autoSize || this.props.autosize; + if (!autoSize || !this.textAreaRef) { return; } - const { minRows, maxRows } = autosize as AutoSizeType; + const { minRows, maxRows } = autoSize as AutoSizeType; const textareaStyles = calculateNodeHeight(this.textAreaRef, false, minRows, maxRows); this.setState({ textareaStyles, resizing: true }, () => { raf.cancel(this.resizeFrameId); @@ -108,14 +111,20 @@ class TextArea extends React.Component { renderTextArea = ({ getPrefixCls }: ConfigConsumerProps) => { const { textareaStyles, resizing } = this.state; - const { prefixCls: customizePrefixCls, className, disabled, autosize } = this.props; + const { prefixCls: customizePrefixCls, className, disabled, autoSize, autosize } = this.props; const { ...props } = this.props; - const otherProps = omit(props, ['prefixCls', 'onPressEnter', 'autosize']); + const otherProps = omit(props, ['prefixCls', 'onPressEnter', 'autoSize', 'autosize']); const prefixCls = getPrefixCls('input', customizePrefixCls); const cls = classNames(prefixCls, className, { [`${prefixCls}-disabled`]: disabled, }); + warning( + autosize === undefined, + 'Input.TextArea', + 'autosize is deprecated, please use autoSize instead.', + ); + const style = { ...props.style, ...textareaStyles, @@ -127,7 +136,7 @@ class TextArea extends React.Component { otherProps.value = otherProps.value || ''; } return ( - + `; diff --git a/components/input/__tests__/index.test.js b/components/input/__tests__/index.test.js index 8af8c199f7e9..581737b5f3ec 100644 --- a/components/input/__tests__/index.test.js +++ b/components/input/__tests__/index.test.js @@ -74,7 +74,7 @@ describe('TextArea', () => { }); it('should auto calculate height according to content length', () => { - const wrapper = mount(