Merge branch 'refactor-date' of github.com:vueComponent/ant-design-vue into refactor-date

2021-08-12 13:02:03 +08:00 · 2021-08-12 13:02:03 +08:00 · c153d560fc
parent deca1546d7 eda5362782
commit c153d560fc
3 changed files with 218 additions and 256 deletions
--- a/components/date-picker/generatePicker/generateRangePicker.tsx
+++ b/components/date-picker/generatePicker/generateRangePicker.tsx
@ -7,30 +7,27 @@ import type { GenerateConfig } from '../../vc-picker/generate/index';
 import enUS from '../locale/en_US';
 import { useLocaleReceiver } from '../../locale-provider/LocaleReceiver';
 import { getRangePlaceholder } from '../util';
-import type { RangePickerProps } from '.';
 import { getTimeProps, Components } from '.';
 import { computed, defineComponent, ref } from 'vue';
 import useConfigInject from '../../_util/hooks/useConfigInject';
 import classNames from '../../_util/classNames';
-import type { ExtraRangePickerProps } from './props';
 import { commonProps, rangePickerProps } from './props';
 import type { PanelMode, RangeValue } from '../../vc-picker/interface';
 import type { RangePickerSharedProps } from '../../vc-picker/RangePicker';
 import devWarning from '../../vc-util/devWarning';

-export default function generateRangePicker<DateType>(
+export default function generateRangePicker<DateType, ExtraProps extends {} = {}>(
  generateConfig: GenerateConfig<DateType>,
-  extraProps: Record<string, any> = {},
+  extraProps: ExtraProps,
 ) {
-  const RangePicker = defineComponent<RangePickerProps<DateType> & ExtraRangePickerProps<DateType>>(
-    {
+  const RangePicker = defineComponent({
    name: 'ARangePicker',
    inheritAttrs: false,
    props: {
      ...commonProps<DateType>(),
      ...rangePickerProps<DateType>(),
      ...extraProps,
-      } as any,
+    },
    slots: [
      'suffixIcon',
      // 'clearIcon',
@ -56,7 +53,7 @@ export default function generateRangePicker<DateType>(
    ],
    setup(props, { expose, slots, attrs, emit }) {
      devWarning(
-          !(attrs as any).getCalendarContainer,
+        !attrs.getCalendarContainer,
        'DatePicker',
        '`getCalendarContainer` is deprecated. Please use `getPopupContainer"` instead.',
      );
@ -85,7 +82,7 @@ export default function generateRangePicker<DateType>(
        emit('update:open', open);
        emit('openChange', open);
      };
-        const onFoucs = () => {
+      const onFocus = () => {
        emit('focus');
      };
      const onBlur = () => {
@ -135,7 +132,7 @@ export default function generateRangePicker<DateType>(
      });
      return () => {
        const locale = { ...contextLocale.value, ...props.locale };
-          const p = { ...props, ...attrs } as RangePickerProps<DateType>;
+        const p = { ...props, ...attrs };
        const {
          prefixCls: customizePrefixCls,
          bordered = true,
@ -172,7 +169,7 @@ export default function generateRangePicker<DateType>(
              )
            }
            ref={pickerRef}
-              placeholder={getRangePlaceholder(picker, locale, placeholder)}
+            placeholder={getRangePlaceholder(picker, locale, placeholder as [string, string])}
            suffixIcon={
              suffixIcon || (picker === 'time' ? <ClockCircleOutlined /> : <CalendarOutlined />)
            }
@ -204,7 +201,7 @@ export default function generateRangePicker<DateType>(
            direction={direction.value}
            onChange={onChange}
            onOpenChange={onOpenChange}
-              onFocus={onFoucs}
+            onFocus={onFocus}
            onBlur={onBlur}
            onPanelChange={onPanelChange}
            onOk={onOk}
@ -213,8 +210,7 @@ export default function generateRangePicker<DateType>(
        );
      };
    },
-    },
-  );
+  });

  return RangePicker;
 }
--- a/components/date-picker/generatePicker/generateSinglePicker.tsx
+++ b/components/date-picker/generatePicker/generateSinglePicker.tsx
@ -7,34 +7,26 @@ import type { GenerateConfig } from '../../vc-picker/generate/index';
 import enUS from '../locale/en_US';
 import { getPlaceholder } from '../util';
 import { useLocaleReceiver } from '../../locale-provider/LocaleReceiver';
-import type { PickerProps, PickerDateProps, PickerTimeProps } from '.';
 import { getTimeProps, Components } from '.';
-import type { DefineComponent } from 'vue';
 import { computed, defineComponent, ref } from 'vue';
 import useConfigInject from '../../_util/hooks/useConfigInject';
 import classNames from '../../_util/classNames';
-import type { ExtraDatePickerProps } from './props';
 import { commonProps, datePickerProps } from './props';
 import devWarning from '../../vc-util/devWarning';

-export default function generateSinglePicker<DateType>(
+export default function generateSinglePicker<DateType, ExtraProps = {}>(
  generateConfig: GenerateConfig<DateType>,
-  extraProps: Record<string, any> = {},
+  extraProps: ExtraProps,
 ) {
-  type DatePickerProps = PickerProps<DateType> & ExtraDatePickerProps<DateType>;
-
-  function getPicker<InnerPickerProps extends DatePickerProps>(
-    picker?: PickerMode,
-    displayName?: string,
-  ): DefineComponent<InnerPickerProps> {
-    return defineComponent<InnerPickerProps>({
+  function getPicker(picker?: PickerMode, displayName?: string) {
+    return defineComponent({
      name: displayName,
      inheritAttrs: false,
      props: {
        ...commonProps<DateType>(),
        ...datePickerProps<DateType>(),
        ...extraProps,
-      } as any,
+      },
      slots: [
        'suffixIcon',
        // 'clearIcon',
@ -59,13 +51,13 @@ export default function generateSinglePicker<DateType>(
      ],
      setup(props, { slots, expose, attrs, emit }) {
        devWarning(
-          !((props as any).monthCellContentRender || slots.monthCellContentRender),
+          !(props.monthCellContentRender || slots.monthCellContentRender),
          'DatePicker',
          '`monthCellContentRender` is deprecated. Please use `monthCellRender"` instead.',
        );

        devWarning(
-          !(attrs as any).getCalendarContainer,
+          !attrs.getCalendarContainer,
          'DatePicker',
          '`getCalendarContainer` is deprecated. Please use `getPopupContainer"` instead.',
        );
@ -94,12 +86,6 @@ export default function generateSinglePicker<DateType>(
          emit('update:open', open);
          emit('openChange', open);
        };
-        const onFoucs = () => {
-          emit('focus');
-        };
-        const onBlur = () => {
-          emit('blur');
-        };
        const onPanelChange = (date: DateType, mode: PanelMode | null) => {
          const value = maybeToString(date);
          emit('panelChange', value, mode);
@ -114,7 +100,7 @@ export default function generateSinglePicker<DateType>(
        const value = computed(() => {
          if (props.value) {
            return props.valueFormat
-              ? generateConfig.toDate(props.value, props.valueFormat)
+              ? generateConfig.toDate(props.value as string | DateType, props.valueFormat)
              : props.value;
          }
          return props.value;
@ -122,7 +108,7 @@ export default function generateSinglePicker<DateType>(
        const defaultValue = computed(() => {
          if (props.defaultValue) {
            return props.valueFormat
-              ? generateConfig.toDate(props.defaultValue, props.valueFormat)
+              ? generateConfig.toDate(props.defaultValue as string | DateType, props.valueFormat)
              : props.defaultValue;
          }
          return props.defaultValue;
@ -130,7 +116,10 @@ export default function generateSinglePicker<DateType>(
        const defaultPickerValue = computed(() => {
          if (props.defaultPickerValue) {
            return props.valueFormat
-              ? generateConfig.toDate(props.defaultPickerValue, props.valueFormat)
+              ? generateConfig.toDate(
+                  props.defaultPickerValue as string | DateType,
+                  props.valueFormat,
+                )
              : props.defaultPickerValue;
          }
          return props.defaultPickerValue;
@ -138,7 +127,7 @@ export default function generateSinglePicker<DateType>(

        return () => {
          const locale = { ...contextLocale.value, ...props.locale };
-          const p = { ...props, ...attrs } as InnerPickerProps;
+          const p = { ...props, ...attrs };
          const {
            bordered = true,
            placeholder,
@ -217,26 +206,23 @@ export default function generateSinglePicker<DateType>(
              direction={direction.value}
              onChange={onChange}
              onOpenChange={onOpenChange}
-              onFocus={onFoucs}
-              onBlur={onBlur}
+              onFocus={props.onFocus}
+              onBlur={props.onBlur}
              onPanelChange={onPanelChange}
              onOk={onOk}
            />
          );
        };
      },
-    }) as unknown as DefineComponent<InnerPickerProps>;
+    });
  }

-  const DatePicker = getPicker<DatePickerProps>(undefined, 'ADatePicker');
-  const WeekPicker = getPicker<Omit<PickerDateProps<DateType>, 'picker'>>('week', 'AWeekPicker');
-  const MonthPicker = getPicker<Omit<PickerDateProps<DateType>, 'picker'>>('month', 'AMonthPicker');
-  const YearPicker = getPicker<Omit<PickerDateProps<DateType>, 'picker'>>('year', 'AYearPicker');
-  const TimePicker = getPicker<Omit<PickerTimeProps<DateType>, 'picker'>>('time', 'TimePicker'); // 给独立组件 TimePicker 使用，此处名称不用更改
-  const QuarterPicker = getPicker<Omit<PickerTimeProps<DateType>, 'picker'>>(
-    'quarter',
-    'AQuarterPicker',
-  );
+  const DatePicker = getPicker(undefined, 'ADatePicker');
+  const WeekPicker = getPicker('week', 'AWeekPicker');
+  const MonthPicker = getPicker('month', 'AMonthPicker');
+  const YearPicker = getPicker('year', 'AYearPicker');
+  const TimePicker = getPicker('time', 'TimePicker'); // 给独立组件 TimePicker 使用，此处名称不用更改
+  const QuarterPicker = getPicker('quarter', 'AQuarterPicker');

  return {
    DatePicker,
@ -245,12 +231,5 @@ export default function generateSinglePicker<DateType>(
    YearPicker,
    TimePicker,
    QuarterPicker,
-  } as unknown as {
-    DatePicker: DefineComponent<DatePickerProps>;
-    WeekPicker: DefineComponent<Omit<PickerDateProps<DateType>, 'picker'>>;
-    MonthPicker: DefineComponent<Omit<PickerDateProps<DateType>, 'picker'>>;
-    YearPicker: DefineComponent<Omit<PickerDateProps<DateType>, 'picker'>>;
-    TimePicker: DefineComponent<Omit<PickerTimeProps<DateType>, 'picker'>>;
-    QuarterPicker: DefineComponent<Omit<PickerTimeProps<DateType>, 'picker'>>;
  };
 }
--- a/components/date-picker/generatePicker/index.tsx
+++ b/components/date-picker/generatePicker/index.tsx
@ -17,8 +17,6 @@ import type { TimePickerLocale } from '../../time-picker';
 import generateSinglePicker from './generateSinglePicker';
 import generateRangePicker from './generateRangePicker';
 import type { SizeType } from '../../config-provider';
-import type { ExtraDatePickerProps, ExtraRangePickerProps } from './props';
-import type { DefineComponent } from 'vue';

 export const Components = { button: PickerButton, rangeItem: PickerTag };

@ -127,20 +125,17 @@ export type RangePickerProps<DateType> =
  | RangePickerDateProps<DateType>
  | RangePickerTimeProps<DateType>;

-function generatePicker<DateType>(
+function generatePicker<DateType, ExtraProps extends Record<string, any> = {}>(
  generateConfig: GenerateConfig<DateType>,
-  extraProps: Record<string, any> = {},
+  extraProps?: ExtraProps,
 ) {
-  type DatePickerProps = PickerProps<DateType> & ExtraDatePickerProps<DateType>;
  // =========================== Picker ===========================
  const { DatePicker, WeekPicker, MonthPicker, YearPicker, TimePicker, QuarterPicker } =
-    generateSinglePicker<DateType>(generateConfig, extraProps);
+    generateSinglePicker<DateType, ExtraProps>(generateConfig, extraProps);

  // ======================== Range Picker ========================
  const RangePicker = generateRangePicker<DateType>(generateConfig, extraProps);

-  // 类型过于复杂，使用 as 避免 TS7056 错误
-  // error TS7056: The inferred type of this node exceeds the maximum length the compiler will serialize. An explicit type annotation is needed.
  return {
    DatePicker,
    WeekPicker,
@ -149,14 +144,6 @@ function generatePicker<DateType>(
    TimePicker,
    QuarterPicker,
    RangePicker,
-  } as unknown as {
-    DatePicker: DefineComponent<DatePickerProps>;
-    WeekPicker: DefineComponent<Omit<PickerDateProps<DateType>, 'picker'>>;
-    MonthPicker: DefineComponent<Omit<PickerDateProps<DateType>, 'picker'>>;
-    YearPicker: DefineComponent<Omit<PickerDateProps<DateType>, 'picker'>>;
-    TimePicker: DefineComponent<Omit<PickerTimeProps<DateType>, 'picker'>>;
-    QuarterPicker: DefineComponent<Omit<PickerTimeProps<DateType>, 'picker'>>;
-    RangePicker: DefineComponent<RangePickerProps<DateType> & ExtraRangePickerProps<DateType>>;
  };
 }