Merge pull request #2173 from zettca/fix/datepicker

refactor(datepicker): review performance. HVUIKIT-5642

Author: nantunes

automation/robot/storybook/core/datePicker/_datePicker.resource

@@ -3,11 +3,11 @@ Resource    ../_keywords.resource
 
 
 *** Variables ***
-${apply}               css:button[id*=apply]
+${apply}               css:.HvActionBar-root>button:first-child
 ${calendar}            css:.HvSingleCalendar-calendarWrapper
 ${calendarLeft}        css:.HvCalendar-rangeCalendarContainer>div:first-child
 ${calendarRight}       css:.HvCalendar-rangeCalendarContainer>div:last-child
-${cancel}              css:button[id*=cancel]
+${cancel}              css:.HvActionBar-root>button:last-child
 ${datePickerHeader}    css:.HvDatePicker-dropdown
 ${day}                 xpath:(//button[@data-in-month='true'])
 ${daySelected}         css:.HvSingleCalendar-calendarDateSelected

packages/core/src/Calendar/CalendarCell/index.d.ts

@@ -1,15 +1,11 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { withStyles } from "@material-ui/core";
-import { getWeekdayNamesList } from "../utils";
-import { REPRESENTATION_VALUES } from "../enums";
-import HvTypography from "../../Typography";
+import { HvTypography } from "../..";
 import styles from "./styles";
 
-const HvCalendarWeekLabel = ({ classes, locale }) => {
-  const listWeekdayNamesNarrow = getWeekdayNamesList(locale, REPRESENTATION_VALUES.NARROW);
-
-  return listWeekdayNamesNarrow.map((dayName, index) => {
+const HvCalendarWeekLabel = ({ classes, labels = [] }) => {
+  return labels.map((dayName, index) => {
     const key = `${dayName}-${index}`;
     return (
       <HvTypography variant="highlightText" className={classes.calendarDay} key={key}>
@@ -29,9 +25,9 @@ HvCalendarWeekLabel.propTypes = {
    */
   id: PropTypes.string,
   /**
-   * Locale to be used by the calendar.
+   * Localized day of week labels.
    */
-  locale: PropTypes.string,
+  labels: PropTypes.arrayOf(PropTypes.string),
   /**
    * Callback to define the input date.
    */

packages/core/src/Calendar/CalendarCell/index.js

@@ -1 +1 @@
-export { default } from "./CalendarWeekLabel";
+export { default } from "./CalendarWeekLabels";

packages/core/src/Calendar/CalendarCell/styles.js

@@ -1 +1 @@
-export { default } from "./CalendarWeekLabel";
+export { default } from "./CalendarWeekLabels";

packages/core/src/Calendar/CalendarWeekLabels/CalendarWeekLabel.js renamed to packages/core/src/Calendar/CalendarWeekLabels/CalendarWeekLabels.js

@@ -1,7 +1,7 @@
 import React, { useRef } from "react";
 import PropTypes from "prop-types";
 import clsx from "clsx";
-import { withStyles } from "@material-ui/core";
+import useComputation from "../../utils/useComputation";
 import {
   getDateISO,
   getFormattedDate,
@@ -11,7 +11,6 @@ import {
   checkIfDateIsDisabled,
 } from "../utils";
 import { HvTooltip, HvTypography } from "../..";
-import styles from "./styles";
 
 const HvCalendarCell = ({
   classes,
@@ -29,6 +28,7 @@ const HvCalendarCell = ({
   ...others
 }) => {
   const buttonEl = useRef(null);
+  const [title, computeTitle] = useComputation(() => getFormattedDate(value, locale));
   const { startDate, endDate } = calendarValue;
   const isCellToday = isSameDay(value, today);
   const isCellSelected = isSameDay(calendarValue, value);
@@ -83,14 +83,15 @@ const HvCalendarCell = ({
     <HvTooltip
       key={getDateISO(value)}
       enterDelay={600}
-      title={<HvTypography noWrap>{getFormattedDate(value, locale)}</HvTypography>}
+      onOpen={computeTitle}
+      title={title ? <HvTypography noWrap>{title}</HvTypography> : ""}
     >
       <div
         className={clsx(classes.dateWrapper, {
           [classes.cellsInRange]: inMonth && rangeMode && isSelecting,
           [classes.cellsOutsideRange]: rangeMode && !isSelecting,
         })}
-        data-calendarCell="calendarCell"
+        data-calendar-cell="calendarCell"
       >
         {renderDate()}
       </div>
@@ -141,4 +142,4 @@ HvCalendarCell.propTypes = {
   rangeMode: PropTypes.bool,
 };
 
-export default withStyles(styles, { name: "HvCalendarCell" })(HvCalendarCell);
+export default HvCalendarCell;

packages/core/src/Calendar/CalendarWeekLabels/index.d.ts

@@ -1,17 +1,17 @@
 /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
 
-import React, { useState, useContext } from "react";
+import React, { useState, useContext, useMemo } from "react";
 import PropTypes from "prop-types";
 import { withStyles } from "@material-ui/core";
 import clsx from "clsx";
 import isNil from "lodash/isNil";
 import { isKeypress, KeyboardCodes, setId } from "../../utils";
 import styles from "./styles";
 import { HvFormElementDescriptorsContext } from "../../Forms/FormElement";
-import { VIEW_MODE } from "../enums";
-import { isRange, isDate } from "../utils";
+import { VIEW_MODE, REPRESENTATION_VALUES } from "../enums";
+import { isRange, isDate, getWeekdayNamesList } from "../utils";
 import { generateCalendarModel } from "../model";
-import CalendarCell from "../CalendarCell";
+import CalendarCell from "./CalendarCell";
 import CalendarHeader from "../CalendarHeader";
 import CalendarWeekLabels from "../CalendarWeekLabels";
 import { HvComposedNavigation, HvMonthSelector } from "../CalendarNavigation";
@@ -51,6 +51,11 @@ const HvSingleCalendar = ({
   const firstDayOfCurrentMonth = new Date(calModel.year, calModel.month - 1, 1);
   const firstDayOfCurrentMonthTime = firstDayOfCurrentMonth.getTime();
 
+  const listWeekdayNames = useMemo(
+    () => getWeekdayNamesList(locale, REPRESENTATION_VALUES.NARROW),
+    [locale]
+  );
+
   const handleChange = (event, date) => {
     event?.preventDefault();
     onChange?.(event, date);
@@ -73,7 +78,7 @@ const HvSingleCalendar = ({
     // This code is very brittle and should be managed with the focus wrapper
     const el = document?.activeElement;
     const parent = el?.parentElement?.parentElement;
-    const siblings = [...parent?.getElementsByClassName("HvCalendarCell-cellContainer")];
+    const siblings = [...parent?.getElementsByClassName(classes.cellContainer)];
     const elIndex = siblings.indexOf(el);
 
     if (isKeypress(event, Enter)) {
@@ -98,11 +103,11 @@ const HvSingleCalendar = ({
    * @param currentDate - The array representing the date [YYYY, MM, DD].
    * @memberOf Calendar
    */
-  const renderCalendarDate = (currentDate, index) => {
+  const renderCalendarDate = (currentDate) => {
     return (
       <CalendarCell
         classes={classes}
-        key={index}
+        key={currentDate}
         tabIndex={currentDate.getTime() === firstDayOfCurrentMonthTime ? 0 : -1}
         onChange={handleChange}
         onKeyDown={handleKeyDown}
@@ -119,34 +124,6 @@ const HvSingleCalendar = ({
     );
   };
 
-  const monthSelector = (
-    <HvMonthSelector
-      id={id}
-      locale={locale}
-      onChange={onVisibleDateChange}
-      onViewModeChange={(viewMode) => setCalViewMode(viewMode)}
-      visibleMonth={visibleMonth || today.getMonth() + 1}
-      rangeMode={rangeMode}
-    />
-  );
-
-  const navigationAndCalendar = (
-    <div className="calendarWrapper">
-      <HvComposedNavigation
-        id={id}
-        locale={locale}
-        onChange={onVisibleDateChange}
-        onViewModeChange={(viewMode) => setCalViewMode(viewMode)}
-        visibleYear={visibleYear || today.getFullYear()}
-        visibleMonth={visibleMonth || today.getMonth() + 1}
-      />
-      <div className={classes.calendarGrid} aria-controls={HvCalendarHeader?.[0]?.id}>
-        <CalendarWeekLabels locale={locale} />
-        {calModel.dates.map(renderCalendarDate)}
-      </div>
-    </div>
-  );
-
   return (
     <div className={clsx(className, classes.calendarContainer)} {...others}>
       <div id={id} className={classes.calendarWrapper}>
@@ -157,8 +134,32 @@ const HvSingleCalendar = ({
           showEndDate={showEndDate && !isDateSelectionMode}
         />
         <>
-          {calViewMode === VIEW_MODE.CALENDAR && navigationAndCalendar}
-          {calViewMode === VIEW_MODE.MONTHLY && monthSelector}
+          {calViewMode === VIEW_MODE.CALENDAR && (
+            <div>
+              <HvComposedNavigation
+                id={id}
+                locale={locale}
+                onChange={onVisibleDateChange}
+                onViewModeChange={(viewMode) => setCalViewMode(viewMode)}
+                visibleYear={visibleYear || today.getFullYear()}
+                visibleMonth={visibleMonth || today.getMonth() + 1}
+              />
+              <div className={classes.calendarGrid} aria-controls={HvCalendarHeader?.[0]?.id}>
+                <CalendarWeekLabels labels={listWeekdayNames} />
+                {calModel.dates.map(renderCalendarDate)}
+              </div>
+            </div>
+          )}
+          {calViewMode === VIEW_MODE.MONTHLY && (
+            <HvMonthSelector
+              id={id}
+              locale={locale}
+              onChange={onVisibleDateChange}
+              onViewModeChange={(viewMode) => setCalViewMode(viewMode)}
+              visibleMonth={visibleMonth || today.getMonth() + 1}
+              rangeMode={rangeMode}
+            />
+          )}
         </>
       </div>
     </div>
@@ -234,6 +235,7 @@ HvSingleCalendar.propTypes = {
      * Styles applied to the cells when it is not part of the selection in progress.
      */
     cellsOutsideRange: PropTypes.string,
+    cellContainer: PropTypes.string,
   }).isRequired,
   /**
    * Identifier.