openstack-uicore-foundation/lib/components/mui/formik-inputs/select-group.js

ui reactjs components for openstack marketing site

!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("openstack-uicore-foundation",[],t):"object"==typeof exports?exports["openstack-uicore-foundation"]=t():e["openstack-uicore-foundation"]=t()}(this,(()=>(()=>{"use strict";var e={1858:e=>{e.exports=require("@mui/icons-material/ExpandMore")},8619:e=>{e.exports=require("@mui/material")},3294:e=>{e.exports=require("formik")},9825:e=>{e.exports=require("prop-types")},2015:e=>{e.exports=require("react")}},t={};function r(l){var n=t[l];if(void 0!==n)return n.exports;var o=t[l]={exports:{}};return e[l](o,o.exports,r),o.exports}(()=>{r.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return r.d(t,{a:t}),t}})(),(()=>{r.d=(e,t)=>{for(var l in t)r.o(t,l)&&!r.o(e,l)&&Object.defineProperty(e,l,{enumerable:!0,get:t[l]})}})(),(()=>{r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t)})(),(()=>{r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}})();var l={};r.r(l),r.d(l,{default:()=>d});var n=r(2015),o=r.n(n),a=r(8619),i=r(1858),s=r.n(i),u=r(9825),c=r.n(u),p=r(3294);const m=({name:e,queryFunction:t,queryParams:r=[],placeholder:l="Select options",showSelectAll:i=!1,selectAllLabel:u="Select All",getOptionLabel:c=e=>e.name,getOptionValue:m=e=>e.id,noOptionsLabel:d="No items",getGroupId:f=null,getGroupLabel:g=null,disabled:y=!1})=>{const[x,b,h]=(0,p.useField)(e),[v,E]=(0,n.useState)([]),[S,A]=(0,n.useState)([]),[k,L]=(0,n.useState)(!1),I=Array.isArray(x.value)&&x.value.includes("all"),O=I?v:x.value||[],q=b.touched&&b.error;(0,n.useEffect)((()=>{(async()=>{L(!0);try{await t(...r,(e=>{if(E(e),f&&g){const t=new Map;e.forEach((e=>{const r=f(e),l=g(e);t.has(r)||t.set(r,{id:r,label:l,options:[]}),t.get(r).options.push(e)})),A(Array.from(t.values()))}else A([{id:"default",label:null,options:e}]);L(!1)}))}catch(e){L(!1)}})()}),[]);const P=e=>{const t=e.target.value;if(t.includes("selectAll")){const e=Array.isArray(O)?O.map(m):[];return void(I||e.length===v.length?h.setValue([]):h.setValue(["all"]))}const r=t.filter((e=>"selectAll"!==e)).map((e=>v.find((t=>m(t)===e)))).filter(Boolean);h.setValue(r)},C=I?v.map(m):Array.isArray(O)?O.map((e=>m(e))):[],M=(0,n.useMemo)((()=>(e=>()=>o().createElement(a.Box,{sx:{display:"flex",alignItems:"center",pr:1}},e&&o().createElement(a.CircularProgress,{size:16,sx:{mr:1}}),o().createElement(s(),null)))(k)),[k]);return o().createElement(o().Fragment,null,o().createElement(a.Select,{multiple:!0,fullWidth:!0,value:C,onChange:P,input:o().createElement(a.OutlinedInput,null),displayEmpty:!0,disabled:y||k,renderValue:e=>e&&0!==e.length?e.map((e=>{const t=v.find((t=>m(t)===e));return t?c(t):e})).join(", "):o().createElement("span",{style:{color:"#aaa"}},k?"Loading...":l),error:Boolean(q),IconComponent:M},(()=>k?o().createElement(a.MenuItem,{disabled:!0},o().createElement(a.CircularProgress,{size:20})):0===v.length?o().createElement(a.MenuItem,{disabled:!0},o().createElement(a.ListItemText,{primary:d,slotProps:{primary:{sx:{fontSize:"16px",color:"#00000061"}}}})):o().createElement(o().Fragment,null,i&&o().createElement(o().Fragment,null,o().createElement(a.MenuItem,{value:"selectAll",sx:{backgroundColor:"#fafafa","&:hover":{backgroundColor:"#f0f0f0"}},onClick:()=>{P({target:{value:["selectAll"]}})}},o().createElement(a.Checkbox,{checked:I,indeterminate:C.length>0&&!I,sx:{p:1,"& svg":{fontSize:24}}}),o().createElement(a.ListItemText,{primary:u,slotProps:{primary:{sx:{fontSize:"16px"}}}})),o().createElement(a.Divider,null)),(()=>S.map(((e,t)=>[e.label&&o().createElement(a.ListSubheader,{key:`header-${e.id}`,sx:{fontWeight:400,fontSize:"14px",color:"#00000061",lineHeight:"24px",textTransform:"uppercase",letterSpacing:"0.17px",pointerEvents:"none"}},e.label),...e.options.map((e=>{const t=m(e),r=C.includes(t);return o().createElement(a.MenuItem,{key:t,value:t,sx:{pl:2},onClick:()=>{let e;e=I?v.filter((e=>m(e)!==t)).map(m):r?C.filter((e=>e!==t)):[...C,t],P({target:{value:e}})}},o().createElement(a.Checkbox,{checked:r,sx:{p:1,"& svg":{fontSize:24}}}),o().createElement(a.ListItemText,{primary:c(e),slotProps:{primary:{sx:{fontSize:"16px",fontStyle:"normal",fontWeight:400,lineHeight:"150%",letterSpacing:"0.15px"}}}}))})),e.label&&t<S.length-1&&o().createElement(a.Divider,{key:`divider-${e.id}`})])).flat().filter(Boolean))()))()),q&&o().createElement("div",{style:{color:"#d32f2f",fontSize:"0.75rem",marginTop:"3px"}},q))};m.propTypes={name:c().string.isRequired,queryFunction:c().func.isRequired,queryParams:c().array,placeholder:c().string,showSelectAll:c().bool,selectAllLabel:c().string,getOptionLabel:c().func,getOptionValue:c().func,getGroupId:c().func,getGroupLabel:c().func,noOptionsLabel:c().string,disabled:c().bool};const d=m;return l})()));
//# sourceMappingURL=select-group.js.map