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
32 lines (31 loc) • 2.32 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { TIME } from '../common';
import { useCells, useCustomTime, useScheduler } from '../providers';
/**
* Custom time setter component
*/
export const CustomTime = () => {
const { baseZIndex } = useScheduler();
const { widthStep } = useCells();
const { isEditing, position, displayTime, handleTime, isError } = useCustomTime();
return (_jsxs("div", Object.assign({ id: 'customTimeWrapper', className: 'scheduler-text custom-time-wrapper', style: {
display: isEditing ? 'flex' : 'none',
zIndex: baseZIndex + 6,
position: 'absolute',
flexDirection: 'column',
top: position === null || position === void 0 ? void 0 : position.top,
left: position === null || position === void 0 ? void 0 : position.left,
width: widthStep ? widthStep * 0.75 : 0,
maxWidth: widthStep ? widthStep * 0.75 : 0,
} }, { children: [isError ? (_jsx("span", Object.assign({ id: 'customTimeError', className: 'custom-time-error', style: {
position: 'absolute',
top: 55,
width: widthStep,
} }, { children: isError }))) : (_jsx(_Fragment, {})), _jsx("input", { id: 'customTimeInputStart', className: 'custom-time-input custom-time-input-start', style: {
width: widthStep ? widthStep * 0.75 : 0,
maxWidth: widthStep ? widthStep * 0.75 : 0,
}, type: 'time', value: displayTime.startTime, step: 1, onChange: (event) => { var _a; return handleTime((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.valueAsNumber, TIME.START); } }), _jsx("input", { id: 'customTimeInputEnd', className: 'custom-time-input custom-time-input-end', style: {
width: widthStep ? widthStep * 0.75 : 0,
maxWidth: widthStep ? widthStep * 0.75 : 0,
}, type: 'time', value: displayTime.endTime, step: 1, onChange: (event) => { var _a; return handleTime((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.valueAsNumber, TIME.END); } })] })));
};