source/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2026-02-09 02:49:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(Masonry): 🛠 use genCssVar hook to generate CSS variables (#56547)

Browse Source
This commit is contained in:
lijianan
2026-01-09 22:46:31 +08:00
committed by GitHub
parent 75ddcdfd00
commit 584923d35b
3 changed files with 90 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
components/masonry/Masonry.tsx
View File

@@ -16,6 +16,7 @@ import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
import type { RowProps } from '../grid';
import useBreakpoint from '../grid/hooks/useBreakpoint';
import useGutter from '../grid/hooks/useGutter';
import { genCssVar } from '../theme/util/genStyleUtils';
import useDelay from './hooks/useDelay';
import usePositions from './hooks/usePositions';
import type { ItemHeightData } from './hooks/usePositions';
@@ -92,9 +93,12 @@ const Masonry = React.forwardRef<MasonryRef, MasonryProps>((props, ref) => {
} = useComponentConfig('masonry');
const prefixCls = getPrefixCls('masonry', customizePrefixCls);
const rootPrefixCls = getPrefixCls();
const rootCls = useCSSVarCls(prefixCls);
const [hashId, cssVarCls] = useStyle(prefixCls, rootCls);
const [varName, varRef] = genCssVar(rootPrefixCls, 'masonry');
// ======================= Refs =======================
const containerRef = React.useRef<HTMLDivElement>(null);
@@ -231,12 +235,7 @@ const Masonry = React.forwardRef<MasonryRef, MasonryProps>((props, ref) => {
cssVarCls,
{ [`${prefixCls}-rtl`]: direction === 'rtl' },
)}
style={{
height: totalHeight,
...mergedStyles.root,
...contextStyle,
...style,
}}
style={{ height: totalHeight, ...mergedStyles.root, ...contextStyle, ...style }}
// Listen for image events
onLoad={collectItemSize}
onError={collectItemSize}
@@ -263,9 +262,9 @@ const Masonry = React.forwardRef<MasonryRef, MasonryProps>((props, ref) => {
const { column: columnIndex = 0 } = position;
const itemStyle: CSSProperties = {
'--item-width': `calc((100% + ${horizontalGutter}px) / ${columnCount})`,
insetInlineStart: `calc(var(--item-width) * ${columnIndex})`,
width: `calc(var(--item-width) - ${horizontalGutter}px)`,
[varName('item-width')]: `calc((100% + ${horizontalGutter}px) / ${columnCount})`,
insetInlineStart: `calc(${varRef('item-width')} * ${columnIndex})`,
width: `calc(${varRef('item-width')} - ${horizontalGutter}px)`,
top: position.top,
position: 'absolute',
};

150
components/masonry/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@@ -7,7 +7,7 @@ exports[`renders components/masonry/demo/basic.tsx extend context correctly 1`]
>
<div
class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
>
<div
class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -22,7 +22,7 @@ exports[`renders components/masonry/demo/basic.tsx extend context correctly 1`]
</div>
<div
class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
>
<div
class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -37,7 +37,7 @@ exports[`renders components/masonry/demo/basic.tsx extend context correctly 1`]
</div>
<div
class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
>
<div
class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -52,7 +52,7 @@ exports[`renders components/masonry/demo/basic.tsx extend context correctly 1`]
</div>
<div
class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
>
<div
class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -67,7 +67,7 @@ exports[`renders components/masonry/demo/basic.tsx extend context correctly 1`]
</div>
<div
class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
>
<div
class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -106,7 +106,7 @@ exports[`renders components/masonry/demo/basic.tsx extend context correctly 1`]
</div>
<div
class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
>
<div
class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -121,7 +121,7 @@ exports[`renders components/masonry/demo/basic.tsx extend context correctly 1`]
</div>
<div
class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
>
<div
class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -136,7 +136,7 @@ exports[`renders components/masonry/demo/basic.tsx extend context correctly 1`]
</div>
<div
class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
>
<div
class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -151,7 +151,7 @@ exports[`renders components/masonry/demo/basic.tsx extend context correctly 1`]
</div>
<div
class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
>
<div
class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -166,7 +166,7 @@ exports[`renders components/masonry/demo/basic.tsx extend context correctly 1`]
</div>
<div
class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
>
<div
class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -181,7 +181,7 @@ exports[`renders components/masonry/demo/basic.tsx extend context correctly 1`]
</div>
<div
class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
>
<div
class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -196,7 +196,7 @@ exports[`renders components/masonry/demo/basic.tsx extend context correctly 1`]
</div>
<div
class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
>
<div
class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -211,7 +211,7 @@ exports[`renders components/masonry/demo/basic.tsx extend context correctly 1`]
</div>
<div
class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
>
<div
class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -226,7 +226,7 @@ exports[`renders components/masonry/demo/basic.tsx extend context correctly 1`]
</div>
<div
class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
>
<div
class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -241,7 +241,7 @@ exports[`renders components/masonry/demo/basic.tsx extend context correctly 1`]
</div>
<div
class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
>
<div
class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -266,7 +266,7 @@ exports[`renders components/masonry/demo/fresh.tsx extend context correctly 1`]
>
<div
class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
>
<div
class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -281,7 +281,7 @@ exports[`renders components/masonry/demo/fresh.tsx extend context correctly 1`]
</div>
<div
class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
>
<div
class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -296,7 +296,7 @@ exports[`renders components/masonry/demo/fresh.tsx extend context correctly 1`]
</div>
<div
class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
>
<div
class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -311,7 +311,7 @@ exports[`renders components/masonry/demo/fresh.tsx extend context correctly 1`]
</div>
<div
class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
>
<div
class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -326,7 +326,7 @@ exports[`renders components/masonry/demo/fresh.tsx extend context correctly 1`]
</div>
<div
class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
>
<div
class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -341,7 +341,7 @@ exports[`renders components/masonry/demo/fresh.tsx extend context correctly 1`]
</div>
<div
class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
>
<div
class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -356,7 +356,7 @@ exports[`renders components/masonry/demo/fresh.tsx extend context correctly 1`]
</div>
<div
class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
>
<div
class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -371,7 +371,7 @@ exports[`renders components/masonry/demo/fresh.tsx extend context correctly 1`]
</div>
<div
class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
>
<div
class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -386,7 +386,7 @@ exports[`renders components/masonry/demo/fresh.tsx extend context correctly 1`]
</div>
<div
class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
>
<div
class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -401,7 +401,7 @@ exports[`renders components/masonry/demo/fresh.tsx extend context correctly 1`]
</div>
<div
class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
>
<div
class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -416,7 +416,7 @@ exports[`renders components/masonry/demo/fresh.tsx extend context correctly 1`]
</div>
<div
class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
>
<div
class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -431,7 +431,7 @@ exports[`renders components/masonry/demo/fresh.tsx extend context correctly 1`]
</div>
<div
class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
>
<div
class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -446,7 +446,7 @@ exports[`renders components/masonry/demo/fresh.tsx extend context correctly 1`]
</div>
<div
class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
>
<div
class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -461,7 +461,7 @@ exports[`renders components/masonry/demo/fresh.tsx extend context correctly 1`]
</div>
<div
class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
>
<div
class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -476,7 +476,7 @@ exports[`renders components/masonry/demo/fresh.tsx extend context correctly 1`]
</div>
<div
class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
>
<div
class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -501,7 +501,7 @@ exports[`renders components/masonry/demo/image.tsx extend context correctly 1`]
>
<div
class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
>
<img
alt="sample"
@@ -511,7 +511,7 @@ exports[`renders components/masonry/demo/image.tsx extend context correctly 1`]
</div>
<div
class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
>
<img
alt="sample"
@@ -521,7 +521,7 @@ exports[`renders components/masonry/demo/image.tsx extend context correctly 1`]
</div>
<div
class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
>
<img
alt="sample"
@@ -531,7 +531,7 @@ exports[`renders components/masonry/demo/image.tsx extend context correctly 1`]
</div>
<div
class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
>
<img
alt="sample"
@@ -541,7 +541,7 @@ exports[`renders components/masonry/demo/image.tsx extend context correctly 1`]
</div>
<div
class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
>
<img
alt="sample"
@@ -551,7 +551,7 @@ exports[`renders components/masonry/demo/image.tsx extend context correctly 1`]
</div>
<div
class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
>
<img
alt="sample"
@@ -561,7 +561,7 @@ exports[`renders components/masonry/demo/image.tsx extend context correctly 1`]
</div>
<div
class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
>
<img
alt="sample"
@@ -571,7 +571,7 @@ exports[`renders components/masonry/demo/image.tsx extend context correctly 1`]
</div>
<div
class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
>
<img
alt="sample"
@@ -581,7 +581,7 @@ exports[`renders components/masonry/demo/image.tsx extend context correctly 1`]
</div>
<div
class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
>
<img
alt="sample"
@@ -591,7 +591,7 @@ exports[`renders components/masonry/demo/image.tsx extend context correctly 1`]
</div>
<div
class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
>
<img
alt="sample"
@@ -601,7 +601,7 @@ exports[`renders components/masonry/demo/image.tsx extend context correctly 1`]
</div>
<div
class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
>
<img
alt="sample"
@@ -611,7 +611,7 @@ exports[`renders components/masonry/demo/image.tsx extend context correctly 1`]
</div>
<div
class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
>
<img
alt="sample"
@@ -621,7 +621,7 @@ exports[`renders components/masonry/demo/image.tsx extend context correctly 1`]
</div>
<div
class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
>
<img
alt="sample"
@@ -631,7 +631,7 @@ exports[`renders components/masonry/demo/image.tsx extend context correctly 1`]
</div>
<div
class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
>
<img
alt="sample"
@@ -641,7 +641,7 @@ exports[`renders components/masonry/demo/image.tsx extend context correctly 1`]
</div>
<div
class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
>
<img
alt="sample"
@@ -651,7 +651,7 @@ exports[`renders components/masonry/demo/image.tsx extend context correctly 1`]
</div>
<div
class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
>
<img
alt="sample"
@@ -671,7 +671,7 @@ exports[`renders components/masonry/demo/responsive.tsx extend context correctly
>
<div
class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="--item-width: calc((100% + 8px) / 1); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 8px); position: absolute;"
style="--ant-masonry-item-width: calc((100% + 8px) / 1); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 8px); position: absolute;"
>
<div
class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -686,7 +686,7 @@ exports[`renders components/masonry/demo/responsive.tsx extend context correctly
</div>
<div
class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="--item-width: calc((100% + 8px) / 1); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 8px); position: absolute;"
style="--ant-masonry-item-width: calc((100% + 8px) / 1); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 8px); position: absolute;"
>
<div
class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -701,7 +701,7 @@ exports[`renders components/masonry/demo/responsive.tsx extend context correctly
</div>
<div
class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="--item-width: calc((100% + 8px) / 1); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 8px); position: absolute;"
style="--ant-masonry-item-width: calc((100% + 8px) / 1); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 8px); position: absolute;"
>
<div
class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -716,7 +716,7 @@ exports[`renders components/masonry/demo/responsive.tsx extend context correctly
</div>
<div
class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="--item-width: calc((100% + 8px) / 1); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 8px); position: absolute;"
style="--ant-masonry-item-width: calc((100% + 8px) / 1); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 8px); position: absolute;"
>
<div
class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -731,7 +731,7 @@ exports[`renders components/masonry/demo/responsive.tsx extend context correctly
</div>
<div
class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="--item-width: calc((100% + 8px) / 1); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 8px); position: absolute;"
style="--ant-masonry-item-width: calc((100% + 8px) / 1); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 8px); position: absolute;"
>
<div
class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -746,7 +746,7 @@ exports[`renders components/masonry/demo/responsive.tsx extend context correctly
</div>
<div
class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="--item-width: calc((100% + 8px) / 1); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 8px); position: absolute;"
style="--ant-masonry-item-width: calc((100% + 8px) / 1); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 8px); position: absolute;"
>
<div
class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -761,7 +761,7 @@ exports[`renders components/masonry/demo/responsive.tsx extend context correctly
</div>
<div
class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="--item-width: calc((100% + 8px) / 1); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 8px); position: absolute;"
style="--ant-masonry-item-width: calc((100% + 8px) / 1); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 8px); position: absolute;"
>
<div
class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -776,7 +776,7 @@ exports[`renders components/masonry/demo/responsive.tsx extend context correctly
</div>
<div
class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="--item-width: calc((100% + 8px) / 1); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 8px); position: absolute;"
style="--ant-masonry-item-width: calc((100% + 8px) / 1); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 8px); position: absolute;"
>
<div
class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -791,7 +791,7 @@ exports[`renders components/masonry/demo/responsive.tsx extend context correctly
</div>
<div
class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="--item-width: calc((100% + 8px) / 1); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 8px); position: absolute;"
style="--ant-masonry-item-width: calc((100% + 8px) / 1); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 8px); position: absolute;"
>
<div
class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -806,7 +806,7 @@ exports[`renders components/masonry/demo/responsive.tsx extend context correctly
</div>
<div
class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="--item-width: calc((100% + 8px) / 1); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 8px); position: absolute;"
style="--ant-masonry-item-width: calc((100% + 8px) / 1); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 8px); position: absolute;"
>
<div
class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -821,7 +821,7 @@ exports[`renders components/masonry/demo/responsive.tsx extend context correctly
</div>
<div
class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="--item-width: calc((100% + 8px) / 1); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 8px); position: absolute;"
style="--ant-masonry-item-width: calc((100% + 8px) / 1); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 8px); position: absolute;"
>
<div
class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -836,7 +836,7 @@ exports[`renders components/masonry/demo/responsive.tsx extend context correctly
</div>
<div
class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="--item-width: calc((100% + 8px) / 1); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 8px); position: absolute;"
style="--ant-masonry-item-width: calc((100% + 8px) / 1); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 8px); position: absolute;"
>
<div
class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -851,7 +851,7 @@ exports[`renders components/masonry/demo/responsive.tsx extend context correctly
</div>
<div
class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="--item-width: calc((100% + 8px) / 1); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 8px); position: absolute;"
style="--ant-masonry-item-width: calc((100% + 8px) / 1); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 8px); position: absolute;"
>
<div
class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -866,7 +866,7 @@ exports[`renders components/masonry/demo/responsive.tsx extend context correctly
</div>
<div
class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="--item-width: calc((100% + 8px) / 1); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 8px); position: absolute;"
style="--ant-masonry-item-width: calc((100% + 8px) / 1); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 8px); position: absolute;"
>
<div
class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -881,7 +881,7 @@ exports[`renders components/masonry/demo/responsive.tsx extend context correctly
</div>
<div
class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="--item-width: calc((100% + 8px) / 1); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 8px); position: absolute;"
style="--ant-masonry-item-width: calc((100% + 8px) / 1); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 8px); position: absolute;"
>
<div
class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -916,7 +916,7 @@ exports[`renders components/masonry/demo/style-class.tsx extend context correctl
>
<div
class="ant-masonry-item acss-3iocwh ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="transform: scale(0.98); transition: transform 0.2s ease; border: 1px solid rgb(204, 204, 204); --item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
style="transform: scale(0.98); transition: transform 0.2s ease; border: 1px solid rgb(204, 204, 204); --ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
>
<div
class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -931,7 +931,7 @@ exports[`renders components/masonry/demo/style-class.tsx extend context correctl
</div>
<div
class="ant-masonry-item acss-3iocwh ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="transform: scale(0.98); transition: transform 0.2s ease; border: 1px solid rgb(204, 204, 204); --item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
style="transform: scale(0.98); transition: transform 0.2s ease; border: 1px solid rgb(204, 204, 204); --ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
>
<div
class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -946,7 +946,7 @@ exports[`renders components/masonry/demo/style-class.tsx extend context correctl
</div>
<div
class="ant-masonry-item acss-3iocwh ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="transform: scale(0.98); transition: transform 0.2s ease; border: 1px solid rgb(204, 204, 204); --item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
style="transform: scale(0.98); transition: transform 0.2s ease; border: 1px solid rgb(204, 204, 204); --ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
>
<div
class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -961,7 +961,7 @@ exports[`renders components/masonry/demo/style-class.tsx extend context correctl
</div>
<div
class="ant-masonry-item acss-3iocwh ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="transform: scale(0.98); transition: transform 0.2s ease; border: 1px solid rgb(204, 204, 204); --item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
style="transform: scale(0.98); transition: transform 0.2s ease; border: 1px solid rgb(204, 204, 204); --ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
>
<div
class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -976,7 +976,7 @@ exports[`renders components/masonry/demo/style-class.tsx extend context correctl
</div>
<div
class="ant-masonry-item acss-3iocwh ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="transform: scale(0.98); transition: transform 0.2s ease; border: 1px solid rgb(204, 204, 204); --item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
style="transform: scale(0.98); transition: transform 0.2s ease; border: 1px solid rgb(204, 204, 204); --ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
>
<div
class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -991,7 +991,7 @@ exports[`renders components/masonry/demo/style-class.tsx extend context correctl
</div>
<div
class="ant-masonry-item acss-3iocwh ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="transform: scale(0.98); transition: transform 0.2s ease; border: 1px solid rgb(204, 204, 204); --item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
style="transform: scale(0.98); transition: transform 0.2s ease; border: 1px solid rgb(204, 204, 204); --ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
>
<div
class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -1006,7 +1006,7 @@ exports[`renders components/masonry/demo/style-class.tsx extend context correctl
</div>
<div
class="ant-masonry-item acss-3iocwh ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="transform: scale(0.98); transition: transform 0.2s ease; border: 1px solid rgb(204, 204, 204); --item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
style="transform: scale(0.98); transition: transform 0.2s ease; border: 1px solid rgb(204, 204, 204); --ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
>
<div
class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -1021,7 +1021,7 @@ exports[`renders components/masonry/demo/style-class.tsx extend context correctl
</div>
<div
class="ant-masonry-item acss-3iocwh ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="transform: scale(0.98); transition: transform 0.2s ease; border: 1px solid rgb(204, 204, 204); --item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
style="transform: scale(0.98); transition: transform 0.2s ease; border: 1px solid rgb(204, 204, 204); --ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
>
<div
class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -1052,7 +1052,7 @@ exports[`renders components/masonry/demo/style-class.tsx extend context correctl
>
<div
class="ant-masonry-item acss-3iocwh ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="box-shadow: 0 2px 8px rgba(0,0,0,0.1); border: 1px solid rgb(24, 144, 255); --item-width: calc((100% + 12px) / 3); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 12px); position: absolute;"
style="box-shadow: 0 2px 8px rgba(0,0,0,0.1); border: 1px solid rgb(24, 144, 255); --ant-masonry-item-width: calc((100% + 12px) / 3); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 12px); position: absolute;"
>
<div
class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -1067,7 +1067,7 @@ exports[`renders components/masonry/demo/style-class.tsx extend context correctl
</div>
<div
class="ant-masonry-item acss-3iocwh ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="box-shadow: 0 2px 8px rgba(0,0,0,0.1); border: 1px solid rgb(24, 144, 255); --item-width: calc((100% + 12px) / 3); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 12px); position: absolute;"
style="box-shadow: 0 2px 8px rgba(0,0,0,0.1); border: 1px solid rgb(24, 144, 255); --ant-masonry-item-width: calc((100% + 12px) / 3); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 12px); position: absolute;"
>
<div
class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -1082,7 +1082,7 @@ exports[`renders components/masonry/demo/style-class.tsx extend context correctl
</div>
<div
class="ant-masonry-item acss-3iocwh ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="box-shadow: 0 2px 8px rgba(0,0,0,0.1); border: 1px solid rgb(24, 144, 255); --item-width: calc((100% + 12px) / 3); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 12px); position: absolute;"
style="box-shadow: 0 2px 8px rgba(0,0,0,0.1); border: 1px solid rgb(24, 144, 255); --ant-masonry-item-width: calc((100% + 12px) / 3); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 12px); position: absolute;"
>
<div
class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -1097,7 +1097,7 @@ exports[`renders components/masonry/demo/style-class.tsx extend context correctl
</div>
<div
class="ant-masonry-item acss-3iocwh ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="box-shadow: 0 2px 8px rgba(0,0,0,0.1); border: 1px solid rgb(24, 144, 255); --item-width: calc((100% + 12px) / 3); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 12px); position: absolute;"
style="box-shadow: 0 2px 8px rgba(0,0,0,0.1); border: 1px solid rgb(24, 144, 255); --ant-masonry-item-width: calc((100% + 12px) / 3); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 12px); position: absolute;"
>
<div
class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -1112,7 +1112,7 @@ exports[`renders components/masonry/demo/style-class.tsx extend context correctl
</div>
<div
class="ant-masonry-item acss-3iocwh ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="box-shadow: 0 2px 8px rgba(0,0,0,0.1); border: 1px solid rgb(24, 144, 255); --item-width: calc((100% + 12px) / 3); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 12px); position: absolute;"
style="box-shadow: 0 2px 8px rgba(0,0,0,0.1); border: 1px solid rgb(24, 144, 255); --ant-masonry-item-width: calc((100% + 12px) / 3); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 12px); position: absolute;"
>
<div
class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -1127,7 +1127,7 @@ exports[`renders components/masonry/demo/style-class.tsx extend context correctl
</div>
<div
class="ant-masonry-item acss-3iocwh ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
style="box-shadow: 0 2px 8px rgba(0,0,0,0.1); border: 1px solid rgb(24, 144, 255); --item-width: calc((100% + 12px) / 3); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 12px); position: absolute;"
style="box-shadow: 0 2px 8px rgba(0,0,0,0.1); border: 1px solid rgb(24, 144, 255); --ant-masonry-item-width: calc((100% + 12px) / 3); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 12px); position: absolute;"
>
<div
class="ant-card ant-card-bordered ant-card-small css-var-test-id"

13
components/masonry/__tests__/index.test.tsx
View File

@@ -4,6 +4,8 @@ import { spyElementPrototypes } from '@rc-component/util/lib/test/domHook';
import Masonry from '..';
import type { MasonryProps } from '..';
import { render, triggerResize, waitFakeTimer } from '../../../tests/utils';
import { defaultPrefixCls } from '../../config-provider';
import { genCssVar } from '../../theme/util/genStyleUtils';
const resizeMasonry = async () => {
triggerResize(document.body.querySelector('.ant-masonry')!);
@@ -198,15 +200,14 @@ describe('Masonry', () => {
});
describe('gutter', () => {
const [varName] = genCssVar(defaultPrefixCls, 'masonry');
const getGutter = () => {
const itemElements = document.body.querySelectorAll<HTMLElement>('.ant-masonry-item');
const horizontalGutter = itemElements[0].style
.getPropertyValue('--item-width')
.match(/\d+px/)![0];
const verticalGutter = itemElements[2].style.top.match(/\d+px/)![0];
return [Number.parseInt(horizontalGutter, 10), Number.parseInt(verticalGutter, 10)];
.getPropertyValue(varName('item-width'))
.match(/\d+px/)?.[0];
const verticalGutter = itemElements[2].style.top.match(/\d+px/)?.[0];
return [Number.parseInt(horizontalGutter!, 10), Number.parseInt(verticalGutter!, 10)];
};
const renderGutter = (gutter: MasonryProps['gutter']) => (