glide-design-system
Version:
Glide design system is an open-source React component library. It offers numerous benefits that make them essential tools for design and development teams.
357 lines (351 loc) • 16.9 kB
JavaScript
"use strict";
require("core-js/modules/es.weak-map.js");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
require("core-js/modules/web.dom-collections.iterator.js");
require("core-js/modules/es.regexp.to-string.js");
require("core-js/modules/es.array.includes.js");
require("core-js/modules/es.string.includes.js");
var _react = _interopRequireWildcard(require("react"));
var _dayjs = _interopRequireDefault(require("dayjs"));
var _DayViewModule = _interopRequireDefault(require("./DayView.module.css"));
var _EventForm = _interopRequireDefault(require("./EventForm"));
var _EventDescrption = _interopRequireDefault(require("./EventDescrption"));
var _Scheduler = require("./Scheduler");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function DayView(_ref) {
let {
selectedDate,
timeRange,
setStartTime,
setEndTime,
formOpen,
setFormOpen,
descriptionStyle,
tableCellStyle,
setUpdateData,
edit,
eventDescription,
setEventDescrption,
events,
width
} = _ref;
const tableContainerRef = (0, _react.useRef)(null);
const localEvents = (0, _react.useContext)(_Scheduler.EventsContext);
const [selectedRows, setSelectedRows] = (0, _react.useState)([]);
const isMouseDown = (0, _react.useRef)(false);
const [startEvent, setStartEvent] = (0, _react.useState)();
const [endEvent, setEndEvent] = (0, _react.useState)();
const [updateEvents, setUpdateEvents] = (0, _react.useState)();
const [eventDescriptionPosition, setEventDescriptionPosition] = (0, _react.useState)({
top: 0,
left: 0
});
const startDate = new Date(2023, 10, 16, 10, 0);
const handleMouseDown = startRow => {
localEvents === null || localEvents === void 0 ? void 0 : localEvents.map(data => {
if (startEvent === undefined && endEvent === undefined) {
const endHour = data === null || data === void 0 ? void 0 : data.endDate.getHours();
const startTime = new Date();
if (startRow === endHour) {
startTime.setHours(startRow, 0 + 1, 0, 0);
} else {
startTime.setHours(startRow - 1, 0, 0, 0);
}
const endTime = new Date();
endTime.setHours(startRow, 0, 0, 0);
if (endTime.getHours() === 0) {
endTime.setHours(startRow, 0 - 1, 0, 0);
} else {
endTime.setHours(startRow, 0, 0, 0);
}
setStartEvent(startTime);
setEndEvent(endTime);
setStartTime(startTime);
setEndTime(endTime);
}
});
isMouseDown.current = true;
setSelectedRows([startRow]);
};
const handleMouseMove = currentRow => {
if (isMouseDown.current && edit !== false) {
const startRow = selectedRows[0];
const endRow = currentRow;
const min = Math.min(startRow, endRow);
const max = Math.max(startRow, endRow);
const isOverlapping = localEvents.some(event => {
const eventStartRow = event.startDate.getHours();
const eventEndRow = event.endDate.getHours();
return min <= eventEndRow && max >= eventStartRow || startRow <= eventEndRow && endRow >= eventStartRow;
});
if (!isOverlapping) {
const range = Array.from({
length: max - min + 1
}, (_, i) => min + i);
setSelectedRows(range);
const time1 = range[0];
const time2 = range[range.length - 1];
const startTime = new Date();
startTime.setHours(time1 - 1, 0, 0, 0);
const endTime = new Date();
endTime.setHours(time2 - 1 + 1, 0, 0, 0);
setUpdateData("");
setStartEvent(startTime);
setEndEvent(endTime);
setStartTime(startTime);
setEndTime(endTime);
}
}
};
const handleMouseUp = () => {
isMouseDown.current = false;
if (selectedRows.length > 0 && startEvent && endEvent) {
openEventForm();
}
};
const renderTime = (hour, minute) => {
const amPm = hour < 12 ? "AM" : "PM";
// Change formattedHour calculation to handle 12 AM as 11 PM and other hours accordingly
const formattedHour = hour % 12 === 0 ? 11 : hour % 12 - 1;
const formattedMinute = minute < 10 ? "0".concat(minute) : minute;
return "".concat(formattedHour === 0 ? 12 : formattedHour, ":").concat(formattedMinute, " ").concat(amPm);
};
const openEventForm = () => {
setFormOpen(edit !== false ? true : false);
};
const cancelHandler = () => {
setFormOpen(false);
setStartEvent(undefined);
setEndEvent(undefined);
};
const hours = Array.from({
length: 24
}, (_, index) => index + 1);
const formatTime = (startDate, endDate) => {
const hours = startDate.getHours();
const minutes = startDate.getMinutes();
const ampm = hours >= 12 ? "PM" : "AM";
const formattedHours = hours % 12 || 12; // Convert 0 to 12
const hours2 = endDate.getHours();
const minutes2 = endDate.getMinutes();
const ampm2 = hours2 >= 12 ? "PM" : "AM";
const formattedHours2 = hours2 % 12 || 12; // Convert 0 to 12
return "".concat(formattedHours, ":").concat(minutes.toString().padStart(2, "0"), " ").concat(ampm, "-").concat(formattedHours2, ":").concat(minutes2.toString().padStart(2, "0"), " ").concat(ampm2);
};
const openDescription = (data, event) => {
setFormOpen(false);
setUpdateEvents(data);
setUpdateData(data);
const cell = event.currentTarget.getBoundingClientRect();
setEventDescriptionPosition({
top: cell.top + window.scrollY,
left: cell.left + window.scrollX
});
setEventDescrption(!eventDescription);
};
const closeDescrption = () => {
setEventDescrption(false);
};
(0, _react.useEffect)(() => {
const handleOutsideClick = event => {
if (tableContainerRef.current && !tableContainerRef.current.contains(event.target)) {
setSelectedRows([]);
setStartEvent(undefined);
setEndEvent(undefined);
}
};
document.addEventListener("mousedown", handleOutsideClick);
return () => {
document.removeEventListener("mousedown", handleOutsideClick);
};
}, []);
return /*#__PURE__*/_react.default.createElement("div", {
className: _DayViewModule.default.tableVviewContainer,
style: {
minWidth: "400px",
marginTop: "20px"
},
ref: tableContainerRef
}, hours === null || hours === void 0 ? void 0 : hours.map(hour => {
const isEventRowStart = localEvents.some(event => hour === (startDate === null || startDate === void 0 ? void 0 : startDate.getHours()) + 1);
return /*#__PURE__*/_react.default.createElement("div", {
key: hour,
style: {
height: "60px"
},
className: "".concat(_DayViewModule.default.tableRow, " ").concat(selectedRows.includes(hour) ? "selected" : ""),
onMouseDown: () => handleMouseDown(hour),
onMouseMove: () => handleMouseMove(hour),
onMouseUp: handleMouseUp
}, /*#__PURE__*/_react.default.createElement("div", {
style: {
width: "80px",
height: "60px",
borderRight: "1px solid #DDD"
}
}, renderTime(hour, 0)), /*#__PURE__*/_react.default.createElement("div", {
className: "".concat(_DayViewModule.default.eventCell, " ").concat(isEventRowStart ? "has-event" : "", " ").concat(selectedRows.includes(hour) ? _DayViewModule.default.eventCellSelected : ""),
style: {
width: "100%",
height: "100%"
}
}, localEvents === null || localEvents === void 0 ? void 0 : localEvents.map(event => {
const eventStartTime = event === null || event === void 0 ? void 0 : event.startDate;
const eventEndTime = event === null || event === void 0 ? void 0 : event.endDate;
const eventStartHour = (eventStartTime === null || eventStartTime === void 0 ? void 0 : eventStartTime.getHours()) + 1;
const eventStartMinutes = eventStartTime === null || eventStartTime === void 0 ? void 0 : eventStartTime.getMinutes();
const eventEndHour = (eventEndTime === null || eventEndTime === void 0 ? void 0 : eventEndTime.getHours()) + 1;
const eventEndMinutes = eventEndTime === null || eventEndTime === void 0 ? void 0 : eventEndTime.getMinutes();
const eventStartDate = event.startDate;
const eventEndDate = event.endDate;
var startDateString = eventStartDate;
var startingDate = new Date(startDateString);
startingDate.setMonth(startingDate.getMonth());
var endDateString = eventEndDate;
var endingDate = new Date(endDateString);
endingDate.setMonth(endingDate.getMonth());
const eventDateMatches = (0, _dayjs.default)(startingDate).isSame(selectedDate, "day") && (0, _dayjs.default)(endingDate).isSame(selectedDate, "day");
const eventYearMonthMatches = (0, _dayjs.default)(startingDate).isSame(selectedDate, "year") && (0, _dayjs.default)(startingDate).isSame(selectedDate, "month");
const eventStartRow = eventStartTime;
const eventEndTimes = (eventEndDate === null || eventEndDate === void 0 ? void 0 : eventEndDate.getHours()) - 7;
const eventEndRow = eventEndTimes;
if (eventDateMatches && eventYearMonthMatches) {
const start = eventStartDate === null || eventStartDate === void 0 ? void 0 : eventStartDate.getHours();
const end = eventEndDate.getHours();
const startMinutes = eventStartDate.getMinutes();
const endMinutes = eventEndDate.getMinutes();
const topPercent = startMinutes / 60 * 100;
const differenceHr = end - start;
let eventStartTimes = start === 0 && end === 0 ? (eventStartDate === null || eventStartDate === void 0 ? void 0 : eventStartDate.getHours()) + 1 : (eventStartDate === null || eventStartDate === void 0 ? void 0 : eventStartDate.getHours()) + 1;
let eventEndTime = start === 0 && end === 0 ? (eventEndDate === null || eventEndDate === void 0 ? void 0 : eventEndDate.getHours()) - 1 - 7 : (eventEndDate === null || eventEndDate === void 0 ? void 0 : eventEndDate.getHours()) - 7;
const startTime = new Date(eventStartDate);
// End time
const endTime = new Date(eventEndDate);
// Calculate the difference in milliseconds
const timeDifference = endTime - startTime;
// Convert the difference to minutes
const totalMinutes = timeDifference / (1000 * 60);
const hours = Math.floor(totalMinutes / 60);
const minutes = Math.floor(totalMinutes % 60);
const formattedTimeDiifrence = "".concat(hours, "h ").concat(minutes, "m");
if (hour === eventStartTimes && differenceHr < 1) {
const heightPercentage = ((eventEndHour - eventStartHour) * 60 + eventEndMinutes - eventStartMinutes) / 60 * 100;
return /*#__PURE__*/_react.default.createElement("div", {
style: {
width: "99.5%",
position: "relative"
}
}, /*#__PURE__*/_react.default.createElement("div", {
style: {
width: "100%",
height: "60px",
overflow: "hidden",
color: event !== null && event !== void 0 && event.color ? event === null || event === void 0 ? void 0 : event.color : "white",
borderRadius: "5px",
position: "absolute"
}
}, differenceHr < 1 && /*#__PURE__*/_react.default.createElement("div", {
onClick: events => {
openDescription(event, events);
},
style: {
width: "99.2%",
display: "flex",
alignItems: "center",
borderRadius: "5px",
height: "".concat(heightPercentage, "%"),
top: "".concat(topPercent, "%"),
marginLeft: "5px",
position: "absolute",
backgroundColor: event !== null && event !== void 0 && event.backgroundColor ? event === null || event === void 0 ? void 0 : event.backgroundColor : "#0a5b99",
color: event !== null && event !== void 0 && event.color ? event === null || event === void 0 ? void 0 : event.color : "white"
}
}, /*#__PURE__*/_react.default.createElement("div", {
style: {
marginLeft: "5px"
}
}, " ", "".concat(event.eventName, " - ")), /*#__PURE__*/_react.default.createElement("div", {
style: {
marginLeft: "3px"
}
}, "".concat(formatTime(eventStartDate, eventEndDate), " - ")), /*#__PURE__*/_react.default.createElement("div", {
style: {
marginLeft: "3px"
}
}, "(".concat(formattedTimeDiifrence, ")")))));
}
if ((eventStartHour < hour || eventStartHour === hour && eventStartMinutes < 0) && (eventEndHour > hour || eventEndHour === hour)) {
const eventTop = ((eventStartHour - hour) * 60 + eventStartMinutes) / 60 * 100;
const eventHeight = ((eventEndHour - eventStartHour) * 60 + eventEndMinutes - eventStartMinutes) / 60 * 100;
return /*#__PURE__*/_react.default.createElement("div", {
style: {
width: "99.5%",
position: "relative"
}
}, /*#__PURE__*/_react.default.createElement("div", {
key: event.eventName,
style: {
height: "60px",
width: "100%",
position: "absolute",
borderRadius: "5px"
}
}, /*#__PURE__*/_react.default.createElement("div", {
style: {
position: "absolute",
top: "".concat(eventTop, "%"),
height: "".concat(eventHeight, "%"),
width: "99.2%",
marginLeft: "5px",
display: totalMinutes < 60 ? "flex" : "",
alignItems: totalMinutes < 60 && "center",
backgroundColor: event !== null && event !== void 0 && event.backgroundColor ? event === null || event === void 0 ? void 0 : event.backgroundColor : "#0a5b99",
color: event !== null && event !== void 0 && event.color ? event === null || event === void 0 ? void 0 : event.color : "white",
borderRadius: "5px"
},
onClick: events => {
openDescription(event, events);
}
}, totalMinutes > 59 ? /*#__PURE__*/_react.default.createElement("div", {
style: {
marginLeft: "5px"
}
}, "".concat(event.eventName)) : /*#__PURE__*/_react.default.createElement("div", {
style: {
marginLeft: "5px"
}
}, "".concat(event.eventName, " - ")), /*#__PURE__*/_react.default.createElement("div", {
style: {
display: "flex",
marginLeft: "5px"
}
}, /*#__PURE__*/_react.default.createElement("div", null, "".concat(formatTime(eventStartDate, eventEndDate), " - ")), /*#__PURE__*/_react.default.createElement("div", {
style: {
marginLeft: "3px"
}
}, "(".concat(formattedTimeDiifrence, ")"))))));
} else {
return null;
}
}
})));
}), eventDescription && /*#__PURE__*/_react.default.createElement(_EventDescrption.default, {
closeDescrption: closeDescrption,
datas: updateEvents,
descriptionStyle: descriptionStyle,
position: eventDescriptionPosition,
setFormOpen: setFormOpen,
formOpen: formOpen
}), formOpen && /*#__PURE__*/_react.default.createElement(_EventForm.default, {
cancelModal: cancelHandler,
setSelectedRows: setSelectedRows,
datas: updateEvents
}));
}
var _default = DayView;
exports.default = _default;