react-input-mask
Version:
Masked input component for React
2 lines (1 loc) • 12.7 kB
JavaScript
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n(require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["react","react-dom"],n):e.ReactInputMask=n(e.React,e.ReactDOM)}(this,function(l,f){"use strict";function u(){return(u=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o])}return e}).apply(this,arguments)}function t(e,n){e.prototype=Object.create(n.prototype),function s(e,n){for(var t=Object.getOwnPropertyNames(n),o=0;o<t.length;o++){var a=t[o],r=Object.getOwnPropertyDescriptor(n,a);r&&r.configurable&&e[a]===undefined&&Object.defineProperty(e,a,r)}return e}(e.prototype.constructor=e,n)}function h(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}l=l&&l.hasOwnProperty("default")?l["default"]:l;var p=function(e,n,t,o,a,r,s,i){if(!e){var l;if(n===undefined)l=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var u=[t,o,a,r,s,i],c=0;(l=new Error(n.replace(/%s/g,function(){return u[c++]}))).name="Invariant Violation"}throw l.framesToPop=1,l}};function d(e,n,t){if("selectionStart"in e&&"selectionEnd"in e)e.selectionStart=n,e.selectionEnd=t;else{var o=e.createTextRange();o.collapse(!0),o.moveStart("character",n),o.moveEnd("character",t-n),o.select()}}var c={9:"[0-9]",a:"[A-Za-z]","*":"[A-Za-z0-9]"},m="_";function k(e,n,t){var o="",a="",r=null,s=[];if(n===undefined&&(n=m),null==t&&(t=c),!e||"string"!=typeof e)return{maskChar:n,formatChars:t,mask:null,prefix:null,lastEditablePosition:null,permanents:[]};var i=!1;return e.split("").forEach(function(e){i=!i&&"\\"===e||(i||!t[e]?(s.push(o.length),o.length===s.length-1&&(a+=e)):r=o.length+1,o+=e,!1)}),{maskChar:n,formatChars:t,prefix:a,mask:o,lastEditablePosition:r,permanents:s}}function v(e,n){return-1!==e.permanents.indexOf(n)}function g(e,n,t){var o=e.mask,a=e.formatChars;if(!t)return!1;if(v(e,n))return o[n]===t;var r=a[o[n]];return new RegExp(r).test(t)}function w(t,e){return e.split("").every(function(e,n){return v(t,n)||!g(t,n,e)})}function C(e,n){var t=e.maskChar,o=e.prefix;if(!t){for(;n.length>o.length&&v(e,n.length-1);)n=n.slice(0,n.length-1);return n.length}for(var a=o.length,r=n.length;r>=o.length;r--){var s=n[r];if(!v(e,r)&&g(e,r,s)){a=r+1;break}}return a}function S(e,n){return C(e,n)===e.mask.length}function O(e,n){var t=e.maskChar,o=e.mask,a=e.prefix;if(!t){for((n=M(e,"",n,0)).length<a.length&&(n=a);n.length<o.length&&v(e,n.length);)n+=o[n.length];return n}if(n)return M(e,O(e,""),n,0);for(var r=0;r<o.length;r++)v(e,r)?n+=o[r]:n+=t;return n}function M(r,s,e,i){var l=r.mask,u=r.maskChar,c=r.prefix,n=e.split(""),f=S(r,s);return!u&&i>s.length&&(s+=l.slice(s.length,i)),n.every(function(e){for(;a=e,v(r,o=i)&&a!==l[o];){if(i>=s.length&&(s+=l[i]),n=e,t=i,u&&v(r,t)&&n===u)return!0;if(++i>=l.length)return!1}var n,t,o,a;return!g(r,i,e)&&e!==u||(i<s.length?s=u||f||i<c.length?s.slice(0,i)+e+s.slice(i+1):(s=s.slice(0,i)+e+s.slice(i),O(r,s)):u||(s+=e),++i<l.length)}),s}function I(e,n){for(var t=e.mask,o=n;o<t.length;++o)if(!v(e,o))return o;return null}function D(e){return e||0===e?e+"":""}function b(e,n,t,o,a){var r=e.mask,s=e.prefix,i=e.lastEditablePosition,l=n,u="",c=0,f=0,p=Math.min(a.start,t.start);if(t.end>a.start?f=(c=function h(o,e,n,a){var r=o.mask,s=o.maskChar,t=n.split(""),i=a;return t.every(function(e){for(;t=e,v(o,n=a)&&t!==r[n];)if(++a>=r.length)return!1;var n,t;return(g(o,a,e)||e===s)&&a++,a<r.length}),a-i}(e,0,u=l.slice(a.start,t.end),p))?a.length:0:l.length<o.length&&(f=o.length-l.length),l=o,f){if(1===f&&!a.length)p=a.start===t.start?I(e,t.start):function d(e,n){for(var t=n;0<=t;--t)if(!v(e,t))return t;return null}(e,t.start);l=function m(t,e,o,n){var a=o+n,r=t.maskChar,s=t.mask,i=t.prefix,l=e.split("");if(r)return l.map(function(e,n){return n<o||a<=n?e:v(t,n)?s[n]:r}).join("");for(var u=a;u<l.length;u++)v(t,u)&&(l[u]="");return o=Math.max(i.length,o),l.splice(o,a-o),e=l.join(""),O(t,e)}(e,l,p,f)}return l=M(e,l,u,p),(p+=c)>=r.length?p=r.length:p<s.length&&!c?p=s.length:p>=s.length&&p<i&&c&&(p=I(e,p)),u||(u=null),{value:l=O(e,l),enteredString:u,selection:{start:p,end:p}}}function y(e){return"function"==typeof e}function o(){return window.cancelAnimationFrame||window.webkitCancelRequestAnimationFrame||window.webkitCancelAnimationFrame||window.mozCancelAnimationFrame}function V(e){return(!!o()?function n(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame}():function(){return setTimeout(e,1e3/60)})(e)}function E(e){(o()||clearTimeout)(e)}return function(c){function e(e){var p=c.call(this,e)||this;p.focused=!1,p.mounted=!1,p.previousSelection=null,p.selectionDeferId=null,p.saveSelectionLoopDeferId=null,p.saveSelectionLoop=function(){p.previousSelection=p.getSelection(),p.saveSelectionLoopDeferId=V(p.saveSelectionLoop)},p.runSaveSelectionLoop=function(){null===p.saveSelectionLoopDeferId&&p.saveSelectionLoop()},p.stopSaveSelectionLoop=function(){null!==p.saveSelectionLoopDeferId&&(E(p.saveSelectionLoopDeferId),p.saveSelectionLoopDeferId=null,p.previousSelection=null)},p.getInputDOMNode=function(){if(!p.mounted)return null;var e=f.findDOMNode(h(h(p))),n="undefined"!=typeof window&&e instanceof window.Element;if(e&&!n)return null;if("INPUT"!==e.nodeName&&(e=e.querySelector("input")),!e)throw new Error("react-input-mask: inputComponent doesn't contain input node");return e},p.getInputValue=function(){var e=p.getInputDOMNode();return e?e.value:null},p.setInputValue=function(e){var n=p.getInputDOMNode();n&&(p.value=e,n.value=e)},p.setCursorToEnd=function(){var e=C(p.maskOptions,p.value),n=I(p.maskOptions,e);null!==n&&p.setCursorPosition(n)},p.setSelection=function(e,n,t){void 0===t&&(t={});var o=p.getInputDOMNode(),a=p.isFocused();o&&a&&(t.deferred||d(o,e,n),null!==p.selectionDeferId&&E(p.selectionDeferId),p.selectionDeferId=V(function(){p.selectionDeferId=null,d(o,e,n)}),p.previousSelection={start:e,end:n,length:Math.abs(n-e)})},p.getSelection=function(){return function a(e){var n=0,t=0;if("selectionStart"in e&&"selectionEnd"in e)n=e.selectionStart,t=e.selectionEnd;else{var o=document.selection.createRange();o.parentElement()===e&&(n=-o.moveStart("character",-e.value.length),t=-o.moveEnd("character",-e.value.length))}return{start:n,end:t,length:t-n}}(p.getInputDOMNode())},p.getCursorPosition=function(){return p.getSelection().start},p.setCursorPosition=function(e){p.setSelection(e,e)},p.isFocused=function(){return p.focused},p.getBeforeMaskedValueChangeConfig=function(){var e=p.maskOptions,n=e.mask,t=e.maskChar,o=e.permanents,a=e.formatChars;return{mask:n,maskChar:t,permanents:o,alwaysShowMask:!!p.props.alwaysShowMask,formatChars:a}},p.isInputAutofilled=function(e,n,t,o){var a=p.getInputDOMNode();try{if(a.matches(":-webkit-autofill"))return!0}catch(r){}return!p.focused||o.end<t.length&&n.end===e.length},p.onChange=function(e){var n=h(h(p)).beforePasteState,t=h(h(p)).previousSelection,o=p.props.beforeMaskedValueChange,a=p.getInputValue(),r=p.value,s=p.getSelection();p.isInputAutofilled(a,s,r,t)&&(r=O(p.maskOptions,""),t={start:0,end:0,length:0}),n&&(t=n.selection,r=n.value,s={start:t.start+a.length,end:t.start+a.length,length:0},a=r.slice(0,t.start)+a+r.slice(t.end),p.beforePasteState=null);var i=b(p.maskOptions,a,s,r,t),l=i.enteredString,u=i.selection,c=i.value;if(y(o)){var f=o({value:c,selection:u},{value:r,selection:t},l,p.getBeforeMaskedValueChangeConfig());c=f.value,u=f.selection}p.setInputValue(c),y(p.props.onChange)&&p.props.onChange(e),p.isWindowsPhoneBrowser?p.setSelection(u.start,u.end,{deferred:!0}):p.setSelection(u.start,u.end)},p.onFocus=function(e){var n=p.props.beforeMaskedValueChange,t=p.maskOptions,o=t.mask,a=t.prefix;if(p.focused=!0,p.mounted=!0,o){if(p.value)C(p.maskOptions,p.value)<p.maskOptions.mask.length&&p.setCursorToEnd();else{var r=O(p.maskOptions,a),s=O(p.maskOptions,r),i=C(p.maskOptions,s),l=I(p.maskOptions,i),u={start:l,end:l};if(y(n)){var c=n({value:s,selection:u},{value:p.value,selection:null},null,p.getBeforeMaskedValueChangeConfig());s=c.value,u=c.selection}var f=s!==p.getInputValue();f&&p.setInputValue(s),f&&y(p.props.onChange)&&p.props.onChange(e),p.setSelection(u.start,u.end)}p.runSaveSelectionLoop()}y(p.props.onFocus)&&p.props.onFocus(e)},p.onBlur=function(e){var n=p.props.beforeMaskedValueChange,t=p.maskOptions.mask;if(p.stopSaveSelectionLoop(),p.focused=!1,t&&!p.props.alwaysShowMask&&w(p.maskOptions,p.value)){var o="";if(y(n))o=n({value:o,selection:null},{value:p.value,selection:p.previousSelection},null,p.getBeforeMaskedValueChangeConfig()).value;var a=o!==p.getInputValue();a&&p.setInputValue(o),a&&y(p.props.onChange)&&p.props.onChange(e)}y(p.props.onBlur)&&p.props.onBlur(e)},p.onMouseDown=function(e){if(!p.focused&&document.addEventListener){p.mouseDownX=e.clientX,p.mouseDownY=e.clientY,p.mouseDownTime=(new Date).getTime();var r=function r(e){if(document.removeEventListener("mouseup",r),p.focused){var n=Math.abs(e.clientX-p.mouseDownX),t=Math.abs(e.clientY-p.mouseDownY),o=Math.max(n,t),a=(new Date).getTime()-p.mouseDownTime;(o<=10&&a<=200||o<=5&&a<=300)&&p.setCursorToEnd()}};document.addEventListener("mouseup",r)}y(p.props.onMouseDown)&&p.props.onMouseDown(e)},p.onPaste=function(e){y(p.props.onPaste)&&p.props.onPaste(e),e.defaultPrevented||(p.beforePasteState={value:p.getInputValue(),selection:p.getSelection()},p.setInputValue(""))},p.handleRef=function(e){null==p.props.children&&y(p.props.inputRef)&&p.props.inputRef(e)};var n=e.mask,t=e.maskChar,o=e.formatChars,a=e.alwaysShowMask,r=e.beforeMaskedValueChange,s=e.defaultValue,i=e.value;p.maskOptions=k(n,t,o),null==s&&(s=""),null==i&&(i=s);var l=D(i);if(p.maskOptions.mask&&(a||l)&&(l=O(p.maskOptions,l),y(r))){var u=e.value;null==e.value&&(u=s),l=r({value:l,selection:null},{value:u=D(u),selection:null},null,p.getBeforeMaskedValueChangeConfig()).value}return p.value=l,p}t(e,c);var n=e.prototype;return n.componentDidMount=function(){this.mounted=!0,this.getInputDOMNode()&&(this.isWindowsPhoneBrowser=function o(){var e=new RegExp("windows","i"),n=new RegExp("phone","i"),t=navigator.userAgent;return e.test(t)&&n.test(t)}(),this.maskOptions.mask&&this.getInputValue()!==this.value&&this.setInputValue(this.value))},n.componentDidUpdate=function(){var e=this.previousSelection,n=this.props,t=n.beforeMaskedValueChange,o=n.alwaysShowMask,a=n.mask,r=n.maskChar,s=n.formatChars,i=this.maskOptions,l=o||this.isFocused(),u=null!=this.props.value,c=u?D(this.props.value):this.value,f=e?e.start:null;if(this.maskOptions=k(a,r,s),this.maskOptions.mask){!i.mask&&this.isFocused()&&this.runSaveSelectionLoop();var p=this.maskOptions.mask&&this.maskOptions.mask!==i.mask;if(i.mask||u||(c=this.getInputValue()),(p||this.maskOptions.mask&&(c||l))&&(c=O(this.maskOptions,c)),p){var h=C(this.maskOptions,c);(null===f||h<f)&&(f=S(this.maskOptions,c)?h:I(this.maskOptions,h))}!this.maskOptions.mask||!w(this.maskOptions,c)||l||u&&this.props.value||(c="");var d={start:f,end:f};if(y(t)){var m=t({value:c,selection:d},{value:this.value,selection:this.previousSelection},null,this.getBeforeMaskedValueChangeConfig());c=m.value,d=m.selection}this.value=c;var v=this.getInputValue()!==this.value;v?(this.setInputValue(this.value),this.forceUpdate()):p&&this.forceUpdate();var g=!1;null!=d.start&&null!=d.end&&(g=!e||e.start!==d.start||e.end!==d.end),(g||v)&&this.setSelection(d.start,d.end)}else i.mask&&(this.stopSaveSelectionLoop(),this.forceUpdate())},n.componentWillUnmount=function(){this.mounted=!1,null!==this.selectionDeferId&&E(this.selectionDeferId),this.stopSaveSelectionLoop()},n.render=function(){var n,e=this.props,t=(e.mask,e.alwaysShowMask,e.maskChar,e.formatChars,e.inputRef,e.beforeMaskedValueChange,e.children),o=function i(e,n){if(null==e)return{};var t,o,a={},r=Object.keys(e);for(o=0;o<r.length;o++)t=r[o],0<=n.indexOf(t)||(a[t]=e[t]);return a}(e,["mask","alwaysShowMask","maskChar","formatChars","inputRef","beforeMaskedValueChange","children"]);if(t){y(t)||p(!1);var a=["onChange","onPaste","onMouseDown","onFocus","onBlur","value","disabled","readOnly"],r=u({},o);a.forEach(function(e){return delete r[e]}),n=t(r),a.filter(function(e){return null!=n.props[e]&&n.props[e]!==o[e]}).length&&p(!1)}else n=l.createElement("input",u({ref:this.handleRef},o));var s={onFocus:this.onFocus,onBlur:this.onBlur};return this.maskOptions.mask&&(o.disabled||o.readOnly||(s.onChange=this.onChange,s.onPaste=this.onPaste,s.onMouseDown=this.onMouseDown),null!=o.value&&(s.value=this.value)),n=l.cloneElement(n,s)},e}(l.Component)});