From 130c22ab03db22013d51ada03b427ffde01085c2 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Sun, 8 Jan 2023 15:36:50 +0800 Subject: [PATCH] style: Code style optimization (#40083) * style: Code style optimization * add * rename * rename * revert * revert * revert * add --- .dumi/theme/common/JSONEditor/index.tsx | 8 ++--- components/_util/ActionButton.tsx | 32 ++++++++++++------- components/transfer/index.tsx | 41 +++++++++++-------------- 3 files changed, 41 insertions(+), 40 deletions(-) diff --git a/.dumi/theme/common/JSONEditor/index.tsx b/.dumi/theme/common/JSONEditor/index.tsx index 0f5858fb20..87ef6b4ef3 100644 --- a/.dumi/theme/common/JSONEditor/index.tsx +++ b/.dumi/theme/common/JSONEditor/index.tsx @@ -12,16 +12,12 @@ const Editor: React.FC = (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
; diff --git a/components/_util/ActionButton.tsx b/components/_util/ActionButton.tsx index 298b668b0f..410e9aad24 100644 --- a/components/_util/ActionButton.tsx +++ b/components/_util/ActionButton.tsx @@ -16,24 +16,36 @@ export interface ActionButtonProps { children?: React.ReactNode; } -function isThenable(thing?: PromiseLike): boolean { - return !!(thing && !!thing.then); +function isThenable(thing?: PromiseLike): boolean { + return !!(thing && thing.then); } const ActionButton: React.FC = (props) => { + const { + type, + children, + prefixCls, + buttonProps, + close, + autoFocus, + emitEvent, + quitOnNullishReturnValue, + actionFn, + } = props; + const clickedRef = React.useRef(false); - const ref = React.useRef(null); + const buttonRef = React.useRef(null); const [loading, setLoading] = useState(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 = (props) => { }; const onClick = (e: React.MouseEvent) => { - const { actionFn } = props; if (clickedRef.current) { return; } @@ -74,9 +85,9 @@ const ActionButton: React.FC = (props) => { return; } let returnValueOfOnOk: PromiseLike; - 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 = (props) => { handlePromiseOnOk(returnValueOfOnOk); }; - const { type, children, prefixCls, buttonProps } = props; return ( diff --git a/components/transfer/index.tsx b/components/transfer/index.tsx index 1e43355c1f..54ffe9bc91 100644 --- a/components/transfer/index.tsx +++ b/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 = ( onSelectChange, } = props; - const [sourceSelectedKeys, setSourceSelectedKeys] = useState( + const [sourceSelectedKeys, setSourceSelectedKeys] = useState(() => selectedKeys.filter((key) => !targetKeys.includes(key)), ); - const [targetSelectedKeys, setTargetSelectedKeys] = useState( + const [targetSelectedKeys, setTargetSelectedKeys] = useState(() => selectedKeys.filter((key) => targetKeys.includes(key)), ); @@ -306,34 +306,31 @@ const Transfer = ( ); }; - const handleListStyle = ( - listStyles: TransferProps['listStyle'], - direction: TransferDirection, - ): CSSProperties => { - if (typeof listStyles === 'function') { - return listStyles({ direction }); + const handleListStyle = (direction: TransferDirection): CSSProperties => { + if (typeof listStyle === 'function') { + return listStyle({ direction }); } - return listStyles || {}; + return listStyle || {}; }; - const separateDataSource = () => { - const leftDataSource: KeyWise[] = []; - const rightDataSource: KeyWise[] = new Array(targetKeys.length); + const [leftDataSource, rightDataSource] = useMemo(() => { + const leftData: KeyWise[] = []; + const rightData: KeyWise[] = new Array(targetKeys.length); const targetKeysMap = groupKeysMap(targetKeys); dataSource.forEach((record: KeyWise) => { if (rowKey) { record = { ...record, key: rowKey(record) }; } - // rightDataSource should be ordered by targetKeys - // leftDataSource should be ordered by dataSource + // rightData should be ordered by targetKeys + // 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(ConfigContext); const formItemContext = useContext(FormItemInputContext); @@ -345,8 +342,6 @@ const Transfer = ( 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 = ( 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 = ( titleText={rightTitle} dataSource={rightDataSource} filterOption={filterOption} - style={handleListStyle(listStyle, 'right')} + style={handleListStyle('right')} checkedKeys={targetSelectedKeys} handleFilter={rightFilter} handleClear={handleRightClear}