AgendaListsCommon.tsx

import isEqual from 'lodash/isEqual';
import React from 'react';
import {DefaultSectionT, SectionListProps, Text, TextProps, ViewStyle} from 'react-native';
import {Theme} from '../types';

export interface AgendaListProps extends SectionListProps<any, DefaultSectionT> {
  /** Specify theme properties to override specific styles for calendar parts */
  theme?: Theme;
  /** day format in section title. Formatting values: http://arshaw.com/xdate/#Formatting */
  dayFormat?: string;
  /** a function to custom format the section header's title */
  dayFormatter?: (arg0: string) => string;
  /** whether to use moment.js for date string formatting
   * (remember to pass 'dayFormat' with appropriate format, like 'dddd, MMM D') */
  useMoment?: boolean;
  /** whether to mark today's title with the "Today, ..." string. Default = true */
  markToday?: boolean;
  /** style passed to the section view */
  sectionStyle?: ViewStyle;
  /** whether to block the date change in calendar (and calendar context provider) when agenda scrolls */
  avoidDateUpdates?: boolean;
  /** offset scroll to section */
  viewOffset?: number;
  /** enable scrolling the agenda list to the next date with content when pressing a day without content */
  scrollToNextEvent?: boolean;
  /**
   * @experimental
   * If defined, uses InfiniteList instead of SectionList. This feature is experimental and subject to change.
   */
  infiniteListProps?: {
    itemHeight?: number;
    titleHeight?: number;
    visibleIndicesChangedDebounce?: number;
    renderFooter?: () => React.ReactElement | null;
  };
}

interface AgendaSectionHeaderProps {
  title?: string;
  onLayout?: TextProps['onLayout'];
  style: TextProps['style'];
}

function areTextPropsEqual(prev: AgendaSectionHeaderProps, next: AgendaSectionHeaderProps): boolean {
  return isEqual(prev.style, next.style) && prev.title === next.title;
}

export const AgendaSectionHeader = React.memo((props: AgendaSectionHeaderProps) => {
  return (
    <Text allowFontScaling={false} style={props.style} onLayout={props.onLayout}>
      {props.title}
    </Text>
  );
}, areTextPropsEqual);