The highlight color is overflow on range picker

ddikodroid commented 2 months ago

Current behaviour

So when I choose a range of date on the web browser, ~~the highlight color on start date is overflow compared to the selected date color.~~ the highlight range is shifted.

Expected behaviour

It should behave the same as on mobile.

How to reproduce?

import { breakpoints } from '@/constants/breakpoints';
import { colors } from '@/constants/colors';
import { isAndroid, isWeb } from '@/constants/platforms';
import { spacing } from '@/constants/spacing';
import { globalStyles } from '@/constants/styles';
import dayjs from 'dayjs';
import React, {
  forwardRef,
  useCallback,
  useImperativeHandle,
  useState,
} from 'react';
import {
  Image,
  Pressable,
  StyleSheet,
  Text,
  TextInput,
  View,
} from 'react-native';
import { DatePickerModal } from 'react-native-paper-dates';

const DateRangePicker = forwardRef(
  (
    {
      label,
      onDismiss,
      onConfirm,
      ...rest
    }: {
      label: string;
      onDismiss: () => void;
      onConfirm: ({ startDate, endDate }: any) => void;
    },
    ref
  ) => {
    const [open, setOpen] = useState(false);

    const [range, setRange] = useState({
      startDate: undefined,
      endDate: undefined,
    });

    const _onDismiss = useCallback(() => {
      setOpen(false);
    }, []);

    const _onConfirm = useCallback(
      ({ startDate, endDate }: any) => {
        setRange({ startDate, endDate });
      },
      [setOpen, setRange]
    );
    useImperativeHandle(ref, () => ({
      open: () => {
        setOpen(true);
      },
      close: () => {
        setOpen(false);
      },
    }));

    const startDate = useCallback(() => {
      dayjs('01-01-2020').toDate();
    }, []);

    return (
      <View>
        <Text style={globalStyles.textInputLabel}>{label}</Text>
        <Pressable onPress={() => setOpen(true)}>
          <View style={styles.container}>
            <TextInput
              editable={false}
              //outlineStyle is working on web, but not detected on mobile
              // @ts-ignore:next-line
              style={[styles.textInput, isWeb ? { outlineStyle: 'none' } : {}]}
              value={'10-April'}
            />
            <Image
              source={require('@/assets/icons/calendar-days.png')}
              style={{ width: 24, height: 24 }}
              resizeMode='contain'
            />
          </View>
        </Pressable>
        <DatePickerModal
          locale='id'
          mode='range'
          visible={open}
          onDismiss={() => {
            onDismiss();
            _onDismiss();
          }}
          onConfirm={({ startDate, endDate }) => {
            onConfirm({ startDate, endDate });
            _onConfirm({ startDate, endDate });
          }}
          startDate={range.startDate}
          endDate={range.endDate}
          presentationStyle='pageSheet'
          inputEnabled={false}
          validRange={{ startDate }}
        />
      </View>
    );
  }
);

export default DateRangePicker;

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: spacing.s,
    borderRadius: spacing.s,
    paddingHorizontal: spacing.s,
    backgroundColor: colors.white,
    borderColor: colors.gray.light,
    borderWidth: StyleSheet.hairlineWidth,
  },
  textInput: {
    flex: 1,
    height: 48,
    fontSize: 14,
    width: '100%',
    marginRight: spacing.xs,
    color: colors.gray.dark,
    maxWidth: breakpoints.xl,
  },
});