react-time-picker - npm Package Compare versions

Comparing version 2.2.0 to 2.3.0

dist/shared/dateFormatter.js

@@ -0,0 +0,0 @@ 'use strict';

dist/shared/utils.js

@@ -10,3 +10,3 @@ 'use strict';
 var isValidNumber = function isValidNumber(a) {
-  return typeof a === 'number' && !Number.isNaN(a);
+  return typeof a === 'number' && !isNaN(a);
 };
@@ -13,0 +13,0 @@ var min = exports.min = function min() {

dist/TimeInput.js

@@ -328,2 +328,3 @@ 'use strict';
         key: 'time',
+        disabled: this.props.disabled,
         maxTime: this.props.maxTime,
@@ -398,2 +399,3 @@ minTime: this.props.minTime,
       return {
+        disabled: this.props.disabled,
         maxTime: this.props.maxTime,
@@ -428,2 +430,3 @@ minTime: this.props.minTime,
 TimeInput.propTypes = {
+  disabled: _propTypes2.default.bool,
   isClockOpen: _propTypes2.default.bool,
@@ -430,0 +433,0 @@ locale: _propTypes2.default.string,

dist/TimeInput/HourInput.js

@@ -51,2 +51,3 @@ 'use strict';
           className = _props.className,
+          disabled = _props.disabled,
           itemRef = _props.itemRef,
@@ -61,2 +62,3 @@ onChange = _props.onChange,
         className: (0, _mergeClassNames2.default)(className + '__input', className + '__hour'),
+        disabled: disabled,
         name: 'hour',
@@ -106,2 +108,3 @@ max: maxHour,
   className: _propTypes2.default.string.isRequired,
+  disabled: _propTypes2.default.bool,
   itemRef: _propTypes2.default.func,
@@ -108,0 +111,0 @@ maxTime: _propTypes3.isTime,

dist/TimeInput/MinuteInput.js

@@ -51,2 +51,3 @@ 'use strict';
           className = _props.className,
+          disabled = _props.disabled,
           itemRef = _props.itemRef,
@@ -64,2 +65,3 @@ onChange = _props.onChange,
         className: (0, _mergeClassNames2.default)(className + '__input', className + '__minute', hasLeadingZero && className + '__input--hasLeadingZero'),
+        disabled: disabled,
         name: 'minute',
@@ -113,2 +115,3 @@ max: maxMinute,
   className: _propTypes2.default.string.isRequired,
+  disabled: _propTypes2.default.bool,
   hour: _propTypes2.default.number,
@@ -115,0 +118,0 @@ itemRef: _propTypes2.default.func,

dist/TimeInput/NativeInput.js

@@ -53,2 +53,3 @@ 'use strict';
       var _props = this.props,
+          disabled = _props.disabled,
           maxTime = _props.maxTime,
@@ -65,2 +66,3 @@ minTime = _props.minTime,
         type: 'time',
+        disabled: disabled,
         max: maxTime ? nativeValueParser(maxTime) : null,
@@ -104,2 +106,3 @@ min: minTime ? nativeValueParser(minTime) : null,
 NativeInput.propTypes = {
+  disabled: _propTypes2.default.bool,
   maxTime: _propTypes3.isTime,
@@ -106,0 +109,0 @@ minTime: _propTypes3.isTime,

dist/TimeInput/SecondInput.js

@@ -51,2 +51,3 @@ 'use strict';
           className = _props.className,
+          disabled = _props.disabled,
           itemRef = _props.itemRef,
@@ -64,2 +65,3 @@ onChange = _props.onChange,
         className: (0, _mergeClassNames2.default)(className + '__input', className + '__second', hasLeadingZero && className + '__input--hasLeadingZero'),
+        disabled: disabled,
         name: 'second',
@@ -115,2 +117,3 @@ max: maxSecond,
   className: _propTypes2.default.string.isRequired,
+  disabled: _propTypes2.default.bool,
   hour: _propTypes2.default.number,
@@ -117,0 +120,0 @@ itemRef: _propTypes2.default.func,

dist/TimePicker.js

@@ -49,4 +49,4 @@ 'use strict';
 
-var TimePicker = function (_Component) {
-  _inherits(TimePicker, _Component);
+var TimePicker = function (_PureComponent) {
+  _inherits(TimePicker, _PureComponent);
 
@@ -122,13 +122,3 @@ function TimePicker() {
     value: function renderInputs() {
-      var _props = this.props,
-          clearIcon = _props.clearIcon,
-          clockIcon = _props.clockIcon,
-          locale = _props.locale,
-          maxDetail = _props.maxDetail,
-          maxTime = _props.maxTime,
-          minTime = _props.minTime,
-          name = _props.name,
-          required = _props.required,
-          value = _props.value;
-      var isOpen = this.state.isOpen;
+      var disabled = this.props.disabled;
 
@@ -140,12 +130,13 @@
         _react2.default.createElement(_TimeInput2.default, {
-          locale: locale,
-          isClockOpen: isOpen,
-          maxDetail: maxDetail,
-          maxTime: maxTime,
-          minTime: minTime,
-          name: name,
+          disabled: disabled,
+          locale: this.props.locale,
+          isClockOpen: this.state.isOpen,
+          maxDetail: this.props.maxDetail,
+          maxTime: this.props.maxTime,
+          minTime: this.props.minTime,
+          name: this.props.name,
           onChange: this.onChange,
           placeholder: this.placeholder,
-          required: required,
-          value: value
+          required: this.props.required,
+          value: this.props.value
         }),
@@ -156,2 +147,3 @@ _react2.default.createElement(
             className: 'react-time-picker__clear-button react-time-picker__button__icon',
+            disabled: disabled,
             onClick: this.clear,
@@ -161,3 +153,3 @@ onFocus: this.stopPropagation,
           },
-          clearIcon
+          this.props.clearIcon
         ),
@@ -168,2 +160,3 @@ _react2.default.createElement(
             className: 'react-time-picker__clock-button react-time-picker__button__icon',
+            disabled: disabled,
             onClick: this.toggleClock,
@@ -174,3 +167,3 @@ onFocus: this.stopPropagation,
           },
-          clockIcon
+          this.props.clockIcon
         )
@@ -189,8 +182,8 @@ );
 
-      var _props2 = this.props,
-          clockClassName = _props2.clockClassName,
-          timePickerClassName = _props2.className,
-          maxDetail = _props2.maxDetail,
-          onChange = _props2.onChange,
-          clockProps = _objectWithoutProperties(_props2, ['clockClassName', 'className', 'maxDetail', 'onChange']);
+      var _props = this.props,
+          clockClassName = _props.clockClassName,
+          timePickerClassName = _props.className,
+          maxDetail = _props.maxDetail,
+          onChange = _props.onChange,
+          clockProps = _objectWithoutProperties(_props, ['clockClassName', 'className', 'maxDetail', 'onChange']);
 
@@ -236,3 +229,3 @@ var className = 'react-time-picker__clock';
         {
-          className: (0, _mergeClassNames2.default)(className, className + '--' + (this.state.isOpen ? 'open' : 'closed'), this.props.className),
+          className: (0, _mergeClassNames2.default)(className, className + '--' + (this.state.isOpen ? 'open' : 'closed'), className + '--' + (this.props.disabled ? 'disabled' : 'enabled'), this.props.className),
           onFocus: this.onFocus,
@@ -250,3 +243,3 @@ ref: function ref(_ref3) {
   return TimePicker;
-}(_react.Component);
+}(_react.PureComponent);
 
@@ -290,2 +283,3 @@ exports.default = TimePicker;
   clearIcon: _propTypes2.default.node,
+  disabled: _propTypes2.default.bool,
   isOpen: _propTypes2.default.bool,
@@ -292,0 +286,0 @@ locale: _propTypes2.default.string,

package.json

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

README.md

@@ -31,15 +31,11 @@ ![downloads](https://img.shields.io/npm/dt/react-time-picker.svg) ![build](https://img.shields.io/travis/wojtekmaj/react-time-picker.svg) ![dependencies](https://img.shields.io/david/wojtekmaj/react-time-picker.svg
 
-[React-Calendar](https://github.com/wojtekmaj/react-calendar), on which React-Date-Picker relies heavily, uses modern web technologies. That's why it's so fast, lightweight and easy to style. This, however, comes at a cost of supporting only modern browsers.
+Your project needs to use React 16 or later. If you use older version of React, please refer to the table below to find suitable React-Time-Picker version.
 
-|Browser|Minimum supported version|
+|React version|Newest supported React-Time-Picker|
 |----|----|
-|Google Chrome|24|
-|Mozilla Firefox|29|
-|Microsoft Edge|12|
-|Apple Safari|10|
-|Apple Safari (iOS)|10.2|
-|Opera|15|
-|Internet Explorer|11|
-|Samsung Internet|4|
+|>16.0|latest|
+|>15.0|2.1.1|
 
+[React-Calendar](https://github.com/wojtekmaj/react-calendar), on which React-Date-Picker relies heavily, uses modern web technologies. That's why it's so fast, lightweight and easy to style. This, however, comes at a cost of [supporting only modern browsers](https://caniuse.com/#feat=internationalization).
+
 #### Legacy browsers
@@ -99,2 +95,3 @@
 |clearIcon|Defines the content of the clear button.|<ul><li>String: `"Clear"`</li><li>React element: `<ClearIcon />`</li></ul>|
+|disabled|Defines whether the time picker should be disabled. Defaults to false.|`true`|
 |isOpen|Defines whether the calendar should be opened. Defaults to false.|`true`|
@@ -101,0 +98,0 @@ |locale|Defines which locale should be used by the time picker and the calendar. Can be any [IETF language tag](https://en.wikipedia.org/wiki/IETF_language_tag). Defaults to user's browser settings.|`"hu-HU"`|

src/__tests__/TimeInput.jsx

@@ -0,0 +0,0 @@ import React from 'react';

src/__tests__/TimePicker.jsx

@@ -0,0 +0,0 @@ import React from 'react';

src/Divider.jsx

@@ -0,0 +0,0 @@ import React from 'react';

src/entry.js

@@ -0,0 +0,0 @@ import 'react-clock/dist/Clock.css';

src/entry.nostyle.js

 import TimePicker from './TimePicker';
 
 export default TimePicker;

src/shared/__tests__/locales.js

@@ -0,0 +0,0 @@ import {

src/shared/dateFormatter.js

@@ -0,0 +0,0 @@ import { getDefaultLocale } from './locales';

src/shared/dates.js

@@ -0,0 +0,0 @@ import {

src/shared/locales.js

@@ -0,0 +0,0 @@ import once from 'lodash.once';

src/shared/propTypes.js

@@ -0,0 +0,0 @@ import PropTypes from 'prop-types';

src/shared/utils.js

@@ -1,2 +0,2 @@
-const isValidNumber = a => typeof a === 'number' && !Number.isNaN(a);
+const isValidNumber = a => typeof a === 'number' && !isNaN(a);
 export const min = (...args) => Math.min(...args.filter(isValidNumber));
@@ -3,0 +3,0 @@ export const max = (...args) => Math.max(...args.filter(isValidNumber));

src/TimeInput.jsx

@@ -144,2 +144,3 @@ import React, { Component } from 'react';
     return {
+      disabled: this.props.disabled,
       maxTime: this.props.maxTime,
@@ -325,2 +326,3 @@ minTime: this.props.minTime,
         key="time"
+        disabled={this.props.disabled}
         maxTime={this.props.maxTime}
@@ -353,2 +355,3 @@ minTime={this.props.minTime}
 TimeInput.propTypes = {
+  disabled: PropTypes.bool,
   isClockOpen: PropTypes.bool,
@@ -355,0 +358,0 @@ locale: PropTypes.string,

src/TimeInput/HourInput.jsx

@@ -5,5 +5,3 @@ import React, { PureComponent } from 'react';
 
-import {
-  getHours,
-} from '../shared/dates';
+import { getHours } from '../shared/dates';
 import { isTime } from '../shared/propTypes';
@@ -32,3 +30,3 @@ import { min, max, updateInputWidth } from '../shared/utils';
     const {
-      className, itemRef, onChange, onKeyDown, required, value,
+      className, disabled, itemRef, onChange, onKeyDown, required, value,
     } = this.props;
@@ -42,2 +40,3 @@
         )}
+        disabled={disabled}
         name="hour"
@@ -68,2 +67,3 @@ max={maxHour}
   className: PropTypes.string.isRequired,
+  disabled: PropTypes.bool,
   itemRef: PropTypes.func,
@@ -70,0 +70,0 @@ maxTime: isTime,

src/TimeInput/MinuteInput.jsx

@@ -32,3 +32,3 @@ import React, { PureComponent } from 'react';
     const {
-      className, itemRef, onChange, onKeyDown, required, value,
+      className, disabled, itemRef, onChange, onKeyDown, required, value,
     } = this.props;
@@ -47,2 +47,3 @@
         )}
+        disabled={disabled}
         name="minute"
@@ -73,2 +74,3 @@ max={maxMinute}
   className: PropTypes.string.isRequired,
+  disabled: PropTypes.bool,
   hour: PropTypes.number,
@@ -75,0 +77,0 @@ itemRef: PropTypes.func,

src/TimeInput/NativeInput.jsx

@@ -29,3 +29,3 @@ import React, { PureComponent } from 'react';
     const {
-      maxTime, minTime, name, onChange, required, value, valueType,
+      disabled, maxTime, minTime, name, onChange, required, value, valueType,
     } = this.props;
@@ -36,2 +36,3 @@
         type="time"
+        disabled={disabled}
         max={maxTime ? nativeValueParser(maxTime) : null}
@@ -57,2 +58,3 @@ min={minTime ? nativeValueParser(minTime) : null}
 NativeInput.propTypes = {
+  disabled: PropTypes.bool,
   maxTime: isTime,
@@ -59,0 +61,0 @@ minTime: isTime,

src/TimeInput/SecondInput.jsx

@@ -39,3 +39,3 @@ import React, { PureComponent } from 'react';
     const {
-      className, itemRef, onChange, onKeyDown, required, value,
+      className, disabled, itemRef, onChange, onKeyDown, required, value,
     } = this.props;
@@ -54,2 +54,3 @@
         )}
+        disabled={disabled}
         name="second"
@@ -80,2 +81,3 @@ max={maxSecond}
   className: PropTypes.string.isRequired,
+  disabled: PropTypes.bool,
   hour: PropTypes.number,
@@ -82,0 +84,0 @@ itemRef: PropTypes.func,

src/TimePicker.jsx

@@ -1,2 +0,2 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
@@ -14,3 +14,3 @@ import mergeClassNames from 'merge-class-names';
 
-export default class TimePicker extends Component {
+export default class TimePicker extends PureComponent {
   state = {
@@ -74,14 +74,3 @@ isOpen: this.props.isOpen,
   renderInputs() {
-    const {
-      clearIcon,
-      clockIcon,
-      locale,
-      maxDetail,
-      maxTime,
-      minTime,
-      name,
-      required,
-      value,
-    } = this.props;
-    const { isOpen } = this.state;
+    const { disabled } = this.props;
 
@@ -91,15 +80,17 @@ return (
         <TimeInput
-          locale={locale}
-          isClockOpen={isOpen}
-          maxDetail={maxDetail}
-          maxTime={maxTime}
-          minTime={minTime}
-          name={name}
+          disabled={disabled}
+          locale={this.props.locale}
+          isClockOpen={this.state.isOpen}
+          maxDetail={this.props.maxDetail}
+          maxTime={this.props.maxTime}
+          minTime={this.props.minTime}
+          name={this.props.name}
           onChange={this.onChange}
           placeholder={this.placeholder}
-          required={required}
-          value={value}
+          required={this.props.required}
+          value={this.props.value}
         />
         <button
           className="react-time-picker__clear-button react-time-picker__button__icon"
+          disabled={disabled}
           onClick={this.clear}
@@ -109,6 +100,7 @@ onFocus={this.stopPropagation}
         >
-          {clearIcon}
+          {this.props.clearIcon}
         </button>
         <button
           className="react-time-picker__clock-button react-time-picker__button__icon"
+          disabled={disabled}
           onClick={this.toggleClock}
@@ -119,3 +111,3 @@ onFocus={this.stopPropagation}
         >
-          {clockIcon}
+          {this.props.clockIcon}
         </button>
@@ -183,2 +175,3 @@ </div>
           `${className}--${this.state.isOpen ? 'open' : 'closed'}`,
+          `${className}--${this.props.disabled ? 'disabled' : 'enabled'}`,
           this.props.className,
@@ -232,2 +225,3 @@ )}
   clearIcon: PropTypes.node,
+  disabled: PropTypes.bool,
   isOpen: PropTypes.bool,
@@ -234,0 +228,0 @@ locale: PropTypes.string,

No alert changes

Improved metrics

Total package byte prevSize

103311

increased by2.65%

Lines of code

2481

increased by1.22%

Worsened metrics

Number of lines in readme file

127

decreased by-2.31%

No dependency changes