Merge pull request #12 from mezh-hq/development

Fixed an issue in custom seat icon visibility

Author: Akalanka47000

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mezh-hq/react-seat-toolkit",
-  "version": "3.0.0",
+  "version": "3.0.1-blizzard.0",
   "description": "React UI library to design and render seat layouts",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",

src/components/workspace/cursor.tsx

@@ -13,27 +13,26 @@ export const Cursor = () => {
 
   const Cursor = useSelector((state: any) => state.editor.cursor);
 
+  const workspace = document.getElementById(ids.workspace)?.getBoundingClientRect();
+  const zoomControls = document.getElementById(ids.zoomControls)?.getBoundingClientRect();
+  const mainControls = document.getElementById(ids.controls)?.getBoundingClientRect();
+
   const move = (e) => {
     const ptr = pointer(e);
     const x = ptr[0];
     const y = ptr[1];
-    const workspace = document.getElementById(ids.workspace)?.getBoundingClientRect();
-    const zoomControls = document.getElementById(ids.zoomControls)?.getBoundingClientRect();
-    const mainControls = document.getElementById(ids.controls)?.getBoundingClientRect();
-    if (workspace) {
-      const customCursor = document.getElementById(ids.cursor);
-      if (
-        isWithinBounds(x, y, workspace) &&
-        !isWithinBounds(x, y, zoomControls) &&
-        !isWithinBounds(x, y, mainControls) &&
-        !resizeCursors.includes(e.target?.style?.cursor) &&
-        !e.target.id.includes("radix:") &&
-        e.target.getAttribute("role") !== "dialog"
-      ) {
-        customCursor.style.display = "block";
-      } else {
-        customCursor.style.display = "none";
-      }
+    const customCursor = document.getElementById(ids.cursor);
+    if (
+      isWithinBounds(x, y, workspace) &&
+      !isWithinBounds(x, y, zoomControls) &&
+      !isWithinBounds(x, y, mainControls) &&
+      !resizeCursors.includes(e.target?.style?.cursor) &&
+      !e.target.id.includes("radix:") &&
+      e.target.getAttribute("role") !== "dialog"
+    ) {
+      customCursor.classList.remove("hidden");
+    } else {
+      customCursor.classList.add("hidden");
     }
     setCursorX(x);
     setCursorY(y);

src/components/workspace/elements/seat.tsx

@@ -152,7 +152,7 @@ const Seat: React.FC<ISeatProps> = forwardRef(
             width={seatSize * 0.75}
             height={seatSize * 0.75}
             size={seatSize * 0.75}
-            className={consumer.styles?.elements?.seat?.icon?.className}
+            className={twMerge(consumer.styles?.elements?.seat?.icon?.className, "stk-seat-icon")}
             style={consumer.styles?.elements?.seat?.icon?.properties}
           />
         )}

src/stories/designer/basic.stories.tsx

@@ -13,19 +13,6 @@ export const Story = {
   render: (props) => <SeatToolkit mode={STKMode.DESIGNER} {...props} />
 };
 
-export const WithoutFooter = {
-  render: (props) => (
-    <SeatToolkit
-      mode={STKMode.DESIGNER}
-      {...props}
-      options={{
-        showFooter: false,
-        ...props.options
-      }}
-    />
-  )
-};
-
 export const WithReloadButton = {
   render: (props) => (
     <SeatToolkit

src/stories/options.ts

@@ -9,11 +9,6 @@ export const options = {
     ...disableArgTypes(["options"]),
     ...prefixKeys(
       {
-        showFooter: {
-          control: "boolean",
-          description: "Show or hide the footer",
-          defaultValue: { summary: true }
-        },
         showGridSwitch: {
           control: "boolean",
           description: "Show or hide the grid switch",

src/styles/index.css

@@ -19,6 +19,6 @@ rect.workspace-selection {
   fill-opacity: 0.5;
 }
 
-.stk-core svg * {
+.stk-core svg *:not(.stk-seat-icon *) {
   transform-box: fill-box;
 }

src/types/index.ts

@@ -70,7 +70,6 @@ export interface ISTKProps {
   options?: {
     showGridSwitch?: boolean;
     showSeatLabels?: boolean;
-    showFooter?: boolean;
     showZoomControls?: boolean;
     showVisibilityControls?: boolean;
     showReloadButton?: boolean;

src/types/styles.ts

@@ -23,19 +23,11 @@ export interface IStyles {
     input?: IStyle;
     trigger?: IStyle;
   };
-  footer?: {
-    root?: IStyle;
-    title?: IStyle;
-    meta?: IStyle;
-  };
   zoomControls?: {
     in?: IStyle;
     out?: IStyle;
-    root?: IStyle;
   };
   panControls?: {
-    root?: IStyle;
-    innerRing?: IStyle;
     handles?: {
       up?: IStyle;
       right?: IStyle;
@@ -44,7 +36,6 @@ export interface IStyles {
     };
   };
   visibilityControls?: {
-    root?: IStyle;
     buttons?: IStyle;
   };
   reloadButton?: IStyle;