refactor: feedbackIcon provided by form (#34712)

* refactor: feedbackIcon migration * test: update snapshot
ant-design · Mar 25, 2022 · 7c4e12f · 7c4e12f
1 parent 0de1e66
commit 7c4e12f
Show file tree

Hide file tree

Showing 25 changed files with 340 additions and 416 deletions.
diff --git a/components/_util/statusUtils.tsx b/components/_util/statusUtils.tsx
@@ -1,31 +1,10 @@
-import React from 'react';
-import CheckCircleFilled from '@ant-design/icons/CheckCircleFilled';
-import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
-import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
-import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
 import classNames from 'classnames';
 import { ValidateStatus } from '../form/FormItem';
 import { tuple } from './type';
 
 const InputStatuses = tuple('warning', 'error', '');
 export type InputStatus = typeof InputStatuses[number];
 
-const iconMap = {
-  success: CheckCircleFilled,
-  warning: ExclamationCircleFilled,
-  error: CloseCircleFilled,
-  validating: LoadingOutlined,
-};
-
-export const getFeedbackIcon = (prefixCls: string, status?: ValidateStatus) => {
-  const IconNode = status && iconMap[status];
-  return IconNode ? (
-    <span className={`${prefixCls}-feedback-icon`}>
-      <IconNode />
-    </span>
-  ) : null;
-};
-
 export function getStatusClassNames(
   prefixCls: string,
   status?: ValidateStatus,

diff --git a/components/cascader/index.tsx b/components/cascader/index.tsx
@@ -146,7 +146,12 @@ const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<Cas
   const isRtl = mergedDirection === 'rtl';
 
   // =================== Form =====================
-  const { status: contextStatus, hasFeedback, isFormItemInput } = useContext(FormItemInputContext);
+  const {
+    status: contextStatus,
+    hasFeedback,
+    isFormItemInput,
+    feedbackIcon,
+  } = useContext(FormItemInputContext);
   const mergedStatus = getMergedStatus(contextStatus, customStatus);
 
   // =================== Warning =====================
@@ -227,8 +232,8 @@ const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<Cas
   const mergedShowArrow = showArrow !== undefined ? showArrow : props.loading || !multiple;
   const { suffixIcon, removeIcon, clearIcon } = getIcons({
     ...props,
-    status: mergedStatus,
     hasFeedback,
+    feedbackIcon,
     showArrow: mergedShowArrow,
     multiple,
     prefixCls,

diff --git a/components/date-picker/generatePicker/generateRangePicker.tsx b/components/date-picker/generatePicker/generateRangePicker.tsx
@@ -6,7 +6,6 @@ import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
 import SwapRightOutlined from '@ant-design/icons/SwapRightOutlined';
 import { RangePicker as RCRangePicker } from 'rc-picker';
 import { GenerateConfig } from 'rc-picker/lib/generate/index';
-import { PickerMode } from 'rc-picker/lib/interface';
 import enUS from '../locale/en_US';
 import { ConfigContext, ConfigConsumerProps } from '../../config-provider';
 import SizeContext from '../../config-provider/SizeContext';
@@ -15,7 +14,7 @@ import { getRangePlaceholder, transPlacement2DropdownAlign } from '../util';
 import { RangePickerProps, PickerLocale, getTimeProps, Components } from '.';
 import { PickerComponentClass } from './interface';
 import { FormItemInputContext } from '../../form/context';
-import { getFeedbackIcon, getMergedStatus, getStatusClassNames } from '../../_util/statusUtils';
+import { getMergedStatus, getStatusClassNames } from '../../_util/statusUtils';
 
 export default function generateRangePicker<DateType>(
   generateConfig: GenerateConfig<DateType>,
@@ -39,23 +38,6 @@ export default function generateRangePicker<DateType>(
       }
     };
 
-    renderFeedback = (prefixCls: string) => (
-      <FormItemInputContext.Consumer>
-        {({ hasFeedback, status: contextStatus }) => {
-          const { status: customStatus } = this.props;
-          const status = getMergedStatus(contextStatus, customStatus);
-          return hasFeedback && getFeedbackIcon(prefixCls, status);
-        }}
-      </FormItemInputContext.Consumer>
-    );
-
-    renderSuffix = (prefixCls: string, mergedPicker?: PickerMode) => (
-      <>
-        {mergedPicker === 'time' ? <ClockCircleOutlined /> : <CalendarOutlined />}
-        {this.renderFeedback(prefixCls)}
-      </>
-    );
-
     renderPicker = (contextLocale: PickerLocale) => {
       const locale = { ...contextLocale, ...this.props.locale };
       const { getPrefixCls, direction, getPopupContainer } = this.context;
@@ -89,46 +71,55 @@ export default function generateRangePicker<DateType>(
 
             return (
               <FormItemInputContext.Consumer>
-                {({ hasFeedback, status: contextStatus }) => (
-                  <RCRangePicker<DateType>
-                    separator={
-                      <span aria-label="to" className={`${prefixCls}-separator`}>
-                        <SwapRightOutlined />
-                      </span>
-                    }
-                    ref={this.pickerRef}
-                    dropdownAlign={transPlacement2DropdownAlign(direction, placement)}
-                    placeholder={getRangePlaceholder(picker, locale, placeholder)}
-                    suffixIcon={this.renderSuffix(prefixCls, picker)}
-                    clearIcon={<CloseCircleFilled />}
-                    prevIcon={<span className={`${prefixCls}-prev-icon`} />}
-                    nextIcon={<span className={`${prefixCls}-next-icon`} />}
-                    superPrevIcon={<span className={`${prefixCls}-super-prev-icon`} />}
-                    superNextIcon={<span className={`${prefixCls}-super-next-icon`} />}
-                    allowClear
-                    transitionName={`${rootPrefixCls}-slide-up`}
-                    {...restProps}
-                    {...additionalOverrideProps}
-                    className={classNames(
-                      {
-                        [`${prefixCls}-${mergedSize}`]: mergedSize,
-                        [`${prefixCls}-borderless`]: !bordered,
-                      },
-                      getStatusClassNames(
-                        prefixCls,
-                        getMergedStatus(contextStatus, customStatus),
-                        hasFeedback,
-                      ),
-                      className,
-                    )}
-                    locale={locale!.lang}
-                    prefixCls={prefixCls}
-                    getPopupContainer={customGetPopupContainer || getPopupContainer}
-                    generateConfig={generateConfig}
-                    components={Components}
-                    direction={direction}
-                  />
-                )}
+                {({ hasFeedback, status: contextStatus, feedbackIcon }) => {
+                  const suffixNode = (
+                    <>
+                      {picker === 'time' ? <ClockCircleOutlined /> : <CalendarOutlined />}
+                      {hasFeedback && feedbackIcon}
+                    </>
+                  );
+
+                  return (
+                    <RCRangePicker<DateType>
+                      separator={
+                        <span aria-label="to" className={`${prefixCls}-separator`}>
+                          <SwapRightOutlined />
+                        </span>
+                      }
+                      ref={this.pickerRef}
+                      dropdownAlign={transPlacement2DropdownAlign(direction, placement)}
+                      placeholder={getRangePlaceholder(picker, locale, placeholder)}
+                      suffixIcon={suffixNode}
+                      clearIcon={<CloseCircleFilled />}
+                      prevIcon={<span className={`${prefixCls}-prev-icon`} />}
+                      nextIcon={<span className={`${prefixCls}-next-icon`} />}
+                      superPrevIcon={<span className={`${prefixCls}-super-prev-icon`} />}
+                      superNextIcon={<span className={`${prefixCls}-super-next-icon`} />}
+                      allowClear
+                      transitionName={`${rootPrefixCls}-slide-up`}
+                      {...restProps}
+                      {...additionalOverrideProps}
+                      className={classNames(
+                        {
+                          [`${prefixCls}-${mergedSize}`]: mergedSize,
+                          [`${prefixCls}-borderless`]: !bordered,
+                        },
+                        getStatusClassNames(
+                          prefixCls,
+                          getMergedStatus(contextStatus, customStatus),
+                          hasFeedback,
+                        ),
+                        className,
+                      )}
+                      locale={locale!.lang}
+                      prefixCls={prefixCls}
+                      getPopupContainer={customGetPopupContainer || getPopupContainer}
+                      generateConfig={generateConfig}
+                      components={Components}
+                      direction={direction}
+                    />
+                  );
+                }}
               </FormItemInputContext.Consumer>
             );
           }}

diff --git a/components/date-picker/generatePicker/generateSinglePicker.tsx b/components/date-picker/generatePicker/generateSinglePicker.tsx
@@ -22,12 +22,7 @@ import {
 } from '.';
 import { PickerComponentClass } from './interface';
 import { FormItemInputContext } from '../../form/context';
-import {
-  getFeedbackIcon,
-  getMergedStatus,
-  getStatusClassNames,
-  InputStatus,
-} from '../../_util/statusUtils';
+import { getMergedStatus, getStatusClassNames, InputStatus } from '../../_util/statusUtils';
 
 export default function generatePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
   type DatePickerProps = PickerProps<DateType> & {
@@ -68,23 +63,6 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
         }
       };
 
-      renderFeedback = (prefixCls: string) => (
-        <FormItemInputContext.Consumer>
-          {({ hasFeedback, status: contextStatus }) => {
-            const { status: customStatus } = this.props;
-            const status = getMergedStatus(contextStatus, customStatus);
-            return hasFeedback && getFeedbackIcon(prefixCls, status);
-          }}
-        </FormItemInputContext.Consumer>
-      );
-
-      renderSuffix = (prefixCls: string, mergedPicker?: PickerMode) => (
-        <>
-          {mergedPicker === 'time' ? <ClockCircleOutlined /> : <CalendarOutlined />}
-          {this.renderFeedback(prefixCls)}
-        </>
-      );
-
       renderPicker = (contextLocale: PickerLocale) => {
         const locale = { ...contextLocale, ...this.props.locale };
         const { getPrefixCls, direction, getPopupContainer } = this.context;
@@ -128,42 +106,51 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
 
               return (
                 <FormItemInputContext.Consumer>
-                  {({ hasFeedback, status: contextStatus }) => (
-                    <RCPicker<DateType>
-                      ref={this.pickerRef}
-                      placeholder={getPlaceholder(mergedPicker, locale, placeholder)}
-                      suffixIcon={this.renderSuffix(prefixCls, mergedPicker)}
-                      dropdownAlign={transPlacement2DropdownAlign(direction, placement)}
-                      clearIcon={<CloseCircleFilled />}
-                      prevIcon={<span className={`${prefixCls}-prev-icon`} />}
-                      nextIcon={<span className={`${prefixCls}-next-icon`} />}
-                      superPrevIcon={<span className={`${prefixCls}-super-prev-icon`} />}
-                      superNextIcon={<span className={`${prefixCls}-super-next-icon`} />}
-                      allowClear
-                      transitionName={`${rootPrefixCls}-slide-up`}
-                      {...additionalProps}
-                      {...restProps}
-                      {...additionalOverrideProps}
-                      locale={locale!.lang}
-                      className={classNames(
-                        {
-                          [`${prefixCls}-${mergedSize}`]: mergedSize,
-                          [`${prefixCls}-borderless`]: !bordered,
-                        },
-                        getStatusClassNames(
-                          prefixCls,
-                          getMergedStatus(contextStatus, customStatus),
-                          hasFeedback,
-                        ),
-                        className,
-                      )}
-                      prefixCls={prefixCls}
-                      getPopupContainer={customizeGetPopupContainer || getPopupContainer}
-                      generateConfig={generateConfig}
-                      components={Components}
-                      direction={direction}
-                    />
-                  )}
+                  {({ hasFeedback, status: contextStatus, feedbackIcon }) => {
+                    const suffixNode = (
+                      <>
+                        {mergedPicker === 'time' ? <ClockCircleOutlined /> : <CalendarOutlined />}
+                        {hasFeedback && feedbackIcon}
+                      </>
+                    );
+
+                    return (
+                      <RCPicker<DateType>
+                        ref={this.pickerRef}
+                        placeholder={getPlaceholder(mergedPicker, locale, placeholder)}
+                        suffixIcon={suffixNode}
+                        dropdownAlign={transPlacement2DropdownAlign(direction, placement)}
+                        clearIcon={<CloseCircleFilled />}
+                        prevIcon={<span className={`${prefixCls}-prev-icon`} />}
+                        nextIcon={<span className={`${prefixCls}-next-icon`} />}
+                        superPrevIcon={<span className={`${prefixCls}-super-prev-icon`} />}
+                        superNextIcon={<span className={`${prefixCls}-super-next-icon`} />}
+                        allowClear
+                        transitionName={`${rootPrefixCls}-slide-up`}
+                        {...additionalProps}
+                        {...restProps}
+                        {...additionalOverrideProps}
+                        locale={locale!.lang}
+                        className={classNames(
+                          {
+                            [`${prefixCls}-${mergedSize}`]: mergedSize,
+                            [`${prefixCls}-borderless`]: !bordered,
+                          },
+                          getStatusClassNames(
+                            prefixCls,
+                            getMergedStatus(contextStatus, customStatus),
+                            hasFeedback,
+                          ),
+                          className,
+                        )}
+                        prefixCls={prefixCls}
+                        getPopupContainer={customizeGetPopupContainer || getPopupContainer}
+                        generateConfig={generateConfig}
+                        components={Components}
+                        direction={direction}
+                      />
+                    );
+                  }}
                 </FormItemInputContext.Consumer>
               );
             }}

diff --git a/components/date-picker/style/status.less b/components/date-picker/style/status.less
@@ -21,10 +21,6 @@
       .active(@text-color, @hoverBorderColor, @outlineColor);
     }
   }
-
-  .@{picker-prefix-cls}-feedback-icon {
-    color: @text-color;
-  }
 }
 
 .@{picker-prefix-cls} {
@@ -35,18 +31,4 @@
   &-status-warning {
     .picker-status-color(@warning-color, @warning-color, @input-bg, @warning-color-hover, @warning-color-outline);
   }
-
-  &-status-validating {
-    .@{picker-prefix-cls}-feedback-icon {
-      display: inline-block;
-      color: @primary-color;
-    }
-  }
-
-  &-status-success {
-    .@{picker-prefix-cls}-feedback-icon {
-      color: @success-color;
-      animation-name: diffZoomIn1 !important;
-    }
-  }
 }