README
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
Or
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