style: simplify code

This commit is contained in:
lijianan 2023-10-14 11:57:53 +08:00 committed by GitHub
parent 73c0cd7b49
commit 34e0a3e0cf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -45,10 +45,6 @@ enum AffixStatus {
Prepare,
}
interface InternalAffixProps extends AffixProps {
affixPrefixCls: string;
}
interface AffixState {
affixStyle?: React.CSSProperties;
placeholderStyle?: React.CSSProperties;
@ -61,18 +57,23 @@ interface AffixRef {
updatePosition: ReturnType<typeof throttleByAnimationFrame>;
}
const InternalAffix = React.forwardRef<AffixRef, InternalAffixProps>((props, ref) => {
const Affix = React.forwardRef<AffixRef, AffixProps>((props, ref) => {
const {
style,
offsetTop,
offsetBottom,
affixPrefixCls,
prefixCls,
className,
rootClassName,
children,
target,
onChange,
} = props;
const { getPrefixCls, getTargetContainer } = React.useContext<ConfigConsumerProps>(ConfigContext);
const affixPrefixCls = getPrefixCls('affix', prefixCls);
const [lastAffix, setLastAffix] = React.useState(false);
const [affixStyle, setAffixStyle] = React.useState<React.CSSProperties>();
const [placeholderStyle, setPlaceholderStyle] = React.useState<React.CSSProperties>();
@ -86,8 +87,6 @@ const InternalAffix = React.forwardRef<AffixRef, InternalAffixProps>((props, ref
const fixedNodeRef = React.useRef<HTMLDivElement>(null);
const timer = React.useRef<ReturnType<typeof setTimeout> | null>(null);
const { getTargetContainer } = React.useContext<ConfigConsumerProps>(ConfigContext);
const targetFunc = target ?? getTargetContainer ?? getDefaultTarget;
const internalOffsetTop = offsetBottom === undefined && offsetTop === undefined ? 0 : offsetTop;
@ -244,10 +243,11 @@ const InternalAffix = React.forwardRef<AffixRef, InternalAffixProps>((props, ref
updatePosition();
}, [target, offsetTop, offsetBottom]);
const className = classNames({
[affixPrefixCls]: affixStyle,
[rootClassName!]: affixStyle && rootClassName,
});
const [wrapSSR, hashId] = useStyle(affixPrefixCls);
const rootCls = classNames(rootClassName, hashId, affixPrefixCls);
const mergedCls = classNames({ [rootCls]: affixStyle });
let otherProps = omit(props, [
'prefixCls',
@ -255,44 +255,25 @@ const InternalAffix = React.forwardRef<AffixRef, InternalAffixProps>((props, ref
'offsetBottom',
'target',
'onChange',
'affixPrefixCls',
'rootClassName',
]);
if (process.env.NODE_ENV === 'test') {
otherProps = omit(otherProps as typeof otherProps & { onTestUpdatePosition: any }, [
'onTestUpdatePosition',
]);
otherProps = omit(otherProps, ['onTestUpdatePosition' as any]);
}
return (
return wrapSSR(
<ResizeObserver onResize={updatePosition}>
<div style={style} ref={placeholderNodeRef} {...otherProps}>
<div style={style} className={className} ref={placeholderNodeRef} {...otherProps}>
{affixStyle && <div style={placeholderStyle} aria-hidden="true" />}
<div className={className} ref={fixedNodeRef} style={affixStyle}>
<div className={mergedCls} ref={fixedNodeRef} style={affixStyle}>
<ResizeObserver onResize={updatePosition}>{children}</ResizeObserver>
</div>
</div>
</ResizeObserver>
</ResizeObserver>,
);
});
const Affix = React.forwardRef<AffixRef, AffixProps>((props, ref) => {
const { prefixCls: customizePrefixCls, rootClassName } = props;
const { getPrefixCls } = React.useContext<ConfigConsumerProps>(ConfigContext);
const affixPrefixCls = getPrefixCls('affix', customizePrefixCls);
const [wrapSSR, hashId] = useStyle(affixPrefixCls);
const AffixProps: InternalAffixProps = {
...props,
affixPrefixCls,
rootClassName: classNames(rootClassName, hashId),
};
return wrapSSR(<InternalAffix {...AffixProps} ref={ref} />);
});
if (process.env.NODE_ENV !== 'production') {
Affix.displayName = 'Affix';
}