refactor(DatePicker): improve tc

alibaba-fusion · Sep 13, 2024 · 0c655ad · 0c655ad
1 parent 6f1d613
commit 0c655ad
Show file tree

Hide file tree

Showing 10 changed files with 1,098 additions and 1,222 deletions.
diff --git a/components/date-picker/__tests__/index-spec.tsx b/components/date-picker/__tests__/index-spec.tsx
diff --git a/components/date-picker/index.tsx b/components/date-picker/index.tsx
@@ -6,10 +6,20 @@ import YearPicker from './year-picker';
 import WeekPicker from './week-picker';
 import { assignSubComponent } from '../util/component';
 import type { log } from '../util';
-
-export type { DatePickerProps, RangePickerProps, MonthPickerProps, YearPickerProps } from './types';
-
-const transform = (props: Record<string, unknown>, deprecated: typeof log.deprecated) => {
+import type { DeprecatedProps } from './types';
+
+export type {
+    DatePickerProps,
+    RangePickerProps,
+    MonthPickerProps,
+    YearPickerProps,
+    WeekPickerProps,
+} from './types';
+
+const transform = (
+    props: Record<string, unknown> & DeprecatedProps,
+    deprecated: typeof log.deprecated
+) => {
     const { open, defaultOpen, onOpenChange, ...others } = props;
     const newProps = others;
 

diff --git a/components/date-picker/module/panel-footer.tsx b/components/date-picker/module/panel-footer.tsx
@@ -6,6 +6,7 @@ import { PANEL } from '../util';
 import type { PanelFooterProps } from '../types';
 
 class PanelFooter extends React.PureComponent<PanelFooterProps> {
+    static displayName = 'PanelFooter';
     static defaultProps = {
         onOk: func.noop,
     };

diff --git a/components/date-picker/month-picker.tsx b/components/date-picker/month-picker.tsx
@@ -29,6 +29,7 @@ type InnerMonthPickerProps = ClassPropsWithDefault<
  * DatePicker.MonthPicker
  */
 class MonthPicker extends Component<MonthPickerProps, MonthPickerState> {
+    static displayName = 'MonthPicker';
     static propTypes = {
         ...ConfigProvider.propTypes,
         prefix: PropTypes.string,

diff --git a/components/date-picker/range-picker.tsx b/components/date-picker/range-picker.tsx
@@ -69,6 +69,7 @@ type InnerRangePickerProps = ClassPropsWithDefault<
  * DatePicker.RangePicker
  */
 class RangePicker extends Component<RangePickerProps, RangePickerState> {
+    static displayName = 'RangePicker';
     static propTypes = {
         ...ConfigProvider.propTypes,
         prefix: PropTypes.string,

diff --git a/components/date-picker/types.ts b/components/date-picker/types.ts
@@ -15,7 +15,8 @@ export type PanelType = 'time-panel' | 'date-panel';
  */
 export interface DatePickerProps
     extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange' | 'defaultValue'>,
-        CommonProps {
+        CommonProps,
+        DeprecatedProps {
     /**
      * @deprecated use Form.Item name instead
      * @skip
@@ -294,7 +295,8 @@ export interface DatePickerState {
  */
 export interface MonthPickerProps
     extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange' | 'defaultValue'>,
-        CommonProps {
+        CommonProps,
+        DeprecatedProps {
     /**
      * @deprecated use Form.Item name instead
      * @skip
@@ -507,7 +509,8 @@ export interface MonthPickerState {
  */
 export interface RangePickerProps
     extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange' | 'defaultValue' | 'placeholder'>,
-        CommonProps {
+        CommonProps,
+        DeprecatedProps {
     /**
      * @deprecated use Form.Item name instead
      * @skip
@@ -777,6 +780,7 @@ export interface RangePickerProps
      * @skip
      * 兼容 0.x ranges 属性，用于显示一些快捷选择的入口
      * @en Compatible with 0.x ranges attribute, used to display some shortcut entry points
+     * @deprecated use footerRender instead
      */
     ranges?: {
         [key: string]: MomentInput[];
@@ -814,7 +818,8 @@ export interface RangePickerState {
  */
 export interface YearPickerProps
     extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange' | 'defaultValue'>,
-        CommonProps {
+        CommonProps,
+        DeprecatedProps {
     /**
      * @deprecated use Form.Item name instead
      * @skip
@@ -1206,3 +1211,22 @@ export interface WeekPickerState {
     value: Moment | null;
     visible: boolean | undefined;
 }
+
+export interface DeprecatedProps {
+    /**
+     * @deprecated use visible instead
+     */
+    open?: boolean;
+    /**
+     * @deprecated use defaultVisible instead
+     */
+    defaultOpen?: boolean;
+    /**
+     * @deprecated use onVisibleChange instead
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * @deprecated use format/showTime.format instead
+     */
+    formater?: unknown;
+}
diff --git a/components/date-picker/util/index.ts b/components/date-picker/util/index.ts
@@ -118,8 +118,7 @@ export function onDateKeydown(
 
     if (
         (e.altKey && [KEYCODE.PAGE_UP, KEYCODE.PAGE_DOWN].indexOf(e.keyCode) === -1) ||
-        // @ts-expect-error 没有 controlKey，应该是 ctrlKey
-        e.controlKey ||
+        e.ctrlKey ||
         e.shiftKey
     ) {
         return;

diff --git a/components/date-picker/week-picker.tsx b/components/date-picker/week-picker.tsx
@@ -26,6 +26,7 @@ type InnerWeekPickerProps = ClassPropsWithDefault<WeekPickerProps, typeof WeekPi
  * DatePicker.WeekPicker
  */
 class WeekPicker extends Component<WeekPickerProps, WeekPickerState> {
+    static displayName = 'WeekPicker';
     static propTypes = {
         ...ConfigProvider.propTypes,
         prefix: PropTypes.string,
@@ -140,8 +141,7 @@ class WeekPicker extends Component<WeekPickerProps, WeekPickerState> {
 
         if (
             (e.altKey && [KEYCODE.PAGE_UP, KEYCODE.PAGE_DOWN].indexOf(e.keyCode) === -1) ||
-            // @ts-expect-error 没有 controlKey，应该是 ctrlKey
-            e.controlKey ||
+            e.ctrlKey ||
             e.shiftKey
         ) {
             return;

diff --git a/components/date-picker/year-picker.tsx b/components/date-picker/year-picker.tsx
@@ -25,6 +25,7 @@ type InnerYearPickerProps = ClassPropsWithDefault<YearPickerProps, typeof YearPi
  * DatePicker.YearPicker
  */
 class YearPicker extends Component<YearPickerProps, YearPickerState> {
+    static displayName = 'YearPicker';
     static propTypes = {
         prefix: PropTypes.string,
         rtl: PropTypes.bool,

diff --git a/cypress/support/component.ts b/cypress/support/component.ts
@@ -8,15 +8,27 @@ function rerender<Props extends object>(tag: string, nextProps: Props) {
     });
 }
 
+function triggerInputChange(subject: JQuery<HTMLElement>, value: string) {
+    const element = subject[0];
+    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
+        window.HTMLInputElement.prototype,
+        'value'
+    )?.set;
+    nativeInputValueSetter?.call(element, value)
+    element.dispatchEvent(new Event('input', { bubbles: true }));
+}
+
 declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
     namespace Cypress {
         interface Chainable {
             mount: typeof mount;
             rerender: typeof rerender;
+            triggerInputChange: (value: string) => void;
         }
     }
 }
 
 Cypress.Commands.add('mount', mount);
 Cypress.Commands.add('rerender', rerender);
+Cypress.Commands.add('triggerInputChange', { prevSubject: 'element' }, triggerInputChange)