fix(HoverCard): add withinPortal to HoverCard and fix eslint errors

leemonade · Feb 15, 2024 · 8dd922d · 8dd922d
1 parent 5b019d3
commit 8dd922d
Showing 1 changed file with 14 additions and 9 deletions.
diff --git a/packages/leemons/src/common/ClassroomHeaderBar/components/ScheduleItem/ScheduleItem.js b/packages/leemons/src/common/ClassroomHeaderBar/components/ScheduleItem/ScheduleItem.js
@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Box, HoverCard, Text, TextClamp } from '@bubbles-ui/components';
-import { SCHEDULE_PROPS } from '../../ClassroomHeaderBar.constants';
 import { TimeClockCircleIcon } from '@bubbles-ui/icons/outline';
 import { find, forEach } from 'lodash';
+import { SCHEDULE_PROPS } from '../../ClassroomHeaderBar.constants';
 
 function formatTime(time) {
   if (time.length > 5) {
@@ -15,8 +15,8 @@ function formatTime(time) {
 const ScheduleItem = ({ schedule, scheduleLabel, locale, firstDayOfWeek = 1, classes, cx }) => {
   const [weekDays, setWeekDays] = useState([]);
 
-  const renderSchedule = (schedule) => {
-    const { day, start, end, dayWeek } = schedule;
+  const renderSchedule = (scheduleParam) => {
+    const { day, start, end, dayWeek } = scheduleParam;
     const week = find(weekDays, { index: dayWeek });
     return (
       <Text key={`${day}-${start}-${end}`} role="productive" transform="capitalize" truncated>{`${
@@ -30,23 +30,23 @@ const ScheduleItem = ({ schedule, scheduleLabel, locale, firstDayOfWeek = 1, cla
     import(`dayjs/locale/${locale}.js`).then((e) => {
       orderedWeekdays = [...e.weekdays];
       if (firstDayOfWeek > 0) {
-        const e = [...Array(firstDayOfWeek).keys()];
-        forEach(e, () => {
+        const el = [...Array(firstDayOfWeek).keys()];
+        forEach(el, () => {
           orderedWeekdays.push(orderedWeekdays.shift());
         });
       }
       setWeekDays(
-        orderedWeekdays.map((day, index) => {
+        orderedWeekdays.map((day) => {
           let dayLabel = day.substring(0, 2);
           dayLabel = dayLabel.charAt(0).toUpperCase() + dayLabel.slice(1);
-          return { label: dayLabel, index: e.weekdays.indexOf(day), day: day };
+          return { label: dayLabel, index: e.weekdays.indexOf(day), day };
         }),
       );
     });
   }, [locale]);
 
   return (
-    <HoverCard offset={16}>
+    <HoverCard offset={16} withinPortal>
       <HoverCard.Target>
         <Box className={cx(classes.infoWrapper, classes.clickable)}>
           <TimeClockCircleIcon height={15} width={15} style={{ minHeight: 15, minWidth: 15 }} />
@@ -59,7 +59,7 @@ const ScheduleItem = ({ schedule, scheduleLabel, locale, firstDayOfWeek = 1, cla
       </HoverCard.Target>
       <HoverCard.Dropdown>
         <Box className={classes.scheduleContainer}>
-          {schedule.map((schedule) => renderSchedule(schedule))}
+          {schedule.map((scheduleElem) => renderSchedule(scheduleElem))}
         </Box>
       </HoverCard.Dropdown>
     </HoverCard>
@@ -69,6 +69,11 @@ const ScheduleItem = ({ schedule, scheduleLabel, locale, firstDayOfWeek = 1, cla
 ScheduleItem.defaultProps = {};
 ScheduleItem.propTypes = {
   schedule: PropTypes.arrayOf(SCHEDULE_PROPS),
+  scheduleLabel: PropTypes.string,
+  locale: PropTypes.string,
+  firstDayOfWeek: PropTypes.number,
+  classes: PropTypes.object,
+  cx: PropTypes.func,
 };
 
 export { ScheduleItem };