glide-design-system/dist/components/scheduler/Weekview.js

Glide design system is an open-source React component library. It offers numerous benefits that make them essential tools for design and development teams.

"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.exec.js");
require("core-js/modules/es.string.replace.js");
require("core-js/modules/es.number.to-fixed.js");
var _react = _interopRequireWildcard(require("react"));
var _WeekViewModule = _interopRequireDefault(require("./WeekView.module.css"));
var _Scheduler = require("./Scheduler");
var _EventForm = _interopRequireDefault(require("./EventForm"));
var _EventDescrption = _interopRequireDefault(require("./EventDescrption"));
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 WeekView(_ref) {
  let {
    selectedDate,
    onEventsSubmit,
    setUpdateData,
    setStartTime,
    setEndTime,
    onEventDelete,
    descriptionStyle,
    timeRange,
    formOpen,
    setFormOpen
  } = _ref;
  const localEvents = (0, _react.useContext)(_Scheduler.EventsContext);
  const mouseDown = (0, _react.useRef)(false);
  const initialDateTimeRef = (0, _react.useRef)({
    date: new Date(selectedDate),
    timeIndex: null
  });
  const [weekStart, setWeekStart] = (0, _react.useState)(new Date(selectedDate));
  const [startEvent, setStartEvent] = (0, _react.useState)(null);
  const [endEvent, setEndEvent] = (0, _react.useState)(null);
  const [selectedCells, setSelectedCells] = (0, _react.useState)([]);
  const [updateEvents, setUpdateEvents] = (0, _react.useState)();
  const [eventDescription, setEventDescrption] = (0, _react.useState)(false);
  const [eventDescriptionPosition, setEventDescriptionPosition] = (0, _react.useState)({
    top: 0,
    left: 0
  });
  const generateDates = () => {
    const dates = [];
    for (let i = 0; i < 7; i++) {
      const currentDate = new Date(weekStart);
      currentDate.setDate(weekStart.getDate() + i);
      const formattedDate = "".concat(currentDate.getDate(), " ").concat(currentDate.toLocaleString("default", {
        month: "short"
      }));
      dates.push(formattedDate);
    }
    return dates;
  };
  const mouseDownHandler = (timeIndex, date) => {
    mouseDown.current = true;
    if (startEvent === undefined && endEvent === undefined) {
      const startTime = new Date();
      startTime.setHours(timeIndex + 7, 0, 0, 0);
      const endTime = new Date();
      endTime.setHours(timeIndex + 7 + 1, 0, 0, 0);
      setStartEvent(startTime);
      setEndEvent(endTime);
      setStartTime(startTime);
      setEndTime(endTime);
    } else {
      const startTime = new Date();
      startTime.setHours(timeIndex + 7, 0, 0, 0);
      setStartEvent(undefined);
      setEndEvent(undefined);
    }
    initialDateTimeRef.current = {
      date: new Date(date),
      timeIndex
    };
    setSelectedCells([{
      timeIndex,
      date
    }]);
  };
  const cancelEventFormModal = () => {
    setFormOpen(false);
    setStartEvent(undefined);
    setEndEvent(undefined);
  };
  const submitEventForm = () => {
    setFormOpen(false);
    setStartEvent(undefined);
    setEndEvent(undefined);
    onEventsSubmit();
  };
  const mouseMoveHandler = (timeIndex, date) => {
    if (mouseDown.current) {
      const startRow = initialDateTimeRef.current.timeIndex;
      const endRow = timeIndex;
      const min = Math.min(startRow, endRow);
      const max = Math.max(startRow, endRow);
      const range = Array.from({
        length: max - min + 1
      }, (_, i) => min + i);
      const newSelectedCells = range.map(index => ({
        timeIndex: index,
        date
      }));
      setSelectedCells(newSelectedCells);
      const time1 = range[0] + 7;
      const time2 = range[range.length - 1] + 7;
      const startDate = new Date(initialDateTimeRef.current.date);
      startDate.setHours(time1, 0, 0, 0);
      const endDate = new Date(date);
      endDate.setHours(time2 + 1, 0, 0, 0);
      setStartEvent(startDate);
      setEndEvent(endDate);
      setStartTime(startDate);
      setEndTime(endDate);
    }
  };
  const mouseUpHandler = () => {
    mouseDown.current = false;
    if (selectedCells.length > 0 && startEvent && endEvent) {
      openEventFormHandler();
    }
  };
  const openEventFormHandler = () => {
    setFormOpen(true);
  };
  const renderDateColumns = () => {
    const dates = generateDates();
    return dates.map((date, index) => /*#__PURE__*/_react.default.createElement("th", {
      style: {
        border: "1px solid #DDD"
      },
      key: index
    }, date));
  };
  const openDescription = (data, event) => {
    setFormOpen(false);
    setUpdateEvents(data);
    const cell = event.currentTarget.getBoundingClientRect();
    setEventDescriptionPosition({
      top: cell.top + window.scrollY,
      left: cell.left + window.scrollX
    });
    setEventDescrption(!eventDescription);
  };
  const closeDescrption = () => {
    setEventDescrption(false);
  };
  const deleteEvent = () => {
    onEventDelete();
    setEventDescrption(false);
  };
  (0, _react.useEffect)(() => {
    const startDate = selectedDate[0];
    setWeekStart(new Date(startDate));
  }, [selectedDate]);
  const formatTime = (startDate, endDate) => {
    const options = {
      hour: "numeric",
      minute: "numeric"
    };
    return "".concat(startDate === null || startDate === void 0 ? void 0 : startDate.toLocaleTimeString([], options), " - ").concat(endDate === null || endDate === void 0 ? void 0 : endDate.toLocaleTimeString([], options));
  };
  const renderTimeRows = () => {
    return Array.from({
      length: timeRange ? timeRange : 16
    }, (_, timeIndex) => {
      const time = (timeIndex + 7).toFixed(2).replace(".", ":");
      return /*#__PURE__*/_react.default.createElement("tr", {
        key: timeIndex
      }, /*#__PURE__*/_react.default.createElement("td", {
        className: "tableData",
        style: {
          border: "1px solid #DDD"
        }
      }, /*#__PURE__*/_react.default.createElement("div", {
        style: {
          textAlign: "center"
        }
      }, time)), generateDates().map((date, dateIndex) => {
        const cellDate = new Date(weekStart);
        cellDate.setDate(weekStart.getDate() + dateIndex);
        const eventsForCell = localEvents.filter(event => event.startDate.getDate() === cellDate.getDate() && event.startDate.getMonth() === cellDate.getMonth() + 1 && event.startDate.getFullYear() === cellDate.getFullYear() && event.startDate.getHours() === timeIndex + 7);
        const eventsForCells = localEvents.filter(event => event.startDate.getDate() === cellDate.getDate() && event.startDate.getMonth() === cellDate.getMonth() + 1 && event.startDate.getFullYear() === cellDate.getFullYear() && event.startDate.getHours() <= timeIndex + 7 - 1 && event.endDate.getHours() >= timeIndex + 7 + 1);
        const isSelectedCell = selectedCells.some(selectedCell => selectedCell.timeIndex === timeIndex && selectedCell.date.getDate() === cellDate.getDate());
        const hasEvents = eventsForCell.length > 0 || eventsForCells.length > 0;
        return /*#__PURE__*/_react.default.createElement("td", {
          style: {
            maxWidth: "50px",
            position: "relative",
            border: hasEvents ? "none" : "1px solid #ddd"
          },
          key: dateIndex,
          onMouseUp: mouseUpHandler,
          onMouseMove: () => mouseMoveHandler(timeIndex, cellDate),
          onMouseDown: () => mouseDownHandler(timeIndex, cellDate),
          className: "tableData ".concat(isSelectedCell ? _WeekViewModule.default.eventCellSelected : "")
        }, eventsForCell.map((event, index) => /*#__PURE__*/_react.default.createElement("div", {
          style: {
            backgroundColor: event !== null && event !== void 0 && event.backgroundColor ? event === null || event === void 0 ? void 0 : event.backgroundColor : "#0a5b99",
            color: "white"
          },
          className: _WeekViewModule.default.eventsList,
          onClick: events => {
            openDescription(event, events);
          }
        }, /*#__PURE__*/_react.default.createElement("div", {
          className: _WeekViewModule.default.eventName
        }, " ", event.eventName), /*#__PURE__*/_react.default.createElement("div", null, " ", formatTime(event === null || event === void 0 ? void 0 : event.startDate, event === null || event === void 0 ? void 0 : event.endDate)))), eventsForCells.map(event => /*#__PURE__*/_react.default.createElement("div", {
          key: event.id,
          style: {
            borderRadius: "5px"
          },
          onClick: events => {
            openDescription(event, events);
          }
        }, /*#__PURE__*/_react.default.createElement("div", {
          style: {
            backgroundColor: event !== null && event !== void 0 && event.backgroundColor ? event === null || event === void 0 ? void 0 : event.backgroundColor : "#0a5b99",
            height: "60px",
            paddingBottom: "1px",
            cursor: "pointer"
          }
        }))));
      }));
    });
  };
  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
    className: _WeekViewModule.default.eventsContainers
  }, /*#__PURE__*/_react.default.createElement("table", {
    border: "0"
  }, /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("th", {
    style: {
      border: "1px solid #DDD"
    }
  }, "Time"), renderDateColumns())), /*#__PURE__*/_react.default.createElement("tbody", null, renderTimeRows()))), formOpen && /*#__PURE__*/_react.default.createElement(_EventForm.default, {
    cancelModal: cancelEventFormModal,
    setUpdateData: setUpdateData,
    submitForm: submitEventForm
  }), eventDescription && /*#__PURE__*/_react.default.createElement(_EventDescrption.default, {
    closeDescrption: closeDescrption,
    datas: updateEvents,
    position: eventDescriptionPosition,
    submitForm: submitEventForm,
    setUpdateData: setUpdateData,
    onEventDelete: deleteEvent,
    descriptionStyle: descriptionStyle,
    setFormOpen: setFormOpen,
    formOpen: formOpen
  }));
}
var _default = WeekView;
exports.default = _default;