sapp-common-package-test-final 1.0.11 → 1.0.13

package/dist/index.modern.js

@@ -56,6 +56,7 @@ var useEffectAfterMounted = function useEffectAfterMounted(callback, dependencie
   }, dependencies);
 };
 
+var HOURS_PER_DAY = 24;
 var MINUTES_PER_HOUR = 60;
 var TIME_FORMAT = 'HH:mm';
 var DAYS_OF_WEEK;
@@ -68,6 +69,16 @@ var DAYS_OF_WEEK;
   DAYS_OF_WEEK["Saturday"] = "Saturday";
   DAYS_OF_WEEK["Sunday"] = "Sunday";
 })(DAYS_OF_WEEK || (DAYS_OF_WEEK = {}));
+var DAYS_OF_WEEK_SHORTEN;
+(function (DAYS_OF_WEEK_SHORTEN) {
+  DAYS_OF_WEEK_SHORTEN["Monday"] = "Mon";
+  DAYS_OF_WEEK_SHORTEN["Tuesday"] = "Tue";
+  DAYS_OF_WEEK_SHORTEN["Wednesday"] = "Wed";
+  DAYS_OF_WEEK_SHORTEN["Thursday"] = "Thur";
+  DAYS_OF_WEEK_SHORTEN["Friday"] = "Fri";
+  DAYS_OF_WEEK_SHORTEN["Saturday"] = "Sat";
+  DAYS_OF_WEEK_SHORTEN["Sunday"] = "Sun";
+})(DAYS_OF_WEEK_SHORTEN || (DAYS_OF_WEEK_SHORTEN = {}));
 var HOUR_OF_DAY;
 (function (HOUR_OF_DAY) {
   HOUR_OF_DAY["07:00"] = "07:00";
@@ -397,7 +408,7 @@ var HiddenEyeIcon = function HiddenEyeIcon() {
   }));
 };
 
-var styles = {"flex":"_2hGgU","transform":"_3-Pu9","cursor-pointer":"_2Mcv6","rounded-none":"_3EfQZ","border-gray-4":"_3-NVJ","bg-button":"_3-gs3","bg-info/10":"_2ENMR","bg-white":"_rF-HF","!text-error":"_3mBZd","text-black":"_Irb_H","text-gray-600":"_1pL5w","text-info":"_NLvfI","text-secondary-text":"_H-zEU","filter":"_p0OEu","sapp-calendar":"_18t93","btn":"_1oiD_","icon":"_-E7rn","btn-default":"_3WrnL","btn-primary":"_2-qBL","event-info":"_xYqjb","event-warning":"_1oq3N","event-success":"_1hTMm","event-error":"_1hEJk","event-default":"_8FWXy","sapp-calendar__container":"_102cL","header-calendar":"_3Yvs5","header-calendar__nav":"_18m93","header-calendar__date-picker":"_2GTYD","header-calendar__title":"_35LQ0","header-calendar__controls":"_FqVqb","header-calendar__divider":"_3kHog","monthly-calendar":"_2NDGW","weekly-calendar":"_1QrJs","monthly-calendar__title":"_3Tsy4","monthly-calendar__title-active":"_1Dyjm","weekly-norm__cell":"_sGK9m","weekly-norm__value":"_1Jsb-","monthly-calendar__cell":"_2hVZ4","monthly-calendar__cell--active":"_1uenJ","calendar-tooltip":"_2Uo1f","monthly-event__title":"_2gsg7","monthly-event__date":"_2GtPn","weekly-calendar__title":"_5WuQ8","weekly-calendar__cell":"_3lPkV","weekly-event":"_hnHem","weekly-event__title":"_21a0T","weekly-event__date":"_PiKmX","weekly-event--collapse":"_1pvXT","btn-lms-default":"_1GA3p","text-lms-primary":"_1gLzS","select-mode":"_12I9I","ant-select-dropdown-placement-bottomLeft":"_1ZvuX","header-calendar_filter":"_1fd_Y","lms-calendar__tablet":"_1sVO3"};
+var styles = {"flex":"_2hGgU","transform":"_3-Pu9","cursor-pointer":"_2Mcv6","resize":"_uCXxT","rounded-none":"_3EfQZ","border-gray-4":"_3-NVJ","bg-button":"_3-gs3","bg-info/10":"_2ENMR","bg-white":"_rF-HF","!text-error":"_3mBZd","text-black":"_Irb_H","text-gray-600":"_1pL5w","text-info":"_NLvfI","text-secondary-text":"_H-zEU","filter":"_p0OEu","sapp-calendar":"_18t93","btn":"_1oiD_","icon":"_-E7rn","btn-default":"_3WrnL","btn-primary":"_2-qBL","event-info":"_xYqjb","event-warning":"_1oq3N","event-success":"_1hTMm","event-error":"_1hEJk","event-default":"_8FWXy","sapp-calendar__container":"_102cL","header-calendar":"_3Yvs5","header-calendar__nav":"_18m93","header-calendar__date-picker":"_2GTYD","header-calendar__title":"_35LQ0","header-calendar__controls":"_FqVqb","header-calendar__divider":"_3kHog","monthly-calendar":"_2NDGW","weekly-calendar":"_1QrJs","monthly-calendar__title":"_3Tsy4","monthly-calendar__title-active":"_1Dyjm","weekly-norm__cell":"_sGK9m","weekly-norm__value":"_1Jsb-","monthly-calendar__cell":"_2hVZ4","monthly-calendar__cell--active":"_1uenJ","calendar-tooltip":"_2Uo1f","monthly-event__title":"_2gsg7","monthly-event__date":"_2GtPn","weekly-calendar__title":"_5WuQ8","weekly-calendar__cell":"_3lPkV","weekly-event":"_hnHem","weekly-event__title":"_21a0T","weekly-event__date":"_PiKmX","weekly-event--collapse":"_1pvXT","btn-lms-default":"_1GA3p","text-lms-primary":"_1gLzS","select-mode":"_12I9I","ant-select-dropdown-placement-bottomLeft":"_1ZvuX","header-calendar_filter":"_1fd_Y","lms-calendar__tablet":"_1sVO3"};
 
 var Button = function Button(_ref) {
   var _ref$type = _ref.type,
@@ -894,8 +905,224 @@ var MonthlyCalendar = function MonthlyCalendar(_ref) {
 };
 
 var _getIconEvent;
+var calculateBoxSize = function calculateBoxSize(startTime, endTime, isAllDay) {
+  if (isAllDay) {
+    return {
+      top: 10,
+      height: 50
+    };
+  }
+  var minutes = dayjs(startTime).minute();
+  var diffMinutes = dayjs(endTime).diff(startTime, 'minute', true);
+  return {
+    top: Math.floor(minutes / MINUTES_PER_HOUR * 100),
+    height: Math.floor(diffMinutes / MINUTES_PER_HOUR * 100)
+  };
+};
 var getIconEvent = (_getIconEvent = {}, _getIconEvent[EVENT_TYPES.TEACHING] = React.createElement(Book, null), _getIconEvent[EVENT_TYPES.BUSY] = React.createElement(CalendarDelete, null), _getIconEvent[EVENT_TYPES.TIME_OFF] = React.createElement(Star, null), _getIconEvent[EVENT_TYPES.OTHER] = React.createElement(CalendarAccept, null), _getIconEvent);
-var calculateBoxSize = function calculateBoxSize(startTime, endTime) {
+var MIN_HEIGHT_HIDE_DETAILS = 140;
+var MIN_HEIGHT_HIDE_ALL = 105;
+var WeeklyEvent = function WeeklyEvent(_ref) {
+  var event = _ref.event,
+    onOpenDetail = _ref.onOpenDetail,
+    onEventDetail = _ref.onEventDetail;
+  var _calculateBoxSize = calculateBoxSize(event.startDate, event.endDate, event.isAllDay),
+    top = _calculateBoxSize.top,
+    height = _calculateBoxSize.height;
+  var formattedDate = customDateFormat(event.startDate, TIME_FORMAT) + ' - ' + customDateFormat(event.endDate, TIME_FORMAT);
+  return React.createElement("div", {
+    className: styles["event-" + convertType[event.type]],
+    onClick: function onClick() {
+      onOpenDetail(dayjs(event.startDate).toDate(), [event]);
+      onEventDetail && onEventDetail(event);
+    },
+    style: {
+      top: top + "%",
+      height: height + "%",
+      zIndex: event.type === EVENT_TYPES.BUSY ? 2 : 1
+    }
+  }, React.createElement("div", {
+    className: clsx$1(styles['weekly-event'], height <= MIN_HEIGHT_HIDE_ALL && styles['weekly-event--collapse'])
+  }, React.createElement("div", {
+    className: styles.flex
+  }, getIconEvent[event.type]), React.createElement("div", {
+    className: clsx$1(height <= MIN_HEIGHT_HIDE_DETAILS && styles['weekly-event--collapse'])
+  }, React.createElement("div", {
+    className: styles['weekly-event__title']
+  }, React.createElement(CustomTooltip, {
+    title: event.title
+  }, event.title)), React.createElement("div", {
+    className: styles['weekly-event__date']
+  }, React.createElement(CustomTooltip, {
+    title: formattedDate
+  }, formattedDate)))));
+};
+
+var WeeklyCell = function WeeklyCell(_ref) {
+  var _events;
+  var events = _ref.events,
+    date = _ref.date,
+    onOpenDetail = _ref.onOpenDetail,
+    onOpenCreate = _ref.onOpenCreate,
+    onEventDetail = _ref.onEventDetail;
+  var isToday = dayjs().isSame(date, 'day');
+  var handleOpenCreateModal = function handleOpenCreateModal(e) {
+    if (e.target !== e.currentTarget) return;
+    onOpenCreate(dayjs(date).toDate());
+  };
+  events = (_events = events) === null || _events === void 0 ? void 0 : _events.sort(function (a, b) {
+    return a.type === EVENT_TYPES.BUSY && b.type !== EVENT_TYPES.BUSY ? 1 : -1;
+  });
+  var renderWeeklyEvent = useMemo(function () {
+    var _events2, _events3, _events4;
+    var isAllDay = (_events2 = events) === null || _events2 === void 0 ? void 0 : _events2.some(function (item) {
+      return item.isAllDay;
+    });
+    if (isAllDay && ((_events3 = events) === null || _events3 === void 0 ? void 0 : _events3.length) > 1) {
+      return React.createElement(React.Fragment, null, React.createElement(WeeklyEvent, {
+        event: events[0],
+        onOpenDetail: onOpenDetail,
+        onEventDetail: onEventDetail
+      }), React.createElement("div", {
+        className: styles['see-more']
+      }, React.createElement(CustomTooltip, {
+        placement: 'bottom',
+        title: React.createElement("div", {
+          className: styles['calendar-tooltip']
+        }, events.slice(1, events.length).map(function (event, index) {
+          return React.createElement(WeeklyEvent, {
+            event: event,
+            onOpenDetail: onOpenDetail,
+            onEventDetail: onEventDetail,
+            key: index + 1
+          });
+        }))
+      }, "+", Math.max(events.length - 1, 0), " More")));
+    }
+    return (_events4 = events) === null || _events4 === void 0 ? void 0 : _events4.map(function (event, index) {
+      return React.createElement(WeeklyEvent, {
+        key: index,
+        event: event,
+        onOpenDetail: onOpenDetail,
+        onEventDetail: onEventDetail
+      });
+    });
+  }, [events]);
+  return React.createElement("div", {
+    className: styles['weekly-calendar__cell'] + " " + (isToday ? styles['bg-info/10'] : styles['bg-white']),
+    onClick: handleOpenCreateModal
+  }, renderWeeklyEvent);
+};
+
+dayjs.extend(isBetween);
+var getEventAllDay = function getEventAllDay(events, targetDate) {
+  return daysOfWeekKeys.reduce(function (acc, day, index) {
+    var currentDate = targetDate.add(index, 'day');
+    acc[day] = {
+      events: events.reduce(function (filteredEvents, event) {
+        if (dayjs(event.startDate).isSame(currentDate.startOf('day')) && checkIsAllday(dayjs(event.startDate), dayjs(event.endDate))) {
+          filteredEvents.push(_extends({}, event, {
+            isAllDay: true
+          }));
+        }
+        return filteredEvents;
+      }, []),
+      date: currentDate
+    };
+    return acc;
+  }, {});
+};
+var getEventsOfDay = function getEventsOfDay(events, targetHour) {
+  return daysOfWeekKeys.reduce(function (acc, day, index) {
+    var currentDate = targetHour.add(index, 'day');
+    acc[day] = {
+      events: events.filter(function (event) {
+        return dayjs(event.startDate).isSame(currentDate, 'hour') && !checkIsAllday(dayjs(event.startDate), dayjs(event.endDate));
+      }),
+      date: currentDate
+    };
+    return acc;
+  }, {});
+};
+var WeeklyCalendar = function WeeklyCalendar(_ref) {
+  var startDate = _ref.startDate,
+    endDate = _ref.endDate,
+    events = _ref.events,
+    norms = _ref.norms,
+    showWeeklyNorm = _ref.showWeeklyNorm,
+    onOpenDetail = _ref.onOpenDetail,
+    onOpenCreate = _ref.onOpenCreate,
+    onEventDetail = _ref.onEventDetail,
+    loading = _ref.loading;
+  var getTableColumns = function getTableColumns() {
+    var _calculateNormOfWeek = calculateNormOfWeek(norms, events, startDate, endDate),
+      normOfWeek = _calculateNormOfWeek.normOfWeek,
+      totalNorm = _calculateNormOfWeek.totalNorm;
+    var hourColumn = {
+      title: React.createElement("div", {
+        className: styles['weekly-calendar__title']
+      }, showWeeklyNorm && React.createElement(React.Fragment, null, React.createElement("div", null, "Weekly Norm"), React.createElement("div", {
+        className: clsx$1(normOfWeek > totalNorm && styles['!text-error'])
+      }, normOfWeek + "/" + totalNorm))),
+      dataIndex: 'hour',
+      key: 'hour',
+      width: 1,
+      render: function render(value) {
+        return React.createElement("div", null, value);
+      }
+    };
+    var dayColumns = Object.values(DAYS_OF_WEEK).map(function (day, index) {
+      return {
+        title: React.createElement("div", {
+          className: styles['weekly-calendar__title']
+        }, React.createElement("div", null, day.slice(0, 3)), React.createElement("div", null, dayjs(startDate).add(index, 'day').format('DD/MM'))),
+        dataIndex: day,
+        key: day,
+        render: function render(value) {
+          return React.createElement(WeeklyCell, {
+            key: index,
+            events: value.events,
+            date: value.date,
+            onOpenDetail: onOpenDetail,
+            onOpenCreate: onOpenCreate,
+            onEventDetail: onEventDetail
+          });
+        }
+      };
+    });
+    return [hourColumn].concat(dayColumns);
+  };
+  var getTableData = function getTableData() {
+    var data = [];
+    data.push(_extends({
+      id: -1,
+      hour: 'All day'
+    }, getEventAllDay(events, startDate)));
+    for (var i = 0; i < HOURS_PER_DAY; i++) {
+      var targetHour = dayjs(startDate).add(i, 'hour');
+      data.push(_extends({
+        id: i,
+        hour: targetHour.format('HH:mm')
+      }, getEventsOfDay(events, targetHour)));
+    }
+    return data;
+  };
+  return React.createElement(Table, {
+    rowKey: function rowKey(record) {
+      return record.id;
+    },
+    columns: getTableColumns(),
+    dataSource: getTableData(),
+    pagination: false,
+    rowHoverable: false,
+    className: styles['weekly-calendar'],
+    loading: loading
+  });
+};
+
+var _getIconEvent$1;
+var getIconEvent$1 = (_getIconEvent$1 = {}, _getIconEvent$1[EVENT_TYPES.TEACHING] = React.createElement(Book, null), _getIconEvent$1[EVENT_TYPES.BUSY] = React.createElement(CalendarDelete, null), _getIconEvent$1[EVENT_TYPES.TIME_OFF] = React.createElement(Star, null), _getIconEvent$1[EVENT_TYPES.OTHER] = React.createElement(CalendarAccept, null), _getIconEvent$1);
+var calculateBoxSize$1 = function calculateBoxSize(startTime, endTime) {
   var minutes = dayjs(startTime).minute();
   var diffMinutes = dayjs(endTime).diff(startTime, 'hour', true);
   return {
@@ -908,7 +1135,7 @@ var LMSWeeklyEvent = function LMSWeeklyEvent(_ref) {
     onOpenDetail = _ref.onOpenDetail,
     onEventDetail = _ref.onEventDetail;
   var formattedDate = customDateFormat(event.startDate, TIME_FORMAT) + ' - ' + customDateFormat(event.endDate, TIME_FORMAT);
-  var _calculateBoxSize = calculateBoxSize(event.startDate, event.endDate),
+  var _calculateBoxSize = calculateBoxSize$1(event.startDate, event.endDate),
     width = _calculateBoxSize.width,
     left = _calculateBoxSize.left;
   return React.createElement("div", {
@@ -930,7 +1157,7 @@ var LMSWeeklyEvent = function LMSWeeklyEvent(_ref) {
     className: clsx$1(styles['weekly-event--collapse'])
   }, React.createElement("div", {
     className: styles.flex
-  }, getIconEvent[event.type]), React.createElement("div", {
+  }, getIconEvent$1[event.type]), React.createElement("div", {
     className: styles['weekly-event__title']
   }, React.createElement(CustomTooltip, {
     title: event.title
@@ -1070,7 +1297,7 @@ var LMSWeeklyCalendar = function LMSWeeklyCalendar(_ref) {
         id: i,
         hour: React.createElement("div", null, React.createElement("div", {
           className: styles['lms-calendar__tablet']
-        }, Object.values(DAYS_OF_WEEK)[i]), React.createElement("div", {
+        }, Object.values(DAYS_OF_WEEK_SHORTEN)[i]), React.createElement("div", {
           className: styles['lms-calendar__tablet']
         }, dayjs(startDate).add(i, 'day').format('DD')))
       }, getEventsOfHour(events, targetHour)));
@@ -1090,6 +1317,51 @@ var LMSWeeklyCalendar = function LMSWeeklyCalendar(_ref) {
   });
 };
 
+function LMSModeWeeklyCalendar(_ref) {
+  var startDate = _ref.startDate,
+    endDate = _ref.endDate,
+    events = _ref.events,
+    norms = _ref.norms,
+    _ref$showWeeklyNorm = _ref.showWeeklyNorm,
+    showWeeklyNorm = _ref$showWeeklyNorm === void 0 ? false : _ref$showWeeklyNorm,
+    onOpenDetail = _ref.onOpenDetail,
+    onOpenCreate = _ref.onOpenCreate,
+    onEventDetail = _ref.onEventDetail,
+    loading = _ref.loading;
+  var _useState = useState(window.innerWidth),
+    windowWidth = _useState[0],
+    setWindowWidth = _useState[1];
+  useEffect(function () {
+    var handleResize = function handleResize() {
+      setWindowWidth(window.innerWidth);
+    };
+    window.addEventListener('resize', handleResize);
+    return function () {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+  return React.createElement(React.Fragment, null, windowWidth > 1024 ? React.createElement(WeeklyCalendar, {
+    startDate: startDate,
+    endDate: endDate,
+    events: events,
+    norms: norms,
+    showWeeklyNorm: showWeeklyNorm,
+    onOpenDetail: onOpenDetail,
+    onOpenCreate: onOpenCreate,
+    onEventDetail: onEventDetail,
+    loading: loading
+  }) : React.createElement(LMSWeeklyCalendar, {
+    startDate: startDate,
+    endDate: endDate,
+    events: events,
+    norms: norms,
+    onOpenDetail: onOpenDetail,
+    onOpenCreate: onOpenCreate,
+    onEventDetail: onEventDetail,
+    loading: loading
+  }));
+}
+
 var SAPPCalendar = function SAPPCalendar(_ref) {
   var teacherName = _ref.teacherName,
     events = _ref.events,
@@ -1190,10 +1462,11 @@ var SAPPCalendar = function SAPPCalendar(_ref) {
     onOpenCreate: onOpenCreate,
     onEventDetail: onEventDetail,
     loading: loading
-  }), calendarMode === 'week' && React.createElement(LMSWeeklyCalendar, {
+  }), calendarMode === 'week' && React.createElement(LMSModeWeeklyCalendar, {
     startDate: startDate,
     endDate: endDate,
     events: splittedEvents,
+    showWeeklyNorm: showWeeklyNorm,
     norms: norms,
     onOpenDetail: onOpenDetail,
     onOpenCreate: onOpenCreate,