diff --git a/src/components/workspace/elements/index.tsx b/src/components/workspace/elements/index.tsx index f5d0ea2..9d2657a 100644 --- a/src/components/workspace/elements/index.tsx +++ b/src/components/workspace/elements/index.tsx @@ -56,11 +56,16 @@ export const Element: React.FC = ({ }, [ref, consumer.mode]); const onClick = (e: any) => { - if ( - consumer.mode === "user" && - (type !== ElementType.Seat || (props.status && props.status !== SeatStatus.Available)) - ) { - return; + if (consumer.mode === "user") { + if (type !== ElementType.Seat || props.status !== SeatStatus.Available) { + return; + } + if ( + consumer.options?.maxSeatSelectionCount && + store.getState().editor.selectedElementIds.length > consumer.options?.maxSeatSelectionCount + ) { + return consumer.events?.onMaxSeatSelectionCountReached?.(); + } } if (consumer.mode === "user" && consumer.seatSelectionMode === "chain") { if (isSelected) { diff --git a/src/components/workspace/index.tsx b/src/components/workspace/index.tsx index 7cd3209..5b6a8c7 100644 --- a/src/components/workspace/index.tsx +++ b/src/components/workspace/index.tsx @@ -2,7 +2,7 @@ import { useCallback } from "react"; import { useSelector } from "react-redux"; import { twMerge } from "tailwind-merge"; import { dataAttributes, ids } from "@/constants"; -import { type ISTKProps } from "@/types"; +import { type ISTKProps, SeatStatus } from "@/types"; import { Tool, tools } from "../toolbar/data"; import { default as Crosshairs } from "./crosshairs"; import { default as Element, ElementType } from "./elements"; @@ -74,7 +74,7 @@ export const Workspace: React.FC = (props) => { sections={sections} categories={categories} category={e.category} - status={e.status} + status={e.status ?? SeatStatus.Available} {...elementProps(e)} /> ))} diff --git a/src/types/index.ts b/src/types/index.ts index 954e009..025a40e 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -30,6 +30,8 @@ export interface IEvents { onSeatLeave?: (seat: IPopulatedSeat, coords: ICoordinates) => void; /** Only applicable in user mode */ onSeatSelectionChange?: (seats: IPopulatedSeat[]) => void; + /** Only applicable in user mode. Fired when the user tries to select more seats than the maxSeatSelectionCount */ + onMaxSeatSelectionCountReached?: () => void; onWorkspaceHover?: () => void; onSectionClick?: (section: ISection) => void; onExport?: (data: ISTKData) => void; @@ -72,5 +74,7 @@ export interface ISTKProps { operationTriggerIcon?: React.FC; seatIcon?: React.FC; selectedSeatIcon?: React.FC; + /** Only applicable in user mode. If provided, will stop the user from selecting more seats than the provided number. */ + maxSeatSelectionCount?: number; }; }