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

refactor: Space support css var (#45869)

Browse Source
This commit is contained in:
JarvisArt 2023-11-14 16:28:11 +08:00 committed by GitHub
parent b9d3941698
commit 9554807ca3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 15 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/space/Compact.tsx
View File

@ -8,6 +8,7 @@ import type { SizeType } from '../config-provider/SizeContext';
import useSize from '../config-provider/hooks/useSize';
import useStyle from './style';
import useCSSVar from './style/cssVar';
export interface SpaceCompactItemContextType {
compactSize?: SizeType;
@ -80,7 +81,8 @@ const Compact: React.FC<SpaceCompactProps> = (props) => {
const mergedSize = useSize((ctx) => size ?? ctx);
const prefixCls = getPrefixCls('space-compact', customizePrefixCls);
const [wrapSSR, hashId] = useStyle(prefixCls);
const [, hashId] = useStyle(prefixCls);
const wrapCSSVar = useCSSVar(prefixCls);
const clx = classNames(
prefixCls,
hashId,
@ -122,7 +124,7 @@ const Compact: React.FC<SpaceCompactProps> = (props) => {
return null;
}
return wrapSSR(
return wrapCSSVar(
<div className={clx} {...restProps}>
{nodes}
</div>,

6
components/space/index.tsx
View File

@ -10,6 +10,7 @@ import { SpaceContextProvider } from './context';
import type { SpaceContextType } from './context';
import Item from './Item';
import useStyle from './style';
import useCSSVar from './style/cssVar';
export { SpaceContext } from './context';
@ -63,7 +64,8 @@ const Space = React.forwardRef<HTMLDivElement, SpaceProps>((props, ref) => {
const mergedAlign = align === undefined && direction === 'horizontal' ? 'center' : align;
const prefixCls = getPrefixCls('space', customizePrefixCls);
const [wrapSSR, hashId] = useStyle(prefixCls);
const [, hashId] = useStyle(prefixCls);
const wrapCSSVar = useCSSVar(prefixCls);
const cls = classNames(
prefixCls,
@ -128,7 +130,7 @@ const Space = React.forwardRef<HTMLDivElement, SpaceProps>((props, ref) => {
gapStyle.rowGap = verticalSize;
}
return wrapSSR(
return wrapCSSVar(
<div
ref={ref}
className={cls}

4
components/space/style/cssVar.ts Normal file
View File

@ -0,0 +1,4 @@
import { genCSSVarRegister } from '../../theme/internal';
import { prepareComponentToken } from '.';
export default genCSSVarRegister('Space', prepareComponentToken);

4
components/space/style/index.ts
View File

@ -1,4 +1,4 @@
import type { FullToken, GenerateStyle } from '../../theme/internal';
import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
import genSpaceCompactStyle from './compact';
@ -74,6 +74,8 @@ const genSpaceGapStyle: GenerateStyle<SpaceToken> = (token) => {
};
// ============================== Export ==============================
export const prepareComponentToken: GetDefaultToken<'Space'> = () => ({});
export default genComponentStyleHook(
'Space',
(token) => {