Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@wojtekmaj/react-daterange-picker
Advanced tools
@wojtekmaj/react-daterange-picker - npm Package Compare versions
Comparing version 3.4.0 to 4.0.0
@@ -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); } | ||
@@ -68,3 +70,3 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; } | ||
| 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); } | ||
@@ -79,3 +81,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); } | ||
@@ -106,7 +108,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(); | ||
@@ -165,3 +175,3 @@ } | ||
| if (openCalendarOnFocus) { | ||
| if (event.target.getAttribute('data-select') === 'true') { | ||
| if (event.target.dataset.select === 'true') { | ||
| return; | ||
@@ -355,2 +365,4 @@ } | ||
| value: function renderCalendar() { | ||
| var _this3 = this; | ||
| var disableCalendar = this.props.disableCalendar; | ||
@@ -367,2 +379,3 @@ var isOpen = this.state.isOpen; | ||
| onChange = _this$props4.onChange, | ||
| portalContainer = _this$props4.portalContainer, | ||
| value = _this$props4.value, | ||
@@ -372,3 +385,17 @@ 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); | ||
| }, | ||
| selectRange: true, | ||
| 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) { | ||
@@ -379,9 +406,4 @@ if (_ref && !isOpen) { | ||
| }, | ||
| className: (0, _mergeClassNames["default"])(className, "".concat(className, "--").concat(isOpen ? 'open' : 'closed')) | ||
| }, /*#__PURE__*/_react["default"].createElement(_reactCalendar["default"], _extends({ | ||
| className: calendarClassName, | ||
| onChange: this.onChange, | ||
| selectRange: true, | ||
| value: value || null | ||
| }, calendarProps)))); | ||
| className: classNames | ||
| }, calendar)); | ||
| } | ||
@@ -391,4 +413,2 @@ }, { | ||
| value: function render() { | ||
| var _this3 = this; | ||
| var eventProps = this.eventProps; | ||
@@ -407,9 +427,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()); | ||
@@ -518,2 +532,3 @@ } | ||
| openCalendarOnFocus: _propTypes["default"].bool, | ||
| portalContainer: _propTypes["default"].object, | ||
| rangeDivider: _propTypes["default"].node, | ||
@@ -520,0 +535,0 @@ required: _propTypes["default"].bool, |
| { | ||
| "name": "@wojtekmaj/react-daterange-picker", | ||
| "version": "3.4.0", | ||
| "version": "4.0.0", | ||
| "description": "A date range picker for your React app.", | ||
@@ -36,4 +36,4 @@ "main": "dist/entry.js", | ||
| "prop-types": "^15.6.0", | ||
| "react-calendar": "^3.3.1", | ||
| "react-date-picker": "^8.4.0", | ||
| "react-calendar": "^3.7.0", | ||
| "react-date-picker": "^9.0.0", | ||
| "react-fit": "^1.4.0" | ||
@@ -46,8 +46,9 @@ }, | ||
| "@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", | ||
@@ -61,4 +62,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" | ||
| }, | ||
@@ -65,0 +66,0 @@ "resolutions": { |
@@ -73,2 +73,6 @@ [](https://www.npmjs.com/package/@wojtekmaj/react-daterange-picker)  [](https://github.com/wojtekmaj/react-daterange-picker/actions)   [](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')` | | ||
| | rangeDivider | Divider between date inputs. | `"–"` | `" to "` | | ||
@@ -113,0 +118,0 @@ | required | Whether date input should be required. | `false` | `true` | |
@@ -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(); | ||
@@ -100,3 +112,3 @@ } | ||
| if (openCalendarOnFocus) { | ||
| if (event.target.getAttribute('data-select') === 'true') { | ||
| if (event.target.dataset.select === 'true') { | ||
| return; | ||
@@ -265,2 +277,3 @@ } | ||
| onChange, | ||
| portalContainer, | ||
| value, | ||
@@ -271,4 +284,22 @@ ...calendarProps | ||
| const className = `${baseClassName}__calendar`; | ||
| const classNames = mergeClassNames(className, `${className}--${isOpen ? 'open' : 'closed'}`); | ||
| return ( | ||
| const calendar = ( | ||
| <Calendar | ||
| className={calendarClassName} | ||
| onChange={(value) => this.onChange(value)} | ||
| selectRange | ||
| value={value || null} | ||
| {...calendarProps} | ||
| /> | ||
| ); | ||
| return portalContainer ? ( | ||
| createPortal( | ||
| <div ref={this.calendarWrapper} className={classNames}> | ||
| {calendar} | ||
| </div>, | ||
| portalContainer, | ||
| ) | ||
| ) : ( | ||
| <Fit> | ||
@@ -281,11 +312,5 @@ <div | ||
| }} | ||
| className={mergeClassNames(className, `${className}--${isOpen ? 'open' : 'closed'}`)} | ||
| className={classNames} | ||
| > | ||
| <Calendar | ||
| className={calendarClassName} | ||
| onChange={this.onChange} | ||
| selectRange | ||
| value={value || null} | ||
| {...calendarProps} | ||
| /> | ||
| {calendar} | ||
| </div> | ||
@@ -313,9 +338,3 @@ </Fit> | ||
| onFocus={this.onFocus} | ||
| ref={(ref) => { | ||
| if (!ref) { | ||
| return; | ||
| } | ||
| this.wrapper = ref; | ||
| }} | ||
| ref={this.wrapper} | ||
| > | ||
@@ -399,2 +418,3 @@ {this.renderInputs()} | ||
| openCalendarOnFocus: PropTypes.bool, | ||
| portalContainer: PropTypes.object, | ||
| rangeDivider: PropTypes.node, | ||
@@ -401,0 +421,0 @@ required: PropTypes.bool, |
@@ -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,8 +8,8 @@ import DateRangePicker from './DateRangePicker'; | ||
| it('passes default name to DateInput components', () => { | ||
| const component = mount(<DateRangePicker />); | ||
| const { container } = render(<DateRangePicker />); | ||
| const dateInput = component.find('DateInput'); | ||
| const nativeInputs = container.querySelectorAll('input[type="date"]'); | ||
| expect(dateInput.at(0).prop('name')).toBe('daterange_from'); | ||
| expect(dateInput.at(1).prop('name')).toBe('daterange_to'); | ||
| expect(nativeInputs[0]).toHaveAttribute('name', 'daterange_from'); | ||
| expect(nativeInputs[1]).toHaveAttribute('name', 'daterange_to'); | ||
| }); | ||
@@ -20,38 +20,37 @@ | ||
| const component = mount(<DateRangePicker name={name} />); | ||
| const { container } = render(<DateRangePicker name={name} />); | ||
| const dateInput = component.find('DateInput'); | ||
| const nativeInputs = container.querySelectorAll('input[type="date"]'); | ||
| expect(dateInput.at(0).prop('name')).toBe(`${name}_from`); | ||
| expect(dateInput.at(1).prop('name')).toBe(`${name}_to`); | ||
| expect(nativeInputs[0]).toHaveAttribute('name', `${name}_from`); | ||
| expect(nativeInputs[1]).toHaveAttribute('name', `${name}_to`); | ||
| }); | ||
| it('passes autoFocus flag to first DateInput component', () => { | ||
| // See https://github.com/jsdom/jsdom/issues/3041 | ||
| it.skip('passes autoFocus flag to first DateInput component', () => { | ||
| // eslint-disable-next-line jsx-a11y/no-autofocus | ||
| const component = mount(<DateRangePicker autoFocus />); | ||
| const { container } = render(<DateRangePicker autoFocus />); | ||
| const dateInput = component.find('DateInput'); | ||
| const customInputs = container.querySelectorAll('input[data-input]'); | ||
| expect(dateInput.at(0).prop('autoFocus')).toBeTruthy(); | ||
| expect(dateInput.at(1).prop('autoFocus')).toBe(undefined); | ||
| expect(customInputs[0]).toHaveAttribute('autofocus'); | ||
| }); | ||
| it('passes disabled flag to DateInput components', () => { | ||
| const component = mount(<DateRangePicker disabled />); | ||
| const { container } = render(<DateRangePicker disabled />); | ||
| const dateInput = component.find('DateInput'); | ||
| const nativeInputs = container.querySelectorAll('input[type="date"]'); | ||
| expect(dateInput.at(0).prop('disabled')).toBeTruthy(); | ||
| expect(dateInput.at(1).prop('disabled')).toBeTruthy(); | ||
| expect(nativeInputs[0]).toBeDisabled(); | ||
| expect(nativeInputs[1]).toBeDisabled(); | ||
| }); | ||
| it('passes format to DateInput components', () => { | ||
| const format = 'y-MM-dd'; | ||
| const { container } = render(<DateRangePicker format="yyyy" />); | ||
| const component = mount(<DateRangePicker format={format} />); | ||
| const customInputs = container.querySelectorAll('input[data-input]'); | ||
| const dateInput = component.find('DateInput'); | ||
| expect(dateInput.at(0).prop('format')).toBe(format); | ||
| expect(dateInput.at(1).prop('format')).toBe(format); | ||
| expect(customInputs).toHaveLength(2); | ||
| expect(customInputs[0]).toHaveAttribute('name', 'year'); | ||
| expect(customInputs[1]).toHaveAttribute('name', 'year'); | ||
| }); | ||
@@ -69,18 +68,34 @@ | ||
| const component = mount(<DateRangePicker {...ariaLabelProps} />); | ||
| const { container } = render(<DateRangePicker {...ariaLabelProps} />); | ||
| const calendarButton = component.find('button.react-daterange-picker__calendar-button'); | ||
| const clearButton = component.find('button.react-daterange-picker__clear-button'); | ||
| const dateInput = component.find('DateInput'); | ||
| const calendarButton = container.querySelector( | ||
| 'button.react-daterange-picker__calendar-button', | ||
| ); | ||
| const clearButton = container.querySelector('button.react-daterange-picker__clear-button'); | ||
| const dateInputs = container.querySelectorAll('.react-daterange-picker__inputGroup'); | ||
| expect(calendarButton.prop('aria-label')).toBe(ariaLabelProps.calendarAriaLabel); | ||
| expect(clearButton.prop('aria-label')).toBe(ariaLabelProps.clearAriaLabel); | ||
| expect(dateInput.at(0).prop('dayAriaLabel')).toBe(ariaLabelProps.dayAriaLabel); | ||
| expect(dateInput.at(0).prop('monthAriaLabel')).toBe(ariaLabelProps.monthAriaLabel); | ||
| expect(dateInput.at(0).prop('nativeInputAriaLabel')).toBe(ariaLabelProps.nativeInputAriaLabel); | ||
| expect(dateInput.at(0).prop('yearAriaLabel')).toBe(ariaLabelProps.yearAriaLabel); | ||
| expect(dateInput.at(1).prop('dayAriaLabel')).toBe(ariaLabelProps.dayAriaLabel); | ||
| expect(dateInput.at(1).prop('monthAriaLabel')).toBe(ariaLabelProps.monthAriaLabel); | ||
| expect(dateInput.at(1).prop('nativeInputAriaLabel')).toBe(ariaLabelProps.nativeInputAriaLabel); | ||
| expect(dateInput.at(1).prop('yearAriaLabel')).toBe(ariaLabelProps.yearAriaLabel); | ||
| const [dateFromInput, dateToInput] = dateInputs; | ||
| const nativeFromInput = dateFromInput.querySelector('input[type="date"]'); | ||
| const dayFromInput = dateFromInput.querySelector('input[name="day"]'); | ||
| const monthFromInput = dateFromInput.querySelector('input[name="month"]'); | ||
| const yearFromInput = dateFromInput.querySelector('input[name="year"]'); | ||
| const nativeToInput = dateToInput.querySelector('input[type="date"]'); | ||
| const dayToInput = dateToInput.querySelector('input[name="day"]'); | ||
| const monthToInput = dateToInput.querySelector('input[name="month"]'); | ||
| const yearToInput = dateToInput.querySelector('input[name="year"]'); | ||
| expect(calendarButton).toHaveAttribute('aria-label', ariaLabelProps.calendarAriaLabel); | ||
| expect(clearButton).toHaveAttribute('aria-label', ariaLabelProps.clearAriaLabel); | ||
| expect(nativeFromInput).toHaveAttribute('aria-label', ariaLabelProps.nativeInputAriaLabel); | ||
| expect(dayFromInput).toHaveAttribute('aria-label', ariaLabelProps.dayAriaLabel); | ||
| expect(monthFromInput).toHaveAttribute('aria-label', ariaLabelProps.monthAriaLabel); | ||
| expect(yearFromInput).toHaveAttribute('aria-label', ariaLabelProps.yearAriaLabel); | ||
| expect(nativeToInput).toHaveAttribute('aria-label', ariaLabelProps.nativeInputAriaLabel); | ||
| expect(dayToInput).toHaveAttribute('aria-label', ariaLabelProps.dayAriaLabel); | ||
| expect(monthToInput).toHaveAttribute('aria-label', ariaLabelProps.monthAriaLabel); | ||
| expect(yearToInput).toHaveAttribute('aria-label', ariaLabelProps.yearAriaLabel); | ||
| }); | ||
@@ -95,12 +110,23 @@ | ||
| const component = mount(<DateRangePicker {...placeholderProps} />); | ||
| const { container } = render(<DateRangePicker {...placeholderProps} />); | ||
| const dateInput = component.find('DateInput'); | ||
| const dateInputs = container.querySelectorAll('.react-daterange-picker__inputGroup'); | ||
| expect(dateInput.at(0).prop('dayPlaceholder')).toBe(placeholderProps.dayPlaceholder); | ||
| expect(dateInput.at(0).prop('monthPlaceholder')).toBe(placeholderProps.monthPlaceholder); | ||
| expect(dateInput.at(0).prop('yearPlaceholder')).toBe(placeholderProps.yearPlaceholder); | ||
| expect(dateInput.at(1).prop('dayPlaceholder')).toBe(placeholderProps.dayPlaceholder); | ||
| expect(dateInput.at(1).prop('monthPlaceholder')).toBe(placeholderProps.monthPlaceholder); | ||
| expect(dateInput.at(1).prop('yearPlaceholder')).toBe(placeholderProps.yearPlaceholder); | ||
| const [dateFromInput, dateToInput] = dateInputs; | ||
| const dayFromInput = dateFromInput.querySelector('input[name="day"]'); | ||
| const monthFromInput = dateFromInput.querySelector('input[name="month"]'); | ||
| const yearFromInput = dateFromInput.querySelector('input[name="year"]'); | ||
| const dayToInput = dateToInput.querySelector('input[name="day"]'); | ||
| const monthToInput = dateToInput.querySelector('input[name="month"]'); | ||
| const yearToInput = dateToInput.querySelector('input[name="year"]'); | ||
| expect(dayFromInput).toHaveAttribute('placeholder', placeholderProps.dayPlaceholder); | ||
| expect(monthFromInput).toHaveAttribute('placeholder', placeholderProps.monthPlaceholder); | ||
| expect(yearFromInput).toHaveAttribute('placeholder', placeholderProps.yearPlaceholder); | ||
| expect(dayToInput).toHaveAttribute('placeholder', placeholderProps.dayPlaceholder); | ||
| expect(monthToInput).toHaveAttribute('placeholder', placeholderProps.monthPlaceholder); | ||
| expect(yearToInput).toHaveAttribute('placeholder', placeholderProps.yearPlaceholder); | ||
| }); | ||
@@ -112,8 +138,8 @@ | ||
| const component = mount(<DateRangePicker value={value} />); | ||
| const { container } = render(<DateRangePicker value={value} />); | ||
| const dateInput = component.find('DateInput'); | ||
| const nativeInputs = container.querySelectorAll('input[type="date"]'); | ||
| expect(dateInput.at(0).prop('value')).toBe(value); | ||
| expect(dateInput.at(1).prop('value')).toBe(undefined); | ||
| expect(nativeInputs[0]).toHaveValue('2019-01-01'); | ||
| expect(nativeInputs[1]).toHaveValue(''); | ||
| }); | ||
@@ -125,8 +151,8 @@ | ||
| const component = mount(<DateRangePicker value={[value1, value2]} />); | ||
| const { container } = render(<DateRangePicker value={[value1, value2]} />); | ||
| const dateInput = component.find('DateInput'); | ||
| const nativeInputs = container.querySelectorAll('input[type="date"]'); | ||
| expect(dateInput.at(0).prop('value')).toBe(value1); | ||
| expect(dateInput.at(1).prop('value')).toBe(value2); | ||
| expect(nativeInputs[0]).toHaveValue('2019-01-01'); | ||
| expect(nativeInputs[1]).toHaveValue('2019-07-01'); | ||
| }); | ||
@@ -138,7 +164,7 @@ }); | ||
| const component = mount(<DateRangePicker className={className} />); | ||
| const { container } = render(<DateRangePicker className={className} />); | ||
| const wrapperClassName = component.prop('className'); | ||
| const wrapper = container.firstChild; | ||
| expect(wrapperClassName.includes(className)).toBe(true); | ||
| expect(wrapper).toHaveClass(className); | ||
| }); | ||
@@ -149,101 +175,97 @@ | ||
| const component = mount(<DateRangePicker calendarClassName={calendarClassName} isOpen />); | ||
| const { container } = render(<DateRangePicker 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 components', () => { | ||
| const component = mount(<DateRangePicker />); | ||
| const { container } = render(<DateRangePicker />); | ||
| const dateInput = component.find('DateInput'); | ||
| const nativeInputs = container.querySelectorAll('input[type="date"]'); | ||
| expect(dateInput).toHaveLength(2); | ||
| expect(nativeInputs.length).toBe(2); | ||
| }); | ||
| it('renders range divider with default divider', () => { | ||
| const component = mount(<DateRangePicker />); | ||
| const { container } = render(<DateRangePicker />); | ||
| const rangeDivider = component.find('.react-daterange-picker__range-divider'); | ||
| const rangeDivider = container.querySelector('.react-daterange-picker__range-divider'); | ||
| expect(rangeDivider).toHaveLength(1); | ||
| expect(rangeDivider.text()).toBe('–'); | ||
| expect(rangeDivider).toBeInTheDocument(); | ||
| expect(rangeDivider).toHaveTextContent('–'); | ||
| }); | ||
| it('renders range divider with custom divider', () => { | ||
| const component = mount(<DateRangePicker rangeDivider="to" />); | ||
| const { container } = render(<DateRangePicker rangeDivider="to" />); | ||
| const rangeDivider = component.find('.react-daterange-picker__range-divider'); | ||
| const rangeDivider = container.querySelector('.react-daterange-picker__range-divider'); | ||
| expect(rangeDivider).toHaveLength(1); | ||
| expect(rangeDivider.text()).toBe('to'); | ||
| expect(rangeDivider).toBeInTheDocument(); | ||
| expect(rangeDivider).toHaveTextContent('to'); | ||
| }); | ||
| it('renders clear button', () => { | ||
| const component = mount(<DateRangePicker />); | ||
| const { container } = render(<DateRangePicker />); | ||
| const clearButton = component.find('button.react-daterange-picker__clear-button'); | ||
| const clearButton = container.querySelector('button.react-daterange-picker__clear-button'); | ||
| expect(clearButton).toHaveLength(1); | ||
| expect(clearButton).toBeInTheDocument(); | ||
| }); | ||
| it('renders calendar button', () => { | ||
| const component = mount(<DateRangePicker />); | ||
| const { container } = render(<DateRangePicker />); | ||
| const calendarButton = component.find('button.react-daterange-picker__calendar-button'); | ||
| const calendarButton = container.querySelector( | ||
| 'button.react-daterange-picker__calendar-button', | ||
| ); | ||
| expect(calendarButton).toHaveLength(1); | ||
| expect(calendarButton).toBeInTheDocument(); | ||
| }); | ||
| it('renders DateInput and Calendar components when given isOpen flag', () => { | ||
| const component = mount(<DateRangePicker isOpen />); | ||
| it('renders Calendar component when given isOpen flag', () => { | ||
| const { container } = render(<DateRangePicker isOpen />); | ||
| const dateInput = component.find('DateInput'); | ||
| const calendar = component.find('Calendar'); | ||
| const calendar = container.querySelector('.react-calendar'); | ||
| expect(dateInput).toHaveLength(2); | ||
| expect(calendar).toHaveLength(1); | ||
| expect(calendar).toBeInTheDocument(1); | ||
| }); | ||
| it('does not render Calendar component when given disableCalendar & isOpen flags', () => { | ||
| const component = mount(<DateRangePicker disableCalendar isOpen />); | ||
| const { container } = render(<DateRangePicker disableCalendar isOpen />); | ||
| const dateInput = component.find('DateInput'); | ||
| const calendar = component.find('Calendar'); | ||
| const calendar = container.querySelector('.react-calendar'); | ||
| expect(dateInput).toHaveLength(2); | ||
| expect(calendar).toHaveLength(0); | ||
| expect(calendar).toBeFalsy(); | ||
| }); | ||
| it('opens Calendar component when given isOpen flag by changing props', () => { | ||
| const component = mount(<DateRangePicker />); | ||
| const { container, rerender } = render(<DateRangePicker />); | ||
| 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(<DateRangePicker 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(<DateRangePicker />); | ||
| const { container } = render(<DateRangePicker />); | ||
| const calendar = component.find('Calendar'); | ||
| const button = component.find('button.react-daterange-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-daterange-picker__calendar-button'); | ||
| const calendar2 = component.find('Calendar'); | ||
| fireEvent.click(button); | ||
| expect(calendar2).toHaveLength(1); | ||
| const calendar2 = container.querySelector('.react-calendar'); | ||
| expect(calendar2).toBeInTheDocument(); | ||
| }); | ||
@@ -253,63 +275,60 @@ | ||
| it('opens Calendar component when focusing on an input inside by default', () => { | ||
| const component = mount(<DateRangePicker />); | ||
| const { container } = render(<DateRangePicker />); | ||
| const calendar = component.find('Calendar'); | ||
| const input = component.find('input[name="day"]').first(); | ||
| 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"]'); | ||
| const calendar2 = component.find('Calendar'); | ||
| fireEvent.focus(input); | ||
| expect(calendar2).toHaveLength(1); | ||
| const calendar2 = container.querySelector('.react-calendar'); | ||
| expect(calendar2).toBeInTheDocument(); | ||
| }); | ||
| it('opens Calendar component when focusing on an input inside given openCalendarOnFocus = true', () => { | ||
| const component = mount(<DateRangePicker openCalendarOnFocus />); | ||
| const { container } = render(<DateRangePicker openCalendarOnFocus />); | ||
| const calendar = component.find('Calendar'); | ||
| const input = component.find('input[name="day"]').first(); | ||
| const calendar = container.querySelector('.react-calendar'); | ||
| const input = container.querySelector('input[name="day"]'); | ||
| expect(calendar).toHaveLength(0); | ||
| expect(calendar).toBeFalsy(); | ||
| input.simulate('focus'); | ||
| component.update(); | ||
| 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(<DateRangePicker openCalendarOnFocus={false} />); | ||
| const { container } = render(<DateRangePicker openCalendarOnFocus={false} />); | ||
| const calendar = component.find('Calendar'); | ||
| const input = component.find('input[name="day"]').first(); | ||
| const calendar = container.querySelector('.react-calendar'); | ||
| const input = container.querySelector('input[name="day"]'); | ||
| expect(calendar).toHaveLength(0); | ||
| expect(calendar).toBeFalsy(); | ||
| input.simulate('focus'); | ||
| component.update(); | ||
| 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(<DateRangePicker format="dd.MMMM.yyyy" />); | ||
| const { container } = render(<DateRangePicker format="dd.MMMM.yyyy" />); | ||
| const calendar = component.find('Calendar'); | ||
| const select = component.find('select[name="month"]').first(); | ||
| const calendar = container.querySelector('.react-calendar'); | ||
| const select = container.querySelector('select[name="month"]'); | ||
| expect(calendar).toHaveLength(0); | ||
| expect(calendar).toBeFalsy(); | ||
| select.simulate('focus'); | ||
| component.update(); | ||
| fireEvent.focus(select); | ||
| const calendar2 = component.find('Calendar'); | ||
| const calendar2 = container.querySelector('.react-calendar'); | ||
| expect(calendar2).toHaveLength(0); | ||
| expect(calendar2).toBeFalsy(); | ||
| }); | ||
@@ -322,10 +341,7 @@ }); | ||
| const component = mount(<DateRangePicker isOpen />, { attachTo: root }); | ||
| const { container } = render(<DateRangePicker isOpen />, { attachTo: root }); | ||
| const event = document.createEvent('MouseEvent'); | ||
| event.initEvent('mousedown', true, true); | ||
| document.body.dispatchEvent(event); | ||
| component.update(); | ||
| fireEvent.mouseDown(document.body); | ||
| expect(component.state('isOpen')).toBe(false); | ||
| waitForElementToBeRemoved(() => container.querySelector('.react-calendar')); | ||
| }); | ||
@@ -337,10 +353,7 @@ | ||
| const component = mount(<DateRangePicker isOpen />, { attachTo: root }); | ||
| const { container } = render(<DateRangePicker isOpen />, { attachTo: root }); | ||
| const event = document.createEvent('FocusEvent'); | ||
| event.initEvent('focusin', true, true); | ||
| document.body.dispatchEvent(event); | ||
| component.update(); | ||
| fireEvent.focusIn(document.body); | ||
| expect(component.state('isOpen')).toBe(false); | ||
| waitForElementToBeRemoved(() => container.querySelector('.react-calendar')); | ||
| }); | ||
@@ -352,63 +365,72 @@ | ||
| const component = mount(<DateRangePicker isOpen />, { attachTo: root }); | ||
| const { container } = render(<DateRangePicker 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(<DateRangePicker isOpen />); | ||
| const { container } = render(<DateRangePicker isOpen />); | ||
| const customInputs = component.find('input[type="number"]'); | ||
| 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(<DateRangePicker isOpen />); | ||
| const instance = createRef(); | ||
| const { onChange } = component.instance(); | ||
| const { container } = render(<DateRangePicker 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(<DateRangePicker closeCalendar={false} isOpen />); | ||
| const instance = createRef(); | ||
| const { onChange } = component.instance(); | ||
| const { container } = render(<DateRangePicker 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(<DateRangePicker isOpen />); | ||
| const instance = createRef(); | ||
| const { onChange } = component.instance(); | ||
| const { container } = render(<DateRangePicker 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(<DateRangePicker onChange={onChange} />); | ||
| render(<DateRangePicker onChange={onChange} ref={instance} />); | ||
| const { onChange: onChangeInternal } = component.instance(); | ||
| const { onChange: onChangeInternal } = instance.current; | ||
@@ -423,11 +445,10 @@ onChangeInternal(nextValue); | ||
| const component = mount(<DateRangePicker onChange={onChange} />); | ||
| const { container } = render(<DateRangePicker onChange={onChange} />); | ||
| const calendar = component.find('Calendar'); | ||
| const button = component.find('button.react-daterange-picker__clear-button'); | ||
| const calendar = container.querySelector('.react-calendar'); | ||
| const button = container.querySelector('button.react-daterange-picker__clear-button'); | ||
| expect(calendar).toHaveLength(0); | ||
| expect(calendar).toBeFalsy(); | ||
| button.simulate('click'); | ||
| component.update(); | ||
| fireEvent.click(button); | ||
@@ -439,6 +460,8 @@ expect(onChange).toHaveBeenCalledWith(null); | ||
| it('calls onChange properly given no initial value', () => { | ||
| const component = mount(<DateRangePicker />); | ||
| const instance = createRef(); | ||
| const componentInstance = component.instance(); | ||
| render(<DateRangePicker ref={instance} />); | ||
| const componentInstance = instance.current; | ||
| const onChangeSpy = jest.spyOn(componentInstance, 'onChange'); | ||
@@ -454,7 +477,8 @@ | ||
| it('calls onChange properly given single initial value', () => { | ||
| const instance = createRef(); | ||
| const value = new Date(2018, 0, 1); | ||
| const component = mount(<DateRangePicker value={value} />); | ||
| render(<DateRangePicker value={value} ref={instance} />); | ||
| const componentInstance = component.instance(); | ||
| const componentInstance = instance.current; | ||
@@ -471,2 +495,3 @@ const onChangeSpy = jest.spyOn(componentInstance, 'onChange'); | ||
| it('calls onChange properly given initial value as an array', () => { | ||
| const instance = createRef(); | ||
| const valueFrom = new Date(2018, 0, 1); | ||
@@ -476,5 +501,5 @@ const valueTo = new Date(2018, 6, 1); | ||
| const component = mount(<DateRangePicker value={value} />); | ||
| render(<DateRangePicker value={value} ref={instance} />); | ||
| const componentInstance = component.instance(); | ||
| const componentInstance = instance.current; | ||
@@ -493,6 +518,8 @@ const onChangeSpy = jest.spyOn(componentInstance, 'onChange'); | ||
| it('calls onChange properly given no initial value', () => { | ||
| const component = mount(<DateRangePicker />); | ||
| const instance = createRef(); | ||
| const componentInstance = component.instance(); | ||
| render(<DateRangePicker ref={instance} />); | ||
| const componentInstance = instance.current; | ||
| const onChangeSpy = jest.spyOn(componentInstance, 'onChange'); | ||
@@ -508,7 +535,8 @@ | ||
| it('calls onChange properly given single initial value', () => { | ||
| const instance = createRef(); | ||
| const value = new Date(2018, 0, 1); | ||
| const component = mount(<DateRangePicker value={value} />); | ||
| render(<DateRangePicker value={value} ref={instance} />); | ||
| const componentInstance = component.instance(); | ||
| const componentInstance = instance.current; | ||
@@ -525,2 +553,3 @@ const onChangeSpy = jest.spyOn(componentInstance, 'onChange'); | ||
| it('calls onChange properly given initial value as an array', () => { | ||
| const instance = createRef(); | ||
| const valueFrom = new Date(2018, 0, 1); | ||
@@ -530,5 +559,5 @@ const valueTo = new Date(2018, 6, 1); | ||
| const component = mount(<DateRangePicker value={value} />); | ||
| render(<DateRangePicker value={value} ref={instance} />); | ||
| const componentInstance = component.instance(); | ||
| const componentInstance = instance.current; | ||
@@ -535,0 +564,0 @@ const onChangeSpy = jest.spyOn(componentInstance, 'onChange'); |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by4.39%
87445
- Lines of code
- increased by2.49%
1356
- Number of lines in readme file
- increased by3.6%
144
Worsened metrics
- Dev dependency count
- increased by6.25%
17
Dependency changes
+ Addedclsx@2.1.1(transitive)
+ Addedget-user-locale@2.3.2(transitive)
+ Addedmap-age-cleaner@0.1.3(transitive)
+ Addedmem@8.1.1(transitive)
+ Addedmimic-fn@3.1.0(transitive)
+ Addedp-defer@1.0.0(transitive)
+ Addedreact-calendar@4.8.0(transitive)
+ Addedreact-date-picker@9.3.0(transitive)
+ Addedwarning@4.0.3(transitive)
- Removed@types/prop-types@15.7.13(transitive)
- Removed@types/react@18.3.12(transitive)
- Removed@types/react-calendar@3.9.0(transitive)
- Removedcsstype@3.1.3(transitive)
- Removedmerge-refs@1.3.0(transitive)
- Removedreact-date-picker@8.4.0(transitive)
Updatedreact-calendar@^3.7.0
Updatedreact-date-picker@^9.0.0