@ticketplate/map-creator-kit v1.1.8

Map Creator Kit

How to install it?

npm i @ticketplate/map-creator-kit --save

How to use it?

import { Map, MapProps, SeatShape, SeatType } from '@ticketplate/map-creator-kit';

const mockProps: MapProps = {
  seats: [
    {
      id: 'hola-1',
      shape: SeatShape.circle,
      type: SeatType.seat,
      coordX: 0,
      coordY: 0,
      color: '#ff0000',
      available: true,
    }
  ],
  mapDimensions: {
    columns: 1,
    rows: 1,
  },
  zoomAvailable: true
};

return (
  <Map {...mockProps} />
);

MapProps

interface MapProps {
  seats?: Array<ISeat>;
  mapDimensions?: MapDimensions;
  // We also allow functions for selecting and desselecting a seat
  onSeatSelected?: (seat: Seat) => void;
  onSeatDeselected?: (seat: Seat) => void;
  // To allow is you want to use zoom to the map
  // If you are going to use the zoom functionality, be sure to add the MapDimensions
  // If you don't give the MapDimensions it will start with the default scale
  zoomAvailable?: boolean;
}

// Required and optional values for the seats
interface ISeat {
  id: string;
  shape: ISeatShape;
  type: ISeatType;
  coordX: number;
  coordY: number;
  color?: string;
  htmlId?: string;
  available?: boolean;
  disabledColor?: string;
  tooltipText?: string;
}

// Shapes and types of the seats that we allow
const SeatShape = {
  circle: 'CIRCLE',
  square: 'SQUARE',
};

const SeatType = {
  seat: 'seat',
  sprite: 'sprite',
};

// Map Dimensions
interface MapDimensions {
  rows: number;
  columns: number;
}