Column Title

So we want to give each column a title, it could be a date or time. In this example I use the library moment in order to generate the array of dates but you can use any library you want or you can just use a static array.

Click on a title to see what happens!

;

import React, { useState } from 'react'
import Reserver, {
  Bar,
  useReserver,
  reserverReducer,
  createBar,
  getPosition,
  resizeBars,
  finishEditingBars
} from 'react-reserver'
import styles from './basicexamples.module.css'

import { resolveDate, dateRange } from './helpers'

export default function ColumnTitle(props) {
  const { bars, isEditing, setIsEditing, addBar, setBars } = useReserver(
    reserverReducer,
    []
  )
  const [selectedDate, setSelectedDate] = useState('')
  return (
    <>
      {selectedDate !== '' && (
        <div className='alert alert--success' role='alert'>
          You selected <strong>{selectedDate}</strong>
        </div>
      )}
      <Reserver
        cellClassName={styles.row_cell}
        columnTitleClassName={styles.row}
        columnTitles={(columnCount) => {
          return dateRange(new Date(), columnCount, 'days').map(
            (val, index) => {
              return (
                <div
                  key={val}
                  style={{
                    background: '#12D3CF',
                    height: '100%',
                    width: '100%',
                    textAlign: 'center',
                    cursor: 'pointer'
                  }}
                  onClick={() => {
                    setSelectedDate(
                      resolveDate(
                        new Date(),
                        index,
                        'days',
                        'dddd, MMMM Do YYYY, h:mm:ss a'
                      )
                    )
                  }}
                >
                  {val}
                </div>
              )
            }
          )
        }}
        mouseDownCell={(props) => {
          const newbar = createBar(props.dimension, props.cell)
          addBar(newbar)
          setIsEditing(true)
        }}
        mouseEnterCell={(props) => {
          if (isEditing) {
            const nBars = resizeBars(bars, props)
            setBars(nBars)
          }
        }}
        mouseUpCell={() => {
          const dBars = finishEditingBars(bars)
          setBars(dBars)
          setIsEditing(false)
        }}
      >
        {({ columnTitleHeight }) => {
          return bars.map((bar) => {
            return (
              <Bar
                key={bar.id}
                {...bar}
                style={{
                  ...bar.style,
                  ...getPosition(
                    bar.row,
                    bar.column,
                    bar.dimension,
                    0,
                    columnTitleHeight
                  )
                }}
              />
            )
          })
        }}
      </Reserver>
    </>
  )
}

columnTitles takes either an array or a function and builds the top row. The function passes columnCount as an argument and must return an array.

columnCount is necessary in order for you to generate the correct amount of columns for your array. It doesnt check if you are using an incorrct length so you can do more or fewer.

if you want to have an empty box among filled boxes have null as one of the elements in the array.

const head = ['0','1',null,'3'];

The next thing to pay attention to is the function that passes an array as props.children to reserver.

In order to do so we pull out the columnTitleHeight from the props that the function receives. We are going to use it to calculate the position of the bar.