caribbean-reservation-react
Version:
Basically a modular grid which allows you to place tags over it. Created in order to manage reservations for a hotel in the caribbean
135 lines (100 loc) • 4.31 kB
JavaScript
import React, { useEffect, useState } from 'react';
import { makeId, getPosition, getColumnCount, getRowCount,evaluatePosition,resizeBar } from './helpers';
import reserverReducer from './reserverReducer'
import useReserver from './useReserver';
import actionTypes from './actionTypes'
import Bar from './Bar';
import Head from './Head';
export default function CaribbeanReservation(props) {
const [rowTitles, setRowTitles] = useState([])
const [rowCount, setRowCount] = useState(0);
const [columnCount, setColumnCount] = useState(0);
useEffect(() => {
setColumnCount(getColumnCount(props.dimension, props.width,props.rowTitleWidth));
}, [props.width, props.dimension])
useEffect(() => {
setRowCount(getRowCount(props.dimension, props.height))
}, [props.height, props.dimension])
useEffect(() => {
if (typeof props.rowTitles === "function") {
setRowTitles(props.rowTitles())
} else if (Array.isArray(props.rowTitles)) {
setRowTitles(props.rowTitles)
}
}, [props.rowTitles])
function getContentFromMatrix(row, column) {
if (props.content) {
var r_content = props.content[row];
var c_content = undefined;
if (r_content) {
c_content = r_content[column];
}
if (c_content) {
return c_content;
} else {
return "";
}
}
}
return <div onMouseLeave={props.mouseLeaveGrid} id="grid" style={{ ...props.style, position: "relative" }} >
<Head headRow={props.headRow} columnCount={columnCount} rowTitleWidth={props.rowTitleWidth} dimension={props.dimension} />
{[...Array(rowCount)].map((x, r) => {
return <div className="caribbean-row" key={r} style={{height:props.dimension,display:"flex"}}>
<div className={`row-cell row${r}`} style={{ width: props.rowTitleWidth, height: props.dimension + "px" }} >
{rowTitles[r]}
</div>
{([...Array(columnCount)].map((x, c) => {
return <div onDragOver={(e) => { e.preventDefault(); props.mouseDragOverCell({ cell: { row: r, column: c } }) }}
className="row-cell" id={`carribean_r${r}c${c}`}
onMouseEnter={() => { props.mouseEnterCell({ dimension: props.dimension, cell: { row: r, column: c } }) }}
onMouseDown={() => { props.mouseDownCell({ dimension: props.dimension, cell: { row: r, column: c } }) }}
onMouseUp={() => { console.log("mouseup"); props.mouseUpCell({ cell: { row: r, column: c } }) }}
onDrop={() => { props.mouseCellDrop({ cell: { row: r, column: c } }); }}
style={{ width: props.dimension + "px", height: props.dimension + "px" }}
key={c}>
{props.content[`r${r}c${c}`]}
</div>
}
))}
</div>
}
)}
{
(typeof props.children === "function") && props.children({
rowCount: rowCount,
columnCount: columnCount,
rowTitleWidth: props.rowTitleWidth,
dimension: props.dimension
})
}
</div>
}
function createBar(dimension,startLocation){
return {
id: makeId(),
dimension:dimension,
style: { background: "orange" },
editing: true, ...startLocation,
length: 1,
pointerEvents: "none"
}
}
export { Bar, reserverReducer, actionTypes, makeId, useReserver,getPosition,evaluatePosition,createBar,resizeBar };
CaribbeanReservation.defaultProps = {
initBars: [],
bars: [],
tags: [],
headRow: [],
rowTitles: [],
content: {},
dimension: 20,
width: 500,
height: 500,
rowTitleWidth: 0,
mouseEnterCell: () => { },
mouseDownCell: () => { },
mouseUpCell: () => { },
mouseDragOverCell: () => { },
mouseCellDrop: () => { },
mouseLeaveGrid: () => { }
}