@nexusui/components/core/ShareDialog/ShareDialog.component.js

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.

import{jsx as e,jsxs as i}from"react/jsx-runtime";import*as o from"react";import{useState as t,useCallback as r}from"react";import{useTheme as a}from"@mui/material/styles";import n from"@mui/material/useMediaQuery";import l from"@mui/material/Typography";import s from"@mui/material/Stack";import m from"@mui/icons-material/Link";import d from"@mui/material/IconButton";import c from"@mui/material/CircularProgress";import p from"@mui/material/Slide";import h from"@mui/icons-material/Close";import g from"@mui/icons-material/Check";import u from"@mui/material/Box";import f from"@mui/material/Tooltip";import C from"@mui/icons-material/PeopleAlt";import{AccessManager as b}from"./components/AccessManagement/AccessManager.js";import{Dialog as x}from"../Dialog/Dialog.container.js";import y from"./locale.json.js";import{EmailInvite as v}from"./components/EmailInvite/EmailInvite.js";import{useTranslate as k}from"../locales/index.js";import{OrgShare as $}from"./components/OrgShare/OrgShare.js";const j="NexusShareDialog",w=o.forwardRef(((i,o)=>e(p,{direction:"up",ref:o,...i}))),S=o=>{const{inviteConfig:p,orgShareConfig:S,users:I,onUserPermissionChange:M,onUserResend:T,onUserRemoved:D,shareURL:L,loading:P,editable:U,loadingMessage:A,title:R,sx:B,...O}=o,[E,K]=t(!1),N=k(y),W=a(),H=n(W.breakpoints.down("sm")),Q=r((()=>{L&&(navigator.clipboard.writeText(L),K(!0),setTimeout((()=>{K(!1)}),2e3))}),[L]);return e(x,{"data-testid":`${j}-root`,fullScreen:H,TransitionComponent:w,TransitionProps:{timeout:H?250:0},"aria-labelledby":`${j}-title`,"aria-describedby":`${j}-description`,sx:{"& .MuiPaper-root":{width:"100%",maxWidth:684,maxHeight:{xs:"100%",sm:"80%"}},"& .MuiDialogContent-root":{py:4,px:4},...B},title:i(s,{direction:"row",justifyContent:"space-between",alignItems:"center",children:[i(u,{children:[H&&e(f,{title:N("Close"),children:e(d,{"aria-label":N("Close"),onClick:e=>O.onClose&&O.onClose(e,"escapeKeyDown"),color:"inherit","data-testid":`${j}-closeButton`,sx:{mr:2,ml:-3},children:e(h,{})})}),e(l,{id:`${j}-title`,variant:"h6",component:"h2",children:R||N("Invite")})]}),H&&L&&e(f,{"data-testid":`${j}-linkTooltip`,title:N(E?"Link copied":"Copy Link"),children:e(d,{"aria-label":N("Copy Link"),onClick:Q,color:"inherit","data-testid":`${j}-linkIcon`,sx:{mr:-2},children:e(m,{})})})]}),leftActions:[...H?[]:[...L?[{children:N(E?"Link copied":"Copy Link"),variant:"text","data-testid":`${j}-linkButton`,startIcon:e(E?g:m,{}),onClick:Q}]:[]]],rightActions:[...H?[]:[{children:N("Close"),variant:"outlined","data-testid":`${j}-closeButton`,onClick:e=>O.onClose&&O.onClose(e,"escapeKeyDown")}]],DialogActionsProps:{sx:{borderTop:e=>`1px solid ${e.vars.palette.divider}`}},...O,children:i(u,{id:`${j}-description`,role:"region","aria-label":"Share dialog content",children:[e(v,{...p}),S?.visible&&S?.selectedOrg&&e($,{isMobile:H,orgShareConfig:S}),(!S?.visible||!S?.selectedOrg)&&i(u,{sx:{display:"flex",justifyContent:"flex-start",alignItems:"center",p:2,ml:2,pb:0,mt:2},role:"heading","aria-level":2,children:[e(C,{"aria-hidden":"true"}),e(l,{variant:"body2",fontWeight:700,sx:{ml:6},children:I&&I.length>0?N("Shared with these people"):N("Not shared with anyone")})]}),e(b,{sx:{mt:4},isMobile:H,editable:U,onUserPermissionChange:M,onUserRemoved:D,onUserResend:T,users:I,isMeOwner:!S?.disabled}),P&&i(s,{"data-testid":`${j}-loading`,sx:{position:"absolute",top:0,left:0,right:0,bottom:0,bgcolor:e=>`rgba(${e.vars.palette.background.paperChannel} / 0.75)`},alignItems:"center",justifyContent:"center",role:"alert","aria-busy":"true",children:[e(c,{"aria-label":"loading"}),A&&e(l,{variant:"h6",color:"primary",sx:{mt:2},children:A})]})]})})};export{S as ShareDialogComponent};