- 26
-
-
+ 6
+
+
- →
-
+ />
- →
-
+ />
- →
-
+ />
- →
-
+ />
- →
-
+ />
- →
-
+ />
- →
-
+ />
- →
-
+ />
- →
-
+ />
- →
-
+ />
- →
-
+ />
- →
-
+ />
- →
-
+ />
- →
-
+ />
- →
-
+ />
- →
-
+ />
- →
-
+ />
- →
-
+ />
- →
-
+ />
- →
-
+ />
- →
-
+ />
- →
-
+ />
- →
-
+ />
- →
-
+ />
- →
-
+ />
1
+
+
+
+
+
+ 2
+
-
-
-
- 2
-
+
+
+
+ 3
+
-
-
-
- 3
-
+
+
+
+ 4
+
-
-
-
- 4
-
+
+
+
+ 5
+
-
-
-
- 5
-
+
+
+
+ 6
+
-
-
-
- 6
-
-
-
diff --git a/components/date-picker/generatePicker.tsx b/components/date-picker/generatePicker.tsx
deleted file mode 100644
index c97e57cc6a..0000000000
--- a/components/date-picker/generatePicker.tsx
+++ /dev/null
@@ -1,380 +0,0 @@
-import * as React from 'react';
-import classNames from 'classnames';
-import RCPicker, { RangePicker as RCRangePicker } from 'rc-picker';
-import { GenerateConfig } from 'rc-picker/lib/generate/index';
-import {
- PickerBaseProps as RCPickerBaseProps,
- PickerDateProps as RCPickerDateProps,
- PickerTimeProps as RCPickerTimeProps,
-} from 'rc-picker/lib/Picker';
-import { SharedTimeProps } from 'rc-picker/lib/panels/TimePanel';
-import {
- RangePickerBaseProps as RCRangePickerBaseProps,
- RangePickerDateProps as RCRangePickerDateProps,
- RangePickerTimeProps as RCRangePickerTimeProps,
-} from 'rc-picker/lib/RangePicker';
-import { PickerMode, Locale as RcPickerLocale } from 'rc-picker/lib/interface';
-import CalendarOutlined from '@ant-design/icons/CalendarOutlined';
-import ClockCircleOutlined from '@ant-design/icons/ClockCircleOutlined';
-import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
-import { ConfigContext, ConfigConsumerProps } from '../config-provider';
-import LocaleReceiver from '../locale-provider/LocaleReceiver';
-import enUS from './locale/en_US';
-import { getPlaceholder, getRangePlaceholder } from './util';
-import PickerButton from './PickerButton';
-import PickerTag from './PickerTag';
-import SizeContext, { SizeType } from '../config-provider/SizeContext';
-import { TimePickerLocale } from '../time-picker';
-
-const Components = { button: PickerButton, rangeItem: PickerTag };
-
-function toArray(list: T | T[]): T[] {
- if (!list) {
- return [];
- }
- return Array.isArray(list) ? list : [list];
-}
-
-function getTimeProps(
- props: { format?: string; picker?: PickerMode } & SharedTimeProps,
-) {
- const { format, picker, showHour, showMinute, showSecond, use12Hours } = props;
-
- const firstFormat = toArray(format)[0];
- const showTimeObj: SharedTimeProps = { ...props };
-
- if (firstFormat) {
- if (!firstFormat.includes('s') && showSecond === undefined) {
- showTimeObj.showSecond = false;
- }
- if (!firstFormat.includes('m') && showMinute === undefined) {
- showTimeObj.showMinute = false;
- }
- if (!firstFormat.includes('H') && !firstFormat.includes('h') && showHour === undefined) {
- showTimeObj.showHour = false;
- }
-
- if ((firstFormat.includes('a') || firstFormat.includes('A')) && use12Hours === undefined) {
- showTimeObj.use12Hours = true;
- }
- }
-
- if (picker === 'time') {
- return showTimeObj;
- }
-
- return {
- showTime: showTimeObj,
- };
-}
-
-type InjectDefaultProps = Omit<
- Props,
- | 'locale'
- | 'generateConfig'
- | 'prevIcon'
- | 'nextIcon'
- | 'superPrevIcon'
- | 'superNextIcon'
- | 'hideHeader'
- | 'components'
-> & {
- locale?: PickerLocale;
- size?: SizeType;
- bordered?: boolean;
-};
-
-export type PickerLocale = {
- lang: RcPickerLocale & AdditionalPickerLocaleLangProps;
- timePickerLocale: TimePickerLocale;
-} & AdditionalPickerLocaleProps;
-
-export type AdditionalPickerLocaleProps = {
- dateFormat?: string;
- dateTimeFormat?: string;
- weekFormat?: string;
- monthFormat?: string;
-};
-
-export type AdditionalPickerLocaleLangProps = {
- placeholder: string;
- yearPlaceholder?: string;
- quarterPlaceholder?: string;
- monthPlaceholder?: string;
- weekPlaceholder?: string;
- rangeYearPlaceholder?: [string, string];
- rangeMonthPlaceholder?: [string, string];
- rangeWeekPlaceholder?: [string, string];
- rangePlaceholder?: [string, string];
-};
-
-// Picker Props
-export type PickerBaseProps = InjectDefaultProps>;
-export type PickerDateProps = InjectDefaultProps>;
-export type PickerTimeProps = InjectDefaultProps>;
-
-export type PickerProps =
- | PickerBaseProps
- | PickerDateProps
- | PickerTimeProps;
-
-// Range Picker Props
-export type RangePickerBaseProps = InjectDefaultProps>;
-export type RangePickerDateProps = InjectDefaultProps>;
-export type RangePickerTimeProps = InjectDefaultProps>;
-
-export type RangePickerProps =
- | RangePickerBaseProps
- | RangePickerDateProps
- | RangePickerTimeProps;
-
-function generatePicker(generateConfig: GenerateConfig) {
- // =========================== Picker ===========================
- type DatePickerProps = PickerProps;
-
- function getPicker(
- picker?: PickerMode,
- displayName?: string,
- ) {
- class Picker extends React.Component {
- static contextType = ConfigContext;
-
- static displayName: string;
-
- context: ConfigConsumerProps;
-
- pickerRef = React.createRef>();
-
- focus = () => {
- if (this.pickerRef.current) {
- this.pickerRef.current.focus();
- }
- };
-
- blur = () => {
- if (this.pickerRef.current) {
- this.pickerRef.current.blur();
- }
- };
-
- getDefaultLocale = () => {
- const { locale } = this.props;
- const result = {
- ...enUS,
- ...locale,
- };
- result.lang = {
- ...result.lang,
- ...((locale || {}) as PickerLocale).lang,
- };
- return result;
- };
-
- renderPicker = (locale: PickerLocale) => {
- const { getPrefixCls, direction } = this.context;
- const {
- prefixCls: customizePrefixCls,
- className,
- size: customizeSize,
- bordered = true,
- ...restProps
- } = this.props;
- const { format, showTime } = this.props as any;
- const prefixCls = getPrefixCls('picker', customizePrefixCls);
-
- const additionalProps = {
- showToday: true,
- };
-
- let additionalOverrideProps: any = {};
- if (picker) {
- additionalOverrideProps.picker = picker;
- }
- const mergedPicker = picker || this.props.picker;
-
- additionalOverrideProps = {
- ...additionalOverrideProps,
- ...(showTime ? getTimeProps({ format, picker: mergedPicker, ...showTime }) : {}),
- ...(mergedPicker === 'time'
- ? getTimeProps({ format, ...this.props, picker: mergedPicker })
- : {}),
- };
-
- return (
-
- {size => {
- const mergedSize = customizeSize || size;
-
- return (
-
- ref={this.pickerRef}
- placeholder={getPlaceholder(mergedPicker, locale)}
- suffixIcon={
- mergedPicker === 'time' ?
- );
- };
-
- render() {
- return (
-
- {this.renderPicker}
-
- );
- }
- }
-
- if (displayName) {
- Picker.displayName = displayName;
- }
-
- return Picker as React.ComponentClass;
- }
-
- const DatePicker = getPicker();
- const WeekPicker = getPicker, 'picker'>>('week', 'WeekPicker');
- const MonthPicker = getPicker, 'picker'>>('month', 'MonthPicker');
- const YearPicker = getPicker, 'picker'>>('year', 'YearPicker');
- const TimePicker = getPicker, 'picker'>>('time', 'TimePicker');
-
- // ======================== Range Picker ========================
- class RangePicker extends React.Component> {
- static contextType = ConfigContext;
-
- context: ConfigConsumerProps;
-
- pickerRef = React.createRef>();
-
- focus = () => {
- if (this.pickerRef.current) {
- this.pickerRef.current.focus();
- }
- };
-
- blur = () => {
- if (this.pickerRef.current) {
- this.pickerRef.current.blur();
- }
- };
-
- getDefaultLocale = () => {
- const { locale } = this.props;
- const result = {
- ...enUS,
- ...locale,
- };
- result.lang = {
- ...result.lang,
- ...((locale || {}) as PickerLocale).lang,
- };
- return result;
- };
-
- renderPicker = (locale: PickerLocale) => {
- const { getPrefixCls, direction } = this.context;
- const {
- prefixCls: customizePrefixCls,
- className,
- size: customizeSize,
- bordered = true,
- ...restProps
- } = this.props;
- const { format, showTime, picker } = this.props as any;
- const prefixCls = getPrefixCls('picker', customizePrefixCls);
-
- let additionalOverrideProps: any = {};
-
- additionalOverrideProps = {
- ...additionalOverrideProps,
- ...(showTime ? getTimeProps({ format, picker, ...showTime }) : {}),
- ...(picker === 'time' ? getTimeProps({ format, ...this.props, picker }) : {}),
- };
-
- return (
-
- {size => {
- const mergedSize = customizeSize || size;
-
- return (
-
- separator={→}
- ref={this.pickerRef}
- placeholder={getRangePlaceholder(picker, locale)}
- suffixIcon={picker === 'time' ?
- );
- };
-
- render() {
- return (
-
- {this.renderPicker}
-
- );
- }
- }
-
- // =========================== Export ===========================
- type MergedDatePicker = typeof DatePicker & {
- WeekPicker: typeof WeekPicker;
- MonthPicker: typeof MonthPicker;
- YearPicker: typeof YearPicker;
- RangePicker: React.ComponentClass>;
- TimePicker: typeof TimePicker;
- };
-
- const MergedDatePicker = DatePicker as MergedDatePicker;
- MergedDatePicker.WeekPicker = WeekPicker;
- MergedDatePicker.MonthPicker = MonthPicker;
- MergedDatePicker.YearPicker = YearPicker;
- MergedDatePicker.RangePicker = RangePicker;
- MergedDatePicker.TimePicker = TimePicker;
-
- return MergedDatePicker;
-}
-
-export default generatePicker;
diff --git a/components/date-picker/generatePicker/generateRangePicker.tsx b/components/date-picker/generatePicker/generateRangePicker.tsx
new file mode 100644
index 0000000000..99ce021133
--- /dev/null
+++ b/components/date-picker/generatePicker/generateRangePicker.tsx
@@ -0,0 +1,116 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import CalendarOutlined from '@ant-design/icons/CalendarOutlined';
+import ClockCircleOutlined from '@ant-design/icons/ClockCircleOutlined';
+import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
+import { RangePicker as RCRangePicker } from 'rc-picker';
+import { GenerateConfig } from 'rc-picker/lib/generate/index';
+import enUS from '../locale/en_US';
+import { ConfigContext, ConfigConsumerProps } from '../../config-provider';
+import SizeContext from '../../config-provider/SizeContext';
+import LocaleReceiver from '../../locale-provider/LocaleReceiver';
+import { getRangePlaceholder } from '../util';
+import { RangePickerProps, PickerLocale, getTimeProps, Components } from '.';
+
+export default function generateRangePicker(
+ generateConfig: GenerateConfig,
+): React.ComponentClass> {
+ class RangePicker extends React.Component> {
+ static contextType = ConfigContext;
+
+ context: ConfigConsumerProps;
+
+ pickerRef = React.createRef>();
+
+ focus = () => {
+ if (this.pickerRef.current) {
+ this.pickerRef.current.focus();
+ }
+ };
+
+ blur = () => {
+ if (this.pickerRef.current) {
+ this.pickerRef.current.blur();
+ }
+ };
+
+ getDefaultLocale = () => {
+ const { locale } = this.props;
+ const result = {
+ ...enUS,
+ ...locale,
+ };
+ result.lang = {
+ ...result.lang,
+ ...((locale || {}) as PickerLocale).lang,
+ };
+ return result;
+ };
+
+ renderPicker = (locale: PickerLocale) => {
+ const { getPrefixCls, direction } = this.context;
+ const {
+ prefixCls: customizePrefixCls,
+ className,
+ size: customizeSize,
+ bordered = true,
+ ...restProps
+ } = this.props;
+ const { format, showTime, picker } = this.props as any;
+ const prefixCls = getPrefixCls('picker', customizePrefixCls);
+
+ let additionalOverrideProps: any = {};
+
+ additionalOverrideProps = {
+ ...additionalOverrideProps,
+ ...(showTime ? getTimeProps({ format, picker, ...showTime }) : {}),
+ ...(picker === 'time' ? getTimeProps({ format, ...this.props, picker }) : {}),
+ };
+
+ return (
+
+ {size => {
+ const mergedSize = customizeSize || size;
+
+ return (
+
+ separator={}
+ ref={this.pickerRef}
+ placeholder={getRangePlaceholder(picker, locale)}
+ suffixIcon={picker === 'time' ?
+ );
+ };
+
+ render() {
+ return (
+
+ {this.renderPicker}
+
+ );
+ }
+ }
+
+ return RangePicker;
+}
diff --git a/components/date-picker/generatePicker/generateSinglePicker.tsx b/components/date-picker/generatePicker/generateSinglePicker.tsx
new file mode 100644
index 0000000000..3c28fe4d23
--- /dev/null
+++ b/components/date-picker/generatePicker/generateSinglePicker.tsx
@@ -0,0 +1,155 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import CalendarOutlined from '@ant-design/icons/CalendarOutlined';
+import ClockCircleOutlined from '@ant-design/icons/ClockCircleOutlined';
+import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
+import RCPicker from 'rc-picker';
+import { PickerMode } from 'rc-picker/lib/interface';
+import { GenerateConfig } from 'rc-picker/lib/generate/index';
+import enUS from '../locale/en_US';
+import { getPlaceholder } from '../util';
+import { ConfigContext, ConfigConsumerProps } from '../../config-provider';
+import LocaleReceiver from '../../locale-provider/LocaleReceiver';
+import SizeContext from '../../config-provider/SizeContext';
+import {
+ PickerProps,
+ PickerLocale,
+ PickerDateProps,
+ PickerTimeProps,
+ getTimeProps,
+ Components,
+} from '.';
+
+export default function generatePicker(generateConfig: GenerateConfig) {
+ type DatePickerProps = PickerProps;
+
+ function getPicker(
+ picker?: PickerMode,
+ displayName?: string,
+ ) {
+ class Picker extends React.Component {
+ static contextType = ConfigContext;
+
+ static displayName: string;
+
+ context: ConfigConsumerProps;
+
+ pickerRef = React.createRef>();
+
+ focus = () => {
+ if (this.pickerRef.current) {
+ this.pickerRef.current.focus();
+ }
+ };
+
+ blur = () => {
+ if (this.pickerRef.current) {
+ this.pickerRef.current.blur();
+ }
+ };
+
+ getDefaultLocale = () => {
+ const { locale } = this.props;
+ const result = {
+ ...enUS,
+ ...locale,
+ };
+ result.lang = {
+ ...result.lang,
+ ...((locale || {}) as PickerLocale).lang,
+ };
+ return result;
+ };
+
+ renderPicker = (locale: PickerLocale) => {
+ const { getPrefixCls, direction } = this.context;
+ const {
+ prefixCls: customizePrefixCls,
+ className,
+ size: customizeSize,
+ bordered = true,
+ ...restProps
+ } = this.props;
+ const { format, showTime } = this.props as any;
+ const prefixCls = getPrefixCls('picker', customizePrefixCls);
+
+ const additionalProps = {
+ showToday: true,
+ };
+
+ let additionalOverrideProps: any = {};
+ if (picker) {
+ additionalOverrideProps.picker = picker;
+ }
+ const mergedPicker = picker || this.props.picker;
+
+ additionalOverrideProps = {
+ ...additionalOverrideProps,
+ ...(showTime ? getTimeProps({ format, picker: mergedPicker, ...showTime }) : {}),
+ ...(mergedPicker === 'time'
+ ? getTimeProps({ format, ...this.props, picker: mergedPicker })
+ : {}),
+ };
+
+ return (
+
+ {size => {
+ const mergedSize = customizeSize || size;
+
+ return (
+
+ ref={this.pickerRef}
+ placeholder={getPlaceholder(mergedPicker, locale)}
+ suffixIcon={
+ mergedPicker === 'time' ?
+ );
+ };
+
+ render() {
+ return (
+
+ {this.renderPicker}
+
+ );
+ }
+ }
+
+ if (displayName) {
+ Picker.displayName = displayName;
+ }
+
+ return Picker as React.ComponentClass;
+ }
+
+ const DatePicker = getPicker();
+ const WeekPicker = getPicker, 'picker'>>('week', 'WeekPicker');
+ const MonthPicker = getPicker, 'picker'>>('month', 'MonthPicker');
+ const YearPicker = getPicker, 'picker'>>('year', 'YearPicker');
+ const TimePicker = getPicker, 'picker'>>('time', 'TimePicker');
+
+ return { DatePicker, WeekPicker, MonthPicker, YearPicker, TimePicker };
+}
diff --git a/components/date-picker/generatePicker/index.tsx b/components/date-picker/generatePicker/index.tsx
new file mode 100644
index 0000000000..3496b08c57
--- /dev/null
+++ b/components/date-picker/generatePicker/index.tsx
@@ -0,0 +1,152 @@
+import * as React from 'react';
+import { GenerateConfig } from 'rc-picker/lib/generate/index';
+import {
+ PickerBaseProps as RCPickerBaseProps,
+ PickerDateProps as RCPickerDateProps,
+ PickerTimeProps as RCPickerTimeProps,
+} from 'rc-picker/lib/Picker';
+import { SharedTimeProps } from 'rc-picker/lib/panels/TimePanel';
+import {
+ RangePickerBaseProps as RCRangePickerBaseProps,
+ RangePickerDateProps as RCRangePickerDateProps,
+ RangePickerTimeProps as RCRangePickerTimeProps,
+} from 'rc-picker/lib/RangePicker';
+import { PickerMode, Locale as RcPickerLocale } from 'rc-picker/lib/interface';
+import { SizeType } from '../../config-provider/SizeContext';
+import PickerButton from '../PickerButton';
+import PickerTag from '../PickerTag';
+import { TimePickerLocale } from '../../time-picker';
+import generateSinglePicker from './generateSinglePicker';
+import generateRangePicker from './generateRangePicker';
+
+export const Components = { button: PickerButton, rangeItem: PickerTag };
+
+function toArray(list: T | T[]): T[] {
+ if (!list) {
+ return [];
+ }
+ return Array.isArray(list) ? list : [list];
+}
+
+export function getTimeProps(
+ props: { format?: string; picker?: PickerMode } & SharedTimeProps,
+) {
+ const { format, picker, showHour, showMinute, showSecond, use12Hours } = props;
+
+ const firstFormat = toArray(format)[0];
+ const showTimeObj: SharedTimeProps = { ...props };
+
+ if (firstFormat) {
+ if (!firstFormat.includes('s') && showSecond === undefined) {
+ showTimeObj.showSecond = false;
+ }
+ if (!firstFormat.includes('m') && showMinute === undefined) {
+ showTimeObj.showMinute = false;
+ }
+ if (!firstFormat.includes('H') && !firstFormat.includes('h') && showHour === undefined) {
+ showTimeObj.showHour = false;
+ }
+
+ if ((firstFormat.includes('a') || firstFormat.includes('A')) && use12Hours === undefined) {
+ showTimeObj.use12Hours = true;
+ }
+ }
+
+ if (picker === 'time') {
+ return showTimeObj;
+ }
+
+ return {
+ showTime: showTimeObj,
+ };
+}
+
+type InjectDefaultProps = Omit<
+ Props,
+ | 'locale'
+ | 'generateConfig'
+ | 'prevIcon'
+ | 'nextIcon'
+ | 'superPrevIcon'
+ | 'superNextIcon'
+ | 'hideHeader'
+ | 'components'
+> & {
+ locale?: PickerLocale;
+ size?: SizeType;
+ bordered?: boolean;
+};
+
+export type PickerLocale = {
+ lang: RcPickerLocale & AdditionalPickerLocaleLangProps;
+ timePickerLocale: TimePickerLocale;
+} & AdditionalPickerLocaleProps;
+
+export type AdditionalPickerLocaleProps = {
+ dateFormat?: string;
+ dateTimeFormat?: string;
+ weekFormat?: string;
+ monthFormat?: string;
+};
+
+export type AdditionalPickerLocaleLangProps = {
+ placeholder: string;
+ yearPlaceholder?: string;
+ quarterPlaceholder?: string;
+ monthPlaceholder?: string;
+ weekPlaceholder?: string;
+ rangeYearPlaceholder?: [string, string];
+ rangeMonthPlaceholder?: [string, string];
+ rangeWeekPlaceholder?: [string, string];
+ rangePlaceholder?: [string, string];
+};
+
+// Picker Props
+export type PickerBaseProps = InjectDefaultProps>;
+export type PickerDateProps = InjectDefaultProps>;
+export type PickerTimeProps = InjectDefaultProps>;
+
+export type PickerProps =
+ | PickerBaseProps
+ | PickerDateProps
+ | PickerTimeProps;
+
+// Range Picker Props
+export type RangePickerBaseProps = InjectDefaultProps>;
+export type RangePickerDateProps = InjectDefaultProps>;
+export type RangePickerTimeProps = InjectDefaultProps>;
+
+export type RangePickerProps =
+ | RangePickerBaseProps
+ | RangePickerDateProps
+ | RangePickerTimeProps;
+
+function generatePicker(generateConfig: GenerateConfig) {
+ // =========================== Picker ===========================
+ const { DatePicker, WeekPicker, MonthPicker, YearPicker, TimePicker } = generateSinglePicker(
+ generateConfig,
+ );
+
+ // ======================== Range Picker ========================
+ const RangePicker = generateRangePicker(generateConfig);
+
+ // =========================== Export ===========================
+ type MergedDatePicker = typeof DatePicker & {
+ WeekPicker: typeof WeekPicker;
+ MonthPicker: typeof MonthPicker;
+ YearPicker: typeof YearPicker;
+ RangePicker: React.ComponentClass>;
+ TimePicker: typeof TimePicker;
+ };
+
+ const MergedDatePicker = DatePicker as MergedDatePicker;
+ MergedDatePicker.WeekPicker = WeekPicker;
+ MergedDatePicker.MonthPicker = MonthPicker;
+ MergedDatePicker.YearPicker = YearPicker;
+ MergedDatePicker.RangePicker = RangePicker;
+ MergedDatePicker.TimePicker = TimePicker;
+
+ return MergedDatePicker;
+}
+
+export default generatePicker;
diff --git a/components/date-picker/style/index.less b/components/date-picker/style/index.less
index 222e35013f..de72a43278 100644
--- a/components/date-picker/style/index.less
+++ b/components/date-picker/style/index.less
@@ -126,15 +126,35 @@
}
&-separator {
+ position: relative;
display: inline-block;
- align-self: center;
- width: 2em;
+ width: 1em;
height: @font-size-lg;
- color: @disabled-color;
- font-size: @font-size-lg;
- line-height: @font-size-lg;
- text-align: center;
+ vertical-align: top;
cursor: default;
+
+ &::before,
+ &::after {
+ position: absolute;
+ border-top: 1px solid #979797;
+ content: '';
+ }
+
+ &::before {
+ top: 50%;
+ left: 0.1em;
+ width: 0.8em;
+ }
+
+ &::after {
+ top: 50%;
+ right: 0.11em;
+ width: 0.8em;
+ width: 0.3em;
+ transform: rotate(45deg);
+ transform-origin: 100% 100%;
+ }
+
.@{picker-prefix-cls}-range-separator & {
.@{picker-prefix-cls}-disabled & {
cursor: not-allowed;
@@ -174,6 +194,12 @@
opacity: 1;
}
}
+
+ &-separator {
+ align-items: center;
+ padding: 0 @padding-xs;
+ line-height: 1;
+ }
}
// ======================= Dropdown =======================
diff --git a/components/form/__tests__/__snapshots__/demo.test.js.snap b/components/form/__tests__/__snapshots__/demo.test.js.snap
index f5ea9f8fd2..eba1c41ea2 100644
--- a/components/form/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/form/__tests__/__snapshots__/demo.test.js.snap
@@ -3552,10 +3552,9 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
class="ant-picker-range-separator"
>
- →
-
+ />
+ 26
+
+
- 6
-
-
- →
-
+ />
any | - |
| required | Whether provided or not, it will be generated by the validation rule | boolean | false |
| rules | Rules for field validation. Click [here](#components-form-demo-basic) to see an example | [Rule](#Rule)[] | - |
-| shouldUpdate | Custom field update logic. See [bellow](#shouldUpdate) | boolean \| (prevValue, curValue) => boolean | false |
+| shouldUpdate | Custom field update logic. See [below](#shouldUpdate) | boolean \| (prevValue, curValue) => boolean | false |
| trigger | When to collect the value of children node | string | onChange |
| validateFirst | Whether stop validate on first rule of error for this field | boolean | false |
| validateStatus | The validation status. If not provided, it will be generated by validation rule. options: 'success' 'warning' 'error' 'validating' | string | - |
diff --git a/components/input/__tests__/__snapshots__/demo.test.js.snap b/components/input/__tests__/__snapshots__/demo.test.js.snap
index c8fe97791a..d66d71c183 100644
--- a/components/input/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/input/__tests__/__snapshots__/demo.test.js.snap
@@ -700,10 +700,9 @@ exports[`renders ./components/input/demo/align.md correctly 1`] = `
class="ant-picker-range-separator"
>
- →
-
+ />
- 27
-
-
+ 8
+
+
- 27
-
-
+ 8
+
+
+ 26
+
+
- 7
-
-
+ 26
+
+
- 7
-
-
+ 30
+
+
- 11
-
-
+
+
+ 26
+
+
+
-
-
- 07
-
-
-
- 27
-
-
+ 8
+
+
- 27
-
-
+ 8
+
+
+ 25
+
+
+ 26
+
+
+ 27
+
+
+ 28
+
+
+ 29
+
+
+ 30
+
+
- 6
-
-
- 7
-
-
- 8
-
-
- 9
-
-
- 10
-
-
- 11
-
-
-
-
- 27
-
-
-
+
+
+ 08
+
+
+
- 27
-
-
+ 8
+
+
- 27
-
-
+ 8
+
+
+ 25
+
+
+ 26
+
+
+ 27
+
+
+ 28
+
+
+ 29
+
+
+ 30
+
+
- 6
-
-
- 7
-
-
- 8
-
-
- 9
-
-
- 10
-
-
- 11
-
-
-
-
- 27
-
-
-
+
+
+ 08
+
+
+
- 27
-
-
+ 8
+
+
- 27
-
-
+ 8
+
+
+ 25
+
+
+ 26
+
+
+ 27
+
+
+ 28
+
+
+ 29
+
+
+ 30
+
+
- 6
-
-
- 7
-
-
- 8
-
-
- 9
-
-
- 10
-
-
- 11
-
-
-
-
- 27
-
-
-
+
+
+ 08
+
+
+
- 27
-
-
+ 8
+
+
- 27
-
-
+ 8
+
+
+ 25
+
+
+ 26
+
+
+ 27
+
+
+ 28
+
+
+ 29
+
+
+ 30
+
+
- 6
-
-
- 7
-
-
- 8
-
-
- 9
-
-
- 10
-
-
- 11
-
-
-
-
- 27
-
-
-
+
+
+ 08
+
+
+
- 27
-
-
+ 8
+
+
- 27
-
-
+ 8
+
+
+ 25
+
+
+ 26
+
+
+ 27
+
+
+ 28
+
+
+ 29
+
+
+ 30
+
+
- 6
-
-
- 7
-
-
- 8
-
-
- 9
-
-
- 10
-
-
- 11
-
-
-
-
- 27
-
-
-
+
+
+ 08
+
+
+
- 27
-
-
+ 8
+
+
- 27
-
-
+ 8
+
+
+ 25
+
+
+ 26
+
+
+ 27
+
+
+ 28
+
+
+ 29
+
+
+ 30
+
+
- 6
-
-
- 7
-
-
- 8
-
-
- 9
-
-
- 10
-
-
- 11
-
-
-
-
- 27
-
-
-
+
+
+ 08
+
+
+
- 27
-
-
+ 8
+
+
- 27
-
-
+ 8
+
+
+ 25
+
+
+ 26
+
+
+ 27
+
+
+ 28
+
+
+ 29
+
+
+ 30
+
+
- 6
-
-
- 7
-
-
- 8
-
-
- 9
-
-
- 10
-
-
- 11
-
-
-
-
- 27
-
-
-
+
+
+ 08
+
+
+
- 27
-
-
+ 8
+
+
- 27
-
-
+ 8
+
+
+ 25
+
+
+ 26
+
+
+ 27
+
+
+ 28
+
+
+ 29
+
+
+ 30
+
+
- 6
-
-
- 7
-
-
- 8
-
-
- 9
-
-
- 10
-
-
- 11
-
-
-
-
- 27
-
-
-
+
+
+ 08
+
+
+
- 27
-
-
+ 8
+
+
- 27
-
-
+ 8
+
+
+ 25
+
+
+ 26
+
+
+ 27
+
+
+ 28
+
+
+ 29
+
+
+ 30
+
+
- 6
-
-
- 7
-
-
- 8
-
-
- 9
-
-
- 10
-
-
- 11
-
-
-
-
- 27
-
-
-
+
+
+ 08
+
+
+
- 27
-
-
+ 8
+
+
- 27
-
-
+ 8
+
+
+ 25
+
+
+ 26
+
+
+ 27
+
+
+ 28
+
+
+ 29
+
+
+ 30
+
+
- 6
-
-
- 7
-
-
- 8
-
-
- 9
-
-
- 10
-
-
- 11
-
-
-
-
- 27
-
-
-
+
+
+ 08
+
+
+
+ 26
+
+
- 7
-
-
+ 26
+
+
- 7
-
-
+ 30
+
+
- 11
-
-
+
+
+ 26
+
+
+
-
-
- 07
-
-
-
- 27
-
-
+ 8
+
+
- 27
-
-
+ 8
+
+
+ 25
+
+
+ 26
+
+
+ 27
+
+
+ 28
+
+
+ 29
+
+
+ 30
+
+
- 6
-
-
- 7
-
-
- 8
-
-
- 9
-
-
- 10
-
-
- 11
-
-
-
-
- 27
-
-
-
+
+
+ 08
+
+
+
- 27
-
-
+ 8
+
+
- 27
-
-
+ 8
+
+
+ 25
+
+
+ 26
+
+
+ 27
+
+
+ 28
+
+
+ 29
+
+
+ 30
+
+
- 6
-
-
- 7
-
-
- 8
-
-
- 9
-
-
- 10
-
-
- 11
-
-
-
-
- 27
-
-
-
+
+
+ 08
+
+
+
- 27
-
-
+ 8
+
+
- 27
-
-
+ 8
+
+
+ 25
+
+
+ 26
+
+
+ 27
+
+
+ 28
+
+
+ 29
+
+
+ 30
+
+
- 6
-
-
- 7
-
-
- 8
-
-
- 9
-
-
- 10
-
-
- 11
-
-
-
-
- 27
-
-
-
+
+
+ 08
+
+
+
- →
-
+ />
- 27
-
-
+ 8
+
+
- 27
-
-
+ 8
+
+
+ 25
+
+
+ 26
+
+
+ 27
+
+
+ 28
+
+
+ 29
+
+
+ 30
+
+
- 6
-
-
- 7
-
-
- 8
-
-
- 9
-
-
- 10
-
-
- 11
-
-
-
-
- 27
-
-
-
+
+
+ 08
+
+
+
- 27
-
-
+ 8
+
+
- 27
-
-
+ 8
+
+
+ 25
+
+
+ 26
+
+
+ 27
+
+
+ 28
+
+
+ 29
+
+
+ 30
+
+
- 6
-
-
- 7
-
-
- 8
-
-
- 9
-
-
- 10
-
-
- 11
-
-
-
-
- 27
-
-
-
+
+
+ 08
+
+
+
- 27
-
-
+ 8
+
+
- 27
-
-
+ 8
+
+
+ 25
+
+
+ 26
+
+
+ 27
+
+
+ 28
+
+
+ 29
+
+
+ 30
+
+
- 6
-
-
- 7
-
-
- 8
-
-
- 9
-
-
- 10
-
-
- 11
-
-
-
-
- 27
-
-
-
+
+
+ 08
+
+
+
- 27
-
-
+ 8
+
+
- 27
-
-
+ 8
+
+
+ 25
+
+
+ 26
+
+
+ 27
+
+
+ 28
+
+
+ 29
+
+
+ 30
+
+
- 6
-
-
- 7
-
-
- 8
-
-
- 9
-
-
- 10
-
-
- 11
-
-
-
-
- 27
-
-
-
+
+
+ 08
+
+
+
- 27
-
-
+ 8
+
+
- 27
-
-
+ 8
+
+
+ 25
+
+
+ 26
+
+
+ 27
+
+
+ 28
+
+
+ 29
+
+
+ 30
+
+
- 6
-
-
- 7
-
-
- 8
-
-
- 9
-
-
- 10
-
-
- 11
-
-
-
-
- 27
-
-
-
+
+
+ 08
+
+
+
- 27
-
-
+ 8
+
+
- 27
-
-
+ 8
+
+
+ 25
+
+
+ 26
+
+
+ 27
+
+
+ 28
+
+
+ 29
+
+
+ 30
+
+
- 6
-
-
- 7
-
-
- 8
-
-
- 9
-
-
- 10
-
-
- 11
-
-
-
-
- 27
-
-
-
+
+
+ 08
+
+
+
- →
-
+ />
- →
-
+ />
+ 26
+
+
- 7
-
-
+ 26
+
+
- 7
-
-
+ 30
+
+
- 11
-
-
+
+
+ 26
+
+
+
-
-
- 07
-
-
-
- 27
-
-
+ 8
+
+
- 27
-
-
+ 8
+
+
+ 25
+
+
+ 26
+
+
+ 27
+
+
+ 28
+
+
+ 29
+
+
+ 30
+
+
- 6
-
-
- 7
-
-
- 8
-
-
- 9
-
-
- 10
-
-
- 11
-
-
-
-
- 27
-
-
-
+
+
+ 08
+
+
+
- 27
-
-
+ 8
+
+
- 27
-
-
+ 8
+
+
+ 25
+
+
+ 26
+
+
+ 27
+
+
+ 28
+
+
+ 29
+
+
+ 30
+
+
- 6
-
-
- 7
-
-
- 8
-
-
- 9
-
-
- 10
-
-
- 11
-
-
-
-
- 27
-
-
-
+
+
+ 08
+
+
+
- 27
-
-
+ 8
+
+
- 27
-
-
+ 8
+
+
+ 25
+
+
+ 26
+
+
+ 27
+
+
+ 28
+
+
+ 29
+
+
+ 30
+
+
- 6
-
-
- 7
-
-
- 8
-
-
- 9
-
-
- 10
-
-
- 11
-
-
-
-
- 27
-
-
-
+
+
+ 08
+
+
+
- 27
-
-
+ 8
+
+
- 27
-
-
+ 8
+
+
+ 25
+
+
+ 26
+
+
+ 27
+
+
+ 28
+
+
+ 29
+
+
+ 30
+
+
- 6
-
-
- 7
-
-
- 8
-
-
- 9
-
-
- 10
-
-
- 11
-
-
-
-
- 27
-
-
-
+
+
+ 08
+
+
+
- 27
-
-
+ 8
+
+
- 27
-
-
+ 8
+
+
+ 25
+
+
+ 26
+
+
+ 27
+
+
+ 28
+
+
+ 29
+
+
+ 30
+
+
- 6
-
-
- 7
-
-
- 8
-
-
- 9
-
-
- 10
-
-
- 11
-
-
-
-
- 27
-
-
-
+
+
+ 08
+
+
+
- 27
-
-
+ 8
+
+
- 27
-
-
+ 8
+
+
+ 25
+
+
+ 26
+
+
+ 27
+
+
+ 28
+
+
+ 29
+
+
+ 30
+
+
- 6
-
-
- 7
-
-
- 8
-
-
- 9
-
-
- 10
-
-
- 11
-
-
-
-
- 27
-
-
-
+
+
+ 08
+
+
+
- 27
-
-
+ 8
+
+
- 27
-
-
+ 8
+
+
+ 25
+
+
+ 26
+
+
+ 27
+
+
+ 28
+
+
+ 29
+
+
+ 30
+
+
- 6
-
-
- 7
-
-
- 8
-
-
- 9
-
-
- 10
-
-
- 11
-
-
-
-
- 27
-
-
-
+
+
+ 08
+
+
+
- 27
-
-
+ 8
+
+
- 27
-
-
+ 8
+
+
+ 25
+
+
+ 26
+
+
+ 27
+
+
+ 28
+
+
+ 29
+
+
+ 30
+
+
- 6
-
-
- 7
-
-
- 8
-
-
- 9
-
-
- 10
-
-
- 11
-
-
-
-
- 27
-
-
-
+
+
+ 08
+
+
+
- 27
-
-
+ 8
+
+
- 27
-
-
+ 8
+
+
+ 25
+
+
+ 26
+
+
+ 27
+
+
+ 28
+
+
+ 29
+
+
+ 30
+
+
- 6
-
-
- 7
-
-
- 8
-
-
- 9
-
-
- 10
-
-
- 11
-
-
-
-
- 27
-
-
-
+
+
+ 08
+
+
+
- 27
-
-
+ 8
+
+
- 27
-
-
+ 8
+
+
+ 25
+
+
+ 26
+
+
+ 27
+
+
+ 28
+
+
+ 29
+
+
+ 30
+
+
- 6
-
-
- 7
-
-
- 8
-
-
- 9
-
-
- 10
-
-
- 11
-
-
-
-
- 27
-
-
-
+
+
+ 08
+
+
+
- 27
-
-
+ 8
+
+
- 27
-
-
+ 8
+
+
+ 25
+
+
+ 26
+
+
+ 27
+
+
+ 28
+
+
+ 29
+
+
+ 30
+
+
- 6
-
-
- 7
-
-
- 8
-
-
- 9
-
-
- 10
-
-
- 11
-
-
-
-
- 27
-
-
-
+
+
+ 08
+
+
+
- 27
-
-
+ 8
+
+
- 27
-
-
+ 8
+
+
+ 25
+
+
+ 26
+
+
+ 27
+
+
+ 28
+
+
+ 29
+
+
+ 30
+
+
- 6
-
-
- 7
-
-
- 8
-
-
- 9
-
-
- 10
-
-
- 11
-
-
-
-
- 27
-
-
-
+
+
+ 08
+
+
+
- 27
-
-
+ 8
+
+
- 27
-
-
+ 8
+
+
+ 25
+
+
+ 26
+
+
+ 27
+
+
+ 28
+
+
+ 29
+
+
+ 30
+
+
- 6
-
-
- 7
-
-
- 8
-
-
- 9
-
-
- 10
-
-
- 11
-
-
-
-
- 27
-
-
-
+
+
+ 08
+
+
+
- 27
-
-
+ 8
+
+
- 27
-
-
+ 8
+
+
+ 25
+
+
+ 26
+
+
+ 27
+
+
+ 28
+
+
+ 29
+
+
+ 30
+
+
- 6
-
-
- 7
-
-
- 8
-
-
- 9
-
-
- 10
-
-
- 11
-
-
-
-
- 27
-
-
-
+
+
+ 08
+
+
+
- →
-
+ />
- 27
-
-
+ 8
+
+
- 27
-
-
+ 8
+
+
+ 25
+
+
+ 26
+
+
+ 27
+
+
+ 28
+
+
+ 29
+
+
+ 30
+
+
- 6
-
-
- 7
-
-
- 8
-
-
- 9
-
-
- 10
-
-
- 11
-
-
-
-
- 27
-
-
-
+
+
+ 08
+
+
+
- 27
-
-
+ 8
+
+
- 27
-
-
+ 8
+
+
+ 25
+
+
+ 26
+
+
+ 27
+
+
+ 28
+
+
+ 29
+
+
+ 30
+
+
- 6
-
-
- 7
-
-
- 8
-
-
- 9
-
-
- 10
-
-
- 11
-
-
-
-
- 27
-
-
-
+
+
+ 08
+
+
+
- 27
-
-
+ 8
+
+
- 27
-
-
+ 8
+
+
+ 25
+
+
+ 26
+
+
+ 27
+
+
+ 28
+
+
+ 29
+
+
+ 30
+
+
- 6
-
-
- 7
-
-
- 8
-
-
- 9
-
-
- 10
-
-
- 11
-
-
-
-
- 27
-
-
-
+
+
+ 08
+
+
+
- 27
-
-
+ 8
+
+
- 27
-
-
+ 8
+
+
+ 25
+
+
+ 26
+
+
+ 27
+
+
+ 28
+
+
+ 29
+
+
+ 30
+
+
- 6
-
-
- 7
-
-
- 8
-
-
- 9
-
-
- 10
-
-
- 11
-
-
-
-
- 27
-
-
-
+
+
+ 08
+
+
+ {} } };
function getDropdownWrapper(wrapper) {
- return mount(
- wrapper
- .find('Trigger')
- .instance()
- .getComponent(),
- );
+ return mount(wrapper.find('Trigger').instance().getComponent());
}
describe('Table.filter', () => {
@@ -62,6 +57,18 @@ describe('Table.filter', () => {
return wrapper.find('BodyRow').map(row => row.props().record.name);
}
+ it('not show filter icon when undefined', () => {
+ const noFilterColumn = { ...column, filters: undefined };
+ delete noFilterColumn.onFilter;
+ const wrapper = mount(
+ createTable({
+ columns: [noFilterColumn],
+ }),
+ );
+
+ expect(wrapper.find('.ant-table-filter-column')).toHaveLength(0);
+ });
+
it('renders filter correctly', () => {
const wrapper = mount(createTable());
@@ -213,7 +220,10 @@ describe('Table.filter', () => {
expect(wrapper.find('FilterDropdown').props().filterState.filteredKeys).toBeFalsy();
wrapper.find('FilterDropdown').find('input[type="checkbox"]').first().simulate('click');
- wrapper.find('FilterDropdown').find('.ant-table-filter-dropdown-btns .ant-btn-primary').simulate('click');
+ wrapper
+ .find('FilterDropdown')
+ .find('.ant-table-filter-dropdown-btns .ant-btn-primary')
+ .simulate('click');
expect(wrapper.find('FilterDropdown').props().filterState.filteredKeys).toEqual(['boy']);
wrapper.setProps({ dataSource: [...data, { key: 999, name: 'Chris' }] });
expect(wrapper.find('FilterDropdown').props().filterState.filteredKeys).toEqual(['boy']);
@@ -342,7 +352,10 @@ describe('Table.filter', () => {
const wrapper = mount(createTable({ onChange: handleChange }));
wrapper.find('.ant-dropdown-trigger').first().simulate('click');
wrapper.find('FilterDropdown').find('MenuItem').first().simulate('click');
- wrapper.find('FilterDropdown').find('.ant-table-filter-dropdown-btns .ant-btn-primary').simulate('click');
+ wrapper
+ .find('FilterDropdown')
+ .find('.ant-table-filter-dropdown-btns .ant-btn-primary')
+ .simulate('click');
expect(handleChange).toHaveBeenCalledWith(
{},
{ name: ['boy'] },
@@ -358,12 +371,15 @@ describe('Table.filter', () => {
const wrapper = mount(createTable({ pagination: { onChange: onPaginationChange } }));
wrapper.find('.ant-dropdown-trigger').first().simulate('click');
wrapper.find('FilterDropdown').find('MenuItem').first().simulate('click');
- wrapper.find('FilterDropdown').find('.ant-table-filter-dropdown-btns .ant-btn-primary').simulate('click');
+ wrapper
+ .find('FilterDropdown')
+ .find('.ant-table-filter-dropdown-btns .ant-btn-primary')
+ .simulate('click');
expect(onPaginationChange).toHaveBeenCalledWith(1, 10);
});
- it('should not fire change event on close filterDropdown without changing anything', () => {
+ it('should not fire change event when close filterDropdown without changing anything', () => {
const handleChange = jest.fn();
const wrapper = mount(createTable({ onChange: handleChange }));
@@ -373,6 +389,26 @@ describe('Table.filter', () => {
expect(handleChange).not.toHaveBeenCalled();
});
+ it('should not fire change event when close a filtered filterDropdown without changing anything', () => {
+ const handleChange = jest.fn();
+ const wrapper = mount(
+ createTable({
+ onChange: handleChange,
+ columns: [
+ {
+ ...column,
+ defaultFilteredValue: ['boy', 'designer'],
+ },
+ ],
+ }),
+ );
+
+ wrapper.find('.ant-dropdown-trigger').first().simulate('click');
+ wrapper.find('.ant-table-filter-dropdown-btns .ant-btn-primary').simulate('click');
+
+ expect(handleChange).not.toHaveBeenCalled();
+ });
+
it('three levels menu', () => {
const filters = [
{ text: 'Upper', value: 'Upper' },
@@ -410,29 +446,17 @@ describe('Table.filter', () => {
let dropdownWrapper = getDropdownWrapper(wrapper);
expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry']);
// select
- dropdownWrapper
- .find('.ant-dropdown-menu-submenu-title')
- .at(0)
- .simulate('mouseEnter');
+ dropdownWrapper.find('.ant-dropdown-menu-submenu-title').at(0).simulate('mouseEnter');
jest.runAllTimers();
dropdownWrapper = getDropdownWrapper(wrapper);
- dropdownWrapper
- .find('.ant-dropdown-menu-submenu-title')
- .at(1)
- .simulate('mouseEnter');
+ dropdownWrapper.find('.ant-dropdown-menu-submenu-title').at(1).simulate('mouseEnter');
jest.runAllTimers();
dropdownWrapper = getDropdownWrapper(wrapper);
- dropdownWrapper
- .find('MenuItem')
- .last()
- .simulate('click');
+ dropdownWrapper.find('MenuItem').last().simulate('click');
dropdownWrapper.find('.ant-table-filter-dropdown-btns .ant-btn-primary').simulate('click');
wrapper.update();
expect(renderedNames(wrapper)).toEqual(['Jack']);
- dropdownWrapper
- .find('MenuItem')
- .last()
- .simulate('click');
+ dropdownWrapper.find('MenuItem').last().simulate('click');
jest.useRealTimers();
});
@@ -1060,12 +1084,9 @@ describe('Table.filter', () => {
expect(wrapper.find('.ant-table-filter-dropdown-btns .ant-btn-primary').text()).toEqual(
'Bamboo',
);
- expect(
- wrapper
- .find('.ant-table-filter-dropdown-btns .ant-btn-link')
- .last()
- .text(),
- ).toEqual('Reset');
+ expect(wrapper.find('.ant-table-filter-dropdown-btns .ant-btn-link').last().text()).toEqual(
+ 'Reset',
+ );
});
it('filtered should work', () => {
diff --git a/components/table/__tests__/Table.rowSelection.test.js b/components/table/__tests__/Table.rowSelection.test.js
index d506fe55e0..2c70a211a5 100644
--- a/components/table/__tests__/Table.rowSelection.test.js
+++ b/components/table/__tests__/Table.rowSelection.test.js
@@ -429,6 +429,7 @@ describe('Table.rowSelection', () => {
const wrapper = render(
createTable({
rowSelection: { fixed: true },
+ scroll: { x: 903 },
}),
);
@@ -444,6 +445,7 @@ describe('Table.rowSelection', () => {
},
},
rowSelection: { fixed: true },
+ scroll: { x: 903 },
}),
);
@@ -461,6 +463,7 @@ describe('Table.rowSelection', () => {
fixed: 'left',
},
],
+ scroll: { x: 903 },
}),
);
diff --git a/components/table/__tests__/Table.sorter.test.js b/components/table/__tests__/Table.sorter.test.js
index d7e97b4950..0a38818f1c 100644
--- a/components/table/__tests__/Table.sorter.test.js
+++ b/components/table/__tests__/Table.sorter.test.js
@@ -155,38 +155,37 @@ describe('Table.sorter', () => {
jest.useFakeTimers();
const wrapper = mount(createTable({}));
// default show sorter tooltip
- wrapper.find('.ant-table-column-sorters').simulate('mouseenter');
+ wrapper.find('.ant-table-column-sorters-with-tooltip').simulate('mouseenter');
jest.runAllTimers();
wrapper.update();
expect(wrapper.find('.ant-tooltip-open').length).toBeTruthy();
- wrapper.find('.ant-table-column-sorters').simulate('mouseout');
+ wrapper.find('.ant-table-column-sorters-with-tooltip').simulate('mouseout');
+
// set table props showSorterTooltip is false
wrapper.setProps({ showSorterTooltip: false });
- wrapper.find('.ant-table-column-sorters').simulate('mouseenter');
+ expect(wrapper.find('.ant-table-column-sorters-with-tooltip')).toHaveLength(0);
jest.runAllTimers();
wrapper.update();
- expect(wrapper.find('.ant-tooltip-open').length).toBeFalsy();
- wrapper.find('.ant-table-column-sorters').simulate('mouseout');
+ expect(wrapper.find('.ant-tooltip-open')).toHaveLength(0);
// set table props showSorterTooltip is false, column showSorterTooltip is true
wrapper.setProps({
showSorterTooltip: false,
columns: [{ ...column, showSorterTooltip: true }],
});
- wrapper.find('.ant-table-column-sorters').simulate('mouseenter');
+ wrapper.find('.ant-table-column-sorters-with-tooltip').simulate('mouseenter');
jest.runAllTimers();
wrapper.update();
expect(wrapper.find('.ant-tooltip-open').length).toBeTruthy();
- wrapper.find('.ant-table-column-sorters').simulate('mouseout');
+ wrapper.find('.ant-table-column-sorters-with-tooltip').simulate('mouseout');
// set table props showSorterTooltip is true, column showSorterTooltip is false
wrapper.setProps({
showSorterTooltip: true,
columns: [{ ...column, showSorterTooltip: false }],
});
- wrapper.find('.ant-table-column-sorters').simulate('mouseenter');
+ expect(wrapper.find('.ant-table-column-sorters-with-tooltip')).toHaveLength(0);
jest.runAllTimers();
wrapper.update();
- expect(wrapper.find('.ant-tooltip-open').length).toBeFalsy();
- wrapper.find('.ant-table-column-sorters').simulate('mouseout');
+ expect(wrapper.find('.ant-tooltip-open')).toHaveLength(0);
});
it('works with grouping columns in controlled mode', () => {
diff --git a/components/table/__tests__/__snapshots__/Table.rowSelection.test.js.snap b/components/table/__tests__/__snapshots__/Table.rowSelection.test.js.snap
index fdaed4b68b..eacf3cffbf 100644
--- a/components/table/__tests__/__snapshots__/Table.rowSelection.test.js.snap
+++ b/components/table/__tests__/__snapshots__/Table.rowSelection.test.js.snap
@@ -11,16 +11,17 @@ exports[`Table.rowSelection fix expand on th left when selection column fixed on
class="ant-spin-container"
>
+
AntV 提供了一套默认的图表颜色，包括颜色的用法，
diff --git a/docs/spec/visualization-page.md b/docs/spec/visualization-page.md
index aadbeb3da9..001f8d3d26 100644
--- a/docs/spec/visualization-page.md
+++ b/docs/spec/visualization-page.md
@@ -169,7 +169,7 @@ title:
#### 选择正确的色板
-
+