react-datetime-picker - npm Package Compare versions

Comparing version 1.7.0 to 2.0.0

dist/DateTimeInput.js

@@ -82,3 +82,2 @@ 'use strict';
 var allViews = ['hour', 'minute', 'second'];
-var className = 'react-datetime-picker__button__input';
 
@@ -105,8 +104,4 @@ var datesAreDifferent = function datesAreDifferent(date1, date2) {
 
-var selectIfPossible = function selectIfPossible(element) {
-  if (!element) {
-    return;
-  }
-  element.focus();
-  element.select();
+var focus = function focus(element) {
+  return element && element.focus();
 };
@@ -157,3 +152,3 @@
             var previousInput = findPreviousInput(input);
-            selectIfPossible(previousInput);
+            focus(previousInput);
             break;
@@ -169,3 +164,3 @@ }
             var nextInput = findNextInput(_input);
-            selectIfPossible(nextInput);
+            focus(nextInput);
             break;
@@ -523,2 +518,5 @@ }
     value: function render() {
+      var className = this.props.className;
+
+
       return _react2.default.createElement(
@@ -637,2 +635,3 @@ 'div',
       var _props4 = this.props,
+          className = _props4.className,
           disabled = _props4.disabled,
@@ -756,2 +755,3 @@ isWidgetOpen = _props4.isWidgetOpen,
 DateTimeInput.propTypes = {
+  className: _propTypes2.default.string.isRequired,
   disabled: _propTypes2.default.bool,
@@ -758,0 +758,0 @@ isWidgetOpen: _propTypes2.default.bool,

dist/DateTimePicker.js

@@ -58,2 +58,3 @@ 'use strict';
 var allViews = ['hour', 'minute', 'second'];
+var baseClassName = 'react-datetime-picker';
 
@@ -206,4 +207,5 @@ var DateTimePicker = function (_PureComponent) {
         'div',
-        { className: 'react-datetime-picker__button' },
+        { className: baseClassName + '__wrapper' },
         _react2.default.createElement(_DateTimeInput2.default, {
+          className: baseClassName + '__inputGroup',
           disabled: disabled,
@@ -225,3 +227,3 @@ locale: locale,
           {
-            className: 'react-datetime-picker__clear-button react-datetime-picker__button__icon',
+            className: baseClassName + '__clear-button ' + baseClassName + '__button',
             disabled: disabled,
@@ -237,3 +239,3 @@ onClick: this.clear,
           {
-            className: 'react-datetime-picker__calendar-button react-datetime-picker__button__icon',
+            className: baseClassName + '__calendar-button ' + baseClassName + '__button',
             disabled: disabled,
@@ -267,3 +269,3 @@ onClick: this.toggleCalendar,
 
-      var className = 'react-datetime-picker__calendar';
+      var className = baseClassName + '__calendar';
 
@@ -313,3 +315,3 @@ return _react2.default.createElement(
 
-      var className = 'react-datetime-picker__clock';
+      var className = baseClassName + '__clock';
 
@@ -356,4 +358,2 @@ var maxDetailIndex = allViews.indexOf(maxDetail);
 
-      var baseClassName = 'react-datetime-picker';
-
       return _react2.default.createElement(
@@ -360,0 +360,0 @@ 'div',

dist/Divider.js

@@ -21,3 +21,3 @@ 'use strict';
     'span',
-    { className: 'react-datetime-picker__button__input__divider' },
+    { className: 'react-datetime-picker__inputGroup__divider' },
     children
@@ -24,0 +24,0 @@ );

package.json

 {
   "name": "react-datetime-picker",
-  "version": "1.7.0",
+  "version": "2.0.0",
   "description": "A date range picker for your React app.",
@@ -52,5 +52,5 @@ "main": "dist/entry.js",
     "react-clock": "^2.3.0",
-    "react-date-picker": "^6.13.0",
+    "react-date-picker": "^7.0.0",
     "react-lifecycles-compat": "^3.0.4",
-    "react-time-picker": "^2.8.0"
+    "react-time-picker": "^3.0.0"
   },
@@ -57,0 +57,0 @@ "devDependencies": {

src/__tests__/DateTimeInput.jsx

@@ -37,5 +37,9 @@ import React from 'react';
 describe('DateTimeInput', () => {
+  const defaultProps = {
+    className: 'react-datetime-picker__inputGroup',
+  };
+
   it('renders a native input and custom inputs', () => {
     const component = mount(
-      <DateTimeInput />
+      <DateTimeInput {...defaultProps} />
     );
@@ -52,3 +56,6 @@
     const component = mount(
-      <DateTimeInput maxDetail="minute" />
+      <DateTimeInput
+        {...defaultProps}
+        maxDetail="minute"
+      />
     );
@@ -76,3 +83,6 @@
     const component = mount(
-      <DateTimeInput maxDetail="hour" />
+      <DateTimeInput
+        {...defaultProps}
+        maxDetail="hour"
+      />
     );
@@ -103,2 +113,3 @@
       <DateTimeInput
+        {...defaultProps}
         maxDetail="second"
@@ -126,2 +137,3 @@ value={date}
       <DateTimeInput
+        {...defaultProps}
         locale="de-DE"
@@ -150,2 +162,3 @@ maxDetail="second"
       <DateTimeInput
+        {...defaultProps}
         maxDetail="second"
@@ -172,3 +185,6 @@ value={date}
     const component = mount(
-      <DateTimeInput maxDetail="second" />
+      <DateTimeInput
+        {...defaultProps}
+        maxDetail="second"
+      />
     );
@@ -189,2 +205,3 @@
       <DateTimeInput
+        {...defaultProps}
         locale="de-DE"
@@ -207,6 +224,6 @@ maxDetail="second"
     const component = mount(
-      <DateTimeInput />
+      <DateTimeInput {...defaultProps} />
     );
 
-    const separators = component.find('.react-datetime-picker__button__input__divider');
+    const separators = component.find('.react-datetime-picker__inputGroup__divider');
 
@@ -222,6 +239,9 @@ expect(separators).toHaveLength(4);
     const component = mount(
-      <DateTimeInput maxDetail="hour" />
+      <DateTimeInput
+        {...defaultProps}
+        maxDetail="hour"
+      />
     );
 
-    const separators = component.find('.react-datetime-picker__button__input__divider');
+    const separators = component.find('.react-datetime-picker__inputGroup__divider');
     const customInputs = component.find('input[type="number"]');
@@ -234,3 +254,3 @@
     const component = mount(
-      <DateTimeInput />
+      <DateTimeInput {...defaultProps} />
     );
@@ -253,3 +273,3 @@
     const component = mount(
-      <DateTimeInput />
+      <DateTimeInput {...defaultProps} />
     );
@@ -265,3 +285,3 @@
 
-    const separators = component.find('.react-datetime-picker__button__input__divider');
+    const separators = component.find('.react-datetime-picker__inputGroup__divider');
     const separatorKey = separators.at(0).text();
@@ -275,3 +295,3 @@ dayInput.simulate('keydown', getKey(separatorKey));
     const component = mount(
-      <DateTimeInput />
+      <DateTimeInput {...defaultProps} />
     );
@@ -293,3 +313,3 @@
     const component = mount(
-      <DateTimeInput />
+      <DateTimeInput {...defaultProps} />
     );
@@ -312,3 +332,3 @@
     const component = mount(
-      <DateTimeInput />
+      <DateTimeInput {...defaultProps} />
     );
@@ -334,2 +354,3 @@
       <DateTimeInput
+        {...defaultProps}
         onChange={onChange}
@@ -355,2 +376,3 @@ value={date}
       <DateTimeInput
+        {...defaultProps}
         maxDetail="second"
@@ -379,2 +401,3 @@ onChange={onChange}
       <DateTimeInput
+        {...defaultProps}
         onChange={onChange}
@@ -400,2 +423,3 @@ value={date}
       <DateTimeInput
+        {...defaultProps}
         onChange={onChange}
@@ -402,0 +426,0 @@ value={date}

src/DateTimeInput.jsx

@@ -33,3 +33,2 @@ import React, { PureComponent } from 'react';
 const allViews = ['hour', 'minute', 'second'];
-const className = 'react-datetime-picker__button__input';
 
@@ -58,9 +57,3 @@ const datesAreDifferent = (date1, date2) => (
 
-const selectIfPossible = (element) => {
-  if (!element) {
-    return;
-  }
-  element.focus();
-  element.select();
-};
+const focus = element => element && element.focus();
 
@@ -229,2 +222,3 @@ const removeUnwantedCharacters = str => str
     const {
+      className,
       disabled,
@@ -272,3 +266,3 @@ isWidgetOpen,
         const previousInput = findPreviousInput(input);
-        selectIfPossible(previousInput);
+        focus(previousInput);
         break;
@@ -283,3 +277,3 @@ }
         const nextInput = findNextInput(input);
-        selectIfPossible(nextInput);
+        focus(nextInput);
         break;
@@ -631,2 +625,4 @@ }
   render() {
+    const { className } = this.props;
+
     return (
@@ -651,2 +647,3 @@ <div className={className}>
 DateTimeInput.propTypes = {
+  className: PropTypes.string.isRequired,
   disabled: PropTypes.bool,
@@ -653,0 +650,0 @@ isWidgetOpen: PropTypes.bool,

src/DateTimePicker.jsx

@@ -16,2 +16,3 @@ import React, { PureComponent } from 'react';
 const allViews = ['hour', 'minute', 'second'];
+const baseClassName = 'react-datetime-picker';
 
@@ -173,4 +174,5 @@ export default class DateTimePicker extends PureComponent {
     return (
-      <div className="react-datetime-picker__button">
+      <div className={`${baseClassName}__wrapper`}>
         <DateTimeInput
+          className={`${baseClassName}__inputGroup`}
           disabled={disabled}
@@ -191,3 +193,3 @@ locale={locale}
           <button
-            className="react-datetime-picker__clear-button react-datetime-picker__button__icon"
+            className={`${baseClassName}__clear-button ${baseClassName}__button`}
             disabled={disabled}
@@ -203,3 +205,3 @@ onClick={this.clear}
           <button
-            className="react-datetime-picker__calendar-button react-datetime-picker__button__icon"
+            className={`${baseClassName}__calendar-button ${baseClassName}__button`}
             disabled={disabled}
@@ -234,3 +236,3 @@ onClick={this.toggleCalendar}
 
-    const className = 'react-datetime-picker__calendar';
+    const className = `${baseClassName}__calendar`;
 
@@ -283,3 +285,3 @@ return (
 
-    const className = 'react-datetime-picker__clock';
+    const className = `${baseClassName}__clock`;
 
@@ -322,4 +324,2 @@ const maxDetailIndex = allViews.indexOf(maxDetail);
 
-    const baseClassName = 'react-datetime-picker';
-
     return (
@@ -326,0 +326,0 @@ <div

src/Divider.jsx

@@ -5,3 +5,3 @@ import React from 'react';
 const Divider = ({ children }) => (
-  <span className="react-datetime-picker__button__input__divider">
+  <span className="react-datetime-picker__inputGroup__divider">
     {children}
@@ -8,0 +8,0 @@ </span>

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

126345

increased by0.21%

Lines of code

3204

increased by0.6%

Dependency changes

• + Added@wojtekmaj/date-utils@1.5.1(transitive)

• + Addedreact-calendar@3.9.0(transitive)

• + Addedreact-date-picker@7.11.1(transitive)

• + Addedreact-fit@1.7.1(transitive)

• + Addedreact-time-picker@3.9.0(transitive)

• + Addedtiny-warning@1.0.3(transitive)

• + Addedupdate-input-width@1.4.2(transitive)

• - Removedreact-date-picker@6.13.0(transitive)

• - Removedreact-time-picker@2.8.0(transitive)

• Updatedreact-date-picker@^7.0.0

• Updatedreact-time-picker@^3.0.0