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
65 lines (64 loc) • 2.37 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { memo, useEffect, useRef } from 'react';
import { useCells, useScheduler } from '../providers';
/**
* Drawing cells background component
*/
export const Background = memo(() => {
const { helperWidthProp, headerHeightProp, baseZIndex, bottomHeightProp } = useScheduler();
const { widthStep, heightStep, offsetHeight, offsetWidth } = useCells();
/**
* Canvas reference
*/
const canvasRef = useRef(null);
/**
* Context reference
*/
const contextRef = useRef(null);
/**
* Cells redrawing
*/
useEffect(() => {
const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
if (!canvas)
return;
canvas.width = offsetWidth * 2;
canvas.height = offsetHeight * 2;
canvas.style.width = `${offsetWidth}px`;
canvas.style.height = `${offsetHeight}px`;
const context = canvas.getContext('2d');
if (!context)
return;
context.scale(2, 2);
contextRef.current = context;
contextRef.current.beginPath();
for (let x = helperWidthProp; x <= offsetWidth; x += widthStep) {
contextRef.current.moveTo(x, 0);
contextRef.current.lineTo(x, offsetHeight - bottomHeightProp);
}
contextRef.current.strokeStyle = 'rgba(0,0,0, 0.2)';
contextRef.current.lineWidth = 1;
contextRef.current.stroke();
contextRef.current.beginPath();
for (let y = headerHeightProp; y <= offsetHeight - bottomHeightProp; y += heightStep) {
contextRef.current.moveTo(helperWidthProp, y);
contextRef.current.lineTo(offsetWidth, y);
}
contextRef.current.strokeStyle = 'rgba(0,0,0, 0.1)';
contextRef.current.lineWidth = 1;
contextRef.current.stroke();
contextRef.current.save();
}, [
bottomHeightProp,
headerHeightProp,
heightStep,
helperWidthProp,
offsetHeight,
offsetWidth,
widthStep,
]);
return (_jsx("canvas", { id: 'backgroundCanvas', className: 'scheduler-background-canvas', style: {
position: 'absolute',
zIndex: baseZIndex + 1,
}, ref: canvasRef }));
});