Merge 68e3e41 into 4f2b53a

ant-design · Mar 15, 2022 · 54e0308 · 54e0308
2 parents 4f2b53a + 68e3e41
commit 54e0308
Show file tree

Hide file tree

Showing 11 changed files with 7,069 additions and 32 deletions.
diff --git a/components/date-picker/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/date-picker/__tests__/__snapshots__/demo-extend.test.ts.snap
diff --git a/components/date-picker/__tests__/__snapshots__/demo.test.js.snap b/components/date-picker/__tests__/__snapshots__/demo.test.js.snap
@@ -3780,6 +3780,7 @@ exports[`renders ./components/date-picker/demo/status.md correctly 1`] = `
   </div>
   <div
     class="ant-space-item"
+    style="margin-bottom:8px"
   >
     <div
       class="ant-picker ant-picker-status-warning"
@@ -3822,6 +3823,179 @@ exports[`renders ./components/date-picker/demo/status.md correctly 1`] = `
       </div>
     </div>
   </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
+    <div
+      class="ant-picker ant-picker-range ant-picker-status-error"
+      style="width:100%"
+    >
+      <div
+        class="ant-picker-input ant-picker-input-active"
+      >
+        <input
+          autocomplete="off"
+          placeholder="Start date"
+          readonly=""
+          size="12"
+          value=""
+        />
+      </div>
+      <div
+        class="ant-picker-range-separator"
+      >
+        <span
+          aria-label="to"
+          class="ant-picker-separator"
+        >
+          <span
+            aria-label="swap-right"
+            class="anticon anticon-swap-right"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="swap-right"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="0 0 1024 1024"
+              width="1em"
+            >
+              <path
+                d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"
+              />
+            </svg>
+          </span>
+        </span>
+      </div>
+      <div
+        class="ant-picker-input"
+      >
+        <input
+          autocomplete="off"
+          placeholder="End date"
+          readonly=""
+          size="12"
+          value=""
+        />
+      </div>
+      <div
+        class="ant-picker-active-bar"
+        style="left:0;width:0;position:absolute"
+      />
+      <span
+        class="ant-picker-suffix"
+      >
+        <span
+          aria-label="calendar"
+          class="anticon anticon-calendar"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="calendar"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <div
+      class="ant-picker ant-picker-range ant-picker-status-warning"
+      style="width:100%"
+    >
+      <div
+        class="ant-picker-input ant-picker-input-active"
+      >
+        <input
+          autocomplete="off"
+          placeholder="Start date"
+          readonly=""
+          size="12"
+          value=""
+        />
+      </div>
+      <div
+        class="ant-picker-range-separator"
+      >
+        <span
+          aria-label="to"
+          class="ant-picker-separator"
+        >
+          <span
+            aria-label="swap-right"
+            class="anticon anticon-swap-right"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="swap-right"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="0 0 1024 1024"
+              width="1em"
+            >
+              <path
+                d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"
+              />
+            </svg>
+          </span>
+        </span>
+      </div>
+      <div
+        class="ant-picker-input"
+      >
+        <input
+          autocomplete="off"
+          placeholder="End date"
+          readonly=""
+          size="12"
+          value=""
+        />
+      </div>
+      <div
+        class="ant-picker-active-bar"
+        style="left:0;width:0;position:absolute"
+      />
+      <span
+        class="ant-picker-suffix"
+      >
+        <span
+          aria-label="calendar"
+          class="anticon anticon-calendar"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="calendar"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </div>
 </div>
 `;
 

diff --git a/components/date-picker/demo/status.md b/components/date-picker/demo/status.md
@@ -21,6 +21,8 @@ const Status: React.FC = () => (
   <Space direction="vertical" style={{ width: '100%' }}>
     <DatePicker status="error" style={{ width: '100%' }} />
     <DatePicker status="warning" style={{ width: '100%' }} />
+    <DatePicker.RangePicker status="error" style={{ width: '100%' }} />
+    <DatePicker.RangePicker status="warning" style={{ width: '100%' }} />
   </Space>
 );
 

diff --git a/components/date-picker/generatePicker/generateRangePicker.tsx b/components/date-picker/generatePicker/generateRangePicker.tsx
@@ -6,13 +6,16 @@ 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';
 import LocaleReceiver from '../../locale-provider/LocaleReceiver';
 import { getRangePlaceholder, transPlacement2DropdownAlign } from '../util';
 import { RangePickerProps, PickerLocale, getTimeProps, Components } from '.';
 import { PickerComponentClass } from './interface';
+import { FormItemStatusContext } from '../../form/context';
+import { getFeedbackIcon, getMergedStatus, getStatusClassNames } from '../../_util/statusUtils';
 
 export default function generateRangePicker<DateType>(
   generateConfig: GenerateConfig<DateType>,
@@ -36,6 +39,23 @@ export default function generateRangePicker<DateType>(
       }
     };
 
+    renderFeedback = (prefixCls: string) => (
+      <FormItemStatusContext.Consumer>
+        {({ hasFeedback, status: contextStatus }) => {
+          const { status: customStatus } = this.props;
+          const status = getMergedStatus(contextStatus, customStatus);
+          return hasFeedback && getFeedbackIcon(prefixCls, status);
+        }}
+      </FormItemStatusContext.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;
@@ -47,6 +67,7 @@ export default function generateRangePicker<DateType>(
         size: customizeSize,
         bordered = true,
         placeholder,
+        status: customStatus,
         ...restProps
       } = this.props;
       const { format, showTime, picker } = this.props as any;
@@ -67,39 +88,48 @@ export default function generateRangePicker<DateType>(
             const mergedSize = customizeSize || size;
 
             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={picker === 'time' ? <ClockCircleOutlined /> : <CalendarOutlined />}
-                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,
-                  },
-                  className,
+              <FormItemStatusContext.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}
+                  />
                 )}
-                locale={locale!.lang}
-                prefixCls={prefixCls}
-                getPopupContainer={customGetPopupContainer || getPopupContainer}
-                generateConfig={generateConfig}
-                components={Components}
-                direction={direction}
-              />
+              </FormItemStatusContext.Consumer>
             );
           }}
         </SizeContext.Consumer>

diff --git a/components/date-picker/generatePicker/index.tsx b/components/date-picker/generatePicker/index.tsx
@@ -18,6 +18,7 @@ import { TimePickerLocale } from '../../time-picker';
 import generateSinglePicker from './generateSinglePicker';
 import generateRangePicker from './generateRangePicker';
 import { tuple } from '../../_util/type';
+import { InputStatus } from '../../_util/statusUtils';
 
 export const Components = { button: PickerButton, rangeItem: PickerTag };
 
@@ -81,6 +82,7 @@ type InjectDefaultProps<Props> = Omit<
   size?: SizeType;
   placement?: DataPickerPlacement;
   bordered?: boolean;
+  status?: InputStatus;
 };
 
 export type PickerLocale = {