gcedo/react-seatmap

A React component to display a minimal, yet functional seatmap.

react-seatmap

A React component to display a minimal, yet functional seatmap.

Usage

Two versions are available. The default one can be installed via npm install react-seatmap and you will need to attach a stylesheet to see a decent seatmap. You can find a sample one in main.css.

import React from 'react';
import Seatmap from 'react-seatmap';
React.render(
    <Seatmap rows={rows} maxReservableSeats={3} alpha />,
    document.getElementById('app')
);

There is a bundled version available in dist, where the css is bundled together with the component via webpack.

props

addSeatCallback: PropTypes.func(row, number)

The callback executed when a seat is added

• row, the row number
• seat, the seat number

alpha: PropTypes.bool

true if your rows are enumerated using letters, false otherwise.

maxReservableSeats: PropTypes.number

The maximum number of seats that can be selected.

removeSeatCallback: PropTypes.func(row, number)

The callback executed when a seat is removed

• row, the row number
• seat, the seat number

rows: PropTypes.arrayOf(RowType)

The array containing the data to build the seatmap. RowType is defined as PropTypes.arrayOf(SeatType), and SeatType is

PropTypes.shape({
  number: PropTypes.string.isRequired,
  isReserved: PropTypes.bool
});

where

• number is the seat number;
• isReserved tells whether the seat is already reserved or not (you can leave this empty when the seat is free)

If there is no seat at that location (e.g., space next to an aisle seat), put null.

seatWidth: PropTypes.number (default: 35)

The seat width. Needs to be customized as the seatmap width are computed from this number.

react-seatmap's Issues

Implementation on React Native

Can I use this library on React Native Project?

Rows are not updating on props change from parent

First of all thanks for sharing such a nice library. It perfectly fits my use case.
I am facing a problem and unable to find a way out so raising this issue for help.

I am rendering the Seatmap component inside my component. My component accepts number of rows and columns from user as input and based on that it generates rows and pass to Seatmap. here is my function used for generating rows.

const computeRows = (nRow, nCol, disableCols, blanks) => {
    let totalSeats = 1;
    const rowMap = [];
    for (let i = 0; i < nRow; i++) {
      const rowSeats = [];
      let blankSeats = [];
      if (blanks) {
        blankSeats = blanks[i + 1] ? blanks[i + 1] : [];
      }
      for (let j = 0; j < nCol; j++) {
        if (disableCols.includes(j + 1) || blankSeats.includes(j + 1)) {
          rowSeats.push(null);
        } else {
          rowSeats.push({ number: totalSeats });
          totalSeats += 1;
        }
      }
      rowMap.push(rowSeats);
    }
    return rowMap;
  };

When the compoenet render the first time then it displays the layout perfectly, but when value of rows and columns are changed by user it doesn't reflect in layout. I tried debugging and noticed shouldComponentUpdate method is called with updated props in Seatmap but still layout is not updating based on my new rows. Is it something related to Immutable Js used in Seatmap component?

Thanks in advance!