Skip to content

Commit

Permalink
feat(global): ✨ add double click feature
Browse files Browse the repository at this point in the history 
adding, removing, double click added for style classes

Ref: #54
  • Loading branch information
@PritamBag
PritamBag committed Oct 7, 2024
1 parent 860fd85 commit a834c23
Showing 1 changed file with 83 additions and 46 deletions.
129 changes: 83 additions & 46 deletions app/components/page-builder/right-drawer-components/DialogDesign.js
View file
Original file line number Diff line number Diff line change
@@ -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:
Expand All @@ -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)}
Expand All @@ -69,23 +98,36 @@ 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>
);
});
};

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"/>
Expand All @@ -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>
);
}
}

0 comments on commit a834c23

Please sign in to comment.