From a998569adb9617c7a47b04b15ab0e1ed639b2f53 Mon Sep 17 00:00:00 2001 From: Fly me to the moon <138013431+Negentropy247@users.noreply.github.com> Date: Sat, 8 Jul 2023 15:45:28 +0800 Subject: [PATCH 1/8] test: optimization type in test case (#43449) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * test: optimization type in test case * fix lint --------- Co-authored-by: 我们去月球漫步 <13105694+flymetothemoon-wj@user.noreply.gitee.com> --- .../date-picker/__tests__/DatePicker.test.tsx | 2 +- components/dropdown/__tests__/index.test.tsx | 2 +- tests/__mocks__/@rc-component/trigger.tsx | 13 ++++++------- 3 files changed, 8 insertions(+), 9 deletions(-) diff --git a/components/date-picker/__tests__/DatePicker.test.tsx b/components/date-picker/__tests__/DatePicker.test.tsx index 6df4622b3e..c7b7533ba1 100644 --- a/components/date-picker/__tests__/DatePicker.test.tsx +++ b/components/date-picker/__tests__/DatePicker.test.tsx @@ -21,7 +21,7 @@ jest.mock('@rc-component/trigger', () => { const h: typeof React = jest.requireActual('react'); return { - default: h.forwardRef((props, ref) => { + default: h.forwardRef((props, ref) => { triggerProps = props; return h.createElement(Trigger, { ref, ...props }); }), diff --git a/components/dropdown/__tests__/index.test.tsx b/components/dropdown/__tests__/index.test.tsx index fa3f15b081..0af4b9fcac 100644 --- a/components/dropdown/__tests__/index.test.tsx +++ b/components/dropdown/__tests__/index.test.tsx @@ -15,7 +15,7 @@ jest.mock('@rc-component/trigger', () => { const h: typeof React = jest.requireActual('react'); return { - default: h.forwardRef((props, ref) => { + default: h.forwardRef((props, ref) => { triggerProps = props; return h.createElement(Trigger, { ref, ...props }); }), diff --git a/tests/__mocks__/@rc-component/trigger.tsx b/tests/__mocks__/@rc-component/trigger.tsx index b9c9d5c88d..1c331e7774 100644 --- a/tests/__mocks__/@rc-component/trigger.tsx +++ b/tests/__mocks__/@rc-component/trigger.tsx @@ -1,4 +1,4 @@ -import type { TriggerProps } from '@rc-component/trigger'; +import type { TriggerProps, TriggerRef } from '@rc-component/trigger'; import MockTrigger from '@rc-component/trigger/lib/mock'; import * as React from 'react'; import { TriggerMockContext } from '../../shared/demoTestContext'; @@ -6,22 +6,21 @@ import { TriggerMockContext } from '../../shared/demoTestContext'; let OriginTrigger = jest.requireActual('@rc-component/trigger'); OriginTrigger = OriginTrigger.default ?? OriginTrigger; -const ForwardTrigger = React.forwardRef((props, ref) => { +const ForwardTrigger = React.forwardRef((props, ref) => { const context = React.useContext(TriggerMockContext); const mergedPopupVisible = context?.popupVisible ?? props.popupVisible; (global as any).triggerProps = props; - const mergedProps = { + const mergedProps: TriggerProps = { ...props, - ref, - popupVisible: mergedPopupVisible as boolean, + popupVisible: mergedPopupVisible, }; if (context?.mock === false) { - return ; + return ; } - return ; + return ; }); export default ForwardTrigger; From dcb4611e256bd16bdb1ad54285e168125891fd01 Mon Sep 17 00:00:00 2001 From: Fly me to the moon <138013431+Negentropy247@users.noreply.github.com> Date: Sat, 8 Jul 2023 17:39:59 +0800 Subject: [PATCH 2/8] type: replace unknown with TooltipRef (#43450) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: 我们去月球漫步 <13105694+flymetothemoon-wj@user.noreply.gitee.com> --- components/popover/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/popover/index.tsx b/components/popover/index.tsx index 23db59123e..42a7ddf9f6 100644 --- a/components/popover/index.tsx +++ b/components/popover/index.tsx @@ -4,7 +4,7 @@ import type { RenderFunction } from '../_util/getRenderPropValue'; import { getRenderPropValue } from '../_util/getRenderPropValue'; import { getTransitionName } from '../_util/motion'; import { ConfigContext } from '../config-provider'; -import type { AbstractTooltipProps } from '../tooltip'; +import type { AbstractTooltipProps, TooltipRef } from '../tooltip'; import Tooltip from '../tooltip'; import PurePanel from './PurePanel'; // CSSINJS @@ -28,7 +28,7 @@ const Overlay: React.FC = ({ title, content, prefixCls }) => ( ); -const Popover = React.forwardRef((props, ref) => { +const Popover = React.forwardRef((props, ref) => { const { prefixCls: customizePrefixCls, title, From 2cb72a7fc073a273726587dc7161942aeb9e11a7 Mon Sep 17 00:00:00 2001 From: liyunhe Date: Sat, 8 Jul 2023 18:55:26 +0800 Subject: [PATCH 3/8] demo: Update for Resolving deprecation of findDOMNode in StrictMode (#43451) Resolving deprecation of findDOMNode in StrictMode References: https://github.com/react-grid-layout/react-draggable/blob/master/CHANGELOG.md#440-may-12-2020 Signed-off-by: kookieaz --- components/modal/demo/modal-render.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/components/modal/demo/modal-render.tsx b/components/modal/demo/modal-render.tsx index f6d98c7f84..1ea4d01ade 100644 --- a/components/modal/demo/modal-render.tsx +++ b/components/modal/demo/modal-render.tsx @@ -71,6 +71,7 @@ const App: React.FC = () => { onStart(event, uiData)} >
{modal}
From 56e610252327e8a2ead1f2a09efe14166bfaf3dd Mon Sep 17 00:00:00 2001 From: thinkasany <117748716+thinkasany@users.noreply.github.com> Date: Sat, 8 Jul 2023 19:47:54 +0800 Subject: [PATCH 4/8] type: replace unknown with TooltipRef (#43452) --- components/popconfirm/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/popconfirm/index.tsx b/components/popconfirm/index.tsx index 9263c11357..5e3e8b5661 100644 --- a/components/popconfirm/index.tsx +++ b/components/popconfirm/index.tsx @@ -9,7 +9,7 @@ import { cloneElement } from '../_util/reactNode'; import type { ButtonProps, LegacyButtonType } from '../button/button'; import { ConfigContext } from '../config-provider'; import Popover from '../popover'; -import type { AbstractTooltipProps } from '../tooltip'; +import type { AbstractTooltipProps, TooltipRef } from '../tooltip'; import PurePanel, { Overlay } from './PurePanel'; import usePopconfirmStyle from './style'; @@ -37,7 +37,7 @@ export interface PopconfirmState { open?: boolean; } -const Popconfirm = React.forwardRef((props, ref) => { +const Popconfirm = React.forwardRef((props, ref) => { const { prefixCls: customizePrefixCls, placement = 'top', From cea3c72a09047416acfb6a82e3f271b02d197d29 Mon Sep 17 00:00:00 2001 From: thinkasany <117748716+thinkasany@users.noreply.github.com> Date: Sat, 8 Jul 2023 21:48:52 +0800 Subject: [PATCH 5/8] type: add RawPurePanelProps interface (#43453) * type(popover): add RawPurePanelProps interface * fix: optimize --- components/popover/PurePanel.tsx | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/components/popover/PurePanel.tsx b/components/popover/PurePanel.tsx index 29259c7f15..218583505f 100644 --- a/components/popover/PurePanel.tsx +++ b/components/popover/PurePanel.tsx @@ -25,7 +25,11 @@ export interface PurePanelProps extends Omit { children?: React.ReactNode; } -export function RawPurePanel(props: any) { +interface RawPurePanelProps extends PopoverProps { + hashId: string; +} + +export const RawPurePanel: React.FC = (props) => { const { hashId, prefixCls, @@ -50,13 +54,13 @@ export function RawPurePanel(props: any) { >
- {children || getOverlay(prefixCls, title, content)} + {children || getOverlay(prefixCls!, title, content)}
); -} +}; -export default function PurePanel(props: any) { +const PurePanel: React.FC = (props) => { const { prefixCls: customizePrefixCls, ...restProps } = props; const { getPrefixCls } = React.useContext(ConfigContext); @@ -64,4 +68,6 @@ export default function PurePanel(props: any) { const [wrapSSR, hashId] = useStyle(prefixCls); return wrapSSR(); -} +}; + +export default PurePanel; From b139dec6635df4c0cdc168077569e21b602572f0 Mon Sep 17 00:00:00 2001 From: thinkasany <117748716+thinkasany@users.noreply.github.com> Date: Sun, 9 Jul 2023 13:34:59 +0800 Subject: [PATCH 6/8] chore: code style optimization (#43457) * chore: Code style optimization * style: code optimize --- components/descriptions/Cell.tsx | 27 ++++++++++---------- components/descriptions/index.tsx | 41 +++++++++++++++++-------------- components/tooltip/index.tsx | 3 +-- 3 files changed, 38 insertions(+), 33 deletions(-) diff --git a/components/descriptions/Cell.tsx b/components/descriptions/Cell.tsx index fe7bd3ca2a..55256c8407 100644 --- a/components/descriptions/Cell.tsx +++ b/components/descriptions/Cell.tsx @@ -19,19 +19,20 @@ export interface CellProps { colon?: boolean; } -const Cell: React.FC = ({ - itemPrefixCls, - component, - span, - className, - style, - labelStyle, - contentStyle, - bordered, - label, - content, - colon, -}) => { +const Cell: React.FC = (props) => { + const { + itemPrefixCls, + component, + span, + className, + style, + labelStyle, + contentStyle, + bordered, + label, + content, + colon, + } = props; const Component = component as any; if (bordered) { diff --git a/components/descriptions/index.tsx b/components/descriptions/index.tsx index 2b5445e8db..0f012c2cf6 100644 --- a/components/descriptions/index.tsx +++ b/components/descriptions/index.tsx @@ -115,23 +115,28 @@ export interface DescriptionsProps { contentStyle?: React.CSSProperties; } -function Descriptions({ - prefixCls: customizePrefixCls, - title, - extra, - column = DEFAULT_COLUMN_MAP, - colon = true, - bordered, - layout, - children, - className, - rootClassName, - style, - size: customizeSize, - labelStyle, - contentStyle, - ...restProps -}: DescriptionsProps) { +type CompoundedComponent = React.FC & { + Item: typeof DescriptionsItem; +}; + +const Descriptions: CompoundedComponent = (props) => { + const { + prefixCls: customizePrefixCls, + title, + extra, + column = DEFAULT_COLUMN_MAP, + colon = true, + bordered, + layout, + children, + className, + rootClassName, + style, + size: customizeSize, + labelStyle, + contentStyle, + ...restProps + } = props; const { getPrefixCls, direction } = React.useContext(ConfigContext); const prefixCls = getPrefixCls('descriptions', customizePrefixCls); const [screens, setScreens] = React.useState({}); @@ -207,7 +212,7 @@ function Descriptions({ , ); -} +}; if (process.env.NODE_ENV !== 'production') { Descriptions.displayName = 'Descriptions'; diff --git a/components/tooltip/index.tsx b/components/tooltip/index.tsx index 4b7432b32d..4d3b402837 100644 --- a/components/tooltip/index.tsx +++ b/components/tooltip/index.tsx @@ -10,6 +10,7 @@ import useMergedState from 'rc-util/lib/hooks/useMergedState'; import type { CSSProperties } from 'react'; import * as React from 'react'; import type { PresetColorType } from '../_util/colors'; +import type { RenderFunction } from '../_util/getRenderPropValue'; import { getTransitionName } from '../_util/motion'; import type { AdjustOverflow, PlacementsConfig } from '../_util/placements'; import getPlacements from '../_util/placements'; @@ -110,8 +111,6 @@ export interface AbstractTooltipProps extends LegacyTooltipProps { destroyTooltipOnHide?: boolean | { keepParent?: boolean }; } -export type RenderFunction = () => React.ReactNode; - export interface TooltipPropsWithOverlay extends AbstractTooltipProps { title?: React.ReactNode | RenderFunction; overlay?: React.ReactNode | RenderFunction; From a5bb59c76c9cefc970b313349b66a9bde5f61f5a Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Sun, 9 Jul 2023 13:35:57 +0800 Subject: [PATCH 7/8] chore(deps): update dependency stylelint-prettier from v3 to v4 (#43456) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 9069268f0b..574c8c93c3 100644 --- a/package.json +++ b/package.json @@ -290,7 +290,7 @@ "stylelint": "^15.1.0", "stylelint-config-rational-order": "^0.1.2", "stylelint-config-standard": "^34.0.0", - "stylelint-prettier": "^3.0.0", + "stylelint-prettier": "^4.0.0", "sylvanas": "^0.6.1", "terser": "^5.16.1", "ts-node": "^10.8.2", 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 8/8] chore: code style optimization (#43458) --- components/badge/Ribbon.tsx | 25 ++-- components/badge/ScrollNumber.tsx | 128 +++++++++---------- components/button/LoadingIcon.tsx | 11 +- components/input/TextArea.tsx | 180 +++++++++++++-------------- components/typography/Typography.tsx | 86 ++++++------- 5 files changed, 204 insertions(+), 226 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 type { LiteralUnion } from '../_util/type'; -import useStyle from './style'; import { isPresetColor } from '../_util/colors'; +import type { LiteralUnion } from '../_util/type'; +import { ConfigContext } from '../config-provider'; +import useStyle from './style'; 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(''); + + 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), + })); + } - // 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) => ( - - )); - } - - // 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 +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); + + // ===================== Disabled ===================== + const disabled = React.useContext(DisabledContext); + const mergedDisabled = customDisabled ?? disabled; + + // ===================== Status ===================== + const { + status: contextStatus, + hasFeedback, + feedbackIcon, + } = React.useContext(FormItemInputContext); + const mergedStatus = getMergedStatus(contextStatus, customStatus); + + // ===================== Ref ===================== + const innerRef = React.useRef(null); + + React.useImperativeHandle(ref, () => ({ + resizableTextArea: innerRef.current?.resizableTextArea, + focus: (option?: InputFocusOptions) => { + triggerFocus(innerRef.current?.resizableTextArea?.textArea, option); }, - ref, - ) => { - const { getPrefixCls, direction } = React.useContext(ConfigContext); + blur: () => innerRef.current?.blur(), + })); - // ===================== Size ===================== - const mergedSize = useSize(customizeSize); + const prefixCls = getPrefixCls('input', customizePrefixCls); - // ===================== Disabled ===================== - const disabled = React.useContext(DisabledContext); - const mergedDisabled = customDisabled ?? disabled; + // Allow clear + let mergedAllowClear: BaseInputProps['allowClear']; + if (typeof allowClear === 'object' && allowClear?.clearIcon) { + mergedAllowClear = allowClear; + } else if (allowClear) { + mergedAllowClear = { clearIcon: }; + } - // ===================== Status ===================== - const { - status: contextStatus, - hasFeedback, - feedbackIcon, - } = React.useContext(FormItemInputContext); - const mergedStatus = getMergedStatus(contextStatus, customStatus); + // ===================== Style ===================== + const [wrapSSR, hashId] = useStyle(prefixCls); - // ===================== 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(), - })); - - const prefixCls = getPrefixCls('input', customizePrefixCls); - - // 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); - - 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 ->( - ( +>((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; + + let mergedRef = ref; + if (setContentRef) { + warning(false, 'Typography', '`setContentRef` is deprecated. Please use `ref` instead.'); + mergedRef = composeRef(ref, setContentRef); + } + + const prefixCls = getPrefixCls('typography', customizePrefixCls); + + // Style + const [wrapSSR, hashId] = useStyle(prefixCls); + + const componentClassName = classNames( + prefixCls, { - prefixCls: customizePrefixCls, - component: Component = 'article', - className, - rootClassName, - setContentRef, - children, - direction: typographyDirection, - ...restProps + [`${prefixCls}-rtl`]: direction === 'rtl', }, - ref, - ) => { - const { getPrefixCls, direction: contextDirection } = React.useContext(ConfigContext); + className, + rootClassName, + hashId, + ); - const direction = typographyDirection ?? contextDirection; - - let mergedRef = ref; - if (setContentRef) { - warning(false, 'Typography', '`setContentRef` is deprecated. Please use `ref` instead.'); - mergedRef = composeRef(ref, setContentRef); - } - - const prefixCls = getPrefixCls('typography', customizePrefixCls); - - // Style - const [wrapSSR, hashId] = useStyle(prefixCls); - - 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';