Socket
Socket
Sign inDemoInstall

@wojtekmaj/react-daterange-picker

Package Overview
Dependencies
Maintainers
1
Versions
37
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@wojtekmaj/react-daterange-picker - npm Package Compare versions

Comparing version 3.3.2 to 3.4.0

29

dist/DateRangePicker.js
"use strict";
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }

@@ -41,5 +41,5 @@ Object.defineProperty(exports, "__esModule", {

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
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 _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

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

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }

@@ -169,2 +169,8 @@ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

_defineProperty(_assertThisInitialized(_this), "onKeyDown", function (event) {
if (event.key === 'Escape') {
_this.closeCalendar();
}
});
_defineProperty(_assertThisInitialized(_this), "openCalendar", function () {

@@ -247,2 +253,3 @@ _this.setState({

});
document[fnName]('keydown', this.onKeyDown);
}

@@ -312,2 +319,3 @@ }, {

}, /*#__PURE__*/_react["default"].createElement(_DateInput["default"], _extends({}, commonProps, {
// eslint-disable-next-line jsx-a11y/no-autofocus
autoFocus: autoFocus,

@@ -361,2 +369,7 @@ name: "".concat(name, "_from"),

return /*#__PURE__*/_react["default"].createElement(_reactFit["default"], null, /*#__PURE__*/_react["default"].createElement("div", {
ref: function ref(_ref) {
if (_ref && !isOpen) {
_ref.removeAttribute('style');
}
},
className: (0, _mergeClassNames["default"])(className, "".concat(className, "--").concat(isOpen ? 'open' : 'closed'))

@@ -388,8 +401,8 @@ }, /*#__PURE__*/_react["default"].createElement(_reactCalendar["default"], _extends({

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

@@ -396,0 +409,0 @@ }), this.renderInputs(), this.renderCalendar());

4

dist/shared/propTypes.js

@@ -6,5 +6,5 @@ "use strict";

});
exports.isMaxDate = exports.isMinDate = void 0;
exports.isMinDate = exports.isMaxDate = void 0;
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }

@@ -11,0 +11,0 @@ var isMinDate = function isMinDate(props, propName, componentName) {

28

package.json
{
"name": "@wojtekmaj/react-daterange-picker",
"version": "3.3.2",
"version": "3.4.0",
"description": "A date range picker for your React app.",

@@ -14,3 +14,2 @@ "main": "dist/entry.js",

"jest": "jest",
"jest-coverage": "jest --coverage",
"lint": "eslint sample/ src/ test/ --ext .jsx,.js",

@@ -39,4 +38,4 @@ "prepack": "yarn clean && yarn build",

"react-calendar": "^3.3.1",
"react-date-picker": "^8.3.3",
"react-fit": "^1.0.3"
"react-date-picker": "^8.4.0",
"react-fit": "^1.4.0"
},

@@ -49,8 +48,10 @@ "devDependencies": {

"@wojtekmaj/enzyme-adapter-react-17": "^0.6.0",
"babel-eslint": "^10.0.0",
"enzyme": "^3.10.0",
"eslint": "~7.19.0",
"eslint-config-wojtekmaj": "^0.5.0",
"eslint": "^8.5.0",
"eslint-config-wojtekmaj": "^0.6.5",
"husky": "^7.0.0",
"jest": "^27.0.0",
"less": "^4.0.0",
"prettier": "^2.5.0",
"pretty-quick": "^3.1.0",
"react": "^17.0.0",

@@ -61,4 +62,4 @@ "react-dom": "^17.0.0",

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

@@ -72,6 +73,4 @@ "resolutions": {

"files": [
"LICENSE",
"README.md",
"dist/",
"src/"
"dist",
"src"
],

@@ -82,3 +81,4 @@ "repository": {

},
"funding": "https://github.com/wojtekmaj/react-daterange-picker?sponsor=1"
"funding": "https://github.com/wojtekmaj/react-daterange-picker?sponsor=1",
"packageManager": "yarn@3.1.0"
}

98

README.md

@@ -1,4 +0,2 @@

[![npm](https://img.shields.io/npm/v/@wojtekmaj/react-daterange-picker.svg)](https://www.npmjs.com/package/@wojtekmaj/react-daterange-picker) ![downloads](https://img.shields.io/npm/dt/@wojtekmaj/react-daterange-picker.svg) [![CI](https://github.com/wojtekmaj/react-daterange-picker/workflows/CI/badge.svg)](https://github.com/wojtekmaj/react-daterange-picker/actions) ![dependencies](https://img.shields.io/david/wojtekmaj/react-daterange-picker.svg
) ![dev dependencies](https://img.shields.io/david/dev/wojtekmaj/react-daterange-picker.svg
) [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest)
[![npm](https://img.shields.io/npm/v/@wojtekmaj/react-daterange-picker.svg)](https://www.npmjs.com/package/@wojtekmaj/react-daterange-picker) ![downloads](https://img.shields.io/npm/dt/@wojtekmaj/react-daterange-picker.svg) [![CI](https://github.com/wojtekmaj/react-daterange-picker/workflows/CI/badge.svg)](https://github.com/wojtekmaj/react-daterange-picker/actions) ![dependencies](https://img.shields.io/david/wojtekmaj/react-daterange-picker.svg) ![dev dependencies](https://img.shields.io/david/dev/wojtekmaj/react-daterange-picker.svg) [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest)

@@ -9,11 +7,12 @@ # React-DateRange-Picker

* Pick days, months, years, or even decades
* Supports virtually any language
* No moment.js needed
- Pick days, months, years, or even decades
- Supports virtually any language
- No moment.js needed
## tl;dr
* Install by executing `npm install @wojtekmaj/react-daterange-picker` or `yarn add @wojtekmaj/react-daterange-picker`.
* Import by adding `import DateRangePicker from '@wojtekmaj/react-daterange-picker'`.
* Use by adding `<DateRangePicker />`. Use `onChange` prop for getting new values.
- Install by executing `npm install @wojtekmaj/react-daterange-picker` or `yarn add @wojtekmaj/react-daterange-picker`.
- Import by adding `import DateRangePicker from '@wojtekmaj/react-daterange-picker'`.
- Use by adding `<DateRangePicker />`. Use `onChange` prop for getting new values.
## Demo

@@ -36,5 +35,5 @@

| React version | Newest compatible React-DateRange-Picker version |
|-------|--------|
| ≥16.3 | latest |
| ≥16.0 | 2.x |
| ------------- | ------------------------------------------------ |
| ≥16.3 | latest |
| ≥16.0 | 2.x |

@@ -64,6 +63,3 @@ [React-Calendar](https://github.com/wojtekmaj/react-calendar), on which React-DateRange-Picker relies heavily, uses modern web technologies. That's why it's so fast, lightweight and easy to style. This, however, comes at a cost of [supporting only modern browsers](https://caniuse.com/#feat=internationalization).

<div>
<DateRangePicker
onChange={onChange}
value={value}
/>
<DateRangePicker onChange={onChange} value={value} />
</div>

@@ -88,37 +84,37 @@ );

|Prop name|Description|Default value|Example values|
|----|----|----|----|
|autoFocus|Automatically focuses the input on mount.|n/a|`true`|
|calendarAriaLabel|`aria-label` for the calendar button.|n/a|`"Toggle calendar"`|
|calendarClassName|Class name(s) that will be added along with `"react-calendar"` to the main React-Calendar `<div>` element.|n/a|<ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul>|
|calendarIcon|Content of the calendar button. Setting the value explicitly to `null` will hide the icon.|(default icon)|<ul><li>String: `"Calendar"`</li><li>React element: `<CalendarIcon />`</li></ul>|
|className|Class name(s) that will be added along with `"react-daterange-picker"` to the main React-DateRange-Picker `<div>` element.|n/a|<ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul>|
|clearAriaLabel|`aria-label` for the clear button.|n/a|`"Clear value"`|
|clearIcon|Content of the clear button. Setting the value explicitly to `null` will hide the icon.|(default icon)|<ul><li>String: `"Clear"`</li><li>React element: `<ClearIcon />`</li></ul>|
|closeCalendar|Whether to close the calendar on value selection.|`true`|`false`|
|dayAriaLabel|`aria-label` for the day input.|n/a|`"Day"`|
|dayPlaceholder|`placeholder` for the day input.|`"--"`|`"dd"`|
|disabled|Whether the date range picker should be disabled.|`false`|`true`|
|disableCalendar|When set to `true`, will remove the calendar and the button toggling its visibility.|`false`|`true`|
|format|Input format based on [Unicode Technical Standard #35](https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table). Supported values are: `y`, `M`, `MM`, `MMM`, `MMMM`, `d`, `dd`.|n/a|`"y-MM-dd"`|
|isOpen|Whether the calendar should be opened.|`false`|`true`|
|locale|Locale that should be used by the date range picker and the calendar. Can be any [IETF language tag](https://en.wikipedia.org/wiki/IETF_language_tag).|User's browser settings|`"hu-HU"`|
|maxDate|Maximum date that the user can select. Periods partially overlapped by maxDate will also be selectable, although React-DateRange-Picker will ensure that no later date is selected.|n/a|Date: `new Date()`|
|maxDetail|The most detailed calendar view that the user shall see. View defined here also becomes the one on which clicking an item in the calendar will select a date and pass it to onChange. Can be `"month"`, `"year"`, `"decade"` or `"century"`.|`"month"`|`"year"`|
|minDate|Minimum date that the user can select. Periods partially overlapped by minDate will also be selectable, although React-DateRange-Picker will ensure that no earlier date is selected.|n/a|Date: `new Date()`|
|minDetail|The least detailed calendar view that the user shall see. Can be `"month"`, `"year"`, `"decade"` or `"century"`.|`"century"`|`"decade"`|
|monthAriaLabel|`aria-label` for the month input.|n/a|`"Month"`|
|monthPlaceholder|`placeholder` for the month input.|`"--"`|`"mm"`|
|name|Input name prefix. Date from/Date to fields will be named `"yourprefix_from"` and `"yourprefix_to"` respectively.|`"daterange"`|`"myCustomName"`|
|nativeInputAriaLabel|`aria-label` for the native date input.|n/a|`"Date"`|
|onCalendarClose|Function called when the calendar closes.|n/a|`() => alert('Calendar closed')`|
|onCalendarOpen|Function called when the calendar opens.|n/a|`() => alert('Calendar opened')`|
|onChange|Function called when the user clicks an item on the most detailed view available.|n/a|`(value) => alert('New date is: ', value)`|
|openCalendarOnFocus|Whether to open the calendar on input focus.|`true`|`false`|
|rangeDivider|Divider between date inputs.|`"–"`|`" to "`|
|required|Whether date input should be required.|`false`|`true`|
|showLeadingZeros|Whether leading zeros should be rendered in date inputs.|`false`|`true`|
|value|Input value.|n/a|<ul><li>Date: `new Date()`</li><li>An array of dates: `[new Date(2017, 0, 1), new Date(2017, 7, 1)]`</li></ul>|
|yearAriaLabel|`aria-label` for the year input.|n/a|`"Year"`|
|yearPlaceholder|`aria-label` for the year input.|`"----"`|`"yyyy"`|
| Prop name | Description | Default value | Example values |
| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | -------------------------------------------------------------------------------------------------------------- |
| autoFocus | Automatically focuses the input on mount. | n/a | `true` |
| calendarAriaLabel | `aria-label` for the calendar button. | n/a | `"Toggle calendar"` |
| calendarClassName | Class name(s) that will be added along with `"react-calendar"` to the main React-Calendar `<div>` element. | n/a | <ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul> |
| calendarIcon | Content of the calendar button. Setting the value explicitly to `null` will hide the icon. | (default icon) | <ul><li>String: `"Calendar"`</li><li>React element: `<CalendarIcon />`</li></ul> |
| className | Class name(s) that will be added along with `"react-daterange-picker"` to the main React-DateRange-Picker `<div>` element. | n/a | <ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul> |
| clearAriaLabel | `aria-label` for the clear button. | n/a | `"Clear value"` |
| clearIcon | Content of the clear button. Setting the value explicitly to `null` will hide the icon. | (default icon) | <ul><li>String: `"Clear"`</li><li>React element: `<ClearIcon />`</li></ul> |
| closeCalendar | Whether to close the calendar on value selection. | `true` | `false` |
| dayAriaLabel | `aria-label` for the day input. | n/a | `"Day"` |
| dayPlaceholder | `placeholder` for the day input. | `"--"` | `"dd"` |
| disabled | Whether the date range picker should be disabled. | `false` | `true` |
| disableCalendar | When set to `true`, will remove the calendar and the button toggling its visibility. | `false` | `true` |
| format | Input format based on [Unicode Technical Standard #35](https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table). Supported values are: `y`, `M`, `MM`, `MMM`, `MMMM`, `d`, `dd`. | n/a | `"y-MM-dd"` |
| isOpen | Whether the calendar should be opened. | `false` | `true` |
| locale | Locale that should be used by the date range picker and the calendar. Can be any [IETF language tag](https://en.wikipedia.org/wiki/IETF_language_tag). | User's browser settings | `"hu-HU"` |
| maxDate | Maximum date that the user can select. Periods partially overlapped by maxDate will also be selectable, although React-DateRange-Picker will ensure that no later date is selected. | n/a | Date: `new Date()` |
| maxDetail | The most detailed calendar view that the user shall see. View defined here also becomes the one on which clicking an item in the calendar will select a date and pass it to onChange. Can be `"month"`, `"year"`, `"decade"` or `"century"`. | `"month"` | `"year"` |
| minDate | Minimum date that the user can select. Periods partially overlapped by minDate will also be selectable, although React-DateRange-Picker will ensure that no earlier date is selected. | n/a | Date: `new Date()` |
| minDetail | The least detailed calendar view that the user shall see. Can be `"month"`, `"year"`, `"decade"` or `"century"`. | `"century"` | `"decade"` |
| monthAriaLabel | `aria-label` for the month input. | n/a | `"Month"` |
| monthPlaceholder | `placeholder` for the month input. | `"--"` | `"mm"` |
| name | Input name prefix. Date from/Date to fields will be named `"yourprefix_from"` and `"yourprefix_to"` respectively. | `"daterange"` | `"myCustomName"` |
| nativeInputAriaLabel | `aria-label` for the native date input. | n/a | `"Date"` |
| onCalendarClose | Function called when the calendar closes. | n/a | `() => alert('Calendar closed')` |
| onCalendarOpen | Function called when the calendar opens. | n/a | `() => alert('Calendar opened')` |
| onChange | Function called when the user picks a valid date. If any of the fields were excluded using custom `format`, `new Date(y, 0, 1, 0, 0, 0)`, where `y` is the current year, is going to serve as a "base". | n/a | `(value) => alert('New date is: ', value)` |
| openCalendarOnFocus | Whether to open the calendar on input focus. | `true` | `false` |
| rangeDivider | Divider between date inputs. | `"–"` | `" to "` |
| required | Whether date input should be required. | `false` | `true` |
| showLeadingZeros | Whether leading zeros should be rendered in date inputs. | `false` | `true` |
| value | Input value. | n/a | <ul><li>Date: `new Date()`</li><li>An array of dates: `[new Date(2017, 0, 1), new Date(2017, 7, 1)]`</li></ul> |
| yearAriaLabel | `aria-label` for the year input. | n/a | `"Year"` |
| yearPlaceholder | `aria-label` for the year input. | `"----"` | `"yyyy"` |

@@ -125,0 +121,0 @@ ### Calendar

58

src/DateRangePicker.jsx

@@ -59,5 +59,4 @@ import React, { PureComponent } from 'react';

}
}
};
// eslint-disable-next-line react/destructuring-assignment
onChange = (value, closeCalendar = this.props.closeCalendar) => {

@@ -73,3 +72,3 @@ const { onChange } = this.props;

}
}
};

@@ -80,3 +79,3 @@ onChangeFrom = (valueFrom, closeCalendar) => {

this.onChange([valueFrom, valueTo], closeCalendar);
}
};

@@ -87,3 +86,3 @@ onChangeTo = (valueTo, closeCalendar) => {

this.onChange([valueFrom, valueTo], closeCalendar);
}
};

@@ -109,7 +108,13 @@ onFocus = (event) => {

}
}
};
onKeyDown = (event) => {
if (event.key === 'Escape') {
this.closeCalendar();
}
};
openCalendar = () => {
this.setState({ isOpen: true });
}
};

@@ -124,7 +129,7 @@ closeCalendar = () => {

});
}
};
toggleCalendar = () => {
this.setState((prevState) => ({ isOpen: !prevState.isOpen }));
}
};

@@ -141,2 +146,3 @@ stopPropagation = (event) => event.stopPropagation();

outsideActionEvents.forEach((eventName) => document[fnName](eventName, this.onOutsideAction));
document[fnName]('keydown', this.onKeyDown);
}

@@ -207,2 +213,3 @@

{...commonProps}
// eslint-disable-next-line jsx-a11y/no-autofocus
autoFocus={autoFocus}

@@ -214,5 +221,3 @@ name={`${name}_from`}

/>
<span className={`${baseClassName}__range-divider`}>
{rangeDivider}
</span>
<span className={`${baseClassName}__range-divider`}>{rangeDivider}</span>
<DateInput

@@ -274,3 +279,10 @@ {...commonProps}

<Fit>
<div className={mergeClassNames(className, `${className}--${isOpen ? 'open' : 'closed'}`)}>
<div
ref={(ref) => {
if (ref && !isOpen) {
ref.removeAttribute('style');
}
}}
className={mergeClassNames(className, `${className}--${isOpen ? 'open' : 'closed'}`)}
>
<Calendar

@@ -360,6 +372,3 @@ className={calendarClassName}

const isValue = PropTypes.oneOfType([
PropTypes.string,
PropTypes.instanceOf(Date),
]);
const isValue = PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]);

@@ -369,11 +378,5 @@ DateRangePicker.propTypes = {

calendarAriaLabel: PropTypes.string,
calendarClassName: PropTypes.oneOfType([
PropTypes.string,
PropTypes.arrayOf(PropTypes.string),
]),
calendarClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
calendarIcon: PropTypes.node,
className: PropTypes.oneOfType([
PropTypes.string,
PropTypes.arrayOf(PropTypes.string),
]),
className: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
clearAriaLabel: PropTypes.string,

@@ -405,8 +408,5 @@ clearIcon: PropTypes.node,

showLeadingZeros: PropTypes.bool,
value: PropTypes.oneOfType([
isValue,
PropTypes.arrayOf(isValue),
]),
value: PropTypes.oneOfType([isValue, PropTypes.arrayOf(isValue)]),
yearAriaLabel: PropTypes.string,
yearPlaceholder: PropTypes.string,
};

166

src/DateRangePicker.spec.jsx

@@ -8,5 +8,3 @@ import React from 'react';

it('passes default name to DateInput components', () => {
const component = mount(
<DateRangePicker />,
);
const component = mount(<DateRangePicker />);

@@ -22,5 +20,3 @@ const dateInput = component.find('DateInput');

const component = mount(
<DateRangePicker name={name} />,
);
const component = mount(<DateRangePicker name={name} />);

@@ -34,5 +30,4 @@ const dateInput = component.find('DateInput');

it('passes autoFocus flag to first DateInput component', () => {
const component = mount(
<DateRangePicker autoFocus />,
);
// eslint-disable-next-line jsx-a11y/no-autofocus
const component = mount(<DateRangePicker autoFocus />);

@@ -46,5 +41,3 @@ const dateInput = component.find('DateInput');

it('passes disabled flag to DateInput components', () => {
const component = mount(
<DateRangePicker disabled />,
);
const component = mount(<DateRangePicker disabled />);

@@ -60,5 +53,3 @@ const dateInput = component.find('DateInput');

const component = mount(
<DateRangePicker format={format} />,
);
const component = mount(<DateRangePicker format={format} />);

@@ -81,5 +72,3 @@ const dateInput = component.find('DateInput');

const component = mount(
<DateRangePicker {...ariaLabelProps} />,
);
const component = mount(<DateRangePicker {...ariaLabelProps} />);

@@ -109,5 +98,3 @@ const calendarButton = component.find('button.react-daterange-picker__calendar-button');

const component = mount(
<DateRangePicker {...placeholderProps} />,
);
const component = mount(<DateRangePicker {...placeholderProps} />);

@@ -128,5 +115,3 @@ const dateInput = component.find('DateInput');

const component = mount(
<DateRangePicker value={value} />,
);
const component = mount(<DateRangePicker value={value} />);

@@ -143,5 +128,3 @@ const dateInput = component.find('DateInput');

const component = mount(
<DateRangePicker value={[value1, value2]} />,
);
const component = mount(<DateRangePicker value={[value1, value2]} />);

@@ -158,5 +141,3 @@ const dateInput = component.find('DateInput');

const component = mount(
<DateRangePicker className={className} />,
);
const component = mount(<DateRangePicker className={className} />);

@@ -171,8 +152,3 @@ const wrapperClassName = component.prop('className');

const component = mount(
<DateRangePicker
calendarClassName={calendarClassName}
isOpen
/>,
);
const component = mount(<DateRangePicker calendarClassName={calendarClassName} isOpen />);

@@ -186,5 +162,3 @@ const calendar = component.find('Calendar');

it('renders DateInput components', () => {
const component = mount(
<DateRangePicker />,
);
const component = mount(<DateRangePicker />);

@@ -197,5 +171,3 @@ const dateInput = component.find('DateInput');

it('renders range divider with default divider', () => {
const component = mount(
<DateRangePicker />,
);
const component = mount(<DateRangePicker />);

@@ -209,5 +181,3 @@ const rangeDivider = component.find('.react-daterange-picker__range-divider');

it('renders range divider with custom divider', () => {
const component = mount(
<DateRangePicker rangeDivider="to" />,
);
const component = mount(<DateRangePicker rangeDivider="to" />);

@@ -221,5 +191,3 @@ const rangeDivider = component.find('.react-daterange-picker__range-divider');

it('renders clear button', () => {
const component = mount(
<DateRangePicker />,
);
const component = mount(<DateRangePicker />);

@@ -232,5 +200,3 @@ const clearButton = component.find('button.react-daterange-picker__clear-button');

it('renders calendar button', () => {
const component = mount(
<DateRangePicker />,
);
const component = mount(<DateRangePicker />);

@@ -243,5 +209,3 @@ const calendarButton = component.find('button.react-daterange-picker__calendar-button');

it('renders DateInput and Calendar components when given isOpen flag', () => {
const component = mount(
<DateRangePicker isOpen />,
);
const component = mount(<DateRangePicker isOpen />);

@@ -256,5 +220,3 @@ const dateInput = component.find('DateInput');

it('does not render Calendar component when given disableCalendar & isOpen flags', () => {
const component = mount(
<DateRangePicker disableCalendar isOpen />,
);
const component = mount(<DateRangePicker disableCalendar isOpen />);

@@ -269,5 +231,3 @@ const dateInput = component.find('DateInput');

it('opens Calendar component when given isOpen flag by changing props', () => {
const component = mount(
<DateRangePicker />,
);
const component = mount(<DateRangePicker />);

@@ -287,5 +247,3 @@ const calendar = component.find('Calendar');

it('opens Calendar component when clicking on a button', () => {
const component = mount(
<DateRangePicker />,
);
const component = mount(<DateRangePicker />);

@@ -307,5 +265,3 @@ const calendar = component.find('Calendar');

it('opens Calendar component when focusing on an input inside by default', () => {
const component = mount(
<DateRangePicker />,
);
const component = mount(<DateRangePicker />);

@@ -326,5 +282,3 @@ const calendar = component.find('Calendar');

it('opens Calendar component when focusing on an input inside given openCalendarOnFocus = true', () => {
const component = mount(
<DateRangePicker openCalendarOnFocus />,
);
const component = mount(<DateRangePicker openCalendarOnFocus />);

@@ -345,5 +299,3 @@ const calendar = component.find('Calendar');

it('does not open Calendar component when focusing on an input inside given openCalendarOnFocus = false', () => {
const component = mount(
<DateRangePicker openCalendarOnFocus={false} />,
);
const component = mount(<DateRangePicker openCalendarOnFocus={false} />);

@@ -364,5 +316,3 @@ const calendar = component.find('Calendar');

it('does not open Calendar component when focusing on a select element', () => {
const component = mount(
<DateRangePicker format="dd.MMMM.yyyy" />,
);
const component = mount(<DateRangePicker format="dd.MMMM.yyyy" />);

@@ -387,6 +337,3 @@ const calendar = component.find('Calendar');

const component = mount(
<DateRangePicker isOpen />,
{ attachTo: root },
);
const component = mount(<DateRangePicker isOpen />, { attachTo: root });

@@ -405,6 +352,3 @@ const event = document.createEvent('MouseEvent');

const component = mount(
<DateRangePicker isOpen />,
{ attachTo: root },
);
const component = mount(<DateRangePicker isOpen />, { attachTo: root });

@@ -423,6 +367,3 @@ const event = document.createEvent('FocusEvent');

const component = mount(
<DateRangePicker isOpen />,
{ attachTo: root },
);
const component = mount(<DateRangePicker isOpen />, { attachTo: root });

@@ -438,5 +379,3 @@ const event = document.createEvent('TouchEvent');

it('does not close Calendar component when focused inside', () => {
const component = mount(
<DateRangePicker isOpen />,
);
const component = mount(<DateRangePicker isOpen />);

@@ -455,5 +394,3 @@ const customInputs = component.find('input[type="number"]');

it('closes Calendar when calling internal onChange by default', () => {
const component = mount(
<DateRangePicker isOpen />,
);
const component = mount(<DateRangePicker isOpen />);

@@ -468,8 +405,3 @@ const { onChange } = component.instance();

it('does not close Calendar when calling internal onChange with prop closeCalendar = false', () => {
const component = mount(
<DateRangePicker
closeCalendar={false}
isOpen
/>,
);
const component = mount(<DateRangePicker closeCalendar={false} isOpen />);

@@ -484,5 +416,3 @@ const { onChange } = component.instance();

it('does not close Calendar when calling internal onChange with closeCalendar = false', () => {
const component = mount(
<DateRangePicker isOpen />,
);
const component = mount(<DateRangePicker isOpen />);

@@ -500,5 +430,3 @@ const { onChange } = component.instance();

const component = mount(
<DateRangePicker onChange={onChange} />,
);
const component = mount(<DateRangePicker onChange={onChange} />);

@@ -515,5 +443,3 @@ const { onChange: onChangeInternal } = component.instance();

const component = mount(
<DateRangePicker onChange={onChange} />,
);
const component = mount(<DateRangePicker onChange={onChange} />);

@@ -533,5 +459,3 @@ const calendar = component.find('Calendar');

it('calls onChange properly given no initial value', () => {
const component = mount(
<DateRangePicker />,
);
const component = mount(<DateRangePicker />);

@@ -552,5 +476,3 @@ const componentInstance = component.instance();

const component = mount(
<DateRangePicker value={value} />,
);
const component = mount(<DateRangePicker value={value} />);

@@ -573,5 +495,3 @@ const componentInstance = component.instance();

const component = mount(
<DateRangePicker value={value} />,
);
const component = mount(<DateRangePicker value={value} />);

@@ -592,5 +512,3 @@ const componentInstance = component.instance();

it('calls onChange properly given no initial value', () => {
const component = mount(
<DateRangePicker />,
);
const component = mount(<DateRangePicker />);

@@ -611,5 +529,3 @@ const componentInstance = component.instance();

const component = mount(
<DateRangePicker value={value} />,
);
const component = mount(<DateRangePicker value={value} />);

@@ -632,5 +548,3 @@ const componentInstance = component.instance();

const component = mount(
<DateRangePicker value={value} />,
);
const component = mount(<DateRangePicker value={value} />);

@@ -637,0 +551,0 @@ const componentInstance = component.instance();

0

src/entry.js

@@ -0,0 +0,0 @@ import 'react-calendar/dist/Calendar.css';

0

src/entry.nostyle.js
import DateRangePicker from './DateRangePicker';
export default DateRangePicker;

16

src/shared/propTypes.js

@@ -9,3 +9,5 @@ export const isMinDate = (props, propName, componentName) => {

if (!(minDate instanceof Date)) {
return new Error(`Invalid prop \`${propName}\` of type \`${typeof minDate}\` supplied to \`${componentName}\`, expected instance of \`Date\`.`);
return new Error(
`Invalid prop \`${propName}\` of type \`${typeof minDate}\` supplied to \`${componentName}\`, expected instance of \`Date\`.`,
);
}

@@ -16,3 +18,5 @@

if (maxDate && minDate > maxDate) {
return new Error(`Invalid prop \`${propName}\` of type \`${typeof minDate}\` supplied to \`${componentName}\`, minDate cannot be larger than maxDate.`);
return new Error(
`Invalid prop \`${propName}\` of type \`${typeof minDate}\` supplied to \`${componentName}\`, minDate cannot be larger than maxDate.`,
);
}

@@ -31,3 +35,5 @@

if (!(maxDate instanceof Date)) {
return new Error(`Invalid prop \`${propName}\` of type \`${typeof maxDate}\` supplied to \`${componentName}\`, expected instance of \`Date\`.`);
return new Error(
`Invalid prop \`${propName}\` of type \`${typeof maxDate}\` supplied to \`${componentName}\`, expected instance of \`Date\`.`,
);
}

@@ -38,3 +44,5 @@

if (minDate && maxDate < minDate) {
return new Error(`Invalid prop \`${propName}\` of type \`${typeof maxDate}\` supplied to \`${componentName}\`, maxDate cannot be smaller than minDate.`);
return new Error(
`Invalid prop \`${propName}\` of type \`${typeof maxDate}\` supplied to \`${componentName}\`, maxDate cannot be smaller than minDate.`,
);
}

@@ -41,0 +49,0 @@ 

dist/DateRangePicker.less

Sorry, the diff of this file is not supported yet

LICENSE

Sorry, the diff of this file is not supported yet

src/DateRangePicker.less

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

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

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc