react-time-picker - npm Package Compare versions

Comparing version 2.8.0 to 3.0.0

dist/Divider.js

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

dist/TimeInput.js

@@ -68,3 +68,2 @@ 'use strict';
 var allViews = ['hour', 'minute', 'second'];
-var className = 'react-time-picker__button__input';
 
@@ -92,8 +91,4 @@ var hoursAreDifferent = function hoursAreDifferent(date1, date2) {
 
-var selectIfPossible = function selectIfPossible(element) {
-  if (!element) {
-    return;
-  }
-  element.focus();
-  element.select();
+var focus = function focus(element) {
+  return element && element.focus();
 };
@@ -141,3 +136,3 @@
             var previousInput = findPreviousInput(input);
-            selectIfPossible(previousInput);
+            focus(previousInput);
             break;
@@ -152,3 +147,3 @@ }
             var nextInput = findNextInput(_input);
-            selectIfPossible(nextInput);
+            focus(nextInput);
             break;
@@ -413,2 +408,5 @@ }
     value: function render() {
+      var className = this.props.className;
+
+
       return _react2.default.createElement(
@@ -472,2 +470,3 @@ 'div',
       var _props2 = this.props,
+          className = _props2.className,
           disabled = _props2.disabled,
@@ -570,2 +569,3 @@ isClockOpen = _props2.isClockOpen,
 TimeInput.propTypes = {
+  className: _propTypes2.default.string.isRequired,
   disabled: _propTypes2.default.bool,
@@ -572,0 +572,0 @@ isClockOpen: _propTypes2.default.bool,

dist/TimeInput/Hour12Input.js

@@ -35,2 +35,6 @@ 'use strict';
 
+var select = function select(element) {
+  return element && element.select();
+};
+
 var Hour12Input = function (_PureComponent) {
@@ -70,2 +74,5 @@ _inherits(Hour12Input, _PureComponent);
         onChange: onChange,
+        onFocus: function onFocus(event) {
+          return select(event.target);
+        },
         onKeyDown: onKeyDown,
@@ -72,0 +79,0 @@ onKeyUp: function onKeyUp(event) {

dist/TimeInput/Hour24Input.js

@@ -35,2 +35,6 @@ 'use strict';
 
+var select = function select(element) {
+  return element && element.select();
+};
+
 var Hour24Input = function (_PureComponent) {
@@ -69,2 +73,5 @@ _inherits(Hour24Input, _PureComponent);
         onChange: onChange,
+        onFocus: function onFocus(event) {
+          return select(event.target);
+        },
         onKeyDown: onKeyDown,
@@ -71,0 +78,0 @@ onKeyUp: function onKeyUp(event) {

dist/TimeInput/MinuteInput.js

@@ -35,2 +35,6 @@ 'use strict';
 
+var select = function select(element) {
+  return element && element.select();
+};
+
 var MinuteInput = function (_PureComponent) {
@@ -63,3 +67,7 @@ _inherits(MinuteInput, _PureComponent);
 
-      return [hasLeadingZero ? '0' : null, _react2.default.createElement('input', {
+      return [hasLeadingZero && _react2.default.createElement(
+        'span',
+        { key: 'leadingZero', className: className + '__leadingZero' },
+        '0'
+      ), _react2.default.createElement('input', {
         key: 'minute',
@@ -72,2 +80,5 @@ className: (0, _mergeClassNames2.default)(className + '__input', className + '__minute', hasLeadingZero && className + '__input--hasLeadingZero'),
         onChange: onChange,
+        onFocus: function onFocus(event) {
+          return select(event.target);
+        },
         onKeyDown: onKeyDown,
@@ -74,0 +85,0 @@ onKeyUp: function onKeyUp(event) {

dist/TimeInput/SecondInput.js

@@ -35,2 +35,6 @@ 'use strict';
 
+var select = function select(element) {
+  return element && element.select();
+};
+
 var SecondInput = function (_PureComponent) {
@@ -63,3 +67,7 @@ _inherits(SecondInput, _PureComponent);
 
-      return [hasLeadingZero ? '0' : null, _react2.default.createElement('input', {
+      return [hasLeadingZero && _react2.default.createElement(
+        'span',
+        { key: 'leadingZero', className: className + '__leadingZero' },
+        '0'
+      ), _react2.default.createElement('input', {
         key: 'second',
@@ -72,2 +80,5 @@ className: (0, _mergeClassNames2.default)(className + '__input', className + '__second', hasLeadingZero && className + '__input--hasLeadingZero'),
         onChange: onChange,
+        onFocus: function onFocus(event) {
+          return select(event.target);
+        },
         onKeyDown: onKeyDown,
@@ -74,0 +85,0 @@ onKeyUp: function onKeyUp(event) {

dist/TimePicker.js

@@ -54,2 +54,3 @@ 'use strict';
 var allViews = ['hour', 'minute', 'second'];
+var baseClassName = 'react-time-picker';
 
@@ -153,4 +154,5 @@ var TimePicker = function (_PureComponent) {
         'div',
-        { className: 'react-time-picker__button' },
+        { className: baseClassName + '__wrapper' },
         _react2.default.createElement(_TimeInput2.default, {
+          className: baseClassName + '__inputGroup',
           disabled: disabled,
@@ -171,3 +173,3 @@ locale: locale,
           {
-            className: 'react-time-picker__clear-button react-time-picker__button__icon',
+            className: baseClassName + '__clear-button ' + baseClassName + '__button',
             disabled: disabled,
@@ -183,3 +185,3 @@ onClick: this.clear,
           {
-            className: 'react-time-picker__clock-button react-time-picker__button__icon',
+            className: baseClassName + '__clock-button ' + baseClassName + '__button',
             disabled: disabled,
@@ -213,3 +215,3 @@ onClick: this.toggleClock,
 
-      var className = 'react-time-picker__clock';
+      var className = baseClassName + '__clock';
 
@@ -254,4 +256,2 @@ var maxDetailIndex = allViews.indexOf(maxDetail);
 
-      var baseClassName = 'react-time-picker';
-
       return _react2.default.createElement(
@@ -258,0 +258,0 @@ 'div',

package.json

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

src/__tests__/TimeInput.jsx

@@ -37,5 +37,9 @@ import React from 'react';
 describe('TimeInput', () => {
+  const defaultProps = {
+    className: 'react-time-picker__inputGroup',
+  };
+
   it('renders a native input and custom inputs', () => {
     const component = mount(
-      <TimeInput />
+      <TimeInput {...defaultProps} />
     );
@@ -52,3 +56,6 @@
     const component = mount(
-      <TimeInput maxDetail="minute" />
+      <TimeInput
+        {...defaultProps}
+        maxDetail="minute"
+      />
     );
@@ -69,3 +76,6 @@
     const component = mount(
-      <TimeInput maxDetail="hour" />
+      <TimeInput
+        {...defaultProps}
+        maxDetail="hour"
+      />
     );
@@ -89,2 +99,3 @@
       <TimeInput
+        {...defaultProps}
         maxDetail="second"
@@ -109,2 +120,3 @@ value={date}
       <TimeInput
+        {...defaultProps}
         locale="de-DE"
@@ -128,2 +140,3 @@ maxDetail="second"
       <TimeInput
+        {...defaultProps}
         maxDetail="second"
@@ -148,2 +161,3 @@ value={null}
       <TimeInput
+        {...defaultProps}
         maxDetail="second"
@@ -167,3 +181,6 @@ value={date}
     const component = mount(
-      <TimeInput maxDetail="second" />
+      <TimeInput
+        {...defaultProps}
+        maxDetail="second"
+      />
     );
@@ -181,2 +198,3 @@
       <TimeInput
+        {...defaultProps}
         locale="de-DE"
@@ -196,6 +214,9 @@ maxDetail="second"
     const component = mount(
-      <TimeInput maxDetail="second" />
+      <TimeInput
+        {...defaultProps}
+        maxDetail="second"
+      />
     );
 
-    const separators = component.find('.react-time-picker__button__input__divider');
+    const separators = component.find('.react-time-picker__inputGroup__divider');
 
@@ -208,6 +229,6 @@ expect(separators).toHaveLength(2);
     const component = mount(
-      <TimeInput />
+      <TimeInput {...defaultProps} />
     );
 
-    const separators = component.find('.react-time-picker__button__input__divider');
+    const separators = component.find('.react-time-picker__inputGroup__divider');
     const customInputs = component.find('input[type="number"]');
@@ -220,3 +241,6 @@
     const component = mount(
-      <TimeInput maxDetail="second" />
+      <TimeInput
+        {...defaultProps}
+        maxDetail="second"
+      />
     );
@@ -239,3 +263,6 @@
     const component = mount(
-      <TimeInput maxDetail="second" />
+      <TimeInput
+        {...defaultProps}
+        maxDetail="second"
+      />
     );
@@ -251,3 +278,3 @@
 
-    const separators = component.find('.react-time-picker__button__input__divider');
+    const separators = component.find('.react-time-picker__inputGroup__divider');
     const separatorKey = separators.at(0).text();
@@ -261,3 +288,6 @@ hourInput.simulate('keydown', getKey(separatorKey));
     const component = mount(
-      <TimeInput maxDetail="second" />
+      <TimeInput
+        {...defaultProps}
+        maxDetail="second"
+      />
     );
@@ -279,3 +309,6 @@
     const component = mount(
-      <TimeInput maxDetail="second" />
+      <TimeInput
+        {...defaultProps}
+        maxDetail="second"
+      />
     );
@@ -298,3 +331,6 @@
     const component = mount(
-      <TimeInput maxDetail="second" />
+      <TimeInput
+        {...defaultProps}
+        maxDetail="second"
+      />
     );
@@ -320,2 +356,3 @@
       <TimeInput
+        {...defaultProps}
         maxDetail="second"
@@ -342,2 +379,3 @@ onChange={onChange}
       <TimeInput
+        {...defaultProps}
         maxDetail="second"
@@ -366,2 +404,3 @@ onChange={onChange}
       <TimeInput
+        {...defaultProps}
         maxDetail="second"
@@ -388,2 +427,3 @@ onChange={onChange}
       <TimeInput
+        {...defaultProps}
         maxDetail="second"
@@ -390,0 +430,0 @@ onChange={onChange}

src/Divider.jsx

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

src/TimeInput.jsx

@@ -26,3 +26,2 @@ import React, { PureComponent } from 'react';
 const allViews = ['hour', 'minute', 'second'];
-const className = 'react-time-picker__button__input';
 
@@ -51,9 +50,3 @@ const hoursAreDifferent = (date1, date2) => (
 
-const selectIfPossible = (element) => {
-  if (!element) {
-    return;
-  }
-  element.focus();
-  element.select();
-};
+const focus = element => element && element.focus();
 
@@ -177,2 +170,3 @@ const removeUnwantedCharacters = str => str
     const {
+      className,
       disabled,
@@ -209,3 +203,3 @@ isClockOpen,
         const previousInput = findPreviousInput(input);
-        selectIfPossible(previousInput);
+        focus(previousInput);
         break;
@@ -219,3 +213,3 @@ }
         const nextInput = findNextInput(input);
-        selectIfPossible(nextInput);
+        focus(nextInput);
         break;
@@ -470,2 +464,4 @@ }
   render() {
+    const { className } = this.props;
+
     return (
@@ -486,2 +482,3 @@ <div className={className}>
 TimeInput.propTypes = {
+  className: PropTypes.string.isRequired,
   disabled: PropTypes.bool,
@@ -488,0 +485,0 @@ isClockOpen: PropTypes.bool,

src/TimeInput/Hour12Input.jsx

@@ -12,2 +12,4 @@ import React, { PureComponent } from 'react';
 
+const select = element => element && element.select();
+
 export default class Hour12Input extends PureComponent {
@@ -50,2 +52,3 @@ get maxHour() {
         onChange={onChange}
+        onFocus={event => select(event.target)}
         onKeyDown={onKeyDown}
@@ -52,0 +55,0 @@ onKeyUp={event => updateInputWidth(event.target)}

src/TimeInput/Hour24Input.jsx

@@ -9,2 +9,4 @@ import React, { PureComponent } from 'react';
 
+const select = element => element && element.select();
+
 export default class Hour24Input extends PureComponent {
@@ -46,2 +48,3 @@ get maxHour() {
         onChange={onChange}
+        onFocus={event => select(event.target)}
         onKeyDown={onKeyDown}
@@ -48,0 +51,0 @@ onKeyUp={event => updateInputWidth(event.target)}

src/TimeInput/MinuteInput.jsx

@@ -12,2 +12,4 @@ import React, { PureComponent } from 'react';
 
+const select = element => element && element.select();
+
 export default class MinuteInput extends PureComponent {
@@ -44,3 +46,3 @@ get maxMinute() {
     return [
-      (hasLeadingZero ? '0' : null),
+      (hasLeadingZero && <span key="leadingZero" className={`${className}__leadingZero`}>0</span>),
       <input
@@ -58,2 +60,3 @@ key="minute"
         onChange={onChange}
+        onFocus={event => select(event.target)}
         onKeyDown={onKeyDown}
@@ -60,0 +63,0 @@ onKeyUp={event => updateInputWidth(event.target)}

src/TimeInput/SecondInput.jsx

@@ -13,2 +13,4 @@ import React, { PureComponent } from 'react';
 
+const select = element => element && element.select();
+
 export default class SecondInput extends PureComponent {
@@ -47,3 +49,3 @@ get maxSecond() {
     return [
-      (hasLeadingZero ? '0' : null),
+      (hasLeadingZero && <span key="leadingZero" className={`${className}__leadingZero`}>0</span>),
       <input
@@ -61,2 +63,3 @@ key="second"
         onChange={onChange}
+        onFocus={event => select(event.target)}
         onKeyDown={onKeyDown}
@@ -63,0 +66,0 @@ onKeyUp={event => updateInputWidth(event.target)}

src/TimePicker.jsx

@@ -15,2 +15,3 @@ import React, { PureComponent } from 'react';
 const allViews = ['hour', 'minute', 'second'];
+const baseClassName = 'react-time-picker';
 
@@ -114,4 +115,5 @@ export default class TimePicker extends PureComponent {
     return (
-      <div className="react-time-picker__button">
+      <div className={`${baseClassName}__wrapper`}>
         <TimeInput
+          className={`${baseClassName}__inputGroup`}
           disabled={disabled}
@@ -131,3 +133,3 @@ locale={locale}
           <button
-            className="react-time-picker__clear-button react-time-picker__button__icon"
+            className={`${baseClassName}__clear-button ${baseClassName}__button`}
             disabled={disabled}
@@ -143,3 +145,3 @@ onClick={this.clear}
           <button
-            className="react-time-picker__clock-button react-time-picker__button__icon"
+            className={`${baseClassName}__clock-button ${baseClassName}__button`}
             disabled={disabled}
@@ -174,3 +176,3 @@ onClick={this.toggleClock}
 
-    const className = 'react-time-picker__clock';
+    const className = `${baseClassName}__clock`;
 
@@ -213,4 +215,2 @@ const maxDetailIndex = allViews.indexOf(maxDetail);
 
-    const baseClassName = 'react-time-picker';
-
     return (
@@ -217,0 +217,0 @@ <div

No alert changes

Improved metrics

Total package byte prevSize

157202

increased by1.29%

Lines of code

4202

increased by1.84%

No dependency changes