fix: typescript compile error

2021-09-18 20:14:56 +08:00 · 2021-09-18 20:14:56 +08:00 · aa9ba7fc5a
parent 6b1f38cd4e
commit aa9ba7fc5a
8 changed files with 237 additions and 133 deletions
--- a/components/calendar/dayjs.tsx
+++ b/components/calendar/dayjs.tsx
@ -1,10 +1,9 @@
-import type { Dayjs } from 'dayjs';
 import generateConfig from '../vc-picker/generate/dayjs';
 import { withInstall } from '../_util/type';
 import type { CalendarProps } from './generateCalendar';
 import generateCalendar from './generateCalendar';

-const Calendar = generateCalendar<Dayjs>(generateConfig);
+const Calendar = generateCalendar(generateConfig);

 export type { CalendarProps };
 export default withInstall(Calendar);
--- a/components/calendar/generateCalendar.tsx
+++ b/components/calendar/generateCalendar.tsx
@ -65,7 +65,10 @@ export interface CalendarProps<DateType> {
  valueFormat?: string;
 }

-function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
+function generateCalendar<
+  DateType,
+  Props extends CalendarProps<DateType> = CalendarProps<DateType>,
+>(generateConfig: GenerateConfig<DateType>) {
  function isSameYear(date1: DateType, date2: DateType) {
    return date1 && date2 && generateConfig.getYear(date1) === generateConfig.getYear(date2);
  }
@ -82,28 +85,9 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
    );
  }

-  const Calendar = defineComponent<CalendarProps<DateType>>({
+  const Calendar = defineComponent<Props>({
    name: 'ACalendar',
    inheritAttrs: false,
-    props: [
-      'prefixCls',
-      'locale',
-      'validRange',
-      'disabledDate',
-      'dateFullCellRender',
-      'dateCellRender',
-      'monthFullCellRender',
-      'monthCellRender',
-      'headerRender',
-      'value',
-      'defaultValue',
-      'mode',
-      'fullscreen',
-      'onChange',
-      'onPanelChange',
-      'onSelect',
-      'valueFormat',
-    ] as any,
    emits: ['change', 'panelChange', 'select', 'update:value'],
    slots: [
      'dateFullCellRender',
@ -303,7 +287,6 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
                onModeChange={triggerModeChange}
              />
            )}
-
            <PickerPanel
              value={mergedValue.value}
              prefixCls={prefixCls.value}
@ -322,11 +305,33 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
      };
    },
  });
+
+  Calendar.props = [
+    'prefixCls',
+    'locale',
+    'validRange',
+    'disabledDate',
+    'dateFullCellRender',
+    'dateCellRender',
+    'monthFullCellRender',
+    'monthCellRender',
+    'headerRender',
+    'value',
+    'defaultValue',
+    'mode',
+    'fullscreen',
+    'onChange',
+    'onPanelChange',
+    'onSelect',
+    'valueFormat',
+  ];
+
  Calendar.install = function (app: App) {
    app.component(Calendar.name, Calendar);
    return app;
  };
-  return Calendar;
+
+  return Calendar as unknown as (props: CalendarProps<DateType>) => JSX.Element;
 }

 export default generateCalendar;
--- a/components/date-picker/generatePicker/generateRangePicker.tsx
+++ b/components/date-picker/generatePicker/generateRangePicker.tsx
@ -16,18 +16,18 @@ 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, ExtraProps extends {} = {}>(
+export default function generateRangePicker<DateType, ExtraProps = {}>(
  generateConfig: GenerateConfig<DateType>,
  extraProps: ExtraProps,
 ) {
  const RangePicker = defineComponent({
    name: 'ARangePicker',
-    inheritAttrs: false,
    props: {
      ...commonProps<DateType>(),
      ...rangePickerProps<DateType>(),
      ...extraProps,
    },
+    inheritAttrs: false,
    slots: [
      'suffixIcon',
      // 'clearIcon',
--- a/components/date-picker/generatePicker/generateSinglePicker.tsx
+++ b/components/date-picker/generatePicker/generateSinglePicker.tsx
@ -12,6 +12,7 @@ import { computed, defineComponent, nextTick, onMounted, ref } from 'vue';
 import useConfigInject from '../../_util/hooks/useConfigInject';
 import classNames from '../../_util/classNames';
 import { commonProps, datePickerProps } from './props';
+
 import devWarning from '../../vc-util/devWarning';

 export default function generateSinglePicker<DateType, ExtraProps = {}>(
--- a/components/date-picker/generatePicker/index.tsx
+++ b/components/date-picker/generatePicker/index.tsx
@ -1,22 +1,12 @@
-import type { GenerateConfig } from '../../vc-picker/generate/index';
-import type {
-  PickerBaseProps as RCPickerBaseProps,
-  PickerDateProps as RCPickerDateProps,
-  PickerTimeProps as RCPickerTimeProps,
-} from '../../vc-picker/Picker';
+import type { GenerateConfig } from '../../vc-picker/generate';
 import type { SharedTimeProps } from '../../vc-picker/panels/TimePanel';
-import type {
-  RangePickerBaseProps as RCRangePickerBaseProps,
-  RangePickerDateProps as RCRangePickerDateProps,
-  RangePickerTimeProps as RCRangePickerTimeProps,
-} from '../../vc-picker/RangePicker';
-import type { PickerMode, Locale as RcPickerLocale } from '../../vc-picker/interface';
+import type { PickerMode } from '../../vc-picker/interface';
 import PickerButton from '../PickerButton';
 import PickerTag from '../PickerTag';
-import type { TimePickerLocale } from '../../time-picker';
 import generateSinglePicker from './generateSinglePicker';
 import generateRangePicker from './generateRangePicker';
-import type { SizeType } from '../../config-provider';
+
+export * from './interface';

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

@ -65,67 +55,7 @@ export function getTimeProps<DateType>(
  };
 }

-type InjectDefaultProps<Props> = 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<DateType> = InjectDefaultProps<RCPickerBaseProps<DateType>>;
-export type PickerDateProps<DateType> = InjectDefaultProps<RCPickerDateProps<DateType>>;
-export type PickerTimeProps<DateType> = InjectDefaultProps<RCPickerTimeProps<DateType>>;
-
-export type PickerProps<DateType> =
-  | PickerBaseProps<DateType>
-  | PickerDateProps<DateType>
-  | PickerTimeProps<DateType>;
-
-// Range Picker Props
-export type RangePickerBaseProps<DateType> = InjectDefaultProps<RCRangePickerBaseProps<DateType>>;
-export type RangePickerDateProps<DateType> = InjectDefaultProps<RCRangePickerDateProps<DateType>>;
-export type RangePickerTimeProps<DateType> = InjectDefaultProps<RCRangePickerTimeProps<DateType>>;
-
-export type RangePickerProps<DateType> =
-  | RangePickerBaseProps<DateType>
-  | RangePickerDateProps<DateType>
-  | RangePickerTimeProps<DateType>;
-
-function generatePicker<DateType, ExtraProps extends Record<string, any> = {}>(
+function generatePicker<DateType, ExtraProps extends {} = {}>(
  generateConfig: GenerateConfig<DateType>,
  extraProps?: ExtraProps,
 ) {
@ -134,7 +64,7 @@ function generatePicker<DateType, ExtraProps extends Record<string, any> = {}>(
    generateSinglePicker<DateType, ExtraProps>(generateConfig, extraProps);

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

  return {
    DatePicker,
--- a/components/date-picker/generatePicker/interface.ts
+++ b/components/date-picker/generatePicker/interface.ts
@ -0,0 +1,73 @@
+import type {
+  PickerBaseProps as RCPickerBaseProps,
+  PickerDateProps as RCPickerDateProps,
+  PickerTimeProps as RCPickerTimeProps,
+} from '../../vc-picker/Picker';
+import type {
+  RangePickerBaseProps as RCRangePickerBaseProps,
+  RangePickerDateProps as RCRangePickerDateProps,
+  RangePickerTimeProps as RCRangePickerTimeProps,
+} from '../../vc-picker/RangePicker';
+import type { Locale as RcPickerLocale } from '../../vc-picker/interface';
+import type { TimePickerLocale } from '../../time-picker';
+import type { SizeType } from '../../config-provider';
+
+type InjectDefaultProps<Props> = 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<DateType> = InjectDefaultProps<RCPickerBaseProps<DateType>>;
+export type PickerDateProps<DateType> = InjectDefaultProps<RCPickerDateProps<DateType>>;
+export type PickerTimeProps<DateType> = InjectDefaultProps<RCPickerTimeProps<DateType>>;
+
+export type PickerProps<DateType> =
+  | PickerBaseProps<DateType>
+  | PickerDateProps<DateType>
+  | PickerTimeProps<DateType>;
+
+// Range Picker Props
+export type RangePickerBaseProps<DateType> = InjectDefaultProps<RCRangePickerBaseProps<DateType>>;
+export type RangePickerDateProps<DateType> = InjectDefaultProps<RCRangePickerDateProps<DateType>>;
+export type RangePickerTimeProps<DateType> = InjectDefaultProps<RCRangePickerTimeProps<DateType>>;
+
+export type RangePickerProps<DateType> =
+  | RangePickerBaseProps<DateType>
+  | RangePickerDateProps<DateType>
+  | RangePickerTimeProps<DateType>;
--- a/components/date-picker/generatePicker/props.ts
+++ b/components/date-picker/generatePicker/props.ts
@ -76,6 +76,44 @@ function commonProps<DateType>() {
  };
 }

+export interface CommonProps<DateType> {
+  prefixCls?: string;
+  dropdownClassName?: string;
+  dropdownAlign?: AlignType;
+  popupStyle?: CSSProperties;
+  transitionName?: string;
+  placeholder?: string;
+  allowClear?: boolean;
+  autofocus?: boolean;
+  disabled?: boolean;
+  tabindex?: number;
+  open?: boolean;
+  defaultOpen?: boolean;
+  inputReadOnly?: boolean;
+  suffixIcon?: VueNode;
+  clearIcon?: VueNode;
+  prevIcon?: VueNode;
+  nextIcon?: VueNode;
+  superPrevIcon?: VueNode;
+  superNextIcon?: VueNode;
+  getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
+  panelRender?: (originPanel: VueNode) => VueNode;
+  role?: string;
+  name?: string;
+  autocomplete?: string;
+  direction?: 'ltr' | 'rtl';
+  showToday?: boolean;
+  showTime?: boolean | SharedTimeProps<DateType>;
+  locale?: PickerLocale;
+  size?: SizeType;
+  bordered?: boolean;
+  dateRender?: DateRender<DateType>;
+  disabledDate?: (date: DateType) => boolean;
+  mode?: PanelMode;
+  picker?: PickerMode;
+  valueFormat?: string;
+}
+
 function datePickerProps<DateType>() {
  return {
    defaultPickerValue: { type: [String, Object] as PropType<DateType | string> },
@ -95,6 +133,19 @@ function datePickerProps<DateType>() {
  };
 }

+export interface DatePickerProps<DateType> {
+  defaultPickerValue?: DateType | string;
+  defaultValue?: DateType | string;
+  value?: DateType | string;
+  disabledTime?: DisabledTime<DateType>;
+  format?: string | CustomFormat<DateType> | (string | CustomFormat<DateType>)[];
+  renderExtraFooter?: (mode: PanelMode) => VueNode;
+  showNow?: boolean;
+  monthCellRender?: MonthCellRender<DateType>;
+  // deprecated  Please use `monthCellRender"` instead.',
+  monthCellContentRender?: MonthCellRender<DateType>;
+}
+
 function rangePickerProps<DateType>() {
  return {
    allowEmpty: { type: Array as unknown as PropType<[boolean, boolean]> },
@ -124,6 +175,25 @@ function rangePickerProps<DateType>() {
  };
 }

+export interface RangePickerProps<DateType> {
+  allowEmpty?: [boolean, boolean];
+  dateRender?: RangeDateRender<DateType>;
+  defaultPickerValue?: [DateType, DateType] | [string, string];
+  defaultValue?: [DateType, DateType] | [string, string];
+  value?: [DateType, DateType];
+  disabledTime?: (date: EventValue<DateType>, type: RangeType) => DisabledTimes;
+  disabled?: [boolean, boolean];
+  format?: string;
+  renderExtraFooter?: () => VueNode;
+  separator?: string;
+  ranges?: Record<
+    string,
+    Exclude<RangeValue<DateType>, null> | (() => Exclude<RangeValue<DateType>, null>)
+  >;
+  placeholder?: [string, string];
+  mode?: [PanelMode, PanelMode];
+}
+
 export type ExtraDatePickerProps<DateType> = {
  valueFormat?: string;
  defaultPickerValue?: DateType | string;
--- a/components/time-picker/time-picker.tsx
+++ b/components/time-picker/time-picker.tsx
@ -6,6 +6,7 @@ import {
  datePickerProps,
  rangePickerProps,
 } from '../date-picker/generatePicker/props';
+import type { CommonProps, DatePickerProps } from '../date-picker/generatePicker/props';
 import type { GenerateConfig } from '../vc-picker/generate';
 import type { PanelMode, RangeValue } from '../vc-picker/interface';
 import type { RangePickerSharedProps } from '../vc-picker/RangePicker';
@ -16,7 +17,7 @@ export interface TimePickerLocale {
  rangePlaceholder?: [string, string];
 }

-const timpePickerProps = {
+const timePickerProps = {
  format: String,
  showNow: { type: Boolean, default: undefined },
  showHour: { type: Boolean, default: undefined },
@ -30,29 +31,46 @@ const timpePickerProps = {
  popupClassName: String,
 };

-function createTimePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
+export interface CommonTimePickerProps {
+  format?: string;
+  showNow?: boolean;
+  showHour?: boolean;
+  showMinute?: boolean;
+  showSecond?: boolean;
+  use12Hours?: boolean;
+  hourStep?: number;
+  minuteStep?: number;
+  secondStep?: number;
+  hideDisabledOptions?: boolean;
+  popupClassName?: string;
+}
+
+export type TimeRangePickerProps<T> = Omit<RangePickerTimeProps<T>, 'picker'> & {
+  popupClassName?: string;
+  valueFormat?: string;
+};
+
+export type TimePickerProps<DateType> = CommonProps<DateType> &
+  DatePickerProps<DateType> &
+  CommonTimePickerProps & {
+    addon?: () => void;
+  };
+
+function createTimePicker<
+  DateType,
+  DTimePickerProps extends TimePickerProps<DateType> = TimePickerProps<DateType>,
+  DTimeRangePickerProps extends TimeRangePickerProps<DateType> = TimeRangePickerProps<DateType>,
+>(generateConfig: GenerateConfig<DateType>) {
  const DatePicker = generatePicker<DateType>(generateConfig, {
-    ...timpePickerProps,
+    ...timePickerProps,
    order: { type: Boolean, default: true },
  });
+
  const { TimePicker: InternalTimePicker, RangePicker: InternalRangePicker } = DatePicker as any;
-  type TimeRangePickerProps = Omit<RangePickerTimeProps<DateType>, 'picker'> & {
-    popupClassName?: string;
-    valueFormat?: string;
-  };
-  // type TimePickerProps = Omit<PickerTimeProps<DateType>, 'picker'> & {
-  //   popupClassName?: string;
-  //   valueFormat?: string;
-  // };
-  const TimePicker = defineComponent({
+
+  const TimePicker = defineComponent<DTimePickerProps>({
    name: 'ATimePicker',
    inheritAttrs: false,
-    props: {
-      ...commonProps<DateType>(),
-      ...datePickerProps<DateType>(),
-      ...timpePickerProps,
-      addon: { type: Function },
-    } as any,
    slot: ['addon', 'renderExtraFooter', 'suffixIcon', 'clearIcon'],
    emits: ['change', 'openChange', 'focus', 'blur', 'ok', 'update:value', 'update:open'],
    setup(props, { slots, expose, emit, attrs }) {
@ -78,7 +96,7 @@ function createTimePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
        emit('update:open', open);
        emit('openChange', open);
      };
-      const onFoucs = () => {
+      const onFocus = () => {
        emit('focus');
      };
      const onBlur = () => {
@ -100,7 +118,7 @@ function createTimePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
            }
            onChange={onChange}
            onOpenChange={onOpenChange}
-            onFocus={onFoucs}
+            onFocus={onFocus}
            onBlur={onBlur}
            onOk={onOk}
            v-slots={slots}
@ -110,15 +128,16 @@ function createTimePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
    },
  });

-  const TimeRangePicker = defineComponent<TimeRangePickerProps>({
+  TimePicker.props = {
+    ...commonProps<DateType>(),
+    ...datePickerProps<DateType>(),
+    ...timePickerProps,
+    addon: { type: Function },
+  };
+
+  const TimeRangePicker = defineComponent<DTimeRangePickerProps>({
    name: 'ATimeRangePicker',
    inheritAttrs: false,
-    props: {
-      ...commonProps<DateType>(),
-      ...rangePickerProps<DateType>(),
-      ...timpePickerProps,
-      order: { type: Boolean, default: true },
-    } as any,
    slot: ['renderExtraFooter', 'suffixIcon', 'clearIcon'],
    emits: [
      'change',
@ -152,7 +171,7 @@ function createTimePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
        emit('update:open', open);
        emit('openChange', open);
      };
-      const onFoucs = () => {
+      const onFocus = () => {
        emit('focus');
      };
      const onBlur = () => {
@ -164,7 +183,7 @@ function createTimePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
      ) => {
        emit('panelChange', values, modes);
      };
-      const onOk = (values: RangeValue<string> | RangeValue<DateType>) => {
+      const onOk = (values: RangeValue<string | DateType>) => {
        emit('ok', values);
      };
      const onCalendarChange: RangePickerSharedProps<DateType>['onCalendarChange'] = (
@ -185,7 +204,7 @@ function createTimePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
            ref={pickerRef}
            onChange={onChange}
            onOpenChange={onOpenChange}
-            onFocus={onFoucs}
+            onFocus={onFocus}
            onBlur={onBlur}
            onPanelChange={onPanelChange}
            onOk={onOk}
@ -197,6 +216,13 @@ function createTimePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
    },
  });

+  TimeRangePicker.props = {
+    ...commonProps<DateType>(),
+    ...rangePickerProps<DateType>(),
+    ...timePickerProps,
+    order: { type: Boolean, default: true },
+  };
+
  return {
    TimePicker,
    TimeRangePicker,