Join our webinar on Wednesday, June 26, at 1pm EDTHow Chia Mitigates Risk in the Crypto Industry.Register →
Socket
Socket
Sign inDemoInstall

react-date-picker

Package Overview
Dependencies
23
Maintainers
1
Versions
259
Alerts
File Explorer

Advanced tools

npm Scripts
License

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 8.4.0 to 9.0.0

48

dist/DateInput.js

@@ -42,3 +42,3 @@ "use strict";

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

@@ -61,3 +61,3 @@ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

@@ -72,3 +72,3 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

@@ -89,2 +89,3 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var getFormatterOptionsCache = {};
var defaultMinDate = new Date();

@@ -174,3 +175,3 @@ defaultMinDate.setFullYear(1, 0, 1);

function isInternalInput(element) {
return element.getAttribute('data-input') === 'true';
return element.dataset.input === 'true';
}

@@ -482,16 +483,22 @@

var maxDetail = this.props.maxDetail;
var options = {
year: 'numeric'
};
var level = allViews.indexOf(maxDetail);
if (level >= 2) {
options.month = 'numeric';
}
var formatterOptions = getFormatterOptionsCache[level] || function () {
var options = {
year: 'numeric'
};
if (level >= 3) {
options.day = 'numeric';
}
if (level >= 2) {
options.month = 'numeric';
}
return (0, _dateFormatter.getFormatter)(options);
if (level >= 3) {
options.day = 'numeric';
}
getFormatterOptionsCache[level] = options;
return options;
}();
return (0, _dateFormatter.getFormatter)(formatterOptions);
}

@@ -560,5 +567,12 @@ /**

function formatDatePiece(name, dateToFormat) {
return (0, _dateFormatter.getFormatter)(_defineProperty({
useGrouping: false
}, name, 'numeric'))(locale, dateToFormat).match(/\d{1,}/);
var formatterOptions = getFormatterOptionsCache[name] || function () {
var options = _defineProperty({
useGrouping: false
}, name, 'numeric');
getFormatterOptionsCache[name] = options;
return options;
}();
return (0, _dateFormatter.getFormatter)(formatterOptions)(locale, dateToFormat).match(/\d{1,}/);
}

@@ -565,0 +579,0 @@

2

dist/DateInput/DayInput.js

@@ -24,3 +24,3 @@ "use strict";

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

@@ -27,0 +27,0 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

31

dist/DateInput/Input.js

@@ -10,3 +10,3 @@ "use strict";

var _react = _interopRequireDefault(require("react"));
var _react = _interopRequireWildcard(require("react"));

@@ -17,4 +17,2 @@ var _propTypes = _interopRequireDefault(require("prop-types"));

var _mergeRefs = _interopRequireDefault(require("merge-refs"));
var _updateInputWidth = _interopRequireWildcard(require("update-input-width"));

@@ -24,2 +22,4 @@

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

@@ -29,4 +29,2 @@

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
/* eslint-disable jsx-a11y/no-autofocus */

@@ -48,2 +46,14 @@ var isIEOrEdgeLegacy = typeof window !== 'undefined' && /(MSIE|Trident\/|Edge\/)/.test(window.navigator.userAgent);

function updateInputWidthOnLoad(element) {
if (document.readyState === 'complete') {
return;
}
function onLoad() {
(0, _updateInputWidth["default"])(element);
}
window.addEventListener('load', onLoad);
}
function updateInputWidthOnFontLoad(element) {

@@ -131,2 +141,11 @@ if (!document.fonts) {

value = _ref.value;
(0, _react.useLayoutEffect)(function () {
if (!inputRef || !inputRef.current) {
return;
}
(0, _updateInputWidth["default"])(inputRef.current);
updateInputWidthOnLoad(inputRef.current);
updateInputWidthOnFontLoad(inputRef.current);
}, [inputRef, value]);
var hasLeadingZero = showLeadingZeros && value && value < 10 && (value === '0' || !value.toString().startsWith('0'));

@@ -161,3 +180,3 @@ var maxLength = max ? max.toString().length : null;

placeholder: placeholder,
ref: (0, _mergeRefs["default"])(_updateInputWidth["default"], updateInputWidthOnFontLoad, inputRef),
ref: inputRef,
required: required,

@@ -164,0 +183,0 @@ step: step,

2

dist/DateInput/MonthInput.js

@@ -24,3 +24,3 @@ "use strict";

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

@@ -27,0 +27,0 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

2

dist/DateInput/MonthSelect.js

@@ -26,3 +26,3 @@ "use strict";

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

@@ -29,0 +29,0 @@ function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }

2

dist/DateInput/YearInput.js

@@ -24,3 +24,3 @@ "use strict";

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

@@ -27,0 +27,0 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

62

dist/DatePicker.js

@@ -12,2 +12,4 @@ "use strict";

var _reactDom = require("react-dom");
var _propTypes = _interopRequireDefault(require("prop-types"));

@@ -27,3 +29,3 @@

var _excluded = ["calendarClassName", "className", "onChange", "value"],
var _excluded = ["calendarClassName", "className", "onChange", "portalContainer", "value"],
_excluded2 = ["onChange"];

@@ -41,3 +43,3 @@

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

@@ -64,3 +66,3 @@ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

@@ -75,3 +77,3 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

@@ -102,7 +104,15 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

_defineProperty(_assertThisInitialized(_this), "wrapper", /*#__PURE__*/(0, _react.createRef)());
_defineProperty(_assertThisInitialized(_this), "calendarWrapper", /*#__PURE__*/(0, _react.createRef)());
_defineProperty(_assertThisInitialized(_this), "onOutsideAction", function (event) {
// Try event.composedPath first to handle clicks inside a Shadow DOM.
var _assertThisInitialize = _assertThisInitialized(_this),
wrapper = _assertThisInitialize.wrapper,
calendarWrapper = _assertThisInitialize.calendarWrapper; // Try event.composedPath first to handle clicks inside a Shadow DOM.
var target = 'composedPath' in event ? event.composedPath()[0] : event.target;
if (_this.wrapper && !_this.wrapper.contains(target)) {
if (wrapper.current && !wrapper.current.contains(target) && (!calendarWrapper.current || !calendarWrapper.current.contains(target))) {
_this.closeCalendar();

@@ -141,3 +151,3 @@ }

if (openCalendarOnFocus) {
if (event.target.getAttribute('data-select') === 'true') {
if (event.target.dataset.select === 'true') {
return;

@@ -319,2 +329,4 @@ }

value: function renderCalendar() {
var _this3 = this;
var disableCalendar = this.props.disableCalendar;

@@ -331,2 +343,3 @@ var isOpen = this.state.isOpen;

onChange = _this$props4.onChange,
portalContainer = _this$props4.portalContainer,
value = _this$props4.value,

@@ -336,3 +349,16 @@ calendarProps = _objectWithoutProperties(_this$props4, _excluded);

var className = "".concat(baseClassName, "__calendar");
return /*#__PURE__*/_react["default"].createElement(_reactFit["default"], null, /*#__PURE__*/_react["default"].createElement("div", {
var classNames = (0, _mergeClassNames["default"])(className, "".concat(className, "--").concat(isOpen ? 'open' : 'closed'));
var calendar = /*#__PURE__*/_react["default"].createElement(_reactCalendar["default"], _extends({
className: calendarClassName,
onChange: function onChange(value) {
return _this3.onChange(value);
},
value: value || null
}, calendarProps));
return portalContainer ? /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react["default"].createElement("div", {
ref: this.calendarWrapper,
className: classNames
}, calendar), portalContainer) : /*#__PURE__*/_react["default"].createElement(_reactFit["default"], null, /*#__PURE__*/_react["default"].createElement("div", {
ref: function ref(_ref) {

@@ -343,9 +369,4 @@ if (_ref && !isOpen) {

},
className: (0, _mergeClassNames["default"])(className, "".concat(className, "--").concat(isOpen ? 'open' : 'closed')),
style: isOpen ? undefined : {}
}, /*#__PURE__*/_react["default"].createElement(_reactCalendar["default"], _extends({
className: calendarClassName,
onChange: this.onChange,
value: value || null
}, calendarProps))));
className: classNames
}, calendar));
}

@@ -355,4 +376,2 @@ }, {

value: function render() {
var _this3 = this;
var eventProps = this.eventProps;

@@ -371,9 +390,3 @@ var _this$props5 = this.props,

onFocus: this.onFocus,
ref: function ref(_ref2) {
if (!_ref2) {
return;
}
_this3.wrapper = _ref2;
}
ref: this.wrapper
}), this.renderInputs(), this.renderCalendar());

@@ -481,2 +494,3 @@ }

openCalendarOnFocus: _propTypes["default"].bool,
portalContainer: _propTypes["default"].object,
required: _propTypes["default"].bool,

@@ -483,0 +497,0 @@ returnValue: _propTypes["default"].oneOf(['start', 'end', 'range']),

1

index.d.ts

@@ -28,2 +28,3 @@ import { CalendarProps } from 'react-calendar';

openCalendarOnFocus?: boolean;
portalContainer?: HTMLElement;
required?: boolean;

@@ -30,0 +31,0 @@ showLeadingZeros?: boolean;

18

package.json
{
"name": "react-date-picker",
"version": "8.4.0",
"version": "9.0.0",
"description": "A date picker for your React app.",

@@ -70,5 +70,4 @@ "main": "dist/entry.js",

"merge-class-names": "^1.1.1",
"merge-refs": "^1.0.0",
"prop-types": "^15.6.0",
"react-calendar": "^3.3.1",
"react-calendar": "^3.7.0",
"react-fit": "^1.4.0",

@@ -82,8 +81,9 @@ "update-input-width": "^1.2.2"

"@babel/preset-react": "^7.14.0",
"@wojtekmaj/enzyme-adapter-react-17": "^0.6.0",
"enzyme": "^3.10.0",
"@testing-library/jest-dom": "^5.15.0",
"@testing-library/react": "^12.1.0",
"eslint": "^8.5.0",
"eslint-config-wojtekmaj": "^0.6.5",
"husky": "^7.0.0",
"jest": "^27.0.0",
"husky": "^8.0.0",
"jest": "^29.0.0",
"jest-environment-jsdom": "^29.0.0",
"less": "^4.0.0",

@@ -97,4 +97,4 @@ "prettier": "^2.5.0",

"peerDependencies": {
"react": "^16.3.0 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.3.0 || ^17.0.0 || ^18.0.0"
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
},

@@ -101,0 +101,0 @@ "resolutions": {

5

README.md

@@ -73,2 +73,6 @@ [![npm](https://img.shields.io/npm/v/react-date-picker.svg)](https://www.npmjs.com/package/react-date-picker) ![downloads](https://img.shields.io/npm/dt/react-date-picker.svg) [![CI](https://github.com/wojtekmaj/react-date-picker/workflows/CI/badge.svg)](https://github.com/wojtekmaj/react-date-picker/actions) [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest)

### Next.js and Vite
Next.js and Vite do not allow components from `node_modules` to import styles. You'll need to follow instructions from [Custom styling](#custom-styling) to get going.
## User guide

@@ -111,2 +115,3 @@

| openCalendarOnFocus | Whether to open the calendar on input focus. | `true` | `false` |
| portalContainer | Element to render the calendar in using portal. | n/a | `document.getElementById('my-div')` |
| required | Whether date input should be required. | `false` | `true` |

@@ -113,0 +118,0 @@ | returnValue | Which dates shall be passed by the calendar to the onChange function and onClick{Period} functions. Can be `"start"`, `"end"` or `"range"`. The latter will cause an array with start and end values to be passed. | `"start"` | `"range"` |

42

src/DateInput.jsx

@@ -17,2 +17,4 @@ import React, { createRef, PureComponent } from 'react';

const getFormatterOptionsCache = {};
const defaultMinDate = new Date();

@@ -96,3 +98,3 @@ defaultMinDate.setFullYear(1, 0, 1);

function isInternalInput(element) {
return element.getAttribute('data-input') === 'true';
return element.dataset.input === 'true';
}

@@ -232,12 +234,20 @@

const options = { year: 'numeric' };
const level = allViews.indexOf(maxDetail);
if (level >= 2) {
options.month = 'numeric';
}
if (level >= 3) {
options.day = 'numeric';
}
const formatterOptions =
getFormatterOptionsCache[level] ||
(() => {
const options = { year: 'numeric' };
if (level >= 2) {
options.month = 'numeric';
}
if (level >= 3) {
options.day = 'numeric';
}
return getFormatter(options);
getFormatterOptionsCache[level] = options;
return options;
})();
return getFormatter(formatterOptions);
}

@@ -295,5 +305,13 @@

function formatDatePiece(name, dateToFormat) {
return getFormatter({ useGrouping: false, [name]: 'numeric' })(locale, dateToFormat).match(
/\d{1,}/,
);
const formatterOptions =
getFormatterOptionsCache[name] ||
(() => {
const options = { useGrouping: false, [name]: 'numeric' };
getFormatterOptionsCache[name] = options;
return options;
})();
return getFormatter(formatterOptions)(locale, dateToFormat).match(/\d{1,}/);
}

@@ -300,0 +318,0 @@

495

src/DateInput.spec.jsx
import React from 'react';
import { mount } from 'enzyme';
import { fireEvent, render } from '@testing-library/react';

@@ -12,3 +12,3 @@ import DateInput from './DateInput';

const formatter = new Intl.DateTimeFormat('de-DE', { hour: 'numeric' });
return formatter.format(date) === '21';
return formatter.format(date).includes('21');
} catch (err) {

@@ -42,22 +42,9 @@ return false;

let container;
beforeEach(() => {
container = document.createElement('div');
container.id = 'container';
document.body.appendChild(container);
});
afterEach(() => {
document.body.removeChild(container);
container = null;
});
it('renders a native input and custom inputs', () => {
const component = mount(<DateInput {...defaultProps} />);
const { container } = render(<DateInput {...defaultProps} />);
const nativeInput = component.find('input[type="date"]');
const customInputs = component.find('input[data-input]');
const nativeInput = container.querySelector('input[type="date"]');
const customInputs = container.querySelectorAll('input[data-input]');
expect(nativeInput).toHaveLength(1);
expect(nativeInput).toBeInTheDocument();
expect(customInputs).toHaveLength(3);

@@ -67,27 +54,27 @@ });

it('does not render day input when maxDetail is "year" or less', () => {
const component = mount(<DateInput {...defaultProps} maxDetail="year" />);
const { container } = render(<DateInput {...defaultProps} maxDetail="year" />);
const customInputs = component.find('input[data-input]');
const dayInput = customInputs.find('input[name="day"]');
const monthInput = customInputs.find('input[name="month"]');
const yearInput = customInputs.find('input[name="year"]');
const customInputs = container.querySelectorAll('input[data-input]');
const dayInput = container.querySelector('input[name="day"]');
const monthInput = container.querySelector('input[name="month"]');
const yearInput = container.querySelector('input[name="year"]');
expect(customInputs).toHaveLength(2);
expect(dayInput).toHaveLength(0);
expect(monthInput).toHaveLength(1);
expect(yearInput).toHaveLength(1);
expect(dayInput).toBeFalsy();
expect(monthInput).toBeInTheDocument();
expect(yearInput).toBeInTheDocument();
});
it('does not render day and month inputs when maxDetail is "decade" or less', () => {
const component = mount(<DateInput {...defaultProps} maxDetail="decade" />);
const { container } = render(<DateInput {...defaultProps} maxDetail="decade" />);
const customInputs = component.find('input[data-input]');
const dayInput = customInputs.find('input[name="day"]');
const monthInput = customInputs.find('input[name="month"]');
const yearInput = customInputs.find('input[name="year"]');
const customInputs = container.querySelectorAll('input[data-input]');
const dayInput = container.querySelector('input[name="day"]');
const monthInput = container.querySelector('input[name="month"]');
const yearInput = container.querySelector('input[name="year"]');
expect(customInputs).toHaveLength(1);
expect(dayInput).toHaveLength(0);
expect(monthInput).toHaveLength(0);
expect(yearInput).toHaveLength(1);
expect(dayInput).toBeFalsy();
expect(monthInput).toBeFalsy();
expect(yearInput).toBeInTheDocument();
});

@@ -98,11 +85,11 @@

const component = mount(<DateInput {...defaultProps} value={date} />);
const { container } = render(<DateInput {...defaultProps} value={date} />);
const nativeInput = component.find('input[type="date"]');
const customInputs = component.find('input[data-input]');
const nativeInput = container.querySelector('input[type="date"]');
const customInputs = container.querySelectorAll('input[data-input]');
expect(nativeInput.prop('value')).toBe('2017-09-30');
expect(customInputs.at(0).prop('value')).toBe('9');
expect(customInputs.at(1).prop('value')).toBe('30');
expect(customInputs.at(2).prop('value')).toBe('2017');
expect(nativeInput).toHaveValue('2017-09-30');
expect(customInputs[0]).toHaveValue(9);
expect(customInputs[1]).toHaveValue(30);
expect(customInputs[2]).toHaveValue(2017);
});

@@ -113,11 +100,11 @@

const component = mount(<DateInput {...defaultProps} value={date} />);
const { container } = render(<DateInput {...defaultProps} value={date} />);
const nativeInput = component.find('input[type="date"]');
const customInputs = component.find('input[data-input]');
const nativeInput = container.querySelector('input[type="date"]');
const customInputs = container.querySelectorAll('input[data-input]');
expect(nativeInput.prop('value')).toBe('2017-09-30');
expect(customInputs.at(0).prop('value')).toBe('9');
expect(customInputs.at(1).prop('value')).toBe('30');
expect(customInputs.at(2).prop('value')).toBe('2017');
expect(nativeInput).toHaveValue('2017-09-30');
expect(customInputs[0]).toHaveValue(9);
expect(customInputs[1]).toHaveValue(30);
expect(customInputs[2]).toHaveValue(2017);
});

@@ -128,11 +115,11 @@

const component = mount(<DateInput {...defaultProps} value={date} />);
const { container } = render(<DateInput {...defaultProps} value={date} />);
const nativeInput = component.find('input[type="date"]');
const customInputs = component.find('input[data-input]');
const nativeInput = container.querySelector('input[type="date"]');
const customInputs = container.querySelectorAll('input[data-input]');
expect(nativeInput.prop('value')).toBe('2017-09-30');
expect(customInputs.at(0).prop('value')).toBe('9');
expect(customInputs.at(1).prop('value')).toBe('30');
expect(customInputs.at(2).prop('value')).toBe('2017');
expect(nativeInput).toHaveValue('2017-09-30');
expect(customInputs[0]).toHaveValue(9);
expect(customInputs[1]).toHaveValue(30);
expect(customInputs[2]).toHaveValue(2017);
});

@@ -143,11 +130,11 @@

const component = mount(<DateInput {...defaultProps} locale="de-DE" value={date} />);
const { container } = render(<DateInput {...defaultProps} locale="de-DE" value={date} />);
const nativeInput = component.find('input[type="date"]');
const customInputs = component.find('input[data-input]');
const nativeInput = container.querySelector('input[type="date"]');
const customInputs = container.querySelectorAll('input[data-input]');
expect(nativeInput.prop('value')).toBe('2017-09-30');
expect(customInputs.at(0).prop('value')).toBe('2017');
expect(customInputs.at(1).prop('value')).toBe('9');
expect(customInputs.at(2).prop('value')).toBe('30');
expect(nativeInput).toHaveValue('2017-09-30');
expect(customInputs[0]).toHaveValue(30);
expect(customInputs[1]).toHaveValue(9);
expect(customInputs[2]).toHaveValue(2017);
});

@@ -160,11 +147,11 @@

const component = mount(<DateInput {...defaultProps} locale="de-DE" value={date} />);
const { container } = render(<DateInput {...defaultProps} locale="de-DE" value={date} />);
const nativeInput = component.find('input[type="date"]');
const customInputs = component.find('input[data-input]');
const nativeInput = container.querySelector('input[type="date"]');
const customInputs = container.querySelectorAll('input[data-input]');
expect(nativeInput.prop('value')).toBe('2017-09-30');
expect(customInputs.at(0).prop('value')).toBe('2017');
expect(customInputs.at(1).prop('value')).toBe('9');
expect(customInputs.at(2).prop('value')).toBe('30');
expect(nativeInput).toHaveValue('2017-09-30');
expect(customInputs[0]).toHaveValue(30);
expect(customInputs[1]).toHaveValue(9);
expect(customInputs[2]).toHaveValue(2017);
},

@@ -178,11 +165,11 @@ );

const component = mount(<DateInput {...defaultProps} locale="de-DE" value={date} />);
const { container } = render(<DateInput {...defaultProps} locale="de-DE" value={date} />);
const nativeInput = component.find('input[type="date"]');
const customInputs = component.find('input[data-input]');
const nativeInput = container.querySelector('input[type="date"]');
const customInputs = container.querySelectorAll('input[data-input]');
expect(nativeInput.prop('value')).toBe('2017-09-30');
expect(customInputs.at(0).prop('value')).toBe('2017');
expect(customInputs.at(1).prop('value')).toBe('9');
expect(customInputs.at(2).prop('value')).toBe('30');
expect(nativeInput).toHaveValue('2017-09-30');
expect(customInputs[0]).toHaveValue(30);
expect(customInputs[1]).toHaveValue(9);
expect(customInputs[2]).toHaveValue(2017);
},

@@ -192,23 +179,23 @@ );

it('shows empty value in all inputs correctly given null', () => {
const component = mount(<DateInput {...defaultProps} value={null} />);
const { container } = render(<DateInput {...defaultProps} value={null} />);
const nativeInput = component.find('input[type="date"]');
const customInputs = component.find('input[data-input]');
const nativeInput = container.querySelector('input[type="date"]');
const customInputs = container.querySelectorAll('input[data-input]');
expect(nativeInput.prop('value')).toBeFalsy();
expect(customInputs.at(0).prop('value')).toBeFalsy();
expect(customInputs.at(1).prop('value')).toBeFalsy();
expect(customInputs.at(2).prop('value')).toBeFalsy();
expect(nativeInput).toHaveAttribute('value', '');
expect(customInputs[0]).toHaveAttribute('value', '');
expect(customInputs[1]).toHaveAttribute('value', '');
expect(customInputs[2]).toHaveAttribute('value', '');
});
it('shows empty value in all inputs correctly given an array of nulls', () => {
const component = mount(<DateInput {...defaultProps} value={[null, null]} />);
const { container } = render(<DateInput {...defaultProps} value={[null, null]} />);
const nativeInput = component.find('input[type="date"]');
const customInputs = component.find('input[data-input]');
const nativeInput = container.querySelector('input[type="date"]');
const customInputs = container.querySelectorAll('input[data-input]');
expect(nativeInput.prop('value')).toBeFalsy();
expect(customInputs.at(0).prop('value')).toBeFalsy();
expect(customInputs.at(1).prop('value')).toBeFalsy();
expect(customInputs.at(2).prop('value')).toBeFalsy();
expect(nativeInput).toHaveAttribute('value', '');
expect(customInputs[0]).toHaveAttribute('value', '');
expect(customInputs[1]).toHaveAttribute('value', '');
expect(customInputs[2]).toHaveAttribute('value', '');
});

@@ -219,33 +206,33 @@

const component = mount(<DateInput {...defaultProps} value={date} />);
const { container, rerender } = render(<DateInput {...defaultProps} value={date} />);
component.setProps({ value: null });
rerender(<DateInput {...defaultProps} value={null} />);
const nativeInput = component.find('input[type="date"]');
const customInputs = component.find('input[data-input]');
const nativeInput = container.querySelector('input[type="date"]');
const customInputs = container.querySelectorAll('input[data-input]');
expect(nativeInput.prop('value')).toBeFalsy();
expect(customInputs.at(0).prop('value')).toBeFalsy();
expect(customInputs.at(1).prop('value')).toBeFalsy();
expect(customInputs.at(2).prop('value')).toBeFalsy();
expect(nativeInput).toHaveAttribute('value', '');
expect(customInputs[0]).toHaveAttribute('value', '');
expect(customInputs[1]).toHaveAttribute('value', '');
expect(customInputs[2]).toHaveAttribute('value', '');
});
it('renders custom inputs in a proper order (12-hour format)', () => {
const component = mount(<DateInput {...defaultProps} />);
const { container } = render(<DateInput {...defaultProps} />);
const customInputs = component.find('input[data-input]');
const customInputs = container.querySelectorAll('input[data-input]');
expect(customInputs.at(0).prop('name')).toBe('month');
expect(customInputs.at(1).prop('name')).toBe('day');
expect(customInputs.at(2).prop('name')).toBe('year');
expect(customInputs[0]).toHaveAttribute('name', 'month');
expect(customInputs[1]).toHaveAttribute('name', 'day');
expect(customInputs[2]).toHaveAttribute('name', 'year');
});
itIfFullICU('renders custom inputs in a proper order (24-hour format)', () => {
const component = mount(<DateInput {...defaultProps} locale="de-DE" />);
const { container } = render(<DateInput {...defaultProps} locale="de-DE" />);
const customInputs = component.find('input[data-input]');
const customInputs = container.querySelectorAll('input[data-input]');
expect(customInputs.at(0).prop('name')).toBe('year');
expect(customInputs.at(1).prop('name')).toBe('month');
expect(customInputs.at(2).prop('name')).toBe('day');
expect(customInputs[0]).toHaveAttribute('name', 'day');
expect(customInputs[1]).toHaveAttribute('name', 'month');
expect(customInputs[2]).toHaveAttribute('name', 'year');
});

@@ -255,8 +242,8 @@

it('renders "y" properly', () => {
const component = mount(<DateInput {...defaultProps} format="y" />);
const { container } = render(<DateInput {...defaultProps} format="y" />);
const componentInput = component.find('YearInput');
const customInputs = component.find('input[data-input]');
const componentInput = container.querySelector('input[name="year"]');
const customInputs = container.querySelectorAll('input[data-input]');
expect(componentInput).toHaveLength(1);
expect(componentInput).toBeInTheDocument();
expect(customInputs).toHaveLength(1);

@@ -266,8 +253,8 @@ });

it('renders "yyyy" properly', () => {
const component = mount(<DateInput {...defaultProps} format="yyyy" />);
const { container } = render(<DateInput {...defaultProps} format="yyyy" />);
const componentInput = component.find('YearInput');
const customInputs = component.find('input[data-input]');
const componentInput = container.querySelector('input[name="year"]');
const customInputs = container.querySelectorAll('input[data-input]');
expect(componentInput).toHaveLength(1);
expect(componentInput).toBeInTheDocument();
expect(customInputs).toHaveLength(1);

@@ -277,8 +264,8 @@ });

it('renders "M" properly', () => {
const component = mount(<DateInput {...defaultProps} format="M" />);
const { container } = render(<DateInput {...defaultProps} format="M" />);
const componentInput = component.find('MonthInput');
const customInputs = component.find('input[data-input]');
const componentInput = container.querySelector('input[name="month"]');
const customInputs = container.querySelectorAll('input[data-input]');
expect(componentInput).toHaveLength(1);
expect(componentInput).toBeInTheDocument();
expect(customInputs).toHaveLength(1);

@@ -288,20 +275,18 @@ });

it('renders "MM" properly', () => {
const component = mount(<DateInput {...defaultProps} format="MM" />);
const { container } = render(<DateInput {...defaultProps} format="MM" />);
const componentInput = component.find('MonthInput');
const customInputs = component.find('input[data-input]');
const componentInput = container.querySelector('input[name="month"]');
const customInputs = container.querySelectorAll('input[data-input]');
expect(componentInput).toHaveLength(1);
expect(componentInput).toBeInTheDocument();
expect(customInputs).toHaveLength(1);
expect(componentInput.prop('showLeadingZeros')).toBeTruthy();
});
it('renders "MMM" properly', () => {
const component = mount(<DateInput {...defaultProps} format="MMM" />);
const { container } = render(<DateInput {...defaultProps} format="MMM" />);
const componentSelect = component.find('MonthSelect');
const customInputs = component.find('select');
const componentSelect = container.querySelector('select[name="month"]');
const customInputs = container.querySelectorAll('select');
expect(componentSelect).toHaveLength(1);
expect(componentSelect.prop('short')).toBeTruthy();
expect(componentSelect).toBeInTheDocument(1);
expect(customInputs).toHaveLength(1);

@@ -311,9 +296,8 @@ });

it('renders "MMMM" properly', () => {
const component = mount(<DateInput {...defaultProps} format="MMMM" />);
const { container } = render(<DateInput {...defaultProps} format="MMMM" />);
const componentSelect = component.find('MonthSelect');
const customInputs = component.find('select');
const componentSelect = container.querySelector('select[name="month"]');
const customInputs = container.querySelectorAll('select');
expect(componentSelect).toHaveLength(1);
expect(componentSelect.prop('short')).toBeFalsy();
expect(componentSelect).toBeInTheDocument(1);
expect(customInputs).toHaveLength(1);

@@ -323,8 +307,8 @@ });

it('renders "d" properly', () => {
const component = mount(<DateInput {...defaultProps} format="d" />);
const { container } = render(<DateInput {...defaultProps} format="d" />);
const componentInput = component.find('DayInput');
const customInputs = component.find('input[data-input]');
const componentInput = container.querySelector('input[name="day"]');
const customInputs = container.querySelectorAll('input[data-input]');
expect(componentInput).toHaveLength(1);
expect(componentInput).toBeInTheDocument();
expect(customInputs).toHaveLength(1);

@@ -334,10 +318,9 @@ });

it('renders "dd" properly', () => {
const component = mount(<DateInput {...defaultProps} format="dd" />);
const { container } = render(<DateInput {...defaultProps} format="dd" />);
const componentInput = component.find('DayInput');
const customInputs = component.find('input[data-input]');
const componentInput = container.querySelector('input[name="day"]');
const customInputs = container.querySelectorAll('input[data-input]');
expect(componentInput).toHaveLength(1);
expect(componentInput).toBeInTheDocument();
expect(customInputs).toHaveLength(1);
expect(componentInput.prop('showLeadingZeros')).toBeTruthy();
});

@@ -348,3 +331,3 @@

const renderComponent = () => mount(<DateInput {...defaultProps} format="ddd" />);
const renderComponent = () => render(<DateInput {...defaultProps} format="ddd" />);

@@ -357,16 +340,14 @@ expect(renderComponent).toThrow('Unsupported token: ddd');

it('renders "yyyy-MM-dd" properly', () => {
const component = mount(<DateInput {...defaultProps} format="yyyy-MM-d" />);
const { container } = render(<DateInput {...defaultProps} format="yyyy-MM-d" />);
const monthInput = component.find('MonthInput');
const dayInput = component.find('DayInput');
const customInputs = component.find('input[data-input]');
const monthInput = container.querySelector('input[name="month"]');
const dayInput = container.querySelector('input[name="day"]');
const customInputs = container.querySelectorAll('input[data-input]');
expect(monthInput).toHaveLength(1);
expect(dayInput).toHaveLength(1);
expect(monthInput).toBeInTheDocument();
expect(dayInput).toBeInTheDocument();
expect(customInputs).toHaveLength(3);
expect(customInputs.at(0).prop('name')).toBe('year');
expect(customInputs.at(1).prop('name')).toBe('month');
expect(customInputs.at(2).prop('name')).toBe('day');
expect(monthInput.prop('showLeadingZeros')).toBeTruthy();
expect(dayInput.prop('showLeadingZeros')).toBeFalsy();
expect(customInputs[0]).toHaveAttribute('name', 'year');
expect(customInputs[1]).toHaveAttribute('name', 'month');
expect(customInputs[2]).toHaveAttribute('name', 'day');
});

@@ -376,15 +357,16 @@ });

it('renders proper input separators', () => {
const component = mount(<DateInput {...defaultProps} />);
const { container } = render(<DateInput {...defaultProps} />);
const separators = component.find('.react-date-picker__inputGroup__divider');
const separators = container.querySelectorAll('.react-date-picker__inputGroup__divider');
expect(separators).toHaveLength(2);
expect(separators.at(0).text()).toBe('/');
expect(separators[0]).toHaveTextContent('/');
expect(separators[1]).toHaveTextContent('/');
});
it('renders proper amount of separators', () => {
const component = mount(<DateInput {...defaultProps} maxDetail="year" />);
const { container } = render(<DateInput {...defaultProps} maxDetail="year" />);
const separators = component.find('.react-date-picker__inputGroup__divider');
const customInputs = component.find('input[data-input]');
const separators = container.querySelectorAll('.react-date-picker__inputGroup__divider');
const customInputs = container.querySelectorAll('input[data-input]');

@@ -395,123 +377,129 @@ expect(separators).toHaveLength(customInputs.length - 1);

it('jumps to the next field when right arrow is pressed', () => {
const component = mount(<DateInput {...defaultProps} />, { attachTo: container });
const { container } = render(<DateInput {...defaultProps} />, { attachTo: container });
const customInputs = component.find('input[data-input]');
const dayInput = customInputs.at(0);
const monthInput = customInputs.at(1);
const customInputs = container.querySelectorAll('input[data-input]');
const dayInput = customInputs[0];
const monthInput = customInputs[1];
dayInput.getDOMNode().focus();
fireEvent.focus(dayInput);
dayInput.focus();
expect(document.activeElement).toBe(dayInput.getDOMNode());
expect(dayInput).toHaveFocus();
dayInput.simulate('keydown', getKey('ArrowRight'));
fireEvent.keyDown(dayInput, getKey('ArrowRight'));
expect(document.activeElement).toBe(monthInput.getDOMNode());
expect(monthInput).toHaveFocus();
});
it('jumps to the next field when separator key is pressed', () => {
const component = mount(<DateInput {...defaultProps} />, { attachTo: container });
const { container } = render(<DateInput {...defaultProps} />, { attachTo: container });
const customInputs = component.find('input[data-input]');
const dayInput = customInputs.at(0);
const monthInput = customInputs.at(1);
const customInputs = container.querySelectorAll('input[data-input]');
const dayInput = customInputs[0];
const monthInput = customInputs[1];
dayInput.getDOMNode().focus();
fireEvent.focus(dayInput);
dayInput.focus();
expect(document.activeElement).toBe(dayInput.getDOMNode());
expect(dayInput).toHaveFocus();
const separators = component.find('.react-date-picker__inputGroup__divider');
const separatorKey = separators.at(0).text();
dayInput.simulate('keydown', getKey(separatorKey));
const separators = container.querySelectorAll('.react-date-picker__inputGroup__divider');
const separatorKey = separators[0].textContent;
fireEvent.keyDown(dayInput, getKey(separatorKey));
expect(document.activeElement).toBe(monthInput.getDOMNode());
expect(monthInput).toHaveFocus();
});
it('does not jump to the next field when right arrow is pressed when the last input is focused', () => {
const component = mount(<DateInput {...defaultProps} />, { attachTo: container });
const { container } = render(<DateInput {...defaultProps} />, { attachTo: container });
const customInputs = component.find('input[data-input]');
const yearInput = customInputs.at(2);
const customInputs = container.querySelectorAll('input[data-input]');
const yearInput = customInputs[2];
yearInput.getDOMNode().focus();
fireEvent.focus(yearInput);
yearInput.focus();
expect(document.activeElement).toBe(yearInput.getDOMNode());
expect(yearInput).toHaveFocus();
yearInput.simulate('keydown', getKey('ArrowRight'));
fireEvent.keyDown(yearInput, getKey('ArrowRight'));
expect(document.activeElement).toBe(yearInput.getDOMNode());
expect(yearInput).toHaveFocus();
});
it('jumps to the previous field when left arrow is pressed', () => {
const component = mount(<DateInput {...defaultProps} />, { attachTo: container });
const { container } = render(<DateInput {...defaultProps} />, { attachTo: container });
const customInputs = component.find('input[data-input]');
const dayInput = customInputs.at(0);
const monthInput = customInputs.at(1);
const customInputs = container.querySelectorAll('input[data-input]');
const dayInput = customInputs[0];
const monthInput = customInputs[1];
monthInput.getDOMNode().focus();
fireEvent.focus(monthInput);
monthInput.focus();
expect(document.activeElement).toBe(monthInput.getDOMNode());
expect(monthInput).toHaveFocus();
monthInput.simulate('keydown', getKey('ArrowLeft'));
fireEvent.keyDown(monthInput, getKey('ArrowLeft'));
expect(document.activeElement).toBe(dayInput.getDOMNode());
expect(dayInput).toHaveFocus();
});
it('does not jump to the previous field when left arrow is pressed when the first input is focused', () => {
const component = mount(<DateInput {...defaultProps} />, { attachTo: container });
const { container } = render(<DateInput {...defaultProps} />, { attachTo: container });
const customInputs = component.find('input[data-input]');
const dayInput = customInputs.at(0);
const customInputs = container.querySelectorAll('input[data-input]');
const dayInput = customInputs[0];
dayInput.getDOMNode().focus();
fireEvent.focus(dayInput);
dayInput.focus();
expect(document.activeElement).toBe(dayInput.getDOMNode());
expect(dayInput).toHaveFocus();
dayInput.simulate('keydown', getKey('ArrowLeft'));
fireEvent.keyDown(dayInput, getKey('ArrowLeft'));
expect(document.activeElement).toBe(dayInput.getDOMNode());
expect(dayInput).toHaveFocus();
});
it("jumps to the next field when a value which can't be extended to another valid value is entered", () => {
const component = mount(<DateInput {...defaultProps} />, { attachTo: container });
const { container } = render(<DateInput {...defaultProps} />, { attachTo: container });
const customInputs = component.find('input[data-input]');
const dayInput = customInputs.at(0);
const monthInput = customInputs.at(1);
const customInputs = container.querySelectorAll('input[data-input]');
const dayInput = customInputs[0];
const monthInput = customInputs[1];
dayInput.getDOMNode().focus();
dayInput.getDOMNode().value = '4';
fireEvent.focus(dayInput);
dayInput.simulate('keyup', { target: dayInput.getDOMNode(), key: '4' });
dayInput.value = '4';
fireEvent.keyUp(dayInput, { key: '4' });
expect(document.activeElement).toBe(monthInput.getDOMNode());
expect(monthInput).toHaveFocus();
});
it('jumps to the next field when a value as long as the length of maximum value is entered', () => {
const component = mount(<DateInput {...defaultProps} />, { attachTo: container });
const { container } = render(<DateInput {...defaultProps} />, { attachTo: container });
const customInputs = component.find('input[data-input]');
const dayInput = customInputs.at(0);
const monthInput = customInputs.at(1);
const customInputs = container.querySelectorAll('input[data-input]');
const dayInput = customInputs[0];
const monthInput = customInputs[1];
dayInput.getDOMNode().focus();
dayInput.getDOMNode().value = '03';
fireEvent.focus(dayInput);
dayInput.simulate('keyup', { target: dayInput.getDOMNode(), key: '3' });
dayInput.value = '03';
fireEvent.keyUp(dayInput, { key: '3' });
expect(document.activeElement).toBe(monthInput.getDOMNode());
expect(monthInput).toHaveFocus();
});
it('does not jump the next field when a value which can be extended to another valid value is entered', () => {
const component = mount(<DateInput {...defaultProps} />, { attachTo: container });
const { container } = render(<DateInput {...defaultProps} />, { attachTo: container });
const customInputs = component.find('input[data-input]');
const dayInput = customInputs.at(0);
const customInputs = container.querySelectorAll('input[data-input]');
const dayInput = customInputs[0];
dayInput.getDOMNode().focus();
dayInput.getDOMNode().value = '1';
fireEvent.focus(dayInput);
dayInput.focus();
dayInput.simulate('keyup', { target: dayInput.getDOMNode(), key: '1' });
dayInput.value = '1';
fireEvent.keyUp(dayInput, { key: '1' });
expect(document.activeElement).toBe(dayInput.getDOMNode());
expect(dayInput).toHaveFocus();
});

@@ -523,9 +511,8 @@

const component = mount(<DateInput {...defaultProps} onChange={onChange} value={date} />);
const { container } = render(<DateInput {...defaultProps} onChange={onChange} value={date} />);
const customInputs = component.find('input[data-input]');
const dayInput = customInputs.at(1);
const customInputs = container.querySelectorAll('input[data-input]');
const dayInput = customInputs[1];
dayInput.getDOMNode().value = '20';
dayInput.simulate('change');
fireEvent.change(dayInput, { target: { value: '20' } });

@@ -542,9 +529,8 @@ expect(onChange).toHaveBeenCalled();

const component = mount(<DateInput {...defaultProps} onChange={onChange} value={date} />);
const { container } = render(<DateInput {...defaultProps} onChange={onChange} value={date} />);
const customInputs = component.find('input[data-input]');
const dayInput = customInputs.at(1);
const customInputs = container.querySelectorAll('input[data-input]');
const dayInput = customInputs[1];
dayInput.getDOMNode().value = '20';
dayInput.simulate('change');
fireEvent.change(dayInput, { target: { value: '20' } });

@@ -563,11 +549,10 @@ const nextDate = new Date();

const component = mount(
const { container } = render(
<DateInput {...defaultProps} format="dd.MM" onChange={onChange} value={date} />,
);
const customInputs = component.find('input[data-input]');
const dayInput = customInputs.at(0);
const customInputs = container.querySelectorAll('input[data-input]');
const dayInput = customInputs[0];
dayInput.getDOMNode().value = '20';
dayInput.simulate('change');
fireEvent.change(dayInput, { target: { value: '20' } });

@@ -584,9 +569,8 @@ const currentYear = new Date().getFullYear();

const component = mount(<DateInput {...defaultProps} onChange={onChange} value={date} />);
const { container } = render(<DateInput {...defaultProps} onChange={onChange} value={date} />);
const customInputs = component.find('input[data-input]');
const customInputs = container.querySelectorAll('input[data-input]');
customInputs.forEach((customInput) => {
customInput.getDOMNode().value = '';
customInput.simulate('change');
fireEvent.change(customInput, { target: { value: '' } });
});

@@ -602,8 +586,7 @@

const component = mount(<DateInput {...defaultProps} onChange={onChange} value={date} />);
const { container } = render(<DateInput {...defaultProps} onChange={onChange} value={date} />);
const nativeInput = component.find('input[type="date"]');
const nativeInput = container.querySelector('input[type="date"]');
nativeInput.getDOMNode().value = '2017-09-20';
nativeInput.simulate('change');
fireEvent.change(nativeInput, { target: { value: '2017-09-20' } });

@@ -618,8 +601,7 @@ expect(onChange).toHaveBeenCalled();

const component = mount(<DateInput {...defaultProps} onChange={onChange} value={date} />);
const { container } = render(<DateInput {...defaultProps} onChange={onChange} value={date} />);
const nativeInput = component.find('input[type="date"]');
const nativeInput = container.querySelector('input[type="date"]');
nativeInput.getDOMNode().value = '0019-09-20';
nativeInput.simulate('change');
fireEvent.change(nativeInput, { target: { value: '0019-09-20' } });

@@ -638,8 +620,7 @@ const nextDate = new Date();

const component = mount(<DateInput {...defaultProps} onChange={onChange} value={date} />);
const { container } = render(<DateInput {...defaultProps} onChange={onChange} value={date} />);
const nativeInput = component.find('input[type="date"]');
const nativeInput = container.querySelector('input[type="date"]');
nativeInput.getDOMNode().value = '';
nativeInput.simulate('change');
fireEvent.change(nativeInput, { target: { value: '' } });

@@ -646,0 +627,0 @@ expect(onChange).toHaveBeenCalled();

144

src/DateInput/DayInput.spec.jsx
import React from 'react';
import { mount } from 'enzyme';
import { render } from '@testing-library/react';

@@ -13,49 +13,43 @@ import DayInput from './DayInput';

it('renders an input', () => {
const component = mount(<DayInput {...defaultProps} />);
const { container } = render(<DayInput {...defaultProps} />);
const input = component.find('input');
const input = container.querySelector('input');
expect(input).toHaveLength(1);
expect(input).toBeInTheDocument();
});
it('renders "0" given showLeadingZeros if day is <10', () => {
const component = mount(<DayInput {...defaultProps} showLeadingZeros value="9" />);
const { container } = render(<DayInput {...defaultProps} showLeadingZeros value="9" />);
const input = component.find('input');
const input = container.querySelector('input');
expect(component.text()).toContain('0');
expect(input.prop('className')).toContain(`${defaultProps.className}__input--hasLeadingZero`);
expect(container).toHaveTextContent('0');
expect(input).toHaveClass(`${defaultProps.className}__input--hasLeadingZero`);
});
it('does not render "0" given showLeadingZeros if day is <10 with leading zero already', () => {
const component = mount(<DayInput {...defaultProps} showLeadingZeros value="09" />);
const { container } = render(<DayInput {...defaultProps} showLeadingZeros value="09" />);
const input = component.find('input');
const input = container.querySelector('input');
expect(component.text()).not.toContain('0');
expect(input.prop('className')).not.toContain(
`${defaultProps.className}__input--hasLeadingZero`,
);
expect(container).not.toHaveTextContent('0');
expect(input).not.toHaveClass(`${defaultProps.className}__input--hasLeadingZero`);
});
it('does not render "0" given showLeadingZeros if day is >=10', () => {
const component = mount(<DayInput {...defaultProps} showLeadingZeros value="10" />);
const { container } = render(<DayInput {...defaultProps} showLeadingZeros value="10" />);
const input = component.find('input');
const input = container.querySelector('input');
expect(component.text()).not.toContain('0');
expect(input.prop('className')).not.toContain(
`${defaultProps.className}__input--hasLeadingZero`,
);
expect(container).not.toHaveTextContent('0');
expect(input).not.toHaveClass(`${defaultProps.className}__input--hasLeadingZero`);
});
it('does not render "0" if not given showLeadingZeros', () => {
const component = mount(<DayInput {...defaultProps} value="9" />);
const { container } = render(<DayInput {...defaultProps} value="9" />);
const input = component.find('input');
const input = container.querySelector('input');
expect(component.text()).not.toContain('0');
expect(input.prop('className')).not.toContain(
`${defaultProps.className}__input--hasLeadingZero`,
);
expect(container).not.toHaveTextContent('0');
expect(input).not.toHaveClass(`${defaultProps.className}__input--hasLeadingZero`);
});

@@ -66,7 +60,7 @@

const component = mount(<DayInput {...defaultProps} ariaLabel={dayAriaLabel} />);
const { container } = render(<DayInput {...defaultProps} ariaLabel={dayAriaLabel} />);
const input = component.find('input');
const input = container.querySelector('input');
expect(input.prop('aria-label')).toBe(dayAriaLabel);
expect(input).toHaveAttribute('aria-label', dayAriaLabel);
});

@@ -77,15 +71,15 @@

const component = mount(<DayInput {...defaultProps} placeholder={dayPlaceholder} />);
const { container } = render(<DayInput {...defaultProps} placeholder={dayPlaceholder} />);
const input = component.find('input');
const input = container.querySelector('input');
expect(input.prop('placeholder')).toBe(dayPlaceholder);
expect(input).toHaveAttribute('placeholder', dayPlaceholder);
});
it('has proper name defined', () => {
const component = mount(<DayInput {...defaultProps} />);
const { container } = render(<DayInput {...defaultProps} />);
const input = component.find('input');
const input = container.querySelector('input');
expect(input.prop('name')).toBe('day');
expect(input).toHaveAttribute('name', 'day');
});

@@ -96,8 +90,8 @@

const component = mount(<DayInput {...defaultProps} className={className} />);
const { container } = render(<DayInput {...defaultProps} className={className} />);
const input = component.find('input');
const input = container.querySelector('input');
expect(input.hasClass('react-date-picker__input')).toBe(true);
expect(input.hasClass('react-date-picker__day')).toBe(true);
expect(input).toHaveClass('react-date-picker__input');
expect(input).toHaveClass('react-date-picker__day');
});

@@ -108,39 +102,39 @@

const component = mount(<DayInput {...defaultProps} value={value} />);
const { container } = render(<DayInput {...defaultProps} value={value} />);
const input = component.find('input');
const input = container.querySelector('input');
expect(input.prop('value')).toBe(value);
expect(input).toHaveValue(Number(value));
});
it('does not disable input by default', () => {
const component = mount(<DayInput {...defaultProps} />);
const { container } = render(<DayInput {...defaultProps} />);
const input = component.find('input');
const input = container.querySelector('input');
expect(input.prop('disabled')).toBeFalsy();
expect(input).not.toBeDisabled();
});
it('disables input given disabled flag', () => {
const component = mount(<DayInput {...defaultProps} disabled />);
const { container } = render(<DayInput {...defaultProps} disabled />);
const input = component.find('input');
const input = container.querySelector('input');
expect(input.prop('disabled')).toBeTruthy();
expect(input).toBeDisabled();
});
it('is not required input by default', () => {
const component = mount(<DayInput {...defaultProps} />);
const { container } = render(<DayInput {...defaultProps} />);
const input = component.find('input');
const input = container.querySelector('input');
expect(input.prop('required')).toBeFalsy();
expect(input).not.toBeRequired();
});
it('required input given required flag', () => {
const component = mount(<DayInput {...defaultProps} required />);
const { container } = render(<DayInput {...defaultProps} required />);
const input = component.find('input');
const input = container.querySelector('input');
expect(input.prop('required')).toBeTruthy();
expect(input).toBeRequired();
});

@@ -151,3 +145,3 @@

mount(<DayInput {...defaultProps} inputRef={inputRef} />);
render(<DayInput {...defaultProps} inputRef={inputRef} />);

@@ -158,28 +152,28 @@ expect(inputRef).toHaveBeenCalled();

it('has min = 1 by default', () => {
const component = mount(<DayInput {...defaultProps} />);
it('has min = "1" by default', () => {
const { container } = render(<DayInput {...defaultProps} />);
const input = component.find('input');
const input = container.querySelector('input');
expect(input.prop('min')).toBe(1);
expect(input).toHaveAttribute('min', '1');
});
it('has min = 1 given minDate in a past month', () => {
const component = mount(
it('has min = "1" given minDate in a past month', () => {
const { container } = render(
<DayInput {...defaultProps} minDate={new Date(2017, 11, 15)} month="1" year="2018" />,
);
const input = component.find('input');
const input = container.querySelector('input');
expect(input.prop('min')).toBe(1);
expect(input).toHaveAttribute('min', '1');
});
it('has min = (day in minDate) given minDate in a current month', () => {
const component = mount(
const { container } = render(
<DayInput {...defaultProps} minDate={new Date(2018, 0, 15)} month="1" year="2018" />,
);
const input = component.find('input');
const input = container.querySelector('input');
expect(input.prop('min')).toBe(15);
expect(input).toHaveAttribute('min', '15');
});

@@ -190,7 +184,7 @@

const component = mount(<DayInput {...defaultProps} month="1" year="2018" />);
const { container } = render(<DayInput {...defaultProps} month="1" year="2018" />);
const input = component.find('input');
const input = container.querySelector('input');
expect(input.prop('max')).toBe(numberOfDaysInJanuary2018);
expect(input).toHaveAttribute('max', `${numberOfDaysInJanuary2018}`);
});

@@ -201,20 +195,20 @@

const component = mount(
const { container } = render(
<DayInput {...defaultProps} maxDate={new Date(2018, 1, 15)} month="1" year="2018" />,
);
const input = component.find('input');
const input = container.querySelector('input');
expect(input.prop('max')).toBe(numberOfDaysInJanuary2018);
expect(input).toHaveAttribute('max', `${numberOfDaysInJanuary2018}`);
});
it('has max = (day in maxDate) given maxDate in a current month', () => {
const component = mount(
const { container } = render(
<DayInput {...defaultProps} maxDate={new Date(2018, 0, 15)} month="1" year="2018" />,
);
const input = component.find('input');
const input = container.querySelector('input');
expect(input.prop('max')).toBe(15);
expect(input).toHaveAttribute('max', '15');
});
});

27

src/DateInput/Input.jsx

@@ -1,5 +0,4 @@

import React from 'react';
import React, { useLayoutEffect } from 'react';
import PropTypes from 'prop-types';
import mergeClassNames from 'merge-class-names';
import mergeRefs from 'merge-refs';
import updateInputWidth, { getFontShorthand } from 'update-input-width';

@@ -26,2 +25,14 @@

function updateInputWidthOnLoad(element) {
if (document.readyState === 'complete') {
return;
}
function onLoad() {
updateInputWidth(element);
}
window.addEventListener('load', onLoad);
}
function updateInputWidthOnFontLoad(element) {

@@ -109,2 +120,12 @@ if (!document.fonts) {

}) {
useLayoutEffect(() => {
if (!inputRef || !inputRef.current) {
return;
}
updateInputWidth(inputRef.current);
updateInputWidthOnLoad(inputRef.current);
updateInputWidthOnFontLoad(inputRef.current);
}, [inputRef, value]);
const hasLeadingZero =

@@ -148,3 +169,3 @@ showLeadingZeros && value && value < 10 && (value === '0' || !value.toString().startsWith('0'));

placeholder={placeholder}
ref={mergeRefs(updateInputWidth, updateInputWidthOnFontLoad, inputRef)}
ref={inputRef}
required={required}

@@ -151,0 +172,0 @@ step={step}

148

src/DateInput/MonthInput.spec.jsx
import React from 'react';
import { mount } from 'enzyme';
import { render } from '@testing-library/react';

@@ -13,49 +13,43 @@ import MonthInput from './MonthInput';

it('renders an input', () => {
const component = mount(<MonthInput {...defaultProps} />);
const { container } = render(<MonthInput {...defaultProps} />);
const input = component.find('input');
const input = container.querySelector('input');
expect(input).toHaveLength(1);
expect(input).toBeInTheDocument();
});
it('renders "0" given showLeadingZeros if month is <10', () => {
const component = mount(<MonthInput {...defaultProps} showLeadingZeros value="9" />);
const { container } = render(<MonthInput {...defaultProps} showLeadingZeros value="9" />);
const input = component.find('input');
const input = container.querySelector('input');
expect(component.text()).toContain('0');
expect(input.prop('className')).toContain(`${defaultProps.className}__input--hasLeadingZero`);
expect(container).toHaveTextContent('0');
expect(input).toHaveClass(`${defaultProps.className}__input--hasLeadingZero`);
});
it('does not render "0" given showLeadingZeros if month is <10 with leading zero already', () => {
const component = mount(<MonthInput {...defaultProps} showLeadingZeros value="09" />);
const { container } = render(<MonthInput {...defaultProps} showLeadingZeros value="09" />);
const input = component.find('input');
const input = container.querySelector('input');
expect(component.text()).not.toContain('0');
expect(input.prop('className')).not.toContain(
`${defaultProps.className}__input--hasLeadingZero`,
);
expect(container).not.toHaveTextContent('0');
expect(input).not.toHaveClass(`${defaultProps.className}__input--hasLeadingZero`);
});
it('does not render "0" given showLeadingZeros if month is >=10', () => {
const component = mount(<MonthInput {...defaultProps} showLeadingZeros value="10" />);
const { container } = render(<MonthInput {...defaultProps} showLeadingZeros value="10" />);
const input = component.find('input');
const input = container.querySelector('input');
expect(component.text()).not.toContain('0');
expect(input.prop('className')).not.toContain(
`${defaultProps.className}__input--hasLeadingZero`,
);
expect(container).not.toHaveTextContent('0');
expect(input).not.toHaveClass(`${defaultProps.className}__input--hasLeadingZero`);
});
it('does not render "0" if not given showLeadingZeros', () => {
const component = mount(<MonthInput {...defaultProps} value="9" />);
const { container } = render(<MonthInput {...defaultProps} value="9" />);
const input = component.find('input');
const input = container.querySelector('input');
expect(component.text()).not.toContain('0');
expect(input.prop('className')).not.toContain(
`${defaultProps.className}__input--hasLeadingZero`,
);
expect(container).not.toHaveTextContent('0');
expect(input).not.toHaveClass(`${defaultProps.className}__input--hasLeadingZero`);
});

@@ -66,7 +60,7 @@

const component = mount(<MonthInput {...defaultProps} ariaLabel={monthAriaLabel} />);
const { container } = render(<MonthInput {...defaultProps} ariaLabel={monthAriaLabel} />);
const input = component.find('input');
const input = container.querySelector('input');
expect(input.prop('aria-label')).toBe(monthAriaLabel);
expect(input).toHaveAttribute('aria-label', monthAriaLabel);
});

@@ -77,15 +71,15 @@

const component = mount(<MonthInput {...defaultProps} placeholder={monthPlaceholder} />);
const { container } = render(<MonthInput {...defaultProps} placeholder={monthPlaceholder} />);
const input = component.find('input');
const input = container.querySelector('input');
expect(input.prop('placeholder')).toBe(monthPlaceholder);
expect(input).toHaveAttribute('placeholder', monthPlaceholder);
});
it('has proper name defined', () => {
const component = mount(<MonthInput {...defaultProps} />);
const { container } = render(<MonthInput {...defaultProps} />);
const input = component.find('input');
const input = container.querySelector('input');
expect(input.prop('name')).toBe('month');
expect(input).toHaveAttribute('name', 'month');
});

@@ -96,8 +90,8 @@

const component = mount(<MonthInput {...defaultProps} className={className} />);
const { container } = render(<MonthInput {...defaultProps} className={className} />);
const input = component.find('input');
const input = container.querySelector('input');
expect(input.hasClass('react-date-picker__input')).toBe(true);
expect(input.hasClass('react-date-picker__month')).toBe(true);
expect(input).toHaveClass('react-date-picker__input');
expect(input).toHaveClass('react-date-picker__month');
});

@@ -108,39 +102,39 @@

const component = mount(<MonthInput {...defaultProps} value={value} />);
const { container } = render(<MonthInput {...defaultProps} value={value} />);
const input = component.find('input');
const input = container.querySelector('input');
expect(input.prop('value')).toBe(value);
expect(input).toHaveValue(Number(value));
});
it('does not disable input by default', () => {
const component = mount(<MonthInput {...defaultProps} />);
const { container } = render(<MonthInput {...defaultProps} />);
const input = component.find('input');
const input = container.querySelector('input');
expect(input.prop('disabled')).toBeFalsy();
expect(input).not.toBeDisabled();
});
it('disables input given disabled flag', () => {
const component = mount(<MonthInput {...defaultProps} disabled />);
const { container } = render(<MonthInput {...defaultProps} disabled />);
const input = component.find('input');
const input = container.querySelector('input');
expect(input.prop('disabled')).toBeTruthy();
expect(input).toBeDisabled();
});
it('is not required input by default', () => {
const component = mount(<MonthInput {...defaultProps} />);
const { container } = render(<MonthInput {...defaultProps} />);
const input = component.find('input');
const input = container.querySelector('input');
expect(input.prop('required')).toBeFalsy();
expect(input).not.toBeRequired();
});
it('required input given required flag', () => {
const component = mount(<MonthInput {...defaultProps} required />);
const { container } = render(<MonthInput {...defaultProps} required />);
const input = component.find('input');
const input = container.querySelector('input');
expect(input.prop('required')).toBeTruthy();
expect(input).toBeRequired();
});

@@ -151,3 +145,3 @@

mount(<MonthInput {...defaultProps} inputRef={inputRef} />);
render(<MonthInput {...defaultProps} inputRef={inputRef} />);

@@ -158,57 +152,57 @@ expect(inputRef).toHaveBeenCalled();

it('has min = 1 by default', () => {
const component = mount(<MonthInput {...defaultProps} />);
it('has min = "1" by default', () => {
const { container } = render(<MonthInput {...defaultProps} />);
const input = component.find('input');
const input = container.querySelector('input');
expect(input.prop('min')).toBe(1);
expect(input).toHaveAttribute('min', '1');
});
it('has min = 1 given minDate in a past year', () => {
const component = mount(
it('has min = "1" given minDate in a past year', () => {
const { container } = render(
<MonthInput {...defaultProps} minDate={new Date(2017, 6, 1)} year="2018" />,
);
const input = component.find('input');
const input = container.querySelector('input');
expect(input.prop('min')).toBe(1);
expect(input).toHaveAttribute('min', '1');
});
it('has min = (month in minDate) given minDate in a current year', () => {
const component = mount(
const { container } = render(
<MonthInput {...defaultProps} minDate={new Date(2018, 6, 1)} year="2018" />,
);
const input = component.find('input');
const input = container.querySelector('input');
expect(input.prop('min')).toBe(7);
expect(input).toHaveAttribute('min', '7');
});
it('has max = 12 by default', () => {
const component = mount(<MonthInput {...defaultProps} year="2018" />);
it('has max = "12" by default', () => {
const { container } = render(<MonthInput {...defaultProps} year="2018" />);
const input = component.find('input');
const input = container.querySelector('input');
expect(input.prop('max')).toBe(12);
expect(input).toHaveAttribute('max', '12');
});
it('has max = 12 given maxDate in a future year', () => {
const component = mount(
it('has max = "12" given maxDate in a future year', () => {
const { container } = render(
<MonthInput {...defaultProps} maxDate={new Date(2019, 6, 1)} year="2018" />,
);
const input = component.find('input');
const input = container.querySelector('input');
expect(input.prop('max')).toBe(12);
expect(input).toHaveAttribute('max', '12');
});
it('has max = (month in maxDate) given maxDate in a current year', () => {
const component = mount(
const { container } = render(
<MonthInput {...defaultProps} maxDate={new Date(2018, 6, 1)} year="2018" />,
);
const input = component.find('input');
const input = container.querySelector('input');
expect(input.prop('max')).toBe(7);
expect(input).toHaveAttribute('max', '7');
});
});

122

src/DateInput/MonthSelect.spec.jsx
import React from 'react';
import { mount } from 'enzyme';
import { render } from '@testing-library/react';

@@ -13,8 +13,8 @@ import MonthSelect from './MonthSelect';

it('renders a select', () => {
const component = mount(<MonthSelect {...defaultProps} />);
const { container } = render(<MonthSelect {...defaultProps} />);
const select = component.find('select');
const options = select.find('option');
const select = container.querySelector('select');
expect(select).toBeInTheDocument();
expect(select).toHaveLength(1);
const options = select.querySelectorAll('option');
expect(options).toHaveLength(13); // 12 months + empty option

@@ -26,16 +26,16 @@ });

const component = mount(<MonthSelect {...defaultProps} ariaLabel={monthAriaLabel} />);
const { container } = render(<MonthSelect {...defaultProps} ariaLabel={monthAriaLabel} />);
const select = component.find('select');
const select = container.querySelector('select');
expect(select.prop('aria-label')).toBe(monthAriaLabel);
expect(select).toHaveAttribute('aria-label', monthAriaLabel);
});
it('has proper placeholder by default', () => {
const component = mount(<MonthSelect {...defaultProps} />);
const { container } = render(<MonthSelect {...defaultProps} />);
const options = component.find('option');
const firstOption = options.first();
const options = container.querySelectorAll('option');
const firstOption = options[0];
expect(firstOption.text()).toBe('--');
expect(firstOption).toHaveTextContent('--');
});

@@ -46,16 +46,16 @@

const component = mount(<MonthSelect {...defaultProps} placeholder={monthPlaceholder} />);
const { container } = render(<MonthSelect {...defaultProps} placeholder={monthPlaceholder} />);
const options = component.find('option');
const firstOption = options.first();
const options = container.querySelectorAll('option');
const firstOption = options[0];
expect(firstOption.text()).toBe(monthPlaceholder);
expect(firstOption).toHaveTextContent(monthPlaceholder);
});
it('has proper name defined', () => {
const component = mount(<MonthSelect {...defaultProps} />);
const { container } = render(<MonthSelect {...defaultProps} />);
const select = component.find('select');
const select = container.querySelector('select');
expect(select.prop('name')).toBe('month');
expect(select).toHaveAttribute('name', 'month');
});

@@ -66,8 +66,8 @@

const component = mount(<MonthSelect {...defaultProps} className={className} />);
const { container } = render(<MonthSelect {...defaultProps} className={className} />);
const select = component.find('select');
const select = container.querySelector('select');
expect(select.hasClass('react-date-picker__input')).toBe(true);
expect(select.hasClass('react-date-picker__month')).toBe(true);
expect(select).toHaveClass('react-date-picker__input');
expect(select).toHaveClass('react-date-picker__month');
});

@@ -78,39 +78,39 @@

const component = mount(<MonthSelect {...defaultProps} value={value} />);
const { container } = render(<MonthSelect {...defaultProps} value={value} />);
const select = component.find('select');
const select = container.querySelector('select');
expect(select.prop('value')).toBe(value);
expect(select).toHaveValue(value);
});
it('does not disable select by default', () => {
const component = mount(<MonthSelect {...defaultProps} />);
const { container } = render(<MonthSelect {...defaultProps} />);
const select = component.find('select');
const select = container.querySelector('select');
expect(select.prop('disabled')).toBeFalsy();
expect(select).not.toBeDisabled();
});
it('disables select given disabled flag', () => {
const component = mount(<MonthSelect {...defaultProps} disabled />);
const { container } = render(<MonthSelect {...defaultProps} disabled />);
const select = component.find('select');
const select = container.querySelector('select');
expect(select.prop('disabled')).toBeTruthy();
expect(select).toBeDisabled();
});
it('is not required select by default', () => {
const component = mount(<MonthSelect {...defaultProps} />);
const { container } = render(<MonthSelect {...defaultProps} />);
const select = component.find('select');
const select = container.querySelector('select');
expect(select.prop('required')).toBeFalsy();
expect(select).not.toBeRequired();
});
it('required select given required flag', () => {
const component = mount(<MonthSelect {...defaultProps} required />);
const { container } = render(<MonthSelect {...defaultProps} required />);
const select = component.find('select');
const select = container.querySelector('select');
expect(select.prop('required')).toBeTruthy();
expect(select).toBeRequired();
});

@@ -121,3 +121,3 @@

mount(<MonthSelect {...defaultProps} inputRef={inputRef} />);
render(<MonthSelect {...defaultProps} inputRef={inputRef} />);

@@ -129,9 +129,9 @@ expect(inputRef).toHaveBeenCalled();

it('has all options enabled by default', () => {
const component = mount(<MonthSelect {...defaultProps} />);
const { container } = render(<MonthSelect {...defaultProps} />);
const select = component.find('select');
const options = select.find('option');
const select = container.querySelector('select');
const options = select.querySelectorAll('option');
options.forEach((option) => {
expect(option.prop('disabled')).toBeFalsy();
expect(option).not.toBeDisabled();
});

@@ -141,11 +141,11 @@ });

it('has all options enabled given minDate in a past year', () => {
const component = mount(
const { container } = render(
<MonthSelect {...defaultProps} minDate={new Date(2017, 6, 1)} year="2018" />,
);
const select = component.find('select');
const options = select.find('option[value]');
const select = container.querySelector('select');
const options = select.querySelectorAll('option[value]');
options.forEach((option) => {
expect(option.prop('disabled')).toBeFalsy();
expect(option).not.toBeDisabled();
});

@@ -155,16 +155,16 @@ });

it('has first (month in minDate) options disabled given minDate in a current year', () => {
const component = mount(
const { container } = render(
<MonthSelect {...defaultProps} minDate={new Date(2018, 6, 1)} year="2018" />,
);
const select = component.find('select');
const options = select.find('option').slice(1); // Getting rid of "--" option
const select = container.querySelector('select');
const options = Array.from(select.querySelectorAll('option')).slice(1); // Getting rid of "--" option
// January - June
options.slice(0, 6).forEach((option) => {
expect(option.prop('disabled')).toBeTruthy();
expect(option).toBeDisabled();
});
// July - December
options.slice(6).forEach((option) => {
expect(option.prop('disabled')).toBeFalsy();
expect(option).not.toBeDisabled();
});

@@ -174,11 +174,11 @@ });

it('has all options enabled given maxDate in a future year', () => {
const component = mount(
const { container } = render(
<MonthSelect {...defaultProps} maxDate={new Date(2019, 6, 1)} year="2018" />,
);
const select = component.find('select');
const options = select.find('option').slice(1); // Getting rid of "--" option
const select = container.querySelector('select');
const options = Array.from(select.querySelectorAll('option')).slice(1); // Getting rid of "--" option
options.forEach((option) => {
expect(option.prop('disabled')).toBeFalsy();
expect(option).not.toBeDisabled();
});

@@ -188,18 +188,18 @@ });

it('has last (month in maxDate) options disabled given maxDate in a current year', () => {
const component = mount(
const { container } = render(
<MonthSelect {...defaultProps} maxDate={new Date(2018, 6, 1)} year="2018" />,
);
const select = component.find('select');
const options = select.find('option').slice(1); // Getting rid of "--" option
const select = container.querySelector('select');
const options = Array.from(select.querySelectorAll('option')).slice(1); // Getting rid of "--" option
// January - July
options.slice(0, 7).forEach((option) => {
expect(option.prop('disabled')).toBeFalsy();
expect(option).not.toBeDisabled();
});
// August - December
options.slice(7).forEach((option) => {
expect(option.prop('disabled')).toBeTruthy();
expect(option).toBeDisabled();
});
});
});

93

src/DateInput/NativeInput.spec.jsx
import React from 'react';
import { shallow } from 'enzyme';
import { render } from '@testing-library/react';

@@ -13,7 +13,7 @@ import NativeInput from './NativeInput';

it('renders an input', () => {
const component = shallow(<NativeInput {...defaultProps} />);
const { container } = render(<NativeInput {...defaultProps} />);
const input = component.find('input');
const input = container.querySelector('input');
expect(input).toHaveLength(1);
expect(input).toBeInTheDocument();
});

@@ -24,7 +24,9 @@

const component = shallow(<NativeInput {...defaultProps} ariaLabel={nativeInputAriaLabel} />);
const { container } = render(
<NativeInput {...defaultProps} ariaLabel={nativeInputAriaLabel} />,
);
const select = component.find('input');
const input = container.querySelector('input');
expect(select.prop('aria-label')).toBe(nativeInputAriaLabel);
expect(input).toHaveAttribute('aria-label', nativeInputAriaLabel);
});

@@ -35,7 +37,7 @@

const component = shallow(<NativeInput {...defaultProps} name={name} />);
const { container } = render(<NativeInput {...defaultProps} name={name} />);
const input = component.find('input');
const input = container.querySelector('input');
expect(input.prop('name')).toBe(name);
expect(input).toHaveAttribute('name', name);
});

@@ -47,55 +49,54 @@

${'month'} | ${'2019-06'}
${'year'} | ${'2019'}
${'decade'} | ${'2019'}
${'year'} | ${2019}
${'decade'} | ${2019}
`('displays given value properly if valueType is $valueType', ({ valueType, parsedValue }) => {
const value = new Date(2019, 5, 1);
const component = shallow(
const { container } = render(
<NativeInput {...defaultProps} value={value} valueType={valueType} />,
);
const input = component.find('input');
const input = container.querySelector('input');
expect(input.prop('value').toString()).toBe(parsedValue);
expect(input).toHaveValue(parsedValue);
});
/* eslint-enable indent */
it('does not disable input by default', () => {
const component = shallow(<NativeInput {...defaultProps} />);
const { container } = render(<NativeInput {...defaultProps} />);
const input = component.find('input');
const input = container.querySelector('input');
expect(input.prop('disabled')).toBeFalsy();
expect(input).not.toBeDisabled();
});
it('disables input given disabled flag', () => {
const component = shallow(<NativeInput {...defaultProps} disabled />);
const { container } = render(<NativeInput {...defaultProps} disabled />);
const input = component.find('input');
const input = container.querySelector('input');
expect(input.prop('disabled')).toBeTruthy();
expect(input).toBeDisabled();
});
it('is not required input by default', () => {
const component = shallow(<NativeInput {...defaultProps} />);
const { container } = render(<NativeInput {...defaultProps} />);
const input = component.find('input');
const input = container.querySelector('input');
expect(input.prop('required')).toBeFalsy();
expect(input).not.toBeRequired();
});
it('required input given required flag', () => {
const component = shallow(<NativeInput {...defaultProps} required />);
const { container } = render(<NativeInput {...defaultProps} required />);
const input = component.find('input');
const input = container.querySelector('input');
expect(input.prop('required')).toBeTruthy();
expect(input).toBeRequired();
});
it('has no min by default', () => {
const component = shallow(<NativeInput {...defaultProps} />);
const { container } = render(<NativeInput {...defaultProps} />);
const input = component.find('input');
const input = container.querySelector('input');
expect(input.prop('min')).toBeFalsy();
expect(input).not.toHaveAttribute('min');
});

@@ -112,9 +113,9 @@

({ valueType, parsedMin }) => {
const component = shallow(
const { container } = render(
<NativeInput {...defaultProps} minDate={new Date(2019, 0, 1)} valueType={valueType} />,
);
const input = component.find('input');
const input = container.querySelector('input');
expect(input.prop('min').toString()).toBe(parsedMin);
expect(input).toHaveAttribute('min', parsedMin);
},

@@ -132,9 +133,9 @@ );

({ valueType, parsedMin }) => {
const component = shallow(
const { container } = render(
<NativeInput {...defaultProps} minDate={new Date(2019, 5, 1)} valueType={valueType} />,
);
const input = component.find('input');
const input = container.querySelector('input');
expect(input.prop('min').toString()).toBe(parsedMin);
expect(input).toHaveAttribute('min', parsedMin);
},

@@ -144,7 +145,7 @@ );

it('has no max by default', () => {
const component = shallow(<NativeInput {...defaultProps} />);
const { container } = render(<NativeInput {...defaultProps} />);
const input = component.find('input');
const input = container.querySelector('input');
expect(input.prop('max')).toBeFalsy();
expect(input).not.toHaveAttribute('max');
});

@@ -161,9 +162,9 @@

({ valueType, parsedMax }) => {
const component = shallow(
const { container } = render(
<NativeInput {...defaultProps} maxDate={new Date(2020, 0, 1)} valueType={valueType} />,
);
const input = component.find('input');
const input = container.querySelector('input');
expect(input.prop('max').toString()).toBe(parsedMax);
expect(input).toHaveAttribute('max', parsedMax);
},

@@ -181,11 +182,11 @@ );

({ valueType, parsedMax }) => {
const component = shallow(
const { container } = render(
<NativeInput {...defaultProps} maxDate={new Date(2020, 5, 1)} valueType={valueType} />,
);
const input = component.find('input');
const input = container.querySelector('input');
expect(input.prop('max').toString()).toBe(parsedMax);
expect(input).toHaveAttribute('max', parsedMax);
},
);
});

94

src/DateInput/YearInput.spec.jsx
import React from 'react';
import { mount } from 'enzyme';
import { render } from '@testing-library/react';

@@ -13,7 +13,7 @@ import YearInput from './YearInput';

it('renders an input', () => {
const component = mount(<YearInput {...defaultProps} />);
const { container } = render(<YearInput {...defaultProps} />);
const input = component.find('input');
const input = container.querySelector('input');
expect(input).toHaveLength(1);
expect(input).toBeInTheDocument();
});

@@ -24,7 +24,7 @@

const component = mount(<YearInput {...defaultProps} ariaLabel={yearAriaLabel} />);
const { container } = render(<YearInput {...defaultProps} ariaLabel={yearAriaLabel} />);
const input = component.find('input');
const input = container.querySelector('input');
expect(input.prop('aria-label')).toBe(yearAriaLabel);
expect(input).toHaveAttribute('aria-label', yearAriaLabel);
});

@@ -35,15 +35,15 @@

const component = mount(<YearInput {...defaultProps} placeholder={yearPlaceholder} />);
const { container } = render(<YearInput {...defaultProps} placeholder={yearPlaceholder} />);
const input = component.find('input');
const input = container.querySelector('input');
expect(input.prop('placeholder')).toBe(yearPlaceholder);
expect(input).toHaveAttribute('placeholder', yearPlaceholder);
});
it('has proper name defined', () => {
const component = mount(<YearInput {...defaultProps} />);
const { container } = render(<YearInput {...defaultProps} />);
const input = component.find('input');
const input = container.querySelector('input');
expect(input.prop('name')).toBe('year');
expect(input).toHaveAttribute('name', 'year');
});

@@ -54,8 +54,8 @@

const component = mount(<YearInput {...defaultProps} className={className} />);
const { container } = render(<YearInput {...defaultProps} className={className} />);
const input = component.find('input');
const input = container.querySelector('input');
expect(input.hasClass('react-date-picker__input')).toBe(true);
expect(input.hasClass('react-date-picker__year')).toBe(true);
expect(input).toHaveClass('react-date-picker__input');
expect(input).toHaveClass('react-date-picker__year');
});

@@ -66,39 +66,39 @@

const component = mount(<YearInput {...defaultProps} value={value} />);
const { container } = render(<YearInput {...defaultProps} value={value} />);
const input = component.find('input');
const input = container.querySelector('input');
expect(input.prop('value')).toBe(value);
expect(input).toHaveValue(Number(value));
});
it('does not disable input by default', () => {
const component = mount(<YearInput {...defaultProps} />);
const { container } = render(<YearInput {...defaultProps} />);
const input = component.find('input');
const input = container.querySelector('input');
expect(input.prop('disabled')).toBeFalsy();
expect(input).not.toBeDisabled();
});
it('disables input given disabled flag', () => {
const component = mount(<YearInput {...defaultProps} disabled />);
const { container } = render(<YearInput {...defaultProps} disabled />);
const input = component.find('input');
const input = container.querySelector('input');
expect(input.prop('disabled')).toBeTruthy();
expect(input).toBeDisabled();
});
it('is not required input by default', () => {
const component = mount(<YearInput {...defaultProps} />);
const { container } = render(<YearInput {...defaultProps} />);
const input = component.find('input');
const input = container.querySelector('input');
expect(input.prop('required')).toBeFalsy();
expect(input).not.toBeRequired();
});
it('required input given required flag', () => {
const component = mount(<YearInput {...defaultProps} required />);
const { container } = render(<YearInput {...defaultProps} required />);
const input = component.find('input');
const input = container.querySelector('input');
expect(input.prop('required')).toBeTruthy();
expect(input).toBeRequired();
});

@@ -109,3 +109,3 @@

mount(<YearInput {...defaultProps} inputRef={inputRef} />);
render(<YearInput {...defaultProps} inputRef={inputRef} />);

@@ -116,33 +116,33 @@ expect(inputRef).toHaveBeenCalled();

it('has min = 1 by default', () => {
const component = mount(<YearInput {...defaultProps} />);
it('has min = "1" by default', () => {
const { container } = render(<YearInput {...defaultProps} />);
const input = component.find('input');
const input = container.querySelector('input');
expect(input.prop('min')).toBe(1);
expect(input).toHaveAttribute('min', '1');
});
it('has min = (year in minDate) given minDate', () => {
const component = mount(<YearInput {...defaultProps} minDate={new Date(2018, 6, 1)} />);
const { container } = render(<YearInput {...defaultProps} minDate={new Date(2018, 6, 1)} />);
const input = component.find('input');
const input = container.querySelector('input');
expect(input.prop('min')).toBe(2018);
expect(input).toHaveAttribute('min', '2018');
});
it('has max = 275760 by default', () => {
const component = mount(<YearInput {...defaultProps} />);
it('has max = "275760" by default', () => {
const { container } = render(<YearInput {...defaultProps} />);
const input = component.find('input');
const input = container.querySelector('input');
expect(input.prop('max')).toBe(275760);
expect(input).toHaveAttribute('max', '275760');
});
it('has max = (year in maxDate) given maxDate', () => {
const component = mount(<YearInput {...defaultProps} maxDate={new Date(2018, 6, 1)} />);
const { container } = render(<YearInput {...defaultProps} maxDate={new Date(2018, 6, 1)} />);
const input = component.find('input');
const input = container.querySelector('input');
expect(input.prop('max')).toBe(2018);
expect(input).toHaveAttribute('max', '2018');
});
});

57

src/DatePicker.jsx

@@ -1,2 +0,3 @@

import React, { PureComponent } from 'react';
import React, { createRef, PureComponent } from 'react';
import { createPortal } from 'react-dom';
import PropTypes from 'prop-types';

@@ -30,2 +31,6 @@ import makeEventProps from 'make-event-props';

wrapper = createRef();
calendarWrapper = createRef();
componentDidMount() {

@@ -55,5 +60,12 @@ this.handleOutsideActionListeners();

onOutsideAction = (event) => {
const { wrapper, calendarWrapper } = this;
// Try event.composedPath first to handle clicks inside a Shadow DOM.
const target = 'composedPath' in event ? event.composedPath()[0] : event.target;
if (this.wrapper && !this.wrapper.contains(target)) {
if (
wrapper.current &&
!wrapper.current.contains(target) &&
(!calendarWrapper.current || !calendarWrapper.current.contains(target))
) {
this.closeCalendar();

@@ -88,3 +100,3 @@ }

if (openCalendarOnFocus) {
if (event.target.getAttribute('data-select') === 'true') {
if (event.target.dataset.select === 'true') {
return;

@@ -241,2 +253,3 @@ }

onChange,
portalContainer,
value,

@@ -247,4 +260,21 @@ ...calendarProps

const className = `${baseClassName}__calendar`;
const classNames = mergeClassNames(className, `${className}--${isOpen ? 'open' : 'closed'}`);
return (
const calendar = (
<Calendar
className={calendarClassName}
onChange={(value) => this.onChange(value)}
value={value || null}
{...calendarProps}
/>
);
return portalContainer ? (
createPortal(
<div ref={this.calendarWrapper} className={classNames}>
{calendar}
</div>,
portalContainer,
)
) : (
<Fit>

@@ -257,11 +287,5 @@ <div

}}
className={mergeClassNames(className, `${className}--${isOpen ? 'open' : 'closed'}`)}
style={isOpen ? undefined : {}}
className={classNames}
>
<Calendar
className={calendarClassName}
onChange={this.onChange}
value={value || null}
{...calendarProps}
/>
{calendar}
</div>

@@ -289,9 +313,3 @@ </Fit>

onFocus={this.onFocus}
ref={(ref) => {
if (!ref) {
return;
}
this.wrapper = ref;
}}
ref={this.wrapper}
>

@@ -374,2 +392,3 @@ {this.renderInputs()}

openCalendarOnFocus: PropTypes.bool,
portalContainer: PropTypes.object,
required: PropTypes.bool,

@@ -376,0 +395,0 @@ returnValue: PropTypes.oneOf(['start', 'end', 'range']),

315

src/DatePicker.spec.jsx

@@ -1,3 +0,3 @@

import React from 'react';
import { mount } from 'enzyme';
import React, { createRef } from 'react';
import { fireEvent, render, waitForElementToBeRemoved } from '@testing-library/react';

@@ -8,7 +8,7 @@ import DatePicker from './DatePicker';

it('passes default name to DateInput', () => {
const component = mount(<DatePicker />);
const { container } = render(<DatePicker />);
const dateInput = component.find('DateInput');
const nativeInput = container.querySelector('input[type="date"]');
expect(dateInput.prop('name')).toBe('date');
expect(nativeInput).toHaveAttribute('name', 'date');
});

@@ -19,34 +19,34 @@

const component = mount(<DatePicker name={name} />);
const { container } = render(<DatePicker name={name} value={new Date(2020, 10, 11)} />);
const dateInput = component.find('DateInput');
const nativeInput = container.querySelector('input[type="date"]');
expect(dateInput.prop('name')).toBe(name);
expect(nativeInput).toHaveAttribute('name', name);
});
it('passes autoFocus flag to DateInput', () => {
// See https://github.com/jsdom/jsdom/issues/3041
it.skip('passes autoFocus flag to DateInput', () => {
// eslint-disable-next-line jsx-a11y/no-autofocus
const component = mount(<DatePicker autoFocus />);
const { container } = render(<DatePicker autoFocus />);
const dateInput = component.find('DateInput');
const customInputs = container.querySelectorAll('input[data-input]');
expect(dateInput.prop('autoFocus')).toBeTruthy();
expect(customInputs[0]).toHaveAttribute('autoFocus');
});
it('passes disabled flag to DateInput', () => {
const component = mount(<DatePicker disabled />);
const { container } = render(<DatePicker disabled />);
const dateInput = component.find('DateInput');
const nativeInput = container.querySelector('input[type="date"]');
expect(dateInput.prop('disabled')).toBeTruthy();
expect(nativeInput).toBeDisabled();
});
it('passes format to DateInput', () => {
const format = 'y-MM-dd';
const { container } = render(<DatePicker format="yyyy" />);
const component = mount(<DatePicker format={format} />);
const customInputs = container.querySelectorAll('input[data-input]');
const dateInput = component.find('DateInput');
expect(dateInput.prop('format')).toBe(format);
expect(customInputs).toHaveLength(1);
expect(customInputs[0]).toHaveAttribute('name', 'year');
});

@@ -64,14 +64,19 @@

const component = mount(<DatePicker {...ariaLabelProps} />);
const { container } = render(<DatePicker {...ariaLabelProps} />);
const calendarButton = component.find('button.react-date-picker__calendar-button');
const clearButton = component.find('button.react-date-picker__clear-button');
const dateInput = component.find('DateInput');
const calendarButton = container.querySelector('button.react-date-picker__calendar-button');
const clearButton = container.querySelector('button.react-date-picker__clear-button');
expect(calendarButton.prop('aria-label')).toBe(ariaLabelProps.calendarAriaLabel);
expect(clearButton.prop('aria-label')).toBe(ariaLabelProps.clearAriaLabel);
expect(dateInput.prop('dayAriaLabel')).toBe(ariaLabelProps.dayAriaLabel);
expect(dateInput.prop('monthAriaLabel')).toBe(ariaLabelProps.monthAriaLabel);
expect(dateInput.prop('nativeInputAriaLabel')).toBe(ariaLabelProps.nativeInputAriaLabel);
expect(dateInput.prop('yearAriaLabel')).toBe(ariaLabelProps.yearAriaLabel);
const nativeInput = container.querySelector('input[type="date"]');
const dayInput = container.querySelector('input[name="day"]');
const monthInput = container.querySelector('input[name="month"]');
const yearInput = container.querySelector('input[name="year"]');
expect(calendarButton).toHaveAttribute('aria-label', ariaLabelProps.calendarAriaLabel);
expect(clearButton).toHaveAttribute('aria-label', ariaLabelProps.clearAriaLabel);
expect(nativeInput).toHaveAttribute('aria-label', ariaLabelProps.nativeInputAriaLabel);
expect(dayInput).toHaveAttribute('aria-label', ariaLabelProps.dayAriaLabel);
expect(monthInput).toHaveAttribute('aria-label', ariaLabelProps.monthAriaLabel);
expect(yearInput).toHaveAttribute('aria-label', ariaLabelProps.yearAriaLabel);
});

@@ -86,9 +91,11 @@

const component = mount(<DatePicker {...placeholderProps} />);
const { container } = render(<DatePicker {...placeholderProps} />);
const dateInput = component.find('DateInput');
const dayInput = container.querySelector('input[name="day"]');
const monthInput = container.querySelector('input[name="month"]');
const yearInput = container.querySelector('input[name="year"]');
expect(dateInput.prop('dayPlaceholder')).toBe(placeholderProps.dayPlaceholder);
expect(dateInput.prop('monthPlaceholder')).toBe(placeholderProps.monthPlaceholder);
expect(dateInput.prop('yearPlaceholder')).toBe(placeholderProps.yearPlaceholder);
expect(dayInput).toHaveAttribute('placeholder', 'dd');
expect(monthInput).toHaveAttribute('placeholder', 'mm');
expect(yearInput).toHaveAttribute('placeholder', 'yyyy');
});

@@ -100,7 +107,7 @@

const component = mount(<DatePicker value={value} />);
const { container } = render(<DatePicker value={value} />);
const dateInput = component.find('DateInput');
const nativeInput = container.querySelector('input[type="date"]');
expect(dateInput.prop('value')).toBe(value);
expect(nativeInput).toHaveValue('2019-01-01');
});

@@ -112,7 +119,7 @@

const component = mount(<DatePicker value={[value1, value2]} />);
const { container } = render(<DatePicker value={[value1, value2]} />);
const dateInput = component.find('DateInput');
const nativeInput = container.querySelector('input[type="date"]');
expect(dateInput.prop('value')).toBe(value1);
expect(nativeInput).toHaveValue('2019-01-01');
});

@@ -124,7 +131,7 @@ });

const component = mount(<DatePicker className={className} />);
const { container } = render(<DatePicker className={className} />);
const wrapperClassName = component.prop('className');
const wrapper = container.firstChild;
expect(wrapperClassName.includes(className)).toBe(true);
expect(wrapper).toHaveClass(className);
});

@@ -135,83 +142,76 @@

const component = mount(<DatePicker calendarClassName={calendarClassName} isOpen />);
const { container } = render(<DatePicker calendarClassName={calendarClassName} isOpen />);
const calendar = component.find('Calendar');
const calendarWrapperClassName = calendar.prop('className');
const calendar = container.querySelector('.react-calendar');
expect(calendarWrapperClassName.includes(calendarClassName)).toBe(true);
expect(calendar).toHaveClass(calendarClassName);
});
it('renders DateInput component', () => {
const component = mount(<DatePicker />);
const { container } = render(<DatePicker />);
const dateInput = component.find('DateInput');
const nativeInput = container.querySelector('input[type="date"]');
expect(dateInput).toHaveLength(1);
expect(nativeInput).toBeInTheDocument();
});
it('renders clear button', () => {
const component = mount(<DatePicker />);
const { container } = render(<DatePicker />);
const clearButton = component.find('button.react-date-picker__clear-button');
const clearButton = container.querySelector('button.react-date-picker__clear-button');
expect(clearButton).toHaveLength(1);
expect(clearButton).toBeInTheDocument();
});
it('renders calendar button', () => {
const component = mount(<DatePicker />);
const { container } = render(<DatePicker />);
const calendarButton = component.find('button.react-date-picker__calendar-button');
const calendarButton = container.querySelector('button.react-date-picker__calendar-button');
expect(calendarButton).toHaveLength(1);
expect(calendarButton).toBeInTheDocument();
});
it('renders DateInput and Calendar components when given isOpen flag', () => {
const component = mount(<DatePicker isOpen />);
it('renders Calendar component when given isOpen flag', () => {
const { container } = render(<DatePicker isOpen />);
const dateInput = component.find('DateInput');
const calendar = component.find('Calendar');
const calendar = container.querySelector('.react-calendar');
expect(dateInput).toHaveLength(1);
expect(calendar).toHaveLength(1);
expect(calendar).toBeInTheDocument();
});
it('does not render Calendar component when given disableCalendar & isOpen flags', () => {
const component = mount(<DatePicker disableCalendar isOpen />);
const { container } = render(<DatePicker disableCalendar isOpen />);
const dateInput = component.find('DateInput');
const calendar = component.find('Calendar');
const calendar = container.querySelector('.react-calendar');
expect(dateInput).toHaveLength(1);
expect(calendar).toHaveLength(0);
expect(calendar).toBeFalsy();
});
it('opens Calendar component when given isOpen flag by changing props', () => {
const component = mount(<DatePicker />);
const { container, rerender } = render(<DatePicker />);
const calendar = component.find('Calendar');
const calendar = container.querySelector('.react-calendar');
expect(calendar).toHaveLength(0);
expect(calendar).toBeFalsy();
component.setProps({ isOpen: true });
component.update();
rerender(<DatePicker isOpen />);
const calendar2 = component.find('Calendar');
const calendar2 = container.querySelector('.react-calendar');
expect(calendar2).toHaveLength(1);
expect(calendar2).toBeInTheDocument();
});
it('opens Calendar component when clicking on a button', () => {
const component = mount(<DatePicker />);
const { container } = render(<DatePicker />);
const calendar = component.find('Calendar');
const button = component.find('button.react-date-picker__calendar-button');
const calendar = container.querySelector('.react-calendar');
expect(calendar).toHaveLength(0);
expect(calendar).toBeFalsy();
button.simulate('click');
component.update();
const button = container.querySelector('button.react-date-picker__calendar-button');
fireEvent.click(button);
const calendar2 = component.find('Calendar');
const calendar2 = container.querySelector('.react-calendar');
expect(calendar2).toHaveLength(1);
expect(calendar2).toBeInTheDocument();
});

@@ -221,63 +221,59 @@

it('opens Calendar component when focusing on an input inside by default', () => {
const component = mount(<DatePicker />);
const { container } = render(<DatePicker />);
const calendar = component.find('Calendar');
const input = component.find('input[name="day"]');
const calendar = container.querySelector('.react-calendar');
expect(calendar).toHaveLength(0);
expect(calendar).toBeFalsy();
input.simulate('focus');
component.update();
const input = container.querySelector('input[name="day"]');
fireEvent.focus(input);
const calendar2 = component.find('Calendar');
const calendar2 = container.querySelector('.react-calendar');
expect(calendar2).toHaveLength(1);
expect(calendar2).toBeInTheDocument();
});
it('opens Calendar component when focusing on an input inside given openCalendarOnFocus = true', () => {
const component = mount(<DatePicker openCalendarOnFocus />);
const { container } = render(<DatePicker openCalendarOnFocus />);
const calendar = component.find('Calendar');
const input = component.find('input[name="day"]');
const calendar = container.querySelector('.react-calendar');
expect(calendar).toHaveLength(0);
expect(calendar).toBeFalsy();
input.simulate('focus');
component.update();
const input = container.querySelector('input[name="day"]');
fireEvent.focus(input);
const calendar2 = component.find('Calendar');
const calendar2 = container.querySelector('.react-calendar');
expect(calendar2).toHaveLength(1);
expect(calendar2).toBeInTheDocument();
});
it('does not open Calendar component when focusing on an input inside given openCalendarOnFocus = false', () => {
const component = mount(<DatePicker openCalendarOnFocus={false} />);
const { container } = render(<DatePicker openCalendarOnFocus={false} />);
const calendar = component.find('Calendar');
const input = component.find('input[name="day"]');
const calendar = container.querySelector('.react-calendar');
expect(calendar).toHaveLength(0);
expect(calendar).toBeFalsy();
input.simulate('focus');
component.update();
const input = container.querySelector('input[name="day"]');
fireEvent.focus(input);
const calendar2 = component.find('Calendar');
const calendar2 = container.querySelector('.react-calendar');
expect(calendar2).toHaveLength(0);
expect(calendar2).toBeFalsy();
});
it('does not open Calendar component when focusing on a select element', () => {
const component = mount(<DatePicker format="dd.MMMM.yyyy" />);
const { container } = render(<DatePicker format="dd.MMMM.yyyy" />);
const calendar = component.find('Calendar');
const select = component.find('select[name="month"]');
const calendar = container.querySelector('.react-calendar');
expect(calendar).toHaveLength(0);
expect(calendar).toBeFalsy();
select.simulate('focus');
component.update();
const select = container.querySelector('select[name="month"]');
fireEvent.focus(select);
const calendar2 = component.find('Calendar');
const calendar2 = container.querySelector('.react-calendar');
expect(calendar2).toHaveLength(0);
expect(calendar2).toBeFalsy();
});

@@ -290,10 +286,7 @@ });

const component = mount(<DatePicker isOpen />, { attachTo: root });
const { container } = render(<DatePicker isOpen />, { attachTo: root });
const event = document.createEvent('MouseEvent');
event.initEvent('mousedown', true, true);
document.body.dispatchEvent(event);
component.update();
fireEvent.click(document.body);
expect(component.state('isOpen')).toBe(false);
waitForElementToBeRemoved(() => container.querySelector('.react-calendar'));
});

@@ -305,10 +298,7 @@

const component = mount(<DatePicker isOpen />, { attachTo: root });
const { container } = render(<DatePicker isOpen />, { attachTo: root });
const event = document.createEvent('FocusEvent');
event.initEvent('focusin', true, true);
document.body.dispatchEvent(event);
component.update();
fireEvent.focus(document.body);
expect(component.state('isOpen')).toBe(false);
waitForElementToBeRemoved(() => container.querySelector('.react-calendar'));
});

@@ -320,63 +310,72 @@

const component = mount(<DatePicker isOpen />, { attachTo: root });
const { container } = render(<DatePicker isOpen />, { attachTo: root });
const event = document.createEvent('TouchEvent');
event.initEvent('touchstart', true, true);
document.body.dispatchEvent(event);
component.update();
fireEvent.touchStart(document.body);
expect(component.state('isOpen')).toBe(false);
waitForElementToBeRemoved(() => container.querySelector('.react-calendar'));
});
it('does not close Calendar component when focused inside', () => {
const component = mount(<DatePicker isOpen />);
const { container } = render(<DatePicker isOpen />);
const customInputs = component.find('input[data-input]');
const dayInput = customInputs.at(0);
const monthInput = customInputs.at(1);
const customInputs = container.querySelectorAll('input[data-input]');
const dayInput = customInputs[0];
const monthInput = customInputs[1];
dayInput.simulate('blur');
monthInput.simulate('focus');
component.update();
fireEvent.blur(dayInput);
fireEvent.focus(monthInput);
expect(component.state('isOpen')).toBe(true);
const calendar = container.querySelector('.react-calendar');
expect(calendar).toBeInTheDocument();
});
it('closes Calendar when calling internal onChange by default', () => {
const component = mount(<DatePicker isOpen />);
const instance = createRef();
const { onChange } = component.instance();
const { container } = render(<DatePicker isOpen ref={instance} />);
const { onChange } = instance.current;
onChange(new Date());
expect(component.state('isOpen')).toBe(false);
waitForElementToBeRemoved(() => container.querySelector('.react-calendar'));
});
it('does not close Calendar when calling internal onChange with prop closeCalendar = false', () => {
const component = mount(<DatePicker closeCalendar={false} isOpen />);
const instance = createRef();
const { onChange } = component.instance();
const { container } = render(<DatePicker closeCalendar={false} isOpen ref={instance} />);
const { onChange } = instance.current;
onChange(new Date());
expect(component.state('isOpen')).toBe(true);
const calendar = container.querySelector('.react-calendar');
expect(calendar).toBeInTheDocument();
});
it('does not close Calendar when calling internal onChange with closeCalendar = false', () => {
const component = mount(<DatePicker isOpen />);
const instance = createRef();
const { onChange } = component.instance();
const { container } = render(<DatePicker isOpen ref={instance} />);
const { onChange } = instance.current;
onChange(new Date(), false);
expect(component.state('isOpen')).toBe(true);
const calendar = container.querySelector('.react-calendar');
expect(calendar).toBeInTheDocument();
});
it('calls onChange callback when calling internal onChange', () => {
const instance = createRef();
const nextValue = new Date(2019, 0, 1);
const onChange = jest.fn();
const component = mount(<DatePicker onChange={onChange} />);
render(<DatePicker onChange={onChange} ref={instance} />);
const { onChange: onChangeInternal } = component.instance();
const { onChange: onChangeInternal } = instance.current;

@@ -391,14 +390,14 @@ onChangeInternal(nextValue);

const component = mount(<DatePicker onChange={onChange} />);
const { container } = render(<DatePicker onChange={onChange} />);
const calendar = component.find('Calendar');
const button = component.find('button.react-date-picker__clear-button');
const calendar = container.querySelector('.react-calendar');
expect(calendar).toHaveLength(0);
expect(calendar).toBeFalsy();
button.simulate('click');
component.update();
const button = container.querySelector('button.react-date-picker__clear-button');
fireEvent.click(button);
expect(onChange).toHaveBeenCalledWith(null);
});
});
dist/DatePicker.css

Sorry, the diff of this file is not supported yet

dist/DatePicker.less

Sorry, the diff of this file is not supported yet

LICENSE

Sorry, the diff of this file is not supported yet

src/DatePicker.less

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc