0.0.23 • Published 3 years ago
@bitpod/p10-react-seat-picker v0.0.23
Seat Map Designer and Viewer
Example
import React from "react";
import SeatLayout from "@bitpod/p10-react-seat-picker";
import { fromJS } from "immutable";
const SeatMapPicker = () => {
const groups = {
gold: {
label: "Gold",
type: "sitting",
color: "#FCB900",
data: {
price: 800,
},
},
silver: {
label: "Silver",
type: "sittingReserved",
color: "#00D084",
data: {
price: 800,
},
},
};
let shapes = [
{
id: "TfR6NX83v",
group: "gold",
errors: [],
position: {
x: 80,
y: 50,
w: 150,
h: 150,
r: 0,
},
type: "sitting",
properties: {
rows: 4,
columns: 5,
labelPosition: "none",
rowLabels: {
autoPopulate: true,
startsAt: "A",
order: "inc",
position: "none",
type: "upper-alpha",
value: "A,B,C,D",
},
seatLabels: {
startsAt: 1,
order: "inc",
position: "top",
},
},
},
{
id: "kBCUXxPbq",
group: "gold",
errors: [],
position: {
x: 260,
y: 50,
w: 330,
h: 150,
r: 0,
},
type: "sitting",
properties: {
rows: 4,
columns: 11,
labelPosition: "top",
rowLabels: {
autoPopulate: true,
startsAt: "A",
order: "inc",
position: "none",
type: "upper-alpha",
value: "A,B,C,D",
},
seatLabels: {
startsAt: 6,
order: "inc",
position: "top",
},
},
},
];
return (
<SeatLayoutViewer
groups={fromJS(groups)}
shapes={fromJS(shapes)}
bookedSeats={bookedSeats} // readonly
selectedSeats={selectedSeatsIds}
// on seat selection change
onSeatSelectionChange={this.onSeatSelectionChange}
onSectionSelectionChange={() => {}}
// events
onBeforeSeatSelect={(seat, selectedSeats, bookedSeats, layout) => true}
onBeforeSeatUnSelect={(seat, selectedSeats, bookedSeats, layout) => true} // return bool, if T, remove current seat to selectedSeats and call onSelectChange, don't modify any inputs
onBeforeSectionSelect={(
Section,
selectedSections,
bookedSections,
layout
) => {}}
onBeforeSectionUnSelect={(
Section,
selectedSections,
bookedSections,
layout
) => true} // return bool, if T, remove current seat to selectedSeats and call onSelectChange, don't modify any input
// layout options
width={seatMapContainerWidth}
height={445}
showZoomButton={true}
showLegend={false}
/>
);
};
0.0.23
3 years ago
0.0.21
3 years ago
0.0.22
3 years ago
0.0.20
4 years ago
0.0.19
4 years ago
0.0.17
4 years ago
0.0.18
4 years ago
0.0.16
4 years ago
0.0.15
4 years ago
0.0.14
4 years ago
0.0.13
4 years ago
0.0.12
4 years ago
0.0.11
4 years ago
0.0.10
4 years ago
0.0.9
4 years ago
0.0.8
4 years ago
0.0.7
4 years ago
0.0.6
4 years ago
0.0.5
4 years ago
0.0.4
4 years ago
0.0.3
4 years ago
0.0.2
4 years ago
0.0.1
4 years ago