cleanups (#1982)

* Move 'MarkedDates' to types and use it from there

* clean unused

* Add 'getLocal' to dateutils and use it in services

* Moving to utils directory: hooks, momentResolver, Profiler, testUtils. velocityTracker

* Get markings enum from Marking component

* import specific lodash methods

* CalendarPlaygroundScreen - create sub switches for dep props

* reverting file move

Author: Inbal-Tish

example/src/mocks/agendaItems.ts

@@ -1,4 +1,5 @@
 import isEmpty from 'lodash/isEmpty';
+import {MarkedDates} from '../../../src/types';
 
 const today = new Date().toISOString().split('T')[0];
 const fastDate = getPastDate(3);
@@ -116,12 +117,8 @@ export const agendaItems = [
   }
 ];
 
-type MarkedDate = {
-  [key: string]: object;
-}
-
 export function getMarkedDates() {
-  const marked: MarkedDate = {};
+  const marked: MarkedDates = {};
 
   agendaItems.forEach(item => {
     // NOTE: only mark dates with data

example/src/screens/calendarPlaygroundScreen.tsx

@@ -1,25 +1,20 @@
 import times from 'lodash/times';
-import React, {useState, Fragment, useCallback, useMemo, useRef} from 'react';
+import React, {useState, useCallback, useMemo, useRef} from 'react';
 import {StyleSheet, View, ScrollView, Text, TouchableOpacity, Switch, Alert} from 'react-native';
 import {Calendar, CalendarUtils} from 'react-native-calendars';
+
 import testIDs from '../testIDs';
+import Marking from '../../../src/calendar/day/marking';
 
 const INITIAL_DATE = '2022-07-06';
 const GREEN = '#13ba7d';
 const PINK = '#a68a9f';
 const RED = '#ba1313';
-enum Markings {
-  DOT = 'dot',
-  MULTI_DOT = 'multi-dot',
-  PERIOD = 'period',
-  MULTI_PERIOD = 'multi-period',
-  CUSTOM = 'custom'
-}
 
 const NewCalendarScreen = () => {
   const [selected, setSelected] = useState(INITIAL_DATE);
   const [currentMonth, setCurrentMonth] = useState(INITIAL_DATE);
-  const [markingType, setMarkingType] = useState(Markings.DOT);
+  const [markingType, setMarkingType] = useState(Marking.markings.DOT);
   const [selectedButtonIndex, setSelectedButtonIndex] = useState(0);
 
   /** props */
@@ -289,15 +284,15 @@ const NewCalendarScreen = () => {
 
   const markingForType = useCallback(() => {
     switch (markingType) {
-      case Markings.DOT:
+      case Marking.markings.DOT:
         return dotMarks;
-      case Markings.MULTI_DOT:
+      case Marking.markings.MULTI_DOT:
         return multiDotMarks;
-      case Markings.PERIOD:
+      case Marking.markings.PERIOD:
         return periodWithDotsMarks; //periodMarks;
-      case Markings.MULTI_PERIOD:
+      case Marking.markings.MULTI_PERIOD:
         return multiPeriodMarks;
-      case Markings.CUSTOM:
+      case Marking.markings.CUSTOM:
         return customMarks;
     }
   }, [markingType, selected]);
@@ -450,32 +445,36 @@ const NewCalendarScreen = () => {
     return (
       <View>
         {renderSwitch('Min and Max Dates', minAndMax, toggleMinAndMax)}
-        {renderSwitch('Allow Selection Out Of Range', allowSelectionOutOfRange, toggleAllowSelectionOutOfRange)}
+        <View style={styles.subSwitchContainer}>
+          {minAndMax && renderSwitch('Allow Selection Out Of Range', allowSelectionOutOfRange, toggleAllowSelectionOutOfRange)}
+        </View>
         {renderSwitch('Enable Swipe Months', enableSwipeMonths, toggleEnableSwipeMonths)}
         {renderSwitch('Disable Month Change', disableMonthChange, toggleDisableMonthChange)}
         {renderSwitch('Show Week Numbers', showWeekNumbers, toggleShowWeekNumbers)}
         {renderSwitch('Show Six Weeks', showSixWeeks, toggleShowSixWeeks)}
         {renderSwitch('Hide Extra Days', hideExtraDays, toggleHideExtraDays)}
         {renderSwitch('Hide Day Names', hideDayNames, toggleHideDayNames)}
-        {renderSwitch('Hide Arrows', hideArrows, toggleHideArrows)}
         {renderSwitch('Disabled By Default', disabledByDefault, toggleDisabledByDefault)}
         {renderSwitch('Disable All Touch Events For Disabled Days', disableAllTouchEventsForDisabledDays, toggleDisableAllTouchEventsForDisabledDays)}
         {renderSwitch('Disable All Touch Events For Inactive Days', disableAllTouchEventsForInactiveDays, toggleDisableAllTouchEventsForInactiveDays)}
         {renderSwitch('Display Loading Indicator', displayLoadingIndicator, toggleDisplayLoadingIndicator)}
         {renderSwitch('Disabled Days Indexes', disabledDaysIndexes, toggleDisabledDaysIndexes)}
+        {renderSwitch('Hide Arrows', hideArrows, toggleHideArrows)}
+        <View style={styles.subSwitchContainer}>
+          {!hideArrows && renderSwitch('Disable Arrow Left', disableArrowLeft, toggleDisableArrowLeft)}
+          {!hideArrows && renderSwitch('Disable Arrow Right', disableArrowRight, toggleDisableArrowRight)}
+          {!hideArrows && renderSwitch('Render Arrow', renderArrow, toggleRenderArrow)}
+        </View>
         {renderSwitch('Day Component', dayComponent, toggleDayComponent)}
         {renderSwitch('Custom Header', customHeader, toggleCustomHeader)}
         {renderSwitch('Custom Header Title', customHeaderTitle, toggleCustomHeaderTitle)}
-        {renderSwitch('Render Arrow', renderArrow, toggleRenderArrow)}
-        {renderSwitch('Disable Arrow Left', disableArrowLeft, toggleDisableArrowLeft)}
-        {renderSwitch('Disable Arrow Right', disableArrowRight, toggleDisableArrowRight)}
       </View>
     );
   };
 
   /** Buttons */
   const getValue = (index = 0) => {
-    return Object.values(Markings)[index];
+    return Object.values(Marking.markings)[index];
   };
 
   const setType = (index = 0) => {
@@ -528,12 +527,12 @@ const NewCalendarScreen = () => {
   };
 
   return (
-    <Fragment>
+    <>
       {renderCalendar()}
       <ScrollView showsVerticalScrollIndicator={false} testID={testIDs.calendars.CONTAINER}>
         {renderOptions()}
       </ScrollView>
-    </Fragment>
+    </>
   );
 };
 
@@ -578,6 +577,9 @@ const styles = StyleSheet.create({
   switchText: {
     marginHorizontal: 10
   },
+  subSwitchContainer: {
+    marginLeft: 20
+  },
   buttonsContainer: {
     margin: 10
   },

src/calendar/index.tsx

@@ -13,17 +13,12 @@ import {getState} from '../day-state-manager';
 import {extractHeaderProps, extractDayProps} from '../componentUpdater';
 // @ts-expect-error
 import {WEEK_NUMBER} from '../testIDs';
-import {DateData, Theme} from '../types';
+import {DateData, Theme, MarkedDates} from '../types';
 import {useDidUpdate} from '../hooks';
 import styleConstructor from './style';
 import CalendarHeader, {CalendarHeaderProps} from './header';
 import Day, {DayProps} from './day/index';
 import BasicDay from './day/basic';
-import {MarkingProps} from './day/marking';
-
-type MarkedDatesType = {
-  [key: string]: MarkingProps;
-};
 
 export interface CalendarProps extends CalendarHeaderProps, DayProps {
   /** Specify theme properties to override specific styles for calendar parts */
@@ -45,7 +40,7 @@ export interface CalendarProps extends CalendarHeaderProps, DayProps {
   /** Maximum date that can be selected, dates after maxDate will be grayed out */
   maxDate?: string;
   /** Collection of dates that have to be marked */
-  markedDates?: MarkedDatesType;
+  markedDates?: MarkedDates;
   /** Do not show days of other months in month page */
   hideExtraDays?: boolean;
   /** Always show six weeks on each month (only when hideExtraDays = false) */

src/dateutils.ts

@@ -1,6 +1,5 @@
 const XDate = require('xdate');
 const {toMarkingFormat} = require('./interface');
-const {getDefaultLocale} = require('./services');
 
 const latinNumbersPattern = /[0-9]/g;
 
@@ -64,7 +63,7 @@ export function isLTE(a: XDate, b: XDate) {
 }
 
 export function formatNumbers(date: any) {
-  const numbers = getDefaultLocale().numbers;
+  const numbers = getLocale().numbers;
   return numbers ? date.toString().replace(latinNumbersPattern, (char: any) => numbers[+char]) : date;
 }
 
@@ -91,7 +90,7 @@ export function month(date: XDate) { // exported for tests only
 }
 
 export function weekDayNames(firstDayOfWeek = 0) {
-  let weekDaysNames = getDefaultLocale().dayNamesShort;
+  let weekDaysNames = getLocale().dayNamesShort;
   const dayShift = firstDayOfWeek % 7;
   if (dayShift) {
     weekDaysNames = weekDaysNames.slice(dayShift).concat(weekDaysNames.slice(0, dayShift));
@@ -191,3 +190,7 @@ export function generateDay(originDate: string | XDate, daysOffset = 0) {
   const baseDate = originDate instanceof XDate ? originDate : new XDate(originDate);
   return toMarkingFormat(baseDate.clone().addDays(daysOffset));
 }
+
+export function getLocale() {
+  return XDate.locales[XDate.defaultLocale];
+}

src/services/index.ts

@@ -1,5 +1,10 @@
-import {isUndefined, isDate, isString, isNumber} from 'lodash';
+import isUndefined from 'lodash/isUndefined';
+import isDate from 'lodash/isDate';
+import isString from 'lodash/isString';
+import isNumber from 'lodash/isNumber';
 import XDate from 'xdate';
+
+const {getLocale} = require('../dateutils');
 const {padNumber, toMarkingFormat} = require('../interface');
 
 export function getCalendarDateString(date?: Date | string | number) {
@@ -17,7 +22,7 @@ export function getCalendarDateString(date?: Date | string | number) {
 }
 
 export function getDefaultLocale(): any {
-  return XDate.locales[XDate.defaultLocale];
+  return getLocale();
 }
 
 export default {

src/timeline/__tests__/Packer.spec.js

@@ -1,4 +1,4 @@
-import _ from 'lodash';
+import sortBy from 'lodash/sortBy';
 import * as uut from '../Packer';
 
 describe('Timeline Packer utils', () => {
@@ -97,7 +97,7 @@ describe('Timeline Packer utils', () => {
         dayStart: 0,
         overlapEventsSpacing: 4
       });
-      packedEvents = _.sortBy(packedEvents, 'index');
+      packedEvents = sortBy(packedEvents, 'index');
       expect(packedEvents[0].width).toBe(96);
       expect(packedEvents[1].width).toBe(96);
       expect(packedEvents[2].width).toBe(100);

src/types.ts

@@ -1,6 +1,10 @@
 import {ViewStyle, TextStyle} from 'react-native';
+import {MarkingProps} from './calendar/day/marking';
 
 export type MarkingTypes = 'dot' | 'multi-dot' | 'period' | 'multi-period' | 'custom';
+export type MarkedDates = {
+  [key: string]: MarkingProps;
+};
 export type DayState = 'selected' | 'disabled' | 'inactive' | 'today' | '';
 export type Direction = 'left' | 'right';
 export type DateData = {