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

Comparing version 2.2.0 to 2.3.0

dist/DateTimeRangePicker.js

@@ -317,2 +317,3 @@ "use strict";
           dayAriaLabel = _this$props3.dayAriaLabel,
+          dayPlaceholder = _this$props3.dayPlaceholder,
           disableCalendar = _this$props3.disableCalendar,
@@ -322,2 +323,3 @@ disabled = _this$props3.disabled,
           hourAriaLabel = _this$props3.hourAriaLabel,
+          hourPlaceholder = _this$props3.hourPlaceholder,
           locale = _this$props3.locale,
@@ -328,3 +330,5 @@ maxDate = _this$props3.maxDate,
           minuteAriaLabel = _this$props3.minuteAriaLabel,
+          minutePlaceholder = _this$props3.minutePlaceholder,
           monthAriaLabel = _this$props3.monthAriaLabel,
+          monthPlaceholder = _this$props3.monthPlaceholder,
           name = _this$props3.name,
@@ -334,5 +338,7 @@ nativeInputAriaLabel = _this$props3.nativeInputAriaLabel,
           secondAriaLabel = _this$props3.secondAriaLabel,
+          secondPlaceholder = _this$props3.secondPlaceholder,
           showLeadingZeros = _this$props3.showLeadingZeros,
           value = _this$props3.value,
-          yearAriaLabel = _this$props3.yearAriaLabel;
+          yearAriaLabel = _this$props3.yearAriaLabel,
+          yearPlaceholder = _this$props3.yearPlaceholder;
       var _this$state3 = this.state,
@@ -357,4 +363,12 @@ isCalendarOpen = _this$state3.isCalendarOpen,
       };
+      var placeholderProps = {
+        dayPlaceholder: dayPlaceholder,
+        hourPlaceholder: hourPlaceholder,
+        minutePlaceholder: minutePlaceholder,
+        monthPlaceholder: monthPlaceholder,
+        secondPlaceholder: secondPlaceholder,
+        yearPlaceholder: yearPlaceholder
+      };
 
-      var commonProps = _objectSpread({}, ariaLabelProps, {
+      var commonProps = _objectSpread({}, ariaLabelProps, {}, placeholderProps, {
         className: "".concat(baseClassName, "__inputGroup"),
@@ -581,2 +595,3 @@ disabled: disabled,
   dayAriaLabel: _propTypes["default"].string,
+  dayPlaceholder: _propTypes["default"].string,
   disableCalendar: _propTypes["default"].bool,
@@ -587,2 +602,3 @@ disableClock: _propTypes["default"].bool,
   hourAriaLabel: _propTypes["default"].string,
+  hourPlaceholder: _propTypes["default"].string,
   isCalendarOpen: _propTypes["default"].bool,
@@ -595,3 +611,5 @@ isClockOpen: _propTypes["default"].bool,
   minuteAriaLabel: _propTypes["default"].string,
+  minutePlaceholder: _propTypes["default"].string,
   monthAriaLabel: _propTypes["default"].string,
+  monthPlaceholder: _propTypes["default"].string,
   name: _propTypes["default"].string,
@@ -607,6 +625,8 @@ nativeInputAriaLabel: _propTypes["default"].string,
   secondAriaLabel: _propTypes["default"].string,
+  secondPlaceholder: _propTypes["default"].string,
   showLeadingZeros: _propTypes["default"].bool,
   value: _propTypes["default"].oneOfType([isValue, _propTypes["default"].arrayOf(isValue)]),
-  yearAriaLabel: _propTypes["default"].string
+  yearAriaLabel: _propTypes["default"].string,
+  yearPlaceholder: _propTypes["default"].string
 };
 (0, _reactLifecyclesCompat.polyfill)(DateTimeRangePicker);

package.json

 {
   "name": "@wojtekmaj/react-datetimerange-picker",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "A datetime range picker for your React app.",
@@ -54,3 +54,3 @@ "main": "dist/entry.js",
     "react-clock": "^2.3.0",
-    "react-datetime-picker": "^2.6.0",
+    "react-datetime-picker": "^2.7.1",
     "react-fit": "^1.0.3",
@@ -57,0 +57,0 @@ "react-lifecycles-compat": "^3.0.4"

src/__tests__/DateTimeRangePicker.jsx

@@ -86,2 +86,32 @@ import React from 'react';
 
+  it('passes aria-label props to DateTimeInput components', () => {
+    const placeholderProps = {
+      dayPlaceholder: 'dd',
+      hourPlaceholder: 'hh',
+      minutePlaceholder: 'mm',
+      monthPlaceholder: 'mm',
+      secondPlaceholder: 'ss',
+      yearPlaceholder: 'yyyy'
+    };
+
+    const component = mount(
+      <DateTimeRangePicker {...placeholderProps} />
+    );
+
+    const dateTimeInput = component.find('DateTimeInput');
+
+    expect(dateTimeInput.at(0).prop('dayPlaceholder')).toBe(placeholderProps.dayPlaceholder);
+    expect(dateTimeInput.at(0).prop('hourPlaceholder')).toBe(placeholderProps.hourPlaceholder);
+    expect(dateTimeInput.at(0).prop('minutePlaceholder')).toBe(placeholderProps.minutePlaceholder);
+    expect(dateTimeInput.at(0).prop('monthPlaceholder')).toBe(placeholderProps.monthPlaceholder);
+    expect(dateTimeInput.at(0).prop('secondPlaceholder')).toBe(placeholderProps.secondPlaceholder);
+    expect(dateTimeInput.at(0).prop('yearPlaceholder')).toBe(placeholderProps.yearPlaceholder);
+    expect(dateTimeInput.at(1).prop('dayPlaceholder')).toBe(placeholderProps.dayPlaceholder);
+    expect(dateTimeInput.at(1).prop('hourPlaceholder')).toBe(placeholderProps.hourPlaceholder);
+    expect(dateTimeInput.at(1).prop('minutePlaceholder')).toBe(placeholderProps.minutePlaceholder);
+    expect(dateTimeInput.at(1).prop('monthPlaceholder')).toBe(placeholderProps.monthPlaceholder);
+    expect(dateTimeInput.at(1).prop('secondPlaceholder')).toBe(placeholderProps.secondPlaceholder);
+    expect(dateTimeInput.at(1).prop('yearPlaceholder')).toBe(placeholderProps.yearPlaceholder);
+  });
+
   describe('passes value to DateTimeInput components', () => {
@@ -88,0 +118,0 @@ it('passes single value to DateTimeInput components', () => {

src/DateTimeRangePicker.jsx

@@ -227,2 +227,3 @@ import React, { PureComponent } from 'react';
       dayAriaLabel,
+      dayPlaceholder,
       disableCalendar,
@@ -232,2 +233,3 @@ disabled,
       hourAriaLabel,
+      hourPlaceholder,
       locale,
@@ -238,3 +240,5 @@ maxDate,
       minuteAriaLabel,
+      minutePlaceholder,
       monthAriaLabel,
+      monthPlaceholder,
       name,
@@ -244,5 +248,7 @@ nativeInputAriaLabel,
       secondAriaLabel,
+      secondPlaceholder,
       showLeadingZeros,
       value,
       yearAriaLabel,
+      yearPlaceholder,
     } = this.props;
@@ -265,4 +271,14 @@
 
+    const placeholderProps = {
+      dayPlaceholder,
+      hourPlaceholder,
+      minutePlaceholder,
+      monthPlaceholder,
+      secondPlaceholder,
+      yearPlaceholder,
+    };
+
     const commonProps = {
       ...ariaLabelProps,
+      ...placeholderProps,
       className: `${baseClassName}__inputGroup`,
@@ -492,2 +508,3 @@ disabled,
   dayAriaLabel: PropTypes.string,
+  dayPlaceholder: PropTypes.string,
   disableCalendar: PropTypes.bool,
@@ -498,2 +515,3 @@ disableClock: PropTypes.bool,
   hourAriaLabel: PropTypes.string,
+  hourPlaceholder: PropTypes.string,
   isCalendarOpen: PropTypes.bool,
@@ -506,3 +524,5 @@ isClockOpen: PropTypes.bool,
   minuteAriaLabel: PropTypes.string,
+  minutePlaceholder: PropTypes.string,
   monthAriaLabel: PropTypes.string,
+  monthPlaceholder: PropTypes.string,
   name: PropTypes.string,
@@ -518,2 +538,3 @@ nativeInputAriaLabel: PropTypes.string,
   secondAriaLabel: PropTypes.string,
+  secondPlaceholder: PropTypes.string,
   showLeadingZeros: PropTypes.bool,
@@ -525,4 +546,5 @@ value: PropTypes.oneOfType([
   yearAriaLabel: PropTypes.string,
+  yearPlaceholder: PropTypes.string,
 };
 
 polyfill(DateTimeRangePicker);

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

85128

increased by3.86%

Lines of code

1734

increased by4.02%

Dependency changes

• Updatedreact-datetime-picker@^2.7.1