refactor(calendar): memo weekDays. HVUIKIT-5642

conditional MonthSelector instantiation

Author: zettca

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

@@ -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/CalendarWeekLabels/index.d.ts

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

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

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

packages/core/src/Calendar/SingleCalendar/SingleCalendar.js

@@ -1,15 +1,15 @@
 /* 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 CalendarHeader from "../CalendarHeader";
@@ -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);
@@ -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>