Skip to content

Commit

Permalink
[Date Picker] Updates to Year and Month via dropdown should trigger `…
Browse files Browse the repository at this point in the history 
…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
  • Loading branch information
@thompsongl
thompsongl authored Apr 12, 2019
1 parent ce003eb commit f277059
Show file tree
Hide file tree
Showing 7 changed files with 81 additions and 27 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -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)

Expand Down
71 changes: 50 additions & 21 deletions packages/react-datepicker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
};

Expand All @@ -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)));
}
};
Expand Down Expand Up @@ -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

Expand All @@ -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
Expand Down Expand Up @@ -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 }; }

Expand Down Expand Up @@ -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) {

Expand All @@ -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 }; }

Expand Down Expand Up @@ -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;
Expand All @@ -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 }; }

Expand Down Expand Up @@ -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++) {
Expand Down Expand Up @@ -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);
Expand Down
10 changes: 9 additions & 1 deletion packages/react-datepicker/docs-site/bundle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
};

Expand All @@ -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)));
}
};
Expand Down
12 changes: 10 additions & 2 deletions packages/react-datepicker/src/calendar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
};

Expand All @@ -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);
Expand Down
6 changes: 3 additions & 3 deletions packages/react-datepicker/yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
1 change: 1 addition & 0 deletions src/components/date_picker/__snapshots__/date_picker.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
7 changes: 7 additions & 0 deletions src/components/date_picker/date_picker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ export class EuiDatePicker extends Component {

render() {
const {
adjustDateOnChange,
calendarClassName,
className,
customInput,
Expand Down Expand Up @@ -135,6 +136,7 @@ export class EuiDatePicker extends Component {
isInvalid={isInvalid}
>
<DatePicker
adjustDateOnChange={adjustDateOnChange}
calendarClassName={calendarClassName}
className={datePickerClasses}
customInput={customInput}
Expand Down Expand Up @@ -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
*/
Expand Down Expand Up @@ -289,6 +295,7 @@ EuiDatePicker.propTypes = {
};

EuiDatePicker.defaultProps = {
adjustDateOnChange: true,
dateFormat: 'MM/DD/YYYY hh:mm A',
fullWidth: false,
isLoading: false,
Expand Down

0 comments on commit f277059

Please sign in to comment.