refactor: direction type define (#27540)

components/cascader/index.tsx

@@ -11,7 +11,12 @@ import RedoOutlined from '@ant-design/icons/RedoOutlined';
 import LeftOutlined from '@ant-design/icons/LeftOutlined';
 
 import Input from '../input';
-import { ConfigConsumer, ConfigConsumerProps, RenderEmptyHandler } from '../config-provider';
+import {
+  ConfigConsumer,
+  ConfigConsumerProps,
+  RenderEmptyHandler,
+  DirectionType,
+} from '../config-provider';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import devWarning from '../_util/devWarning';
 import SizeContext, { SizeType } from '../config-provider/SizeContext';
@@ -455,7 +460,7 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
     this.input.blur();
   }
 
-  getPopupPlacement(direction: string = 'ltr') {
+  getPopupPlacement(direction: DirectionType = 'ltr') {
     const { popupPlacement } = this.props;
     if (popupPlacement !== undefined) {
       return popupPlacement;

components/drawer/index.tsx

@@ -4,7 +4,7 @@ import getScrollBarSize from 'rc-util/lib/getScrollBarSize';
 import CloseOutlined from '@ant-design/icons/CloseOutlined';
 import classNames from 'classnames';
 import omit from 'omit.js';
-import { ConfigContext } from '../config-provider';
+import { ConfigContext, DirectionType } from '../config-provider';
 import { tuple } from '../_util/type';
 
 const DrawerContext = React.createContext<Drawer | null>(null);
@@ -57,7 +57,7 @@ export interface IDrawerState {
 }
 
 interface InternalDrawerProps extends DrawerProps {
-  direction: 'rtl' | 'ltr' | undefined;
+  direction: DirectionType;
 }
 
 const defaultPushState: PushState = { distance: 180 };

components/input/ClearableLabeledInput.tsx

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
 import { tuple } from '../_util/type';
 import { InputProps, getInputClassName } from './Input';
+import { DirectionType } from '../config-provider';
 import { SizeType } from '../config-provider/SizeContext';
 import { cloneElement } from '../_util/reactNode';
 
@@ -29,7 +30,7 @@ interface BasicProps {
   className?: string;
   style?: object;
   disabled?: boolean;
-  direction?: any;
+  direction?: DirectionType;
   focused?: boolean;
   readOnly?: boolean;
   bordered: boolean;

components/input/Input.tsx

@@ -7,7 +7,7 @@ import TextArea from './TextArea';
 import Password from './Password';
 import { Omit, LiteralUnion } from '../_util/type';
 import ClearableLabeledInput, { hasPrefixSuffix } from './ClearableLabeledInput';
-import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
+import { ConfigConsumer, ConfigConsumerProps, DirectionType } from '../config-provider';
 import SizeContext, { SizeType } from '../config-provider/SizeContext';
 import devWarning from '../_util/devWarning';
 
@@ -88,7 +88,7 @@ export function getInputClassName(
   bordered: boolean,
   size?: SizeType,
   disabled?: boolean,
-  direction?: any,
+  direction?: DirectionType,
 ) {
   return classNames(prefixCls, {
     [`${prefixCls}-sm`]: size === 'small',
@@ -125,7 +125,7 @@ class Input extends React.Component<InputProps, InputState> {
 
   removePasswordTimeout: number;
 
-  direction: any = 'ltr';
+  direction: DirectionType = 'ltr';
 
   constructor(props: InputProps) {
     super(props);

components/menu/MenuContext.tsx

@@ -1,11 +1,12 @@
 import { createContext } from 'react';
+import { DirectionType } from '../config-provider';
 
 export type MenuTheme = 'light' | 'dark';
 
 export interface MenuContextProps {
   inlineCollapsed: boolean;
   antdMenuTheme?: MenuTheme;
-  direction?: 'ltr' | 'rtl';
+  direction?: DirectionType;
 }
 
 const MenuContext = createContext<MenuContextProps>({

components/modal/Modal.tsx

@@ -9,7 +9,7 @@ import { getConfirmLocale } from './locale';
 import Button from '../button';
 import { LegacyButtonType, ButtonProps, convertLegacyProps } from '../button/button';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
-import { ConfigContext } from '../config-provider';
+import { ConfigContext, DirectionType } from '../config-provider';
 
 let mousePosition: { x: number; y: number } | null;
 export const destroyFns: Array<() => void> = [];
@@ -114,7 +114,7 @@ export interface ModalFuncProps {
   autoFocusButton?: null | 'ok' | 'cancel';
   transitionName?: string;
   maskTransitionName?: string;
-  direction?: string;
+  direction?: DirectionType;
   bodyStyle?: React.CSSProperties;
   modalRender?: (node: React.ReactNode) => React.ReactNode;
 }

components/page-header/index.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import ArrowLeftOutlined from '@ant-design/icons/ArrowLeftOutlined';
 import ArrowRightOutlined from '@ant-design/icons/ArrowRightOutlined';
 import ResizeObserver from 'rc-resize-observer';
-import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
+import { ConfigConsumer, ConfigConsumerProps, DirectionType } from '../config-provider';
 import { TagType } from '../tag';
 import Breadcrumb, { BreadcrumbProps } from '../breadcrumb';
 import Avatar, { AvatarProps } from '../avatar';
@@ -59,14 +59,18 @@ const renderBreadcrumb = (breadcrumb: BreadcrumbProps) => {
   return <Breadcrumb {...breadcrumb} />;
 };
 
-const getBackIcon = (props: PageHeaderProps, direction: string = 'ltr') => {
+const getBackIcon = (props: PageHeaderProps, direction: DirectionType = 'ltr') => {
   if (props.backIcon !== undefined) {
     return props.backIcon;
   }
   return direction === 'rtl' ? <ArrowRightOutlined /> : <ArrowLeftOutlined />;
 };
 
-const renderTitle = (prefixCls: string, props: PageHeaderProps, direction: string = 'ltr') => {
+const renderTitle = (
+  prefixCls: string,
+  props: PageHeaderProps,
+  direction: DirectionType = 'ltr',
+) => {
   const { title, avatar, subTitle, tags, extra, onBack } = props;
   const headingPrefixCls = `${prefixCls}-heading`;
   const hasHeading = title || subTitle || tags || extra;

components/transfer/index.tsx

@@ -63,7 +63,7 @@ export interface TransferProps {
   targetKeys?: string[];
   selectedKeys?: string[];
   render?: TransferRender;
-  onChange?: (targetKeys: string[], direction: string, moveKeys: string[]) => void;
+  onChange?: (targetKeys: string[], direction: TransferDirection, moveKeys: string[]) => void;
   onSelectChange?: (sourceSelectedKeys: string[], targetSelectedKeys: string[]) => void;
   style?: React.CSSProperties;
   listStyle: ((style: ListStyle) => React.CSSProperties) | React.CSSProperties;

components/transfer/operation.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import LeftOutlined from '@ant-design/icons/LeftOutlined';
 import RightOutlined from '@ant-design/icons/RightOutlined';
 import Button from '../button';
+import { DirectionType } from '../config-provider';
 
 export interface TransferOperationProps {
   className?: string;
@@ -13,7 +14,7 @@ export interface TransferOperationProps {
   rightActive?: boolean;
   style?: React.CSSProperties;
   disabled?: boolean;
-  direction?: 'ltr' | 'rtl';
+  direction?: DirectionType;
   oneWay?: boolean;
 }
 

components/typography/Editable.tsx

@@ -4,6 +4,7 @@ import KeyCode from 'rc-util/lib/KeyCode';
 import EnterOutlined from '@ant-design/icons/EnterOutlined';
 import { AutoSizeType } from 'rc-textarea/lib/ResizableTextArea';
 import TextArea from '../input/TextArea';
+import { DirectionType } from '../config-provider';
 
 interface EditableProps {
   prefixCls?: string;
@@ -13,7 +14,7 @@ interface EditableProps {
   onCancel: () => void;
   className?: string;
   style?: React.CSSProperties;
-  direction?: 'ltr' | 'rtl';
+  direction?: DirectionType;
   maxLength?: number;
   autoSize?: boolean | AutoSizeType;
 }