From a834c23370aa9fdb0f496addb1668525446daf66 Mon Sep 17 00:00:00 2001
From: Pritam Bag <130136389+PritamBag@users.noreply.github.com>
Date: Mon, 7 Oct 2024 17:57:53 +0530
Subject: [PATCH] feat(global): :sparkles: add double click feature

adding, removing, double click added for style classes

Ref: #54
---
 .../right-drawer-components/DialogDesign.js   | 129 +++++++++++-------
 1 file changed, 83 insertions(+), 46 deletions(-)

diff --git a/app/components/page-builder/right-drawer-components/DialogDesign.js b/app/components/page-builder/right-drawer-components/DialogDesign.js
index b659bd0..d246c93 100644
--- a/app/components/page-builder/right-drawer-components/DialogDesign.js
+++ b/app/components/page-builder/right-drawer-components/DialogDesign.js
@@ -1,19 +1,20 @@
-import { useState } from "react";
+import { useState, useRef } from "react";
 
 import {
-  CoreBox, CoreClasses, CoreH6, CoreIcon, CoreIconButton, CoreStack, 
+  CoreBox, CoreClasses, CoreIcon, CoreIconButton, CoreStack, 
   CoreTypographyBody2,
   CoreTypographyOverline
 } from "@wrappid/core";
 
 export default function DialogDesign() {
-  const [selectedItemsAdding, setSelectedItemsAdding] = useState([]); // For selecting items to add
-  const [selectedItemsRemoving, setSelectedItemsRemoving] = useState([]); // For selecting items to remove
-  const [transferredItems, setTransferredItems] = useState([]); // Transferred items state
+  const [selectedItemsAdding, setSelectedItemsAdding] = useState([]);
+  const [selectedItemsRemoving, setSelectedItemsRemoving] = useState([]);
+  const [transferredItems, setTransferredItems] = useState([]);
+  const lastClickRef = useRef({ action: null, item: null, time: 0 });
+  const DOUBLE_CLICK_THRESHOLD = 1000; // 1000 milliseconds threshold for consecutive clicks
 
-  // Returns classes based on nesting depth
   const getHeaderClasses = (depth) => {
-    const baseClasses = [CoreClasses.POSITION.POSITION_STICKY, CoreClasses.PADDING.PY1, CoreClasses.BG.BG_WHITE, CoreClasses.MARGIN.MB1];
+    const baseClasses = [CoreClasses.POSITION.POSITION_STICKY, CoreClasses.PADDING.P1, CoreClasses.BG.BG_GREY_300, CoreClasses.COLOR.TEXT_BLACK_50];
 
     switch (depth) {
       case 0:
@@ -27,37 +28,65 @@ export default function DialogDesign() {
     }
   };
 
-  // Handles item selection (toggle for both adding/removing)
-  const handleItemClick = (item) => {
-    setSelectedItemsAdding((prev) =>
-      prev.includes(item) ? prev.filter((i) => i !== item) : [...prev, item]
-    );
+  const handleItemClick = (item, action) => {
+    const now = Date.now();
+    const { item: lastItem, time: lastTime, action: lastAction } = lastClickRef.current;
+
+    if (item === lastItem && action === lastAction && now - lastTime < DOUBLE_CLICK_THRESHOLD) {
+      if (action === "add") {
+        // Transfer the item
+        if (!transferredItems.includes(item)) {
+          setTransferredItems(prev => [...prev, item]);
+          setSelectedItemsAdding(prev => prev.filter(i => i !== item));
+        }
+      } else if (action === "remove") {
+        // Remove the item from transferred items
+        setTransferredItems(prev => prev.filter(i => i !== item));
+        setSelectedItemsRemoving(prev => prev.filter(i => i !== item));
+      }
+    } else {
+      if (action === "add") {
+        // Toggle item in selectedItemsAdding
+        setSelectedItemsAdding(prev => 
+          prev.includes(item) ? prev.filter(i => i !== item) : [...prev, item]
+        );
+      } else if (action === "remove") {
+        // Toggle item in selectedItemsRemoving
+        setSelectedItemsRemoving(prev => 
+          prev.includes(item) ? prev.filter(i => i !== item) : [...prev, item]
+        );
+      }
+    }
+
+    // Update the last click reference
+    lastClickRef.current = { action, item, time: now };
   };
 
-  // Handles the transfer of items to the "added" list
   const handleTransfer = () => {
-    setTransferredItems((prev) => [...prev, ...selectedItemsAdding]);
-    setSelectedItemsAdding([]); // Reset adding selection
+    setTransferredItems(prev => [...prev, ...selectedItemsAdding]);
+    setSelectedItemsAdding([]);
   };
 
-  // Handles removing items from the transferred list
   const handleRemoveTransfer = () => {
-    setTransferredItems((prev) => prev.filter((item) => !selectedItemsRemoving.includes(item)));
-    setSelectedItemsRemoving([]); // Reset removing selection
+    setTransferredItems(prev => prev.filter(item => !selectedItemsRemoving.includes(item)));
+    setSelectedItemsRemoving([]);
   };
 
-  // Recursively renders keys with appropriate nesting and depth
   const renderCoreKeys = (obj, parentKey = "", depth = 0) => {
     return Object.keys(obj).map((key) => {
       const value = obj[key];
       const fullKey = parentKey ? `${parentKey}.${key}` : key;
 
+      if (transferredItems.includes(fullKey)) {
+        return null;
+      }
+
       if (typeof value === "object" && !Array.isArray(value)) {
         return (
           <CoreBox key={fullKey}>
-            <CoreH6 styleClasses={getHeaderClasses(depth)}>
+            <CoreTypographyBody2 styleClasses={getHeaderClasses(depth)}>
               {key}
-            </CoreH6>
+            </CoreTypographyBody2>
 
             <CoreBox styleClasses={[CoreClasses.PADDING.PL3]}>
               {renderCoreKeys(value, fullKey, depth + 1)}
@@ -69,10 +98,10 @@ export default function DialogDesign() {
       return (
         <CoreBox 
           key={fullKey} 
-          onClick={() => handleItemClick(fullKey)}
-          styleClasses={[CoreClasses.CURSOR.CURSOR_POINTER, selectedItemsAdding.includes(fullKey) ? CoreClasses.BG.BG_GREY_200 : null]}
+          onClick={() => handleItemClick(fullKey, "add")}
+          styleClasses={[CoreClasses.CURSOR.CURSOR_POINTER]}
         >
-          <CoreTypographyOverline styleClasses={[CoreClasses.COLOR.TEXT_BLACK]}>{key}</CoreTypographyOverline>
+          <CoreTypographyOverline styleClasses={[selectedItemsAdding.includes(fullKey) ? CoreClasses.COLOR.TEXT_PRIMARY : CoreClasses.COLOR.TEXT_BLACK]}>{key}</CoreTypographyOverline>
         </CoreBox>
       );
     });
@@ -80,12 +109,25 @@ export default function DialogDesign() {
 
   return (
     <CoreBox styleClasses={[CoreClasses.DISPLAY.FLEX]}>
-      {/* Available Items Section */}
-      <CoreBox styleClasses={[CoreClasses.OVERFLOW.OVERFLOW_Y_AUTO, CoreClasses.HEIGHT.VH_50]}>
-        {renderCoreKeys(CoreClasses)}
-      </CoreBox>  
+      <CoreBox styleClasses={[CoreClasses.BG.BG_GREY_50, CoreClasses.BORDER.BORDER, CoreClasses.BORDER.BORDER_GREY_300, CoreClasses.PADDING.PX1]}>
+        <CoreBox styleClasses={[
+          CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_CENTER,
+          CoreClasses.BORDER.BORDER_BOTTOM,
+          CoreClasses.ALIGNMENT.ALIGN_ITEMS_CENTER,
+          CoreClasses.DISPLAY.FLEX,
+          CoreClasses.MARGIN.MB1, 
+          CoreClasses.PADDING.P1
+        ]}>
+          <CoreTypographyBody2 styleClasses={[CoreClasses.MARGIN.M0]}>
+           Add Style Classes
+          </CoreTypographyBody2>
+        </CoreBox>
 
-      {/* Transfer Buttons */}
+        <CoreBox styleClasses={[CoreClasses.OVERFLOW.OVERFLOW_Y_AUTO, CoreClasses.HEIGHT.VH_50]}>
+          {renderCoreKeys(CoreClasses)}
+        </CoreBox>  
+      </CoreBox>
+      
       <CoreStack spacing={2} styleClasses={[CoreClasses.HEIGHT.VH_50, CoreClasses.ALIGNMENT.ALIGN_ITEMS_CENTER, CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_CENTER, CoreClasses.PADDING.PX1]}>
         <CoreIconButton onClick={handleTransfer} disabled={selectedItemsAdding.length === 0}>
           <CoreIcon icon="keyboard_double_arrow_right" color="success"/>
@@ -96,34 +138,29 @@ export default function DialogDesign() {
         </CoreIconButton>
       </CoreStack>
 
-      {/* Transferred Items Section */}
-      <CoreBox styleClasses={[CoreClasses.HEIGHT.VH_50, CoreClasses.PADDING.PX1, CoreClasses.OVERFLOW.OVERFLOW_Y_AUTO]}>
-        <CoreBox styleClasses={[CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_FLEX_END]}>
-          {/* Clear button to reset transferred items */}
-          <CoreIconButton onClick={() => { setTransferredItems([]); }} styleClasses={[CoreClasses.MARGIN.MB3, CoreClasses.ALIGNMENT.ALIGN_CONTENT_END]}>
+      <CoreBox styleClasses={[CoreClasses.PADDING.P1, CoreClasses.BG.BG_GREY_50, CoreClasses.BORDER.BORDER, CoreClasses.BORDER.BORDER_GREY_300]}>
+        <CoreBox styleClasses={[CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_SPACE_BETWEEN, CoreClasses.BORDER.BORDER_BOTTOM, CoreClasses.ALIGNMENT.ALIGN_ITEMS_CENTER]}>
+          <CoreTypographyBody2 styleClasses={[CoreClasses.MARGIN.M0]}>
+            Added Styles
+          </CoreTypographyBody2>
+
+          <CoreIconButton onClick={() => { setTransferredItems([]); }} styleClasses={[CoreClasses.ALIGNMENT.ALIGN_CONTENT_END]}>
             <CoreIcon icon="restart_alt" color="primary"/>
           </CoreIconButton>
         </CoreBox>
 
-        <CoreBox>
-          <CoreTypographyBody2>
-            Added style classes
-          </CoreTypographyBody2>
-
-          {/* Render transferred items */}
+        <CoreBox styleClasses={[CoreClasses.HEIGHT.VH_50, CoreClasses.OVERFLOW.OVERFLOW_Y_AUTO, CoreClasses.PADDING.PT1]}>
           {transferredItems.map((item) => (
             <CoreBox
               key={item}
-              onClick={() => setSelectedItemsRemoving((prev) =>
-                prev.includes(item) ? prev.filter((i) => i !== item) : [...prev, item]
-              )}
-              styleClasses={[CoreClasses.CURSOR.CURSOR_POINTER, selectedItemsRemoving.includes(item) ? CoreClasses.BG.BG_GREY_200 : null]}
+              onClick={() => handleItemClick(item, "remove")}
+              styleClasses={[CoreClasses.CURSOR.CURSOR_POINTER]}
             >
-              <CoreTypographyOverline styleClasses={[CoreClasses.COLOR.TEXT_BLACK]}>{item}</CoreTypographyOverline>
+              <CoreTypographyOverline styleClasses={[selectedItemsRemoving.includes(item) ? CoreClasses.COLOR.TEXT_PRIMARY : CoreClasses.COLOR.TEXT_BLACK]}>{item}</CoreTypographyOverline>
             </CoreBox>
           ))}
         </CoreBox>
       </CoreBox>
     </CoreBox>
   );
-}
+}
\ No newline at end of file