@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.48 kB
JavaScript
import{__rest as e,__spreadArray as l,__assign as t}from"tslib";import i from"react";import{Box as a,FormControl as n,Autocomplete as o,TextField as r,CircularProgress as s}from"@mui/material";import{GuiIcon as u}from"@gsretail.com/gui-icons";import d from"./GuiAutoComplete.styled.js";var m=d((function(d){var m=d.label,c=d.labelWidth,p=d.labelTextAlign,b=d.required,f=d.width,g=d.size,h=d.placeholder,O=d.readOnly,E=d.disabled,C=d.limitTags,x=d.disableCloseOnSelect,S=d.filterSelectedOptions,v=d.multiple,y=d.optionHeight,T=d.arrOption,w=d.getOptionLabel,A=d.value,P=d.onChange;d.children;var z=d.className,N=d.boxProps,I=d.disableClearable,W=e(d,["label","labelWidth","labelTextAlign","required","width","size","placeholder","readOnly","disabled","limitTags","disableCloseOnSelect","filterSelectedOptions","multiple","optionHeight","arrOption","getOptionLabel","value","onChange","children","className","boxProps","disableClearable"]),q=m?c:"0",H=i.useState(!1),L=H[0],j=H[1],G=i.useState([]),F=G[0],M=G[1],V=L&&0===F.length;return i.useEffect((function(){var e=!0;if(V)return e&&M(l([],T,!0)),function(){e=!1}}),[V]),i.useEffect((function(){L||M([])}),[L]),i.createElement(a,t({className:["gui-form gui-autoComplete",z&&z].join(" "),width:f},N),m&&i.createElement(a,{minWidth:c},i.createElement("label",{className:["gui-label",p&&"textAlign-"+p,b&&"Mui-required"].join(" ")},m)),i.createElement(a,{flexGrow:1,style:{maxWidth:"calc("+f+" - "+q+")"}},i.createElement(n,{variant:"outlined",style:{width:"100%"}},i.createElement(o,t({open:L,onOpen:function(){j(!0)},onClose:function(){j(!1)},isOptionEqualToValue:function(e,l){return e.label===l.label},options:T,getOptionLabel:w||function(e){return e.label||""},value:A,onChange:P,multiple:v,limitTags:C&&C,openOnFocus:!0,disableCloseOnSelect:!!v&&x,filterSelectedOptions:S,loading:V,renderInput:function(e){return i.createElement(r,t({},e,{InputProps:t(t({},e.InputProps),{endAdornment:i.createElement(i.Fragment,null,V?i.createElement(s,{color:"inherit",size:20}):null,e.InputProps.endAdornment)}),placeholder:h,size:g,disabled:E}))},ListboxProps:{style:{maxHeight:y}},popupIcon:i.createElement(u,{name:"ExpandMore"}),size:g,disabled:E,className:O?"Gui-readonly":"",disableClearable:I},W)),O?i.createElement(a,{className:"readonly-wrap"}):null)))}));m.defaultProps={labelWidth:"auto",labelTextAlign:"left",width:"100%",size:"small",limitTags:-1,optionHeight:"auto",disableCloseOnSelect:!0,multiple:!0};export{m as default};