Add support for allowPartialRange (wojtekmaj#351)

* Add support for allowPartialRange Closes wojtekmaj#331
felixmosh · Nov 8, 2020 · 83157f6 · 83157f6
1 parent b552067
commit 83157f6
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -97,6 +97,7 @@ Displays a complete, interactive calendar.
 |Prop name|Description|Default value|Example values|
 |----|----|----|----|
 |activeStartDate|The beginning of a period that shall be displayed. If you wish to use React-Calendar in an uncontrolled way, use `defaultActiveStartDate` instead.|(today)|`new Date(2017, 0, 1)`|
+|allowPartialRange|Whether to call onChange with only partial result given `selectRange` prop.|`false`|`true`|
 |calendarType|Type of calendar that should be used. Can be `"ISO 8601"`, `"US"`, `"Arabic"`, or `"Hebrew"`. Setting to `"US"` or `"Hebrew"` will change the first day of the week to Sunday. Setting to `"Arabic"` will change the first day of the week to Saturday. Setting to `"Arabic"` or `"Hebrew"` will make weekends appear on Friday to Saturday.|Type of calendar most commonly used in a given locale|`"ISO 8601"`|
 |className|Class name(s) that will be added along with `"react-calendar"` to the main React-Calendar `<div>` element.|n/a|<ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul>|
 |defaultActiveStartDate|The beginning of a period that shall be displayed by default. If you wish to use React-Calendar in a controlled way, use `activeStartDate` instead.|(today)|`new Date(2017, 0, 1)`|

diff --git a/src/Calendar.jsx b/src/Calendar.jsx
@@ -154,7 +154,7 @@ function getInitialActiveStartDate(props) {
   });
 }
 
-const isSingleValue = value => value && [].concat(value).length === 1;
+const getIsSingleValue = value => value && [].concat(value).length === 1;
 
 export default class Calendar extends Component {
   state = {
@@ -177,7 +177,7 @@ export default class Calendar extends Component {
     const { value: valueState } = this.state;
 
     // In the middle of range selection, use value from state
-    if (selectRange && isSingleValue(valueState)) {
+    if (selectRange && getIsSingleValue(valueState)) {
       return valueState;
     }
 
@@ -251,7 +251,11 @@ export default class Calendar extends Component {
     } = this;
 
     const {
-      onActiveStartDateChange, onChange, onViewChange, selectRange,
+      allowPartialRange,
+      onActiveStartDateChange,
+      onChange,
+      onViewChange,
+      selectRange,
     } = this.props;
 
     const prevArgs = {
@@ -291,8 +295,18 @@ export default class Calendar extends Component {
       }
 
       if (shouldUpdate('value')) {
-        if (!selectRange || !isSingleValue(nextState.value)) {
-          if (onChange) onChange(nextState.value);
+        if (onChange) {
+          if (selectRange) {
+            const isSingleValue = getIsSingleValue(nextState.value);
+
+            if (!isSingleValue) {
+              onChange(nextState.value);
+            } else if (allowPartialRange) {
+              onChange([nextState.value]);
+            }
+          } else {
+            onChange(nextState.value);
+          }
         }
       }
 
@@ -351,7 +365,7 @@ export default class Calendar extends Component {
     if (selectRange) {
       // Range selection turned on
       const { value: previousValue, valueType } = this;
-      if (!isSingleValue(previousValue)) {
+      if (!getIsSingleValue(previousValue)) {
         // Value has 0 or 2 elements - either way we're starting a new array
         // First value
         nextValue = getBegin(valueType, value);
@@ -620,6 +634,7 @@ const isLooseValue = PropTypes.oneOfType([
 
 Calendar.propTypes = {
   activeStartDate: isActiveStartDate,
+  allowPartialRange: PropTypes.bool,
   calendarType: isCalendarType,
   className: isClassName,
   defaultActiveStartDate: isActiveStartDate,

diff --git a/src/Calendar.spec.jsx b/src/Calendar.spec.jsx
@@ -756,7 +756,7 @@ describe('Calendar', () => {
       expect(onChange).toHaveBeenCalledWith(new Date(2017, 0, 1, 12));
     });
 
-    it('does not call onChange function returning a range when selected one piece of a range', () => {
+    it('does not call onChange function returning a range when selected one piece of a range by default', () => {
       const onChange = jest.fn();
       const component = shallow(
         <Calendar
@@ -771,6 +771,41 @@ describe('Calendar', () => {
       expect(onChange).not.toHaveBeenCalled();
     });
 
+    it('does not call onChange function returning a range when selected one piece of a range given allowPartialRange = false', () => {
+      const onChange = jest.fn();
+      const component = shallow(
+        <Calendar
+          allowPartialRange={false}
+          onChange={onChange}
+          selectRange
+          view="month"
+        />,
+      );
+
+      component.instance().onChange(new Date(2018, 0, 1));
+
+      expect(onChange).not.toHaveBeenCalled();
+    });
+
+    it('calls onChange function returning a partial range when selected one piece of a range given allowPartialRange = true', () => {
+      const onChange = jest.fn();
+      const component = shallow(
+        <Calendar
+          allowPartialRange
+          onChange={onChange}
+          selectRange
+          view="month"
+        />,
+      );
+
+      component.instance().onChange(new Date(2018, 0, 1));
+
+      expect(onChange).toHaveBeenCalledTimes(1);
+      expect(onChange).toHaveBeenCalledWith([
+        new Date(2018, 0, 1),
+      ]);
+    });
+
     it('calls onChange function returning a range when selected two pieces of a range', () => {
       const onChange = jest.fn();
       const component = shallow(