Week calendar refactor

README.md

@@ -558,8 +558,8 @@ An advanced `Agenda` component that can display interactive listings for calenda
     return <View />;
   }}
   // Override inner list with a custom implemented component
-  renderList={(listProps) => {
-    return <MyCustomList {...listProps} />
+  renderList={listProps => {
+    return <MyCustomList {...listProps} />;
   }}
   // Specify what should be rendered instead of ActivityIndicator
   renderEmptyData={() => {

example/src/screens/calendarListScreen.tsx

@@ -35,7 +35,7 @@ const CalendarListScreen = (props: Props) => {
       }
     };
   }, [selected]);
-  
+
   const onDayPress = useCallback((day: DateData) => {
     setSelected(day.dateString);
   }, []);

example/src/screens/calendarScreen.tsx

@@ -397,7 +397,7 @@ const CalendarScreen = () => {
       },
       [getNewSelectedDate]
     );
-  
+
     const onPressArrowRight = useCallback(
       (add, month) => {
         const newDate = getNewSelectedDate(month, true);
@@ -445,7 +445,7 @@ const CalendarScreen = () => {
   const renderCalendarWithCustomHeader = () => {
     const CustomHeader = React.forwardRef((props, ref) => {
       customHeaderProps.current = props;
-      
+
       return (
         // @ts-expect-error
         <View ref={ref} {...props} style={styles.customHeader}>
@@ -565,8 +565,8 @@ const styles = StyleSheet.create({
     padding: 8
   },
   customTitleContainer: {
-    flexDirection: 'row', 
-    alignItems: 'center', 
+    flexDirection: 'row',
+    alignItems: 'center',
     padding: 10
   },
   customTitle: {

src/agenda/index.tsx

@@ -140,7 +140,7 @@ export default class Agenda extends Component<AgendaProps, State> {
 
   componentDidUpdate(prevProps: AgendaProps, prevState: State) {
     const newSelectedDate = this.getSelectedDate(this.props.selected);
-    
+
     if (!sameDate(newSelectedDate, prevState.selectedDay)) {
       const prevSelectedDate = this.getSelectedDate(prevProps.selected);
       if (!sameDate(newSelectedDate, prevSelectedDate)) {
@@ -188,7 +188,7 @@ export default class Agenda extends Component<AgendaProps, State> {
 
   enableCalendarScrolling(enable = true) {
     this.setState({calendarScrollable: enable});
-    
+
     this.props.onCalendarToggled?.(enable);
 
     // Enlarge calendarOffset here as a workaround on iOS to force repaint.
@@ -325,7 +325,7 @@ export default class Agenda extends Component<AgendaProps, State> {
   onDayChange = (day: XDate) => {
     const withAnimation = sameMonth(day, this.state.selectedDay);
     this.calendar?.current?.scrollToDay(day, this.calendarOffset(), withAnimation);
-    
+
     this.setState({selectedDay: day});
 
     this.props.onDayChange?.(xdateToData(day));
@@ -391,9 +391,9 @@ export default class Agenda extends Component<AgendaProps, State> {
 
   renderWeekDaysNames = () => {
     return (
-      <WeekDaysNames 
-        firstDay={this.props.firstDay} 
-        style={this.style.dayHeader} 
+      <WeekDaysNames
+        firstDay={this.props.firstDay}
+        style={this.style.dayHeader}
       />
     );
   };

src/calendar-list/index.tsx

@@ -102,7 +102,7 @@ const CalendarList = (props: CalendarListProps, ref: any) => {
     onEndReachedThreshold,
     onEndReached
   } = props;
-  
+
   const calendarProps = extractCalendarProps(props);
   const headerProps = extractHeaderProps(props);
   const calendarSize = horizontal ? calendarWidth : calendarHeight;
@@ -133,8 +133,8 @@ const CalendarList = (props: CalendarListProps, ref: any) => {
   }, [propsStyle]);
 
   const initialDateIndex = useMemo(() => {
-    return findIndex(items, function(item) { 
-      return item.toString() === initialDate.current?.toString(); 
+    return findIndex(items, function(item) {
+      return item.toString() === initialDate.current?.toString();
     });
   }, [items]);
 
@@ -177,7 +177,7 @@ const CalendarList = (props: CalendarListProps, ref: any) => {
     const scrollTo = parseDate(date);
     const diffMonths = Math.round(initialDate?.current?.clone().setDate(1).diffMonths(scrollTo?.clone().setDate(1)));
     const scrollAmount = calendarSize * pastScrollRange + diffMonths * calendarSize;
-    
+
     if (scrollAmount !== 0) {
       // @ts-expect-error
       list?.current?.scrollToOffset({offset: scrollAmount, animated: animateScroll});
@@ -193,8 +193,8 @@ const CalendarList = (props: CalendarListProps, ref: any) => {
     setCurrentMonth(day);
   }, [currentMonth, scrollToMonth]);
 
-  const getMarkedDatesForItem = useCallback((item?: XDate) => {    
-    if (markedDates && item) {      
+  const getMarkedDatesForItem = useCallback((item?: XDate) => {
+    if (markedDates && item) {
       for (const [key, _] of Object.entries(markedDates)) {
         if (sameMonth(new XDate(key), new XDate(item))) {
           return markedDates;
@@ -270,7 +270,7 @@ const CalendarList = (props: CalendarListProps, ref: any) => {
   }, []);
 
   const viewabilityConfigCallbackPairs = useRef([
-    { 
+    {
       viewabilityConfig: viewabilityConfig.current,
       onViewableItemsChanged
     },
@@ -288,7 +288,7 @@ const CalendarList = (props: CalendarListProps, ref: any) => {
         renderItem={renderItem}
         getItemLayout={getItemLayout}
         initialNumToRender={range.current}
-        initialScrollIndex={initialDateIndex} 
+        initialScrollIndex={initialDateIndex}
         viewabilityConfigCallbackPairs={viewabilityConfigCallbackPairs.current}
         testID={testID}
         onLayout={onLayout}

src/calendar/day/index.tsx

@@ -18,7 +18,7 @@ function areEqual(prevProps: DayProps, nextProps: DayProps) {
   const nextPropsWithoutMarkDates = omit(nextProps, 'marking');
   const didPropsChange = some(prevPropsWithoutMarkDates, function(value, key) {
     //@ts-expect-error
-    return value !== nextPropsWithoutMarkDates[key]; 
+    return value !== nextPropsWithoutMarkDates[key];
   });
   const isMarkingEqual = isEqual(prevProps.marking, nextProps.marking);
   return !didPropsChange && isMarkingEqual;
@@ -69,7 +69,7 @@ const Day = React.memo((props: DayProps) => {
 
     return `${_isToday ? today : ''} ${_date?.toString(formatAccessibilityLabel)} ${markingAccessibilityLabel}`;
   }, [_date, marking, _isToday]);
-  
+
   const Component = dayComponent || (markingType === 'period' ? PeriodDay : BasicDay);
   const dayComponentProps = dayComponent ? {date: xdateToData(date || new XDate())} : undefined;
 

src/calendar/index.tsx

@@ -102,7 +102,7 @@ const Calendar = (props: CalendarProps) => {
   const style = useRef(styleConstructor(theme));
   const header = useRef();
   const weekNumberMarking = useRef({disabled: true, disableTouchEvent: true});
- 
+
   useEffect(() => {
     if (initialDate) {
       setCurrentMonth(parseDate(initialDate));
@@ -258,7 +258,7 @@ const Calendar = (props: CalendarProps) => {
     const ref = customHeader ? undefined : header;
     const CustomHeader = customHeader;
     const HeaderComponent = customHeader ? CustomHeader : CalendarHeader;
-    
+
     return (
       <HeaderComponent
         {...headerProps}

src/day-state-manager.ts

@@ -1,10 +1,11 @@
+import {DayState} from './types';
 const {isToday, isDateNotInRange, sameMonth} = require('./dateutils');
 const {toMarkingFormat} = require('./interface');
 
 
-export function getState(day: XDate, current: XDate, props: any) {
+export function getState(day: XDate, current: XDate, props: any): DayState {
   const {minDate, maxDate, disabledByDefault, context} = props;
-  let state = '';
+  let state: DayState = '';
 
   if (context?.date === toMarkingFormat(day)) {
     state = 'selected';