added a new prop for simple calendar selection #7055

src/js/components/Calendar/Calendar.js

@@ -268,6 +268,7 @@ const Calendar = forwardRef(
  showAdjacentDays = true,
  size = 'medium',
  timestamp: timestampProp,
+ simpleSelection = false,
  ...rest
  },
  ref,
@@ -497,6 +498,7 @@ const Calendar = forwardRef(
 
  const handleRange = useCallback(
  (selectedDate) => {
+ console.log(simpleSelection);
  let result;
  const priorRange = normalizeRange(value, activeDate);
  // deselect when date clicked was the start/end of the range
@@ -507,9 +509,12 @@ const Calendar = forwardRef(
  result = [[priorRange[0][0], undefined]];
  setActiveDate('end');
  }
+
  // selecting start date
  else if (activeDate === 'start') {
- if (!priorRange) {
+ if (simpleSelection) {
+ result = [[selectedDate, undefined]];
+ } else if (!priorRange) {
  result = [[selectedDate, undefined]];
  } else if (!priorRange[0][1]) {
  result = [[selectedDate, priorRange[0][1]]];
@@ -519,16 +524,25 @@ const Calendar = forwardRef(
  result = [[selectedDate, undefined]];
  }
  setActiveDate('end');
- }
- // selecting end date
- else if (!priorRange) {
- result = [[undefined, selectedDate]];
- setActiveDate('start');
- } else if (selectedDate.getTime() < priorRange[0][0].getTime()) {
- result = [[selectedDate, undefined]];
- setActiveDate('end');
- } else if (selectedDate.getTime() > priorRange[0][0].getTime()) {
- result = [[priorRange[0][0], selectedDate]];
+ } else {
+ // selecting end date
+ // swap if start date is after end date
+ if (
+ simpleSelection &&
+ selectedDate.getTime() < priorRange?.[0]?.[0]?.getTime()
+ ) {
+ result = [[selectedDate, priorRange[0][0]]];
+ } else if (simpleSelection) {
+ result = [[priorRange[0][0], selectedDate]];
+ } else if (!priorRange) {
+ result = [[undefined, selectedDate]];
+ setActiveDate('start');
+ } else if (selectedDate.getTime() < priorRange[0][0].getTime()) {
+ result = [[selectedDate, undefined]];
+ setActiveDate('end');
+ } else if (selectedDate.getTime() > priorRange[0][0].getTime()) {
+ result = [[priorRange[0][0], selectedDate]];
+ }
  setActiveDate('start');
  }
 

src/js/components/Calendar/index.d.ts

@@ -50,6 +50,7 @@ export interface CalendarProps {
  reference?: string;
  showAdjacentDays?: boolean | 'trim';
  size?: 'small' | 'medium' | 'large' | string;
+ simpleSelection?: boolean;
 }
 
 export interface CalendarExtendedProps

src/js/components/Calendar/stories/RangeSimple.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { Box, Calendar } from 'grommet';
+
+export const RangeSimple = () => (
+ // Uncomment <Grommet> lines when using outside of storybook
+ // <Grommet theme={...}>
+ <Box align="center" pad="large">
+ <Calendar date={[['2020-04-03', '2020-04-08']]} range simpleSelection />
+ </Box>
+ // </Grommet>
+);
+
+export default {
+ title: 'Visualizations/Calendar/RangeSimple',
+};