feat: add toggle button for item reordering

Signed-off-by: rare-magma <[email protected]>
rare-magma · Mar 29, 2024 · 4921bb9 · 4921bb9
1 parent 4dc3c90
commit 4921bb9
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -191,7 +191,7 @@ Keyboard shortcuts can be triggered when no input field is selected.
   - Example: English (United States) browser language displays values in US Dollars. English (India) uses Indian Rupees.
   - It's possible to override it by selecting a different currency code based on [ISO 4217](https://en.wikipedia.org/wiki/ISO_4217).
 - Querying the search bar finds matching budget/expense/income names, opens the budget that contains the match and highlights it.
-- The list of Revenue/Expenses can be reordered by dragging each item.
+- The list of Revenue/Expenses can be reordered by dragging each item after enabling the toggle button.
 
 ## Known issues
 

diff --git a/src/components/TableCard/TableCard.css b/src/components/TableCard/TableCard.css
@@ -31,3 +31,25 @@
 .revenue-card-header {
   border-bottom: 1px solid var(--comment);
 }
+
+.btn-check:checked + .btn,
+.btn.active,
+.btn.show {
+  box-shadow: none !important;
+  background-color: var(--cyan);
+  border: 1px solid var(--cyan);
+  border-radius: 0.375rem;
+  color: var(--lightbgcolor);
+}
+
+.btn-check + .btn:hover {
+  box-shadow: none !important;
+  border: 1px solid var(--cyan);
+}
+
+.btn-check:focus-visible + .btn,
+.btn-check {
+  box-shadow: none !important;
+  color: var(--cyan);
+  border: 1px solid var(--cyan);
+}
diff --git a/src/components/TableCard/TableCard.tsx b/src/components/TableCard/TableCard.tsx
@@ -1,16 +1,17 @@
 import Big from "big.js";
 import { Reorder } from "framer-motion";
 import { produce } from "immer";
-import { useRef } from "react";
+import { useRef, useState } from "react";
 import {
   Button,
   Card,
   Col,
   OverlayTrigger,
   Row,
+  ToggleButton,
   Tooltip,
 } from "react-bootstrap";
-import { BsPlusLg } from "react-icons/bs";
+import { BsArrowsVertical, BsPlusLg } from "react-icons/bs";
 import { useBudget } from "../../context/BudgetContext";
 import { useConfig } from "../../context/ConfigContext";
 import {
@@ -36,6 +37,7 @@ export function TableCard({ header: label }: TableCardProps) {
   const { budget, setBudget, revenuePercentage } = useBudget();
   const { intlConfig } = useConfig();
   const inputRef = useRef<HTMLInputElement>(null);
+  const [isDraggable, setIsDraggable] = useState(false);
 
   const isRevenue = label === "Revenue";
   const isExpense = label === "Expenses";
@@ -131,7 +133,12 @@ export function TableCard({ header: label }: TableCardProps) {
             as="div"
           >
             {table.items?.map((item: ItemForm) => (
-              <Reorder.Item key={item.id} value={item} as="div">
+              <Reorder.Item
+                key={item.id}
+                value={item}
+                as="div"
+                dragListener={isDraggable}
+              >
                 <ItemFormGroup
                   key={`${label}-${item.id}-item-form-group`}
                   itemForm={item}
@@ -148,7 +155,7 @@ export function TableCard({ header: label }: TableCardProps) {
           </Reorder.Group>
         )}
         <div className="mt-3" />
-        <div className="d-grid gap-2">
+        <div className="d-flex gap-2">
           <OverlayTrigger
             delay={250}
             placement="top"
@@ -165,6 +172,7 @@ export function TableCard({ header: label }: TableCardProps) {
               variant={label.toLowerCase() + "-plus-button"}
               aria-label={`add item to ${label}`}
               size="sm"
+              className="flex-grow-1"
               onClick={() => {
                 addItemToTable(table);
                 setTimeout(() => {
@@ -177,6 +185,31 @@ export function TableCard({ header: label }: TableCardProps) {
               <BsPlusLg aria-hidden />
             </Button>
           </OverlayTrigger>
+          <OverlayTrigger
+            delay={250}
+            placement="top"
+            overlay={
+              <Tooltip
+                id={`tooltip-reorder-itemformgroup`}
+                style={{ position: "fixed" }}
+              >
+                toggle reordering of items
+              </Tooltip>
+            }
+          >
+            <ToggleButton
+              id={`toggle-reorder-${label}`}
+              aria-label={`reorder items in ${label}`}
+              type="checkbox"
+              variant="outline-info"
+              value={1}
+              size="sm"
+              onClick={() => setIsDraggable(!isDraggable)}
+              checked={isDraggable}
+            >
+              <BsArrowsVertical aria-hidden />
+            </ToggleButton>
+          </OverlayTrigger>
         </div>
       </Card.Body>
     </Card>