From efa427072aaf2c57a543d67b219ed01317f1d40a Mon Sep 17 00:00:00 2001 From: thinkasany <117748716+thinkasany@users.noreply.github.com> Date: Sun, 9 Jul 2023 16:47:31 +0800 Subject: [PATCH] chore: code style optimization (#43458) --- components/badge/Ribbon.tsx | 23 ++-- components/badge/ScrollNumber.tsx | 124 +++++++++---------- components/button/LoadingIcon.tsx | 11 +- components/input/TextArea.tsx | 172 +++++++++++++-------------- components/typography/Typography.tsx | 80 ++++++------- 5 files changed, 194 insertions(+), 216 deletions(-) diff --git a/components/badge/Ribbon.tsx b/components/badge/Ribbon.tsx index 05760f6e93..453c071d0c 100644 --- a/components/badge/Ribbon.tsx +++ b/components/badge/Ribbon.tsx @@ -1,10 +1,10 @@ import classNames from 'classnames'; import * as React from 'react'; -import { ConfigContext } from '../config-provider'; import type { PresetColorType } from '../_util/colors'; +import { isPresetColor } from '../_util/colors'; import type { LiteralUnion } from '../_util/type'; +import { ConfigContext } from '../config-provider'; import useStyle from './style'; -import { isPresetColor } from '../_util/colors'; type RibbonPlacement = 'start' | 'end'; @@ -18,15 +18,16 @@ export interface RibbonProps { placement?: RibbonPlacement; } -const Ribbon: React.FC = ({ - className, - prefixCls: customizePrefixCls, - style, - color, - children, - text, - placement = 'end', -}) => { +const Ribbon: React.FC = (props) => { + const { + className, + prefixCls: customizePrefixCls, + style, + color, + children, + text, + placement = 'end', + } = props; const { getPrefixCls, direction } = React.useContext(ConfigContext); const prefixCls = getPrefixCls('ribbon', customizePrefixCls); const colorInPreset = isPresetColor(color, false); diff --git a/components/badge/ScrollNumber.tsx b/components/badge/ScrollNumber.tsx index 83eaafbde5..a71762ac2c 100644 --- a/components/badge/ScrollNumber.tsx +++ b/components/badge/ScrollNumber.tsx @@ -1,7 +1,7 @@ import classNames from 'classnames'; import * as React from 'react'; -import { ConfigContext } from '../config-provider'; import { cloneElement } from '../_util/reactNode'; +import { ConfigContext } from '../config-provider'; import SingleNumber from './SingleNumber'; export interface ScrollNumberProps { @@ -21,75 +21,67 @@ export interface ScrollNumberState { count?: string | number | null; } -const ScrollNumber = React.forwardRef( - ( - { - prefixCls: customizePrefixCls, - count, - className, - motionClassName, - style, - title, - show, - component: Component = 'sup', - children, - ...restProps - }, - ref, - ) => { - const { getPrefixCls } = React.useContext(ConfigContext); - const prefixCls = getPrefixCls('scroll-number', customizePrefixCls); +const ScrollNumber = React.forwardRef((props, ref) => { + const { + prefixCls: customizePrefixCls, + count, + className, + motionClassName, + style, + title, + show, + component: Component = 'sup', + children, + ...restProps + } = props; + const { getPrefixCls } = React.useContext(ConfigContext); + const prefixCls = getPrefixCls('scroll-number', customizePrefixCls); - // ============================ Render ============================ - const newProps = { - ...restProps, - 'data-show': show, - style, - className: classNames(prefixCls, className, motionClassName), - title: title as string, - }; + // ============================ Render ============================ + const newProps = { + ...restProps, + 'data-show': show, + style, + className: classNames(prefixCls, className, motionClassName), + title: title as string, + }; - // Only integer need motion - let numberNodes: React.ReactNode = count; - if (count && Number(count) % 1 === 0) { - const numberList = String(count).split(''); + // Only integer need motion + let numberNodes: React.ReactNode = count; + if (count && Number(count) % 1 === 0) { + const numberList = String(count).split(''); - numberNodes = numberList.map((num, i) => ( - - )); - } + numberNodes = numberList.map((num, i) => ( + + )); + } - // allow specify the border - // mock border-color by box-shadow for compatible with old usage: - // - if (style && style.borderColor) { - newProps.style = { - ...style, - boxShadow: `0 0 0 1px ${style.borderColor} inset`, - }; - } - if (children) { - return cloneElement(children, (oriProps) => ({ - className: classNames( - `${prefixCls}-custom-component`, - oriProps?.className, - motionClassName, - ), - })); - } + // allow specify the border + // mock border-color by box-shadow for compatible with old usage: + // + if (style && style.borderColor) { + newProps.style = { + ...style, + boxShadow: `0 0 0 1px ${style.borderColor} inset`, + }; + } + if (children) { + return cloneElement(children, (oriProps) => ({ + className: classNames(`${prefixCls}-custom-component`, oriProps?.className, motionClassName), + })); + } - return ( - - {numberNodes} - - ); - }, -); + return ( + + {numberNodes} + + ); +}); export default ScrollNumber; diff --git a/components/button/LoadingIcon.tsx b/components/button/LoadingIcon.tsx index 8b4cc16a4f..8ab9d6d291 100644 --- a/components/button/LoadingIcon.tsx +++ b/components/button/LoadingIcon.tsx @@ -1,7 +1,7 @@ import LoadingOutlined from '@ant-design/icons/LoadingOutlined'; +import classNames from 'classnames'; import CSSMotion from 'rc-motion'; import React, { forwardRef } from 'react'; -import classNames from 'classnames'; import IconWrapper from './IconWrapper'; type InnerLoadingIconProps = { @@ -43,13 +43,8 @@ const getRealWidth = (node: HTMLElement): React.CSSProperties => ({ transform: 'scale(1)', }); -const LoadingIcon: React.FC = ({ - prefixCls, - loading, - existIcon, - className, - style, -}) => { +const LoadingIcon: React.FC = (props) => { + const { prefixCls, loading, existIcon, className, style } = props; const visible = !!loading; if (existIcon) { diff --git a/components/input/TextArea.tsx b/components/input/TextArea.tsx index 5104fbcf76..e4d79a303f 100644 --- a/components/input/TextArea.tsx +++ b/components/input/TextArea.tsx @@ -29,103 +29,97 @@ export interface TextAreaRef { resizableTextArea?: RcTextAreaRef['resizableTextArea']; } -const TextArea = forwardRef( - ( - { - prefixCls: customizePrefixCls, - bordered = true, - size: customizeSize, - disabled: customDisabled, - status: customStatus, - allowClear, - showCount, - classNames: classes, - ...rest - }, - ref, - ) => { - const { getPrefixCls, direction } = React.useContext(ConfigContext); +const TextArea = forwardRef((props, ref) => { + const { + prefixCls: customizePrefixCls, + bordered = true, + size: customizeSize, + disabled: customDisabled, + status: customStatus, + allowClear, + showCount, + classNames: classes, + ...rest + } = props; + const { getPrefixCls, direction } = React.useContext(ConfigContext); - // ===================== Size ===================== - const mergedSize = useSize(customizeSize); + // ===================== Size ===================== + const mergedSize = useSize(customizeSize); - // ===================== Disabled ===================== - const disabled = React.useContext(DisabledContext); - const mergedDisabled = customDisabled ?? disabled; + // ===================== Disabled ===================== + const disabled = React.useContext(DisabledContext); + const mergedDisabled = customDisabled ?? disabled; - // ===================== Status ===================== - const { - status: contextStatus, - hasFeedback, - feedbackIcon, - } = React.useContext(FormItemInputContext); - const mergedStatus = getMergedStatus(contextStatus, customStatus); + // ===================== Status ===================== + const { + status: contextStatus, + hasFeedback, + feedbackIcon, + } = React.useContext(FormItemInputContext); + const mergedStatus = getMergedStatus(contextStatus, customStatus); - // ===================== Ref ===================== - const innerRef = React.useRef(null); + // ===================== Ref ===================== + const innerRef = React.useRef(null); - React.useImperativeHandle(ref, () => ({ - resizableTextArea: innerRef.current?.resizableTextArea, - focus: (option?: InputFocusOptions) => { - triggerFocus(innerRef.current?.resizableTextArea?.textArea, option); - }, - blur: () => innerRef.current?.blur(), - })); + React.useImperativeHandle(ref, () => ({ + resizableTextArea: innerRef.current?.resizableTextArea, + focus: (option?: InputFocusOptions) => { + triggerFocus(innerRef.current?.resizableTextArea?.textArea, option); + }, + blur: () => innerRef.current?.blur(), + })); - const prefixCls = getPrefixCls('input', customizePrefixCls); + const prefixCls = getPrefixCls('input', customizePrefixCls); - // Allow clear - let mergedAllowClear: BaseInputProps['allowClear']; - if (typeof allowClear === 'object' && allowClear?.clearIcon) { - mergedAllowClear = allowClear; - } else if (allowClear) { - mergedAllowClear = { clearIcon: }; - } + // Allow clear + let mergedAllowClear: BaseInputProps['allowClear']; + if (typeof allowClear === 'object' && allowClear?.clearIcon) { + mergedAllowClear = allowClear; + } else if (allowClear) { + mergedAllowClear = { clearIcon: }; + } - // ===================== Style ===================== - const [wrapSSR, hashId] = useStyle(prefixCls); + // ===================== Style ===================== + const [wrapSSR, hashId] = useStyle(prefixCls); - return wrapSSR( - {feedbackIcon} - } - showCount={showCount} - ref={innerRef} - />, - ); - }, -); + return wrapSSR( + {feedbackIcon}} + showCount={showCount} + ref={innerRef} + />, + ); +}); export default TextArea; diff --git a/components/typography/Typography.tsx b/components/typography/Typography.tsx index 9b78a906a1..9f46022494 100644 --- a/components/typography/Typography.tsx +++ b/components/typography/Typography.tsx @@ -1,9 +1,9 @@ import classNames from 'classnames'; import { composeRef } from 'rc-util/lib/ref'; import * as React from 'react'; +import warning from '../_util/warning'; import type { DirectionType } from '../config-provider'; import { ConfigContext } from '../config-provider'; -import warning from '../_util/warning'; import useStyle from './style'; export interface TypographyProps @@ -29,53 +29,49 @@ interface InternalTypographyProps const Typography = React.forwardRef< HTMLElement, InternalTypographyProps ->( - ( - { - prefixCls: customizePrefixCls, - component: Component = 'article', - className, - rootClassName, - setContentRef, - children, - direction: typographyDirection, - ...restProps - }, - ref, - ) => { - const { getPrefixCls, direction: contextDirection } = React.useContext(ConfigContext); +>((props, ref) => { + const { + prefixCls: customizePrefixCls, + component: Component = 'article', + className, + rootClassName, + setContentRef, + children, + direction: typographyDirection, + ...restProps + } = props; + const { getPrefixCls, direction: contextDirection } = React.useContext(ConfigContext); - const direction = typographyDirection ?? contextDirection; + const direction = typographyDirection ?? contextDirection; - let mergedRef = ref; - if (setContentRef) { - warning(false, 'Typography', '`setContentRef` is deprecated. Please use `ref` instead.'); - mergedRef = composeRef(ref, setContentRef); - } + let mergedRef = ref; + if (setContentRef) { + warning(false, 'Typography', '`setContentRef` is deprecated. Please use `ref` instead.'); + mergedRef = composeRef(ref, setContentRef); + } - const prefixCls = getPrefixCls('typography', customizePrefixCls); + const prefixCls = getPrefixCls('typography', customizePrefixCls); - // Style - const [wrapSSR, hashId] = useStyle(prefixCls); + // Style + const [wrapSSR, hashId] = useStyle(prefixCls); - const componentClassName = classNames( - prefixCls, - { - [`${prefixCls}-rtl`]: direction === 'rtl', - }, - className, - rootClassName, - hashId, - ); + const componentClassName = classNames( + prefixCls, + { + [`${prefixCls}-rtl`]: direction === 'rtl', + }, + className, + rootClassName, + hashId, + ); - return wrapSSR( - // @ts-expect-error: Expression produces a union type that is too complex to represent. - - {children} - , - ); - }, -); + return wrapSSR( + // @ts-expect-error: Expression produces a union type that is too complex to represent. + + {children} + , + ); +}); if (process.env.NODE_ENV !== 'production') { Typography.displayName = 'Typography';