style: code optimization (#682)

react-component · Nov 27, 2023 · 4c9f6fe · 4c9f6fe · vercel · Nov 27, 2023
1 parent fa8ea5f
commit 4c9f6fe
Show file tree

Hide file tree

Showing 16 changed files with 204 additions and 223 deletions.
diff --git a/package.json b/package.json
@@ -2,42 +2,48 @@
   "name": "rc-tabs",
   "version": "12.14.0",
   "description": "tabs ui component for react",
-  "engines": {
-    "node": ">=8.x"
-  },
   "keywords": [
     "react",
     "react-component",
     "react-tabs"
   ],
-  "files": [
-    "lib",
-    "es",
-    "assets/index.css"
-  ],
-  "main": "./lib/index",
-  "module": "./es/index",
   "homepage": "http://github.com/react-component/tabs",
-  "author": "[email protected]",
+  "bugs": {
+    "url": "http://github.com/react-component/tabs/issues"
+  },
   "repository": {
     "type": "git",
     "url": "[email protected]:react-component/tabs.git"
   },
-  "bugs": {
-    "url": "http://github.com/react-component/tabs/issues"
-  },
   "license": "MIT",
+  "author": "[email protected]",
+  "main": "./lib/index",
+  "module": "./es/index",
+  "files": [
+    "lib",
+    "es",
+    "assets/index.css"
+  ],
   "scripts": {
-    "start": "dumi dev",
     "build": "dumi build",
-    "docs:deploy": "gh-pages -d .doc",
     "compile": "father build && npm run compile:style",
-    "test": "rc-test",
+    "compile:style": "lessc --js assets/index.less assets/index.css",
     "coverage": "father test --coverage",
-    "now-build": "npm run build",
+    "docs:deploy": "gh-pages -d .doc",
     "lint": "eslint src/ docs/examples/ --ext .tsx,.ts,.jsx,.js",
-    "compile:style": "lessc --js assets/index.less assets/index.css",
-    "prepublishOnly": "npm run lint && npm run test && npm run compile && np --yolo --no-publish"
+    "now-build": "npm run build",
+    "prepublishOnly": "npm run lint && npm run test && npm run compile && np --yolo --no-publish",
+    "start": "dumi dev",
+    "test": "rc-test"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.11.2",
+    "classnames": "2.x",
+    "rc-dropdown": "~4.1.0",
+    "rc-menu": "~9.12.0",
+    "rc-motion": "^2.6.2",
+    "rc-resize-observer": "^1.0.0",
+    "rc-util": "^5.34.1"
   },
   "devDependencies": {
     "@rc-component/father-plugin": "^1.0.0",
@@ -74,17 +80,11 @@
     "sortablejs": "^1.7.0",
     "typescript": "^4.0.5"
   },
-  "dependencies": {
-    "@babel/runtime": "^7.11.2",
-    "classnames": "2.x",
-    "rc-dropdown": "~4.1.0",
-    "rc-menu": "~9.12.0",
-    "rc-motion": "^2.6.2",
-    "rc-resize-observer": "^1.0.0",
-    "rc-util": "^5.34.1"
-  },
   "peerDependencies": {
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0"
+  },
+  "engines": {
+    "node": ">=8.x"
   }
 }
diff --git a/src/TabNavList/AddButton.tsx b/src/TabNavList/AddButton.tsx
@@ -8,10 +8,8 @@ export interface AddButtonProps {
   style?: React.CSSProperties;
 }
 
-function AddButton(
-  { prefixCls, editable, locale, style }: AddButtonProps,
-  ref: React.Ref<HTMLButtonElement>,
-) {
+const AddButton = React.forwardRef<HTMLButtonElement, AddButtonProps>((props, ref) => {
+  const { prefixCls, editable, locale, style } = props;
   if (!editable || editable.showAdd === false) {
     return null;
   }
@@ -24,14 +22,12 @@ function AddButton(
       style={style}
       aria-label={locale?.addAriaLabel || 'Add tab'}
       onClick={event => {
-        editable.onEdit('add', {
-          event,
-        });
+        editable.onEdit('add', { event });
       }}
     >
       {editable.addIcon || '+'}
     </button>
   );
-}
+});
 
-export default React.forwardRef(AddButton);
+export default AddButton;
diff --git a/src/TabNavList/ExtraContent.tsx b/src/TabNavList/ExtraContent.tsx
@@ -1,41 +1,42 @@
 import * as React from 'react';
-import type { TabBarExtraPosition, TabBarExtraContent, TabBarExtraMap } from '../interface';
+import type { TabBarExtraContent, TabBarExtraMap, TabBarExtraPosition } from '../interface';
 
 interface ExtraContentProps {
   position: TabBarExtraPosition;
   prefixCls: string;
   extra?: TabBarExtraContent;
 }
 
-const ExtraContent = React.forwardRef<HTMLDivElement, ExtraContentProps>(
-  ({ position, prefixCls, extra }, ref) => {
-    if (!extra) return null;
-
-    let content: React.ReactNode;
-
-    // Parse extra
-    let assertExtra: TabBarExtraMap = {};
-    if (typeof extra === 'object' && !React.isValidElement(extra)) {
-      assertExtra = extra as TabBarExtraMap;
-    } else {
-      assertExtra.right = extra;
-    }
-
-    if (position === 'right') {
-      content = assertExtra.right;
-    }
-
-    if (position === 'left') {
-      content = assertExtra.left;
-    }
-
-    return content ? (
-      <div className={`${prefixCls}-extra-content`} ref={ref}>
-        {content}
-      </div>
-    ) : null;
-  },
-);
+const ExtraContent = React.forwardRef<HTMLDivElement, ExtraContentProps>((props, ref) => {
+  const { position, prefixCls, extra } = props;
+  if (!extra) {
+    return null;
+  }
+
+  let content: React.ReactNode;
+
+  // Parse extra
+  let assertExtra: TabBarExtraMap = {};
+  if (typeof extra === 'object' && !React.isValidElement(extra)) {
+    assertExtra = extra as TabBarExtraMap;
+  } else {
+    assertExtra.right = extra;
+  }
+
+  if (position === 'right') {
+    content = assertExtra.right;
+  }
+
+  if (position === 'left') {
+    content = assertExtra.left;
+  }
+
+  return content ? (
+    <div className={`${prefixCls}-extra-content`} ref={ref}>
+      {content}
+    </div>
+  ) : null;
+});
 
 if (process.env.NODE_ENV !== 'production') {
   ExtraContent.displayName = 'ExtraContent';

diff --git a/src/TabNavList/OperationNode.tsx b/src/TabNavList/OperationNode.tsx
@@ -5,8 +5,8 @@ import KeyCode from 'rc-util/lib/KeyCode';
 import * as React from 'react';
 import { useEffect, useState } from 'react';
 import type { EditableConfig, Tab, TabsLocale } from '../interface';
-import AddButton from './AddButton';
 import { getRemovable } from '../util';
+import AddButton from './AddButton';
 
 export interface OperationNodeProps {
   prefixCls: string;
@@ -29,8 +29,8 @@ export interface OperationNodeProps {
   popupClassName?: string;
 }
 
-function OperationNode(
-  {
+const OperationNode = React.forwardRef<HTMLDivElement, OperationNodeProps>((props, ref) => {
+  const {
     prefixCls,
     id,
     tabs,
@@ -47,9 +47,7 @@ function OperationNode(
     onTabClick,
     getPopupContainer,
     popupClassName,
-  }: OperationNodeProps,
-  ref: React.Ref<HTMLDivElement>,
-) {
+  } = props;
   // ======================== Dropdown ========================
   const [open, setOpen] = useState(false);
   const [selectedKey, setSelectedKey] = useState<string>(null);
@@ -63,10 +61,7 @@ function OperationNode(
   function onRemoveTab(event: React.MouseEvent | React.KeyboardEvent, key: string) {
     event.preventDefault();
     event.stopPropagation();
-    editable.onEdit('remove', {
-      key,
-      event,
-    });
+    editable.onEdit('remove', { key, event });
   }
 
   const menu = (
@@ -83,7 +78,7 @@ function OperationNode(
       selectedKeys={[selectedKey]}
       aria-label={dropdownAriaLabel !== undefined ? dropdownAriaLabel : 'expanded dropdown'}
     >
-      {tabs.map(tab => {
+      {tabs.map<React.ReactNode>(tab => {
         const { closable, disabled, closeIcon, key, label } = tab;
         const removable = getRemovable(closable, closeIcon, editable, disabled);
         return (
@@ -156,7 +151,9 @@ function OperationNode(
         break;
       case KeyCode.SPACE:
       case KeyCode.ENTER:
-        if (selectedKey !== null) onTabClick(selectedKey, e);
+        if (selectedKey !== null) {
+          onTabClick(selectedKey, e);
+        }
         break;
     }
   }
@@ -189,7 +186,7 @@ function OperationNode(
     [`${dropdownPrefix}-rtl`]: rtl,
   });
 
-  const moreNode: React.ReactElement = mobile ? null : (
+  const moreNode: React.ReactNode = mobile ? null : (
     <Dropdown
       prefixCls={dropdownPrefix}
       overlay={menu}
@@ -225,10 +222,10 @@ function OperationNode(
       <AddButton prefixCls={prefixCls} locale={locale} editable={editable} />
     </div>
   );
-}
+});
 
 export default React.memo(
-  React.forwardRef(OperationNode),
+  OperationNode,
   (_, next) =>
     // https://github.com/ant-design/ant-design/issues/32544
     // We'd better remove syntactic sugar in `rc-menu` since this has perf issue

diff --git a/src/TabNavList/TabNode.tsx b/src/TabNavList/TabNode.tsx
@@ -20,19 +20,20 @@ export interface TabNodeProps {
   style?: React.CSSProperties;
 }
 
-function TabNode({
-  prefixCls,
-  id,
-  active,
-  tab: { key, label, disabled, closeIcon, icon },
-  closable,
-  renderWrapper,
-  removeAriaLabel,
-  editable,
-  onClick,
-  onFocus,
-  style,
-}: TabNodeProps) {
+const TabNode: React.FC<TabNodeProps> = props => {
+  const {
+    prefixCls,
+    id,
+    active,
+    tab: { key, label, disabled, closeIcon, icon },
+    closable,
+    renderWrapper,
+    removeAriaLabel,
+    editable,
+    onClick,
+    onFocus,
+    style,
+  } = props;
   const tabPrefix = `${prefixCls}-tab`;
 
   const removable = getRemovable(closable, closeIcon, editable, disabled);
@@ -47,10 +48,7 @@ function TabNode({
   function onRemoveTab(event: React.MouseEvent | React.KeyboardEvent) {
     event.preventDefault();
     event.stopPropagation();
-    editable.onEdit('remove', {
-      key,
-      event,
-    });
+    editable.onEdit('remove', { key, event });
   }
 
   const node: React.ReactElement = (
@@ -110,6 +108,6 @@ function TabNode({
   );
 
   return renderWrapper ? renderWrapper(node) : node;
-}
+};
 
 export default TabNode;
diff --git a/src/TabNavList/Wrapper.tsx b/src/TabNavList/Wrapper.tsx
@@ -10,15 +10,14 @@ export type TabNavListWrapperProps = Required<Omit<TabNavListProps, 'children' |
   TabNavListProps;
 
 // We have to create a TabNavList components.
-export default function TabNavListWrapper({ renderTabBar, ...restProps }: TabNavListWrapperProps) {
+const TabNavListWrapper: React.FC<TabNavListWrapperProps> = ({ renderTabBar, ...restProps }) => {
   const { tabs } = React.useContext(TabContext);
-
   if (renderTabBar) {
     const tabNavBarProps = {
       ...restProps,
 
       // Legacy support. We do not use this actually
-      panes: tabs.map(({ label, key, ...restTabProps }) => (
+      panes: tabs.map<React.ReactNode>(({ label, key, ...restTabProps }) => (
         <TabPane tab={label} key={key} tabKey={key} {...restTabProps} />
       )),
     };
@@ -27,4 +26,10 @@ export default function TabNavListWrapper({ renderTabBar, ...restProps }: TabNav
   }
 
   return <TabNavList {...restProps} />;
+};
+
+if (process.env.NODE_ENV !== 'production') {
+  TabNavListWrapper.displayName = 'TabNavListWrapper';
 }
+
+export default TabNavListWrapper;