style: Code style optimization (#40083)

* style: Code style optimization

* add

* rename

* rename

* revert

* revert

* revert

* add

.dumi/theme/common/JSONEditor/index.tsx

@@ -12,16 +12,12 @@ const Editor: React.FC<JSONEditorPropsOptional> = (props) => {
       props: { mode: Mode.text },
     });
     return () => {
-      if (editorRef.current) {
+      editorRef.current?.destroy();
-        editorRef.current.destroy();
-      }
     };
   }, []);
 
   useEffect(() => {
-    if (editorRef.current) {
+    editorRef.current?.updateProps(props);
-      editorRef.current.updateProps(props);
-    }
   }, [props]);
 
   return <div ref={container} className="vanilla-jsoneditor-react" />;

components/_util/ActionButton.tsx

@@ -16,24 +16,36 @@ export interface ActionButtonProps {
   children?: React.ReactNode;
 }
 
-function isThenable(thing?: PromiseLike<any>): boolean {
+function isThenable<T extends any>(thing?: PromiseLike<T>): boolean {
-  return !!(thing && !!thing.then);
+  return !!(thing && thing.then);
 }
 
 const ActionButton: React.FC<ActionButtonProps> = (props) => {
+  const {
+    type,
+    children,
+    prefixCls,
+    buttonProps,
+    close,
+    autoFocus,
+    emitEvent,
+    quitOnNullishReturnValue,
+    actionFn,
+  } = props;
+
   const clickedRef = React.useRef<boolean>(false);
-  const ref = React.useRef<HTMLInputElement>(null);
+  const buttonRef = React.useRef<HTMLButtonElement | HTMLAnchorElement>(null);
   const [loading, setLoading] = useState<ButtonProps['loading']>(false);
-  const { close } = props;
+
   const onInternalClose = (...args: any[]) => {
     close?.(...args);
   };
 
   React.useEffect(() => {
     let timeoutId: NodeJS.Timer | null = null;
-    if (props.autoFocus) {
+    if (autoFocus) {
       timeoutId = setTimeout(() => {
-        ref.current?.focus();
+        buttonRef.current?.focus();
       });
     }
     return () => {
@@ -64,7 +76,6 @@ const ActionButton: React.FC<ActionButtonProps> = (props) => {
   };
 
   const onClick = (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
-    const { actionFn } = props;
     if (clickedRef.current) {
       return;
     }
@@ -74,9 +85,9 @@ const ActionButton: React.FC<ActionButtonProps> = (props) => {
       return;
     }
     let returnValueOfOnOk: PromiseLike<any>;
-    if (props.emitEvent) {
+    if (emitEvent) {
       returnValueOfOnOk = actionFn(e);
-      if (props.quitOnNullishReturnValue && !isThenable(returnValueOfOnOk)) {
+      if (quitOnNullishReturnValue && !isThenable(returnValueOfOnOk)) {
         clickedRef.current = false;
         onInternalClose(e);
         return;
@@ -95,7 +106,6 @@ const ActionButton: React.FC<ActionButtonProps> = (props) => {
     handlePromiseOnOk(returnValueOfOnOk);
   };
 
-  const { type, children, prefixCls, buttonProps } = props;
   return (
     <Button
       {...convertLegacyProps(type)}
@@ -103,7 +113,7 @@ const ActionButton: React.FC<ActionButtonProps> = (props) => {
       loading={loading}
       prefixCls={prefixCls}
       {...buttonProps}
-      ref={ref}
+      ref={buttonRef}
     >
       {children}
     </Button>

components/transfer/index.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { useCallback, useContext, useEffect, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import type { ChangeEvent, CSSProperties } from 'react';
 import type { ConfigConsumerProps, RenderEmptyHandler } from '../config-provider';
 import { ConfigContext } from '../config-provider';
@@ -153,11 +153,11 @@ const Transfer = <RecordType extends TransferItem = TransferItem>(
     onSelectChange,
   } = props;
 
-  const [sourceSelectedKeys, setSourceSelectedKeys] = useState<string[]>(
+  const [sourceSelectedKeys, setSourceSelectedKeys] = useState<string[]>(() =>
     selectedKeys.filter((key) => !targetKeys.includes(key)),
   );
 
-  const [targetSelectedKeys, setTargetSelectedKeys] = useState<string[]>(
+  const [targetSelectedKeys, setTargetSelectedKeys] = useState<string[]>(() =>
     selectedKeys.filter((key) => targetKeys.includes(key)),
   );
 
@@ -306,34 +306,31 @@ const Transfer = <RecordType extends TransferItem = TransferItem>(
     );
   };
 
-  const handleListStyle = (
+  const handleListStyle = (direction: TransferDirection): CSSProperties => {
-    listStyles: TransferProps<RecordType>['listStyle'],
+    if (typeof listStyle === 'function') {
-    direction: TransferDirection,
+      return listStyle({ direction });
-  ): CSSProperties => {
-    if (typeof listStyles === 'function') {
-      return listStyles({ direction });
     }
-    return listStyles || {};
+    return listStyle || {};
   };
 
-  const separateDataSource = () => {
+  const [leftDataSource, rightDataSource] = useMemo(() => {
-    const leftDataSource: KeyWise<RecordType>[] = [];
+    const leftData: KeyWise<RecordType>[] = [];
-    const rightDataSource: KeyWise<RecordType>[] = new Array(targetKeys.length);
+    const rightData: KeyWise<RecordType>[] = new Array(targetKeys.length);
     const targetKeysMap = groupKeysMap(targetKeys);
     dataSource.forEach((record: KeyWise<RecordType>) => {
       if (rowKey) {
         record = { ...record, key: rowKey(record) };
       }
-      // rightDataSource should be ordered by targetKeys
+      // rightData should be ordered by targetKeys
-      // leftDataSource should be ordered by dataSource
+      // leftData should be ordered by dataSource
       if (targetKeysMap.has(record.key)) {
-        rightDataSource[targetKeysMap.get(record.key)!] = record;
+        rightData[targetKeysMap.get(record.key)!] = record;
       } else {
-        leftDataSource.push(record);
+        leftData.push(record);
       }
     });
-    return { leftDataSource, rightDataSource };
+    return [leftData, rightData] as const;
-  };
+  }, [dataSource, targetKeys, rowKey]);
 
   const configContext = useContext<ConfigConsumerProps>(ConfigContext);
   const formItemContext = useContext<FormItemStatusContextProps>(FormItemInputContext);
@@ -345,8 +342,6 @@ const Transfer = <RecordType extends TransferItem = TransferItem>(
   const mergedStatus = getMergedStatus(status, customStatus);
   const mergedPagination = !children && pagination;
 
-  const { leftDataSource, rightDataSource } = separateDataSource();
-
   const leftActive = targetSelectedKeys.length > 0;
   const rightActive = sourceSelectedKeys.length > 0;
 
@@ -373,7 +368,7 @@ const Transfer = <RecordType extends TransferItem = TransferItem>(
               titleText={leftTitle}
               dataSource={leftDataSource}
               filterOption={filterOption}
-              style={handleListStyle(listStyle, 'left')}
+              style={handleListStyle('left')}
               checkedKeys={sourceSelectedKeys}
               handleFilter={leftFilter}
               handleClear={handleLeftClear}
@@ -409,7 +404,7 @@ const Transfer = <RecordType extends TransferItem = TransferItem>(
               titleText={rightTitle}
               dataSource={rightDataSource}
               filterOption={filterOption}
-              style={handleListStyle(listStyle, 'right')}
+              style={handleListStyle('right')}
               checkedKeys={targetSelectedKeys}
               handleFilter={rightFilter}
               handleClear={handleRightClear}