[Date Picker] Updates to Year and Month via dropdown should trigger `…

…onChange` (#1817) * co-opt adjustDateOnChange prop from react-datepicker and default to true * #1817 changelog entry * prevent month and year selections from changing selected date to beginning of month * update changelog
elastic · Apr 12, 2019 · f277059 · f277059
1 parent ce003eb
commit f277059
Show file tree

Hide file tree

Showing 7 changed files with 81 additions and 27 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Converted `EuiTitle` to TS ([#1810](https://github.com/elastic/eui/pull/1810))
+- Added `adjustDateOnChange` prop to date pickers, enabling month and year changes to trigger `onChange` ([#1817](https://github.com/elastic/eui/pull/1817))
 
 ## [`9.9.1`](https://github.com/elastic/eui/tree/v9.9.1)
 

diff --git a/packages/react-datepicker.js b/packages/react-datepicker.js
@@ -3660,7 +3660,7 @@ var Calendar = function (_React$Component) {
         _this.props.onYearChange(date);
       }
       if (_this.props.accessibleMode) {
-        _this.props.updateSelection(getStartOfMonth(cloneDate(date)));
+        _this.handleSelectionChange(date);
       }
     };
 
@@ -3677,6 +3677,14 @@ var Calendar = function (_React$Component) {
         }
       }
       if (_this.props.accessibleMode) {
+        _this.handleSelectionChange(date);
+      }
+    };
+
+    _this.handleSelectionChange = function (date) {
+      if (_this.props.adjustDateOnChange) {
+        _this.props.updateSelection(date);
+      } else {
         _this.props.updateSelection(getStartOfMonth(cloneDate(date)));
       }
     };
@@ -4440,13 +4448,27 @@ var _toLength = function (it) {
   return it > 0 ? min(_toInteger(it), 0x1fffffffffffff) : 0; // pow(2, 53) - 1 == 9007199254740991
 };
 
+var _toLength$1 = /*#__PURE__*/Object.freeze({
+  default: _toLength,
+  __moduleExports: _toLength
+});
+
 var max = Math.max;
 var min$1 = Math.min;
 var _toAbsoluteIndex = function (index, length) {
   index = _toInteger(index);
   return index < 0 ? max(index + length, 0) : min$1(index, length);
 };
 
+var _toAbsoluteIndex$1 = /*#__PURE__*/Object.freeze({
+  default: _toAbsoluteIndex,
+  __moduleExports: _toAbsoluteIndex
+});
+
+var toLength = ( _toLength$1 && _toLength ) || _toLength$1;
+
+var toAbsoluteIndex = ( _toAbsoluteIndex$1 && _toAbsoluteIndex ) || _toAbsoluteIndex$1;
+
 // false -> Array#indexOf
 // true  -> Array#includes
 
@@ -4455,8 +4477,8 @@ var _toAbsoluteIndex = function (index, length) {
 var _arrayIncludes = function (IS_INCLUDES) {
   return function ($this, el, fromIndex) {
     var O = _toIobject($this);
-    var length = _toLength(O.length);
-    var index = _toAbsoluteIndex(fromIndex, length);
+    var length = toLength(O.length);
+    var index = toAbsoluteIndex(fromIndex, length);
     var value;
     // Array#includes uses SameValueZero equality algorithm
     // eslint-disable-next-line no-self-compare
@@ -5279,15 +5301,22 @@ exports.default = typeof _symbol2.default === "function" && _typeof(_iterator2.d
 };
 });
 
-unwrapExports(_typeof_1);
+var _typeof$1 = unwrapExports(_typeof_1);
+
+var _typeof$2 = /*#__PURE__*/Object.freeze({
+  default: _typeof$1,
+  __moduleExports: _typeof_1
+});
+
+var _typeof2 = ( _typeof$2 && _typeof$1 ) || _typeof$2;
 
 var possibleConstructorReturn$1 = createCommonjsModule(function (module, exports) {
 
 exports.__esModule = true;
 
 
 
-var _typeof3 = _interopRequireDefault(_typeof_1);
+var _typeof3 = _interopRequireDefault(_typeof2);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -5348,11 +5377,18 @@ var create = function create(P, D) {
   return $Object.create(P, D);
 };
 
-var create$1 = createCommonjsModule(function (module) {
-module.exports = { "default": create, __esModule: true };
+var create$1 = /*#__PURE__*/Object.freeze({
+  default: create,
+  __moduleExports: create
+});
+
+var require$$0 = ( create$1 && create ) || create$1;
+
+var create$2 = createCommonjsModule(function (module) {
+module.exports = { "default": require$$0, __esModule: true };
 });
 
-unwrapExports(create$1);
+unwrapExports(create$2);
 
 var inherits$1 = createCommonjsModule(function (module, exports) {
 
@@ -5364,11 +5400,11 @@ var _setPrototypeOf2 = _interopRequireDefault(setPrototypeOf$1);
 
 
 
-var _create2 = _interopRequireDefault(create$1);
+var _create2 = _interopRequireDefault(create$2);
 
 
 
-var _typeof3 = _interopRequireDefault(_typeof_1);
+var _typeof3 = _interopRequireDefault(_typeof2);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -7992,13 +8028,6 @@ if (process.env.NODE_ENV !== 'production') {
 
 var warning_1 = warning;
 
-var warning$1 = /*#__PURE__*/Object.freeze({
-  default: warning_1,
-  __moduleExports: warning_1
-});
-
-var _warning = ( warning$1 && warning_1 ) || warning$1;
-
 var implementation = createCommonjsModule(function (module, exports) {
 
 exports.__esModule = true;
@@ -8017,7 +8046,7 @@ var _gud2 = _interopRequireDefault(gud);
 
 
 
-var _warning2 = _interopRequireDefault(_warning);
+var _warning2 = _interopRequireDefault(warning_1);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -8453,10 +8482,10 @@ function Popper$1(props) {
 
 var __DEV__ = process.env.NODE_ENV !== 'production';
 
-var warning$2 = function() {};
+var warning$1 = function() {};
 
 if (__DEV__) {
-  warning$2 = function(condition, format, args) {
+  warning$1 = function(condition, format, args) {
     var len = arguments.length;
     args = new Array(len > 2 ? len - 2 : 0);
     for (var key = 2; key < len; key++) {
@@ -8494,7 +8523,7 @@ if (__DEV__) {
   };
 }
 
-var warning_1$1 = warning$2;
+var warning_1$1 = warning$1;
 
 var InnerReference = function (_React$Component) {
   _inherits$1(InnerReference, _React$Component);

diff --git a/packages/react-datepicker/docs-site/bundle.js b/packages/react-datepicker/docs-site/bundle.js
@@ -27703,7 +27703,7 @@
 	        _this.props.onYearChange(date);
 	      }
 	      if (_this.props.accessibleMode) {
-	        _this.props.updateSelection((0, _date_utils.getStartOfMonth)((0, _date_utils.cloneDate)(date)));
+	        _this.handleSelectionChange(date);
 	      }
 	    };
 
@@ -27720,6 +27720,14 @@
 	        }
 	      }
 	      if (_this.props.accessibleMode) {
+	        _this.handleSelectionChange(date);
+	      }
+	    };
+
+	    _this.handleSelectionChange = function (date) {
+	      if (_this.props.adjustDateOnChange) {
+	        _this.props.updateSelection(date);
+	      } else {
 	        _this.props.updateSelection((0, _date_utils.getStartOfMonth)((0, _date_utils.cloneDate)(date)));
 	      }
 	    };

diff --git a/packages/react-datepicker/src/calendar.jsx b/packages/react-datepicker/src/calendar.jsx
@@ -242,7 +242,7 @@ export default class Calendar extends React.Component {
       this.props.onYearChange(date);
     }
     if (this.props.accessibleMode) {
-      this.props.updateSelection(getStartOfMonth(cloneDate(date)));
+      this.handleSelectionChange(date);
     }
   };
 
@@ -259,10 +259,18 @@ export default class Calendar extends React.Component {
       }
     }
     if (this.props.accessibleMode) {
-      this.props.updateSelection(getStartOfMonth(cloneDate(date)));
+      this.handleSelectionChange(date);
     }
   };
 
+  handleSelectionChange = date => {
+    if (this.props.adjustDateOnChange) {
+      this.props.updateSelection(date);
+    } else {
+      this.props.updateSelection(getStartOfMonth(cloneDate(date)));
+    }
+  }
+
   handleMonthYearChange = date => {
     this.handleYearChange(date);
     this.handleMonthChange(date);

diff --git a/packages/react-datepicker/yarn.lock b/packages/react-datepicker/yarn.lock
@@ -4124,9 +4124,9 @@ har-validator@~4.2.1:
     har-schema "^1.0.5"
 
 har-validator@~5.1.0:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-5.1.2.tgz#a3891924f815c88e41c7f31112079cfef5e129e5"
-  integrity sha512-OFxb5MZXCUMx43X7O8LK4FKggEQx6yC5QPmOcBnYbJ9UjxEcMcrMbaR0af5HZpqeFopw2GwQRQi34ZXI7YLM5w==
+  version "5.1.3"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-5.1.3.tgz#1ef89ebd3e4996557675eed9893110dc350fa080"
+  integrity sha512-sNvOCzEQNr/qrvJgc3UG/kD4QtlHycrzwS+6mfTrrSq97BvaYcPZZI1ZSqGSPR73Cxn4LKTD4PttRwfU7jWq5g==
   dependencies:
     ajv "^6.5.5"
     har-schema "^2.0.0"

diff --git a/src/components/date_picker/__snapshots__/date_picker.test.js.snap b/src/components/date_picker/__snapshots__/date_picker.test.js.snap
@@ -14,6 +14,7 @@ exports[`EuiDatePicker is rendered 1`] = `
       <EuiValidatableControl>
         <DatePicker
           accessibleMode={true}
+          adjustDateOnChange={true}
           allowSameDay={false}
           aria-label="aria-label"
           className="euiDatePicker euiFieldText euiFieldText--withIcon testClass1 testClass2"

diff --git a/src/components/date_picker/date_picker.js b/src/components/date_picker/date_picker.js
@@ -23,6 +23,7 @@ export class EuiDatePicker extends Component {
 
   render() {
     const {
+      adjustDateOnChange,
       calendarClassName,
       className,
       customInput,
@@ -135,6 +136,7 @@ export class EuiDatePicker extends Component {
               isInvalid={isInvalid}
             >
               <DatePicker
+                adjustDateOnChange={adjustDateOnChange}
                 calendarClassName={calendarClassName}
                 className={datePickerClasses}
                 customInput={customInput}
@@ -176,6 +178,10 @@ export class EuiDatePicker extends Component {
 }
 
 EuiDatePicker.propTypes = {
+  /**
+   * Whether changes to Year and Month (via dropdowns) should trigger `onChange`
+   */
+  adjustDateOnChange: PropTypes.bool,
   /**
    * Optional class added to the calendar portion of datepicker
    */
@@ -289,6 +295,7 @@ EuiDatePicker.propTypes = {
 };
 
 EuiDatePicker.defaultProps = {
+  adjustDateOnChange: true,
   dateFormat: 'MM/DD/YYYY hh:mm A',
   fullWidth: false,
   isLoading: false,