@gsretail.com/gui-core
Version:
A skeleton to create your own React component library using Rollup, TypeScript, Sass and Storybook
2 lines (1 loc) • 3.82 kB
JavaScript
import e from"react";import t from"../../prop-types/index.js";import"../../imask/esm/controls/input.js";import s from"../../imask/esm/core/holder.js";import"../../imask/esm/masked/factory.js";import"../../imask/esm/controls/mask-element.js";import"../../imask/esm/controls/html-input-mask-element.js";import"../../imask/esm/controls/html-mask-element.js";import"../../imask/esm/controls/html-contenteditable-mask-element.js";const a={mask:t.oneOfType([t.array,t.func,t.string,t.instanceOf(RegExp),t.oneOf([Date,Number,s.Masked]),t.instanceOf(s.Masked)]),value:t.any,unmask:t.oneOfType([t.bool,t.oneOf(["typed"])]),prepare:t.func,prepareChar:t.func,validate:t.func,commit:t.func,overwrite:t.oneOfType([t.bool,t.oneOf(["shift"])]),eager:t.oneOfType([t.bool,t.oneOf(["append","remove"])]),skipInvalid:t.bool,onAccept:t.func,onComplete:t.func,placeholderChar:t.string,displayChar:t.string,lazy:t.bool,definitions:t.object,blocks:t.object,enum:t.arrayOf(t.string),maxLength:t.number,from:t.number,to:t.number,pattern:t.string,format:t.func,parse:t.func,autofix:t.oneOfType([t.bool,t.oneOf(["pad"])]),radix:t.string,thousandsSeparator:t.string,mapToRadix:t.arrayOf(t.string),scale:t.number,normalizeZeros:t.bool,padFractionalZeros:t.bool,min:t.oneOfType([t.number,t.instanceOf(Date)]),max:t.oneOfType([t.number,t.instanceOf(Date)]),dispatch:t.func,inputRef:t.oneOfType([t.func,t.shape({current:t.object})])},n=Object.keys(a).filter((e=>"value"!==e)),o=["value","unmask","onAccept","onComplete","inputRef"],i=n.filter((e=>o.indexOf(e)<0));function p(t){const o=class extends e.Component{static displayName;static propTypes;constructor(e){super(e),this._inputRef=this._inputRef.bind(this)}componentDidMount(){this.props.mask&&this.initMask()}componentDidUpdate(){const e=this.props,t=this._extractMaskOptionsFromProps(e);t.mask?this.maskRef?(this.maskRef.updateOptions(t),"value"in e&&void 0!==e.value&&(this.maskValue=e.value)):this.initMask(t):(this.destroyMask(),"value"in e&&void 0!==e.value&&(this.element?.isContentEditable&&"INPUT"!==this.element.tagName&&"TEXTAREA"!==this.element.tagName?this.element.textContent=e.value:this.element.value=e.value))}componentWillUnmount(){this.destroyMask()}_inputRef(e){this.element=e,this.props.inputRef&&(Object.prototype.hasOwnProperty.call(this.props.inputRef,"current")?this.props.inputRef.current=e:this.props.inputRef(e))}initMask(e){void 0===e&&(e=this._extractMaskOptionsFromProps(this.props)),this.maskRef=s(this.element,e).on("accept",this._onAccept.bind(this)).on("complete",this._onComplete.bind(this)),"value"in this.props&&void 0!==this.props.value&&(this.maskValue=this.props.value)}destroyMask(){this.maskRef&&(this.maskRef.destroy(),delete this.maskRef)}_extractMaskOptionsFromProps(e){const{...t}=e;return Object.keys(t).filter((e=>i.indexOf(e)<0)).forEach((e=>{delete t[e]})),t}_extractNonMaskProps(e){const{...t}=e;return n.forEach((e=>{"maxLength"!==e&&delete t[e]})),"defaultValue"in t||(t.defaultValue=e.mask?"":t.value),delete t.value,t}get maskValue(){return this.maskRef?"typed"===this.props.unmask?this.maskRef.typedValue:this.props.unmask?this.maskRef.unmaskedValue:this.maskRef.value:""}set maskValue(e){this.maskRef&&(e=null==e&&"typed"!==this.props.unmask?"":e,"typed"===this.props.unmask?this.maskRef.typedValue=e:this.props.unmask?this.maskRef.unmaskedValue=e:this.maskRef.value=e)}_onAccept(e){this.props.onAccept&&this.maskRef&&this.props.onAccept(this.maskValue,this.maskRef,e)}_onComplete(e){this.props.onComplete&&this.maskRef&&this.props.onComplete(this.maskValue,this.maskRef,e)}render(){return e.createElement(t,{...this._extractNonMaskProps(this.props),inputRef:this._inputRef})}},p=t.displayName||t.name||"Component";return o.displayName=`IMask(${p})`,o.propTypes=a,e.forwardRef(((t,s)=>e.createElement(o,{...t,ref:s})))}export{p as default};