react-simple-input - npm Package Compare versions

Comparing version 0.3.1 to 0.4.0

dist/ReactSimpleInput.js

 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
@@ -13,2 +13,6 @@
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -23,145 +27,145 @@
 var Input = function (_Component) {
-    _inherits(Input, _Component);
+  _inherits(Input, _Component);
 
-    function Input(props) {
-        _classCallCheck(this, Input);
+  function Input(props) {
+    _classCallCheck(this, Input);
 
-        var _this = _possibleConstructorReturn(this, (Input.__proto__ || Object.getPrototypeOf(Input)).call(this, props));
+    var _this = _possibleConstructorReturn(this, (Input.__proto__ || Object.getPrototypeOf(Input)).call(this, props));
 
-        _this.state = {
-            isEmpty: _this.props.defaultValue !== ''
-        };
+    _this.state = {
+      isEmpty: _this.props.defaultValue !== ''
+    };
 
-        _this.onClick = _this.onClick.bind(_this);
+    _this.onClick = _this.onClick.bind(_this);
 
-        var date = Date.now();
+    var date = Date.now();
 
-        _this.timeoutsDates = {
-            onChange: date,
-            onKeyUp: date,
-            onKeyDown: date,
-            onKeyPress: date
-        };
+    _this.timeoutsDates = {
+      onChange: date,
+      onKeyUp: date,
+      onKeyDown: date,
+      onKeyPress: date
+    };
 
-        _this.timeouts = {};
-        return _this;
-    }
+    _this.timeouts = {};
+    return _this;
+  }
 
-    _createClass(Input, [{
-        key: 'render',
-        value: function render() {
-            var _this2 = this;
+  _createClass(Input, [{
+    key: 'render',
+    value: function render() {
+      var _this2 = this;
 
-            var clearButton = false;
+      var clearButton = false;
 
-            if (this.props.clearButton && this.state.isEmpty) {
-                clearButton = _react2.default.createElement(
-                    'div',
-                    { className: 'react-simple-input-clear', onClick: function onClick() {
-                            _this2.clear();
-                        } },
-                    '×'
-                );
-            }
+      if (this.props.clearButton && this.state.isEmpty) {
+        clearButton = _react2.default.createElement(
+          'div',
+          { className: 'react-simple-input-clear', onClick: function onClick() {
+              _this2.clear();
+            } },
+          '\xD7'
+        );
+      }
 
-            return _react2.default.createElement(
-                'div',
-                { className: 'react-simple-input-container ' + this.props.classNameContainer },
-                _react2.default.createElement('input', {
-                    type: 'text',
-                    defaultValue: this.props.defaultValue,
-                    className: 'react-simple-input ' + this.props.className,
-                    placeholder: this.props.placeholder,
-                    ref: 'input',
-                    onChange: function onChange(e) {
-                        _this2.delayedEvent(e, 'onChange');
-                    },
-                    onKeyDown: function onKeyDown(e) {
-                        _this2.delayedEvent(e, 'onKeyDown');
-                    },
-                    onKeyUp: function onKeyUp(e) {
-                        _this2.delayedEvent(e, 'onKeyUp');
-                    },
-                    onKeyPress: function onKeyPress(e) {
-                        _this2.delayedEvent(e, 'onKeyPress');
-                    },
-                    onClick: this.onClick
-                }),
-                clearButton
-            );
-        }
-    }, {
-        key: 'onClick',
-        value: function onClick(e) {
+      return _react2.default.createElement(
+        'div',
+        { className: 'react-simple-input-container ' + this.props.classNameContainer },
+        _react2.default.createElement('input', {
+          type: 'text',
+          defaultValue: this.props.defaultValue,
+          className: 'react-simple-input ' + this.props.className,
+          placeholder: this.props.placeholder,
+          ref: 'input',
+          onChange: function onChange(e) {
+            _this2.delayedEvent(e, 'onChange');
+          },
+          onKeyDown: function onKeyDown(e) {
+            _this2.delayedEvent(e, 'onKeyDown');
+          },
+          onKeyUp: function onKeyUp(e) {
+            _this2.delayedEvent(e, 'onKeyUp');
+          },
+          onKeyPress: function onKeyPress(e) {
+            _this2.delayedEvent(e, 'onKeyPress');
+          },
+          onClick: this.onClick
+        }),
+        clearButton
+      );
+    }
+  }, {
+    key: 'onClick',
+    value: function onClick(e) {
 
-            e.persist();
+      e.persist();
 
-            if (this.props.selectOnClick) this.refs.input.select();
+      if (this.props.selectOnClick) this.refs.input.select();
 
-            this.props.onClick(e);
-        }
-    }, {
-        key: 'delayedEvent',
-        value: function delayedEvent(e, type) {
+      this.props.onClick(e);
+    }
+  }, {
+    key: 'delayedEvent',
+    value: function delayedEvent(e, type) {
 
-            e.persist();
+      e.persist();
 
-            var self = this;
-            var now = Date.now();
-            var timeout = this.props.eventsTimeouts[type] || 0;
+      var self = this;
+      var now = Date.now();
+      var timeout = this.props.eventsTimeouts[type] || 0;
 
-            if (now - this.timeoutsDates[type] < timeout) {
-                clearTimeout(this.timeouts[type]);
-            }
+      if (now - this.timeoutsDates[type] < timeout) {
+        clearTimeout(this.timeouts[type]);
+      }
 
-            this.timeoutsDates[type] = now;
+      this.timeoutsDates[type] = now;
 
-            self.setState({ isEmpty: e.currentTarget.value !== '' });
+      self.setState({ isEmpty: e.currentTarget.value !== '' });
 
-            this.timeouts[type] = setTimeout(function () {
-                self.props[type](e);
-            }, timeout);
-        }
-    }, {
-        key: 'clear',
-        value: function clear() {
-            this.refs.input.value = '';
-            var event = new Event('input', { bubbles: true });
-            this.refs.input.dispatchEvent(event);
-        }
-    }]);
+      this.timeouts[type] = setTimeout(function () {
+        self.props[type](e);
+      }, timeout);
+    }
+  }, {
+    key: 'clear',
+    value: function clear() {
+      this.refs.input.value = '';
+      var event = new Event('input', { bubbles: true });
+      this.refs.input.dispatchEvent(event);
+    }
+  }]);
 
-    return Input;
+  return Input;
 }(_react.Component);
 
 Input.defaultProps = {
-    className: '',
-    classNameContainer: '',
-    defaultValue: '',
-    placeholder: '',
-    clearButton: false,
-    selectOnClick: false,
-    eventsTimeouts: {},
-    onChange: function onChange() {},
-    onKeyDown: function onKeyDown() {},
-    onKeyUp: function onKeyUp() {},
-    onKeyPress: function onKeyPress() {},
-    onClick: function onClick() {}
+  className: '',
+  classNameContainer: '',
+  defaultValue: '',
+  placeholder: '',
+  clearButton: false,
+  selectOnClick: false,
+  eventsTimeouts: {},
+  onChange: function onChange() {},
+  onKeyDown: function onKeyDown() {},
+  onKeyUp: function onKeyUp() {},
+  onKeyPress: function onKeyPress() {},
+  onClick: function onClick() {}
 };
 
 Input.propTypes = {
-    className: _react2.default.PropTypes.string,
-    classNameContainer: _react2.default.PropTypes.string,
-    defaultValue: _react2.default.PropTypes.string,
-    placeholder: _react2.default.PropTypes.string,
-    clearButton: _react2.default.PropTypes.bool,
-    selectOnClick: _react2.default.PropTypes.bool,
-    eventsTimeouts: _react2.default.PropTypes.object,
-    onChange: _react2.default.PropTypes.func,
-    onKeyDown: _react2.default.PropTypes.func,
-    onKeyUp: _react2.default.PropTypes.func,
-    onKeyPress: _react2.default.PropTypes.func,
-    onClick: _react2.default.PropTypes.func
+  className: _propTypes2.default.string,
+  classNameContainer: _propTypes2.default.string,
+  defaultValue: _propTypes2.default.string,
+  placeholder: _propTypes2.default.string,
+  clearButton: _propTypes2.default.bool,
+  selectOnClick: _propTypes2.default.bool,
+  eventsTimeouts: _propTypes2.default.object,
+  onChange: _propTypes2.default.func,
+  onKeyDown: _propTypes2.default.func,
+  onKeyUp: _propTypes2.default.func,
+  onKeyPress: _propTypes2.default.func,
+  onClick: _propTypes2.default.func
 };
 
 exports.default = Input;

js/ReactSimpleInput.jsx

 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 
 
-
 class Input extends Component {
 
-    constructor(props) {
+  constructor(props) {
 
-        super(props);
+    super(props);
 
-        this.state = {
-            isEmpty : this.props.defaultValue !== ''
-        }
+    this.state = {
+      isEmpty : this.props.defaultValue !== ''
+    }
 
-        this.onClick = this.onClick.bind(this);
+    this.onClick = this.onClick.bind(this);
 
-        const date = Date.now();
+    const date = Date.now();
 
-        this.timeoutsDates = {
-            onChange: date,
-            onKeyUp: date,
-            onKeyDown: date,
-            onKeyPress: date
-        };
+    this.timeoutsDates = {
+      onChange: date,
+      onKeyUp: date,
+      onKeyDown: date,
+      onKeyPress: date
+    };
 
-        this.timeouts = {};
-    }
+    this.timeouts = {};
+  }
 
-    render() {
+  render() {
 
-        let clearButton = false;
+    let clearButton = false;
 
-        if(this.props.clearButton && this.state.isEmpty) {
-            clearButton = <div className='react-simple-input-clear' onClick={ () => { this.clear() } }>&times;</div>
-        }
-
-        return (
-            <div className={ 'react-simple-input-container ' + this.props.classNameContainer }>
-                <input
-                    type='text'
-                    defaultValue={ this.props.defaultValue }
-                    className={ 'react-simple-input ' + this.props.className }
-                    placeholder={ this.props.placeholder }
-                    ref='input'
-                    onChange={ (e) => { this.delayedEvent(e, 'onChange'); } }
-                    onKeyDown={ (e) => { this.delayedEvent(e, 'onKeyDown'); } }
-                    onKeyUp={ (e) => { this.delayedEvent(e, 'onKeyUp'); } }
-                    onKeyPress={ (e) => { this.delayedEvent(e, 'onKeyPress'); } }
-                    onClick={ this.onClick }
-                />
-                { clearButton }
-            </div>
-        );
+    if(this.props.clearButton && this.state.isEmpty) {
+      clearButton = <div className='react-simple-input-clear' onClick={ () => { this.clear() } }>&times;</div>
     }
 
-    onClick(e) {
+    return (
+      <div className={ 'react-simple-input-container ' + this.props.classNameContainer }>
+        <input
+          type='text'
+          defaultValue={ this.props.defaultValue }
+          className={ 'react-simple-input ' + this.props.className }
+          placeholder={ this.props.placeholder }
+          ref='input'
+          onChange={ (e) => { this.delayedEvent(e, 'onChange'); } }
+          onKeyDown={ (e) => { this.delayedEvent(e, 'onKeyDown'); } }
+          onKeyUp={ (e) => { this.delayedEvent(e, 'onKeyUp'); } }
+          onKeyPress={ (e) => { this.delayedEvent(e, 'onKeyPress'); } }
+          onClick={ this.onClick }
+        />
+        { clearButton }
+      </div>
+    );
+  }
 
-        e.persist();
+  onClick(e) {
 
-        if(this.props.selectOnClick) this.refs.input.select();
+    e.persist();
 
-        this.props.onClick(e);
-    }
+    if(this.props.selectOnClick) this.refs.input.select();
 
-    delayedEvent(e, type) {
+    this.props.onClick(e);
+  }
 
-        e.persist();
+  delayedEvent(e, type) {
 
-        const self = this;
-        const now  = Date.now();
-        const timeout = this.props.eventsTimeouts[type] || 0;
+    e.persist();
 
-        if(now - this.timeoutsDates[type] < timeout) {
-            clearTimeout(this.timeouts[type]);
-        }
+    const self = this;
+    const now  = Date.now();
+    const timeout = this.props.eventsTimeouts[type] || 0;
 
-        this.timeoutsDates[type] = now;
+    if(now - this.timeoutsDates[type] < timeout) {
+      clearTimeout(this.timeouts[type]);
+    }
 
-        self.setState({ isEmpty : e.currentTarget.value !== '' });
+    this.timeoutsDates[type] = now;
 
-        this.timeouts[type] = setTimeout(function() {
-            self.props[type](e);
-        }, timeout);
-    }
+    self.setState({ isEmpty : e.currentTarget.value !== '' });
 
-    clear() {
-        this.refs.input.value = '';
-        const event = new Event('input', { bubbles: true });
-        this.refs.input.dispatchEvent(event);
-    }
+    this.timeouts[type] = setTimeout(function() {
+      self.props[type](e);
+    }, timeout);
+  }
+
+  clear() {
+    this.refs.input.value = '';
+    const event = new Event('input', { bubbles: true });
+    this.refs.input.dispatchEvent(event);
+  }
 }
 
 Input.defaultProps = {
-        className          : '',
-        classNameContainer : '',
-        defaultValue       : '',
-        placeholder        : '',
-        clearButton        : false,
-        selectOnClick      : false,
-        eventsTimeouts     : {},
-        onChange           : () => {},
-        onKeyDown          : () => {},
-        onKeyUp            : () => {},
-        onKeyPress         : () => {},
-        onClick            : () => {}
+  className          : '',
+  classNameContainer : '',
+  defaultValue       : '',
+  placeholder        : '',
+  clearButton        : false,
+  selectOnClick      : false,
+  eventsTimeouts     : {},
+  onChange           : () => {},
+  onKeyDown          : () => {},
+  onKeyUp            : () => {},
+  onKeyPress         : () => {},
+  onClick            : () => {}
 };
 
 Input.propTypes = {
-    className          : React.PropTypes.string,
-    classNameContainer : React.PropTypes.string,
-    defaultValue       : React.PropTypes.string,
-    placeholder        : React.PropTypes.string,
-    clearButton        : React.PropTypes.bool,
-    selectOnClick      : React.PropTypes.bool,
-    eventsTimeouts     : React.PropTypes.object,
-    onChange           : React.PropTypes.func,
-    onKeyDown          : React.PropTypes.func,
-    onKeyUp            : React.PropTypes.func,
-    onKeyPress         : React.PropTypes.func,
-    onClick            : React.PropTypes.func
+  className          : PropTypes.string,
+  classNameContainer : PropTypes.string,
+  defaultValue       : PropTypes.string,
+  placeholder        : PropTypes.string,
+  clearButton        : PropTypes.bool,
+  selectOnClick      : PropTypes.bool,
+  eventsTimeouts     : PropTypes.object,
+  onChange           : PropTypes.func,
+  onKeyDown          : PropTypes.func,
+  onKeyUp            : PropTypes.func,
+  onKeyPress         : PropTypes.func,
+  onClick            : PropTypes.func
 };
 
 export default Input;

package.json

 {
   "name": "react-simple-input",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "A simple text input for React",
@@ -35,3 +35,6 @@ "main": "dist/ReactSimpleInput.js",
     "gulp-sass": "^2.1.0"
+  },
+  "dependencies": {
+    "prop-types": "^15.5.10"
   }
 }

styles/style.scss

 .react-simple-input-container {
-    position: relative;
+  position: relative;
 
-    .react-simple-input {
-        padding: 6px 12px;
-        border: 1px solid #C7C7C7;
-        color: #555;
-    }
+  .react-simple-input {
+    padding: 6px 12px;
+    border: 1px solid #C7C7C7;
+    color: #555;
+  }
 
-    .react-simple-input-clear {
-        position: absolute;
-        right: 8px;
-        top: 4px;
-        font-size: 16px;
-        color: #777;
-    }
+  .react-simple-input-clear {
+    position: absolute;
+    right: 8px;
+    top: 4px;
+    font-size: 16px;
+    color: #777;
+  }
 }

No alert changes

Improved metrics

Lines of code

263

1.15%

Worsened metrics

Total package byte prevSize

16010

-6.3%

Dependency count

1

Infinity%

Number of package files

9

-10%

Dependency changes

• + Added

  prop-types@^15.5.10

• + Added

  js-tokens@4.0.0
  (transitive)

• + Added

  loose-envify@1.4.0
  (transitive)

• + Added

  object-assign@4.1.1
  (transitive)

• + Added

  prop-types@15.8.1
  (transitive)

• + Added

  react-is@16.13.1
  (transitive)