Merge pull request Skyscanner#2296 from Skyscanner/KOA-4846

[KOA-4846] Fixed white spaces selection in calendar component
giriawu · Dec 2, 2021 · 527bd72 · 527bd72
2 parents 44b2b2b + 0669639
commit 527bd72
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 30 deletions.
diff --git a/.spelling b/.spelling
@@ -379,11 +379,6 @@ RATING_TYPES.default
 RATING_TYPES.pill
 renderFlag
 renderTarget
-rowType
-ROW_TYPES.start
-ROW_TYPES.middle
-ROW_TYPES.end
-ROW_TYPES.both
 selectionConfiguration
 selectedDates
 selectedId

diff --git a/UNRELEASED.md b/UNRELEASED.md
@@ -0,0 +1,5 @@
+**Fixed:**
+
+- bpk-component-calendar:
+- bpk-component-scrollable-calendar:
+  - Fixed white spaces selection in calendar component. 
diff --git a/packages/bpk-component-calendar/README.md b/packages/bpk-component-calendar/README.md
@@ -258,7 +258,6 @@ The BpkCalendarDate component is used to render the content of a cell
 | onClick               | func                 | false    | null             |
 | onDateKeyDown         | func                 | false    | null             |
 | preventKeyboardFocus  | bool                 | false    | true             |
-| rowType         | oneOf(ROW_TYPES.start, ROW_TYPES.middle, ROW_TYPES.end, ROW_TYPES.both)      | false    | null             |
 | selectionType         | oneOf(SELECTION_TYPES.single, SELECTION_TYPES.start, SELECTION_TYPES.middle, SELECTION_TYPES.end)      | false    | SELECTION_TYPES.single             |
 | style                 | object               | false    | null             |
 

diff --git a/packages/bpk-component-calendar/src/BpkCalendarDate.js b/packages/bpk-component-calendar/src/BpkCalendarDate.js
@@ -197,7 +197,6 @@ export const propTypes = {
   onClick: PropTypes.func,
   onDateKeyDown: PropTypes.func,
   preventKeyboardFocus: PropTypes.bool,
-  rowType: PropTypes.oneOf(Object.keys(ROW_TYPES)),
   selectionType: PropTypes.oneOf(Object.keys(SELECTION_TYPES)),
   style: PropTypes.object,
 };
@@ -217,7 +216,6 @@ export const defaultProps = {
   onClick: null,
   onDateKeyDown: null,
   preventKeyboardFocus: true,
-  rowType: null,
   selectionType: SELECTION_TYPES.none,
   style: null,
 };

diff --git a/packages/bpk-component-calendar/src/Week.js b/packages/bpk-component-calendar/src/Week.js
@@ -26,6 +26,8 @@ import {
   isSameMonth,
   isToday,
   isWithinRange,
+  isAfter,
+  isBefore,
 } from './date-utils';
 import CustomPropTypes, { CALENDAR_SELECTION_TYPE } from './custom-proptypes';
 // TODO: Move this to `Week.scss`
@@ -83,9 +85,24 @@ function getSelectedDate(date, selectionConfiguration) {
  * @param {Date} date the current date of the calendar
  * @param {Object} selectionConfiguration the current selection configuration
  * @param {Function} formatDateFull function to format dates
+ * @param {Date} month the current month of the calendar
+ * @param {Number} weekStartsOn index of the first day of the week
+ * @param {Boolean} ignoreOutsideDate ignore date outside current month
  * @returns {String} selection type to be passed to the date
  */
-function getSelectionType(date, selectionConfiguration, formatDateFull) {
+function getSelectionType(
+  date,
+  selectionConfiguration,
+  formatDateFull,
+  month,
+  weekStartsOn,
+  ignoreOutsideDate,
+) {
+  const { startDate, endDate } = selectionConfiguration;
+  const sameStartDay = isSameDay(date, startDate);
+  const sameEndDay = isSameDay(date, endDate);
+  const rangeDates = startDate && endDate;
+
   if (
     selectionConfiguration.type === CALENDAR_SELECTION_TYPE.single &&
     selectionConfiguration.date === formatDateFull(date)
@@ -94,38 +111,44 @@ function getSelectionType(date, selectionConfiguration, formatDateFull) {
   }
   if (selectionConfiguration.type === CALENDAR_SELECTION_TYPE.range) {
     if (
-      (selectionConfiguration.startDate &&
-        !selectionConfiguration.endDate &&
-        isSameDay(date, selectionConfiguration.startDate)) ||
-      (selectionConfiguration.startDate &&
-        selectionConfiguration.endDate &&
-        isSameDay(date, selectionConfiguration.startDate) &&
-        isSameDay(date, selectionConfiguration.endDate))
+      (startDate && !endDate && sameStartDay) ||
+      (rangeDates && sameStartDay && sameEndDay)
     ) {
       return SELECTION_TYPES.single;
     }
     if (
-      selectionConfiguration.startDate &&
-      selectionConfiguration.endDate &&
-      isWithinRange(date, {
-        start: selectionConfiguration.startDate,
-        end: selectionConfiguration.endDate,
-      }) &&
-      !isSameDay(date, selectionConfiguration.startDate) &&
-      !isSameDay(date, selectionConfiguration.endDate)
+      ignoreOutsideDate &&
+      rangeDates &&
+      isSameMonth(startDate, endDate) &&
+      isWithinRange(date, { start: startDate, end: endDate }) &&
+      !isSameMonth(month, date)
     ) {
-      return SELECTION_TYPES.middle;
+      return SELECTION_TYPES.none;
     }
     if (
-      selectionConfiguration.startDate &&
-      formatDateFull(selectionConfiguration.startDate) === formatDateFull(date)
+      ignoreOutsideDate &&
+      rangeDates &&
+      !isSameMonth(startDate, endDate) &&
+      !isSameMonth(month, date) &&
+      ((isSameWeek(date, endDate, { weekStartsOn }) &&
+        isAfter(date, startDate)) ||
+        (isSameWeek(date, startDate, { weekStartsOn }) &&
+          isBefore(date, endDate)))
     ) {
-      return SELECTION_TYPES.start;
+      return SELECTION_TYPES.middle;
     }
     if (
-      selectionConfiguration.endDate &&
-      formatDateFull(selectionConfiguration.endDate) === formatDateFull(date)
+      rangeDates &&
+      isWithinRange(date, { start: startDate, end: endDate }) &&
+      !sameStartDay &&
+      !sameEndDay
     ) {
+      return SELECTION_TYPES.middle;
+    }
+    if (startDate && formatDateFull(startDate) === formatDateFull(date)) {
+      return SELECTION_TYPES.start;
+    }
+    if (endDate && formatDateFull(endDate) === formatDateFull(date)) {
       return SELECTION_TYPES.end;
     }
   }
@@ -277,6 +300,7 @@ class Week extends Component {
       selectionConfiguration,
       ignoreOutsideDate,
       dateProps,
+      weekStartsOn,
     } = this.props;
 
     if (ignoreOutsideDate) {
@@ -303,6 +327,9 @@ class Week extends Component {
             date,
             selectionConfiguration,
             formatDateFull,
+            month,
+            weekStartsOn,
+            ignoreOutsideDate,
           );
 
           return (

diff --git a/packages/bpk-component-scrollable-calendar/examples.js b/packages/bpk-component-scrollable-calendar/examples.js
@@ -156,6 +156,24 @@ const RangeExample = () => (
   />
 );
 
+const SplitWeekRangeExample = () => (
+  <ScrollableCal
+    DateComponent={BpkScrollableCalendarDate}
+    formatMonth={formatMonth}
+    formatDateFull={formatDateFull}
+    daysOfWeek={weekDays}
+    weekStartsOn={0}
+    selectTodaysDate={false}
+    minDate={new Date(2020, 3, 1)}
+    maxDate={new Date(2020, 6, 1)}
+    selectionConfiguration={{
+      type: 'range',
+      startDate: new Date(2020, 3, 29),
+      endDate: new Date(2020, 4, 4),
+    }}
+  />
+);
+
 const WeekStartsOnSix = () => (
   <ScrollableCal
     weekStartsOn={6}
@@ -347,6 +365,7 @@ const PastCalendar = () => (
 export {
   DefaultExample,
   RangeExample,
+  SplitWeekRangeExample,
   WeekStartsOnSix,
   WithFocusedDate,
   TallContainer,

diff --git a/packages/bpk-component-scrollable-calendar/stories.js b/packages/bpk-component-scrollable-calendar/stories.js
@@ -35,11 +35,16 @@ import {
   ScrollableCalendarGridList,
   PastCalendar,
   RangeExample,
+  SplitWeekRangeExample,
 } from './examples';
 
 storiesOf('bpk-component-scrollable-calendar', module)
   .add('Scrollable Calendar - default', DefaultExample)
   .add('Scrollable Calendar - range', RangeExample)
+  .add(
+    'Scrollable Calendar - Week split across 2 months range',
+    SplitWeekRangeExample,
+  )
   .add('Scrollable Calendar - week starts on 6', WeekStartsOnSix)
   .add('Scrollable Calendar - with focused date', WithFocusedDate)
   .add('Scrollable Calendar in a tall container', TallContainer)