refactor: Use constant instead of enum to reduce package size (#48406)

* feat: optimize code * feat: optimize code * feat: optimize code
ant-design · Apr 12, 2024 · d1df8e5 · d1df8e5
1 parent 646b960
commit d1df8e5
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 35 deletions.
diff --git a/components/affix/index.tsx b/components/affix/index.tsx
@@ -39,11 +39,10 @@ export interface AffixProps {
   rootClassName?: string;
   children: React.ReactNode;
 }
+const AFFIX_STATUS_NONE = 0;
+const AFFIX_STATUS_PREPARE = 1;
 
-enum AffixStatus {
-  None,
-  Prepare,
-}
+type AffixStatus = typeof AFFIX_STATUS_NONE | typeof AFFIX_STATUS_PREPARE;
 
 interface AffixState {
   affixStyle?: React.CSSProperties;
@@ -78,7 +77,7 @@ const Affix = React.forwardRef<AffixRef, AffixProps>((props, ref) => {
   const [affixStyle, setAffixStyle] = React.useState<React.CSSProperties>();
   const [placeholderStyle, setPlaceholderStyle] = React.useState<React.CSSProperties>();
 
-  const status = React.useRef<AffixStatus>(AffixStatus.None);
+  const status = React.useRef<AffixStatus>(AFFIX_STATUS_NONE);
 
   const prevTarget = React.useRef<Window | HTMLElement | null>(null);
   const prevListener = React.useRef<EventListener>();
@@ -94,7 +93,7 @@ const Affix = React.forwardRef<AffixRef, AffixProps>((props, ref) => {
   // =================== Measure ===================
   const measure = () => {
     if (
-      status.current !== AffixStatus.Prepare ||
+      status.current !== AFFIX_STATUS_PREPARE ||
       !fixedNodeRef.current ||
       !placeholderNodeRef.current ||
       !targetFunc
@@ -105,7 +104,7 @@ const Affix = React.forwardRef<AffixRef, AffixProps>((props, ref) => {
     const targetNode = targetFunc();
     if (targetNode) {
       const newState: Partial<AffixState> = {
-        status: AffixStatus.None,
+        status: AFFIX_STATUS_NONE,
       };
       const placeholderRect = getTargetRect(placeholderNodeRef.current);
 
@@ -160,7 +159,7 @@ const Affix = React.forwardRef<AffixRef, AffixProps>((props, ref) => {
   };
 
   const prepareMeasure = () => {
-    status.current = AffixStatus.Prepare;
+    status.current = AFFIX_STATUS_PREPARE;
     measure();
     if (process.env.NODE_ENV === 'test') {
       (props as any)?.onTestUpdatePosition?.();

diff --git a/components/steps/style/index.ts b/components/steps/style/index.ts
@@ -138,14 +138,18 @@ export interface StepsToken extends FullToken<'Steps'> {
   inlineTailColor: string;
 }
 
-enum StepItemStatusEnum {
-  wait = 'wait',
-  process = 'process',
-  finish = 'finish',
-  error = 'error',
-}
+const STEP_ITEM_STATUS_WAIT = 'wait';
+const STEP_ITEM_STATUS_PROCESS = 'process';
+const STEP_ITEM_STATUS_FINISH = 'finish';
+const STEP_ITEM_STATUS_ERROR = 'error';
+
+type StepItemStatus =
+  | typeof STEP_ITEM_STATUS_WAIT
+  | typeof STEP_ITEM_STATUS_PROCESS
+  | typeof STEP_ITEM_STATUS_FINISH
+  | typeof STEP_ITEM_STATUS_ERROR;
 
-const genStepsItemStatusStyle = (status: StepItemStatusEnum, token: StepsToken): CSSObject => {
+const genStepsItemStatusStyle = (status: StepItemStatus, token: StepsToken): CSSObject => {
   const prefix = `${token.componentCls}-item`;
   const iconColorKey: keyof StepsToken = `${status}IconColor`;
   const titleColorKey: keyof StepsToken = `${status}TitleColor`;
@@ -286,13 +290,13 @@ const genStepsItemStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
       color: token.colorTextDescription,
       fontSize: token.fontSize,
     },
-    ...genStepsItemStatusStyle(StepItemStatusEnum.wait, token),
-    ...genStepsItemStatusStyle(StepItemStatusEnum.process, token),
+    ...genStepsItemStatusStyle(STEP_ITEM_STATUS_WAIT, token),
+    ...genStepsItemStatusStyle(STEP_ITEM_STATUS_PROCESS, token),
     [`${stepsItemCls}-process > ${stepsItemCls}-container > ${stepsItemCls}-title`]: {
       fontWeight: token.fontWeightStrong,
     },
-    ...genStepsItemStatusStyle(StepItemStatusEnum.finish, token),
-    ...genStepsItemStatusStyle(StepItemStatusEnum.error, token),
+    ...genStepsItemStatusStyle(STEP_ITEM_STATUS_FINISH, token),
+    ...genStepsItemStatusStyle(STEP_ITEM_STATUS_ERROR, token),
     [`${stepsItemCls}${componentCls}-next-error > ${componentCls}-item-title::after`]: {
       background: token.colorError,
     },

diff --git a/components/tree/utils/dictUtil.ts b/components/tree/utils/dictUtil.ts
@@ -3,11 +3,11 @@ import { fillFieldNames } from 'rc-tree/lib/utils/treeUtil';
 
 import type { TreeProps } from '../Tree';
 
-enum Record {
-  None,
-  Start,
-  End,
-}
+const RECORD_NONE = 0;
+const RECORD_START = 1;
+const RECORD_END = 2;
+
+type Record = typeof RECORD_NONE | typeof RECORD_START | typeof RECORD_END;
 
 type FieldNames = TreeProps['fieldNames'];
 
@@ -44,7 +44,7 @@ export function calcRangeKeys({
   fieldNames?: FieldNames;
 }): Key[] {
   const keys: Key[] = [];
-  let record: Record = Record.None;
+  let record: Record = RECORD_NONE;
 
   if (startKey && startKey === endKey) {
     return [startKey];
@@ -60,21 +60,21 @@ export function calcRangeKeys({
   traverseNodesKey(
     treeData,
     (key) => {
-      if (record === Record.End) {
+      if (record === RECORD_END) {
         return false;
       }
 
       if (matchKey(key as any)) {
         // Match test
         keys.push(key as any);
 
-        if (record === Record.None) {
-          record = Record.Start;
-        } else if (record === Record.Start) {
-          record = Record.End;
+        if (record === RECORD_NONE) {
+          record = RECORD_START;
+        } else if (record === RECORD_START) {
+          record = RECORD_END;
           return false;
         }
-      } else if (record === Record.Start) {
+      } else if (record === RECORD_START) {
         // Append selection
         keys.push(key as any);
       }

diff --git a/components/typography/Base/Ellipsis.tsx b/components/typography/Base/Ellipsis.tsx
@@ -33,12 +33,8 @@ const MeasureText = React.forwardRef<MeasureTextRef, MeasureTextProps>(
           display: 'block',
           left: 0,
           top: 0,
-          // zIndex: -9999,
-          // visibility: 'hidden',
           pointerEvents: 'none',
-
           backgroundColor: 'rgba(255, 0, 0, 0.65)',
-
           ...style,
         }}
       >