react-date-picker - npm Package Compare versions

Comparing version 7.6.0 to 7.7.0

dist/DateInput.js

@@ -173,3 +173,4 @@ "use strict";
 
-var _renderCustomInputs = function renderCustomInputs(placeholder, elementFunctions) {
+var _renderCustomInputs = function renderCustomInputs(placeholder, elementFunctions, allowMultipleInstances) {
+  var usedFunctions = [];
   var pattern = new RegExp(Object.keys(elementFunctions).map(function (el) {
@@ -192,3 +193,9 @@ return "".concat(el, "+");
       })];
-      res.push(renderFunction(currentMatch));
+
+      if (!allowMultipleInstances && usedFunctions.includes(renderFunction)) {
+        res.push(currentMatch);
+      } else {
+        res.push(renderFunction(currentMatch));
+        usedFunctions.push(renderFunction);
+      }
     }
@@ -331,3 +338,6 @@
       })) {
-        var proposedValue = new Date(values.year, (values.month || 1) - 1, values.day || 1);
+        var year = parseInt(values.year, 10);
+        var month = parseInt(values.month || 1, 10);
+        var day = parseInt(values.day || 1, 10);
+        var proposedValue = new Date(year, month - 1, day);
 
@@ -447,2 +457,3 @@ var processedValue = _this.getProcessedValue(proposedValue);
       var placeholder = this.placeholder;
+      var format = this.props.format;
       var elementFunctions = {
@@ -453,3 +464,4 @@ d: this.renderDay,
       };
-      return _renderCustomInputs(placeholder, elementFunctions);
+      var allowMultipleInstances = typeof format !== 'undefined';
+      return _renderCustomInputs(placeholder, elementFunctions, allowMultipleInstances);
     }
@@ -632,2 +644,5 @@ }, {
 };
+
+var isValue = _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].instanceOf(Date)]);
+
 DateInput.propTypes = {
@@ -650,5 +665,5 @@ className: _propTypes["default"].string.isRequired,
   showLeadingZeros: _propTypes["default"].bool,
-  value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].instanceOf(Date), _propTypes["default"].arrayOf(_propTypes["default"].instanceOf(Date))]),
+  value: _propTypes["default"].oneOfType([isValue, _propTypes["default"].arrayOf(isValue)]),
   yearAriaLabel: _propTypes["default"].string
 };
 (0, _reactLifecyclesCompat.polyfill)(DateInput);

dist/DatePicker.js

@@ -24,2 +24,4 @@ "use strict";
 
+var _propTypes2 = require("./shared/propTypes");
+
 var _utils = require("./shared/utils");
@@ -29,10 +31,6 @@
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { if (i % 2) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } else { Object.defineProperties(target, Object.getOwnPropertyDescriptors(arguments[i])); } } return target; }
-
 function _typeof(obj) { 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 _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
@@ -42,2 +40,4 @@
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
@@ -71,2 +71,3 @@
 var outsideActionEvents = ['mousedown', 'focusin', 'touchstart'];
+var allViews = ['century', 'decade', 'year', 'month'];
 
@@ -211,2 +212,3 @@ var DatePicker =
           dayAriaLabel = _this$props3.dayAriaLabel,
+          disableCalendar = _this$props3.disableCalendar,
           disabled = _this$props3.disabled,
@@ -232,7 +234,12 @@ format = _this$props3.format,
 
+      var ariaLabelProps = {
+        dayAriaLabel: dayAriaLabel,
+        monthAriaLabel: monthAriaLabel,
+        nativeInputAriaLabel: nativeInputAriaLabel,
+        yearAriaLabel: yearAriaLabel
+      };
       return _react["default"].createElement("div", {
         className: "".concat(baseClassName, "__wrapper")
-      }, _react["default"].createElement(_DateInput["default"], {
+      }, _react["default"].createElement(_DateInput["default"], _extends({}, ariaLabelProps, {
         className: "".concat(baseClassName, "__inputGroup"),
-        dayAriaLabel: dayAriaLabel,
         disabled: disabled,
@@ -245,5 +252,3 @@ format: format,
         minDate: minDate,
-        monthAriaLabel: monthAriaLabel,
         name: name,
-        nativeInputAriaLabel: nativeInputAriaLabel,
         onChange: this.onChange,
@@ -253,5 +258,4 @@ required: required,
         showLeadingZeros: showLeadingZeros,
-        value: valueFrom,
-        yearAriaLabel: yearAriaLabel
-      }), clearIcon !== null && _react["default"].createElement("button", {
+        value: valueFrom
+      })), clearIcon !== null && _react["default"].createElement("button", {
         "aria-label": clearAriaLabel,
@@ -263,3 +267,3 @@ className: "".concat(baseClassName, "__clear-button ").concat(baseClassName, "__button"),
         type: "button"
-      }, clearIcon), calendarIcon !== null && _react["default"].createElement("button", {
+      }, clearIcon), calendarIcon !== null && !disableCalendar && _react["default"].createElement("button", {
         "aria-label": calendarAriaLabel,
@@ -277,5 +281,6 @@ className: "".concat(baseClassName, "__calendar-button ").concat(baseClassName, "__button"),
     value: function renderCalendar() {
+      var disableCalendar = this.props.disableCalendar;
       var isOpen = this.state.isOpen;
 
-      if (isOpen === null) {
+      if (isOpen === null || disableCalendar) {
         return null;
@@ -394,3 +399,6 @@ }
 };
-DatePicker.propTypes = _objectSpread({}, _entry["default"].propTypes, {
+
+var isValue = _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].instanceOf(Date)]);
+
+DatePicker.propTypes = {
   calendarAriaLabel: _propTypes["default"].string,
@@ -403,5 +411,10 @@ calendarClassName: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].arrayOf(_propTypes["default"].string)]),
   dayAriaLabel: _propTypes["default"].string,
+  disableCalendar: _propTypes["default"].bool,
   disabled: _propTypes["default"].bool,
   format: _propTypes["default"].string,
   isOpen: _propTypes["default"].bool,
+  locale: _propTypes["default"].string,
+  maxDate: _propTypes2.isMaxDate,
+  maxDetail: _propTypes["default"].oneOf(allViews),
+  minDate: _propTypes2.isMinDate,
   monthAriaLabel: _propTypes["default"].string,
@@ -412,7 +425,10 @@ name: _propTypes["default"].string,
   onCalendarOpen: _propTypes["default"].func,
+  onChange: _propTypes["default"].func,
+  onFocus: _propTypes["default"].func,
   required: _propTypes["default"].bool,
   returnValue: _propTypes["default"].oneOf(['start', 'end', 'range']),
   showLeadingZeros: _propTypes["default"].bool,
+  value: _propTypes["default"].oneOfType([isValue, _propTypes["default"].arrayOf(isValue)]),
   yearAriaLabel: _propTypes["default"].string
-});
+};
 (0, _reactLifecyclesCompat.polyfill)(DatePicker);

package.json

 {
   "name": "react-date-picker",
-  "version": "7.6.0",
+  "version": "7.7.0",
   "description": "A date picker for your React app.",
@@ -5,0 +5,0 @@ "main": "dist/entry.js",

README.md

@@ -95,4 +95,5 @@ [![npm](https://img.shields.io/npm/v/react-date-picker.svg)](https://www.npmjs.com/package/react-date-picker) ![downloads](https://img.shields.io/npm/dt/react-date-picker.svg) ![build](https://img.shields.io/travis/wojtekmaj/react-date-picker/master.svg) ![dependencies](https://img.shields.io/david/wojtekmaj/react-date-picker.svg) ![dev dependencies](https://img.shields.io/david/dev/wojtekmaj/react-date-picker.svg) [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest)
 |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>|
-|dayAriaLabel|`aria-label` for the day input.|n/a|`"Year"`|
+|dayAriaLabel|`aria-label` for the day input.|n/a|`"Day"`|
 |disabled|Whether the date 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"`|
@@ -104,3 +105,3 @@ |isOpen|Whether the calendar should be opened.|`false`|`true`|
 |minDate|Minimum date that the user can select. Periods partially overlapped by minDate will also be selectable, although React-Date-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"`|
+|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"`|
@@ -107,0 +108,0 @@ |name|Input name.|`"date"`|`"myCustomName"`|

src/__tests__/DatePicker.jsx

@@ -49,3 +49,4 @@ import React from 'react';
       monthAriaLabel: 'Month',
-      yearAriaLabel: 'Year'
+      nativeInputAriaLabel: 'Date',
+      yearAriaLabel: 'Year',
     };
@@ -65,5 +66,33 @@
     expect(dateInput.prop('monthAriaLabel')).toBe(ariaLabelProps.monthAriaLabel);
+    expect(dateInput.prop('nativeInputAriaLabel')).toBe(ariaLabelProps.nativeInputAriaLabel);
     expect(dateInput.prop('yearAriaLabel')).toBe(ariaLabelProps.yearAriaLabel);
   });
 
+  describe('passes value to DateInput', () => {
+    it('passes single value to DateInput', () => {
+      const value = new Date(2019, 0, 1);
+
+      const component = mount(
+        <DatePicker value={value} />
+      );
+
+      const dateInput = component.find('DateInput');
+
+      expect(dateInput.prop('value')).toBe(value);
+    });
+
+    it('passes the first item of an array of values to DateInput', () => {
+      const value1 = new Date(2019, 0, 1);
+      const value2 = new Date(2019, 6, 1);
+
+      const component = mount(
+        <DatePicker value={[value1, value2]} />
+      );
+
+      const dateInput = component.find('DateInput');
+
+      expect(dateInput.prop('value')).toBe(value1);
+    });
+  });
+
   it('applies className to its wrapper when given a string', () => {
@@ -139,2 +168,14 @@ const className = 'testClassName';
 
+  it('does not render Calendar component when given disableCalendar & isOpen flags', () => {
+    const component = mount(
+      <DatePicker disableCalendar isOpen />
+    );
+
+    const dateInput = component.find('DateInput');
+    const calendar = component.find('Calendar');
+
+    expect(dateInput).toHaveLength(1);
+    expect(calendar).toHaveLength(0);
+  });
+
   it('opens Calendar component when given isOpen flag by changing props', () => {
@@ -141,0 +182,0 @@ const component = mount(

src/DateInput.jsx

@@ -120,3 +120,4 @@ import React, { PureComponent } from 'react';
 
-const renderCustomInputs = (placeholder, elementFunctions) => {
+const renderCustomInputs = (placeholder, elementFunctions, allowMultipleInstances) => {
+  const usedFunctions = [];
   const pattern = new RegExp(
@@ -137,2 +138,3 @@ Object.keys(elementFunctions).map(el => `${el}+`).join('|'), 'g',
       const currentMatch = matches && matches[index];
+
       if (currentMatch) {
@@ -146,3 +148,9 @@ const renderFunction = (
         );
-        res.push(renderFunction(currentMatch));
+
+        if (!allowMultipleInstances && usedFunctions.includes(renderFunction)) {
+          res.push(currentMatch);
+        } else {
+          res.push(renderFunction(currentMatch));
+          usedFunctions.push(renderFunction);
+        }
       }
@@ -419,3 +427,7 @@ return res;
     ) {
-      const proposedValue = new Date(values.year, (values.month || 1) - 1, values.day || 1);
+      const year = parseInt(values.year, 10);
+      const month = parseInt(values.month || 1, 10);
+      const day = parseInt(values.day || 1, 10);
+
+      const proposedValue = new Date(year, month - 1, day);
       const processedValue = this.getProcessedValue(proposedValue);
@@ -502,2 +514,4 @@ onChange(processedValue, false);
     const { placeholder } = this;
+    const { format } = this.props;
+
     const elementFunctions = {
@@ -509,3 +523,4 @@ d: this.renderDay,
 
-    return renderCustomInputs(placeholder, elementFunctions);
+    const allowMultipleInstances = typeof format !== 'undefined';
+    return renderCustomInputs(placeholder, elementFunctions, allowMultipleInstances);
   }
@@ -562,2 +577,7 @@
 
+const isValue = PropTypes.oneOfType([
+  PropTypes.string,
+  PropTypes.instanceOf(Date),
+]);
+
 DateInput.propTypes = {
@@ -581,5 +601,4 @@ className: PropTypes.string.isRequired,
   value: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.instanceOf(Date),
-    PropTypes.arrayOf(PropTypes.instanceOf(Date)),
+    isValue,
+    PropTypes.arrayOf(isValue),
   ]),
@@ -586,0 +605,0 @@ yearAriaLabel: PropTypes.string,

src/DatePicker.jsx

@@ -12,2 +12,3 @@ import React, { PureComponent } from 'react';
 
+import { isMaxDate, isMinDate } from './shared/propTypes';
 import { callIfDefined } from './shared/utils';
@@ -17,2 +18,3 @@
 const outsideActionEvents = ['mousedown', 'focusin', 'touchstart'];
+const allViews = ['century', 'decade', 'year', 'month'];
 
@@ -124,2 +126,3 @@ export default class DatePicker extends PureComponent {
       dayAriaLabel,
+      disableCalendar,
       disabled,
@@ -144,7 +147,14 @@ format,
 
+    const ariaLabelProps = {
+      dayAriaLabel,
+      monthAriaLabel,
+      nativeInputAriaLabel,
+      yearAriaLabel,
+    };
+
     return (
       <div className={`${baseClassName}__wrapper`}>
         <DateInput
+          {...ariaLabelProps}
           className={`${baseClassName}__inputGroup`}
-          dayAriaLabel={dayAriaLabel}
           disabled={disabled}
@@ -157,5 +167,3 @@ format={format}
           minDate={minDate}
-          monthAriaLabel={monthAriaLabel}
           name={name}
-          nativeInputAriaLabel={nativeInputAriaLabel}
           onChange={this.onChange}
@@ -166,3 +174,2 @@ required={required}
           value={valueFrom}
-          yearAriaLabel={yearAriaLabel}
         />
@@ -181,3 +188,3 @@ {clearIcon !== null && (
         )}
-        {calendarIcon !== null && (
+        {calendarIcon !== null && !disableCalendar && (
           <button
@@ -200,5 +207,6 @@ aria-label={calendarAriaLabel}
   renderCalendar() {
+    const { disableCalendar } = this.props;
     const { isOpen } = this.state;
 
-    if (isOpen === null) {
+    if (isOpen === null || disableCalendar) {
       return null;
@@ -297,4 +305,8 @@ }
 
+const isValue = PropTypes.oneOfType([
+  PropTypes.string,
+  PropTypes.instanceOf(Date),
+]);
+
 DatePicker.propTypes = {
-  ...Calendar.propTypes,
   calendarAriaLabel: PropTypes.string,
@@ -313,5 +325,10 @@ calendarClassName: PropTypes.oneOfType([
   dayAriaLabel: PropTypes.string,
+  disableCalendar: PropTypes.bool,
   disabled: PropTypes.bool,
   format: PropTypes.string,
   isOpen: PropTypes.bool,
+  locale: PropTypes.string,
+  maxDate: isMaxDate,
+  maxDetail: PropTypes.oneOf(allViews),
+  minDate: isMinDate,
   monthAriaLabel: PropTypes.string,
@@ -322,5 +339,11 @@ name: PropTypes.string,
   onCalendarOpen: PropTypes.func,
+  onChange: PropTypes.func,
+  onFocus: PropTypes.func,
   required: PropTypes.bool,
   returnValue: PropTypes.oneOf(['start', 'end', 'range']),
   showLeadingZeros: PropTypes.bool,
+  value: PropTypes.oneOfType([
+    isValue,
+    PropTypes.arrayOf(isValue),
+  ]),
   yearAriaLabel: PropTypes.string,
@@ -327,0 +350,0 @@ };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

212669

increased by1.47%

Lines of code

5275

increased by1.72%

Number of lines in readme file

159

increased by0.63%

No dependency changes