@nexusui/components
Version:
These are custom components specially-developed for NexusUI applications. They will make your life easier by giving you out-of-the-box implementations for various high-level UI elements that you can drop directly into your application.
2 lines (1 loc) • 5.26 kB
JavaScript
;Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),e=require("react"),r=require("@mui/material/Box"),a=require("@mui/material/IconButton"),o=require("@mui/icons-material/Close"),i=require("@mui/material/Typography"),n=require("@mui/material/Popover"),l=require("@mui/material/Stack"),s=require("clsx"),c=require("../locales/index.js"),u=require("./locale.json.js"),d=require("./ToggleTip.styles.js"),m=require("../ImageCarousel/ImageCarousel.container.js"),g=require("../StatusBadge/StatusBadge.container.js"),h=require("../common/ActionsBar/ActionsBar.container.js");function p(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var f=p(r),v=p(a),$=p(o),x=p(i),j=p(n),z=p(l),O=p(s);const b="NexusToggleTip";exports.ToggleTipComponent=r=>{const{open:a,width:o,images:i,headline:n,sx:l,statusBadge:s,content:p,pagination:y,placement:C="bottom",actions:q,closeButton:I,onClose:A,showArrow:N=!0,...W}=r,B=c.useTranslate(u.default),M=e.useMemo((()=>({"top-start":{anchorOrigin:{vertical:"top",horizontal:"left"},transformOrigin:{vertical:"bottom",horizontal:"left"}},top:{anchorOrigin:{vertical:"top",horizontal:"center"},transformOrigin:{vertical:"bottom",horizontal:"center"}},"top-end":{anchorOrigin:{vertical:"top",horizontal:"right"},transformOrigin:{vertical:"bottom",horizontal:"right"}},"left-start":{anchorOrigin:{vertical:"top",horizontal:"left"},transformOrigin:{vertical:"top",horizontal:"right"}},left:{anchorOrigin:{vertical:"center",horizontal:"left"},transformOrigin:{vertical:"center",horizontal:"right"}},"left-end":{anchorOrigin:{vertical:"bottom",horizontal:"left"},transformOrigin:{vertical:"bottom",horizontal:"right"}},"right-start":{anchorOrigin:{vertical:"top",horizontal:"right"},transformOrigin:{vertical:"top",horizontal:"left"}},right:{anchorOrigin:{vertical:"center",horizontal:"right"},transformOrigin:{vertical:"center",horizontal:"left"}},"right-end":{anchorOrigin:{vertical:"bottom",horizontal:"right"},transformOrigin:{vertical:"bottom",horizontal:"left"}},"bottom-start":{anchorOrigin:{vertical:"bottom",horizontal:"left"},transformOrigin:{vertical:"top",horizontal:"left"}},bottom:{anchorOrigin:{vertical:"bottom",horizontal:"center"},transformOrigin:{vertical:"top",horizontal:"center"}},"bottom-end":{anchorOrigin:{vertical:"bottom",horizontal:"right"},transformOrigin:{vertical:"top",horizontal:"right"}}}[C]||{anchorOrigin:{vertical:"bottom",horizontal:"center"},transformOrigin:{vertical:"top",horizontal:"center"}})),[C]),w=e.useMemo((()=>I?t.jsx(v.default,{"aria-label":B("Close"),onClick:t=>A?.(t,"backdropClick"),"data-testid":`${b}-CloseIcon`,className:O.default(`${b}-closeIcon`,`${b}-CloseIcon`),color:"inherit",sx:{position:"absolute",zIndex:2,right:8,top:8,color:"text.secondary"},children:!0===I?t.jsx($.default,{}):I}):null),[B,I,A]),T=e.useMemo((()=>{if(!i)return null;let e=null;if(Array.isArray(i)&&i.length>1){const r=i.filter((t=>"string"==typeof t&&t.length>0)).map((t=>({src:t,alt:t})));e=t.jsx(m.ImageCarousel,{images:r,nextButtonLabel:" ",previousButtonLabel:" "})}else if("string"==typeof i||(Array.isArray(i),1===i.length)){const r=Array.isArray(i)?i[0]:i;e=t.jsx(f.default,{component:"img","data-testid":`${b}-Image`,className:O.default(`${b}-image`,`${b}-Image`),src:r})}return e?t.jsx(z.default,{alignItems:"center",justifyContent:"center","data-testid":`${b}-ImageWrapper`,className:O.default(`${b}-imageWrapper`,`${b}-ImageWrapper`),sx:{maxHeight:242,minHeight:100,overflow:"hidden"},children:e}):void 0}),[i]),H=e.useMemo((()=>{if(!n)return null;const e=s||void 0;return t.jsxs(z.default,{direction:"row",spacing:2,"data-testid":`${b}-HeaderWrapper`,className:O.default(`${b}-headerWrapper`,`${b}-HeaderWrapper`),children:[e?t.jsx(g.StatusBadge,{...e}):"",t.jsx(x.default,{variant:"body2","data-testid":`${b}-Header`,className:O.default(`${b}-header`,`${b}-Header`),sx:{fontWeight:"bold"},children:n})]})}),[n,s]),P=e.useMemo((()=>p?t.jsx(x.default,{variant:"body2","data-testid":`${b}-Content`,className:O.default(`${b}-content`,`${b}-Content`),children:p}):null),[p]),S=e.useMemo((()=>{const{total:e,current:r}=y||{};return y&&e&&r?t.jsx(x.default,{variant:"caption",color:"text.secondary","data-testid":`${b}-Pagination`,className:O.default(`${b}-pagination`,`${b}-Pagination`),children:B("CurrentInTotal",{0:r,1:e})}):null}),[y,B]),k=e.useMemo((()=>S||q?t.jsxs(z.default,{direction:"row",spacing:4,alignItems:"center",justifyContent:"space-between","data-testid":`${b}-ActionsWrapper`,className:O.default(`${b}-actionsWrapper`,`${b}-ActionsWrapper`),sx:{pt:3},children:[S,t.jsx(h.ActionsBar,{actions:q})]}):null),[S,q]),L=e.useMemo((()=>t.jsxs(z.default,{direction:"column",spacing:3,"data-testid":`${b}-ContentWrapper`,className:O.default(`${b}-contentWrapper`,`${b}-ContentWrapper`),sx:{p:4},children:[H,P,k]})),[H,P,k]),_=e.useMemo((()=>t.jsx(f.default,{className:`${b}-arrow ${b}-arrow-${C}`})),[C]);return t.jsxs(j.default,{"data-testid":`${b}-root`,className:`${b}-root ${b}-${C}`,sx:[d.rootStyles,{"& .MuiPopover-paper":[{width:o}]},...Array.isArray(l)?l:[l]],open:a,onClose:A,...M,...W,"data-popover-placement":C,children:[N?_:null,t.jsxs(f.default,{className:O.default(`${b}-root`,`${b}-container`),children:[w,T,L]})]})};