feat: DiffTimeline changes (#57)

feat: DiffTimeline Table is modifiable Co-authored-by: Lifosmin Simon <[email protected]>
goto · Jul 8, 2024 · 05f58d8 · 05f58d8
1 parent 6184ba6
commit 05f58d8
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 3 deletions.
diff --git a/packages/apsara-ui/src/DiffTimeline/DiffTimeline.stories.tsx b/packages/apsara-ui/src/DiffTimeline/DiffTimeline.stories.tsx
@@ -11,7 +11,7 @@ const dataArr = [
     {
         _id: "3",
         diff: {
-            updated: ["2022-06-21T07:56:31.370Z", "2022-08-09T03:11:12.129Z"],
+            updated: [["2022-06-21T07:56:31.370Z", "safsd"], "2022-08-09T03:11:12.129Z"],
             deployment_id: ["test_id"],
         },
         user: "test user",
@@ -33,6 +33,26 @@ const dataArr = [
         createdAt: "2022-08-09T03:11:12.811Z",
         updatedAt: "2022-08-09T03:11:12.811Z",
         __v: 0,
+        renderDiff: () => (
+            <div>
+                <h3>Custom Render Diff</h3>
+                <p>User: test user</p>
+                <p>Reason: Apsara Component Migration</p>
+                <p>Version: 2</p>
+                <div>
+                    <strong>Updated:</strong>
+                    <ul>
+                    {["2022-06-21T07:56:31.370Z", "2022-08-09T03:11:12.129Z"].map((date, index) => (
+                        <li key={index}>{date}</li>
+                    ))}
+                    </ul>
+                </div>
+                <div>
+                    <strong>Deployment ID:</strong>
+                    <p>test_id</p>
+                </div>
+            </div>
+        ),
     },
     {
         _id: "1",

diff --git a/packages/apsara-ui/src/DiffTimeline/DiffTimeline.tsx b/packages/apsara-ui/src/DiffTimeline/DiffTimeline.tsx
@@ -99,7 +99,7 @@ const DiffTimelineBlock = ({ timelineBlockData }: any) => {
                         </React.Fragment>
                     )}
                 </div>
-                {!R.isEmpty(timelineBlockData.diff) && (
+                {(!R.isEmpty(timelineBlockData.diff) || timelineBlockData.renderDiff) && (
                     <Collapsible.Root open={isActive}>
                         <CollapsibleHeader onClick={() => setIsActive(!isActive)}>
                             <Icon size={12} name={isActive ? "removeOutlineBox" : "addOutlineBox"} />
@@ -108,7 +108,11 @@ const DiffTimelineBlock = ({ timelineBlockData }: any) => {
                             </span>
                         </CollapsibleHeader>
                         <CollapsibleContent>
-                            <DiffTable diff={timelineBlockData.diff} />
+                            {timelineBlockData.renderDiff ?
+                                timelineBlockData.renderDiff()
+                                :
+                                <DiffTable diff={timelineBlockData.diff} />}
+
                         </CollapsibleContent>
                     </Collapsible.Root>
                 )}