New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@wojtekmaj/react-datetimerange-picker

Package Overview
Dependencies
Maintainers
1
Versions
40
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

Comparing version 3.4.2 to 3.5.0

34

dist/DateTimeRangePicker.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); }

@@ -44,5 +44,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; }

@@ -65,5 +65,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); }

@@ -225,2 +225,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.closeWidgets();
}
});
_defineProperty(_assertThisInitialized(_this), "openClock", function () {

@@ -331,2 +337,3 @@ _this.setState({

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

@@ -412,2 +419,3 @@ }, {

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

@@ -462,2 +470,7 @@ name: "".concat(name, "_from"),

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

@@ -497,2 +510,7 @@ }, /*#__PURE__*/_react["default"].createElement(_reactCalendar["default"], _extends({

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

@@ -524,8 +542,8 @@ }, /*#__PURE__*/_react["default"].createElement(_reactClock["default"], _extends({

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

@@ -532,0 +550,0 @@ }), this.renderInputs(), this.renderCalendar(), this.renderClock());

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-datetimerange-picker",
"version": "3.4.2",
"version": "3.5.0",
"description": "A datetime 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",

@@ -45,4 +44,4 @@ "prepack": "yarn clean && yarn build",

"react-clock": "^3.0.0",
"react-datetime-picker": "^3.4.1",
"react-fit": "^1.0.3"
"react-datetime-picker": "^3.5.0",
"react-fit": "^1.4.0"
},

@@ -55,8 +54,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",

@@ -67,4 +68,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"
},

@@ -78,6 +79,4 @@ "resolutions": {

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

@@ -88,3 +87,4 @@ "repository": {

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

110

README.md

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

[![npm](https://img.shields.io/npm/v/@wojtekmaj/react-datetimerange-picker.svg)](https://www.npmjs.com/package/@wojtekmaj/react-datetimerange-picker) ![downloads](https://img.shields.io/npm/dt/@wojtekmaj/react-datetimerange-picker.svg) [![CI](https://github.com/wojtekmaj/react-datetimerange-picker/workflows/CI/badge.svg)](https://github.com/wojtekmaj/react-datetimerange-picker/actions) ![dependencies](https://img.shields.io/david/wojtekmaj/react-datetimerange-picker.svg
) ![dev dependencies](https://img.shields.io/david/dev/wojtekmaj/react-datetimerange-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-datetimerange-picker.svg)](https://www.npmjs.com/package/@wojtekmaj/react-datetimerange-picker) ![downloads](https://img.shields.io/npm/dt/@wojtekmaj/react-datetimerange-picker.svg) [![CI](https://github.com/wojtekmaj/react-datetimerange-picker/workflows/CI/badge.svg)](https://github.com/wojtekmaj/react-datetimerange-picker/actions) ![dependencies](https://img.shields.io/david/wojtekmaj/react-datetimerange-picker.svg) ![dev dependencies](https://img.shields.io/david/dev/wojtekmaj/react-datetimerange-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-DateTimeRange-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-datetimerange-picker` or `yarn add @wojtekmaj/react-datetimerange-picker`.
* Import by adding `import DateTimeRangePicker from '@wojtekmaj/react-datetimerange-picker'`.
* Use by adding `<DateTimeRangePicker />`. Use `onChange` prop for getting new values.
- Install by executing `npm install @wojtekmaj/react-datetimerange-picker` or `yarn add @wojtekmaj/react-datetimerange-picker`.
- Import by adding `import DateTimeRangePicker from '@wojtekmaj/react-datetimerange-picker'`.
- Use by adding `<DateTimeRangePicker />`. Use `onChange` prop for getting new values.
## Demo

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

| React version | Newest compatible React-DateTimeRange-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-DateTimeRange-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>
<DateTimeRangePicker
onChange={onChange}
value={value}
/>
<DateTimeRangePicker onChange={onChange} value={value} />
</div>

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

|Prop name|Description|Default value|Example values|
|----|----|----|----|
|amPmAriaLabel|`aria-label` for the AM/PM select input.|n/a|`"Select AM/PM"`|
|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-datetimerange-picker"` to the main React-DateTimeRange-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>|
|clockClassName|Class name(s) that will be added along with `"react-clock"` to the main React-Calendar `<div>` element.|n/a|<ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul>|
|closeWidgets|Whether to close the widgets on value selection.|`true`|`false`|
|dayAriaLabel|`aria-label` for the day input.|n/a|`"Day"`|
|disabled|Whether the datetime range picker should be disabled.|`false`|`true`|
|disableCalendar|When set to `true`, will remove the calendar and the button toggling its visibility.|`false`|`true`|
|disableClock|When set to `true`, will remove the clock.|`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`, `H`, `HH`, `h`, `hh`, `m`, `mm`, `s`, `ss`, `a`.|n/a|`"y-MM-dd h:mm:ss a"`|
|hourAriaLabel|`aria-label` for the hour input.|n/a|`"Hour"`|
|isCalendarOpen|Whether the calendar should be opened.|`false`|`true`|
|isClockOpen|Whether the clock should be opened.|`false`|`true`|
|locale|Locale that should be used by the datetime 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-DateTimeRange-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 `"hour"`, `"minute"` or `"second"`. Don't need hour picking? Try [React-DateRange-Picker](https://github.com/wojtekmaj/react-daterange-picker)!|`"minute"`|`"second"`|
|minDate|Minimum date that the user can select. Periods partially overlapped by minDate will also be selectable, although React-DateTimeRange-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"`|
|minuteAriaLabel|`aria-label` for the minute input.|n/a|`"Minute"`|
|monthAriaLabel|`aria-label` for the month input.|n/a|`"Month"`|
|name|Input name prefix. Date from/Date to fields will be named `"yourprefix_from"` and `"yourprefix_to"` respectively.|`"datetimerange"`|`"myCustomName"`|
|nativeInputAriaLabel|`aria-label` for the native datetime 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)`|
|onClockClose|Function called when the clock closes.|n/a|`() => alert('Clock closed')`|
|onClockOpen|Function called when the clock opens.|n/a|`() => alert('Clock opened')`|
|openWidgetsOnFocus|Whether to open the widgets on input focus.|`true`|`false`|
|rangeDivider|Divider between datetime inputs.|`"–"`|`" to "`|
|required|Whether datetime input should be required.|`false`|`true`|
|secondAriaLabel|`aria-label` for the second input.|n/a|`"Second"`|
|showLeadingZeros|Whether leading zeros should be rendered in datetime 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"`|
| Prop name | Description | Default value | Example values |
| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | -------------------------------------------------------------------------------------------------------------- |
| amPmAriaLabel | `aria-label` for the AM/PM select input. | n/a | `"Select AM/PM"` |
| 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-datetimerange-picker"` to the main React-DateTimeRange-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> |
| clockClassName | Class name(s) that will be added along with `"react-clock"` to the main React-Calendar `<div>` element. | n/a | <ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul> |
| closeWidgets | Whether to close the widgets on value selection. | `true` | `false` |
| dayAriaLabel | `aria-label` for the day input. | n/a | `"Day"` |
| disabled | Whether the datetime range picker should be disabled. | `false` | `true` |
| disableCalendar | When set to `true`, will remove the calendar and the button toggling its visibility. | `false` | `true` |
| disableClock | When set to `true`, will remove the clock. | `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`, `H`, `HH`, `h`, `hh`, `m`, `mm`, `s`, `ss`, `a`. | n/a | `"y-MM-dd h:mm:ss a"` |
| hourAriaLabel | `aria-label` for the hour input. | n/a | `"Hour"` |
| isCalendarOpen | Whether the calendar should be opened. | `false` | `true` |
| isClockOpen | Whether the clock should be opened. | `false` | `true` |
| locale | Locale that should be used by the datetime 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-DateTimeRange-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 `"hour"`, `"minute"` or `"second"`. Don't need hour picking? Try [React-DateRange-Picker](https://github.com/wojtekmaj/react-daterange-picker)! | `"minute"` | `"second"` |
| minDate | Minimum date that the user can select. Periods partially overlapped by minDate will also be selectable, although React-DateTimeRange-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"` |
| minuteAriaLabel | `aria-label` for the minute input. | n/a | `"Minute"` |
| monthAriaLabel | `aria-label` for the month input. | n/a | `"Month"` |
| name | Input name prefix. Date from/Date to fields will be named `"yourprefix_from"` and `"yourprefix_to"` respectively. | `"datetimerange"` | `"myCustomName"` |
| nativeInputAriaLabel | `aria-label` for the native datetime 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 datetime. 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)` |
| onClockClose | Function called when the clock closes. | n/a | `() => alert('Clock closed')` |
| onClockOpen | Function called when the clock opens. | n/a | `() => alert('Clock opened')` |
| openWidgetsOnFocus | Whether to open the widgets on input focus. | `true` | `false` |
| rangeDivider | Divider between datetime inputs. | `"–"` | `" to "` |
| required | Whether datetime input should be required. | `false` | `true` |
| secondAriaLabel | `aria-label` for the second input. | n/a | `"Second"` |
| showLeadingZeros | Whether leading zeros should be rendered in datetime 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"` |

@@ -131,0 +127,0 @@ ### Calendar

95

src/DateTimeRangePicker.jsx

@@ -42,8 +42,3 @@ import React, { PureComponent } from 'react';

const { isCalendarOpen, isClockOpen } = this.state;
const {
onCalendarClose,
onCalendarOpen,
onClockClose,
onClockOpen,
} = this.props;
const { onCalendarClose, onCalendarOpen, onClockClose, onClockOpen } = this.props;

@@ -82,3 +77,3 @@ const isWidgetOpen = isCalendarOpen || isClockOpen;

}
}
};

@@ -122,5 +117,4 @@ onDateChange = ([valueFrom, valueTo], closeWidgets = true) => {

this.onChange([nextValueFrom, nextValueTo], closeWidgets);
}
};
// eslint-disable-next-line react/destructuring-assignment
onChange = (value, closeWidgets = this.props.closeWidgets) => {

@@ -136,3 +130,3 @@ const { onChange } = this.props;

}
}
};

@@ -143,3 +137,3 @@ onChangeFrom = (valueFrom, closeWidgets) => {

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

@@ -150,10 +144,6 @@ onChangeTo = (valueTo, closeWidgets) => {

this.onChange([valueFrom, valueTo], closeWidgets);
}
};
onFocus = (event) => {
const {
disabled,
onFocus,
openWidgetsOnFocus,
} = this.props;
const { disabled, onFocus, openWidgetsOnFocus } = this.props;

@@ -189,4 +179,10 @@ if (onFocus) {

}
}
};
onKeyDown = (event) => {
if (event.key === 'Escape') {
this.closeWidgets();
}
};
openClock = () => {

@@ -197,3 +193,3 @@ this.setState({

});
}
};

@@ -205,3 +201,3 @@ openCalendar = () => {

});
}
};

@@ -213,3 +209,3 @@ toggleCalendar = () => {

}));
}
};

@@ -227,3 +223,3 @@ closeWidgets = () => {

});
}
};

@@ -238,5 +234,7 @@ stopPropagation = (event) => event.stopPropagation();

const shouldListenWithFallback = typeof shouldListen !== 'undefined' ? shouldListen : isWidgetOpen;
const shouldListenWithFallback =
typeof shouldListen !== 'undefined' ? shouldListen : isWidgetOpen;
const fnName = shouldListenWithFallback ? 'addEventListener' : 'removeEventListener';
outsideActionEvents.forEach((eventName) => document[fnName](eventName, this.onOutsideAction));
document[fnName]('keydown', this.onKeyDown);
}

@@ -322,2 +320,3 @@

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

@@ -329,5 +328,3 @@ name={`${name}_from`}

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

@@ -390,3 +387,13 @@ {...commonProps}

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

@@ -428,3 +435,10 @@ className={calendarClassName}

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

@@ -517,6 +531,3 @@ className={clockClassName}

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

@@ -527,17 +538,8 @@ DateTimeRangePicker.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,
clearIcon: PropTypes.node,
clockClassName: PropTypes.oneOfType([
PropTypes.string,
PropTypes.arrayOf(PropTypes.string),
]),
clockClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
closeWidgets: PropTypes.bool,

@@ -576,8 +578,5 @@ dayAriaLabel: PropTypes.string,

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

252

src/DateTimeRangePicker.spec.jsx

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

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

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

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

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

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

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

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

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

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

@@ -85,5 +76,3 @@ const dateTimeInput = component.find('DateTimeInput');

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

@@ -122,5 +111,3 @@ const calendarButton = component.find('button.react-datetimerange-picker__calendar-button');

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

@@ -147,5 +134,3 @@ const dateTimeInput = component.find('DateTimeInput');

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

@@ -162,5 +147,3 @@ const dateTimeInput = component.find('DateTimeInput');

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

@@ -177,5 +160,3 @@ const dateTimeInput = component.find('DateTimeInput');

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

@@ -191,6 +172,3 @@ const wrapperClassName = component.prop('className');

const component = mount(
<DateTimeRangePicker
calendarClassName={calendarClassName}
isCalendarOpen
/>,
<DateTimeRangePicker calendarClassName={calendarClassName} isCalendarOpen />,
);

@@ -207,8 +185,3 @@

const component = mount(
<DateTimeRangePicker
clockClassName={clockClassName}
isClockOpen
/>,
);
const component = mount(<DateTimeRangePicker clockClassName={clockClassName} isClockOpen />);

@@ -222,5 +195,3 @@ const clock = component.find('Clock');

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

@@ -233,5 +204,3 @@ const dateTimeInput = component.find('DateTimeInput');

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

@@ -245,5 +214,3 @@ const rangeDivider = component.find('.react-datetimerange-picker__range-divider');

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

@@ -257,5 +224,3 @@ const rangeDivider = component.find('.react-datetimerange-picker__range-divider');

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

@@ -268,5 +233,3 @@ const clearButton = component.find('button.react-datetimerange-picker__clear-button');

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

@@ -279,5 +242,3 @@ const calendarButton = component.find('button.react-datetimerange-picker__calendar-button');

it('renders DateTimeInput and Calendar components when given isCalendarOpen flag', () => {
const component = mount(
<DateTimeRangePicker isCalendarOpen />,
);
const component = mount(<DateTimeRangePicker isCalendarOpen />);

@@ -292,5 +253,3 @@ const dateTimeInput = component.find('DateTimeInput');

it('renders DateTimeInput and Clock components when given isClockOpen flag', () => {
const component = mount(
<DateTimeRangePicker isClockOpen />,
);
const component = mount(<DateTimeRangePicker isClockOpen />);

@@ -305,5 +264,3 @@ const dateTimeInput = component.find('DateTimeInput');

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

@@ -318,5 +275,3 @@ const dateTimeInput = component.find('DateTimeInput');

it('does not render Clock component when given disableClock & isClockOpen flags', () => {
const component = mount(
<DateTimeRangePicker disableClock isClockOpen />,
);
const component = mount(<DateTimeRangePicker disableClock isClockOpen />);

@@ -331,5 +286,3 @@ const dateTimeInput = component.find('DateTimeInput');

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

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

it('opens Clock component when given isClockOpen flag by changing props', () => {
const component = mount(
<DateTimeRangePicker />,
);
const component = mount(<DateTimeRangePicker />);

@@ -367,5 +318,3 @@ const calendar = component.find('Clock');

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

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

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

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

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

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

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

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

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

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

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

@@ -484,5 +423,3 @@ const clock = component.find('Clock');

it('opens Clock component when focusing on an input inside given openWidgetsOnFocus = true', () => {
const component = mount(
<DateTimeRangePicker openWidgetsOnFocus />,
);
const component = mount(<DateTimeRangePicker openWidgetsOnFocus />);

@@ -503,5 +440,3 @@ const clock = component.find('Clock');

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

@@ -522,5 +457,3 @@ const clock = component.find('Clock');

it('does not open Clock component when focusing on a select element', () => {
const component = mount(
<DateTimeRangePicker format="dd.MMMM.yyyy hh:mm:ss a" />,
);
const component = mount(<DateTimeRangePicker format="dd.MMMM.yyyy hh:mm:ss a" />);

@@ -545,6 +478,3 @@ const clock = component.find('Clock');

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

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

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

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

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

@@ -599,6 +523,3 @@ const event = document.createEvent('TouchEvent');

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

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

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

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

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

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

it('does not close Calendar component when focused within date inputs', () => {
const component = mount(
<DateTimeRangePicker isCalendarOpen />,
);
const component = mount(<DateTimeRangePicker isCalendarOpen />);

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

it('does not close Clock component when focused within time inputs', () => {
const component = mount(
<DateTimeRangePicker isClockOpen />,
);
const component = mount(<DateTimeRangePicker isClockOpen />);

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

it('closes Clock when Calendar is opened by a click on the calendar icon', () => {
const component = mount(
<DateTimeRangePicker isClockOpen />,
);
const component = mount(<DateTimeRangePicker isClockOpen />);

@@ -705,5 +614,3 @@ const clock = component.find('Clock');

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

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

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

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

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

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

it('closes Clock when calling internal onChange by default', () => {
const component = mount(
<DateTimeRangePicker isClockOpen />,
);
const component = mount(<DateTimeRangePicker isClockOpen />);

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

it('does not close Clock when calling internal onChange with prop closeWidgets = false', () => {
const component = mount(
<DateTimeRangePicker
closeWidgets={false}
isClockOpen
/>,
);
const component = mount(<DateTimeRangePicker closeWidgets={false} isClockOpen />);

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

it('does not close Clock when calling internal onChange with closeWidgets = false', () => {
const component = mount(
<DateTimeRangePicker isClockOpen />,
);
const component = mount(<DateTimeRangePicker isClockOpen />);

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

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

@@ -816,6 +705,3 @@ const { onChange: onChangeInternal } = component.instance();

const component = mount(
<DateTimeRangePicker
onChange={onChange}
value={[valueFrom, valueTo]}
/>,
<DateTimeRangePicker onChange={onChange} value={[valueFrom, valueTo]} />,
);

@@ -845,6 +731,3 @@

const component = mount(
<DateTimeRangePicker
onChange={onChange}
value={[valueFrom, valueTo]}
/>,
<DateTimeRangePicker onChange={onChange} value={[valueFrom, valueTo]} />,
);

@@ -867,6 +750,3 @@

const component = mount(
<DateTimeRangePicker
onChange={onChange}
value={new Date(2018, 6, 17)}
/>,
<DateTimeRangePicker onChange={onChange} value={new Date(2018, 6, 17)} />,
);

@@ -884,5 +764,3 @@

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

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

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

@@ -921,5 +797,3 @@ const componentInstance = component.instance();

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

@@ -942,5 +816,3 @@ const componentInstance = component.instance();

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

@@ -961,5 +833,3 @@ const componentInstance = component.instance();

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

@@ -980,5 +850,3 @@ const componentInstance = component.instance();

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

@@ -1001,5 +869,3 @@ const componentInstance = component.instance();

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

@@ -1006,0 +872,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 DateTimeRangePicker from './DateTimeRangePicker';
export default DateTimeRangePicker;

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/DateTimeRangePicker.less

Sorry, the diff of this file is not supported yet

LICENSE

Sorry, the diff of this file is not supported yet

src/DateTimeRangePicker.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