Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

The highlight color is overflow on range picker #380

Closed
ddikodroid opened this issue Apr 18, 2024 · 3 comments · Fixed by #387
Closed

The highlight color is overflow on range picker #380

ddikodroid opened this issue Apr 18, 2024 · 3 comments · Fixed by #387
Labels
bug Something isn't working needs response

Comments

@ddikodroid
Copy link
Contributor

ddikodroid commented Apr 18, 2024

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,
  },
});

Preview

Web
Screenshot 2024-04-18 at 19 40 55

iOS
simulator_screenshot_414DD161-09E2-464C-AD82-7C551980D369

Your Environment

software version
ios 15.5
react-native 0.73.6
react-native-paper 5.12.3
expo sdk 50.0.14
@ddikodroid ddikodroid added the bug Something isn't working label Apr 18, 2024
@iM-GeeKy
Copy link
Collaborator

PRs are welcome!

@iM-GeeKy
Copy link
Collaborator

This should be fixed by #387. @ddikodroid Feel free to try it out.

@ddikodroid
Copy link
Contributor Author

This should be fixed by #387. @ddikodroid Feel free to try it out.

thank you so much!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working needs response
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants