@gsretail.com/gui-core
Version:
A skeleton to create your own React component library using Rollup, TypeScript, Sass and Storybook
2 lines (1 loc) • 2.78 kB
JavaScript
import{__rest as e,__assign as a}from"tslib";import t from"react";import{IMaskInput as n}from"react-imask";import{NumericFormat as l}from"react-number-format";import{Box as r,TextField as o,InputAdornment as i}from"@mui/material";import{GuiIcon as m}from"@gsretail.com/gui-icons";import d from"./GuiInput.styled.js";var s=t.forwardRef((function(l,r){var o=l.onChange,i=e(l,["onChange"]);return t.createElement(n,a({inputRef:r,onAccept:function(e){return o({target:{name:l.name,value:e}})},overwrite:!0},i))})),c=t.forwardRef((function(n,r){var o=n.onChange,i=e(n,["onChange"]);return t.createElement(l,a({},i,{getInputRef:r,onValueChange:function(e){o({target:{name:n.name,value:e.value}})}}))})),u=d(t.forwardRef((function(n,l){var d=n.label,u=n.labelWidth,p=n.labelTextAlign,f=n.required,g=n.width,h=n.size,v=n.placeholder,b=n.disabled,w=n.readOnly,x=n.bold,S=n.textAlign,N=n.maxLength,I=n.startUnit,E=n.endUnit,A=n.startIcon,C=n.endIcon,y=n.startIconName,O=n.endIconName,W=n.autoFocus,D=n.onChange,L=n.isNumber,P=n.maskOptions,R=n.thousandSeparator,z=n.decimalSeparator,U=n.allowedDecimalSeparators,j=n.decimalScale,k=n.fixedDecimalScale,q=n.allowNegative,F=n.allowLeadingZeros,G=n.className,Z=n.boxProps,T=n.readOnlyWhite,B=e(n,["label","labelWidth","labelTextAlign","required","width","size","placeholder","disabled","readOnly","bold","textAlign","maxLength","startUnit","endUnit","startIcon","endIcon","startIconName","endIconName","autoFocus","onChange","isNumber","maskOptions","thousandSeparator","decimalSeparator","allowedDecimalSeparators","decimalScale","fixedDecimalScale","allowNegative","allowLeadingZeros","className","boxProps","readOnlyWhite"]),M=L?{thousandSeparator:R,decimalSeparator:z,allowedDecimalSeparators:U,decimalScale:j,fixedDecimalScale:k,allowNegative:q,allowLeadingZeros:F,valueIsNumericString:!!L}:{};return t.createElement(r,a({className:["gui-form gui-input",x&&"isBold",G&&G].join(" "),width:g},Z),d&&t.createElement(r,{minWidth:u},t.createElement("label",{className:["gui-label",p&&"textAlign-"+p,f&&"Mui-required"].join(" ")},d)),t.createElement(r,{flexGrow:1},t.createElement(o,a({value:B.value,variant:B.variant,placeholder:v,size:h,fullWidth:!0,disabled:b,inputRef:l,InputProps:{autoFocus:!!W,inputComponent:P?s:L?c:void 0,inputProps:a(a(a({},P),M),{autoComplete:"off",style:{textAlign:S},maxLength:N}),className:w&&!T?"Gui-readonly":void 0,readOnly:w,startAdornment:I||A||y?t.createElement(i,{position:"start"},I&&I,A&&A,y&&t.createElement(m,{name:y})):void 0,endAdornment:E||C||O?t.createElement(i,{position:"end"},E&&E,C&&C,O&&t.createElement(m,{name:O})):void 0},inputProps:{},onChange:D},B))))})));u.defaultProps={variant:"outlined",labelWidth:"auto",width:"100%",size:"small",textAlign:"left"};export{u as GuiInput,u as default};