react-imask
Advanced tools
react-imask - npm Package Compare versions
Comparing version 1.0.0 to 2.0.0
@@ -17,3 +17,19 @@ (function (global, factory) { | ||
| var createClass = function () { | ||
| function defineProperties(target, props) { | ||
| for (var i = 0; i < props.length; i++) { | ||
| var descriptor = props[i]; | ||
| descriptor.enumerable = descriptor.enumerable || false; | ||
| descriptor.configurable = true; | ||
| if ("value" in descriptor) descriptor.writable = true; | ||
| Object.defineProperty(target, descriptor.key, descriptor); | ||
| } | ||
| } | ||
| return function (Constructor, protoProps, staticProps) { | ||
| if (protoProps) defineProperties(Constructor.prototype, protoProps); | ||
| if (staticProps) defineProperties(Constructor, staticProps); | ||
| return Constructor; | ||
| }; | ||
| }(); | ||
@@ -92,109 +108,88 @@ | ||
| classCallCheck(this, MaskedComponent); | ||
| return possibleConstructorReturn(this, _React$Component.apply(this, arguments)); | ||
| return possibleConstructorReturn(this, (MaskedComponent.__proto__ || Object.getPrototypeOf(MaskedComponent)).apply(this, arguments)); | ||
| } | ||
| MaskedComponent.prototype.componentDidMount = function componentDidMount() { | ||
| this.initMask(); | ||
| }; | ||
| createClass(MaskedComponent, [{ | ||
| key: 'componentDidMount', | ||
| value: function componentDidMount() { | ||
| this.initMask(); | ||
| } | ||
| }, { | ||
| key: 'componentWillReceiveProps', | ||
| value: function componentWillReceiveProps(props) { | ||
| this.maskRef.updateOptions(this._extractOptionsFromProps(_extends({}, props))); | ||
| this.maskValue = props.value; | ||
| } | ||
| }, { | ||
| key: 'componentWillUnmount', | ||
| value: function componentWillUnmount() { | ||
| this.maskRef.destroy(); | ||
| } | ||
| }, { | ||
| key: 'render', | ||
| value: function render() { | ||
| var _this2 = this; | ||
| MaskedComponent.prototype.componentWillReceiveProps = function componentWillReceiveProps(props) { | ||
| var _extractFromProps2 = this._extractFromProps(_extends({}, props)), | ||
| options = _extractFromProps2.options, | ||
| values = _extractFromProps2.values; | ||
| return React.createElement(ComposedComponent, _extends({}, this._extractNonMaskProps(this.props), { | ||
| defaultValue: this.props.value, | ||
| inputRef: function inputRef(el) { | ||
| return _this2.element = el; | ||
| } | ||
| })); | ||
| } | ||
| }, { | ||
| key: 'initMask', | ||
| value: function initMask() { | ||
| this.maskRef = new IMask(this.element, this._extractOptionsFromProps(_extends({}, this.props))).on('accept', this._onAccept.bind(this)).on('complete', this._onComplete.bind(this)); | ||
| this.maskRef.updateOptions(options); | ||
| this._updateValues(values); | ||
| }; | ||
| MaskedComponent.prototype.componentWillUnmount = function componentWillUnmount() { | ||
| this.maskRef.destroy(); | ||
| }; | ||
| MaskedComponent.prototype.render = function render() { | ||
| var _this2 = this; | ||
| return React.createElement(ComposedComponent, _extends({}, this._extractNonMaskProps(this.props), { | ||
| defaultValue: this.props.unmaskedValue || this.props.value, | ||
| inputRef: function inputRef(el) { | ||
| return _this2.element = el; | ||
| } | ||
| })); | ||
| }; | ||
| MaskedComponent.prototype.initMask = function initMask() { | ||
| var _extractFromProps3 = this._extractFromProps(_extends({}, this.props)), | ||
| options = _extractFromProps3.options, | ||
| values = _extractFromProps3.values; | ||
| this.maskRef = new IMask(this.element, options).on('accept', this._onAccept.bind(this)).on('complete', this._onComplete.bind(this)); | ||
| this._updateValues(values); | ||
| }; | ||
| MaskedComponent.prototype._extractMaskProps = function _extractMaskProps(props) { | ||
| props = _extends({}, props); | ||
| // keep only non mask props | ||
| Object.keys(props).filter(function (prop) { | ||
| return !MaskedComponent.propTypes.hasOwnProperty(prop); | ||
| }).forEach(function (nonMaskProp) { | ||
| delete props[nonMaskProp]; | ||
| }); | ||
| return props; | ||
| }; | ||
| MaskedComponent.prototype._extractNonMaskProps = function _extractNonMaskProps(props) { | ||
| props = _extends({}, props); | ||
| Object.keys(MaskedComponent.propTypes).forEach(function (maskProp) { | ||
| delete props[maskProp]; | ||
| }); | ||
| return props; | ||
| }; | ||
| MaskedComponent.prototype._extractFromProps = function _extractFromProps(props) { | ||
| var value = props.value; | ||
| var unmaskedValue = props.unmaskedValue; | ||
| var maskProps = this._extractMaskProps(props); | ||
| delete maskProps.value; | ||
| delete maskProps.unmaskedValue; | ||
| return { options: maskProps, values: { value: value, unmaskedValue: unmaskedValue } }; | ||
| }; | ||
| MaskedComponent.prototype._updateValues = function _updateValues(values) { | ||
| for (var prop in values) { | ||
| if (values[prop] != null) this.maskRef[prop] = values[prop]; | ||
| this.maskValue = this.props.value; | ||
| } | ||
| }; | ||
| }, { | ||
| key: '_extractOptionsFromProps', | ||
| value: function _extractOptionsFromProps(props) { | ||
| props = _extends({}, props); | ||
| MaskedComponent.prototype._onAccept = function _onAccept(value) { | ||
| var _props; | ||
| // keep only mask props | ||
| Object.keys(props).filter(function (prop) { | ||
| return !MaskedComponent.propTypes.hasOwnProperty(prop); | ||
| }).forEach(function (nonMaskProp) { | ||
| delete props[nonMaskProp]; | ||
| }); | ||
| if ('unmaskedValue' in this.props) value = this.maskRef.unmaskedValue; | ||
| delete props.value; | ||
| delete props.unmask; | ||
| for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { | ||
| args[_key - 1] = arguments[_key]; | ||
| return props; | ||
| } | ||
| }, { | ||
| key: '_extractNonMaskProps', | ||
| value: function _extractNonMaskProps(props) { | ||
| props = _extends({}, props); | ||
| if (this.props.onAccept) (_props = this.props).onAccept.apply(_props, [value].concat(args)); | ||
| }; | ||
| Object.keys(MaskedComponent.propTypes).forEach(function (maskProp) { | ||
| delete props[maskProp]; | ||
| }); | ||
| MaskedComponent.prototype._onComplete = function _onComplete(value) { | ||
| var _props2; | ||
| if ('unmaskedValue' in this.props) value = this.maskRef.unmaskedValue; | ||
| for (var _len2 = arguments.length, args = Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) { | ||
| args[_key2 - 1] = arguments[_key2]; | ||
| return props; | ||
| } | ||
| if (this.props.onComplete) (_props2 = this.props).onComplete.apply(_props2, [value].concat(args)); | ||
| }; | ||
| }, { | ||
| key: '_onAccept', | ||
| value: function _onAccept() { | ||
| if (this.props.onAccept) this.props.onAccept(this.maskValue, this.maskRef); | ||
| } | ||
| }, { | ||
| key: '_onComplete', | ||
| value: function _onComplete() { | ||
| if (this.props.onComplete) this.props.onComplete(this.maskValue, this.maskRef); | ||
| } | ||
| }, { | ||
| key: 'maskValue', | ||
| get: function get$$1() { | ||
| return this.props.unmask ? this.maskRef.unmaskedValue : this.maskRef.value; | ||
| }, | ||
| set: function set$$1(value) { | ||
| value = value || ''; | ||
| if (this.props.unmask) this.maskRef.unmaskedValue = value;else this.maskRef.value = value; | ||
| } | ||
| }]); | ||
| return MaskedComponent; | ||
@@ -207,3 +202,3 @@ }(React.Component); | ||
| value: PropTypes.string, | ||
| unmaskedValue: PropTypes.string, | ||
| unmask: PropTypes.bool, | ||
| prepare: PropTypes.func, | ||
@@ -230,3 +225,3 @@ validate: PropTypes.func, | ||
| radix: PropTypes.string, | ||
| thousandsSeparator: PropTypes.PropTypes.string, | ||
| thousandsSeparator: PropTypes.string, | ||
| mapToRadix: PropTypes.arrayOf(PropTypes.string), | ||
@@ -233,0 +228,0 @@ scale: PropTypes.number, |
| { | ||
| "name": "react-imask", | ||
| "version": "1.0.0", | ||
| "version": "2.0.0", | ||
| "description": "React input mask", | ||
@@ -37,2 +37,3 @@ "main": "dist/react-imask.js", | ||
| "babel-core": "^6.26.0", | ||
| "babel-eslint": "^8.2.1", | ||
| "babel-plugin-external-helpers": "^6.22.0", | ||
@@ -39,0 +40,0 @@ "babel-plugin-transform-object-assign": "^6.22.0", |
@@ -10,3 +10,3 @@ # React IMask Plugin | ||
| ## Mask input example | ||
| ## Mask Input Example | ||
| ```javascript | ||
@@ -16,9 +16,10 @@ import {IMaskInput} from 'react-imask'; | ||
| <IMaskInput | ||
| mask=Number, | ||
| radix=".", | ||
| value="123", // possible to use `unmaskedValue`, but not both | ||
| mask=Number | ||
| radix="." | ||
| value="123" | ||
| unmask="true" | ||
| onAccept={ | ||
| // first argument is `value` or `unmaskedValue` depending on prop above | ||
| // first argument will be `value` or `unmaskedValue` depending on prop above | ||
| (value, mask) => console.log(value) | ||
| }, | ||
| } | ||
| // ...and more mask props in a guide | ||
@@ -31,3 +32,3 @@ | ||
| ## Extend existing components | ||
| ## Extend Existing Components | ||
| ```javascript | ||
@@ -43,3 +44,3 @@ import {IMaskMixin} from 'react-imask'; | ||
| <StyledInput | ||
| ...props, | ||
| ...props | ||
| innerRef={inputRef} // bind internal input | ||
@@ -50,5 +51,5 @@ /> | ||
| <MaskedStyledInput | ||
| mask=Number, | ||
| radix=".", | ||
| onAccept={(value, mask) => console.log(value)}, | ||
| mask=Number | ||
| radix="." | ||
| onAccept={(value, mask) => console.log(value)} | ||
| // ...and more mask props in a guide | ||
@@ -61,5 +62,5 @@ | ||
| ## Many thanks to | ||
| ## Many Thanks to | ||
| [@Yordis Prieto](https://github.com/yordis) | ||
| [@Alexander Kiselev](https://github.com/MaaKut) |
@@ -14,7 +14,4 @@ import React from 'react'; | ||
| componentWillReceiveProps (props) { | ||
| const {options, values} = this._extractFromProps({...props}); | ||
| this.maskRef.updateOptions(options); | ||
| this._updateValues(values); | ||
| this.maskRef.updateOptions(this._extractOptionsFromProps({...props})); | ||
| this.maskValue = props.value; | ||
| } | ||
@@ -29,3 +26,3 @@ | ||
| ...this._extractNonMaskProps(this.props), | ||
| defaultValue: this.props.unmaskedValue || this.props.value, | ||
| defaultValue: this.props.value, | ||
| inputRef: (el) => this.element = el, | ||
@@ -36,15 +33,13 @@ }); | ||
| initMask () { | ||
| const {options, values} = this._extractFromProps({...this.props}); | ||
| this.maskRef = new IMask(this.element, options) | ||
| this.maskRef = new IMask(this.element, this._extractOptionsFromProps({...this.props})) | ||
| .on('accept', this._onAccept.bind(this)) | ||
| .on('complete', this._onComplete.bind(this)); | ||
| this._updateValues(values); | ||
| this.maskValue = this.props.value; | ||
| } | ||
| _extractMaskProps (props) { | ||
| _extractOptionsFromProps (props) { | ||
| props = {...props}; | ||
| // keep only non mask props | ||
| // keep only mask props | ||
| Object.keys(props) | ||
@@ -56,2 +51,5 @@ .filter(prop => !MaskedComponent.propTypes.hasOwnProperty(prop)) | ||
| delete props.value; | ||
| delete props.unmask; | ||
| return props; | ||
@@ -70,28 +68,20 @@ } | ||
| _extractFromProps (props) { | ||
| const value = props.value; | ||
| const unmaskedValue = props.unmaskedValue; | ||
| const maskProps = this._extractMaskProps(props); | ||
| delete maskProps.value; | ||
| delete maskProps.unmaskedValue; | ||
| return {options: maskProps, values: {value, unmaskedValue}}; | ||
| get maskValue () { | ||
| return this.props.unmask ? | ||
| this.maskRef.unmaskedValue : | ||
| this.maskRef.value | ||
| } | ||
| _updateValues (values) { | ||
| for (const prop in values) { | ||
| if (values[prop] != null) this.maskRef[prop] = values[prop]; | ||
| } | ||
| set maskValue (value) { | ||
| value = value || ''; | ||
| if (this.props.unmask) this.maskRef.unmaskedValue = value; | ||
| else this.maskRef.value = value; | ||
| } | ||
| _onAccept (value, ...args) { | ||
| if ('unmaskedValue' in this.props) value = this.maskRef.unmaskedValue; | ||
| if (this.props.onAccept) this.props.onAccept(value, ...args); | ||
| _onAccept () { | ||
| if (this.props.onAccept) this.props.onAccept(this.maskValue, this.maskRef); | ||
| } | ||
| _onComplete (value, ...args) { | ||
| if ('unmaskedValue' in this.props) value = this.maskRef.unmaskedValue; | ||
| if (this.props.onComplete) this.props.onComplete(value, ...args); | ||
| _onComplete () { | ||
| if (this.props.onComplete) this.props.onComplete(this.maskValue, this.maskRef); | ||
| } | ||
@@ -111,3 +101,3 @@ }; | ||
| value: PropTypes.string, | ||
| unmaskedValue: PropTypes.string, | ||
| unmask: PropTypes.bool, | ||
| prepare: PropTypes.func, | ||
@@ -134,3 +124,3 @@ validate: PropTypes.func, | ||
| radix: PropTypes.string, | ||
| thousandsSeparator: PropTypes.PropTypes.string, | ||
| thousandsSeparator: PropTypes.string, | ||
| mapToRadix: PropTypes.arrayOf(PropTypes.string), | ||
@@ -137,0 +127,0 @@ scale: PropTypes.number, |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis 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
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Lines of code
- increased by3.9%
320
- Number of lines in readme file
- increased by1.67%
61
Worsened metrics
- Total package byte prevSize
- decreased by-7.14%
22546
- Dev dependency count
- increased by12.5%
9
No dependency changes