Components for DateRange filter

package.json

@@ -22,6 +22,7 @@
     "@testing-library/react-native": "^13.3.3",
     "@types/jest": "^30.0.0",
     "@types/react": "^19.2.0",
+    "@types/react-native-calendar-picker": "^8.0.0",
     "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-import": "^2.32.0",
@@ -69,6 +70,8 @@
     "@react-native-community/blur": "^4.4.1",
     "accordion-collapse-react-native": "^1.1.1",
     "color": "^5.0.3",
+    "date-fns": "^4.1.0",
+    "react-native-calendar-picker": "^8.0.5",
     "react-native-logs": "^5.5.0",
     "react-native-render-html": "^6.3.4",
     "react-native-scalable-image": "^1.1.0"

src/components/DateFromToFilter.tsx

@@ -0,0 +1,124 @@
+import React from 'react'
+import { StyleProp, StyleSheet, Text, TouchableOpacity, View, ViewStyle } from 'react-native'
+
+import { Icon } from '@observation.org/react-native-components'
+import { rounded } from '@observation.org/react-native-components/styles'
+
+import Log from '../lib/Log'
+import { Theme, useStyles, useTheme } from '../theme'
+
+const height = 48
+
+type Props = {
+  dateFrom: string | undefined
+  dateTo: string | undefined
+  emptyDateFromLabel: string
+  emptyDateToLabel: string
+  onPressFrom: () => void
+  onPressTo: () => void
+  containerStyle?: StyleProp<ViewStyle>
+}
+
+const DateFromToFilter = ({
+  dateFrom,
+  dateTo,
+  emptyDateFromLabel,
+  emptyDateToLabel,
+  onPressFrom,
+  onPressTo,
+}: Props) => {
+  Log.debug('DateFromToFilter:render')
+
+  const theme = useTheme()
+  const styles = useStyles(createStyles)
+
+  const fromIsActive = dateFrom !== undefined
+  const toIsActive = dateTo !== undefined
+
+  return (
+    <View style={styles.dateContainer}>
+      <TouchableOpacity
+        onPress={onPressFrom}
+        style={styles.dateFieldContainer}
+        activeOpacity={0.5}
+        testID={'date-filter-field-from'}
+      >
+        <View style={styles.dateInputField}>
+          <Icon
+            name="calendar-day"
+            style="light"
+            size={theme.icon.size.m}
+            color={fromIsActive ? theme.color.icon.system.brand : theme.color.icon.system.subtle}
+          />
+          <Text
+            style={[
+              styles.dateInputText,
+              { color: fromIsActive ? theme.color.text.system.brand : theme.color.text.system.subtler },
+            ]}
+          >
+            {dateFrom ? dateFrom : emptyDateFromLabel}
+          </Text>
+        </View>
+      </TouchableOpacity>
+
+      <View style={styles.divider}>
+        <Text>&ndash;</Text>
+      </View>
+
+      <TouchableOpacity
+        onPress={onPressTo}
+        style={styles.dateFieldContainer}
+        activeOpacity={0.5}
+        testID={'date-filter-field-to'}
+      >
+        <View style={styles.dateInputField}>
+          <Icon
+            name="calendar-day"
+            style="light"
+            size={theme.icon.size.m}
+            color={toIsActive ? theme.color.icon.system.brand : theme.color.icon.system.subtle}
+          />
+          <Text
+            style={[
+              styles.dateInputText,
+              { color: toIsActive ? theme.color.text.system.brand : theme.color.text.system.subtler },
+            ]}
+          >
+            {dateTo ? dateTo : emptyDateToLabel}
+          </Text>
+        </View>
+      </TouchableOpacity>
+    </View>
+  )
+}
+
+export default DateFromToFilter
+
+const createStyles = (theme: Theme) => {
+  const styles = StyleSheet.create({
+    dateContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    dateFieldContainer: {
+      flex: 0.5,
+    },
+    divider: {
+      marginHorizontal: theme.margin.half,
+      color: theme.color.text.system.subtler,
+    },
+    dateInputField: {
+      ...rounded.large,
+      height: height,
+      backgroundColor: theme.color.background.system.surfaceRaised,
+      paddingLeft: theme.margin.common,
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    dateInputText: {
+      ...theme.text.body,
+      marginLeft: theme.margin.half,
+    },
+  })
+  return styles
+}

src/components/DatePicker.tsx

@@ -0,0 +1,83 @@
+import React from 'react'
+import { Dimensions, StyleSheet, View } from 'react-native'
+
+import CalendarPicker from 'react-native-calendar-picker'
+
+import Log from '../lib/Log'
+import { useStyles, useTheme } from '../theme'
+
+type Props = {
+  selectedDate: Date
+  onDateChange: (date: Date) => void
+  minimumDate?: Date
+  maximumDate?: Date
+  labelNext: string
+  labelPrevious: string
+  labelSelectMonth: string
+  labelSelectYear: string
+  labelsShortWeekdays: string[]
+  labelsMonths: string[]
+}
+
+const DatePicker = ({
+  selectedDate,
+  onDateChange,
+  minimumDate,
+  maximumDate,
+  labelNext,
+  labelPrevious,
+  labelSelectMonth,
+  labelSelectYear,
+  labelsShortWeekdays,
+  labelsMonths,
+}: Props) => {
+  Log.debug('DatePicker:render')
+
+  const theme = useTheme()
+  const styles = useStyles(createStyles)
+
+  return (
+    <View style={styles.container}>
+      <CalendarPicker
+        // @ts-expect-error The component doesn't allow property testID
+        testID="calendar-picker"
+        display={'inline'}
+        onDateChange={onDateChange}
+        minDate={minimumDate}
+        maxDate={maximumDate}
+        restrictMonthNavigation={true}
+        selectedStartDate={selectedDate}
+        initialDate={selectedDate}
+        textStyle={{ fontFamily: 'Ubuntu' }}
+        selectedDayColor={theme.color.background.system.brand}
+        selectedDayTextColor={theme.color.text.system.staticWhite}
+        nextTitle={labelNext}
+        nextTitleStyle={{ color: theme.color.text.system.brand }}
+        previousTitle={labelPrevious}
+        previousTitleStyle={{ color: theme.color.text.system.brand }}
+        selectMonthTitle={labelSelectMonth + ' '}
+        selectYearTitle={labelSelectYear}
+        monthTitleStyle={{ color: theme.color.text.system.brand }}
+        yearTitleStyle={{ color: theme.color.text.system.brand }}
+        weekdays={labelsShortWeekdays}
+        months={labelsMonths}
+      />
+    </View>
+  )
+}
+
+export default DatePicker
+
+// The height of the calendar is not constant, but depends on the number of weeks in a month.
+// To prevent the popup to jump up and down, use a fixed height for the calendar, which is always
+// large enough to hold 6 week rows. 90% of the screen width seems to work in all aspect ratio's.
+export const calendarHeight = Dimensions.get('window').width * 0.9
+
+const createStyles = () => {
+  const styles = StyleSheet.create({
+    container: {
+      height: calendarHeight,
+    },
+  })
+  return styles
+}

src/components/__tests__/DateFromToFilter.test.tsx

@@ -0,0 +1,128 @@
+import React from 'react'
+
+import { describe, expect, jest, test } from '@jest/globals'
+import { fireEvent, render } from '@testing-library/react-native'
+
+import DateFromToFilter from '../DateFromToFilter'
+
+describe('DateFromToFilter', () => {
+  const onPressFrom = jest.fn()
+  const onPressTo = jest.fn()
+
+  const dateFromLabel = 'Start date'
+  const dateToLabel = 'End date'
+
+  describe('Rendering', () => {
+    test('No date selected', () => {
+      const { queryByText, toJSON } = render(
+        <DateFromToFilter
+          dateFrom={undefined}
+          dateTo={undefined}
+          emptyDateFromLabel={dateFromLabel}
+          emptyDateToLabel={dateToLabel}
+          onPressFrom={onPressFrom}
+          onPressTo={onPressTo}
+        />,
+      )
+
+      expect(queryByText('Start date')).toBeTruthy()
+      expect(queryByText('End date')).toBeTruthy()
+      expect(toJSON()).toMatchSnapshot()
+    })
+
+    test('From date selected', () => {
+      const { queryByText, toJSON } = render(
+        <DateFromToFilter
+          dateFrom="2026-01-31"
+          dateTo={undefined}
+          emptyDateFromLabel={dateFromLabel}
+          emptyDateToLabel={dateToLabel}
+          onPressFrom={onPressFrom}
+          onPressTo={onPressTo}
+        />,
+      )
+
+      expect(queryByText('2026-01-31')).toBeTruthy()
+      expect(queryByText('End date')).toBeTruthy()
+      expect(toJSON()).toMatchSnapshot()
+    })
+
+    test('To date selected', () => {
+      const { queryByText, toJSON } = render(
+        <DateFromToFilter
+          dateFrom={undefined}
+          dateTo="2025-02-15"
+          emptyDateFromLabel={dateFromLabel}
+          emptyDateToLabel={dateToLabel}
+          onPressFrom={onPressFrom}
+          onPressTo={onPressTo}
+        />,
+      )
+
+      expect(queryByText('Start date')).toBeTruthy()
+      expect(queryByText('2025-02-15')).toBeTruthy()
+      expect(toJSON()).toMatchSnapshot()
+    })
+
+    test('From and date selected', () => {
+      const { queryByText, toJSON } = render(
+        <DateFromToFilter
+          dateFrom="2026-01-31"
+          dateTo="2025-02-15"
+          emptyDateFromLabel={dateFromLabel}
+          emptyDateToLabel={dateToLabel}
+          onPressFrom={onPressFrom}
+          onPressTo={onPressTo}
+        />,
+      )
+
+      expect(queryByText('2026-01-31')).toBeTruthy()
+      expect(queryByText('2025-02-15')).toBeTruthy()
+      expect(queryByText('Start date')).toBeFalsy()
+      expect(queryByText('End date')).toBeFalsy()
+      expect(toJSON()).toMatchSnapshot()
+    })
+  })
+
+  describe('Interaction', () => {
+    test('Clicking on the from date will call the callback', async () => {
+      // GIVEN
+      const { getByTestId } = render(
+        <DateFromToFilter
+          dateFrom="2026-01-31"
+          dateTo="2025-02-15"
+          emptyDateFromLabel={dateFromLabel}
+          emptyDateToLabel={dateToLabel}
+          onPressFrom={onPressFrom}
+          onPressTo={onPressTo}
+        />,
+      )
+
+      // WHEN
+      await fireEvent.press(getByTestId('date-filter-field-from'))
+
+      // THEN
+      expect(onPressFrom).toHaveBeenCalled()
+    })
+
+    test('Clicking on the to date will call the callback', async () => {
+      // GIVEN
+      const { getByTestId } = render(
+        <DateFromToFilter
+          dateFrom="2026-01-31"
+          dateTo="2025-02-15"
+          emptyDateFromLabel={dateFromLabel}
+          emptyDateToLabel={dateToLabel}
+          onPressFrom={onPressFrom}
+          onPressTo={onPressTo}
+        />,
+      )
+
+      // WHEN
+      await fireEvent.press(getByTestId('date-filter-field-to'))
+
+      // THEN
+      expect(onPressTo).toHaveBeenCalled()
+    })
+  })
+})