From 0051e5d88325a751f4f0dd25d74a4e55a8f5d05a Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 13 Oct 2020 14:24:21 +0800 Subject: [PATCH 01/63] chore(deps-dev): bump remark-preset-lint-recommended from 4.0.1 to 5.0.0 (#27126) Bumps [remark-preset-lint-recommended](https://github.com/remarkjs/remark-lint) from 4.0.1 to 5.0.0. - [Release notes](https://github.com/remarkjs/remark-lint/releases) - [Changelog](https://github.com/remarkjs/remark-lint/blob/main/changelog.md) - [Commits](https://github.com/remarkjs/remark-lint/compare/4.0.1...remark-preset-lint-recommended@5.0.0) Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 2894c5215f..c69057f404 100644 --- a/package.json +++ b/package.json @@ -266,7 +266,7 @@ "remark": "^12.0.0", "remark-cli": "^8.0.0", "remark-lint": "^7.0.0", - "remark-preset-lint-recommended": "^4.0.0", + "remark-preset-lint-recommended": "^5.0.0", "reqwest": "^2.0.5", "rimraf": "^3.0.0", "scrollama": "^2.0.0", From b896556823017ea35c8a328e50a25dbfa0c6960b Mon Sep 17 00:00:00 2001 From: Tom Xu Date: Tue, 13 Oct 2020 18:31:48 +0800 Subject: [PATCH 02/63] style: fix Typography Link color (#27119) * style: fix Typography Link color * Update index.less --- components/typography/style/index.less | 2 ++ 1 file changed, 2 insertions(+) diff --git a/components/typography/style/index.less b/components/typography/style/index.less index 6aade8cbf1..7458c551e1 100644 --- a/components/typography/style/index.less +++ b/components/typography/style/index.less @@ -22,6 +22,8 @@ &&-danger { color: @error-color; + a&:active, + a&:focus, a&:hover { color: ~`colorPalette('@{error-color}', 5) `; } From 6288f0a86ee4bf4a5a9c2fc8b7af890db541379b Mon Sep 17 00:00:00 2001 From: xrk Date: Tue, 13 Oct 2020 18:32:18 +0800 Subject: [PATCH 03/63] fix: radio checked cursor style when disabled (#27125) --- components/radio/style/index.less | 2 ++ 1 file changed, 2 insertions(+) diff --git a/components/radio/style/index.less b/components/radio/style/index.less index 7a805b1776..0d9cc55591 100644 --- a/components/radio/style/index.less +++ b/components/radio/style/index.less @@ -135,6 +135,8 @@ } .@{radio-prefix-cls}-disabled { + cursor: not-allowed; + .@{radio-inner-prefix-cls} { background-color: @input-disabled-bg; border-color: @border-color-base !important; From 4bcac2d98614998dafafe7bc6c623ddcefeb87de Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=81=8F=E5=8F=B3?= Date: Tue, 13 Oct 2020 20:22:17 +0800 Subject: [PATCH 04/63] fix: Divider color with text (#27134) * chore: use @border-width-base * fix: Divider color with text close #27132 --- components/divider/style/index.less | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/components/divider/style/index.less b/components/divider/style/index.less index 68018b5307..e4aa6714ca 100644 --- a/components/divider/style/index.less +++ b/components/divider/style/index.less @@ -6,7 +6,7 @@ .@{divider-prefix-cls} { .reset-component; - border-top: 1px solid @divider-color; + border-top: @border-width-base solid @divider-color; &-vertical { position: relative; @@ -16,7 +16,7 @@ margin: 0 8px; vertical-align: middle; border-top: 0; - border-left: 1px solid @divider-color; + border-left: @border-width-base solid @divider-color; } &-horizontal { @@ -35,15 +35,15 @@ font-size: @font-size-lg; white-space: nowrap; text-align: center; - border-color: @divider-color; border-top: 0; + border-top-color: @divider-color; &::before, &::after { position: relative; top: 50%; width: 50%; - border-top: 1px solid transparent; + border-top: @border-width-base solid transparent; // Chrome not accept `inherit` in `border-top` border-top-color: inherit; border-bottom: 0; @@ -83,7 +83,7 @@ background: none; border-color: @divider-color; border-style: dashed; - border-width: 1px 0 0; + border-width: @border-width-base 0 0; } &-horizontal&-with-text&-dashed { @@ -95,7 +95,7 @@ } &-vertical&-dashed { - border-width: 0 0 0 1px; + border-width: 0 0 0 @border-width-base; } &-plain&-with-text { From a04d13c0b9bcdb7ca5f5e6f99801f19f5b98004a Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 13 Oct 2020 20:44:55 +0800 Subject: [PATCH 05/63] =?UTF-8?q?chore:=20=F0=9F=92=84=20fix=20hotjar=20wi?= =?UTF-8?q?dget=20color?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- site/theme/static/common.less | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/site/theme/static/common.less b/site/theme/static/common.less index c5ace9d75b..cf2242da66 100644 --- a/site/theme/static/common.less +++ b/site/theme/static/common.less @@ -194,12 +194,9 @@ a { } #_hj_feedback_container { - .path1::before { + [class$='icon_emotion_path1']::before { color: @primary-color !important; } - .path2::before { - color: @body-background !important; - } } .fixed-widgets { From 3ef6ea3ead20637d363053ef432daca9ce03e6e2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=81=8F=E5=8F=B3?= Date: Tue, 13 Oct 2020 21:16:20 +0800 Subject: [PATCH 06/63] =?UTF-8?q?refactor:=20=F0=9F=93=A6=20some=20styles?= =?UTF-8?q?=20to=20reduce=20css=20bundle=20size=20(#27129)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * refactor: some styles to reduce css bundle size * test: update snapshot * fix snapshot * fix test case * fix addonAfter * fix firefox style * reduce riddon css size * fix Input.Group border radius * remove unused css selectors * fix test cov * fix search button hover border * fix rtl textarea clear icon style * update demos * fix search rtl style * fix input search style --- .../__tests__/__snapshots__/demo.test.js.snap | 214 +++++----- components/badge/Ribbon.tsx | 2 +- .../__tests__/__snapshots__/demo.test.js.snap | 36 +- .../__snapshots__/index.test.js.snap | 3 + components/badge/style/ribbon.less | 19 +- .../__snapshots__/components.test.js.snap | 336 ++++++++------- components/form/style/status.less | 12 - components/input/ClearableLabeledInput.tsx | 9 +- components/input/Search.tsx | 105 ++--- components/input/__tests__/Search.test.js | 4 +- .../__snapshots__/Search.test.js.snap | 391 ++++++++++-------- .../__tests__/__snapshots__/demo.test.js.snap | 279 ++++++++----- .../__snapshots__/index.test.js.snap | 65 +-- .../__snapshots__/textarea.test.js.snap | 16 +- components/input/__tests__/textarea.test.js | 14 +- components/input/demo/search-input-loading.md | 3 + components/input/demo/search-input.md | 19 +- components/input/style/allow-clear.less | 30 +- components/input/style/mixin.less | 25 +- components/input/style/rtl.less | 97 +---- components/input/style/search-input.less | 96 ++--- components/layout/style/index.less | 2 +- components/layout/style/light.less | 22 +- .../__tests__/__snapshots__/demo.test.js.snap | 58 +-- 24 files changed, 953 insertions(+), 904 deletions(-) diff --git a/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap b/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap index 84d90371d0..13886be425 100644 --- a/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap +++ b/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap @@ -79,44 +79,52 @@ exports[`renders ./components/auto-complete/demo/certain-category.md correctly 1 class="ant-select-selection-search" > - + - + + + + @@ -737,43 +745,51 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = ` class="ant-select-selection-search" > - + - + + + + @@ -881,43 +897,51 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = ` class="ant-select-selection-search" > - + - + + + + @@ -1041,7 +1065,7 @@ exports[`renders ./components/auto-complete/demo/uncertain-category.md correctly class="ant-select-selection-search" > = function Ribbon({
{children}
- {text} + {text}
diff --git a/components/badge/__tests__/__snapshots__/demo.test.js.snap b/components/badge/__tests__/__snapshots__/demo.test.js.snap index c71112ad16..092a94f9b0 100644 --- a/components/badge/__tests__/__snapshots__/demo.test.js.snap +++ b/components/badge/__tests__/__snapshots__/demo.test.js.snap @@ -2060,7 +2060,11 @@ exports[`renders ./components/badge/demo/ribbbon.md correctly 1`] = `
- Pushes open the window + + Pushes open the window +
@@ -2092,7 +2096,11 @@ exports[`renders ./components/badge/demo/ribbon-debug.md correctly 1`] = `
- 啦啦啦啦 + + 啦啦啦啦 +
@@ -2118,7 +2126,11 @@ exports[`renders ./components/badge/demo/ribbon-debug.md correctly 1`] = `
- 啦啦啦啦 + + 啦啦啦啦 +
@@ -2145,7 +2157,11 @@ exports[`renders ./components/badge/demo/ribbon-debug.md correctly 1`] = ` class="ant-ribbon ant-ribbon-placement-end" style="background:#2db7f5" > - 啦啦啦啦 + + 啦啦啦啦 +
- 啦啦啦啦 + + 啦啦啦啦 +
- 啦啦啦啦 + + 啦啦啦啦 +
+
diff --git a/components/badge/style/ribbon.less b/components/badge/style/ribbon.less index 070c15e769..2787137517 100644 --- a/components/badge/style/ribbon.less +++ b/components/badge/style/ribbon.less @@ -21,12 +21,16 @@ background-color: @primary-color; border-radius: @border-radius-sm; + &-text { + color: @white; + } + &-corner { position: absolute; top: 100%; width: 8px; height: 8px; - color: @primary-color; + color: currentColor; border: 4px solid; transform: scaleY(0.75); transform-origin: top; @@ -50,10 +54,8 @@ @color: extract(@preset-colors, @i); @darkColor: '@{color}-6'; &-color-@{color} { - background-color: @@darkColor; - .@{ribbon-prefix-cls}-corner { - color: @@darkColor; - } + color: @@darkColor; + background: @@darkColor; } } .make-color-classes(); @@ -65,20 +67,15 @@ .@{ribbon-prefix-cls}-corner { right: 0; border-color: currentColor transparent transparent currentColor; - &::after { - border-color: currentColor transparent transparent currentColor; - } } } + &.@{ribbon-prefix-cls}-placement-start { left: -8px; border-bottom-left-radius: 0; .@{ribbon-prefix-cls}-corner { left: 0; border-color: currentColor currentColor transparent transparent; - &::after { - border-color: currentColor currentColor transparent transparent; - } } } } diff --git a/components/config-provider/__tests__/__snapshots__/components.test.js.snap b/components/config-provider/__tests__/__snapshots__/components.test.js.snap index f302029f1a..78976ac271 100644 --- a/components/config-provider/__tests__/__snapshots__/components.test.js.snap +++ b/components/config-provider/__tests__/__snapshots__/components.test.js.snap @@ -14459,36 +14459,44 @@ exports[`ConfigProvider components Input configProvider 1`] = ` value="" /> - + - + + + + @@ -14552,36 +14560,44 @@ exports[`ConfigProvider components Input configProvider componentSize large 1`] value="" /> - + - + + + + @@ -14645,36 +14661,44 @@ exports[`ConfigProvider components Input configProvider componentSize middle 1`] value="" /> - + - + + + + @@ -14738,36 +14762,44 @@ exports[`ConfigProvider components Input configProvider virtual and dropdownMatc value="" /> - + - + + + + @@ -14831,36 +14863,44 @@ exports[`ConfigProvider components Input normal 1`] = ` value="" /> - + - + + + + @@ -14924,36 +14964,44 @@ exports[`ConfigProvider components Input prefixCls 1`] = ` value="" /> - + - + + + + diff --git a/components/form/style/status.less b/components/form/style/status.less index 0d080cc61a..b2fd7da7f1 100644 --- a/components/form/style/status.less +++ b/components/form/style/status.less @@ -209,18 +209,6 @@ border-color: @error-color; } } - .@{ant-prefix}-mention-wrapper { - .@{ant-prefix}-mention-editor { - &, - &:not([disabled]):hover { - border-color: @error-color; - } - } - &.@{ant-prefix}-mention-active:not([disabled]) .@{ant-prefix}-mention-editor, - .@{ant-prefix}-mention-editor:not([disabled]):focus { - .active(@error-color); - } - } .@{ant-prefix}-cascader-picker:focus .@{ant-prefix}-cascader-input { .active(@error-color); diff --git a/components/input/ClearableLabeledInput.tsx b/components/input/ClearableLabeledInput.tsx index 38fa8bac97..b15350a7dc 100644 --- a/components/input/ClearableLabeledInput.tsx +++ b/components/input/ClearableLabeledInput.tsx @@ -55,17 +55,12 @@ class ClearableLabeledInput extends React.Component { }; renderClearIcon(prefixCls: string) { - const { allowClear, value, disabled, readOnly, inputType, handleReset } = this.props; - + const { allowClear, value, disabled, readOnly, handleReset } = this.props; if (!allowClear) { return null; } - const needClear = !disabled && !readOnly && value; - const className = - inputType === ClearableInputType[0] - ? `${prefixCls}-textarea-clear-icon` - : `${prefixCls}-clear-icon`; + const className = `${prefixCls}-clear-icon`; return ( ((props, ref) => { }; const onSearch = (e: React.MouseEvent | React.KeyboardEvent) => { - const { onSearch: customOnSearch, loading, disabled } = props; - if (loading || disabled) { - return; - } + const { onSearch: customOnSearch } = props; if (customOnSearch) { customOnSearch(inputRef.current?.input.value!, e); } }; - const renderLoading = (prefixCls: string) => { - const { enterButton, size: customizeSize } = props; - - if (enterButton) { - return ( - - {size => ( - - )} - - ); - } - return ; - }; - - const renderSuffix = (prefixCls: string) => { - const { suffix, enterButton, loading } = props; - - if (loading && !enterButton) { - return [suffix, renderLoading(prefixCls)]; - } - - if (enterButton) return suffix; - - const icon = ( - - ); - - if (suffix) { - return [ - replaceElement(suffix, null, { - key: 'suffix', - }), - icon, - ]; - } - - return icon; - }; - const renderAddonAfter = (prefixCls: string, size: SizeType) => { const { enterButton, disabled, addonAfter, loading } = props; + const searchIcon = + typeof enterButton === 'boolean' || typeof enterButton === 'undefined' ? ( + + ) : null; const btnClassName = `${prefixCls}-button`; - if (loading && enterButton) { - return [renderLoading(prefixCls), addonAfter]; - } - - if (!enterButton) return addonAfter; - let button: React.ReactNode; const enterButtonAsElement = enterButton as React.ReactElement; const isAntdButton = @@ -124,14 +76,16 @@ const Search = React.forwardRef((props, ref) => { button = ( ); } @@ -139,7 +93,7 @@ const Search = React.forwardRef((props, ref) => { if (addonAfter) { return [ button, - replaceElement(addonAfter, null, { + cloneElement(addonAfter, { key: 'addonAfter', }), ]; @@ -152,41 +106,28 @@ const Search = React.forwardRef((props, ref) => { const { prefixCls: customizePrefixCls, inputPrefixCls: customizeInputPrefixCls, - enterButton, className, size: customizeSize, + suffix, ...restProps } = props; delete (restProps as any).onSearch; delete (restProps as any).loading; + delete (restProps as any).enterButton; const prefixCls = getPrefixCls('input-search', customizePrefixCls); const inputPrefixCls = getPrefixCls('input', customizeInputPrefixCls); - const getClassName = (size: SizeType) => { - let inputClassName; - if (enterButton) { - inputClassName = classNames( - prefixCls, - { - [`${prefixCls}-rtl`]: direction === 'rtl', - [`${prefixCls}-enter-button`]: !!enterButton, - [`${prefixCls}-${size}`]: !!size, - }, - className, - ); - } else { - inputClassName = classNames( - prefixCls, - { - [`${prefixCls}-rtl`]: direction === 'rtl', - }, - className, - ); - } - return inputClassName; - }; + const getClassName = (size: SizeType) => + classNames( + prefixCls, + { + [`${prefixCls}-rtl`]: direction === 'rtl', + [`${prefixCls}-${size}`]: !!size, + }, + className, + ); return ( @@ -198,7 +139,7 @@ const Search = React.forwardRef((props, ref) => { size={customizeSize || size} prefixCls={inputPrefixCls} addonAfter={renderAddonAfter(prefixCls, customizeSize || size)} - suffix={renderSuffix(prefixCls)} + suffix={suffix} onChange={onChange} className={getClassName(customizeSize || size)} /> diff --git a/components/input/__tests__/Search.test.js b/components/input/__tests__/Search.test.js index 3ff37720e6..4090389081 100644 --- a/components/input/__tests__/Search.test.js +++ b/components/input/__tests__/Search.test.js @@ -36,14 +36,14 @@ describe('Input.Search', () => { it('should disable search icon when disabled prop is true', () => { const onSearch = jest.fn(); const wrapper = mount(); - wrapper.find('.anticon-search').simulate('click'); + wrapper.find('Button').simulate('click'); expect(onSearch).toHaveBeenCalledTimes(0); }); it('should trigger onSearch when click search icon', () => { const onSearch = jest.fn(); const wrapper = mount(); - wrapper.find('.anticon-search').simulate('click'); + wrapper.find('Button').simulate('click'); expect(onSearch).toHaveBeenCalledTimes(1); expect(onSearch).toHaveBeenCalledWith( 'search text', diff --git a/components/input/__tests__/__snapshots__/Search.test.js.snap b/components/input/__tests__/__snapshots__/Search.test.js.snap index 4e5fd6dbb6..7e76616e7d 100644 --- a/components/input/__tests__/__snapshots__/Search.test.js.snap +++ b/components/input/__tests__/__snapshots__/Search.test.js.snap @@ -2,64 +2,27 @@ exports[`Input.Search rtl render component should be rendered correctly in RTL direction 1`] = ` - - - - - - - -`; - -exports[`Input.Search should support addonAfter 1`] = ` - + - - - + + + +`; + +exports[`Input.Search should support addonAfter 1`] = ` + + + + Addon After @@ -91,7 +95,7 @@ exports[`Input.Search should support addonAfter 1`] = ` exports[`Input.Search should support addonAfter 2`] = ` suffix - - - + addonAfter @@ -189,13 +202,13 @@ exports[`Input.Search should support addonAfter and suffix for loading 1`] = ` exports[`Input.Search should support addonAfter and suffix for loading 2`] = ` addonAfter @@ -244,7 +261,7 @@ exports[`Input.Search should support addonAfter and suffix for loading 2`] = ` exports[`Input.Search should support custom Button 1`] = ` - - + + + + @@ -379,43 +411,7 @@ exports[`Input.Search should support invalid suffix 1`] = ` exports[`Input.Search should support loading 1`] = ` - - - - - - - -`; - -exports[`Input.Search should support loading 2`] = ` - + + + +`; + +exports[`Input.Search should support loading 2`] = ` + + + + + diff --git a/components/input/__tests__/__snapshots__/demo.test.js.snap b/components/input/__tests__/__snapshots__/demo.test.js.snap index 3cb9a803df..4eb217ad12 100644 --- a/components/input/__tests__/__snapshots__/demo.test.js.snap +++ b/components/input/__tests__/__snapshots__/demo.test.js.snap @@ -1020,7 +1020,7 @@ Array [ /> @@ -1133,7 +1133,7 @@ exports[`renders ./components/input/demo/borderless-debug.md correctly 1`] = ` /> @@ -1363,37 +1363,45 @@ exports[`renders ./components/input/demo/group.md correctly 1`] = ` value="0571" /> - + - + + + + @@ -2315,45 +2323,53 @@ Array [ exports[`renders ./components/input/demo/search-input.md correctly 1`] = ` Array [ - + - + + + + ,
,
, ,
, ,
, - + - + + + + + + ,
,
, + + + , +
, +
, + + + + + diff --git a/components/input/__tests__/__snapshots__/index.test.js.snap b/components/input/__tests__/__snapshots__/index.test.js.snap index daa5640ce3..28a6d8740e 100644 --- a/components/input/__tests__/__snapshots__/index.test.js.snap +++ b/components/input/__tests__/__snapshots__/index.test.js.snap @@ -357,36 +357,53 @@ exports[`Input should support size in form 1`] = ` exports[`Input.Search should support suffix 1`] = ` - - + - - + suffix + + + + diff --git a/components/input/__tests__/__snapshots__/textarea.test.js.snap b/components/input/__tests__/__snapshots__/textarea.test.js.snap index a7a1f6c908..9dff65f225 100644 --- a/components/input/__tests__/__snapshots__/textarea.test.js.snap +++ b/components/input/__tests__/__snapshots__/textarea.test.js.snap @@ -14,7 +14,7 @@ exports[`TextArea allowClear should change type when click 1`] = ` @@ -49,7 +49,7 @@ exports[`TextArea allowClear should change type when click 2`] = ` /> @@ -84,7 +84,7 @@ exports[`TextArea allowClear should not show icon if defaultValue is undefined, /> @@ -119,7 +119,7 @@ exports[`TextArea allowClear should not show icon if defaultValue is undefined, /> @@ -154,7 +154,7 @@ exports[`TextArea allowClear should not show icon if defaultValue is undefined, /> @@ -189,7 +189,7 @@ exports[`TextArea allowClear should not show icon if value is undefined, null or /> @@ -224,7 +224,7 @@ exports[`TextArea allowClear should not show icon if value is undefined, null or /> @@ -259,7 +259,7 @@ exports[`TextArea allowClear should not show icon if value is undefined, null or /> diff --git a/components/input/__tests__/textarea.test.js b/components/input/__tests__/textarea.test.js index d062f98ee0..8122b62dd7 100644 --- a/components/input/__tests__/textarea.test.js +++ b/components/input/__tests__/textarea.test.js @@ -147,7 +147,7 @@ describe('TextArea allowClear', () => { wrapper.find('textarea').simulate('change', { target: { value: '111' } }); expect(wrapper.find('textarea').getDOMNode().value).toEqual('111'); expect(wrapper.render()).toMatchSnapshot(); - wrapper.find('.ant-input-textarea-clear-icon').at(0).simulate('click'); + wrapper.find('.ant-input-clear-icon').at(0).simulate('click'); expect(wrapper.render()).toMatchSnapshot(); expect(wrapper.find('textarea').getDOMNode().value).toEqual(''); }); @@ -156,7 +156,7 @@ describe('TextArea allowClear', () => { const wrappers = [null, undefined, ''].map(val => mount( -
, + The autoSize property applies to textarea nodes, and only the height changes automatically. In addition, autoSize can be set to an object, specifying the minimum number of rows and the maximum number of rows. The autoSize property applies to textarea nodes, and only the height changes automatically. In addition, autoSize can be set to an object, specifying the minimum number of rows and the maximum number of rows. + , ] `; diff --git a/components/input/__tests__/__snapshots__/textarea.test.js.snap b/components/input/__tests__/__snapshots__/textarea.test.js.snap index 9dff65f225..8b6b05d4cc 100644 --- a/components/input/__tests__/__snapshots__/textarea.test.js.snap +++ b/components/input/__tests__/__snapshots__/textarea.test.js.snap @@ -1,305 +1,265 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`TextArea allowClear should change type when click 1`] = ` -
- - - - - - -
-`; - -exports[`TextArea allowClear should change type when click 2`] = ` -
- - + + + + +`; + +exports[`TextArea allowClear should change type when click 2`] = ` + +