Feat: added flags to disable section and category deletion

mezh-hq · May 24, 2024 · 1a1cf8f · 1a1cf8f
1 parent 08ba6ee
commit 1a1cf8f
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 21 deletions.
diff --git a/src/components/controls/select/index.tsx b/src/components/controls/select/index.tsx
@@ -2,13 +2,16 @@ import { Fragment, useMemo } from "react";
 import { useSelector } from "react-redux";
 import { ElementType } from "@/components/workspace/elements";
 import { dataAttributes } from "@/constants";
+import { ISTKProps } from "@/types";
 import { default as GeneralSelectControls } from "./general";
 import { default as PolylineSelectControls } from "./polyline";
 import { default as SeatSelectControls } from "./seats";
 import { default as ShapeSelectControls } from "./shape";
 import { default as TextSelectControls } from "./text";
 
-const SelectControls = () => {
+type IControlProps = Pick<ISTKProps, "options" | "styles">;
+
+const SelectControls = ({ options, styles }: IControlProps) => {
   const selectedElementIds = useSelector((state: any) => state.editor.selectedElementIds);
 
   const ControlComponent = useMemo(() => {
@@ -22,7 +25,7 @@ const SelectControls = () => {
 
   return (
     <div className="flex flex-col gap-3">
-      <ControlComponent />
+      <ControlComponent options={options} styles={styles} />
       <GeneralSelectControls />
     </div>
   );

diff --git a/src/components/controls/select/polyline/index.tsx b/src/components/controls/select/polyline/index.tsx
@@ -1,17 +1,20 @@
 import { useSelector } from "react-redux";
 import { selectPolylineById } from "@/store/reducers/editor";
+import { ISTKProps } from "@/types";
 import { d3Extended, rgbToHex } from "@/utils";
 import { default as ControlInput } from "../../control-input";
 import { default as SectionSelector } from "./section-selector";
 
-const PolylineSelectControls = () => {
+type IControlProps = Pick<ISTKProps, "options" | "styles">;
+
+const PolylineSelectControls = (props: IControlProps) => {
   const selectedElementIds = useSelector((state: any) => state.editor.selectedElementIds);
   const firstPolyline = useSelector(selectPolylineById(selectedElementIds[0]));
   const firstElement = document.getElementById(selectedElementIds[0]);
 
   return (
     <div className="flex flex-col gap-4 py-1">
-      <SectionSelector firstElement={firstElement} selectedElementIds={selectedElementIds} />
+      <SectionSelector firstElement={firstElement} selectedElementIds={selectedElementIds} {...props} />
       <div className="grid grid-cols-3 items-center gap-4">
         <ControlInput
           id="polyline-stroke-input"

diff --git a/src/components/controls/select/polyline/section-selector.tsx b/src/components/controls/select/polyline/section-selector.tsx
@@ -6,6 +6,7 @@ import { Input, Popover, PopoverContent, PopoverTrigger } from "@/components/cor
 import { dataAttributes } from "@/constants";
 import { store } from "@/store";
 import { addSection, deleteSection, updatePolylines, updateSection } from "@/store/reducers/editor";
+import { ISTKProps } from "@/types";
 import { Callout, Caption, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../../core";
 
 const onAddSection = () => store.dispatch(addSection(undefined));
@@ -14,7 +15,9 @@ const onDeleteSection = (id: string) => store.dispatch(deleteSection(id));
 
 const onUpdateSection = debounce((section) => store.dispatch(updateSection(section)), 150);
 
-const SectionSelector = ({ firstElement, selectedElementIds }) => {
+type IControlProps = Pick<ISTKProps, "options" | "styles">;
+
+const SectionSelector = ({ firstElement, selectedElementIds, options }: IControlProps & Record<string, any>) => {
   const sections = useSelector((state: any) => state.editor.sections);
   return (
     <>
@@ -73,14 +76,16 @@ const SectionSelector = ({ firstElement, selectedElementIds }) => {
                               : onUpdateSection({ ...section, freeSeating: true })
                           }
                         />
-                        <Trash2
-                          size={22}
-                          className={twMerge(
-                            "hover:text-gray-500 flex-shrink-0 cursor-pointer transition-all duration-medium",
-                            index === 0 && "opacity-0 pointer-events-none"
-                          )}
-                          onClick={() => onDeleteSection(section.id)}
-                        />
+                        {!options?.disableSectionDelete && (
+                          <Trash2
+                            size={22}
+                            className={twMerge(
+                              "hover:text-gray-500 flex-shrink-0 cursor-pointer transition-all duration-medium",
+                              index === 0 && "opacity-0 pointer-events-none"
+                            )}
+                            onClick={() => onDeleteSection(section.id)}
+                          />
+                        )}
                       </div>
                     )
                 )}

diff --git a/src/components/controls/select/seats/categorizer.tsx b/src/components/controls/select/seats/categorizer.tsx
@@ -8,6 +8,7 @@ import { Input, Popover, PopoverContent, PopoverTrigger } from "@/components/cor
 import { dataAttributes } from "@/constants";
 import { store } from "@/store";
 import { addCategory, deleteCategory, updateCategory, updateSeats } from "@/store/reducers/editor";
+import { ISTKProps } from "@/types";
 import { Callout, Caption, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../../core";
 
 const onAddCategory = () => store.dispatch(addCategory(undefined));
@@ -23,7 +24,9 @@ const onSectionSelect = (e: MouseEvent<HTMLButtonElement>) => {
   store.dispatch(updateCategory({ id: categoryId, section: +sectionId === 0 ? null : sectionId }));
 };
 
-const Categorizer = ({ firstElement, selectedElementIds }) => {
+type IControlProps = Pick<ISTKProps, "options" | "styles">;
+
+const Categorizer = ({ firstElement, selectedElementIds, options }: IControlProps & Record<string, any>) => {
   const categories = useSelector((state: any) => state.editor.categories);
   const sections = useSelector((state: any) => state.editor.sections);
 
@@ -101,11 +104,13 @@ const Categorizer = ({ firstElement, selectedElementIds }) => {
                         ))}
                       </PopoverContent>
                     </Popover>
-                    <Trash2
-                      size={22}
-                      className="hover:text-gray-500 flex-shrink-0 cursor-pointer transition-all duration-medium"
-                      onClick={() => onDeleteCategory(category.id)}
-                    />
+                    {!options?.disableCategoryDelete && (
+                      <Trash2
+                        size={22}
+                        className="hover:text-gray-500 flex-shrink-0 cursor-pointer transition-all duration-medium"
+                        onClick={() => onDeleteCategory(category.id)}
+                      />
+                    )}
                   </div>
                 ))}
               </div>

diff --git a/src/components/controls/select/seats/index.tsx b/src/components/controls/select/seats/index.tsx
@@ -3,12 +3,15 @@ import { Button, Label, RadioGroup, RadioGroupItem } from "@/components/core";
 import { dataAttributes, seatStatusColors } from "@/constants";
 import { store } from "@/store";
 import { updateSeatLabels, updateSeats } from "@/store/reducers/editor";
+import { ISTKProps } from "@/types";
 import { SeatStatus } from "@/types/elements";
 import { d3Extended } from "@/utils";
 import { default as ControlInput } from "../../control-input";
 import { default as Categorizer } from "./categorizer";
 
-const SeatSelectControls = () => {
+type IControlProps = Pick<ISTKProps, "options" | "styles">;
+
+const SeatSelectControls = (props: IControlProps) => {
   const selectedElementIds = useSelector((state: any) => state.editor.selectedElementIds);
 
   const firstElement = document.getElementById(selectedElementIds[0]);
@@ -28,7 +31,7 @@ const SeatSelectControls = () => {
 
   return (
     <div className="flex flex-col gap-4">
-      <Categorizer firstElement={firstElement} selectedElementIds={selectedElementIds} />
+      <Categorizer firstElement={firstElement} selectedElementIds={selectedElementIds} {...props} />
       <div className="grid grid-cols-3 items-center gap-4">
         <ControlInput
           key={firstElementLabel?.textContent}

diff --git a/src/types/index.ts b/src/types/index.ts
@@ -86,6 +86,8 @@ export interface ISTKProps {
     maxImageSize?: number;
     /** Overrides the default input placeholder at the top left corner of the screen */
     locationInputPlaceholder?: string;
+    disableCategoryDelete?: boolean;
+    disableSectionDelete?: boolean;
   };
   plugins?: IPlugins;
 }