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
80 lines (79 loc) • 3.18 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import { jsx as _jsx } from "react/jsx-runtime";
import { useCallback, useMemo } from 'react';
import { HOUR_24 } from '../common';
import { useCanvas, useCustomTime, usePopup, useScheduler } from '../providers';
/**
* Each time block represents by this component
* @param block - [TimeBlock]{@link TimeBlock}
*/
export const TimeBlockCore = (_a) => {
var block = __rest(_a, []);
const { baseZIndex, blockColors } = useScheduler();
const { isDrawing } = useCanvas();
const { popup, showPopup, hidePopup } = usePopup();
const { isEditing, handleObject } = useCustomTime();
/**
* Select blocks colors
*/
const bgColor = useMemo(() => {
if ((popup === null || popup === void 0 ? void 0 : popup.id) === block.id)
return blockColors.hover;
if (block.isTemp)
return blockColors.temp;
if (isDrawing)
return blockColors.draw;
return blockColors.common;
}, [
block.id,
block.isTemp,
blockColors.common,
blockColors.draw,
blockColors.hover,
blockColors.temp,
isDrawing,
popup === null || popup === void 0 ? void 0 : popup.id,
]);
/**
* Calling when time block is hovering, popup and custom time components setter
*/
const handleShowActions = useCallback(() => {
if (isEditing)
return null;
showPopup(block.id);
handleObject(block);
//eslint-disable-next-line
}, [block, isEditing]);
/**
* Showing endTime as 24:00 instead of 00:00
*/
const endTime = useMemo(() => {
if (block.endTime === HOUR_24)
return '24:00';
return new Date(block.endTime).toISOString().substr(11, 5);
}, [block.endTime]);
return (_jsx("div", Object.assign({ id: 'timeBlock', className: 'scheduler-time-block', style: {
zIndex: isDrawing ? baseZIndex : baseZIndex + 4,
position: 'absolute',
top: block.top,
left: block.left,
width: block.width,
height: block.height,
backgroundColor: bgColor,
}, onMouseEnter: handleShowActions, onMouseMove: handleShowActions, onMouseLeave: () => (!isEditing ? hidePopup() : null) }, { children: _jsx("span", Object.assign({ id: 'timeDisplay', className: 'scheduler-text scheduler-time-display', style: {
userSelect: 'none',
pointerEvents: 'none',
} }, { children: new Date(block.startTime).toISOString().substr(11, 5) +
' / ' +
endTime })) })));
};