New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
form-lib - npm Package Compare versions
Comparing version 0.1.7 to 0.1.8
@@ -19,8 +19,2 @@ 'use strict'; | ||
| var _lodash = require('lodash'); | ||
| var _lodash2 = _interopRequireDefault(_lodash); | ||
| var _BrowserDetection = require('./utils/BrowserDetection'); | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
@@ -36,16 +30,5 @@ | ||
| function isTextField(target) { | ||
| return target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement; | ||
| } | ||
| function createFormControl(Component) { | ||
| // if now is in composition session | ||
| var isOnComposition = false; | ||
| // for safari use only, innervalue can't setState when compositionend occurred | ||
| var isInnerChangeFromOnChange = false; | ||
| var propTypes = { | ||
| /*eslint-disable */ | ||
| /* eslint-disable react/forbid-prop-types */ | ||
| value: _propTypes2.default.any, | ||
@@ -59,14 +42,8 @@ defaultValue: _propTypes2.default.any, | ||
| function FormControl(props, context) { | ||
| function FormControl(props) { | ||
| _classCallCheck(this, FormControl); | ||
| var _this = _possibleConstructorReturn(this, (FormControl.__proto__ || Object.getPrototypeOf(FormControl)).call(this, props, context)); | ||
| var _this = _possibleConstructorReturn(this, (FormControl.__proto__ || Object.getPrototypeOf(FormControl)).call(this, props)); | ||
| var value = props.value || props.defaultValue || ''; | ||
| _this.state = { | ||
| inputValue: value, | ||
| innerValue: value | ||
| }; | ||
| _this.handleChange = _this.handleChange.bind(_this); | ||
| _this.handleComposition = _this.handleComposition.bind(_this); | ||
| return _this; | ||
@@ -76,93 +53,10 @@ } | ||
| _createClass(FormControl, [{ | ||
| key: 'componentWillReceiveProps', | ||
| value: function componentWillReceiveProps(nextProps) { | ||
| if (!_lodash2.default.isEqual(nextProps.value, this.props.value)) { | ||
| this.state = { | ||
| inputValue: nextProps.value, | ||
| innerValue: nextProps.value | ||
| }; | ||
| } | ||
| } | ||
| }, { | ||
| key: 'handleChange', | ||
| value: function handleChange(e) { | ||
| var _props$onChange = this.props.onChange, | ||
| onChange = _props$onChange === undefined ? function () {} : _props$onChange; | ||
| var onChange = this.props.onChange; | ||
| var value = e.target.value; | ||
| // Flow check | ||
| if (!isTextField(e.target)) { | ||
| onChange(value, e); | ||
| return; | ||
| } | ||
| if (isInnerChangeFromOnChange) { | ||
| this.setState({ | ||
| inputValue: value, | ||
| innerValue: value | ||
| }); | ||
| onChange(value, e); | ||
| isInnerChangeFromOnChange = false; | ||
| return; | ||
| } | ||
| // when is on composition, change inputValue only | ||
| // when not in composition change inputValue and innerValue both | ||
| if (!isOnComposition) { | ||
| this.setState({ | ||
| inputValue: value, | ||
| innerValue: value | ||
| }); | ||
| onChange(value, e); | ||
| } else { | ||
| this.setState({ inputValue: value }); | ||
| } | ||
| onChange && onChange(value); | ||
| } | ||
| /* istanbul ignore next */ | ||
| }, { | ||
| key: 'handleComposition', | ||
| value: function handleComposition(e) { | ||
| var _props$onChange2 = this.props.onChange, | ||
| onChange = _props$onChange2 === undefined ? function () {} : _props$onChange2; | ||
| // Flow check | ||
| if (!isTextField(e.target)) { | ||
| return; | ||
| } | ||
| if (e.type === 'compositionend') { | ||
| var value = e.target.value; | ||
| // Chrome is ok for only setState innerValue | ||
| // Opera, IE and Edge is like Chrome | ||
| if (_BrowserDetection.isChrome || _BrowserDetection.isIE || _BrowserDetection.isEdge || _BrowserDetection.isOpera) { | ||
| this.setState({ innerValue: value }); | ||
| onChange(value, e); | ||
| } | ||
| // Firefox need to setState inputValue again... | ||
| if (_BrowserDetection.isFirefox) { | ||
| this.setState({ | ||
| innerValue: value, | ||
| inputValue: value | ||
| }); | ||
| onChange(value, e); | ||
| } | ||
| // Safari think e.target.value in composition event is keyboard char, | ||
| // but it will fired another change after compositionend | ||
| if (_BrowserDetection.isSafari) { | ||
| // do change in the next change event | ||
| isInnerChangeFromOnChange = true; | ||
| } | ||
| isOnComposition = false; | ||
| } else { | ||
| isOnComposition = true; | ||
| } | ||
| } | ||
| }, { | ||
| key: 'render', | ||
@@ -172,14 +66,6 @@ value: function render() { | ||
| className = _props.className, | ||
| value = _props.value, | ||
| props = _objectWithoutProperties(_props, ['className', 'value']); | ||
| props = _objectWithoutProperties(_props, ['className']); | ||
| if (!_lodash2.default.isUndefined(value)) { | ||
| props.value = this.state.inputValue; | ||
| } | ||
| return _react2.default.createElement(Component, _extends({}, props, { | ||
| className: 'form-control ' + (className || ''), | ||
| onCompositionStart: this.handleComposition, | ||
| onCompositionUpdate: this.handleComposition, | ||
| onCompositionEnd: this.handleComposition, | ||
| onChange: this.handleChange | ||
@@ -186,0 +72,0 @@ })); |
| { | ||
| "name": "form-lib", | ||
| "version": "0.1.7", | ||
| "version": "0.1.8", | ||
| "description": "Form component for React", | ||
@@ -5,0 +5,0 @@ "main": "lib/index.js", |
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import _ from 'lodash'; | ||
| import { isChrome, isFirefox, isSafari, isIE, isEdge, isOpera } from './utils/BrowserDetection'; | ||
| function isTextField(target) { | ||
| return (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement); | ||
| } | ||
| function createFormControl(Component) { | ||
| // if now is in composition session | ||
| let isOnComposition = false; | ||
| // for safari use only, innervalue can't setState when compositionend occurred | ||
| let isInnerChangeFromOnChange = false; | ||
| const propTypes = { | ||
| /*eslint-disable */ | ||
| /* eslint-disable react/forbid-prop-types */ | ||
| value: PropTypes.any, | ||
@@ -27,107 +13,16 @@ defaultValue: PropTypes.any, | ||
| class FormControl extends React.Component { | ||
| constructor(props, context) { | ||
| super(props, context); | ||
| const value = props.value || props.defaultValue || ''; | ||
| this.state = { | ||
| inputValue: value, | ||
| innerValue: value, | ||
| }; | ||
| constructor(props) { | ||
| super(props); | ||
| this.handleChange = this.handleChange.bind(this); | ||
| this.handleComposition = this.handleComposition.bind(this); | ||
| } | ||
| componentWillReceiveProps(nextProps) { | ||
| if (!_.isEqual(nextProps.value, this.props.value)) { | ||
| this.state = { | ||
| inputValue: nextProps.value, | ||
| innerValue: nextProps.value, | ||
| }; | ||
| } | ||
| } | ||
| handleChange(e) { | ||
| const { onChange = () => { } } = this.props; | ||
| const { onChange } = this.props; | ||
| const value = e.target.value; | ||
| // Flow check | ||
| if (!isTextField(e.target)) { | ||
| onChange(value, e); | ||
| return; | ||
| } | ||
| if (isInnerChangeFromOnChange) { | ||
| this.setState({ | ||
| inputValue: value, | ||
| innerValue: value | ||
| }); | ||
| onChange(value, e); | ||
| isInnerChangeFromOnChange = false; | ||
| return; | ||
| } | ||
| // when is on composition, change inputValue only | ||
| // when not in composition change inputValue and innerValue both | ||
| if (!isOnComposition) { | ||
| this.setState({ | ||
| inputValue: value, | ||
| innerValue: value, | ||
| }); | ||
| onChange(value, e); | ||
| } else { | ||
| this.setState({ inputValue: value }); | ||
| } | ||
| onChange && onChange(value); | ||
| } | ||
| /* istanbul ignore next */ | ||
| handleComposition(e) { | ||
| const { onChange = () => { } } = this.props; | ||
| // Flow check | ||
| if (!isTextField(e.target)) { | ||
| return; | ||
| } | ||
| if (e.type === 'compositionend') { | ||
| const value = e.target.value; | ||
| // Chrome is ok for only setState innerValue | ||
| // Opera, IE and Edge is like Chrome | ||
| if (isChrome || isIE || isEdge || isOpera) { | ||
| this.setState({ innerValue: value }); | ||
| onChange(value, e); | ||
| } | ||
| // Firefox need to setState inputValue again... | ||
| if (isFirefox) { | ||
| this.setState({ | ||
| innerValue: value, | ||
| inputValue: value | ||
| }); | ||
| onChange(value, e); | ||
| } | ||
| // Safari think e.target.value in composition event is keyboard char, | ||
| // but it will fired another change after compositionend | ||
| if (isSafari) { | ||
| // do change in the next change event | ||
| isInnerChangeFromOnChange = true; | ||
| } | ||
| isOnComposition = false; | ||
| } else { | ||
| isOnComposition = true; | ||
| } | ||
| } | ||
| render() { | ||
| const { className, value, ...props } = this.props; | ||
| const { className, ...props } = this.props; | ||
| if (!_.isUndefined(value)) { | ||
| props.value = this.state.inputValue; | ||
| } | ||
| return ( | ||
@@ -137,5 +32,2 @@ <Component | ||
| className={`form-control ${className || ''}`} | ||
| onCompositionStart={this.handleComposition} | ||
| onCompositionUpdate={this.handleComposition} | ||
| onCompositionEnd={this.handleComposition} | ||
| onChange={this.handleChange} | ||
@@ -142,0 +34,0 @@ /> |
No alert changes
Worsened metrics
- Total package byte prevSize
34677
-19.62%- Number of package files
12
-14.29%- Lines of code
724
-23.31%No dependency changes