test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-11-30 19:19:26 +08:00
Code Issues Actions 69 Packages Projects Releases Wiki Activity

style: simplify code

Browse Source
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
1 changed files with 17 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
components/affix/index.tsx
View File

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