@cleartrip/ct-design-calendar 4.0.0 → 5.0.0

package/src/CalendarDayElements/CalendarDot.tsx

@@ -0,0 +1,11 @@
+import { memo } from 'react';
+
+import { View } from 'react-native';
+
+import { staticCalendarDotStyle } from '../styles';
+
+export const CalendarDot = () => {
+  return <View style={staticCalendarDotStyle?.root} />;
+};
+
+export default memo(CalendarDot);

package/src/CalendarDayElements/CalendarDotWrapper.tsx

@@ -0,0 +1,17 @@
+import { memo } from 'react';
+
+import { View } from 'react-native';
+
+import { staticCalendarDotStyle } from '../styles';
+import CalendarDot from './CalendarDot';
+
+const CalendarDotWrapper = ({ showDot }: { showDot: boolean }) => {
+  if (!showDot) return null;
+  return (
+    <View style={staticCalendarDotStyle.wrapper}>
+      <CalendarDot />
+    </View>
+  );
+};
+
+export default memo(CalendarDotWrapper);

package/src/CalendarDayElements/CalendarRange.tsx

@@ -0,0 +1,54 @@
+import { memo } from 'react';
+
+import { useForceRerender } from './useForceRerender';
+import { useSubEvent } from '../event';
+import { View } from 'react-native';
+
+import { staticCalendarRangeStyles } from '../styles';
+import { ICalendarRangeProps } from '../type';
+
+const CalendarRange: React.FC<ICalendarRangeProps> = ({ getSelectedDates, date }) => {
+  const { forceRerender } = useForceRerender();
+
+  const getSingleRange = (selectedDates: string[]) => {
+    return selectedDates.filter((x) => x).length === 2 && date > selectedDates[0] && date < selectedDates[1];
+  };
+
+  const getLeftGrayed = (selectedDates: string[]) => {
+    return selectedDates.filter((x) => x).length === 2 && date === selectedDates[0];
+  };
+
+  const getRightGrayed = (selectedDates: string[]) => {
+    return selectedDates.filter((x) => x).length === 2 && date === selectedDates[1];
+  };
+
+  useSubEvent('SELECTED_DATES', ({ oldDates, newDates }: { oldDates: string[]; newDates: string[] }) => {
+    if (
+      getSingleRange(oldDates) !== getSingleRange(newDates) ||
+      getLeftGrayed(oldDates) !== getLeftGrayed(newDates) ||
+      getRightGrayed(oldDates) !== getRightGrayed(newDates)
+    ) {
+      forceRerender();
+    }
+  });
+
+  return (
+    <View style={staticCalendarRangeStyles?.root}>
+      {getSingleRange(getSelectedDates()) ? (
+        <View style={staticCalendarRangeStyles?.fullGrayed} />
+      ) : getLeftGrayed(getSelectedDates()) ? (
+        <>
+          <View style={staticCalendarRangeStyles?.halfNeutral} />
+          <View style={staticCalendarRangeStyles?.halfGrayed} />
+        </>
+      ) : getRightGrayed(getSelectedDates()) ? (
+        <>
+          <View style={staticCalendarRangeStyles?.halfGrayed} />
+          <View style={staticCalendarRangeStyles?.halfNeutral} />
+        </>
+      ) : null}
+    </View>
+  );
+};
+
+export default memo(CalendarRange);

package/src/CalendarDayElements/index.tsx

@@ -0,0 +1,77 @@
+import { memo } from 'react';
+
+import { useForceRerender } from './useForceRerender';
+import { useSubEvent } from '../event';
+import { useNativeMergeStyles, useStyles } from '@cleartrip/ct-design-style-manager';
+import { TouchableOpacity, ViewStyle } from 'react-native';
+
+import CalendarRange from './CalendarRange';
+import { formattedDate, getDateDifference, TODAY_DATE } from '../util';
+import CalendarDate from './CalendarDate';
+import { getSelectedDateStyles, staticCalendarDateWrapperStyles } from '../styles';
+import { ICalendarDateWrapperProps } from '../type';
+
+const CalendarDateWrapper: React.FC<ICalendarDateWrapperProps> = ({
+  year,
+  month,
+  day,
+  idxx,
+  getSelectedDates,
+  handleDateClicked,
+  calendarDotsList,
+}) => {
+  const date = formattedDate(year, month, day);
+  const { forceRerender } = useForceRerender();
+
+  const isDisabled = (oldDates: string[]) => {
+    if (date < TODAY_DATE) {
+      return true;
+    }
+    if (oldDates.filter((x) => x).length === 1) {
+      const selectedDate = oldDates[0];
+      if (date < selectedDate || getDateDifference(date, selectedDate) > 30) {
+        return true;
+      }
+    }
+    return false;
+  };
+
+  useSubEvent('SELECTED_DATES', ({ oldDates, newDates }: { oldDates: string[]; newDates: string[] }) => {
+    if (oldDates.includes(date) !== newDates.includes(date) || isDisabled(oldDates) !== isDisabled(newDates)) {
+      forceRerender();
+    }
+  });
+
+  const dynamicCalendarDateStyles = useStyles(
+    (theme) => {
+      return {
+        root: getSelectedDateStyles(theme, isDisabled(getSelectedDates())),
+      };
+    },
+    [isDisabled(getSelectedDates())],
+  );
+
+  const touchableOpacityStyles = useNativeMergeStyles(
+    [dynamicCalendarDateStyles?.root, staticCalendarDateWrapperStyles?.root],
+    [dynamicCalendarDateStyles?.root],
+  );
+
+  return (
+    <TouchableOpacity
+      key={`day_${idxx}`}
+      style={touchableOpacityStyles as ViewStyle}
+      onPress={() => handleDateClicked(date)}
+      activeOpacity={1}
+    >
+      <CalendarRange getSelectedDates={getSelectedDates} date={date} />
+      <CalendarDate
+        day={day}
+        date={date}
+        isSelected={getSelectedDates().includes(date)}
+        calendarDotsList={calendarDotsList}
+      />
+    </TouchableOpacity>
+  );
+};
+
+export default memo(CalendarDateWrapper);

package/src/CalendarDayElements/useForceRerender.ts

@@ -0,0 +1,14 @@
+import { useCallback, useState } from 'react';
+
+export function useForceRerender() {
+  const [_, set_] = useState(false);
+
+  const forceRerender = useCallback(() => {
+    set_((x) => !x);
+  }, [set_]);
+
+  return {
+    forceState: _,
+    forceRerender,
+  };
+}

package/src/CalendarMonth/CalendarMonthBody.tsx

@@ -0,0 +1,39 @@
+import { View } from 'react-native';
+
+import { getWeekRow } from '../util';
+import CalendarDateWrapper from '../CalendarDayElements';
+import { staticCalendarMonthBodyStyles } from '../styles';
+import { ICalendarMonthBodyProps } from '../type';
+
+const CalendarMonthBody: React.FC<ICalendarMonthBodyProps> = ({
+  month,
+  year,
+  getSelectedDates,
+  handleDateClicked,
+  calendarDotsList,
+}) => {
+  const weekRow = getWeekRow(parseInt(year), parseInt(month));
+
+  return weekRow.map((week, idx) => {
+    return (
+      <View key={`week_${idx}`} style={staticCalendarMonthBodyStyles?.root}>
+        {week.map((day, idxx) => {
+          return (
+            <CalendarDateWrapper
+              key={`day_${idxx}`}
+              year={year}
+              month={month}
+              day={day?.toString() || ''}
+              idxx={idxx}
+              getSelectedDates={getSelectedDates}
+              handleDateClicked={handleDateClicked}
+              calendarDotsList={calendarDotsList}
+            />
+          );
+        })}
+      </View>
+    );
+  });
+};
+
+export default CalendarMonthBody;

package/src/CalendarMonth/CalendarMonthFooter.tsx

@@ -0,0 +1,70 @@
+import { memo, useState } from 'react';
+
+import Animated, { Easing, useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';
+import { ChevronDown } from '@cleartrip/ct-design-icons';
+import { Text, TouchableOpacity, View } from 'react-native';
+
+import { ELEMENTS_HEIGHT } from '../util';
+import { staticCalendarMonthFooterStyles } from '../styles';
+import CalendarDot from '../CalendarDayElements/CalendarDot';
+
+const CalendarMonthFooter = ({ holidays = [] }: { holidays: string[] }) => {
+  const [expanded, setExpanded] = useState(false);
+  const height = useSharedValue(0);
+  const rotation = useSharedValue(0);
+
+  const toggleAccordion = () => {
+    setExpanded((prev) => !prev);
+    height.value = expanded ? 0 : holidays.length * ELEMENTS_HEIGHT.HOLIDAY;
+    rotation.value = withTiming(expanded ? 0 : 180, {
+      duration: 300,
+      easing: Easing.ease,
+    });
+  };
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      height: withSpring(height.value, {
+        damping: 20,
+        stiffness: 90,
+      }),
+      overflow: 'hidden',
+      gap: 4,
+    };
+  });
+
+  // @ts-ignore
+  const arrowStyle = useAnimatedStyle(() => {
+    return {
+      transform: [
+        {
+          rotate: `${rotation.value}deg`,
+        },
+      ],
+    };
+  });
+  if (holidays.length)
+    return (
+      <View style={staticCalendarMonthFooterStyles?.root}>
+        <TouchableOpacity onPress={toggleAccordion} style={staticCalendarMonthFooterStyles?.headingContainer}>
+          <CalendarDot />
+          <Text style={staticCalendarMonthFooterStyles?.heading}>{holidays.length} Holidays</Text>
+          <Animated.View style={arrowStyle}>
+            <ChevronDown width={16} height={16} />
+          </Animated.View>
+        </TouchableOpacity>
+
+        <View style={staticCalendarMonthFooterStyles.listContainer}>
+          <Animated.View style={animatedStyle}>
+            {holidays.map((holiday, index) => (
+              <Text key={index} style={staticCalendarMonthFooterStyles?.listItem}>
+                {holiday}
+              </Text>
+            ))}
+          </Animated.View>
+        </View>
+      </View>
+    );
+};
+
+export default memo(CalendarMonthFooter);

package/src/CalendarMonth/CalendarMonthHeader.tsx

@@ -0,0 +1,15 @@
+import { memo } from 'react';
+
+import { Text, TextStyle } from 'react-native';
+
+import { IMonthListObj } from '../type';
+import { staticCalendarMonthHeaderStyles } from '../styles';
+import { MONTHS } from '../util';
+
+const MonthHeader: React.FC<IMonthListObj> = ({ month, year }) => {
+  return (
+    <Text style={staticCalendarMonthHeaderStyles.root as TextStyle}>{`${MONTHS[parseInt(month) - 1]} ${year}`}</Text>
+  );
+};
+
+export default memo(MonthHeader);

package/src/CalendarMonth/index.tsx

@@ -0,0 +1,43 @@
+import { memo } from 'react';
+
+import { View } from 'react-native';
+
+import CalendarMonthFooter from './CalendarMonthFooter';
+import CalendarMonthHeader from './CalendarMonthHeader';
+import CalendarMonthBody from './CalendarMonthBody';
+
+interface ICalendarDatesProps {
+  year: string;
+  month: string;
+  onLayout: () => void;
+  holidayList: Record<string, Record<string, string[]>>;
+  calendarDotsList: string[];
+  getSelectedDates: () => string[];
+  handleDateClicked: (date: string) => void;
+}
+
+const CalendarDates: React.FC<ICalendarDatesProps> = ({
+  year,
+  month,
+  onLayout,
+  holidayList,
+  calendarDotsList,
+  getSelectedDates,
+  handleDateClicked,
+}) => {
+  return (
+    <View onLayout={onLayout}>
+      <CalendarMonthHeader month={month} year={year} />
+      <CalendarMonthBody
+        month={month}
+        year={year}
+        handleDateClicked={handleDateClicked}
+        getSelectedDates={getSelectedDates}
+        calendarDotsList={calendarDotsList}
+      />
+      <CalendarMonthFooter holidays={holidayList?.[year]?.[parseInt(month) - 1] || []} />
+    </View>
+  );
+};
+
+export default memo(CalendarDates);

package/src/Caption/index.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { CaptionProps, useDayPicker } from 'react-day-picker';
+import { Container } from '@cleartrip/ct-design-container';
+import { Typography } from '@cleartrip/ct-design-typography';
+import { makeStyles } from '@cleartrip/ct-design-style-manager';
+
+const styles = makeStyles((theme) => ({
+  outerContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    marginTop: theme.spacing[10],
+    marginBottom: theme.spacing[4],
+  },
+  innerContainer: {
+    width: '100%',
+    display: 'flex',
+    justifyContent: 'center',
+  },
+  typography: {
+    fontWeight: 600,
+  },
+}));
+
+export const Caption = (props: CaptionProps): React.JSX.Element => {
+  const {
+    locale,
+    formatters: { formatCaption },
+  } = useDayPicker();
+
+  return (
+    <Container styleConfig={{ root: [styles.outerContainer] }}>
+      <Container styleConfig={{ root: [styles.innerContainer] }}>
+        <Typography variant='B1' styleConfig={{ root: [styles.typography] }}>
+          {formatCaption(props.displayMonth, { locale })}
+        </Typography>
+      </Container>
+    </Container>
+  );
+};