react-weekly-table
Version:
React weekly scheduler <br/> By default build time ranges for a week, supports up to 31 days <br/> Can work with different timezones, data always return to UTC+0
87 lines (86 loc) • 3.5 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { createContext, useCallback, useContext, useEffect, useMemo, useState, } from 'react';
import { HOUR_24 } from '../common';
import { useScheduler } from './Scheduler';
const CellsContext = createContext({});
/**
* Virtual cells provider context hook
* @returns [CellsProps]{@link CellsProps}
*/
export const useCells = () => useContext(CellsContext);
/**
* Virtual cells provider
*/
const CellsProvider = ({ children }) => {
var _a, _b;
const { parentRef, timeframe, columns, helperWidthProp, headerHeightProp, bottomHeightProp, } = useScheduler();
/**
* Main context state, setting by useEffect
*/
const [cellsProps, setCellsProps] = useState({});
/**
* Main context updater
*/
const setCells = useCallback((update) => {
setCellsProps(Object.assign(Object.assign({}, cellsProps), { cells: update }));
}, [cellsProps]);
/**
* Ms count per timeframe
*/
const msTime = useMemo(() => {
return timeframe * 60 * 1000;
}, [timeframe]);
/**
* Calculates context values and build virtual cells area
*/
useEffect(() => {
const parent = parentRef === null || parentRef === void 0 ? void 0 : parentRef.current;
if (!parent)
return;
const widthStep = (parent.offsetWidth - helperWidthProp) / (columns === null || columns === void 0 ? void 0 : columns.length);
const areaHeight = parent.offsetHeight - headerHeightProp - bottomHeightProp;
const heightStep = areaHeight / (1440 / timeframe);
const millisPerPixel = HOUR_24 / areaHeight;
const maxCellIndex = areaHeight / heightStep - 1;
const cells = new Array();
let widthPos = helperWidthProp;
for (let i = 0; i < (columns === null || columns === void 0 ? void 0 : columns.length); i++) {
let heightPos = headerHeightProp;
for (let j = 0; j < areaHeight / heightStep; j++) {
cells.push({
isSelected: false,
column: i,
row: j,
position: {
x: widthPos,
y: heightPos,
w: widthPos + widthStep,
h: heightPos + heightStep,
},
});
heightPos += heightStep;
}
widthPos += widthStep;
}
setCellsProps({
widthStep,
heightStep,
millisPerPixel,
cells,
maxCellIndex,
offsetWidth: parent.offsetWidth,
offsetHeight: parent.offsetHeight,
});
}, [
(_a = parentRef === null || parentRef === void 0 ? void 0 : parentRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth,
(_b = parentRef === null || parentRef === void 0 ? void 0 : parentRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight,
columns === null || columns === void 0 ? void 0 : columns.length,
bottomHeightProp,
headerHeightProp,
helperWidthProp,
timeframe,
parentRef,
]);
return (_jsx(CellsContext.Provider, Object.assign({ value: Object.assign(Object.assign({}, cellsProps), { setCells: setCells, msTime }) }, { children: children })));
};
export default CellsProvider;