Socket
Socket
Sign inDemoInstall

react-date-picker

Package Overview
Dependencies
Maintainers
1
Versions
259
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-date-picker - npm Package Compare versions

Comparing version 8.1.0-beta to 8.1.0

43

dist/DateInput.js

@@ -183,24 +183,2 @@ "use strict";

function isInputValid(input) {
if (!input.validity.valid) {
return false;
}
var value = input.value;
if (!value) {
return false;
}
var rawValue = Number(value);
var min = Number(input.getAttribute('min'));
var max = Number(input.getAttribute('max'));
if (rawValue < min || rawValue > max) {
return false;
}
return true;
}
function focus(element) {

@@ -303,4 +281,3 @@ if (element) {

var maxLength = input.maxLength,
value = input.value;
var value = input.value;
var max = input.getAttribute('max');

@@ -314,3 +291,3 @@ /**

if (value * 10 > max || value.length >= maxLength) {
if (value * 10 > max || value.length >= max.length) {
var property = 'nextElementSibling';

@@ -349,5 +326,5 @@ var nextInput = findInput(input, property);

var year = Number(yearString);
var monthIndex = Number(monthString) - 1 || 0;
var day = Number(dayString) || 1;
var year = parseInt(yearString, 10);
var monthIndex = parseInt(monthString, 10) - 1 || 0;
var day = parseInt(dayString, 10) || 1;
var proposedValue = new Date();

@@ -379,6 +356,8 @@ proposedValue.setFullYear(year, monthIndex, day);

onChange(null, false);
} else if (formElements.every(isInputValid)) {
var year = Number(values.year);
var monthIndex = Number(values.month) - 1 || 0;
var day = Number(values.day || 1);
} else if (formElements.every(function (formElement) {
return formElement.value && formElement.validity.valid;
})) {
var year = parseInt(values.year, 10);
var monthIndex = parseInt(values.month, 10) - 1 || 0;
var day = parseInt(values.day || 1, 10);
var proposedValue = new Date();

@@ -385,0 +364,0 @@ proposedValue.setFullYear(year, monthIndex, day);

10

dist/DateInput/DayInput.js

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

function isSameMonth(date) {
return date && Number(year) === (0, _dateUtils.getYear)(date) && Number(month) === (0, _dateUtils.getMonthHuman)(date);
return date && year === (0, _dateUtils.getYear)(date).toString() && month === (0, _dateUtils.getMonthHuman)(date).toString();
}

@@ -57,4 +57,2 @@

var isValue = _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]);
DayInput.propTypes = {

@@ -67,3 +65,3 @@ ariaLabel: _propTypes["default"].string,

minDate: _propTypes2.isMinDate,
month: isValue,
month: _propTypes["default"].string,
onChange: _propTypes["default"].func,

@@ -75,4 +73,4 @@ onKeyDown: _propTypes["default"].func,

showLeadingZeros: _propTypes["default"].bool,
value: isValue,
year: isValue
value: _propTypes["default"].string,
year: _propTypes["default"].string
};

125

dist/DateInput/Input.js

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

var _predictInputValue = _interopRequireDefault(require("@wojtekmaj/predict-input-value"));
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

@@ -66,41 +64,23 @@

function addLeadingZero(value, max) {
return "0".concat(value).slice(-"".concat(max).length);
}
function getSelectionString() {
if (typeof window === 'undefined') {
return null;
}
function makeOnKeyDown(_ref) {
var max = _ref.max,
min = _ref.min,
onChange = _ref.onChange,
showLeadingZeros = _ref.showLeadingZeros;
return function onKeyDown(event) {
switch (event.key) {
case 'ArrowUp':
case 'ArrowDown':
{
event.preventDefault();
var input = event.target;
var value = input.value;
var numericValue = Number(value);
var rawNextValue = numericValue + (event.key === 'ArrowUp' ? 1 : -1);
var limitedRawNextValue = Math.min(max, Math.max(min, rawNextValue));
var hasLeadingZero = showLeadingZeros && limitedRawNextValue < 10;
var nextValue = hasLeadingZero ? addLeadingZero(limitedRawNextValue, max) : limitedRawNextValue;
input.value = nextValue;
onChange(event);
break;
}
default:
}
};
return window.getSelection().toString();
}
function makeOnKeyPress(max) {
function makeOnKeyPress(maxLength) {
/**
* Prevents keystrokes that would not produce a number or when value after keystroke would
* exceed maxLength.
*/
return function onKeyPress(event) {
var key = event.key;
var key = event.key,
input = event.target;
var value = input.value;
var isNumberKey = !isNaN(parseInt(key, 10));
var nextValue = (0, _predictInputValue["default"])(event);
var selection = getSelectionString();
if (isNumberKey && nextValue <= max) {
if (isNumberKey && (selection || value.length < maxLength)) {
return;

@@ -113,29 +93,23 @@ }

function Input(_ref2) {
var ariaLabel = _ref2.ariaLabel,
autoFocus = _ref2.autoFocus,
className = _ref2.className,
disabled = _ref2.disabled,
itemRef = _ref2.itemRef,
max = _ref2.max,
min = _ref2.min,
name = _ref2.name,
nameForClass = _ref2.nameForClass,
onChange = _ref2.onChange,
_onKeyDown = _ref2.onKeyDown,
_onKeyUp = _ref2.onKeyUp,
_ref2$placeholder = _ref2.placeholder,
placeholder = _ref2$placeholder === void 0 ? '--' : _ref2$placeholder,
required = _ref2.required,
showLeadingZeros = _ref2.showLeadingZeros,
step = _ref2.step,
value = _ref2.value;
var hasLeadingZero = showLeadingZeros && value !== null && value !== undefined && value.toString().length < 2;
var onKeyDownInternal = makeOnKeyDown({
max: max,
min: min,
onChange: onChange,
showLeadingZeros: showLeadingZeros
});
var onKeyPressInternal = makeOnKeyPress(max);
function Input(_ref) {
var ariaLabel = _ref.ariaLabel,
autoFocus = _ref.autoFocus,
className = _ref.className,
disabled = _ref.disabled,
itemRef = _ref.itemRef,
max = _ref.max,
min = _ref.min,
name = _ref.name,
nameForClass = _ref.nameForClass,
onChange = _ref.onChange,
onKeyDown = _ref.onKeyDown,
_onKeyUp = _ref.onKeyUp,
_ref$placeholder = _ref.placeholder,
placeholder = _ref$placeholder === void 0 ? '--' : _ref$placeholder,
required = _ref.required,
showLeadingZeros = _ref.showLeadingZeros,
step = _ref.step,
value = _ref.value;
var hasLeadingZero = showLeadingZeros && value && value < 10 && !value.toString().startsWith('0');
var maxLength = max ? max.toString().length : null;
return [hasLeadingZero && /*#__PURE__*/_react["default"].createElement("span", {

@@ -154,3 +128,2 @@ key: "leadingZero",

max: max,
maxLength: "".concat(max).length,
min: min,

@@ -160,10 +133,4 @@ name: name,

onFocus: onFocus,
onKeyDown: function onKeyDown(event) {
onKeyDownInternal(event);
if (_onKeyDown) {
_onKeyDown(event);
}
},
onKeyPress: onKeyPressInternal,
onKeyDown: onKeyDown,
onKeyPress: makeOnKeyPress(maxLength),
onKeyUp: function onKeyUp(event) {

@@ -177,10 +144,10 @@ (0, _updateInputWidth["default"])(event.target);

placeholder: placeholder,
ref: function ref(_ref3) {
if (_ref3) {
(0, _updateInputWidth["default"])(_ref3);
updateInputWidthOnFontLoad(_ref3);
ref: function ref(_ref2) {
if (_ref2) {
(0, _updateInputWidth["default"])(_ref2);
updateInputWidthOnFontLoad(_ref2);
}
if (itemRef) {
itemRef(_ref3, name);
itemRef(_ref2, name);
}

@@ -190,3 +157,3 @@ },

step: step,
type: "text",
type: "number",
value: value !== null ? value : ''

@@ -196,4 +163,2 @@ })];

var isValue = _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]);
Input.propTypes = {

@@ -216,3 +181,3 @@ ariaLabel: _propTypes["default"].string,

step: _propTypes["default"].number,
value: isValue
value: _propTypes["default"].string
};

8

dist/DateInput/MonthInput.js

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

function isSameYear(date) {
return date && Number(year) === (0, _dateUtils.getYear)(date);
return date && year === (0, _dateUtils.getYear)(date).toString();
}

@@ -48,4 +48,2 @@

var isValue = _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]);
MonthInput.propTypes = {

@@ -64,4 +62,4 @@ ariaLabel: _propTypes["default"].string,

showLeadingZeros: _propTypes["default"].bool,
value: isValue,
year: isValue
value: _propTypes["default"].string,
year: _propTypes["default"].string
};

8

dist/DateInput/MonthSelect.js

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

function isSameYear(date) {
return date && Number(year) === (0, _dateUtils.getYear)(date);
return date && year === (0, _dateUtils.getYear)(date).toString();
}

@@ -94,4 +94,2 @@

var isValue = _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]);
MonthSelect.propTypes = {

@@ -111,4 +109,4 @@ ariaLabel: _propTypes["default"].string,

"short": _propTypes["default"].bool,
value: isValue,
year: isValue
value: _propTypes["default"].string,
year: _propTypes["default"].string
};

4

dist/DateInput/YearInput.js

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

var isValue = _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]);
YearInput.propTypes = {

@@ -71,4 +69,4 @@ ariaLabel: _propTypes["default"].string,

required: _propTypes["default"].bool,
value: isValue,
value: _propTypes["default"].string,
valueType: _propTypes2.isValueType
};

3

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

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

"@wojtekmaj/date-utils": "^1.0.3",
"@wojtekmaj/predict-input-value": "^1.0.0",
"get-user-locale": "^1.2.0",

@@ -80,0 +79,0 @@ "make-event-props": "^1.1.0",

42

src/DateInput.jsx

@@ -111,24 +111,2 @@ import React, { PureComponent } from 'react';

function isInputValid(input) {
if (!input.validity.valid) {
return false;
}
const { value } = input;
if (!value) {
return false;
}
const rawValue = Number(value);
const min = Number(input.getAttribute('min'));
const max = Number(input.getAttribute('max'));
if (rawValue < min || rawValue > max) {
return false;
}
return true;
}
function focus(element) {

@@ -378,3 +356,3 @@ if (element) {

const { maxLength, value } = input;
const { value } = input;
const max = input.getAttribute('max');

@@ -388,3 +366,3 @@

*/
if ((value * 10 > max) || (value.length >= maxLength)) {
if ((value * 10 > max) || (value.length >= max.length)) {
const property = 'nextElementSibling';

@@ -425,5 +403,5 @@ const nextInput = findInput(input, property);

const [yearString, monthString, dayString] = value.split('-');
const year = Number(yearString);
const monthIndex = Number(monthString) - 1 || 0;
const day = Number(dayString) || 1;
const year = parseInt(yearString, 10);
const monthIndex = parseInt(monthString, 10) - 1 || 0;
const day = parseInt(dayString, 10) || 1;

@@ -460,6 +438,8 @@ const proposedValue = new Date();

onChange(null, false);
} else if (formElements.every(isInputValid)) {
const year = Number(values.year);
const monthIndex = Number(values.month) - 1 || 0;
const day = Number(values.day || 1);
} else if (
formElements.every((formElement) => formElement.value && formElement.validity.valid)
) {
const year = parseInt(values.year, 10);
const monthIndex = parseInt(values.month, 10) - 1 || 0;
const day = parseInt(values.day || 1, 10);

@@ -466,0 +446,0 @@ const proposedValue = new Date();

10

src/DateInput/DayInput.jsx

@@ -31,3 +31,3 @@ import React from 'react';

function isSameMonth(date) {
return date && Number(year) === getYear(date) && Number(month) === getMonthHuman(date);
return date && year === getYear(date).toString() && month === getMonthHuman(date).toString();
}

@@ -48,4 +48,2 @@

const isValue = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
DayInput.propTypes = {

@@ -58,3 +56,3 @@ ariaLabel: PropTypes.string,

minDate: isMinDate,
month: isValue,
month: PropTypes.string,
onChange: PropTypes.func,

@@ -66,4 +64,4 @@ onKeyDown: PropTypes.func,

showLeadingZeros: PropTypes.bool,
value: isValue,
year: isValue,
value: PropTypes.string,
year: PropTypes.string,
};

41

src/DateInput/DayInput.spec.jsx

@@ -27,3 +27,3 @@ import React from 'react';

showLeadingZeros
value={9}
value="9"
/>,

@@ -38,2 +38,17 @@ );

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

@@ -44,3 +59,3 @@ const component = mount(

showLeadingZeros
value={10}
value="10"
/>,

@@ -59,3 +74,3 @@ );

{...defaultProps}
value={9}
value="9"
/>,

@@ -216,4 +231,4 @@ );

minDate={new Date(2017, 11, 15)}
month={1}
year={2018}
month="1"
year="2018"
/>,

@@ -232,4 +247,4 @@ );

minDate={new Date(2018, 0, 15)}
month={1}
year={2018}
month="1"
year="2018"
/>,

@@ -249,4 +264,4 @@ );

{...defaultProps}
month={1}
year={2018}
month="1"
year="2018"
/>,

@@ -267,4 +282,4 @@ );

maxDate={new Date(2018, 1, 15)}
month={1}
year={2018}
month="1"
year="2018"
/>,

@@ -283,4 +298,4 @@ );

maxDate={new Date(2018, 0, 15)}
month={1}
year={2018}
month="1"
year="2018"
/>,

@@ -287,0 +302,0 @@ );

81

src/DateInput/Input.jsx

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

import updateInputWidth, { getFontShorthand } from 'update-input-width';
import predictInputValue from '@wojtekmaj/predict-input-value';

@@ -50,47 +49,23 @@ /* eslint-disable jsx-a11y/no-autofocus */

function addLeadingZero(value, max) {
return `0${value}`.slice(-(`${max}`.length));
}
function getSelectionString() {
if (typeof window === 'undefined') {
return null;
}
function makeOnKeyDown({
max, min, onChange, showLeadingZeros,
}) {
return function onKeyDown(event) {
switch (event.key) {
case 'ArrowUp':
case 'ArrowDown': {
event.preventDefault();
const { target: input } = event;
const { value } = input;
const numericValue = Number(value);
const rawNextValue = numericValue + (event.key === 'ArrowUp' ? 1 : -1);
const limitedRawNextValue = Math.min(max, Math.max(min, rawNextValue));
const hasLeadingZero = showLeadingZeros && limitedRawNextValue < 10;
const nextValue = (hasLeadingZero
? addLeadingZero(limitedRawNextValue, max)
: limitedRawNextValue
);
input.value = nextValue;
onChange(event);
break;
}
default:
}
};
return window.getSelection().toString();
}
function makeOnKeyPress(max) {
function makeOnKeyPress(maxLength) {
/**
* Prevents keystrokes that would not produce a number or when value after keystroke would
* exceed maxLength.
*/
return function onKeyPress(event) {
const { key } = event;
const { key, target: input } = event;
const { value } = input;
const isNumberKey = !isNaN(parseInt(key, 10));
const nextValue = predictInputValue(event);
const selection = getSelectionString();
if (isNumberKey && (nextValue <= max)) {
if (isNumberKey && (selection || value.length < maxLength)) {
return;

@@ -124,11 +99,8 @@ }

showLeadingZeros
&& (value !== null && value !== undefined)
&& value.toString().length < 2
&& value
&& value < 10
&& !value.toString().startsWith('0')
);
const maxLength = max ? max.toString().length : null;
const onKeyDownInternal = makeOnKeyDown({
max, min, onChange, showLeadingZeros,
});
const onKeyPressInternal = makeOnKeyPress(max);
return [

@@ -150,3 +122,2 @@ (hasLeadingZero && <span key="leadingZero" className={`${className}__leadingZero`}>0</span>),

max={max}
maxLength={`${max}`.length}
min={min}

@@ -156,10 +127,4 @@ name={name}

onFocus={onFocus}
onKeyDown={(event) => {
onKeyDownInternal(event);
if (onKeyDown) {
onKeyDown(event);
}
}}
onKeyPress={onKeyPressInternal}
onKeyDown={onKeyDown}
onKeyPress={makeOnKeyPress(maxLength)}
onKeyUp={(event) => {

@@ -185,3 +150,3 @@ updateInputWidth(event.target);

step={step}
type="text"
type="number"
value={value !== null ? value : ''}

@@ -192,4 +157,2 @@ />,

const isValue = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
Input.propTypes = {

@@ -212,3 +175,3 @@ ariaLabel: PropTypes.string,

step: PropTypes.number,
value: isValue,
value: PropTypes.string,
};

8

src/DateInput/MonthInput.jsx

@@ -17,3 +17,3 @@ import React from 'react';

function isSameYear(date) {
return date && Number(year) === getYear(date);
return date && year === getYear(date).toString();
}

@@ -34,4 +34,2 @@

const isValue = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
MonthInput.propTypes = {

@@ -50,4 +48,4 @@ ariaLabel: PropTypes.string,

showLeadingZeros: PropTypes.bool,
value: isValue,
year: isValue,
value: PropTypes.string,
year: PropTypes.string,
};

35

src/DateInput/MonthInput.spec.jsx

@@ -22,3 +22,3 @@ import React from 'react';

it('renders "0" given showLeadingZeros if day is <10', () => {
it('renders "0" given showLeadingZeros if month is <10', () => {
const component = mount(

@@ -28,3 +28,3 @@ <MonthInput

showLeadingZeros
value={9}
value="9"
/>,

@@ -39,3 +39,3 @@ );

it('does not render "0" given showLeadingZeros if day is >=10', () => {
it('does not render "0" given showLeadingZeros if month is <10 with leading zero already', () => {
const component = mount(

@@ -45,3 +45,3 @@ <MonthInput

showLeadingZeros
value={10}
value="09"
/>,

@@ -56,2 +56,17 @@ );

it('does not render "0" given showLeadingZeros if month is >=10', () => {
const component = mount(
<MonthInput
{...defaultProps}
showLeadingZeros
value="10"
/>,
);
const input = component.find('input');
expect(component.text()).not.toContain('0');
expect(input.prop('className')).not.toContain(`${defaultProps.className}__input--hasLeadingZero`);
});
it('does not render "0" if not given showLeadingZeros', () => {

@@ -61,3 +76,3 @@ const component = mount(

{...defaultProps}
value={9}
value="9"
/>,

@@ -218,3 +233,3 @@ );

minDate={new Date(2017, 6, 1)}
year={2018}
year="2018"
/>,

@@ -233,3 +248,3 @@ );

minDate={new Date(2018, 6, 1)}
year={2018}
year="2018"
/>,

@@ -247,3 +262,3 @@ );

{...defaultProps}
year={2018}
year="2018"
/>,

@@ -262,3 +277,3 @@ );

maxDate={new Date(2019, 6, 1)}
year={2018}
year="2018"
/>,

@@ -277,3 +292,3 @@ );

maxDate={new Date(2018, 6, 1)}
year={2018}
year="2018"
/>,

@@ -280,0 +295,0 @@ );

8

src/DateInput/MonthSelect.jsx

@@ -24,3 +24,3 @@ import React from 'react';

function isSameYear(date) {
return date && Number(year) === getYear(date);
return date && year === getYear(date).toString();
}

@@ -74,4 +74,2 @@

const isValue = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
MonthSelect.propTypes = {

@@ -91,4 +89,4 @@ ariaLabel: PropTypes.string,

short: PropTypes.bool,
value: isValue,
year: isValue,
value: PropTypes.string,
year: PropTypes.string,
};

8

src/DateInput/MonthSelect.spec.jsx

@@ -185,3 +185,3 @@ import React from 'react';

minDate={new Date(2017, 6, 1)}
year={2018}
year="2018"
/>,

@@ -203,3 +203,3 @@ );

minDate={new Date(2018, 6, 1)}
year={2018}
year="2018"
/>,

@@ -226,3 +226,3 @@ );

maxDate={new Date(2019, 6, 1)}
year={2018}
year="2018"
/>,

@@ -244,3 +244,3 @@ );

maxDate={new Date(2018, 6, 1)}
year={2018}
year="2018"
/>,

@@ -247,0 +247,0 @@ );

4

src/DateInput/YearInput.jsx

@@ -40,4 +40,2 @@ import React from 'react';

const isValue = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
YearInput.propTypes = {

@@ -55,4 +53,4 @@ ariaLabel: PropTypes.string,

required: PropTypes.bool,
value: isValue,
value: PropTypes.string,
valueType: isValueType,
};
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