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}
    />
  );
};