mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 11:10:01 +08:00
Code Issues Actions 25 Packages Projects Releases Wiki Activity

chore: use composeRef(ref, internalRef) replace ref || internalRef (#42036)

Browse Source 
* chore: use composeRef replace ref || internalRef

* style

* revert
This commit is contained in:
lijianan 2023-04-27 17:31:32 +08:00 committed by GitHub
parent 901957cf02
commit 4ecac35a29
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 46 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
components/button/button.tsx
View File

@ -1,7 +1,16 @@
/* eslint-disable react/button-has-type */
import classNames from 'classnames';
import omit from 'rc-util/lib/omit';
import * as React from 'react';
import { composeRef } from 'rc-util/lib/ref';
import React, {
Children,
createRef,
forwardRef,
useContext,
useEffect,
useMemo,
useState,
} from 'react';
import warning from '../_util/warning';
import Wave from '../_util/wave';
import { ConfigContext } from '../config-provider';
@ -110,48 +119,31 @@ const InternalButton: React.ForwardRefRenderFunction<
...rest
} = props;
const { getPrefixCls, autoInsertSpaceInButton, direction } = React.useContext(ConfigContext);
const { getPrefixCls, autoInsertSpaceInButton, direction } = useContext(ConfigContext);
const prefixCls = getPrefixCls('btn', customizePrefixCls);
const [wrapSSR, hashId] = useStyle(prefixCls);
const size = React.useContext(SizeContext);
const disabled = React.useContext(DisabledContext);
const size = useContext(SizeContext);
const disabled = useContext(DisabledContext);
const mergedDisabled = customDisabled ?? disabled;
const groupSize = React.useContext(GroupSizeContext);
const loadingOrDelay = React.useMemo<LoadingConfigType>(
() => getLoadingConfig(loading),
[loading],
);
const [innerLoading, setLoading] = React.useState<Loading>(loadingOrDelay.loading);
const [hasTwoCNChar, setHasTwoCNChar] = React.useState(false);
const groupSize = useContext(GroupSizeContext);
const internalRef = React.createRef<HTMLAnchorElement | HTMLButtonElement>();
const loadingOrDelay = useMemo<LoadingConfigType>(() => getLoadingConfig(loading), [loading]);
const buttonRef = (ref as React.RefObject<any>) || internalRef;
const [innerLoading, setLoading] = useState<Loading>(loadingOrDelay.loading);
const isNeedInserted = () =>
React.Children.count(children) === 1 && !icon && !isUnBorderedButtonType(type);
const [hasTwoCNChar, setHasTwoCNChar] = useState<boolean>(false);
const fixTwoCNChar = () => {
// FIXME: for HOC usage like <FormatMessage />
if (!buttonRef || !buttonRef.current || autoInsertSpaceInButton === false) {
return;
}
const buttonText = buttonRef.current.textContent;
if (isNeedInserted() && isTwoCNChar(buttonText)) {
if (!hasTwoCNChar) {
setHasTwoCNChar(true);
}
} else if (hasTwoCNChar) {
setHasTwoCNChar(false);
}
};
const internalRef = createRef<HTMLButtonElement | HTMLAnchorElement>();
React.useEffect(() => {
const buttonRef = composeRef(ref, internalRef);
const needInserted = Children.count(children) === 1 && !icon && !isUnBorderedButtonType(type);
useEffect(() => {
let delayTimer: NodeJS.Timer | null = null;
if (loadingOrDelay.delay > 0) {
delayTimer = setTimeout(() => {
delayTimer = null;
@ -171,7 +163,20 @@ const InternalButton: React.ForwardRefRenderFunction<
return cleanupTimer;
}, [loadingOrDelay]);
React.useEffect(fixTwoCNChar, [buttonRef]);
useEffect(() => {
// FIXME: for HOC usage like <FormatMessage />
if (!buttonRef || !(buttonRef as any).current || autoInsertSpaceInButton === false) {
return;
}
const buttonText = (buttonRef as any).current.textContent;
if (needInserted && isTwoCNChar(buttonText)) {
if (!hasTwoCNChar) {
setHasTwoCNChar(true);
}
} else if (hasTwoCNChar) {
setHasTwoCNChar(false);
}
}, [buttonRef]);
const handleClick = (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement, MouseEvent>) => {
const { onClick } = props;
@ -237,13 +242,16 @@ const InternalButton: React.ForwardRefRenderFunction<
);
const kids =
children || children === 0
? spaceChildren(children, isNeedInserted() && autoInsertSpace)
: null;
children || children === 0 ? spaceChildren(children, needInserted && autoInsertSpace) : null;
if (linkButtonRestProps.href !== undefined) {
return wrapSSR(
<a {...linkButtonRestProps} className={classes} onClick={handleClick} ref={buttonRef}>
<a
{...linkButtonRestProps}
className={classes}
onClick={handleClick}
ref={buttonRef as React.Ref<HTMLAnchorElement>}
>
{iconNode}
{kids}
</a>,
@ -257,7 +265,7 @@ const InternalButton: React.ForwardRefRenderFunction<
className={classes}
onClick={handleClick}
disabled={mergedDisabled}
ref={buttonRef}
ref={buttonRef as React.Ref<HTMLButtonElement>}
>
{iconNode}
{kids}
@ -271,7 +279,7 @@ const InternalButton: React.ForwardRefRenderFunction<
return wrapSSR(buttonNode);
};
const Button = React.forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(
const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(
InternalButton,
) as CompoundedComponent;