@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) • 4.81 kB
JavaScript
import{jsx as t,jsxs as r}from"react/jsx-runtime";import{useMemo as o}from"react";import i from"@mui/material/Box";import a from"@mui/material/IconButton";import e from"@mui/icons-material/Close";import n from"@mui/material/Typography";import l from"@mui/material/Popover";import c from"@mui/material/Stack";import s from"clsx";import{useTranslate as m}from"../locales/index.js";import p from"./locale.json.js";import{rootStyles as h}from"./ToggleTip.styles.js";import{ImageCarousel as g}from"../ImageCarousel/ImageCarousel.container.js";import{StatusBadge as d}from"../StatusBadge/StatusBadge.container.js";import{ActionsBar as f}from"../common/ActionsBar/ActionsBar.container.js";const u="NexusToggleTip",v=v=>{const{open:$,width:z,images:O,headline:b,sx:y,statusBadge:x,content:C,pagination:I,placement:A="bottom",actions:N,closeButton:W,onClose:j,showArrow:w=!0,...B}=v,H=m(p),T=o((()=>({"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"}}}[A]||{anchorOrigin:{vertical:"bottom",horizontal:"center"},transformOrigin:{vertical:"top",horizontal:"center"}})),[A]),k=o((()=>W?t(a,{"aria-label":H("Close"),onClick:t=>j?.(t,"backdropClick"),"data-testid":`${u}-CloseIcon`,className:s(`${u}-closeIcon`,`${u}-CloseIcon`),color:"inherit",sx:{position:"absolute",zIndex:2,right:8,top:8,color:"text.secondary"},children:!0===W?t(e,{}):W}):null),[H,W,j]),P=o((()=>{if(!O)return null;let r=null;if(Array.isArray(O)&&O.length>1){const o=O.filter((t=>"string"==typeof t&&t.length>0)).map((t=>({src:t,alt:t})));r=t(g,{images:o,nextButtonLabel:" ",previousButtonLabel:" "})}else if("string"==typeof O||(Array.isArray(O),1===O.length)){const o=Array.isArray(O)?O[0]:O;r=t(i,{component:"img","data-testid":`${u}-Image`,className:s(`${u}-image`,`${u}-Image`),src:o})}return r?t(c,{alignItems:"center",justifyContent:"center","data-testid":`${u}-ImageWrapper`,className:s(`${u}-imageWrapper`,`${u}-ImageWrapper`),sx:{maxHeight:242,minHeight:100,overflow:"hidden"},children:r}):void 0}),[O]),S=o((()=>{if(!b)return null;const o=x||void 0;return r(c,{direction:"row",spacing:2,"data-testid":`${u}-HeaderWrapper`,className:s(`${u}-headerWrapper`,`${u}-HeaderWrapper`),children:[o?t(d,{...o}):"",t(n,{variant:"body2","data-testid":`${u}-Header`,className:s(`${u}-header`,`${u}-Header`),sx:{fontWeight:"bold"},children:b})]})}),[b,x]),L=o((()=>C?t(n,{variant:"body2","data-testid":`${u}-Content`,className:s(`${u}-content`,`${u}-Content`),children:C}):null),[C]),M=o((()=>{const{total:r,current:o}=I||{};return I&&r&&o?t(n,{variant:"caption",color:"text.secondary","data-testid":`${u}-Pagination`,className:s(`${u}-pagination`,`${u}-Pagination`),children:H("CurrentInTotal",{0:o,1:r})}):null}),[I,H]),q=o((()=>M||N?r(c,{direction:"row",spacing:4,alignItems:"center",justifyContent:"space-between","data-testid":`${u}-ActionsWrapper`,className:s(`${u}-actionsWrapper`,`${u}-ActionsWrapper`),sx:{pt:3},children:[M,t(f,{actions:N})]}):null),[M,N]),D=o((()=>r(c,{direction:"column",spacing:3,"data-testid":`${u}-ContentWrapper`,className:s(`${u}-contentWrapper`,`${u}-ContentWrapper`),sx:{p:4},children:[S,L,q]})),[S,L,q]),E=o((()=>t(i,{className:`${u}-arrow ${u}-arrow-${A}`})),[A]);return r(l,{"data-testid":`${u}-root`,className:`${u}-root ${u}-${A}`,sx:[h,{"& .MuiPopover-paper":[{width:z}]},...Array.isArray(y)?y:[y]],open:$,onClose:j,...T,...B,"data-popover-placement":A,children:[w?E:null,r(i,{className:s(`${u}-root`,`${u}-container`),children:[k,P,D]})]})};export{v as ToggleTipComponent};