React-seat-picker NPM

react-seat-picker

Component to pick seats

Demo

About

This is a fork of react-seatmap whithout dependencies and some extra properties.

Install

npm install --save react-seat-picker

yarn add react-seat-picker

Usage

import React, {Component} from 'react'

import SeatPicker from 'react-seat-picker'

export default class App extends Component {
  state = {
    loading: false
  }

  addSeatCallback = ({ row, number, id }, addCb) => {
    this.setState({
      loading: true
    }, async () => {
      await new Promise(resolve => setTimeout(resolve, 1500))
      console.log(`Added seat ${number}, row ${row}, id ${id}`)
      const newTooltip = `tooltip for id-${id} added by callback`
      addCb(row, number, id, newTooltip)
      this.setState({ loading: false })
    })
  }

  addSeatCallbackContinousCase = ({ row, number, id }, addCb, params, removeCb) => {
    this.setState({
      loading: true
    }, async () => {
      if (removeCb) {
        await new Promise(resolve => setTimeout(resolve, 750))
        console.log(`Removed seat ${params.number}, row ${params.row}, id ${params.id}`)
        removeCb(params.row, params.number)
      }
      await new Promise(resolve => setTimeout(resolve, 750))
      console.log(`Added seat ${number}, row ${row}, id ${id}`)
      const newTooltip = `tooltip for id-${id} added by callback`
      addCb(row, number, id, newTooltip)
      this.setState({ loading: false })
    })
  }

  removeSeatCallback = ({ row, number, id }, removeCb) => {
    this.setState({
      loading: true
    }, async () => {
      await new Promise(resolve => setTimeout(resolve, 1500))
      console.log(`Removed seat ${number}, row ${row}, id ${id}`)
      // A value of null will reset the tooltip to the original while '' will hide the tooltip
      const newTooltip = ['A', 'B', 'C'].includes(row) ? null : ''
      removeCb(row, number, newTooltip)
      this.setState({ loading: false })
    })
  }

  render() {
    const rows = [
      [{id: 1, number: 1, isSelected: true, tooltip: 'Reserved by you'}, {id: 2, number: 2, tooltip: 'Cost: 15$'}, null, {id: 3, number: '3', isReserved: true, orientation: 'east', tooltip: 'Reserved by Rogger'}, {id: 4, number: '4', orientation: 'west'}, null, {id: 5, number: 5}, {id: 6, number: 6}],
      [{id: 7, number: 1, isReserved: true, tooltip: 'Reserved by Matthias Nadler'}, {id: 8, number: 2, isReserved: true}, null, {id: 9, number: '3', isReserved: true, orientation: 'east'}, {id: 10, number: '4', orientation: 'west'}, null, {id: 11, number: 5}, {id: 12, number: 6}],
      [{id: 13, number: 1}, {id: 14, number: 2}, null, {id: 15, number: 3, isReserved: true, orientation: 'east'}, {id: 16, number: '4', orientation: 'west'}, null, {id: 17, number: 5}, {id: 18, number: 6}],
      [{id: 19, number: 1, tooltip: 'Cost: 25$'}, {id: 20, number: 2}, null, {id: 21, number: 3, orientation: 'east'}, {id: 22, number: '4', orientation: 'west'}, null, {id: 23, number: 5}, {id: 24, number: 6}],
      [{id: 25, number: 1, isReserved: true}, {id: 26, number: 2, orientation: 'east'}, null, {id: 27, number: '3', isReserved: true}, {id: 28, number: '4', orientation: 'west'}, null,{id: 29, number: 5, tooltip: 'Cost: 11$'}, {id: 30, number: 6, isReserved: true}]
    ]
    const {loading} = this.state
    return (
      <div>
        <h1>Seat Picker</h1>
        <div style={{marginTop: '100px'}}>
          <SeatPicker
            addSeatCallback={this.addSeatCallback}
            removeSeatCallback={this.removeSeatCallback}
            rows={rows}
            maxReservableSeats={3}
            alpha
            visible
            selectedByDefault
            loading={loading}
            tooltipProps={{multiline: true}}
          />
        </div>
        <h1>Seat Picker Continuous Case</h1>
        <div style={{ marginTop: '100px' }}>
          <SeatPicker
            addSeatCallback={this.addSeatCallbackContinousCase}
            removeSeatCallback={this.removeSeatCallback}
            rows={rows}
            maxReservableSeats={3}
            alpha
            visible
            selectedByDefault
            loading={loading}
            tooltipProps={{ multiline: true }}
            continuous
          />
        </div>
      </div>
    )
  }

Props

Name	Type	Default	Required	Description
`alpha`	boolean	`false`	`false`	Enumerate your rows using letters (`true`), otherwise using numbers (`false`).
`visible`	boolean	`false`	`false`	Shows the row numbers (`true`), otherwise they are hidden (`false`).
`loading`	boolean	`false`	`false`	Shows a white mask on the seatpicker.
`continuous`	boolean	`false`	`false`	Allows to continue select seats while remove previos ones if you already have max reservable seats.
`selectedByDefault`	boolean	`false`	`false`	Allow to have already selected seats (`true`), otherwise (`false`) they aren´t going to be checked by their isSelected property.
`maxReservableSeats`	number	0	`false`	Limits the number of selectable seats.
`addSeatCallback`	function	({row, number, id}, cb) => {console.log( `Added seat ${number}, row ${row}, id ${id}`); addCb(row,number,id);}	`false`	Should be customized as you need. Remember to use addCb(row,number,id) for accepting the selection, otherwise ommit it. For continuous case see the example where should use removeCb(day,number) for previoslyselected appointment.
`removeSeatCallback`	function	({row, number, id}, removeCb) => {console.log( `Removed seat ${number}, row ${row}, id ${id}`); removeCb(row,number);}	`false`	Should be customized as you need. Remember to use removeCb(row,number) for accepting the deselection, otherwise ommit it.
`tooltipProps`	object	-	`false`	An object with props (options) for the react-tooltip components.
`rows`	array	-	`true`	Array of arrays of json. (See next section).

Seats properties

Each json in rows prop could be null (empty seat) or has these properties.

Name	Type	Default	Required	Description
`id`	number or string	undefined	`false`	It identify a seat.
`number`	number or string	undefined	`false`	It will be showed inside seat.
`tooltip`	string	undefined	`false`	Text of the tooltip when hovering over the seat.
`isSelected`	boolean	`false`	`false`	It will be checked in case selectedByDefault is true.
`isReserved`	boolean	`false`	`false`	Disable the option of click it.
`orientation`	string	north	`false`	Define the position of an specific seat (north, south, east, west).