refactor(component): change masonry component api

toeverything · Dec 20, 2024 · abeab25 · abeab25
1 parent 6d4ec54
commit abeab25
Show file tree

Hide file tree

Showing 9 changed files with 277 additions and 330 deletions.
diff --git a/packages/frontend/component/src/ui/masonry/context.ts b/packages/frontend/component/src/ui/masonry/context.ts
diff --git a/packages/frontend/component/src/ui/masonry/index.ts b/packages/frontend/component/src/ui/masonry/index.ts
@@ -1,7 +1 @@
-import { MasonryItem } from './masonry-item';
-import { MasonryRoot } from './masonry-root';
-
-export const Masonry = {
-  Item: MasonryItem,
-  Root: MasonryRoot,
-};
+export * from './masonry';
diff --git a/packages/frontend/component/src/ui/masonry/masonry-item.tsx b/packages/frontend/component/src/ui/masonry/masonry-item.tsx
diff --git a/packages/frontend/component/src/ui/masonry/masonry-root.tsx b/packages/frontend/component/src/ui/masonry/masonry-root.tsx
diff --git a/packages/frontend/component/src/ui/masonry/masonry.stories.tsx b/packages/frontend/component/src/ui/masonry/masonry.stories.tsx
@@ -1,6 +1,5 @@
 import { ResizePanel } from '../resize-panel/resize-panel';
-import { MasonryItem } from './masonry-item';
-import { MasonryRoot } from './masonry-root';
+import { Masonry } from './masonry';
 
 export default {
   title: 'UI/Masonry',
@@ -24,65 +23,58 @@ const Card = ({ children }: { children: React.ReactNode }) => {
   );
 };
 
-const cards = Array.from({ length: 10000 }, (_, i) => {
+const basicCards = Array.from({ length: 10000 }, (_, i) => {
   return {
     id: 'card-' + i,
     height: Math.round(100 + Math.random() * 100),
+    children: (
+      <Card>
+        <h1>Hello</h1>
+        <p>World</p>
+        {i}
+      </Card>
+    ),
   };
 });
 
 export const BasicVirtualScroll = () => {
   return (
     <ResizePanel width={800} height={600}>
-      <MasonryRoot
+      <Masonry
         gapX={10}
         gapY={10}
         style={{ width: '100%', height: '100%' }}
         paddingX={12}
         paddingY={12}
         virtualScroll
-      >
-        {cards.map(card => (
-          <MasonryItem key={card.id} id={card.id} height={card.height}>
-            <Card>
-              <h1>Hello</h1>
-              <p>World</p>
-              {card.id}
-            </Card>
-          </MasonryItem>
-        ))}
-      </MasonryRoot>
+        items={basicCards}
+      />
     </ResizePanel>
   );
 };
 
+const transitionCards = Array.from({ length: 10000 }, (_, i) => {
+  return {
+    id: 'card-' + i,
+    height: Math.round(100 + Math.random() * 100),
+    children: <Card>{i}</Card>,
+    style: { transition: 'transform 0.2s ease' },
+  };
+});
+
 export const CustomTransition = () => {
   return (
     <ResizePanel width={800} height={600}>
-      <MasonryRoot
+      <Masonry
         gapX={10}
         gapY={10}
         style={{ width: '100%', height: '100%' }}
         paddingX={12}
         paddingY={12}
         virtualScroll
-      >
-        {cards.map(card => (
-          <MasonryItem
-            locateMode="transform3d"
-            style={{ transition: 'transform 0.2s ease' }}
-            key={card.id}
-            id={card.id}
-            height={card.height}
-          >
-            <Card>
-              <h1>Hello</h1>
-              <p>World</p>
-              {card.id}
-            </Card>
-          </MasonryItem>
-        ))}
-      </MasonryRoot>
+        items={transitionCards}
+        locateMode="transform3d"
+      />
     </ResizePanel>
   );
 };