@seatlayer/react 0.1.3 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +14 -5
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +29 -7
- package/dist/index.d.ts +29 -7
- package/dist/index.js +14 -5
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/dist/index.cjs
CHANGED
|
@@ -30,7 +30,7 @@ var import_js = require("@seatlayer/js");
|
|
|
30
30
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
31
31
|
var SeatingChart = (0, import_react.forwardRef)(
|
|
32
32
|
function SeatingChart2(props, ref) {
|
|
33
|
-
const { className, style, event, apiBase, maxSelection, publicKey, locale, currency } = props;
|
|
33
|
+
const { className, style, event, apiBase, maxSelection, publicKey, locale, currency, colorblindSafe } = props;
|
|
34
34
|
const containerRef = (0, import_react.useRef)(null);
|
|
35
35
|
const chartRef = (0, import_react.useRef)(null);
|
|
36
36
|
const callbacks = (0, import_react.useRef)(props);
|
|
@@ -46,11 +46,15 @@ var SeatingChart = (0, import_react.forwardRef)(
|
|
|
46
46
|
publicKey,
|
|
47
47
|
locale,
|
|
48
48
|
currency,
|
|
49
|
+
colorblindSafe,
|
|
49
50
|
messages: callbacks.current.messages,
|
|
50
51
|
onSelectionChange: (seats) => callbacks.current.onSelectionChange?.(seats),
|
|
51
52
|
onHold: (result) => callbacks.current.onHold?.(result),
|
|
53
|
+
onHoldExpired: () => callbacks.current.onHoldExpired?.(),
|
|
54
|
+
onGAClick: (area) => callbacks.current.onGAClick?.(area),
|
|
52
55
|
onError: (err) => callbacks.current.onError?.(err),
|
|
53
|
-
onDeckTap: (floorId) => callbacks.current.onDeckTap?.(floorId)
|
|
56
|
+
onDeckTap: (floorId) => callbacks.current.onDeckTap?.(floorId),
|
|
57
|
+
onHint: (message) => callbacks.current.onHint?.(message)
|
|
54
58
|
});
|
|
55
59
|
chartRef.current = chart;
|
|
56
60
|
void chart.render();
|
|
@@ -58,15 +62,20 @@ var SeatingChart = (0, import_react.forwardRef)(
|
|
|
58
62
|
chart.destroy();
|
|
59
63
|
chartRef.current = null;
|
|
60
64
|
};
|
|
61
|
-
}, [event, apiBase, maxSelection, publicKey, locale, currency]);
|
|
65
|
+
}, [event, apiBase, maxSelection, publicKey, locale, currency, colorblindSafe]);
|
|
62
66
|
(0, import_react.useImperativeHandle)(
|
|
63
67
|
ref,
|
|
64
68
|
() => ({
|
|
65
|
-
hold: () => chartRef.current?.hold() ?? Promise.resolve(null),
|
|
69
|
+
hold: (options) => chartRef.current?.hold(options) ?? Promise.resolve(null),
|
|
70
|
+
getGAAreas: () => chartRef.current?.getGAAreas() ?? [],
|
|
71
|
+
holdGA: (areaId, qty, options) => chartRef.current?.holdGA(areaId, qty, options) ?? Promise.resolve(null),
|
|
66
72
|
bestAvailable: (qty, categoryKey) => chartRef.current?.bestAvailable(qty, categoryKey) ?? Promise.resolve(null),
|
|
67
73
|
release: () => chartRef.current?.release() ?? Promise.resolve(),
|
|
68
74
|
getSelection: () => chartRef.current?.getSelection() ?? [],
|
|
69
|
-
setSeatTier: (seatId, tierId) => chartRef.current?.setSeatTier(seatId, tierId)
|
|
75
|
+
setSeatTier: (seatId, tierId) => chartRef.current?.setSeatTier(seatId, tierId),
|
|
76
|
+
getFloors: () => chartRef.current?.getFloors() ?? [],
|
|
77
|
+
setFloor: (floorId) => chartRef.current?.setFloor(floorId),
|
|
78
|
+
setColorblindSafe: (on) => chartRef.current?.setColorblindSafe(on)
|
|
70
79
|
}),
|
|
71
80
|
[]
|
|
72
81
|
);
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/SeatingChart.tsx"],"sourcesContent":["/**\n * @seatlayer/react — the React wrapper for the SeatLayer embed SDK.\n */\nexport { SeatingChart } from './SeatingChart';\nexport type {\n SeatingChartProps,\n SeatingChartHandle,\n SelectedSeat,\n HoldResult,\n BestAvailableResult,\n} from './SeatingChart';\n","import {\n forwardRef,\n useEffect,\n useImperativeHandle,\n useRef,\n type CSSProperties,\n} from 'react';\nimport {\n SeatingChart as CoreSeatingChart,\n type SeatingChartOptions,\n type SelectedSeat,\n type HoldResult,\n type BestAvailableResult,\n} from '@seatlayer/js';\n\nexport type { SelectedSeat, HoldResult, BestAvailableResult } from '@seatlayer/js';\n\n/** Imperative handle exposed via `ref` — call these to drive the picker from your app. */\nexport interface SeatingChartHandle {\n /** Hold the current selection. Resolves the hold, or `null` on a 409 conflict. */\n hold(): Promise<HoldResult | null>;\n /** Ask the server for the `qty` best free seats and hold them atomically. */\n bestAvailable(qty: number, categoryKey?: string): Promise<BestAvailableResult | null>;\n /** Release the current hold (if any). */\n release(): Promise<void>;\n /** The current selection, with prices resolved from the chart categories. */\n getSelection(): SelectedSeat[];\n /**\n * Choose a ticket tier for a selected seat (e.g. Adult → Child). Available\n * `tiers` are on each `SelectedSeat`; `tierId=null` reverts to the default.\n */\n setSeatTier(seatId: string, tierId: string | null): void;\n}\n\nexport interface SeatingChartProps extends Omit<SeatingChartOptions, 'container'> {\n className?: string;\n style?: CSSProperties;\n}\n\n/**\n * React wrapper around the framework-agnostic `@seatlayer/js` SDK.\n *\n * The underlying canvas is created once and torn down on unmount. Callback props\n * (`onSelectionChange`, `onHold`, `onError`, `onDeckTap`) may change
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/SeatingChart.tsx"],"sourcesContent":["/**\n * @seatlayer/react — the React wrapper for the SeatLayer embed SDK.\n */\nexport { SeatingChart } from './SeatingChart';\nexport type {\n SeatingChartProps,\n SeatingChartHandle,\n SelectedSeat,\n HoldResult,\n BestAvailableResult,\n GAAreaAvailability,\n HoldLineItem,\n} from './SeatingChart';\n","import {\n forwardRef,\n useEffect,\n useImperativeHandle,\n useRef,\n type CSSProperties,\n} from 'react';\nimport {\n SeatingChart as CoreSeatingChart,\n type SeatingChartOptions,\n type SelectedSeat,\n type HoldResult,\n type BestAvailableResult,\n type GAAreaAvailability,\n type HoldLineItem,\n} from '@seatlayer/js';\n\nexport type { SelectedSeat, HoldResult, BestAvailableResult, GAAreaAvailability, HoldLineItem } from '@seatlayer/js';\n\n/** Imperative handle exposed via `ref` — call these to drive the picker from your app. */\nexport interface SeatingChartHandle {\n /** Hold the current selection. Resolves the hold, or `null` on a 409 conflict. */\n hold(options?: { ttlMs?: number }): Promise<HoldResult | null>;\n /** GA areas with live remaining capacity. */\n getGAAreas(): GAAreaAvailability[];\n /** Atomically hold a quantity from one GA area. */\n holdGA(areaId: string, qty: number, options?: { tierId?: string | null; ttlMs?: number }): Promise<HoldResult | null>;\n /** Ask the server for the `qty` best free seats and hold them atomically. */\n bestAvailable(qty: number, categoryKey?: string): Promise<BestAvailableResult | null>;\n /** Release the current hold (if any). */\n release(): Promise<void>;\n /** The current selection, with prices resolved from the chart categories. */\n getSelection(): SelectedSeat[];\n /**\n * Choose a ticket tier for a selected seat (e.g. Adult → Child). Available\n * `tiers` are on each `SelectedSeat`; `tierId=null` reverts to the default.\n */\n setSeatTier(seatId: string, tierId: string | null): void;\n /**\n * Floors of a multi-floor chart — `[{ id, name }]` (single-floor charts\n * return one entry; empty before render()). Pair with setFloor().\n */\n getFloors(): { id: string; name: string }[];\n /** Switch the shown floor (2D). Warns + no-ops on single-floor charts. */\n setFloor(floorId: string): void;\n /** Toggle colorblind-safe rendering at runtime (see the `colorblindSafe` prop). */\n setColorblindSafe(on: boolean): void;\n}\n\nexport interface SeatingChartProps extends Omit<SeatingChartOptions, 'container'> {\n className?: string;\n style?: CSSProperties;\n}\n\n/**\n * React wrapper around the framework-agnostic `@seatlayer/js` SDK.\n *\n * The underlying canvas is created once and torn down on unmount. Callback props\n * (`onSelectionChange`, `onHold`, `onError`, `onDeckTap`, `onHint`) may change\n * freely between renders without re-mounting the canvas — only `event`,\n * `apiBase`, `maxSelection`, `publicKey`, `locale`, `currency`, and\n * `colorblindSafe` trigger a rebuild. (`messages` is read once per mount;\n * changing it alone does not re-apply.)\n */\nexport const SeatingChart = forwardRef<SeatingChartHandle, SeatingChartProps>(\n function SeatingChart(props, ref) {\n const { className, style, event, apiBase, maxSelection, publicKey, locale, currency, colorblindSafe } = props;\n\n const containerRef = useRef<HTMLDivElement | null>(null);\n const chartRef = useRef<CoreSeatingChart | null>(null);\n\n // Always call the latest callbacks without rebuilding the chart.\n const callbacks = useRef(props);\n callbacks.current = props;\n\n useEffect(() => {\n const el = containerRef.current;\n if (!el) return;\n\n const chart = new CoreSeatingChart({\n container: el,\n event,\n apiBase,\n maxSelection,\n publicKey,\n locale,\n currency,\n colorblindSafe,\n messages: callbacks.current.messages,\n onSelectionChange: (seats) => callbacks.current.onSelectionChange?.(seats),\n onHold: (result) => callbacks.current.onHold?.(result),\n onHoldExpired: () => callbacks.current.onHoldExpired?.(),\n onGAClick: (area) => callbacks.current.onGAClick?.(area),\n onError: (err) => callbacks.current.onError?.(err),\n onDeckTap: (floorId) => callbacks.current.onDeckTap?.(floorId),\n onHint: (message) => callbacks.current.onHint?.(message),\n });\n chartRef.current = chart;\n void chart.render();\n\n return () => {\n chart.destroy();\n chartRef.current = null;\n };\n // Rebuild only when the identity of the chart changes.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [event, apiBase, maxSelection, publicKey, locale, currency, colorblindSafe]);\n\n useImperativeHandle(\n ref,\n (): SeatingChartHandle => ({\n hold: (options) => chartRef.current?.hold(options) ?? Promise.resolve(null),\n getGAAreas: () => chartRef.current?.getGAAreas() ?? [],\n holdGA: (areaId, qty, options) => chartRef.current?.holdGA(areaId, qty, options) ?? Promise.resolve(null),\n bestAvailable: (qty, categoryKey) =>\n chartRef.current?.bestAvailable(qty, categoryKey) ?? Promise.resolve(null),\n release: () => chartRef.current?.release() ?? Promise.resolve(),\n getSelection: () => chartRef.current?.getSelection() ?? [],\n setSeatTier: (seatId, tierId) => chartRef.current?.setSeatTier(seatId, tierId),\n getFloors: () => chartRef.current?.getFloors() ?? [],\n setFloor: (floorId) => chartRef.current?.setFloor(floorId),\n setColorblindSafe: (on) => chartRef.current?.setColorblindSafe(on),\n }),\n [],\n );\n\n return <div ref={containerRef} className={className} style={style} />;\n },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAMO;AACP,gBAQO;AA+GI;AA9DJ,IAAM,mBAAe;AAAA,EAC1B,SAASA,cAAa,OAAO,KAAK;AAChC,UAAM,EAAE,WAAW,OAAO,OAAO,SAAS,cAAc,WAAW,QAAQ,UAAU,eAAe,IAAI;AAExG,UAAM,mBAAe,qBAA8B,IAAI;AACvD,UAAM,eAAW,qBAAgC,IAAI;AAGrD,UAAM,gBAAY,qBAAO,KAAK;AAC9B,cAAU,UAAU;AAEpB,gCAAU,MAAM;AACd,YAAM,KAAK,aAAa;AACxB,UAAI,CAAC,GAAI;AAET,YAAM,QAAQ,IAAI,UAAAC,aAAiB;AAAA,QACjC,WAAW;AAAA,QACX;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU,UAAU,QAAQ;AAAA,QAC5B,mBAAmB,CAAC,UAAU,UAAU,QAAQ,oBAAoB,KAAK;AAAA,QACzE,QAAQ,CAAC,WAAW,UAAU,QAAQ,SAAS,MAAM;AAAA,QACrD,eAAe,MAAM,UAAU,QAAQ,gBAAgB;AAAA,QACvD,WAAW,CAAC,SAAS,UAAU,QAAQ,YAAY,IAAI;AAAA,QACvD,SAAS,CAAC,QAAQ,UAAU,QAAQ,UAAU,GAAG;AAAA,QACjD,WAAW,CAAC,YAAY,UAAU,QAAQ,YAAY,OAAO;AAAA,QAC7D,QAAQ,CAAC,YAAY,UAAU,QAAQ,SAAS,OAAO;AAAA,MACzD,CAAC;AACD,eAAS,UAAU;AACnB,WAAK,MAAM,OAAO;AAElB,aAAO,MAAM;AACX,cAAM,QAAQ;AACd,iBAAS,UAAU;AAAA,MACrB;AAAA,IAGF,GAAG,CAAC,OAAO,SAAS,cAAc,WAAW,QAAQ,UAAU,cAAc,CAAC;AAE9E;AAAA,MACE;AAAA,MACA,OAA2B;AAAA,QACzB,MAAM,CAAC,YAAY,SAAS,SAAS,KAAK,OAAO,KAAK,QAAQ,QAAQ,IAAI;AAAA,QAC1E,YAAY,MAAM,SAAS,SAAS,WAAW,KAAK,CAAC;AAAA,QACrD,QAAQ,CAAC,QAAQ,KAAK,YAAY,SAAS,SAAS,OAAO,QAAQ,KAAK,OAAO,KAAK,QAAQ,QAAQ,IAAI;AAAA,QACxG,eAAe,CAAC,KAAK,gBACnB,SAAS,SAAS,cAAc,KAAK,WAAW,KAAK,QAAQ,QAAQ,IAAI;AAAA,QAC3E,SAAS,MAAM,SAAS,SAAS,QAAQ,KAAK,QAAQ,QAAQ;AAAA,QAC9D,cAAc,MAAM,SAAS,SAAS,aAAa,KAAK,CAAC;AAAA,QACzD,aAAa,CAAC,QAAQ,WAAW,SAAS,SAAS,YAAY,QAAQ,MAAM;AAAA,QAC7E,WAAW,MAAM,SAAS,SAAS,UAAU,KAAK,CAAC;AAAA,QACnD,UAAU,CAAC,YAAY,SAAS,SAAS,SAAS,OAAO;AAAA,QACzD,mBAAmB,CAAC,OAAO,SAAS,SAAS,kBAAkB,EAAE;AAAA,MACnE;AAAA,MACA,CAAC;AAAA,IACH;AAEA,WAAO,4CAAC,SAAI,KAAK,cAAc,WAAsB,OAAc;AAAA,EACrE;AACF;","names":["SeatingChart","CoreSeatingChart"]}
|
package/dist/index.d.cts
CHANGED
|
@@ -1,12 +1,21 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { CSSProperties } from 'react';
|
|
3
|
-
import { SeatingChartOptions, HoldResult, BestAvailableResult, SelectedSeat } from '@seatlayer/js';
|
|
4
|
-
export { BestAvailableResult, HoldResult, SelectedSeat } from '@seatlayer/js';
|
|
3
|
+
import { SeatingChartOptions, HoldResult, GAAreaAvailability, BestAvailableResult, SelectedSeat } from '@seatlayer/js';
|
|
4
|
+
export { BestAvailableResult, GAAreaAvailability, HoldLineItem, HoldResult, SelectedSeat } from '@seatlayer/js';
|
|
5
5
|
|
|
6
6
|
/** Imperative handle exposed via `ref` — call these to drive the picker from your app. */
|
|
7
7
|
interface SeatingChartHandle {
|
|
8
8
|
/** Hold the current selection. Resolves the hold, or `null` on a 409 conflict. */
|
|
9
|
-
hold(
|
|
9
|
+
hold(options?: {
|
|
10
|
+
ttlMs?: number;
|
|
11
|
+
}): Promise<HoldResult | null>;
|
|
12
|
+
/** GA areas with live remaining capacity. */
|
|
13
|
+
getGAAreas(): GAAreaAvailability[];
|
|
14
|
+
/** Atomically hold a quantity from one GA area. */
|
|
15
|
+
holdGA(areaId: string, qty: number, options?: {
|
|
16
|
+
tierId?: string | null;
|
|
17
|
+
ttlMs?: number;
|
|
18
|
+
}): Promise<HoldResult | null>;
|
|
10
19
|
/** Ask the server for the `qty` best free seats and hold them atomically. */
|
|
11
20
|
bestAvailable(qty: number, categoryKey?: string): Promise<BestAvailableResult | null>;
|
|
12
21
|
/** Release the current hold (if any). */
|
|
@@ -18,6 +27,18 @@ interface SeatingChartHandle {
|
|
|
18
27
|
* `tiers` are on each `SelectedSeat`; `tierId=null` reverts to the default.
|
|
19
28
|
*/
|
|
20
29
|
setSeatTier(seatId: string, tierId: string | null): void;
|
|
30
|
+
/**
|
|
31
|
+
* Floors of a multi-floor chart — `[{ id, name }]` (single-floor charts
|
|
32
|
+
* return one entry; empty before render()). Pair with setFloor().
|
|
33
|
+
*/
|
|
34
|
+
getFloors(): {
|
|
35
|
+
id: string;
|
|
36
|
+
name: string;
|
|
37
|
+
}[];
|
|
38
|
+
/** Switch the shown floor (2D). Warns + no-ops on single-floor charts. */
|
|
39
|
+
setFloor(floorId: string): void;
|
|
40
|
+
/** Toggle colorblind-safe rendering at runtime (see the `colorblindSafe` prop). */
|
|
41
|
+
setColorblindSafe(on: boolean): void;
|
|
21
42
|
}
|
|
22
43
|
interface SeatingChartProps extends Omit<SeatingChartOptions, 'container'> {
|
|
23
44
|
className?: string;
|
|
@@ -27,10 +48,11 @@ interface SeatingChartProps extends Omit<SeatingChartOptions, 'container'> {
|
|
|
27
48
|
* React wrapper around the framework-agnostic `@seatlayer/js` SDK.
|
|
28
49
|
*
|
|
29
50
|
* The underlying canvas is created once and torn down on unmount. Callback props
|
|
30
|
-
* (`onSelectionChange`, `onHold`, `onError`, `onDeckTap`) may change
|
|
31
|
-
* between renders without re-mounting the canvas — only `event`,
|
|
32
|
-
* `maxSelection`, `publicKey`, `locale`,
|
|
33
|
-
* (`messages` is read once per mount;
|
|
51
|
+
* (`onSelectionChange`, `onHold`, `onError`, `onDeckTap`, `onHint`) may change
|
|
52
|
+
* freely between renders without re-mounting the canvas — only `event`,
|
|
53
|
+
* `apiBase`, `maxSelection`, `publicKey`, `locale`, `currency`, and
|
|
54
|
+
* `colorblindSafe` trigger a rebuild. (`messages` is read once per mount;
|
|
55
|
+
* changing it alone does not re-apply.)
|
|
34
56
|
*/
|
|
35
57
|
declare const SeatingChart: react.ForwardRefExoticComponent<SeatingChartProps & react.RefAttributes<SeatingChartHandle>>;
|
|
36
58
|
|
package/dist/index.d.ts
CHANGED
|
@@ -1,12 +1,21 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { CSSProperties } from 'react';
|
|
3
|
-
import { SeatingChartOptions, HoldResult, BestAvailableResult, SelectedSeat } from '@seatlayer/js';
|
|
4
|
-
export { BestAvailableResult, HoldResult, SelectedSeat } from '@seatlayer/js';
|
|
3
|
+
import { SeatingChartOptions, HoldResult, GAAreaAvailability, BestAvailableResult, SelectedSeat } from '@seatlayer/js';
|
|
4
|
+
export { BestAvailableResult, GAAreaAvailability, HoldLineItem, HoldResult, SelectedSeat } from '@seatlayer/js';
|
|
5
5
|
|
|
6
6
|
/** Imperative handle exposed via `ref` — call these to drive the picker from your app. */
|
|
7
7
|
interface SeatingChartHandle {
|
|
8
8
|
/** Hold the current selection. Resolves the hold, or `null` on a 409 conflict. */
|
|
9
|
-
hold(
|
|
9
|
+
hold(options?: {
|
|
10
|
+
ttlMs?: number;
|
|
11
|
+
}): Promise<HoldResult | null>;
|
|
12
|
+
/** GA areas with live remaining capacity. */
|
|
13
|
+
getGAAreas(): GAAreaAvailability[];
|
|
14
|
+
/** Atomically hold a quantity from one GA area. */
|
|
15
|
+
holdGA(areaId: string, qty: number, options?: {
|
|
16
|
+
tierId?: string | null;
|
|
17
|
+
ttlMs?: number;
|
|
18
|
+
}): Promise<HoldResult | null>;
|
|
10
19
|
/** Ask the server for the `qty` best free seats and hold them atomically. */
|
|
11
20
|
bestAvailable(qty: number, categoryKey?: string): Promise<BestAvailableResult | null>;
|
|
12
21
|
/** Release the current hold (if any). */
|
|
@@ -18,6 +27,18 @@ interface SeatingChartHandle {
|
|
|
18
27
|
* `tiers` are on each `SelectedSeat`; `tierId=null` reverts to the default.
|
|
19
28
|
*/
|
|
20
29
|
setSeatTier(seatId: string, tierId: string | null): void;
|
|
30
|
+
/**
|
|
31
|
+
* Floors of a multi-floor chart — `[{ id, name }]` (single-floor charts
|
|
32
|
+
* return one entry; empty before render()). Pair with setFloor().
|
|
33
|
+
*/
|
|
34
|
+
getFloors(): {
|
|
35
|
+
id: string;
|
|
36
|
+
name: string;
|
|
37
|
+
}[];
|
|
38
|
+
/** Switch the shown floor (2D). Warns + no-ops on single-floor charts. */
|
|
39
|
+
setFloor(floorId: string): void;
|
|
40
|
+
/** Toggle colorblind-safe rendering at runtime (see the `colorblindSafe` prop). */
|
|
41
|
+
setColorblindSafe(on: boolean): void;
|
|
21
42
|
}
|
|
22
43
|
interface SeatingChartProps extends Omit<SeatingChartOptions, 'container'> {
|
|
23
44
|
className?: string;
|
|
@@ -27,10 +48,11 @@ interface SeatingChartProps extends Omit<SeatingChartOptions, 'container'> {
|
|
|
27
48
|
* React wrapper around the framework-agnostic `@seatlayer/js` SDK.
|
|
28
49
|
*
|
|
29
50
|
* The underlying canvas is created once and torn down on unmount. Callback props
|
|
30
|
-
* (`onSelectionChange`, `onHold`, `onError`, `onDeckTap`) may change
|
|
31
|
-
* between renders without re-mounting the canvas — only `event`,
|
|
32
|
-
* `maxSelection`, `publicKey`, `locale`,
|
|
33
|
-
* (`messages` is read once per mount;
|
|
51
|
+
* (`onSelectionChange`, `onHold`, `onError`, `onDeckTap`, `onHint`) may change
|
|
52
|
+
* freely between renders without re-mounting the canvas — only `event`,
|
|
53
|
+
* `apiBase`, `maxSelection`, `publicKey`, `locale`, `currency`, and
|
|
54
|
+
* `colorblindSafe` trigger a rebuild. (`messages` is read once per mount;
|
|
55
|
+
* changing it alone does not re-apply.)
|
|
34
56
|
*/
|
|
35
57
|
declare const SeatingChart: react.ForwardRefExoticComponent<SeatingChartProps & react.RefAttributes<SeatingChartHandle>>;
|
|
36
58
|
|
package/dist/index.js
CHANGED
|
@@ -11,7 +11,7 @@ import {
|
|
|
11
11
|
import { jsx } from "react/jsx-runtime";
|
|
12
12
|
var SeatingChart = forwardRef(
|
|
13
13
|
function SeatingChart2(props, ref) {
|
|
14
|
-
const { className, style, event, apiBase, maxSelection, publicKey, locale, currency } = props;
|
|
14
|
+
const { className, style, event, apiBase, maxSelection, publicKey, locale, currency, colorblindSafe } = props;
|
|
15
15
|
const containerRef = useRef(null);
|
|
16
16
|
const chartRef = useRef(null);
|
|
17
17
|
const callbacks = useRef(props);
|
|
@@ -27,11 +27,15 @@ var SeatingChart = forwardRef(
|
|
|
27
27
|
publicKey,
|
|
28
28
|
locale,
|
|
29
29
|
currency,
|
|
30
|
+
colorblindSafe,
|
|
30
31
|
messages: callbacks.current.messages,
|
|
31
32
|
onSelectionChange: (seats) => callbacks.current.onSelectionChange?.(seats),
|
|
32
33
|
onHold: (result) => callbacks.current.onHold?.(result),
|
|
34
|
+
onHoldExpired: () => callbacks.current.onHoldExpired?.(),
|
|
35
|
+
onGAClick: (area) => callbacks.current.onGAClick?.(area),
|
|
33
36
|
onError: (err) => callbacks.current.onError?.(err),
|
|
34
|
-
onDeckTap: (floorId) => callbacks.current.onDeckTap?.(floorId)
|
|
37
|
+
onDeckTap: (floorId) => callbacks.current.onDeckTap?.(floorId),
|
|
38
|
+
onHint: (message) => callbacks.current.onHint?.(message)
|
|
35
39
|
});
|
|
36
40
|
chartRef.current = chart;
|
|
37
41
|
void chart.render();
|
|
@@ -39,15 +43,20 @@ var SeatingChart = forwardRef(
|
|
|
39
43
|
chart.destroy();
|
|
40
44
|
chartRef.current = null;
|
|
41
45
|
};
|
|
42
|
-
}, [event, apiBase, maxSelection, publicKey, locale, currency]);
|
|
46
|
+
}, [event, apiBase, maxSelection, publicKey, locale, currency, colorblindSafe]);
|
|
43
47
|
useImperativeHandle(
|
|
44
48
|
ref,
|
|
45
49
|
() => ({
|
|
46
|
-
hold: () => chartRef.current?.hold() ?? Promise.resolve(null),
|
|
50
|
+
hold: (options) => chartRef.current?.hold(options) ?? Promise.resolve(null),
|
|
51
|
+
getGAAreas: () => chartRef.current?.getGAAreas() ?? [],
|
|
52
|
+
holdGA: (areaId, qty, options) => chartRef.current?.holdGA(areaId, qty, options) ?? Promise.resolve(null),
|
|
47
53
|
bestAvailable: (qty, categoryKey) => chartRef.current?.bestAvailable(qty, categoryKey) ?? Promise.resolve(null),
|
|
48
54
|
release: () => chartRef.current?.release() ?? Promise.resolve(),
|
|
49
55
|
getSelection: () => chartRef.current?.getSelection() ?? [],
|
|
50
|
-
setSeatTier: (seatId, tierId) => chartRef.current?.setSeatTier(seatId, tierId)
|
|
56
|
+
setSeatTier: (seatId, tierId) => chartRef.current?.setSeatTier(seatId, tierId),
|
|
57
|
+
getFloors: () => chartRef.current?.getFloors() ?? [],
|
|
58
|
+
setFloor: (floorId) => chartRef.current?.setFloor(floorId),
|
|
59
|
+
setColorblindSafe: (on) => chartRef.current?.setColorblindSafe(on)
|
|
51
60
|
}),
|
|
52
61
|
[]
|
|
53
62
|
);
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/SeatingChart.tsx"],"sourcesContent":["import {\n forwardRef,\n useEffect,\n useImperativeHandle,\n useRef,\n type CSSProperties,\n} from 'react';\nimport {\n SeatingChart as CoreSeatingChart,\n type SeatingChartOptions,\n type SelectedSeat,\n type HoldResult,\n type BestAvailableResult,\n} from '@seatlayer/js';\n\nexport type { SelectedSeat, HoldResult, BestAvailableResult } from '@seatlayer/js';\n\n/** Imperative handle exposed via `ref` — call these to drive the picker from your app. */\nexport interface SeatingChartHandle {\n /** Hold the current selection. Resolves the hold, or `null` on a 409 conflict. */\n hold(): Promise<HoldResult | null>;\n /** Ask the server for the `qty` best free seats and hold them atomically. */\n bestAvailable(qty: number, categoryKey?: string): Promise<BestAvailableResult | null>;\n /** Release the current hold (if any). */\n release(): Promise<void>;\n /** The current selection, with prices resolved from the chart categories. */\n getSelection(): SelectedSeat[];\n /**\n * Choose a ticket tier for a selected seat (e.g. Adult → Child). Available\n * `tiers` are on each `SelectedSeat`; `tierId=null` reverts to the default.\n */\n setSeatTier(seatId: string, tierId: string | null): void;\n}\n\nexport interface SeatingChartProps extends Omit<SeatingChartOptions, 'container'> {\n className?: string;\n style?: CSSProperties;\n}\n\n/**\n * React wrapper around the framework-agnostic `@seatlayer/js` SDK.\n *\n * The underlying canvas is created once and torn down on unmount. Callback props\n * (`onSelectionChange`, `onHold`, `onError`, `onDeckTap`) may change
|
|
1
|
+
{"version":3,"sources":["../src/SeatingChart.tsx"],"sourcesContent":["import {\n forwardRef,\n useEffect,\n useImperativeHandle,\n useRef,\n type CSSProperties,\n} from 'react';\nimport {\n SeatingChart as CoreSeatingChart,\n type SeatingChartOptions,\n type SelectedSeat,\n type HoldResult,\n type BestAvailableResult,\n type GAAreaAvailability,\n type HoldLineItem,\n} from '@seatlayer/js';\n\nexport type { SelectedSeat, HoldResult, BestAvailableResult, GAAreaAvailability, HoldLineItem } from '@seatlayer/js';\n\n/** Imperative handle exposed via `ref` — call these to drive the picker from your app. */\nexport interface SeatingChartHandle {\n /** Hold the current selection. Resolves the hold, or `null` on a 409 conflict. */\n hold(options?: { ttlMs?: number }): Promise<HoldResult | null>;\n /** GA areas with live remaining capacity. */\n getGAAreas(): GAAreaAvailability[];\n /** Atomically hold a quantity from one GA area. */\n holdGA(areaId: string, qty: number, options?: { tierId?: string | null; ttlMs?: number }): Promise<HoldResult | null>;\n /** Ask the server for the `qty` best free seats and hold them atomically. */\n bestAvailable(qty: number, categoryKey?: string): Promise<BestAvailableResult | null>;\n /** Release the current hold (if any). */\n release(): Promise<void>;\n /** The current selection, with prices resolved from the chart categories. */\n getSelection(): SelectedSeat[];\n /**\n * Choose a ticket tier for a selected seat (e.g. Adult → Child). Available\n * `tiers` are on each `SelectedSeat`; `tierId=null` reverts to the default.\n */\n setSeatTier(seatId: string, tierId: string | null): void;\n /**\n * Floors of a multi-floor chart — `[{ id, name }]` (single-floor charts\n * return one entry; empty before render()). Pair with setFloor().\n */\n getFloors(): { id: string; name: string }[];\n /** Switch the shown floor (2D). Warns + no-ops on single-floor charts. */\n setFloor(floorId: string): void;\n /** Toggle colorblind-safe rendering at runtime (see the `colorblindSafe` prop). */\n setColorblindSafe(on: boolean): void;\n}\n\nexport interface SeatingChartProps extends Omit<SeatingChartOptions, 'container'> {\n className?: string;\n style?: CSSProperties;\n}\n\n/**\n * React wrapper around the framework-agnostic `@seatlayer/js` SDK.\n *\n * The underlying canvas is created once and torn down on unmount. Callback props\n * (`onSelectionChange`, `onHold`, `onError`, `onDeckTap`, `onHint`) may change\n * freely between renders without re-mounting the canvas — only `event`,\n * `apiBase`, `maxSelection`, `publicKey`, `locale`, `currency`, and\n * `colorblindSafe` trigger a rebuild. (`messages` is read once per mount;\n * changing it alone does not re-apply.)\n */\nexport const SeatingChart = forwardRef<SeatingChartHandle, SeatingChartProps>(\n function SeatingChart(props, ref) {\n const { className, style, event, apiBase, maxSelection, publicKey, locale, currency, colorblindSafe } = props;\n\n const containerRef = useRef<HTMLDivElement | null>(null);\n const chartRef = useRef<CoreSeatingChart | null>(null);\n\n // Always call the latest callbacks without rebuilding the chart.\n const callbacks = useRef(props);\n callbacks.current = props;\n\n useEffect(() => {\n const el = containerRef.current;\n if (!el) return;\n\n const chart = new CoreSeatingChart({\n container: el,\n event,\n apiBase,\n maxSelection,\n publicKey,\n locale,\n currency,\n colorblindSafe,\n messages: callbacks.current.messages,\n onSelectionChange: (seats) => callbacks.current.onSelectionChange?.(seats),\n onHold: (result) => callbacks.current.onHold?.(result),\n onHoldExpired: () => callbacks.current.onHoldExpired?.(),\n onGAClick: (area) => callbacks.current.onGAClick?.(area),\n onError: (err) => callbacks.current.onError?.(err),\n onDeckTap: (floorId) => callbacks.current.onDeckTap?.(floorId),\n onHint: (message) => callbacks.current.onHint?.(message),\n });\n chartRef.current = chart;\n void chart.render();\n\n return () => {\n chart.destroy();\n chartRef.current = null;\n };\n // Rebuild only when the identity of the chart changes.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [event, apiBase, maxSelection, publicKey, locale, currency, colorblindSafe]);\n\n useImperativeHandle(\n ref,\n (): SeatingChartHandle => ({\n hold: (options) => chartRef.current?.hold(options) ?? Promise.resolve(null),\n getGAAreas: () => chartRef.current?.getGAAreas() ?? [],\n holdGA: (areaId, qty, options) => chartRef.current?.holdGA(areaId, qty, options) ?? Promise.resolve(null),\n bestAvailable: (qty, categoryKey) =>\n chartRef.current?.bestAvailable(qty, categoryKey) ?? Promise.resolve(null),\n release: () => chartRef.current?.release() ?? Promise.resolve(),\n getSelection: () => chartRef.current?.getSelection() ?? [],\n setSeatTier: (seatId, tierId) => chartRef.current?.setSeatTier(seatId, tierId),\n getFloors: () => chartRef.current?.getFloors() ?? [],\n setFloor: (floorId) => chartRef.current?.setFloor(floorId),\n setColorblindSafe: (on) => chartRef.current?.setColorblindSafe(on),\n }),\n [],\n );\n\n return <div ref={containerRef} className={className} style={style} />;\n },\n);\n"],"mappings":";AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP;AAAA,EACE,gBAAgB;AAAA,OAOX;AA+GI;AA9DJ,IAAM,eAAe;AAAA,EAC1B,SAASA,cAAa,OAAO,KAAK;AAChC,UAAM,EAAE,WAAW,OAAO,OAAO,SAAS,cAAc,WAAW,QAAQ,UAAU,eAAe,IAAI;AAExG,UAAM,eAAe,OAA8B,IAAI;AACvD,UAAM,WAAW,OAAgC,IAAI;AAGrD,UAAM,YAAY,OAAO,KAAK;AAC9B,cAAU,UAAU;AAEpB,cAAU,MAAM;AACd,YAAM,KAAK,aAAa;AACxB,UAAI,CAAC,GAAI;AAET,YAAM,QAAQ,IAAI,iBAAiB;AAAA,QACjC,WAAW;AAAA,QACX;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU,UAAU,QAAQ;AAAA,QAC5B,mBAAmB,CAAC,UAAU,UAAU,QAAQ,oBAAoB,KAAK;AAAA,QACzE,QAAQ,CAAC,WAAW,UAAU,QAAQ,SAAS,MAAM;AAAA,QACrD,eAAe,MAAM,UAAU,QAAQ,gBAAgB;AAAA,QACvD,WAAW,CAAC,SAAS,UAAU,QAAQ,YAAY,IAAI;AAAA,QACvD,SAAS,CAAC,QAAQ,UAAU,QAAQ,UAAU,GAAG;AAAA,QACjD,WAAW,CAAC,YAAY,UAAU,QAAQ,YAAY,OAAO;AAAA,QAC7D,QAAQ,CAAC,YAAY,UAAU,QAAQ,SAAS,OAAO;AAAA,MACzD,CAAC;AACD,eAAS,UAAU;AACnB,WAAK,MAAM,OAAO;AAElB,aAAO,MAAM;AACX,cAAM,QAAQ;AACd,iBAAS,UAAU;AAAA,MACrB;AAAA,IAGF,GAAG,CAAC,OAAO,SAAS,cAAc,WAAW,QAAQ,UAAU,cAAc,CAAC;AAE9E;AAAA,MACE;AAAA,MACA,OAA2B;AAAA,QACzB,MAAM,CAAC,YAAY,SAAS,SAAS,KAAK,OAAO,KAAK,QAAQ,QAAQ,IAAI;AAAA,QAC1E,YAAY,MAAM,SAAS,SAAS,WAAW,KAAK,CAAC;AAAA,QACrD,QAAQ,CAAC,QAAQ,KAAK,YAAY,SAAS,SAAS,OAAO,QAAQ,KAAK,OAAO,KAAK,QAAQ,QAAQ,IAAI;AAAA,QACxG,eAAe,CAAC,KAAK,gBACnB,SAAS,SAAS,cAAc,KAAK,WAAW,KAAK,QAAQ,QAAQ,IAAI;AAAA,QAC3E,SAAS,MAAM,SAAS,SAAS,QAAQ,KAAK,QAAQ,QAAQ;AAAA,QAC9D,cAAc,MAAM,SAAS,SAAS,aAAa,KAAK,CAAC;AAAA,QACzD,aAAa,CAAC,QAAQ,WAAW,SAAS,SAAS,YAAY,QAAQ,MAAM;AAAA,QAC7E,WAAW,MAAM,SAAS,SAAS,UAAU,KAAK,CAAC;AAAA,QACnD,UAAU,CAAC,YAAY,SAAS,SAAS,SAAS,OAAO;AAAA,QACzD,mBAAmB,CAAC,OAAO,SAAS,SAAS,kBAAkB,EAAE;AAAA,MACnE;AAAA,MACA,CAAC;AAAA,IACH;AAEA,WAAO,oBAAC,SAAI,KAAK,cAAc,WAAsB,OAAc;AAAA,EACrE;AACF;","names":["SeatingChart"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@seatlayer/react",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"description": "React component for the SeatLayer embed SDK — render an interactive seat picker and hold seats.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"homepage": "https://docs.seatlayer.io",
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"ticketing"
|
|
36
36
|
],
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@seatlayer/js": "^0.
|
|
38
|
+
"@seatlayer/js": "^0.2.0"
|
|
39
39
|
},
|
|
40
40
|
"peerDependencies": {
|
|
41
41
|
"react": ">=17.0.0"
|