@gsretail.com/gui-core
Version:
A skeleton to create your own React component library using Rollup, TypeScript, Sass and Storybook
2 lines (1 loc) • 1.72 kB
JavaScript
import e from"../../../../@babel/runtime/helpers/esm/extends.js";import*as t from"react";import{useRifm as r}from"../../../../rifm/dist/rifm.esm.js";import{useUtils as l}from"./useUtils.js";import{getMaskFromCurrentFormat as s,checkMaskIsValidForCurrentFormat as n,maskedDateFormatter as a,getDisplayDate as u}from"../utils/text-field-helper.js";const o=({acceptRegex:o=/[\d]/gi,disabled:i,disableMaskedInput:d,ignoreInvalidInputs:c,inputFormat:m,inputProps:p,label:f,mask:h,onChange:b,rawValue:g,readOnly:k,rifmFormatter:x,TextFieldProps:M,validationError:U})=>{const v=l(),I=v.getFormatHelperText(m),{shouldUseMaskedInput:T,maskToUse:j}=t.useMemo((()=>{if(d)return{shouldUseMaskedInput:!1,maskToUse:""};const e=s(h,m,o,v);return{shouldUseMaskedInput:n(e,m,o,v),maskToUse:e}}),[o,d,m,h,v]),F=t.useMemo((()=>T&&j?a(j,o):e=>e),[o,j,T]),R=null===g?null:v.date(g),[y,C]=t.useState(R),[E,P]=t.useState(u(v,g,m)),V=t.useRef(),O=t.useRef(v.locale),S=t.useRef(m);t.useEffect((()=>{const e=g!==V.current,t=v.locale!==O.current,r=m!==S.current;if(V.current=g,O.current=v.locale,S.current=m,!e&&!t&&!r)return;const l=null===g?null:v.date(g),s=null===g||v.isValid(l);let n=null===y&&null===l;if(null!==y&&null!==l){const e=v.isEqual(y,l);if(e)n=!0;else{const t=Math.abs(v.getDiff(y,l));n=0===t?e:t<1e3}}if(!t&&!r&&(!s||n))return;const a=u(v,g,m);C(l),P(a)}),[v,g,m,y]);const q=e=>{const t=""===e||e===h?"":e;P(t);const r=null===t?null:v.parse(t,m);c&&!v.isValid(r)||(C(r),b(r,t||void 0))},w=r({value:E,onChange:q,format:x||F});return e({label:f,disabled:i,error:U,inputProps:e({},T?w:{value:E,onChange:e=>{q(e.currentTarget.value)}},{disabled:i,placeholder:I,readOnly:k,type:T?"tel":"text"},p)},M)};export{o as useMaskedInput};