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
31 lines (30 loc) • 1.53 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { useMemo } from 'react';
import { useCells, useScheduler } from '../providers';
/**
* Time description component (first column)
*/
export const SchedulerHelper = () => {
const { helperWidthProp, rows, headerHeightProp, bottomHeightProp } = useScheduler();
const { offsetHeight } = useCells();
/**
* Calculates height for time descriptions assignment
*/
const helperHeight = useMemo(() => {
return (offsetHeight - headerHeightProp - bottomHeightProp) / (rows === null || rows === void 0 ? void 0 : rows.length);
}, [bottomHeightProp, headerHeightProp, offsetHeight, rows === null || rows === void 0 ? void 0 : rows.length]);
return (_jsx("div", Object.assign({ id: 'schedulerHelper', className: 'scheduler-helper', style: {
display: 'inline-flex',
flexDirection: 'column',
position: 'relative',
width: `${helperWidthProp}px`,
maxWidth: `${helperWidthProp}px`,
userSelect: 'none',
} }, { children: rows === null || rows === void 0 ? void 0 : rows.map((row, index) => {
return (_jsx("div", Object.assign({ id: 'schedulerHelperRow', className: 'scheduler-text scheduler-helper-row', style: {
display: 'inline-flex',
minHeight: `${helperHeight}px`,
height: `${helperHeight}px`,
} }, { children: row }), index));
}) })));
};