+
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 ef2ea0ddbd..e3a7bc843b 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/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 {
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/grid/col.tsx b/components/grid/col.tsx
index 78499d66d0..b44eb64276 100644
--- a/components/grid/col.tsx
+++ b/components/grid/col.tsx
@@ -1,7 +1,7 @@
import * as React from 'react';
import classNames from 'classnames';
import RowContext from './RowContext';
-import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
+import { ConfigContext } from '../config-provider';
// https://github.com/ant-design/ant-design/issues/14324
type ColSpanType = number | string;
@@ -46,93 +46,89 @@ function parseFlex(flex: FlexType): string {
}
const Col = React.forwardRef
((props, ref) => {
- const renderCol = ({ getPrefixCls, direction }: ConfigConsumerProps) => {
- const {
- prefixCls: customizePrefixCls,
- span,
- order,
- offset,
- push,
- pull,
- className,
- children,
- flex,
- style,
- ...others
- } = props;
- const prefixCls = getPrefixCls('col', customizePrefixCls);
- let sizeClassObj = {};
- ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].forEach(size => {
- let sizeProps: ColSize = {};
- const propSize = (props as any)[size];
- if (typeof propSize === 'number') {
- sizeProps.span = propSize;
- } else if (typeof propSize === 'object') {
- sizeProps = propSize || {};
- }
+ const { getPrefixCls, direction } = React.useContext(ConfigContext);
+ const { gutter } = React.useContext(RowContext);
- delete (others as any)[size];
+ const {
+ prefixCls: customizePrefixCls,
+ span,
+ order,
+ offset,
+ push,
+ pull,
+ className,
+ children,
+ flex,
+ style,
+ ...others
+ } = props;
- sizeClassObj = {
- ...sizeClassObj,
- [`${prefixCls}-${size}-${sizeProps.span}`]: sizeProps.span !== undefined,
- [`${prefixCls}-${size}-order-${sizeProps.order}`]: sizeProps.order || sizeProps.order === 0,
- [`${prefixCls}-${size}-offset-${sizeProps.offset}`]:
- sizeProps.offset || sizeProps.offset === 0,
- [`${prefixCls}-${size}-push-${sizeProps.push}`]: sizeProps.push || sizeProps.push === 0,
- [`${prefixCls}-${size}-pull-${sizeProps.pull}`]: sizeProps.pull || sizeProps.pull === 0,
- [`${prefixCls}-rtl`]: direction === 'rtl',
- };
- });
- const classes = classNames(
- prefixCls,
- {
- [`${prefixCls}-${span}`]: span !== undefined,
- [`${prefixCls}-order-${order}`]: order,
- [`${prefixCls}-offset-${offset}`]: offset,
- [`${prefixCls}-push-${push}`]: push,
- [`${prefixCls}-pull-${pull}`]: pull,
- },
- className,
- sizeClassObj,
- );
+ const prefixCls = getPrefixCls('col', customizePrefixCls);
- return (
-
- {({ gutter }) => {
- let mergedStyle: React.CSSProperties = { ...style };
- if (gutter) {
- mergedStyle = {
- ...(gutter[0]! > 0
- ? {
- paddingLeft: gutter[0]! / 2,
- paddingRight: gutter[0]! / 2,
- }
- : {}),
- ...(gutter[1]! > 0
- ? {
- paddingTop: gutter[1]! / 2,
- paddingBottom: gutter[1]! / 2,
- }
- : {}),
- ...mergedStyle,
- };
+ let sizeClassObj = {};
+ (['xs', 'sm', 'md', 'lg', 'xl', 'xxl'] as const).forEach(size => {
+ let sizeProps: ColSize = {};
+ const propSize = props[size];
+ if (typeof propSize === 'number') {
+ sizeProps.span = propSize;
+ } else if (typeof propSize === 'object') {
+ sizeProps = propSize || {};
+ }
+
+ delete others[size];
+
+ sizeClassObj = {
+ ...sizeClassObj,
+ [`${prefixCls}-${size}-${sizeProps.span}`]: sizeProps.span !== undefined,
+ [`${prefixCls}-${size}-order-${sizeProps.order}`]: sizeProps.order || sizeProps.order === 0,
+ [`${prefixCls}-${size}-offset-${sizeProps.offset}`]:
+ sizeProps.offset || sizeProps.offset === 0,
+ [`${prefixCls}-${size}-push-${sizeProps.push}`]: sizeProps.push || sizeProps.push === 0,
+ [`${prefixCls}-${size}-pull-${sizeProps.pull}`]: sizeProps.pull || sizeProps.pull === 0,
+ [`${prefixCls}-rtl`]: direction === 'rtl',
+ };
+ });
+
+ const classes = classNames(
+ prefixCls,
+ {
+ [`${prefixCls}-${span}`]: span !== undefined,
+ [`${prefixCls}-order-${order}`]: order,
+ [`${prefixCls}-offset-${offset}`]: offset,
+ [`${prefixCls}-push-${push}`]: push,
+ [`${prefixCls}-pull-${pull}`]: pull,
+ },
+ className,
+ sizeClassObj,
+ );
+
+ let mergedStyle: React.CSSProperties = { ...style };
+ if (gutter) {
+ mergedStyle = {
+ ...(gutter[0]! > 0
+ ? {
+ paddingLeft: gutter[0]! / 2,
+ paddingRight: gutter[0]! / 2,
}
- if (flex) {
- mergedStyle.flex = parseFlex(flex);
+ : {}),
+ ...(gutter[1]! > 0
+ ? {
+ paddingTop: gutter[1]! / 2,
+ paddingBottom: gutter[1]! / 2,
}
+ : {}),
+ ...mergedStyle,
+ };
+ }
+ if (flex) {
+ mergedStyle.flex = parseFlex(flex);
+ }
- return (
-
- {children}
-
- );
- }}
-
- );
- };
-
- return {renderCol};
+ return (
+
+ {children}
+
+ );
});
Col.displayName = 'Col';
diff --git a/components/grid/row.tsx b/components/grid/row.tsx
index 3916992b64..8343cda893 100644
--- a/components/grid/row.tsx
+++ b/components/grid/row.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
import classNames from 'classnames';
-import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
+import { ConfigContext } from '../config-provider';
import RowContext from './RowContext';
import { tuple } from '../_util/type';
import ResponsiveObserve, {
@@ -21,6 +21,19 @@ export interface RowProps extends React.HTMLAttributes {
}
const Row = React.forwardRef((props, ref) => {
+ const {
+ prefixCls: customizePrefixCls,
+ justify,
+ align,
+ className,
+ style,
+ children,
+ gutter = 0,
+ ...others
+ } = props;
+
+ const { getPrefixCls, direction } = React.useContext(ConfigContext);
+
const [screens, setScreens] = React.useState({
xs: true,
sm: true,
@@ -29,8 +42,8 @@ const Row = React.forwardRef((props, ref) => {
xl: true,
xxl: true,
});
- const gutterRef = React.useRef();
- gutterRef.current = props.gutter;
+
+ const gutterRef = React.useRef(gutter);
React.useEffect(() => {
const token = ResponsiveObserve.subscribe(screen => {
@@ -43,14 +56,11 @@ const Row = React.forwardRef((props, ref) => {
setScreens(screen);
}
});
- return () => {
- ResponsiveObserve.unsubscribe(token);
- };
+ return () => ResponsiveObserve.unsubscribe(token);
}, []);
const getGutter = (): [number, number] => {
const results: [number, number] = [0, 0];
- const { gutter = 0 } = props;
const normalizedGutter = Array.isArray(gutter) ? gutter : [gutter, 0];
normalizedGutter.forEach((g, index) => {
if (typeof g === 'object') {
@@ -68,55 +78,40 @@ const Row = React.forwardRef((props, ref) => {
return results;
};
- const renderRow = ({ getPrefixCls, direction }: ConfigConsumerProps) => {
- const {
- prefixCls: customizePrefixCls,
- justify,
- align,
- className,
- style,
- children,
- ...others
- } = props;
- const prefixCls = getPrefixCls('row', customizePrefixCls);
- const gutter = getGutter();
- const classes = classNames(
- prefixCls,
- {
- [`${prefixCls}-${justify}`]: justify,
- [`${prefixCls}-${align}`]: align,
- [`${prefixCls}-rtl`]: direction === 'rtl',
- },
- className,
- );
- const rowStyle = {
- ...(gutter[0]! > 0
- ? {
- marginLeft: gutter[0]! / -2,
- marginRight: gutter[0]! / -2,
- }
- : {}),
- ...(gutter[1]! > 0
- ? {
- marginTop: gutter[1]! / -2,
- marginBottom: gutter[1]! / 2,
- }
- : {}),
- ...style,
- };
- const otherProps = { ...others };
- delete otherProps.gutter;
-
- return (
-
-
- {children}
-
-
- );
+ const prefixCls = getPrefixCls('row', customizePrefixCls);
+ const gutters = getGutter();
+ const classes = classNames(
+ prefixCls,
+ {
+ [`${prefixCls}-${justify}`]: justify,
+ [`${prefixCls}-${align}`]: align,
+ [`${prefixCls}-rtl`]: direction === 'rtl',
+ },
+ className,
+ );
+ const rowStyle = {
+ ...(gutters[0]! > 0
+ ? {
+ marginLeft: gutters[0]! / -2,
+ marginRight: gutters[0]! / -2,
+ }
+ : {}),
+ ...(gutters[1]! > 0
+ ? {
+ marginTop: gutters[1]! / -2,
+ marginBottom: gutters[1]! / 2,
+ }
+ : {}),
+ ...style,
};
- return {renderRow};
+ return (
+
+
+ {children}
+
+
+ );
});
Row.displayName = 'Row';
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 b2f835f210..a8c15bcc7c 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 491257abc2..1492c636f5 100644
--- a/components/input/__tests__/textarea.test.js
+++ b/components/input/__tests__/textarea.test.js
@@ -153,7 +153,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('');
});
@@ -162,7 +162,7 @@ describe('TextArea allowClear', () => {
const wrappers = [null, undefined, ''].map(val => mount());
wrappers.forEach(wrapper => {
expect(wrapper.find('textarea').getDOMNode().value).toEqual('');
- expect(wrapper.find('.ant-input-textarea-clear-icon-hidden').exists()).toBeTruthy();
+ expect(wrapper.find('.ant-input-clear-icon-hidden').exists()).toBeTruthy();
expect(wrapper.render()).toMatchSnapshot();
});
});
@@ -173,7 +173,7 @@ describe('TextArea allowClear', () => {
);
wrappers.forEach(wrapper => {
expect(wrapper.find('textarea').getDOMNode().value).toEqual('');
- expect(wrapper.find('.ant-textarea-clear-icon').exists()).toEqual(false);
+ expect(wrapper.find('.ant-input-clear-icon-hidden').exists()).toBeTruthy();
expect(wrapper.render()).toMatchSnapshot();
});
});
@@ -186,7 +186,7 @@ describe('TextArea allowClear', () => {
argumentEventObjectValue = e.target.value;
};
const wrapper = mount();
- wrapper.find('.ant-input-textarea-clear-icon').at(0).simulate('click');
+ wrapper.find('.ant-input-clear-icon').at(0).simulate('click');
expect(argumentEventObject.type).toBe('click');
expect(argumentEventObjectValue).toBe('');
expect(wrapper.find('textarea').at(0).getDOMNode().value).toBe('');
@@ -200,7 +200,7 @@ describe('TextArea allowClear', () => {
argumentEventObjectValue = e.target.value;
};
const wrapper = mount();
- wrapper.find('.ant-input-textarea-clear-icon').at(0).simulate('click');
+ wrapper.find('.ant-input-clear-icon').at(0).simulate('click');
expect(argumentEventObject.type).toBe('click');
expect(argumentEventObjectValue).toBe('');
expect(wrapper.find('textarea').at(0).getDOMNode().value).toBe('111');
@@ -208,14 +208,14 @@ describe('TextArea allowClear', () => {
it('should focus textarea after clear', () => {
const wrapper = mount(, { attachTo: document.body });
- wrapper.find('.ant-input-textarea-clear-icon').at(0).simulate('click');
+ wrapper.find('.ant-input-clear-icon').at(0).simulate('click');
expect(document.activeElement).toBe(wrapper.find('textarea').at(0).getDOMNode());
wrapper.unmount();
});
it('should not support allowClear when it is disabled', () => {
const wrapper = mount();
- expect(wrapper.find('.ant-input-textarea-clear-icon-hidden').exists()).toBeTruthy();
+ expect(wrapper.find('.ant-input-clear-icon-hidden').exists()).toBeTruthy();
});
it('not block input when `value` is undefined', () => {
diff --git a/components/input/demo/search-input-loading.md b/components/input/demo/search-input-loading.md
index cf496599ca..f61dd52a13 100644
--- a/components/input/demo/search-input-loading.md
+++ b/components/input/demo/search-input-loading.md
@@ -24,6 +24,9 @@ ReactDOM.render(
+
+
+
,
mountNode,
);
diff --git a/components/input/demo/search-input.md b/components/input/demo/search-input.md
index 82185a605f..f1b9345360 100644
--- a/components/input/demo/search-input.md
+++ b/components/input/demo/search-input.md
@@ -28,24 +28,17 @@ const suffix = (
/>
);
+const onSearch = value => console.log(value);
+
ReactDOM.render(
<>
- console.log(value)}
- style={{ width: 200 }}
- />
+
- console.log(value)} enterButton />
+
- console.log(value)}
- />
+
console.log(value)}
+ onSearch={onSearch}
/>
,
mountNode,
diff --git a/components/input/style/allow-clear.less b/components/input/style/allow-clear.less
index 6cd685692f..ca1bd5e734 100644
--- a/components/input/style/allow-clear.less
+++ b/components/input/style/allow-clear.less
@@ -1,8 +1,11 @@
@import './index';
-.clear-icon() {
+// ========================= Input =========================
+.@{ant-prefix}-input-clear-icon {
+ margin: 0 @input-affix-margin;
color: @disabled-color;
font-size: @font-size-sm;
+ vertical-align: -1px;
// https://github.com/ant-design/ant-design/pull/18151
// https://codesandbox.io/s/wizardly-sun-u10br
cursor: pointer;
@@ -16,20 +19,9 @@
color: @text-color;
}
- + i {
- margin-left: 6px;
- }
-
&-hidden {
visibility: hidden;
}
-}
-
-// ========================= Input =========================
-.@{ant-prefix}-input-clear-icon {
- .clear-icon;
- margin: 0 @input-affix-margin;
- vertical-align: -1px;
&:last-child {
margin-right: 0;
@@ -40,13 +32,11 @@
.@{ant-prefix}-input-affix-wrapper-textarea-with-clear-btn {
padding: 0 !important;
border: 0 !important;
-}
-.@{ant-prefix}-input-textarea-clear-icon {
- .clear-icon;
- position: absolute;
- top: 0;
- right: 0;
- z-index: 1;
- margin: 8px 8px 0 0;
+ .@{ant-prefix}-input-clear-icon {
+ position: absolute;
+ top: 8px;
+ right: 8px;
+ z-index: 1;
+ }
}
diff --git a/components/input/style/mixin.less b/components/input/style/mixin.less
index ff420ea4fa..74da9d3b2b 100644
--- a/components/input/style/mixin.less
+++ b/components/input/style/mixin.less
@@ -202,17 +202,6 @@
}
}
}
-
- // Expand addon icon click area
- // https://github.com/ant-design/ant-design/issues/3714
- > i:only-child::after {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- content: '';
- }
}
// Reset rounded corners
@@ -339,11 +328,8 @@
// reset border for Select, DatePicker, AutoComplete, Cascader, Mention, TimePicker, Input
& > .@{ant-prefix}-select > .@{ant-prefix}-select-selector,
- & > .@{ant-prefix}-calendar-picker .@{ant-prefix}-input,
& > .@{ant-prefix}-select-auto-complete .@{ant-prefix}-input,
& > .@{ant-prefix}-cascader-picker .@{ant-prefix}-input,
- & > .@{ant-prefix}-mention-wrapper .@{ant-prefix}-mention-editor,
- & > .@{ant-prefix}-time-picker .@{ant-prefix}-time-picker-input,
& > .@{ant-prefix}-input-group-wrapper .@{ant-prefix}-input {
border-right-width: @border-width-base;
border-radius: 0;
@@ -368,23 +354,16 @@
& > *:first-child,
& > .@{ant-prefix}-select:first-child > .@{ant-prefix}-select-selector,
- & > .@{ant-prefix}-calendar-picker:first-child .@{ant-prefix}-input,
& > .@{ant-prefix}-select-auto-complete:first-child .@{ant-prefix}-input,
- & > .@{ant-prefix}-cascader-picker:first-child .@{ant-prefix}-input,
- & > .@{ant-prefix}-mention-wrapper:first-child .@{ant-prefix}-mention-editor,
- & > .@{ant-prefix}-time-picker:first-child .@{ant-prefix}-time-picker-input {
+ & > .@{ant-prefix}-cascader-picker:first-child .@{ant-prefix}-input {
border-top-left-radius: @border-radius-base;
border-bottom-left-radius: @border-radius-base;
}
& > *:last-child,
& > .@{ant-prefix}-select:last-child > .@{ant-prefix}-select-selector,
- & > .@{ant-prefix}-calendar-picker:last-child .@{ant-prefix}-input,
- & > .@{ant-prefix}-select-auto-complete:last-child .@{ant-prefix}-input,
& > .@{ant-prefix}-cascader-picker:last-child .@{ant-prefix}-input,
- & > .@{ant-prefix}-cascader-picker-focused:last-child .@{ant-prefix}-input,
- & > .@{ant-prefix}-mention-wrapper:last-child .@{ant-prefix}-mention-editor,
- & > .@{ant-prefix}-time-picker:last-child .@{ant-prefix}-time-picker-input {
+ & > .@{ant-prefix}-cascader-picker-focused:last-child .@{ant-prefix}-input {
border-right-width: @border-width-base;
border-top-right-radius: @border-radius-base;
border-bottom-right-radius: @border-radius-base;
diff --git a/components/input/style/rtl.less b/components/input/style/rtl.less
index 3083f9a6b3..b8b69f0524 100644
--- a/components/input/style/rtl.less
+++ b/components/input/style/rtl.less
@@ -53,13 +53,10 @@
margin-left: 0;
}
}
-}
-.@{ant-prefix}-input-textarea-clear-icon {
.@{ant-prefix}-input-affix-wrapper-rtl & {
right: auto;
- left: 0;
- margin: 8px 0 0 8px;
+ left: 8px;
}
}
@@ -139,11 +136,8 @@
& > *:first-child,
& > .@{ant-prefix}-select:first-child > .@{ant-prefix}-select-selector,
- & > .@{ant-prefix}-calendar-picker:first-child .@{ant-prefix}-input,
& > .@{ant-prefix}-select-auto-complete:first-child .@{ant-prefix}-input,
- & > .@{ant-prefix}-cascader-picker:first-child .@{ant-prefix}-input,
- & > .@{ant-prefix}-mention-wrapper:first-child .@{ant-prefix}-mention-editor,
- & > .@{ant-prefix}-time-picker:first-child .@{ant-prefix}-time-picker-input {
+ & > .@{ant-prefix}-cascader-picker:first-child .@{ant-prefix}-input {
.@{inputClass}-group-rtl& {
border-radius: 0 @border-radius-base @border-radius-base 0;
}
@@ -151,12 +145,9 @@
& > *:last-child,
& > .@{ant-prefix}-select:last-child > .@{ant-prefix}-select-selector,
- & > .@{ant-prefix}-calendar-picker:last-child .@{ant-prefix}-input,
& > .@{ant-prefix}-select-auto-complete:last-child .@{ant-prefix}-input,
& > .@{ant-prefix}-cascader-picker:last-child .@{ant-prefix}-input,
- & > .@{ant-prefix}-cascader-picker-focused:last-child .@{ant-prefix}-input,
- & > .@{ant-prefix}-mention-wrapper:last-child .@{ant-prefix}-mention-editor,
- & > .@{ant-prefix}-time-picker:last-child .@{ant-prefix}-time-picker-input {
+ & > .@{ant-prefix}-cascader-picker-focused:last-child .@{ant-prefix}-input {
.@{inputClass}-group-rtl& {
border-left-width: @border-width-base;
border-radius: @border-radius-base 0 0 @border-radius-base;
@@ -169,79 +160,35 @@
@search-prefix: ~'@{ant-prefix}-input-search';
@search-rtl-cls: ~'@{search-prefix}-rtl';
-.@{search-prefix} {
- &-rtl {
- direction: rtl;
- }
+.@{search-prefix}-rtl {
+ direction: rtl;
- &-icon {
- .@{search-rtl-cls} & {
- margin-right: 0.5em;
- margin-left: 0;
- }
+ .@{ant-prefix}-input {
+ border-right: @border-width-base solid @border-color-base;
+ border-left: 0;
- &::before {
- .@{search-rtl-cls} & {
- border-left: none;
- }
- }
-
- &::after {
- .@{search-rtl-cls} & {
- right: auto;
- left: 0;
- border-right: @border-width-base @border-style-base @input-border-color;
- transition: all 0.3s;
+ &:hover,
+ &:focus {
+ + .@{ant-prefix}-input-group-addon .@{search-prefix}-button:not(.@{ant-prefix}-btn-primary) {
+ border-right-color: @input-hover-border-color;
+ border-left-color: @border-color-base;
}
}
}
- &:not(&-enter-button) {
- .@{search-rtl-cls}& {
- padding-right: @input-padding-horizontal-base;
- padding-left: 0;
- }
- }
-
- &-enter-button {
- input {
- .@{search-rtl-cls}& {
- border-right: @border-width-base @border-style-base @input-border-color;
- border-left: 0;
- }
+ > .@{ant-prefix}-input-group {
+ > .@{ant-prefix}-input-affix-wrapper {
+ border-right: @border-width-base solid @border-color-base;
+ border-left: 0;
&:hover,
- &:focus {
- .@{search-rtl-cls}& {
- border-color: @input-hover-border-color;
- }
+ &-focused {
+ border-right-color: @input-hover-border-color;
}
}
-
- &.@{ant-prefix}-input-affix-wrapper {
- .@{search-rtl-cls}& {
- border-right: @border-width-base @border-style-base @input-border-color;
- border-left: 0;
- }
-
- &:hover,
- &:focus {
- .@{search-rtl-cls}& {
- border-color: @input-hover-border-color;
- }
- }
- }
-
- & + .@{ant-prefix}-input-group-addon,
- input + .@{ant-prefix}-input-group-addon {
- .@{search-rtl-cls}& {
- padding: 0;
- border: 0;
-
- .@{search-prefix}-button {
- width: 100%;
- border-radius: @border-radius-base 0 0 @border-radius-base;
- }
+ > .@{ant-prefix}-input-group-addon {
+ .@{search-prefix}-button {
+ border-radius: @border-radius-base 0 0 @border-radius-base;
}
}
}
diff --git a/components/input/style/search-input.less b/components/input/style/search-input.less
index c55fe778d7..cda271b593 100644
--- a/components/input/style/search-input.less
+++ b/components/input/style/search-input.less
@@ -5,85 +5,47 @@
@search-prefix: ~'@{ant-prefix}-input-search';
-.searchInputIcon(@input-height, @font-size) {
- .@{search-prefix}-icon {
- @horizontal-padding: (@input-height - @font-size) / 2;
- padding: 0 @horizontal-padding;
-
- &::before {
- transform: translateX(-@horizontal-padding - @border-width-base);
- }
-
- &::after {
- width: @input-height;
- }
- }
-}
-
-.searchInputIcon(@input-height-base, @font-size-base);
-
-.@{ant-prefix}-input-affix-wrapper-lg {
- .searchInputIcon(@input-height-lg, @font-size-lg);
-}
-.@{ant-prefix}-input-affix-wrapper-sm {
- .searchInputIcon(@input-height-sm, @font-size-sm);
-}
-
.@{search-prefix} {
- &-icon {
- margin-left: 0.5em;
- color: @text-color-secondary;
- cursor: pointer;
- transition: all 0.3s;
- &:hover {
- color: @input-icon-hover-color;
- }
+ .@{ant-prefix}-input {
+ border-right: 0;
- &::before {
- position: absolute;
- top: 0;
- bottom: 0;
- display: block;
- border-left: @border-width-base @border-style-base @input-border-color;
- transition: all 0.3s;
- content: '';
- }
+ &:hover,
+ &:focus {
+ border-color: @input-hover-border-color;
- &::after {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- content: '';
- }
- }
-
- &:not(&-enter-button) {
- padding-right: 0;
- }
-
- &-enter-button {
- input {
- border-right: 0;
-
- &:hover,
- &:focus {
- border-color: @input-hover-border-color;
+ + .@{ant-prefix}-input-group-addon .@{search-prefix}-button:not(.@{ant-prefix}-btn-primary) {
+ border-left-color: @input-hover-border-color;
}
}
+ }
- &.@{ant-prefix}-input-affix-wrapper {
+ // fix slight height diff in Firefox:
+ // https://ant.design/components/auto-complete-cn/#components-auto-complete-demo-certain-category
+ .@{ant-prefix}-input-lg {
+ line-height: @line-height-base - 0.0002;
+ }
+
+ > .@{ant-prefix}-input-group {
+ > .@{ant-prefix}-input-affix-wrapper {
border-right: 0;
}
-
- & + .@{ant-prefix}-input-group-addon,
- input + .@{ant-prefix}-input-group-addon {
+ > .@{ant-prefix}-input-group-addon {
padding: 0;
border: 0;
.@{search-prefix}-button {
- border-top-left-radius: 0;
- border-bottom-left-radius: 0;
+ border-radius: 0 @border-radius-base @border-radius-base 0;
+ }
+
+ .@{search-prefix}-button:not(.@{ant-prefix}-btn-primary) {
+ color: @text-color-secondary;
+
+ &.@{ant-prefix}-btn-loading::before {
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ }
}
}
}
diff --git a/components/layout/style/index.less b/components/layout/style/index.less
index 016c789d32..a4f9d12538 100644
--- a/components/layout/style/index.less
+++ b/components/layout/style/index.less
@@ -89,7 +89,7 @@
}
&-zero-width {
- & > * {
+ > * {
overflow: hidden;
}
diff --git a/components/layout/style/light.less b/components/layout/style/light.less
index bf9e53d931..bee2b222df 100644
--- a/components/layout/style/light.less
+++ b/components/layout/style/light.less
@@ -1,15 +1,11 @@
-.@{layout-prefix-cls} {
- &-sider {
- &-light {
- background: @layout-sider-background-light;
- }
- &-light &-trigger {
- color: @layout-trigger-color-light;
- background: @layout-trigger-background-light;
- }
- &-light &-zero-width-trigger {
- color: @layout-trigger-color-light;
- background: @layout-trigger-background-light;
- }
+.@{layout-prefix-cls}-sider.@{layout-prefix-cls}-light {
+ background: @layout-sider-background-light;
+ .@{layout-prefix-cls}-sider-trigger {
+ color: @layout-trigger-color-light;
+ background: @layout-trigger-background-light;
+ }
+ .@{layout-prefix-cls}-sider-zero-width-trigger {
+ color: @layout-trigger-color-light;
+ background: @layout-trigger-background-light;
}
}
diff --git a/components/modal/__tests__/confirm.test.js b/components/modal/__tests__/confirm.test.js
index 2e19c00f17..b6be5d49ef 100644
--- a/components/modal/__tests__/confirm.test.js
+++ b/components/modal/__tests__/confirm.test.js
@@ -162,8 +162,9 @@ describe('Modal.confirm triggers callbacks correctly', () => {
jest.useFakeTimers();
expect($$('.ant-modal-confirm')).toHaveLength(1);
$$('.ant-btn')[0].click();
-
- jest.runAllTimers();
+ act(() => {
+ jest.runAllTimers();
+ });
expect($$('.ant-modal-confirm')).toHaveLength(0);
jest.useRealTimers();
});
@@ -188,10 +189,14 @@ describe('Modal.confirm triggers callbacks correctly', () => {
title: 'title',
content: 'content',
});
- jest.runAllTimers();
+ act(() => {
+ jest.runAllTimers();
+ });
expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1);
$$('.ant-btn')[0].click();
- jest.runAllTimers();
+ act(() => {
+ jest.runAllTimers();
+ });
expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(0);
});
jest.useRealTimers();
@@ -205,10 +210,14 @@ describe('Modal.confirm triggers callbacks correctly', () => {
content: 'content',
onCancel,
});
- jest.runAllTimers();
+ act(() => {
+ jest.runAllTimers();
+ });
expect($$(`.ant-modal-confirm-confirm`)).toHaveLength(1);
$$('.ant-btn')[0].click();
- jest.runAllTimers();
+ act(() => {
+ jest.runAllTimers();
+ });
expect($$(`.ant-modal-confirm-confirm`)).toHaveLength(0);
expect(onCancel).toHaveBeenCalledTimes(1);
jest.useRealTimers();
@@ -222,10 +231,14 @@ describe('Modal.confirm triggers callbacks correctly', () => {
content: 'content',
onOk: close => null, // eslint-disable-line no-unused-vars
});
- jest.runAllTimers();
+ act(() => {
+ jest.runAllTimers();
+ });
expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1);
$$('.ant-btn')[0].click();
- jest.runAllTimers();
+ act(() => {
+ jest.runAllTimers();
+ });
expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1);
});
jest.useRealTimers();
@@ -238,7 +251,9 @@ describe('Modal.confirm triggers callbacks correctly', () => {
title: 'title',
content: 'content',
});
- jest.runAllTimers();
+ act(() => {
+ jest.runAllTimers();
+ });
expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1);
expect($$('.ant-modal-confirm-title')[0].innerHTML).toBe('title');
expect($$('.ant-modal-confirm-content')[0].innerHTML).toBe('content');
@@ -246,7 +261,9 @@ describe('Modal.confirm triggers callbacks correctly', () => {
title: 'new title',
content: 'new content',
});
- jest.runAllTimers();
+ act(() => {
+ jest.runAllTimers();
+ });
expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1);
expect($$('.ant-modal-confirm-title')[0].innerHTML).toBe('new title');
expect($$('.ant-modal-confirm-content')[0].innerHTML).toBe('new content');
@@ -263,10 +280,14 @@ describe('Modal.confirm triggers callbacks correctly', () => {
title: 'title',
content: 'content',
});
- jest.runAllTimers();
+ act(() => {
+ jest.runAllTimers();
+ });
expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1);
instance.destroy();
- jest.runAllTimers();
+ act(() => {
+ jest.runAllTimers();
+ });
expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(0);
});
jest.useRealTimers();
@@ -279,12 +300,16 @@ describe('Modal.confirm triggers callbacks correctly', () => {
title: 'title',
content: 'content',
});
- jest.runAllTimers();
+ act(() => {
+ jest.runAllTimers();
+ });
expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1);
});
Modal.destroyAll();
['info', 'success', 'warning', 'error'].forEach(type => {
- jest.runAllTimers();
+ act(() => {
+ jest.runAllTimers();
+ });
expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(0);
});
jest.useRealTimers();
diff --git a/components/popconfirm/index.zh-CN.md b/components/popconfirm/index.zh-CN.md
index bbc81d7c29..f6331ebbf5 100644
--- a/components/popconfirm/index.zh-CN.md
+++ b/components/popconfirm/index.zh-CN.md
@@ -27,7 +27,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/fjMCD9xRq/Popconfirm.svg
| onCancel | 点击取消的回调 | function(e) | - |
| onConfirm | 点击确认的回调 | function(e) | - |
| icon | 自定义弹出气泡 Icon 图标 | ReactNode | <ExclamationCircle /> |
-| disabled | 点击 Popconfirm 子元素是否弹出气泡确认框 | boolean | false |
+| disabled | 阻止点击 Popconfirm 子元素时弹出确认框 | boolean | false |
更多属性请参考 [Tooltip](/components/tooltip/#API)。
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;
diff --git a/components/result/index.tsx b/components/result/index.tsx
index 80c3be981b..2fa05daf40 100644
--- a/components/result/index.tsx
+++ b/components/result/index.tsx
@@ -5,7 +5,7 @@ import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
import WarningFilled from '@ant-design/icons/WarningFilled';
-import { ConfigConsumerProps, ConfigConsumer } from '../config-provider';
+import { ConfigContext } from '../config-provider';
import devWarning from '../_util/devWarning';
import noFound from './noFound';
@@ -66,7 +66,6 @@ const renderIcon = (prefixCls: string, { status, icon }: ResultProps) => {
);
}
-
const iconNode = React.createElement(
IconMap[status as Exclude