Basic++

Ok so you ran the basic example and you want to see more.

Here it is

You are probably thinking hey wait this looks exactly the same!

so lets look at the code

import React from 'react'
import Reserver, {
  Bar,
  useReserver,
  reserverReducer,
  createBar,
  getPosition,
  resizeBars,
  finishEditingBars
} from 'react-reserver'
import styles from './basicexamples.module.css'
export default function BasicPlusPlus(props) {
  const { bars, isEditing, setIsEditing, addBar, setBars } = useReserver(
    reserverReducer,
    []
  )
  return (
    <Reserver
      cellClassName={styles.row_cell}
      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)
      }}
    >
      {() => {
        return bars.map((bar) => {
          return (
            <Bar
              key={bar.id}
              {...bar}
              style={{
                ...bar.style,
                ...getPosition(bar.row, bar.column, bar.dimension)
              }}
            />
          )
        })
      }}
    </Reserver>
  )
}

First we are adding editing and setIsEditing. Why do we need this? since otherwise every time we hover over a cell it runs resizeBar and setBars. So we make sure that we actually started editing before we run the functions.

 {() => {

            return bars.map((bar) => {
                return <Bar key={bar.id} {...bar} style={{ ...bar.style, ...getPosition(bar.row, bar.column, bar.dimension) }} />
            })
        }

Here we are passing in a function instead of an array of the objects as children. We will need this later when the component will pass arguments into the function. We also pass bar.style back into the style prop, we didnt do it before because we werent styling the component but now we should take it into consideration.

Next we will see how we can give titles to our columns