Merge pull request #1825 from wix/infra/WeekDaysName_component

WeekDaysNames component

Author: Inbal-Tish

src/agenda/index.tsx

@@ -4,7 +4,6 @@ import memoize from 'memoize-one';
 
 import React, {Component} from 'react';
 import {
-  Text,
   View,
   Dimensions,
   Animated,
@@ -16,13 +15,14 @@ import {
 
 import {extractComponentProps} from '../componentUpdater';
 import {parseDate, xdateToData, toMarkingFormat} from '../interface';
-import {weekDayNames, sameDate, sameMonth} from '../dateutils';
+import {sameDate, sameMonth} from '../dateutils';
 // @ts-expect-error
 import {AGENDA_CALENDAR_KNOB} from '../testIDs';
 import {VelocityTracker} from '../velocityTracker';
 import {DateData, AgendaSchedule} from '../types';
 import {getCalendarDateString} from '../services';
 import styleConstructor from './style';
+import WeekDaysNames from '../commons/WeekDaysNames';
 import CalendarList, {CalendarListProps} from '../calendar-list';
 import ReservationList, {ReservationListProps}  from './reservation-list';
 
@@ -373,26 +373,21 @@ export default class Agenda extends Component<AgendaProps, State> {
     return knob;
   }
 
-  renderWeekDaysNames = memoize((weekDaysNames: string[]) => {
-    return weekDaysNames.map((day, index) => (
-      <Text 
-        key={day + index} 
-        style={this.style.weekday} 
-        allowFontScaling={false} 
-        numberOfLines={1}
-      >
-        {day}
-      </Text>
-    ));
-  });
+  renderWeekDaysNames = () => {
+    return (
+      <WeekDaysNames 
+        firstDay={this.props.firstDay} 
+        style={this.style.dayHeader} 
+      />
+    );
+  };
 
   renderWeekNumbersSpace = () => {
-    return this.props.showWeekNumbers && <View style={this.style.weekday} />;
+    return this.props.showWeekNumbers && <View style={this.style.dayHeader}/>;
   };
 
   render() {
-    const {firstDay, hideKnob, style, testID} = this.props;
-    const weekDaysNames = weekDayNames(firstDay);
+    const {hideKnob, style, testID} = this.props;
     const agendaHeight = this.initialScrollPadPosition();
     const weekdaysStyle = [
       this.style.weekdays,
@@ -458,7 +453,7 @@ export default class Agenda extends Component<AgendaProps, State> {
         </Animated.View>
         <Animated.View style={weekdaysStyle}>
           {this.renderWeekNumbersSpace()}
-          {this.renderWeekDaysNames(weekDaysNames)}
+          {this.renderWeekDaysNames()}
         </Animated.View>
         <Animated.ScrollView
           ref={this.scrollPad}

src/agenda/style.ts

@@ -34,13 +34,13 @@ export default function styleConstructor(theme: Theme = {}) {
       alignItems: 'center',
       backgroundColor: appStyle.calendarBackground
     },
-    weekday: {
+    dayHeader: {
       width: 32,
       textAlign: 'center',
-      color: appStyle.textSectionTitleColor,
       fontSize: appStyle.textDayHeaderFontSize,
       fontFamily: appStyle.textDayHeaderFontFamily,
-      fontWeight: appStyle.textDayHeaderFontWeight
+      fontWeight: appStyle.textDayHeaderFontWeight,
+      color: appStyle.textSectionTitleColor
     },
     reservations: {
       flex: 1,

src/calendar/header/index.tsx

@@ -235,11 +235,15 @@ const CalendarHeader = forwardRef((props: CalendarHeaderProps, ref) => {
     }
   };
 
+  const renderWeekNumbersSpace = () => {
+    return showWeekNumbers && <View style={style.current.dayHeader}/>;
+  };
+
   const renderDayNames = () => {
     if (!hideDayNames) {
       return (
         <View style={style.current.week} testID={testID ? `${HEADER_DAY_NAMES}-${testID}` : HEADER_DAY_NAMES}>
-          {showWeekNumbers && <Text allowFontScaling={false} style={style.current.dayHeader}></Text>}
+          {renderWeekNumbersSpace()}
           {renderWeekDays}
         </View>
       );

src/expandableCalendar/WeekCalendar/WeekDaysNames.tsx renamed to src/commons/WeekDaysNames.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import {StyleProp, Text, TextStyle} from 'react-native';
-
-import {weekDayNames} from '../../dateutils';
+import {weekDayNames} from '../dateutils';
 
 interface WeekDaysNamesProps {
   firstDay?: number;
@@ -10,6 +9,7 @@ interface WeekDaysNamesProps {
 
 const WeekDaysNames = React.memo(({firstDay, style}: WeekDaysNamesProps) => {
   const dayNames = weekDayNames(firstDay);
+  
   return dayNames.map((day: string, index: number) => (
     <Text
       allowFontScaling={false}

src/expandableCalendar/WeekCalendar/index.tsx

@@ -4,15 +4,16 @@ import XDate from 'xdate';
 import {Map} from 'immutable';
 
 import React, {Component} from 'react';
-import {FlatList, View, Text, NativeSyntheticEvent, NativeScrollEvent} from 'react-native';
+import {FlatList, View, NativeSyntheticEvent, NativeScrollEvent} from 'react-native';
 
 import {extractComponentProps} from '../../componentUpdater';
-import {weekDayNames, sameWeek} from '../../dateutils';
+import {sameWeek} from '../../dateutils';
 import {toMarkingFormat} from '../../interface';
 import {DateData} from '../../types';
 import styleConstructor from '../style';
 import asCalendarConsumer from '../asCalendarConsumer';
 import CalendarList, {CalendarListProps} from '../../calendar-list';
+import WeekDaysNames from '../../commons/WeekDaysNames';
 import Week from '../week';
 import Presenter from './presenter';
 import constants from '../../commons/constants';
@@ -168,26 +169,18 @@ class WeekCalendar extends Component<WeekCalendarProps, State> {
 
   keyExtractor = (_: string, index: number) => index.toString();
 
-  renderWeekDaysNames = memoize(weekDaysNames => {
-    return weekDaysNames.map((day: string, index: number) => (
-      <Text
-        allowFontScaling={false}
-        key={index}
-        style={this.style.dayHeader}
-        numberOfLines={1}
-        accessibilityLabel={''}
-        // accessible={false} // not working
-        // importantForAccessibility='no'
-      >
-        {day}
-      </Text>
-    ));
-  });
+  renderWeekDaysNames = () => {
+    return (
+      <WeekDaysNames 
+        firstDay={this.props.firstDay} 
+        style={this.style.dayHeader} 
+      />
+    );
+  };
 
   render() {
     const {allowShadow, firstDay, hideDayNames, current, context} = this.props;
     const {items} = this.state;
-    const weekDaysNames = weekDayNames(firstDay);
     const extraData = Map({
       current,
       date: context.date,
@@ -202,7 +195,7 @@ class WeekCalendar extends Component<WeekCalendarProps, State> {
         {!hideDayNames && (
           <View style={[this.style.week, this.style.weekCalendar]}>
             {/* {this.props.weekNumbers && <Text allowFontScaling={false} style={this.style.dayHeader}></Text>} */}
-            {this.renderWeekDaysNames(weekDaysNames)}
+            {this.renderWeekDaysNames()}
           </View>
         )}
         <FlatList

src/expandableCalendar/WeekCalendar/new.tsx

@@ -4,7 +4,7 @@ import XDate from 'xdate';
 
 import InfiniteList from '../../infinite-list';
 import Week from '../week';
-import WeekDaysNames from './WeekDaysNames';
+import WeekDaysNames from '../../commons/WeekDaysNames';
 import {CalendarListProps} from '../../calendar-list';
 import CalendarContext from '../../expandableCalendar/Context';
 import styleConstructor from '../style';
@@ -106,7 +106,7 @@ const WeekCalendar = (props: WeekCalendarProps) => {
     >
       {!hideDayNames && (
         <View style={[style.current.week, style.current.weekCalendar]}>
-          <WeekDaysNames firstDay={firstDay} style={style.current.dayHeader} />
+          <WeekDaysNames firstDay={firstDay} style={style.current.dayHeader}/>
         </View>
       )}
       <View>

src/expandableCalendar/index.tsx

@@ -23,15 +23,16 @@ import {
 
 // @ts-expect-error
 import {CALENDAR_KNOB} from '../testIDs';
-import {page, weekDayNames} from '../dateutils';
+import {page} from '../dateutils';
 import {parseDate, toMarkingFormat} from '../interface';
 import {Theme, DateData, Direction} from '../types';
 import styleConstructor, {HEADER_HEIGHT, KNOB_CONTAINER_HEIGHT} from './style';
-import CalendarList, {CalendarListProps} from '../calendar-list';
+import WeekDaysNames from '../commons/WeekDaysNames';
 import Calendar from '../calendar';
-import asCalendarConsumer from './asCalendarConsumer';
-import WeekCalendar from './WeekCalendar';
+import CalendarList, {CalendarListProps} from '../calendar-list';
 import Week from './week';
+import WeekCalendar from './WeekCalendar';
+import asCalendarConsumer from './asCalendarConsumer';
 
 import constants from '../commons/constants';
 const commons = require('./commons');
@@ -475,21 +476,19 @@ class ExpandableCalendar extends Component<ExpandableCalendarProps, State> {
     ];
   });
 
-  renderWeekDaysNames = memoize((weekDaysNames, calendarStyle) => {
+  renderWeekDaysNames = () => {
     return (
-      <View style={this.getWeekDaysStyle(calendarStyle)}>
-        {weekDaysNames.map((day: string, index: number) => (
-          <Text allowFontScaling={false} key={day + index} style={this.style.weekday} numberOfLines={1}>
-            {day}
-          </Text>
-        ))}
+      <View style={this.getWeekDaysStyle(this.props.calendarStyle)}>
+        <WeekDaysNames
+          firstDay={this.props.firstDay}
+          style={this.style.dayHeader}
+        />
       </View>
     );
-  });
+  };
 
   renderHeader() {
     const monthYear = new XDate(this.props.context.date).toString('MMMM yyyy');
-    const weekDaysNames = weekDayNames(this.props.firstDay);
 
     return (
       <Animated.View
@@ -500,7 +499,7 @@ class ExpandableCalendar extends Component<ExpandableCalendarProps, State> {
         <Text allowFontScaling={false} style={this.style.headerTitle}>
           {monthYear}
         </Text>
-        {this.renderWeekDaysNames(weekDaysNames, this.props.calendarStyle)}
+        {this.renderWeekDaysNames()}
       </Animated.View>
     );
   }

src/expandableCalendar/style.ts

@@ -81,7 +81,7 @@ export default function styleConstructor(theme: Theme = {}) {
       flexDirection: 'row', 
       justifyContent: 'space-between' 
     },
-    weekday: {
+    dayHeader: {
       width: 32,
       textAlign: 'center',
       fontSize: appStyle.textDayHeaderFontSize,
@@ -96,7 +96,7 @@ export default function styleConstructor(theme: Theme = {}) {
       position: 'absolute',
       left: 0,
       right: 0,
-      top: HEADER_HEIGHT + (constants.isAndroid ? 8 : 4), // align row on top of calendar's first row
+      top: HEADER_HEIGHT + (constants.isAndroid ? 8 : 9), // align row on top of calendar's first row
     },
     hidden: {
       opacity: 0
@@ -123,14 +123,6 @@ export default function styleConstructor(theme: Theme = {}) {
     emptyDayContainer: {
       flex: 1
     },
-    dayHeader: {
-      width: 32,
-      textAlign: 'center',
-      fontSize: appStyle.textDayHeaderFontSize,
-      fontFamily: appStyle.textDayHeaderFontFamily,
-      fontWeight: appStyle.textDayHeaderFontWeight,
-      color: appStyle.textSectionTitleColor
-    },
     arrowImage: {
       tintColor: appStyle.arrowColor,
       transform: constants.isRTL ? [{scaleX: -1}] : undefined