@hero-design/rn 8.88.0 → 8.89.0-alpha.1

package/src/components/Calendar/CalendarRange.tsx

@@ -0,0 +1,337 @@
+import {
+  MonthYearPickerDialogueAndroid,
+  MonthYearPickerViewIOS,
+} from '@hero-design/react-native-month-year-picker';
+import format from 'date-fns/fp/format';
+import React, { useMemo, useState } from 'react';
+import { LayoutChangeEvent, Platform, TouchableOpacity } from 'react-native';
+import { useTheme } from '../../theme';
+import { noop } from '../../utils/functions';
+import Box from '../Box';
+import ContentNavigator from '../ContentNavigator';
+import Icon from '../Icon';
+import Typography from '../Typography';
+import CalendarRowItem from './CalendarRowItem';
+import {
+  StyledCalendarDayNameCell,
+  StyledCalendarHeader,
+  StyledCalendarRow,
+  StyledCalendarRowItem,
+  StyledContainer,
+  StyledDisabledCalendarRowItem,
+} from './StyledCalendar';
+import {
+  getValidDate,
+  initArray,
+  isDateInRange,
+  isEqDate,
+  setStartOrEndDate,
+} from './helpers';
+import SelectedDate from './CalendarRangeConnector';
+
+const DAYS_OF_WEEK = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
+// Sunday first column => 0
+// Sunday last column  => 1
+const WEEK_INDEX_OFFSET = 1;
+const SUNDAY_INDEX = 6;
+
+// Always render 7 rows x 6 items for consistent layout
+const TOTAL_DATES_ITEMS = 7 * 6;
+
+type ParsedMaskedDate = {
+  [key: string]: boolean;
+};
+
+export type CalendarDateRange = {
+  startDate?: Date;
+  endDate?: Date;
+};
+
+export interface CalendarProps {
+  value?: CalendarDateRange;
+  visibleDate: Date;
+  minDate?: Date;
+  maxDate?: Date;
+  onChange?: (dateRange: CalendarDateRange) => void;
+  onPreviousPress?: () => void;
+  onNextPress?: () => void;
+  onTitlePress?: () => void;
+  markedDates?: Date[];
+  testID?: string;
+  onMonthChange?: (date: Date) => void;
+  onToggleMonthPicker?: (visible: boolean) => void;
+  monthPickerConfirmLabel?: string;
+  monthPickerCancelLabel?: string;
+}
+
+const CalendarRange = ({
+  value,
+  visibleDate,
+  onChange,
+  onPreviousPress = noop,
+  onNextPress = noop,
+  onTitlePress = noop,
+  minDate,
+  maxDate,
+  markedDates = [],
+  testID,
+  onMonthChange = noop,
+  onToggleMonthPicker = noop,
+  monthPickerConfirmLabel,
+  monthPickerCancelLabel,
+}: CalendarProps) => {
+  const theme = useTheme();
+  const currentMonth = visibleDate.getMonth();
+  const currentYear = visibleDate.getFullYear();
+  const now = new Date();
+  const parsedMaskedDate: ParsedMaskedDate = markedDates.reduce(
+    (current, markedDate) => ({
+      ...current,
+      [markedDate.toDateString()]: true,
+    }),
+    {}
+  );
+  const [monthPickerVisible, setMonthPickerVisible] = useState(false);
+  const [contentHeight, setContentHeight] = useState(0);
+  const [contentWidth, setContentWidth] = useState(0);
+  const calendarItemWidth = useMemo(
+    () =>
+      contentWidth > 0
+        ? Math.floor(
+            (contentWidth - theme.__hd__.calendar.space.cellPadding) / 7
+          )
+        : undefined,
+    [contentWidth, theme]
+  );
+
+  const useMonthPicker = onMonthChange !== noop;
+
+  const firstDateOfMonth = new Date(currentYear, currentMonth, 1);
+  const lastDateOfMonth = new Date(currentYear, currentMonth + 1, 0);
+
+  const lastDateOfPreviousMonth = new Date(currentYear, currentMonth, 0);
+
+  // Index of day in week is shifted by 1 due to Sunday is the last column
+  const firstDayWeekIndexOfMonth =
+    firstDateOfMonth.getDay() === 0
+      ? SUNDAY_INDEX
+      : firstDateOfMonth.getDay() - WEEK_INDEX_OFFSET;
+
+  const lastDayIndexOfCurrentMonth = lastDateOfMonth.getDate();
+  const lastDayIndexOfPreviousMonth = lastDateOfPreviousMonth.getDate();
+
+  const daysOfPreviousMonth = initArray(firstDayWeekIndexOfMonth, (index) => {
+    const reversedIndex = firstDayWeekIndexOfMonth - index - 1;
+    const count = lastDayIndexOfPreviousMonth - reversedIndex;
+    return getValidDate(
+      new Date(currentYear, currentMonth - 1, count),
+      minDate,
+      maxDate
+    );
+  });
+
+  const daysOfCurrentMonth = initArray(lastDayIndexOfCurrentMonth, (index) =>
+    getValidDate(
+      new Date(currentYear, currentMonth, index + 1),
+      minDate,
+      maxDate
+    )
+  );
+
+  const daysOfNextMonth = initArray(
+    TOTAL_DATES_ITEMS -
+      (daysOfPreviousMonth.length + daysOfCurrentMonth.length),
+    (index) =>
+      getValidDate(
+        new Date(currentYear, currentMonth + 1, index + 1),
+        minDate,
+        maxDate
+      )
+  );
+
+  const disablePrevButton =
+    minDate === undefined
+      ? false
+      : !daysOfPreviousMonth.some((date) => date !== undefined) &&
+        minDate >= firstDateOfMonth;
+
+  const disableNextButton =
+    maxDate === undefined
+      ? false
+      : !daysOfNextMonth.some((date) => date !== undefined) ||
+        maxDate <= lastDateOfMonth;
+
+  const onDateChange = (date: Date) => {
+    const newDateRange = setStartOrEndDate({
+      date,
+      startDate: value?.startDate,
+      endDate: value?.endDate,
+    });
+
+    onChange?.(newDateRange);
+  };
+
+  const renderDateCell = ({
+    date,
+    isCurrentMonth,
+  }: {
+    date?: Date;
+    isCurrentMonth: boolean;
+  }) => {
+    if (!date) {
+      return (
+        <StyledDisabledCalendarRowItem
+          themeItemWidth={calendarItemWidth}
+          testID="calendar-disabled-cell"
+        />
+      );
+    }
+
+    if (isEqDate(value?.startDate, date) || isEqDate(value?.endDate, date)) {
+      return (
+        <SelectedDate
+          isStart={isEqDate(date, value?.startDate)}
+          showConnector={!!value?.startDate && !!value?.endDate}
+          key={date.toDateString()}
+          date={date}
+          onPress={() => onDateChange(date)}
+          marked={parsedMaskedDate[date.toDateString()]}
+          itemWidth={calendarItemWidth}
+        />
+      );
+    }
+
+    return (
+      <CalendarRowItem
+        itemWidth={calendarItemWidth}
+        key={date.toDateString()}
+        date={date}
+        isCurrent={isEqDate(now, date)}
+        isSelected={
+          isEqDate(value?.startDate, date) || isEqDate(value?.endDate, date)
+        }
+        isHighlighted={isDateInRange({ date, range: value })}
+        onPress={() => onDateChange(date)}
+        marked={parsedMaskedDate[date.toDateString()]}
+        textIntent={isCurrentMonth ? undefined : 'subdued'}
+      />
+    );
+  };
+
+  const onLayout = (e: LayoutChangeEvent) => {
+    const { width, height } = e.nativeEvent.layout;
+    setContentHeight(height);
+    setContentWidth(width);
+  };
+
+  return (
+    <StyledContainer testID={testID}>
+      <StyledCalendarHeader>
+        <ContentNavigator
+          value={
+            !useMonthPicker ? (
+              format('MMMM yyyy', visibleDate)
+            ) : (
+              <TouchableOpacity
+                testID="calendar-month-picker"
+                onPress={() => {
+                  onToggleMonthPicker?.(!monthPickerVisible);
+                  setMonthPickerVisible(!monthPickerVisible);
+                }}
+              >
+                <Box
+                  flexDirection="row"
+                  justifyContent="center"
+                  alignItems="center"
+                >
+                  <Typography.Title
+                    level="h5"
+                    style={{
+                      textAlign: 'center',
+                      marginRight:
+                        theme.__hd__.calendar.space.headerMarginRight,
+                    }}
+                  >
+                    {format('MMMM yyyy', visibleDate)}
+                  </Typography.Title>
+
+                  <Icon
+                    icon={monthPickerVisible ? 'arrow-up' : 'arrow-down'}
+                    size="small"
+                  />
+                </Box>
+              </TouchableOpacity>
+            )
+          }
+          onPreviousPress={onPreviousPress}
+          onNextPress={onNextPress}
+          onPress={useMonthPicker ? undefined : onTitlePress}
+          previousDisabled={disablePrevButton}
+          nextDisabled={disableNextButton}
+          fontSize="large"
+        />
+      </StyledCalendarHeader>
+      {Platform.OS === 'ios' && monthPickerVisible ? (
+        <Box style={{ overflow: 'hidden' }}>
+          <MonthYearPickerViewIOS
+            value={value?.startDate}
+            minimumDate={minDate}
+            maximumDate={maxDate}
+            onChange={onMonthChange}
+            style={{
+              height:
+                contentHeight +
+                theme.__hd__.calendar.space.iosPickerMarginVertical * 2,
+              marginVertical:
+                -theme.__hd__.calendar.space.iosPickerMarginVertical,
+              width: contentWidth,
+            }}
+          />
+        </Box>
+      ) : (
+        <Box onLayout={onLayout}>
+          <StyledCalendarRow>
+            {DAYS_OF_WEEK.map((day) => (
+              <StyledCalendarRowItem key={day}>
+                <StyledCalendarDayNameCell themeItemWidth={calendarItemWidth}>
+                  <Typography.Body variant="small">{day}</Typography.Body>
+                </StyledCalendarDayNameCell>
+              </StyledCalendarRowItem>
+            ))}
+          </StyledCalendarRow>
+          <StyledCalendarRow>
+            {daysOfPreviousMonth.map((date) =>
+              renderDateCell({ date, isCurrentMonth: false })
+            )}
+            {daysOfCurrentMonth.map((date) =>
+              renderDateCell({ date, isCurrentMonth: true })
+            )}
+            {daysOfNextMonth.map((date) =>
+              renderDateCell({ date, isCurrentMonth: false })
+            )}
+          </StyledCalendarRow>
+
+          {Platform.OS === 'android' && monthPickerVisible && (
+            <MonthYearPickerDialogueAndroid
+              doneButtonLabel={monthPickerConfirmLabel}
+              cancelButtonLabel={monthPickerCancelLabel}
+              value={value?.startDate}
+              minimumDate={minDate}
+              maximumDate={maxDate}
+              onChange={(action, date) => {
+                setMonthPickerVisible(false);
+                onToggleMonthPicker?.(false);
+
+                if (action === 'dateSetAction' && !!date) {
+                  onMonthChange(date);
+                }
+              }}
+            />
+          )}
+        </Box>
+      )}
+    </StyledContainer>
+  );
+};
+
+export default CalendarRange;

package/src/components/Calendar/CalendarRangeConnector.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  StyledCalendarCell,
+  StyledMark,
+  StyledCalendarRowItem,
+} from './StyledCalendar';
+import Typography from '../Typography';
+import Box from '../Box';
+
+interface SelectedDateProps {
+  date: Date;
+  onPress?: () => void;
+  marked?: boolean;
+  isStart?: boolean;
+  showConnector?: boolean;
+  itemWidth?: number;
+}
+
+const SelectedDate = ({
+  date,
+  onPress,
+  marked,
+  isStart,
+  showConnector,
+  itemWidth,
+}: SelectedDateProps) => {
+  return (
+    <StyledCalendarRowItem
+      themeItemWidth={itemWidth}
+      testID="calendar-date-cell"
+    >
+      {showConnector ? (
+        <Box
+          testID="range-connector"
+          style={{
+            width: '50%',
+            height: '100%',
+            ...StyleSheet.absoluteFillObject,
+            transform: isStart
+              ? [
+                  {
+                    translateX: itemWidth ? itemWidth / 2 : 0,
+                  },
+                ]
+              : undefined,
+          }}
+          bgColor="highlightedSurface"
+        />
+      ) : null}
+
+      <StyledCalendarCell
+        testID="selected-date-cell"
+        variant="selected"
+        onPress={onPress}
+      >
+        <Typography.Body variant="small" intent="inverted">
+          {date ? date.getDate() : ''}
+        </Typography.Body>
+        {marked ? (
+          <StyledMark testID="calendar-date-mark" variant="inverted" />
+        ) : null}
+      </StyledCalendarCell>
+    </StyledCalendarRowItem>
+  );
+};
+
+export default SelectedDate;

package/src/components/Calendar/CalendarRowItem.tsx

@@ -6,9 +6,14 @@ import {
   StyledMark,
 } from './StyledCalendar';
 
-const getCellVariant = (isSelected = false, isCurrent = false) => {
+export const getCellVariant = (
+  isSelected = false,
+  isCurrent = false,
+  isHighlighted = false
+) => {
   if (isSelected) return 'selected';
   if (isCurrent) return 'current';
+  if (isHighlighted) return 'highlighted';
 
   return 'default';
 };
@@ -21,6 +26,7 @@ export interface CalendarRowItemProps {
   textIntent?: 'body' | 'subdued';
   marked?: boolean;
   itemWidth?: number;
+  isHighlighted?: boolean;
 }
 
 const CalendarRowItem = ({
@@ -31,10 +37,15 @@ const CalendarRowItem = ({
   textIntent = 'body',
   marked = false,
   itemWidth,
+  isHighlighted,
 }: CalendarRowItemProps) => (
-  <StyledCalendarRowItem testID="calendar-date-cell" themeItemWidth={itemWidth}>
+  <StyledCalendarRowItem
+    testID="calendar-date-cell"
+    themeItemWidth={itemWidth}
+    isHighlighted={isHighlighted}
+  >
     <StyledCalendarCell
-      variant={getCellVariant(isSelected, isCurrent)}
+      variant={getCellVariant(isSelected, isCurrent, isHighlighted)}
       onPress={onPress}
     >
       <Typography.Body

package/src/components/Calendar/StyledCalendar.tsx

@@ -24,36 +24,49 @@ const StyledCalendarDayNameCell = styled(View)<
 }));
 
 const StyledCalendarCell = styled(TouchableOpacity)<{
-  variant?: 'default' | 'current' | 'selected';
+  variant?: 'default' | 'current' | 'selected' | 'highlighted';
   themeItemWidth?: number;
-}>(({ theme, variant = 'default', themeItemWidth }) => ({
+}>(({ theme, variant = 'default' }) => ({
   borderColor: theme.__hd__.calendar.colors.border,
   borderWidth: variant === 'current' ? 1 : 0,
-  borderRadius: theme.__hd__.calendar.radii.default,
+  borderRadius:
+    variant === 'highlighted' ? undefined : theme.__hd__.calendar.radii.default,
   alignItems: 'center',
   justifyContent: 'center',
   backgroundColor:
-    variant === 'selected' ? theme.__hd__.calendar.colors.primary : undefined,
-  width: themeItemWidth || theme.__hd__.calendar.sizes.cellCircleWidth,
-  height: theme.__hd__.calendar.sizes.cellCircleHeight,
+    variant === 'selected'
+      ? theme.__hd__.calendar.colors.rowItem.selected
+      : 'transparent',
+  width: '100%',
+  height: '100%',
+  maxWidth: theme.__hd__.calendar.sizes.cellWidth,
+  maxHeight: theme.__hd__.calendar.sizes.cellHeight,
 }));
 
 const StyledCalendarRow = styled(View)<ViewProps>(({ theme }) => ({
   flexDirection: 'row',
   paddingHorizontal: theme.__hd__.calendar.space.rowVerticalPadding,
   flexWrap: 'wrap',
+  justifyContent: 'center',
+  alignItems: 'center',
 }));
 
 const StyledCalendarRowItem = styled(View)<
   ViewProps & {
     themeItemWidth?: number;
+    isHighlighted?: boolean;
   }
->(({ theme, themeItemWidth }) => ({
+>(({ theme, themeItemWidth, isHighlighted }) => ({
   flexBasis: `${Math.floor(100.0 / 7.0)}%`,
+  lineHeight: 0,
   alignItems: 'center',
   width: themeItemWidth || theme.__hd__.calendar.sizes.cellWidth,
-  height: theme.__hd__.calendar.sizes.cellHeight,
+  height: themeItemWidth || theme.__hd__.calendar.sizes.cellHeight,
+  maxHeight: theme.__hd__.calendar.sizes.cellHeight,
   justifyContent: 'center',
+  backgroundColor: isHighlighted
+    ? theme.__hd__.calendar.colors.rowItem.highlighted
+    : undefined,
 }));
 
 const StyledDisabledCalendarRowItem = styled(View)<
@@ -64,7 +77,8 @@ const StyledDisabledCalendarRowItem = styled(View)<
   flexBasis: `${Math.floor(100.0 / 7.0)}%`,
   alignItems: 'center',
   width: themeItemWidth || theme.__hd__.calendar.sizes.cellWidth,
-  height: theme.__hd__.calendar.sizes.cellHeight,
+  height: themeItemWidth || theme.__hd__.calendar.sizes.cellHeight,
+  maxHeight: theme.__hd__.calendar.sizes.cellHeight,
 }));
 
 const StyledMark = styled(View)<{ variant: 'primary' | 'inverted' }>(