dinocollab-shared 1.2.33 → 1.2.35
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cart/styled.js +1 -1
- package/dist/cart/styled.js.map +1 -1
- package/dist/cart/widget.js +1 -1
- package/dist/cart/widget.js.map +1 -1
- package/dist/layout-global/app-header.styled.js +1 -1
- package/dist/layout-global/app-header.styled.js.map +1 -1
- package/dist/media-right/media-widget/index.js +1 -1
- package/dist/media-right/media-widget/index.js.map +1 -1
- package/dist/media-right/media-widget/styled.js +1 -1
- package/dist/media-right/media-widget/styled.js.map +1 -1
- package/dist/notification/notify-list.js +1 -1
- package/dist/notification/notify-list.js.map +1 -1
- package/dist/notification/styled.js +1 -1
- package/dist/notification/styled.js.map +1 -1
- package/dist/notification/widget.js +1 -1
- package/dist/notification/widget.js.map +1 -1
- package/dist/types/cart/styled.d.ts +1 -0
- package/dist/types/cart/styled.d.ts.map +1 -1
- package/dist/types/cart/widget.d.ts +2 -17
- package/dist/types/cart/widget.d.ts.map +1 -1
- package/dist/types/layout-global/app-header.styled.d.ts.map +1 -1
- package/dist/types/media-right/media-widget/index.d.ts.map +1 -1
- package/dist/types/media-right/media-widget/styled.d.ts +3 -1
- package/dist/types/media-right/media-widget/styled.d.ts.map +1 -1
- package/dist/types/notification/notify-list.d.ts +1 -0
- package/dist/types/notification/notify-list.d.ts.map +1 -1
- package/dist/types/notification/styled.d.ts.map +1 -1
- package/package.json +1 -1
package/dist/cart/styled.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{defineProperty as t}from"../_virtual/_rollupPluginBabelHelpers.js";import{styled as e,Menu as o,Box as r,alpha as i}from"@mui/material";var a=e(o)(function(t){var e=t.theme;return{"--color-bg":"dark"===e.palette.mode?"#323234":e.palette.background.paper,"--color-text":e.palette.text.primary,marginTop:"45px",".MuiPaper-root":{position:"relative",overflow:"visible",display:"flex",flexDirection:"column",backgroundColor:"var(--color-bg, #000000)",borderRadius:e.shape.borderRadius,minWidth:"280px",maxWidth:"550px",boxShadow:"0 1px 1px rgba(0, 0, 0, 0.05), 0 2px 2px rgba(0, 0, 0, 0.2), 0 4px 4px rgba(0, 0, 0, 0.15), 0 8px 8px rgba(0, 0, 0, 0.05)",animation:"fadeInDown 0.3s ease-out",marginTop:"8px",color:"var(--color-text, #000000)","@keyframes fadeInDown":{"0%":{opacity:0,transform:"translateY(-10px)"},"100%":{opacity:1,transform:"translateY(0)"}},"&::before":{content:'""',position:"absolute",backgroundColor:"var(--color-bg, #ffffff)",width:"10px",height:"10px",top:"-4px",right:e.spacing(1),transform:"translateX(-50%) rotate(45deg)",zIndex:0}},".MuiBackdrop-root":{backgroundColor:"transparent"},".MuiList-root":{padding:0,height:"100%"
|
|
1
|
+
import{defineProperty as t}from"../_virtual/_rollupPluginBabelHelpers.js";import{styled as e,Menu as o,Box as r,alpha as i}from"@mui/material";var a=e(o)(function(t){var e=t.theme;return{"--color-bg":"dark"===e.palette.mode?"#323234":e.palette.background.paper,"--color-text":e.palette.text.primary,marginTop:"45px",".MuiPaper-root":{position:"relative",overflow:"visible",display:"flex",flexDirection:"column",backgroundColor:"var(--color-bg, #000000)",borderRadius:e.shape.borderRadius,minWidth:"280px",maxWidth:"550px",boxShadow:"0 1px 1px rgba(0, 0, 0, 0.05), 0 2px 2px rgba(0, 0, 0, 0.2), 0 4px 4px rgba(0, 0, 0, 0.15), 0 8px 8px rgba(0, 0, 0, 0.05)",animation:"fadeInDown 0.3s ease-out",marginTop:"8px",color:"var(--color-text, #000000)","@keyframes fadeInDown":{"0%":{opacity:0,transform:"translateY(-10px)"},"100%":{opacity:1,transform:"translateY(0)"}},"&::before":{content:'""',position:"absolute",backgroundColor:"var(--color-bg, #ffffff)",width:"10px",height:"10px",top:"-4px",right:e.spacing(1),transform:"translateX(-50%) rotate(45deg)",zIndex:0}},".MuiBackdrop-root":{backgroundColor:"transparent"},".MuiList-root":{padding:0,height:"100%"}}}),n={root:"CartContent-root",header:"CartContent-header",footer:"CartContent-footer",content:"CartContent-content",items:"CartContent-items",item:"CartContent-item",itemContent:"CartContent-itemContent",itemImg:"CartContent-itemImg",itemTitle:"CartContent-itemTitle",itemPrice:"CartContent-itemPrice",itemTag:"CartContent-itemTag"},l=function(t,e){return"".concat((null==e?void 0:e.prefix)||"",".").concat(n[t]).concat((null==e?void 0:e.suffix)||"")},p=e(r)(function(e){var o,r=e.theme;return o={"--height-item":"80px","--color-bg":"dark"===r.palette.mode?"#323234":r.palette.background.paper,"--color-text":r.palette.text.primary},t(t(t(t(t(t(t(t(t(t(o,l("root",{prefix:"&"}),{flex:"1",display:"flex",flexDirection:"column",minHeight:0,maxHeight:"60vh","&.mobile":{height:"100%",maxHeight:"none"}}),l("header"),{padding:"12px 16px",display:"flex",justifyContent:"space-between",alignItems:"center",gap:r.spacing(5),position:"sticky",top:0,background:"var(--color-bg, #323234)",zIndex:2,boxShadow:"0px 0.5px 5px 0px rgba(0, 0, 0, 0.15)"}),l("footer"),{padding:"6px 12px",display:"flex",justifyContent:"flex-end",position:"sticky",bottom:0,background:"var(--color-bg, #323234)",zIndex:1,boxShadow:"0px 0.5px 5px 0px rgba(0, 0, 0, 0.15)"}),l("content"),{flex:1,display:"flex",flexDirection:"column",minHeight:0,overflowY:"auto"}),l("items"),{overflowY:"auto",minHeight:0,"&::-webkit-scrollbar":{width:"8px",height:"8px",background:"transparent"},"&::-webkit-scrollbar-thumb":{background:"#e0e0e0",borderRadius:"8px"},"&::-webkit-scrollbar-thumb:hover":{background:"#bdbdbd"},"&":{scrollbarWidth:"thin",scrollbarColor:"#e0e0e0 transparent"}}),l("item"),{display:"flex",alignItems:"center",padding:"8px 12px",transition:"0.3s",height:"var(--height-item)","& a":{textDecoration:"none"},"&:hover":{background:r.palette.action.hover},"&:hover a":{textDecoration:"underline"}}),l("itemImg"),{width:"60px",height:"60px",borderRadius:"6px",objectFit:"cover",marginRight:"12px",flex:"0 0 auto",backgroundColor:i(r.palette.grey[400],.2)}),l("itemContent"),{flex:1,display:"flex",alignItems:"center",minWidth:0,position:"relative",marginRight:r.spacing(1.5)}),l("itemTitle"),{color:"var(--color-text, #fff)",fontWeight:600,flex:1,width:"100%",marginRight:r.spacing(1),padding:r.spacing(2,0),minWidth:0,maxWidth:"300px"}),l("itemTitle",{prefix:"a"}),{textDecoration:"none","&:hover":{textDecoration:"underline"}}),t(t(o,l("itemTag"),{position:"absolute",top:0,left:0,fontWeight:600}),"&.mobile",t(t({},l("content"),{flex:1}),l("items"),{flex:1,display:"flex",flexDirection:"column"}))});export{p as CartContentStyled,a as MenuStyled,n as cartContentClasses};
|
|
2
2
|
//# sourceMappingURL=styled.js.map
|
package/dist/cart/styled.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styled.js","sources":["../../src/cart/styled.tsx"],"sourcesContent":["import { alpha, Box, Menu, styled } from '@mui/material'\r\nimport type { ComponentType } from 'react'\r\nimport type { BoxProps, MenuProps } from '@mui/material'\r\n\r\nexport const MenuStyled: ComponentType<MenuProps> = styled(Menu)(({ theme }) => ({\r\n '--color-bg': theme.palette.mode === 'dark' ? '#323234' : theme.palette.background.paper,\r\n '--color-text': theme.palette.text.primary,\r\n\r\n marginTop: '45px',\r\n '.MuiPaper-root': {\r\n position: 'relative',\r\n overflow: 'visible',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n backgroundColor: 'var(--color-bg, #000000)',\r\n borderRadius: theme.shape.borderRadius,\r\n minWidth: '280px',\r\n maxWidth: '550px',\r\n boxShadow: `0 1px 1px rgba(0, 0, 0, 0.05), 0 2px 2px rgba(0, 0, 0, 0.2), 0 4px 4px rgba(0, 0, 0, 0.15), 0 8px 8px rgba(0, 0, 0, 0.05)`,\r\n animation: 'fadeInDown 0.3s ease-out',\r\n marginTop: '8px',\r\n color: 'var(--color-text, #000000)',\r\n\r\n '@keyframes fadeInDown': {\r\n '0%': { opacity: 0, transform: 'translateY(-10px)' },\r\n '100%': { opacity: 1, transform: 'translateY(0)' }\r\n },\r\n\r\n '&::before': {\r\n content: '\"\"',\r\n position: 'absolute',\r\n backgroundColor: 'var(--color-bg, #ffffff)',\r\n width: '10px',\r\n height: '10px',\r\n top: '-4px',\r\n right: theme.spacing(1),\r\n transform: 'translateX(-50%) rotate(45deg)',\r\n zIndex: 0\r\n }\r\n },\r\n '.MuiBackdrop-root': { backgroundColor: 'transparent' },\r\n '.MuiList-root': {
|
|
1
|
+
{"version":3,"file":"styled.js","sources":["../../src/cart/styled.tsx"],"sourcesContent":["import { alpha, Box, Menu, styled } from '@mui/material'\r\nimport type { ComponentType } from 'react'\r\nimport type { BoxProps, MenuProps } from '@mui/material'\r\n\r\nexport const MenuStyled: ComponentType<MenuProps> = styled(Menu)(({ theme }) => ({\r\n '--color-bg': theme.palette.mode === 'dark' ? '#323234' : theme.palette.background.paper,\r\n '--color-text': theme.palette.text.primary,\r\n\r\n marginTop: '45px',\r\n '.MuiPaper-root': {\r\n position: 'relative',\r\n overflow: 'visible',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n backgroundColor: 'var(--color-bg, #000000)',\r\n borderRadius: theme.shape.borderRadius,\r\n minWidth: '280px',\r\n maxWidth: '550px',\r\n boxShadow: `0 1px 1px rgba(0, 0, 0, 0.05), 0 2px 2px rgba(0, 0, 0, 0.2), 0 4px 4px rgba(0, 0, 0, 0.15), 0 8px 8px rgba(0, 0, 0, 0.05)`,\r\n animation: 'fadeInDown 0.3s ease-out',\r\n marginTop: '8px',\r\n color: 'var(--color-text, #000000)',\r\n\r\n '@keyframes fadeInDown': {\r\n '0%': { opacity: 0, transform: 'translateY(-10px)' },\r\n '100%': { opacity: 1, transform: 'translateY(0)' }\r\n },\r\n\r\n '&::before': {\r\n content: '\"\"',\r\n position: 'absolute',\r\n backgroundColor: 'var(--color-bg, #ffffff)',\r\n width: '10px',\r\n height: '10px',\r\n top: '-4px',\r\n right: theme.spacing(1),\r\n transform: 'translateX(-50%) rotate(45deg)',\r\n zIndex: 0\r\n }\r\n },\r\n '.MuiBackdrop-root': { backgroundColor: 'transparent' },\r\n '.MuiList-root': { padding: 0, height: '100%' }\r\n}))\r\n\r\nexport const cartContentClasses = {\r\n root: 'CartContent-root',\r\n header: 'CartContent-header',\r\n footer: 'CartContent-footer',\r\n content: 'CartContent-content',\r\n items: 'CartContent-items',\r\n item: 'CartContent-item',\r\n itemContent: 'CartContent-itemContent',\r\n itemImg: 'CartContent-itemImg',\r\n itemTitle: 'CartContent-itemTitle',\r\n itemPrice: 'CartContent-itemPrice',\r\n itemTag: 'CartContent-itemTag'\r\n}\r\n\r\nconst getCartContentClasses = (key: keyof typeof cartContentClasses, options?: { prefix?: string; suffix?: string }) => {\r\n return `${options?.prefix || ''}.${cartContentClasses[key]}${options?.suffix || ''}`\r\n}\r\n\r\nexport const CartContentStyled: ComponentType<BoxProps> = styled(Box)(({ theme }) => ({\r\n '--height-item': '80px',\r\n '--color-bg': theme.palette.mode === 'dark' ? '#323234' : theme.palette.background.paper,\r\n '--color-text': theme.palette.text.primary,\r\n [getCartContentClasses('root', { prefix: '&' })]: {\r\n flex: '1',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n minHeight: 0,\r\n maxHeight: '60vh',\r\n '&.mobile': { height: '100%', maxHeight: 'none' }\r\n },\r\n [getCartContentClasses('header')]: {\r\n padding: '12px 16px',\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n alignItems: 'center',\r\n gap: theme.spacing(5),\r\n position: 'sticky',\r\n top: 0,\r\n background: 'var(--color-bg, #323234)',\r\n zIndex: 2,\r\n boxShadow: '0px 0.5px 5px 0px rgba(0, 0, 0, 0.15)'\r\n },\r\n [getCartContentClasses('footer')]: {\r\n padding: '6px 12px',\r\n display: 'flex',\r\n justifyContent: 'flex-end',\r\n position: 'sticky',\r\n bottom: 0,\r\n background: 'var(--color-bg, #323234)',\r\n zIndex: 1,\r\n boxShadow: '0px 0.5px 5px 0px rgba(0, 0, 0, 0.15)'\r\n },\r\n [getCartContentClasses('content')]: {\r\n flex: 1,\r\n display: 'flex',\r\n flexDirection: 'column',\r\n minHeight: 0,\r\n overflowY: 'auto'\r\n },\r\n [getCartContentClasses('items')]: {\r\n overflowY: 'auto',\r\n minHeight: 0,\r\n '&::-webkit-scrollbar': { width: '8px', height: '8px', background: 'transparent' },\r\n '&::-webkit-scrollbar-thumb': { background: '#e0e0e0', borderRadius: '8px' },\r\n '&::-webkit-scrollbar-thumb:hover': { background: '#bdbdbd' },\r\n '&': { scrollbarWidth: 'thin', scrollbarColor: '#e0e0e0 transparent' }\r\n },\r\n [getCartContentClasses('item')]: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n padding: '8px 12px',\r\n transition: '0.3s',\r\n height: 'var(--height-item)',\r\n '& a': { textDecoration: 'none' },\r\n '&:hover': { background: theme.palette.action.hover },\r\n '&:hover a': { textDecoration: 'underline' }\r\n },\r\n [getCartContentClasses('itemImg')]: {\r\n width: '60px',\r\n height: '60px',\r\n borderRadius: '6px',\r\n objectFit: 'cover',\r\n marginRight: '12px',\r\n flex: '0 0 auto',\r\n backgroundColor: alpha(theme.palette.grey[400], 0.2)\r\n },\r\n [getCartContentClasses('itemContent')]: {\r\n flex: 1,\r\n display: 'flex',\r\n alignItems: 'center',\r\n minWidth: 0,\r\n position: 'relative',\r\n marginRight: theme.spacing(1.5)\r\n },\r\n [getCartContentClasses('itemTitle')]: {\r\n color: 'var(--color-text, #fff)',\r\n fontWeight: 600,\r\n flex: 1,\r\n width: '100%',\r\n marginRight: theme.spacing(1),\r\n padding: theme.spacing(2, 0),\r\n minWidth: 0,\r\n maxWidth: '300px'\r\n },\r\n [getCartContentClasses('itemTitle', { prefix: 'a' })]: {\r\n textDecoration: 'none',\r\n '&:hover': { textDecoration: 'underline' }\r\n },\r\n [getCartContentClasses('itemTag')]: {\r\n position: 'absolute',\r\n top: 0,\r\n left: 0,\r\n fontWeight: 600\r\n },\r\n // Mobile specific styles\r\n '&.mobile': {\r\n [getCartContentClasses('content')]: { flex: 1 },\r\n [getCartContentClasses('items')]: { flex: 1, display: 'flex', flexDirection: 'column' }\r\n }\r\n}))\r\n"],"names":["MenuStyled","styled","Menu","_ref","theme","palette","mode","background","paper","text","primary","marginTop","position","overflow","display","flexDirection","backgroundColor","borderRadius","shape","minWidth","maxWidth","boxShadow","animation","color","opacity","transform","content","width","height","top","right","spacing","zIndex","padding","cartContentClasses","root","header","footer","items","item","itemContent","itemImg","itemTitle","itemPrice","itemTag","getCartContentClasses","key","options","concat","prefix","suffix","CartContentStyled","Box","_ref2","_ref3","_defineProperty","flex","minHeight","maxHeight","justifyContent","alignItems","gap","bottom","overflowY","scrollbarWidth","scrollbarColor","transition","textDecoration","action","hover","objectFit","marginRight","alpha","grey","fontWeight","left"],"mappings":"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"}
|
package/dist/cart/widget.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{slicedToArray as r,objectSpread2 as o}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as e,jsx as n}from"react/jsx-runtime";import{useState as i,Fragment as t}from"react";import{ImageWithFallback as l}from"dinocollab-core/components";import{useTheme as a,useMediaQuery as c,Badge as s,Drawer as m,Typography as d,Divider as u,Button as p,Box as h}from"@mui/material";import v from"@mui/icons-material/ShoppingCartOutlined";import f from"@mui/icons-material/ShoppingCartCheckout";import{getTotalData as x}from"./helpers.js";import{MenuStyled as C,CartContentStyled as g,cartContentClasses as b}from"./styled.js";import{IconButtonDark as P,IconButtonConfirm as N}from"../components/buttons.js";import{NoDataPanel as k}from"../components/no-data-panel.js";var T=function(T){var y,S,j=i(null),w=r(j,2),z=w[0],M=w[1],U=i(!1),A=r(U,2),B=A[0],I=A[1],L=a(),O=c(L.breakpoints.down("sm")),W=null!==(y=T.carts)&&void 0!==y?y:[];i(function(){I(!0)});var Y=function(){M(null)},$=function(r){var e,i=T.itemTitleProps,t=T.itemTitlePropsGetter,l=t?t(r,Y):null!=i?i:{},a=null!==(e=r.ProductName)&&void 0!==e?e:"Unknown Product";return n(d,o(o({className:b.itemTitle,noWrap:!0,variant:"subtitle1",title:a},l),{},{children:a}))},_=function(){var r,i=x(W);return e(g,{className:"".concat(b.root," ").concat(O?"mobile":""),children:[e("div",{className:b.header,children:[e(d,{variant:"h6",component:"span",sx:{flex:1},children:["Your Cart (",null!==(r=i.quantity)&&void 0!==r?r:0," items)"]}),e(d,{variant:"h6",component:"span",children:["Total: $ ",i.price.toFixed(2)]})]}),n(u,{}),n("div",{className:b.content,children:e("div",{className:b.items,children:[W.map(function(r,o){return n(t,{children:(i=r,e("div",{className:b.item,children:[n(l,{className:b.itemImg,src:null==i?void 0:i.PictureUrl,title:null==i?void 0:i.PictureUrl,fallbackSrc:"images/default-video.webp",alt:"product-picture"}),e("div",{className:b.itemContent,children:[n(d,{className:b.itemTag,variant:"caption",sx:{color:null!==(a=i.PriceColor)&&void 0!==a?a:"#000"},children:null!==(c=i.PriceName)&&void 0!==c?c:"Unknown Price"}),$(i),e(h,{sx:{display:"flex",alignItems:"flex-end",gap:"2px",justifyContent:"flex-end"},children:[e(d,{variant:"subtitle1",children:["$ ",null!==(s=i.Price)&&void 0!==s?s:0]}),e(d,{variant:"body1",sx:{fontSize:"14px",mb:"3px",color:"#818181"},children:["x",null!==(m=i.Amount)&&void 0!==m?m:0," urls"]})]})]}),n(N,{onAccept:function(){var r;return null===(r=T.onRemoveCart)||void 0===r?void 0:r.call(T,i)},slots:{removeProps:{sx:{color:"#818181"}}}})]}))},"key"+o);var i,a,c,s,m}),W.length<1&&n(k,{title:"Your cart is empty",subTitle:"Try adding some products",sx:{m:1,flex:1}})]})}),n(u,{}),n("div",{className:b.footer,children:n(p,o(o(o({},T.hrefCart?{component:"a",href:T.hrefCart}:{}),{},{color:"inherit",endIcon:n(f,{}),onClick:function(r){Y(),T.onMoveToCartClick&&T.onMoveToCartClick(r)},disabled:W.length<1},T.buttonMoveToCartProps),{},{children:"Show in cart"}))})]})};return e(t,{children:[n(P,{onClick:function(r){return o=r.currentTarget,void M(o);var o},children:n(s,{badgeContent:B&&null!==(S=W.length)&&void 0!==S?S:0,color:"error",children:n(v,{fontSize:"small"})})}),O?n(m,{anchor:"right",open:Boolean(z),onClose:Y,disableScrollLock:!0,PaperProps:{sx:{width:"calc(100% - 100px)",maxWidth:360}},children:_()}):n(C,{disableScrollLock:!0,anchorEl:z,open:Boolean(z),onClose:Y,anchorOrigin:{vertical:"top",horizontal:"right"},transformOrigin:{vertical:"top",horizontal:"right"},MenuListProps:{component:"div",sx:{display:"flex",flexDirection:"column"}},children:_()})]})},y=function(r){var e=function(e){return n(T,o(o({},r),e))};return e.displayName="CartWidget",e};export{T as CartWidget,y as createCartWidget};
|
|
2
2
|
//# sourceMappingURL=widget.js.map
|
package/dist/cart/widget.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"widget.js","sources":["../../src/cart/widget.tsx"],"sourcesContent":["import { Component, Fragment } from 'react'\r\nimport { ImageWithFallback } from 'dinocollab-core/components'\r\nimport { Badge, Box, Button, ButtonProps, Divider, Typography } from '@mui/material'\r\nimport type { FC } from 'react'\r\nimport type { TypographyProps } from '@mui/material'\r\nimport ShoppingCartOutlinedIcon from '@mui/icons-material/ShoppingCartOutlined'\r\nimport ShoppingCartCheckoutIcon from '@mui/icons-material/ShoppingCartCheckout'\r\nimport { ICartItem } from './types'\r\nimport { getTotalData } from './helpers'\r\nimport { IAppSiteBaseUrl } from '../types'\r\nimport { cartContentClasses, CartContentStyled, MenuStyled } from './styled'\r\nimport { IconButtonConfirm, IconButtonDark, NoDataPanel } from '../components'\r\n\r\ntype ITypographyProps = TypographyProps & { [key: string]: any }\r\n\r\ninterface ICartWidgetProps {\r\n baseUrl: IAppSiteBaseUrl\r\n carts?: ICartItem[]\r\n hrefCart?: string\r\n buttonMoveToCartProps?: ButtonProps & { [key: string]: any }\r\n storageKey?: string\r\n onRemoveCart?: (item: ICartItem) => void\r\n onMoveToCartClick?: (e: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement, MouseEvent>) => void\r\n itemTitleProps?: ITypographyProps\r\n itemTitlePropsGetter?: (item: ICartItem, close?: () => void) => ITypographyProps\r\n}\r\n\r\ninterface ICartWidgetState {\r\n anchorEl: HTMLElement | null\r\n hydrated: boolean\r\n}\r\n\r\nexport class CartWidget extends Component<ICartWidgetProps, ICartWidgetState> {\r\n constructor(props: ICartWidgetProps) {\r\n super(props)\r\n this.state = { anchorEl: null, hydrated: false }\r\n }\r\n\r\n get carts() {\r\n return this.props.carts ?? []\r\n }\r\n\r\n componentDidMount() {\r\n // When mounted on the client, set hydrated = true\r\n this.setState({ hydrated: true })\r\n }\r\n\r\n render = () => (\r\n <Fragment>\r\n <IconButtonDark onClick={(e) => this.onOpen(e.currentTarget)}>\r\n <Badge badgeContent={this.state.hydrated ? this.carts.length ?? 0 : 0} color='error'>\r\n <ShoppingCartOutlinedIcon fontSize='small' />\r\n </Badge>\r\n </IconButtonDark>\r\n <MenuStyled\r\n disableScrollLock\r\n anchorEl={this.state.anchorEl}\r\n open={Boolean(this.state.anchorEl)}\r\n onClose={this.onClose}\r\n anchorOrigin={{ vertical: 'top', horizontal: 'right' }}\r\n transformOrigin={{ vertical: 'top', horizontal: 'right' }}\r\n MenuListProps={{ component: 'div', sx: { display: 'flex', flexDirection: 'column' } }}\r\n >\r\n {this.renderContent()}\r\n </MenuStyled>\r\n </Fragment>\r\n )\r\n\r\n renderContent = () => {\r\n const totalData = getTotalData(this.carts)\r\n return (\r\n <CartContentStyled className={cartContentClasses.root}>\r\n <div className={cartContentClasses.header}>\r\n <Typography variant='h6' component='span' sx={{ flex: 1 }}>\r\n Your Cart ({totalData.quantity ?? 0} items)\r\n </Typography>\r\n <Typography variant='h6' component='span'>\r\n Total: $ {totalData.price.toFixed(2)}\r\n </Typography>\r\n </div>\r\n <Divider />\r\n <div className={cartContentClasses.items}>\r\n {this.carts.map((x, i) => (\r\n <Fragment key={'key' + i}>{this.renderItem(x)}</Fragment>\r\n ))}\r\n {this.carts.length < 1 && <NoDataPanel title='Your cart is empty' subTitle='Try adding some products' sx={{ height: '100%', m: 1 }} />}\r\n </div>\r\n <Divider />\r\n <div className={cartContentClasses.footer}>\r\n <Button\r\n {...(this.props.hrefCart ? { component: 'a', href: this.props.hrefCart } : {})}\r\n color='inherit'\r\n endIcon={<ShoppingCartCheckoutIcon />}\r\n onClick={(event) => {\r\n this.onClose()\r\n if (this.props.onMoveToCartClick) {\r\n this.props.onMoveToCartClick(event as React.MouseEvent<HTMLAnchorElement | HTMLButtonElement, MouseEvent>)\r\n }\r\n }}\r\n disabled={this.carts.length < 1}\r\n {...this.props.buttonMoveToCartProps}\r\n >\r\n Show in cart\r\n </Button>\r\n </div>\r\n </CartContentStyled>\r\n )\r\n }\r\n\r\n renderTitle = (item: ICartItem) => {\r\n const { itemTitleProps, itemTitlePropsGetter } = this.props\r\n const currentProps: ITypographyProps = itemTitlePropsGetter ? itemTitlePropsGetter(item, this.onClose) : itemTitleProps ?? {}\r\n const name = item.ProductName ?? 'Unknown Product'\r\n return (\r\n <Typography className={cartContentClasses.itemTitle} noWrap variant='subtitle1' title={name} {...currentProps}>\r\n {name}\r\n </Typography>\r\n )\r\n }\r\n\r\n renderItem = (item: ICartItem) => (\r\n <div className={cartContentClasses.item}>\r\n <ImageWithFallback\r\n className={cartContentClasses.itemImg}\r\n src={item?.PictureUrl}\r\n title={item?.PictureUrl}\r\n fallbackSrc='images/default-video.webp'\r\n alt='product-picture'\r\n />\r\n <div className={cartContentClasses.itemContent}>\r\n <Typography className={cartContentClasses.itemTag} variant='caption' sx={{ color: item.PriceColor ?? '#000' }}>\r\n {item.PriceName ?? 'Unknown Price'}\r\n </Typography>\r\n {this.renderTitle(item)}\r\n <Box sx={{ display: 'flex', alignItems: 'flex-end', gap: '2px', justifyContent: 'flex-end' }}>\r\n <Typography variant='subtitle1'>$ {item.Price ?? 0}</Typography>\r\n <Typography variant='body1' sx={{ fontSize: '14px', mb: '3px', color: '#818181' }}>\r\n x{item.Amount ?? 0} urls\r\n </Typography>\r\n </Box>\r\n </div>\r\n <IconButtonConfirm onAccept={() => this.props.onRemoveCart?.(item)} slots={{ removeProps: { sx: { color: '#818181' } } }} />\r\n {/* <IconButton size='small' onClick={() => this.props.onRemoveCart?.(item)} sx={{ color: '#818181' }}>\r\n <RemoveIcon />\r\n </IconButton> */}\r\n </div>\r\n )\r\n\r\n onOpen = (target: HTMLElement) => {\r\n this.setState({ anchorEl: target })\r\n }\r\n\r\n onClose = () => {\r\n this.setState({ anchorEl: null })\r\n }\r\n}\r\n\r\nexport const createCartWidget = (params: ICartWidgetProps) => {\r\n const _CartWidget: FC<Partial<ICartWidgetProps>> = (props) => <CartWidget {...params} {...props} />\r\n _CartWidget.displayName = 'CartWidget'\r\n return _CartWidget\r\n}\r\n"],"names":["CartWidget","props","_this","_classCallCheck","_callSuper","_defineProperty","_this$carts$length","_jsxs","Fragment","children","_jsx","IconButtonDark","onClick","e","onOpen","currentTarget","Badge","badgeContent","state","hydrated","carts","length","color","ShoppingCartOutlinedIcon","fontSize","MenuStyled","disableScrollLock","anchorEl","open","Boolean","onClose","anchorOrigin","vertical","horizontal","transformOrigin","MenuListProps","component","sx","display","flexDirection","renderContent","_totalData$quantity","totalData","getTotalData","CartContentStyled","className","cartContentClasses","root","header","Typography","variant","flex","quantity","price","toFixed","Divider","items","map","x","i","renderItem","NoDataPanel","title","subTitle","height","m","footer","Button","_objectSpread","hrefCart","href","endIcon","ShoppingCartCheckoutIcon","event","onMoveToCartClick","disabled","buttonMoveToCartProps","item","_item$ProductName","_this$props","itemTitleProps","itemTitlePropsGetter","currentProps","name","ProductName","itemTitle","noWrap","_item$PriceColor","_item$PriceName","_item$Price","_item$Amount","ImageWithFallback","itemImg","src","PictureUrl","fallbackSrc","alt","itemContent","itemTag","PriceColor","PriceName","renderTitle","Box","alignItems","gap","justifyContent","Price","mb","Amount","IconButtonConfirm","onAccept","_this$props$onRemoveC","_this$props2","onRemoveCart","call","slots","removeProps","target","setState","_inherits","Component","_createClass","key","get","_this$props$carts","this","value","createCartWidget","params","_CartWidget","displayName"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"widget.js","sources":["../../src/cart/widget.tsx"],"sourcesContent":["import { Component, Fragment, useState, FC } from 'react'\r\nimport { ImageWithFallback } from 'dinocollab-core/components'\r\nimport { Badge, Box, Button, ButtonProps, Divider, Drawer, Typography, useMediaQuery, useTheme } from '@mui/material'\r\nimport type { TypographyProps } from '@mui/material'\r\nimport ShoppingCartOutlinedIcon from '@mui/icons-material/ShoppingCartOutlined'\r\nimport ShoppingCartCheckoutIcon from '@mui/icons-material/ShoppingCartCheckout'\r\nimport { ICartItem } from './types'\r\nimport { getTotalData } from './helpers'\r\nimport { IAppSiteBaseUrl } from '../types'\r\nimport { cartContentClasses, CartContentStyled, MenuStyled } from './styled'\r\nimport { IconButtonConfirm, IconButtonDark, NoDataPanel } from '../components'\r\n\r\ntype ITypographyProps = TypographyProps & { [key: string]: any }\r\n\r\ninterface ICartWidgetProps {\r\n baseUrl: IAppSiteBaseUrl\r\n carts?: ICartItem[]\r\n hrefCart?: string\r\n buttonMoveToCartProps?: ButtonProps & { [key: string]: any }\r\n storageKey?: string\r\n onRemoveCart?: (item: ICartItem) => void\r\n onMoveToCartClick?: (e: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement, MouseEvent>) => void\r\n itemTitleProps?: ITypographyProps\r\n itemTitlePropsGetter?: (item: ICartItem, close?: () => void) => ITypographyProps\r\n}\r\n\r\ninterface ICartWidgetState {\r\n anchorEl: HTMLElement | null\r\n hydrated: boolean\r\n}\r\n\r\nexport const CartWidget: FC<ICartWidgetProps> = (props) => {\r\n const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)\r\n const [hydrated, setHydrated] = useState(false)\r\n const theme = useTheme()\r\n const isMobile = useMediaQuery(theme.breakpoints.down('sm'))\r\n\r\n const carts = props.carts ?? []\r\n\r\n // Use effect to set hydrated on mount\r\n useState(() => {\r\n setHydrated(true)\r\n })\r\n\r\n const onOpen = (target: HTMLElement) => {\r\n setAnchorEl(target)\r\n }\r\n\r\n const onClose = () => {\r\n setAnchorEl(null)\r\n }\r\n\r\n const renderTitle = (item: ICartItem) => {\r\n const { itemTitleProps, itemTitlePropsGetter } = props\r\n const currentProps: ITypographyProps = itemTitlePropsGetter ? itemTitlePropsGetter(item, onClose) : (itemTitleProps ?? {})\r\n const name = item.ProductName ?? 'Unknown Product'\r\n return (\r\n <Typography className={cartContentClasses.itemTitle} noWrap variant='subtitle1' title={name} {...currentProps}>\r\n {name}\r\n </Typography>\r\n )\r\n }\r\n\r\n const renderItem = (item: ICartItem) => (\r\n <div className={cartContentClasses.item}>\r\n <ImageWithFallback\r\n className={cartContentClasses.itemImg}\r\n src={item?.PictureUrl}\r\n title={item?.PictureUrl}\r\n fallbackSrc='images/default-video.webp'\r\n alt='product-picture'\r\n />\r\n <div className={cartContentClasses.itemContent}>\r\n <Typography className={cartContentClasses.itemTag} variant='caption' sx={{ color: item.PriceColor ?? '#000' }}>\r\n {item.PriceName ?? 'Unknown Price'}\r\n </Typography>\r\n {renderTitle(item)}\r\n <Box sx={{ display: 'flex', alignItems: 'flex-end', gap: '2px', justifyContent: 'flex-end' }}>\r\n <Typography variant='subtitle1'>$ {item.Price ?? 0}</Typography>\r\n <Typography variant='body1' sx={{ fontSize: '14px', mb: '3px', color: '#818181' }}>\r\n x{item.Amount ?? 0} urls\r\n </Typography>\r\n </Box>\r\n </div>\r\n <IconButtonConfirm onAccept={() => props.onRemoveCart?.(item)} slots={{ removeProps: { sx: { color: '#818181' } } }} />\r\n </div>\r\n )\r\n\r\n const renderContent = () => {\r\n const totalData = getTotalData(carts)\r\n return (\r\n <CartContentStyled className={`${cartContentClasses.root} ${isMobile ? 'mobile' : ''}`}>\r\n <div className={cartContentClasses.header}>\r\n <Typography variant='h6' component='span' sx={{ flex: 1 }}>\r\n Your Cart ({totalData.quantity ?? 0} items)\r\n </Typography>\r\n <Typography variant='h6' component='span'>\r\n Total: $ {totalData.price.toFixed(2)}\r\n </Typography>\r\n </div>\r\n <Divider />\r\n <div className={cartContentClasses.content}>\r\n <div className={cartContentClasses.items}>\r\n {carts.map((x, i) => (\r\n <Fragment key={'key' + i}>{renderItem(x)}</Fragment>\r\n ))}\r\n {carts.length < 1 && <NoDataPanel title='Your cart is empty' subTitle='Try adding some products' sx={{ m: 1, flex: 1 }} />}\r\n </div>\r\n </div>\r\n <Divider />\r\n <div className={cartContentClasses.footer}>\r\n <Button\r\n {...(props.hrefCart ? { component: 'a', href: props.hrefCart } : {})}\r\n color='inherit'\r\n endIcon={<ShoppingCartCheckoutIcon />}\r\n onClick={(event) => {\r\n onClose()\r\n if (props.onMoveToCartClick) {\r\n props.onMoveToCartClick(event as React.MouseEvent<HTMLAnchorElement | HTMLButtonElement, MouseEvent>)\r\n }\r\n }}\r\n disabled={carts.length < 1}\r\n {...props.buttonMoveToCartProps}\r\n >\r\n Show in cart\r\n </Button>\r\n </div>\r\n </CartContentStyled>\r\n )\r\n }\r\n\r\n return (\r\n <Fragment>\r\n <IconButtonDark onClick={(e) => onOpen(e.currentTarget)}>\r\n <Badge badgeContent={hydrated ? (carts.length ?? 0) : 0} color='error'>\r\n <ShoppingCartOutlinedIcon fontSize='small' />\r\n </Badge>\r\n </IconButtonDark>\r\n {isMobile ? (\r\n <Drawer\r\n anchor='right'\r\n open={Boolean(anchorEl)}\r\n onClose={onClose}\r\n disableScrollLock\r\n PaperProps={{ sx: { width: 'calc(100% - 100px)', maxWidth: 360 } }}\r\n >\r\n {renderContent()}\r\n </Drawer>\r\n ) : (\r\n <MenuStyled\r\n disableScrollLock\r\n anchorEl={anchorEl}\r\n open={Boolean(anchorEl)}\r\n onClose={onClose}\r\n anchorOrigin={{ vertical: 'top', horizontal: 'right' }}\r\n transformOrigin={{ vertical: 'top', horizontal: 'right' }}\r\n MenuListProps={{ component: 'div', sx: { display: 'flex', flexDirection: 'column' } }}\r\n >\r\n {renderContent()}\r\n </MenuStyled>\r\n )}\r\n </Fragment>\r\n )\r\n}\r\n\r\nexport const createCartWidget = (params: ICartWidgetProps) => {\r\n const _CartWidget: FC<Partial<ICartWidgetProps>> = (props) => <CartWidget {...params} {...props} />\r\n _CartWidget.displayName = 'CartWidget'\r\n return _CartWidget\r\n}\r\n"],"names":["CartWidget","props","_props$carts","_carts$length","_useState","useState","_useState2","_slicedToArray","anchorEl","setAnchorEl","_useState3","_useState4","hydrated","setHydrated","theme","useTheme","isMobile","useMediaQuery","breakpoints","down","carts","onClose","renderTitle","item","_item$ProductName","itemTitleProps","itemTitlePropsGetter","currentProps","name","ProductName","_jsx","Typography","_objectSpread","className","cartContentClasses","itemTitle","noWrap","variant","title","children","renderContent","_totalData$quantity","totalData","getTotalData","_jsxs","CartContentStyled","concat","root","header","component","sx","flex","quantity","price","toFixed","Divider","content","items","map","x","i","Fragment","ImageWithFallback","itemImg","src","PictureUrl","fallbackSrc","alt","itemContent","itemTag","color","_item$PriceColor","PriceColor","_item$PriceName","PriceName","Box","display","alignItems","gap","justifyContent","_item$Price","Price","fontSize","mb","Amount","_item$Amount","IconButtonConfirm","onAccept","_props$onRemoveCart","onRemoveCart","call","slots","removeProps","length","NoDataPanel","subTitle","m","footer","Button","hrefCart","href","endIcon","ShoppingCartCheckoutIcon","onClick","event","onMoveToCartClick","disabled","buttonMoveToCartProps","IconButtonDark","e","target","currentTarget","Badge","badgeContent","ShoppingCartOutlinedIcon","Drawer","anchor","open","Boolean","disableScrollLock","PaperProps","width","maxWidth","MenuStyled","anchorOrigin","vertical","horizontal","transformOrigin","MenuListProps","flexDirection","createCartWidget","params","_CartWidget","displayName"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{objectSpread2 as e,defineProperty as t}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsx as n}from"react/jsx-runtime";import{styled as a,Box as r}from"@mui/material";var o={root:"AppHeader-root",rootFixed:"AppHeader-rootFixed",fixed:"AppHeader-fixed",content:"AppHeader-content",navItem:"AppHeader-navItem",navItems:"AppHeader-navItems",navItemIcon:"AppHeader-navItemIcon",subMenu:"AppHeader-subMenu",subMenuItem:"AppHeader-subMenuItem",subMenuTitle:"AppHeader-subMenuTitle",subNavItem:"AppHeader-subNavItem",subNavItemIcon:"AppHeader-subNavItemIcon",subNavItemText:"AppHeader-subNavItemContent"},i=function(e,t){return"".concat((null==t?void 0:t.prefix)||"",".").concat(o[e]).concat((null==t?void 0:t.suffix)||"")},p=a(function(t){return n(r,e({component:"header"},t))})(function(e){var n=e.theme;return t(t(t({},i("rootFixed",{prefix:"& > "}),{position:"relative",zIndex:1110,height:"var(--height-header, 114px)",backgroundColor:"var(--color-header, #1b1b1b)",color:n.palette.common.white}),i("content"),{display:"flex",alignItems:"center",justifyContent:"space-between",height:"100%",maxWidth:"var(--max-width, 1688px)"}),i("fixed",{prefix:"&"}),t(t({},i("rootFixed"),{position:"fixed",left:0,top:0,width:"100vw"}),"&::before",{content:'""',display:"block",height:"var(--height-header, 114px)",width:"100%"}))});p.displayName="HeaderStyled";var d=a(function(t){return n(r,e({component:"nav"},t))})(function(e){var n=e.theme;return t(t(t({display:"flex",alignItems:"center"},i("navItems"),{listStyle:"none",display:"flex",margin:0,padding:0}),i("navItemIcon"),{transition:"transform 0.3s ease"}),i("navItem"),{textDecoration:"none",marginRight:n.spacing(.5),flex:"0 0 auto","&:last-of-type":{marginRight:0},"& > button.MuiButtonBase-root .MuiButton-icon":{marginLeft:0},"&:hover":t({},i("navItemIcon"),{transform:"rotate(0deg) scale(1.2)"})})});d.displayName="NavStyled";export{p as HeaderStyled,d as NavStyled,o as appHeaderClasses};
|
|
1
|
+
import{objectSpread2 as e,defineProperty as t}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsx as n}from"react/jsx-runtime";import{styled as a,Box as r}from"@mui/material";var o={root:"AppHeader-root",rootFixed:"AppHeader-rootFixed",fixed:"AppHeader-fixed",content:"AppHeader-content",navItem:"AppHeader-navItem",navItems:"AppHeader-navItems",navItemIcon:"AppHeader-navItemIcon",subMenu:"AppHeader-subMenu",subMenuItem:"AppHeader-subMenuItem",subMenuTitle:"AppHeader-subMenuTitle",subNavItem:"AppHeader-subNavItem",subNavItemIcon:"AppHeader-subNavItemIcon",subNavItemText:"AppHeader-subNavItemContent"},i=function(e,t){return"".concat((null==t?void 0:t.prefix)||"",".").concat(o[e]).concat((null==t?void 0:t.suffix)||"")},p=a(function(t){return n(r,e({component:"header"},t))})(function(e){var n=e.theme;return t(t(t(t({},i("rootFixed",{prefix:"& > "}),{position:"relative",zIndex:1110,height:"var(--height-header, 114px)",backgroundColor:"var(--color-header, #1b1b1b)",color:n.palette.common.white}),i("content"),{display:"flex",alignItems:"center",justifyContent:"space-between",height:"100%",maxWidth:"var(--max-width, 1688px)"}),i("fixed",{prefix:"&"}),t(t({},i("rootFixed"),{position:"fixed",left:0,top:0,width:"100vw"}),"&::before",{content:'""',display:"block",height:"var(--height-header, 114px)",width:"100%"})),n.breakpoints.down("sm"),{"--height-header-mobile":"78px","--height-header":"var(--height-header-mobile)"})});p.displayName="HeaderStyled";var d=a(function(t){return n(r,e({component:"nav"},t))})(function(e){var n=e.theme;return t(t(t({display:"flex",alignItems:"center"},i("navItems"),{listStyle:"none",display:"flex",margin:0,padding:0}),i("navItemIcon"),{transition:"transform 0.3s ease"}),i("navItem"),{textDecoration:"none",marginRight:n.spacing(.5),flex:"0 0 auto","&:last-of-type":{marginRight:0},"& > button.MuiButtonBase-root .MuiButton-icon":{marginLeft:0},"&:hover":t({},i("navItemIcon"),{transform:"rotate(0deg) scale(1.2)"})})});d.displayName="NavStyled";export{p as HeaderStyled,d as NavStyled,o as appHeaderClasses};
|
|
2
2
|
//# sourceMappingURL=app-header.styled.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"app-header.styled.js","sources":["../../src/layout-global/app-header.styled.tsx"],"sourcesContent":["import { Box, BoxProps, styled } from '@mui/material'\r\nimport type { ComponentType } from 'react'\r\n\r\nexport const appHeaderClasses = {\r\n root: 'AppHeader-root',\r\n rootFixed: 'AppHeader-rootFixed',\r\n fixed: 'AppHeader-fixed',\r\n content: 'AppHeader-content',\r\n navItem: 'AppHeader-navItem',\r\n navItems: 'AppHeader-navItems',\r\n navItemIcon: 'AppHeader-navItemIcon',\r\n subMenu: 'AppHeader-subMenu',\r\n subMenuItem: 'AppHeader-subMenuItem',\r\n subMenuTitle: 'AppHeader-subMenuTitle',\r\n subNavItem: 'AppHeader-subNavItem',\r\n subNavItemIcon: 'AppHeader-subNavItemIcon',\r\n subNavItemText: 'AppHeader-subNavItemContent'\r\n}\r\n\r\nconst getClasses = (key: keyof typeof appHeaderClasses, options?: { prefix?: string; suffix?: string }) => {\r\n return `${options?.prefix || ''}.${appHeaderClasses[key]}${options?.suffix || ''}`\r\n}\r\n\r\nexport const HeaderStyled: ComponentType<BoxProps> = styled((p: BoxProps) => <Box component='header' {...p} />)(({ theme }) => ({\r\n // '*': { margin: 0, padding: 0, boxSizing: 'border-box' },\r\n [getClasses('rootFixed', { prefix: '& > ' })]: {\r\n position: 'relative',\r\n zIndex: 1110, // theme.zIndex.appBar,\r\n height: 'var(--height-header, 114px)',\r\n backgroundColor: 'var(--color-header, #1b1b1b)',\r\n color: theme.palette.common.white\r\n },\r\n [getClasses('content')]: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'space-between',\r\n height: '100%',\r\n maxWidth: 'var(--max-width, 1688px)'\r\n },\r\n [getClasses('fixed', { prefix: '&' })]: {\r\n [getClasses('rootFixed')]: {
|
|
1
|
+
{"version":3,"file":"app-header.styled.js","sources":["../../src/layout-global/app-header.styled.tsx"],"sourcesContent":["import { Box, BoxProps, styled } from '@mui/material'\r\nimport type { ComponentType } from 'react'\r\n\r\nexport const appHeaderClasses = {\r\n root: 'AppHeader-root',\r\n rootFixed: 'AppHeader-rootFixed',\r\n fixed: 'AppHeader-fixed',\r\n content: 'AppHeader-content',\r\n navItem: 'AppHeader-navItem',\r\n navItems: 'AppHeader-navItems',\r\n navItemIcon: 'AppHeader-navItemIcon',\r\n subMenu: 'AppHeader-subMenu',\r\n subMenuItem: 'AppHeader-subMenuItem',\r\n subMenuTitle: 'AppHeader-subMenuTitle',\r\n subNavItem: 'AppHeader-subNavItem',\r\n subNavItemIcon: 'AppHeader-subNavItemIcon',\r\n subNavItemText: 'AppHeader-subNavItemContent'\r\n}\r\n\r\nconst getClasses = (key: keyof typeof appHeaderClasses, options?: { prefix?: string; suffix?: string }) => {\r\n return `${options?.prefix || ''}.${appHeaderClasses[key]}${options?.suffix || ''}`\r\n}\r\n\r\nexport const HeaderStyled: ComponentType<BoxProps> = styled((p: BoxProps) => <Box component='header' {...p} />)(({ theme }) => ({\r\n // '*': { margin: 0, padding: 0, boxSizing: 'border-box' },\r\n [getClasses('rootFixed', { prefix: '& > ' })]: {\r\n position: 'relative',\r\n zIndex: 1110, // theme.zIndex.appBar,\r\n height: 'var(--height-header, 114px)',\r\n backgroundColor: 'var(--color-header, #1b1b1b)',\r\n color: theme.palette.common.white\r\n },\r\n [getClasses('content')]: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'space-between',\r\n height: '100%',\r\n maxWidth: 'var(--max-width, 1688px)'\r\n },\r\n [getClasses('fixed', { prefix: '&' })]: {\r\n [getClasses('rootFixed')]: { position: 'fixed', left: 0, top: 0, width: '100vw' },\r\n '&::before': {\r\n content: '\"\"',\r\n display: 'block',\r\n height: 'var(--height-header, 114px)',\r\n width: '100%'\r\n }\r\n },\r\n [theme.breakpoints.down('sm')]: {\r\n '--height-header-mobile': '78px',\r\n '--height-header': 'var(--height-header-mobile)'\r\n }\r\n}))\r\nexport type HeaderStyledType = typeof HeaderStyled\r\nHeaderStyled.displayName = 'HeaderStyled'\r\n\r\nexport const NavStyled: ComponentType<BoxProps> = styled((p: BoxProps) => <Box component='nav' {...p} />)(({ theme }) => ({\r\n display: 'flex',\r\n alignItems: 'center',\r\n [getClasses('navItems')]: {\r\n listStyle: 'none',\r\n display: 'flex',\r\n margin: 0,\r\n padding: 0\r\n },\r\n [getClasses('navItemIcon')]: { transition: 'transform 0.3s ease' },\r\n [getClasses('navItem')]: {\r\n textDecoration: 'none',\r\n marginRight: theme.spacing(0.5),\r\n flex: '0 0 auto',\r\n '&:last-of-type': { marginRight: 0 },\r\n '& > button.MuiButtonBase-root .MuiButton-icon': { marginLeft: 0 },\r\n '&:hover': { [getClasses('navItemIcon')]: { transform: 'rotate(0deg) scale(1.2)' } }\r\n }\r\n}))\r\nNavStyled.displayName = 'NavStyled'\r\n"],"names":["appHeaderClasses","root","rootFixed","fixed","content","navItem","navItems","navItemIcon","subMenu","subMenuItem","subMenuTitle","subNavItem","subNavItemIcon","subNavItemText","getClasses","key","options","concat","prefix","suffix","HeaderStyled","styled","p","_jsx","Box","_objectSpread","component","_ref","theme","_defineProperty","position","zIndex","height","backgroundColor","color","palette","common","white","display","alignItems","justifyContent","maxWidth","left","top","width","breakpoints","down","displayName","NavStyled","_ref3","listStyle","margin","padding","transition","textDecoration","marginRight","spacing","flex","marginLeft","transform"],"mappings":"qLAGO,IAAMA,EAAmB,CAC9BC,KAAM,iBACNC,UAAW,sBACXC,MAAO,kBACPC,QAAS,oBACTC,QAAS,oBACTC,SAAU,qBACVC,YAAa,wBACbC,QAAS,oBACTC,YAAa,wBACbC,aAAc,yBACdC,WAAY,uBACZC,eAAgB,2BAChBC,eAAgB,+BAGZC,EAAa,SAACC,EAAoCC,GACtD,MAAA,GAAAC,QAAUD,aAAAA,EAAAA,EAASE,SAAU,QAAED,OAAIjB,EAAiBe,IAAIE,QAAGD,aAAAA,EAAAA,EAASG,SAAU,GAChF,EAEaC,EAAwCC,EAAO,SAACC,GAAW,OAAKC,EAACC,EAAGC,EAAA,CAACC,UAAU,UAAaJ,GAAK,EAAzDD,CAA2D,SAAAM,GAAA,IAAGC,EAAKD,EAALC,MAAK,OAAAC,EAAAA,EAAAA,EAAAA,EAErHf,CAAAA,EAAAA,EAAW,YAAa,CAAEI,OAAQ,SAAY,CAC7CY,SAAU,WACVC,OAAQ,KACRC,OAAQ,8BACRC,gBAAiB,+BACjBC,MAAON,EAAMO,QAAQC,OAAOC,QAE7BvB,EAAW,WAAa,CACvBwB,QAAS,OACTC,WAAY,SACZC,eAAgB,gBAChBR,OAAQ,OACRS,SAAU,6BAEX3B,EAAW,QAAS,CAAEI,OAAQ,MAAMW,EAAAA,KAClCf,EAAW,aAAe,CAAEgB,SAAU,QAASY,KAAM,EAAGC,IAAK,EAAGC,MAAO,UACxE,YAAa,CACXxC,QAAS,KACTkC,QAAS,QACTN,OAAQ,8BACRY,MAAO,UAGVhB,EAAMiB,YAAYC,KAAK,MAAQ,CAC9B,yBAA0B,OAC1B,kBAAmB,+BACpB,GAGH1B,EAAa2B,YAAc,mBAEdC,EAAqC3B,EAAO,SAACC,GAAW,OAAKC,EAACC,EAAGC,EAAA,CAACC,UAAU,OAAUJ,GAAK,EAAtDD,CAAwD,SAAA4B,GAAA,IAAGrB,EAAKqB,EAALrB,MAAK,OAAAC,EAAAA,EAAAA,EAAA,CAChHS,QAAS,OACTC,WAAY,UACXzB,EAAW,YAAc,CACxBoC,UAAW,OACXZ,QAAS,OACTa,OAAQ,EACRC,QAAS,IAEVtC,EAAW,eAAiB,CAAEuC,WAAY,wBAC1CvC,EAAW,WAAa,CACvBwC,eAAgB,OAChBC,YAAa3B,EAAM4B,QAAQ,IAC3BC,KAAM,WACN,iBAAkB,CAAEF,YAAa,GACjC,gDAAiD,CAAEG,WAAY,GAC/D,UAAS7B,EAAA,CAAA,EAAKf,EAAW,eAAiB,CAAE6C,UAAW,6BACxD,GAEHX,EAAUD,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{slicedToArray as r,objectSpread2 as
|
|
1
|
+
import{slicedToArray as r,objectSpread2 as e}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as o,jsx as t,Fragment as n}from"react/jsx-runtime";import{useState as i,Fragment as l}from"react";import{useTheme as a,useMediaQuery as c,Badge as s,Drawer as m,Stack as p,Typography as u,Button as d}from"@mui/material";import h from"@mui/icons-material/PlaylistPlay";import f from"@mui/icons-material/DriveFileMoveOutlined";import{EmptyState as g}from"./units.js";import{NewGroupArea as v}from"./new-group-area.js";import{canAddGroup as P,generateGroupId as T}from"../helpers.js";import{MenuContentStyled as j,MenuStyled as y,mediaWidgetClasses as C}from"./styled.js";import{IconButtonDark as G}from"../../components/buttons.js";import{MediaGroupAccordion as b}from"./media-group-accordion.js";import{ItemTitlePropsContext as x}from"./item-title-props-context.js";import{useMediaRightStore as S,useMediaRightActions as k}from"../hooks.js";var N=function(N){var M=N.localStorageKey,w=N.hrefCart,D=N.buttonMoveToCartProps,z=N.onDetailClick,B=S({localStorageKey:M}).groups,K=k({localStorageKey:M}),L=a(),O=c(L.breakpoints.down("sm")),E=i(null),F=r(E,2),I=F[0],W=F[1],_=i(!1),A=r(_,2),H=A[0],Y=A[1],q=function(r){K.addGroup({name:r,id:T()})},J=function(r){K.updateGroup(r.id,r)},Q=function(r){K.removeGroup(r)},R=function(r,e){K.removeItem(r,e)},U=function(){var r;return o(n,{children:[o(p,{spacing:1,className:C.header,children:[o(u,{variant:"h6",component:"span",className:C.headerText,children:["Your playlist (",null!==(r=B.length)&&void 0!==r?r:0," playlist",B.length>1?"s":"",")"]}),P(B)&&t(v,{onSaveGroup:q})]}),0===B.length?t(g,{}):t("div",{className:C.content,children:B.map(function(r){return t(b,{group:r,onEditGroup:J,onDeleteGroup:Q,onDeleteMedia:R,accordionProps:{expanded:H===r.id,onChange:function(e,o){return Y(!!o&&r.id)}}},r.id)})}),t(p,{className:C.footer,children:t(d,e(e(e({},w?{component:"a",href:w}:{}),{},{color:"inherit",size:"small",endIcon:t(f,{}),onClick:function(r){W(null),z&&z(r)},disabled:B.length<1},D),{},{children:"Show Playlist"}))})]})};return o(l,{children:[t(G,{onClick:function(r){return W(r.currentTarget)},children:t(s,{badgeContent:B.length||0,color:"error",children:t(h,{})})}),O?t(m,{anchor:"right",open:Boolean(I),onClose:function(){return W(null)},disableScrollLock:!0,PaperProps:{sx:{width:"calc(100% - 100px)",maxWidth:360}},children:t(j,{className:"mobile",children:t(x.Provider,{value:{itemTitleProps:N.itemTitleProps,itemTitlePropsGetter:N.itemTitlePropsGetter,onClose:function(){return W(null)}},children:U()})})}):t(y,{disableScrollLock:!0,anchorEl:I,open:Boolean(I),onClose:function(){return W(null)},anchorOrigin:{vertical:"top",horizontal:"right"},transformOrigin:{vertical:"top",horizontal:"right"},MenuListProps:{component:"div"},children:t(j,{children:t(x.Provider,{value:{itemTitleProps:N.itemTitleProps,itemTitlePropsGetter:N.itemTitlePropsGetter,onClose:function(){return W(null)}},children:U()})})})]})},M=function(r){var o=function(o){return t(N,e(e({},r),o))};return o.displayName="MediaGroupWidget",o};export{N as MediaGroupWidget,M as createMediaGroupWidget};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/media-right/media-widget/index.tsx"],"sourcesContent":["import { Fragment, useState } from 'react'\r\nimport { Badge, Button, ButtonProps, Stack, Typography } from '@mui/material'\r\nimport PlaylistPlayIcon from '@mui/icons-material/PlaylistPlay'\r\nimport DriveFileMoveOutlinedIcon from '@mui/icons-material/DriveFileMoveOutlined'\r\nimport { EmptyState } from './units'\r\nimport { NewGroupArea } from './new-group-area'\r\nimport { canAddGroup, generateGroupId } from '../helpers'\r\nimport { mediaWidgetClasses, MenuStyled } from './styled'\r\nimport { IconButtonDark } from '../../components/buttons'\r\nimport { MediaGroupAccordion } from './media-group-accordion'\r\nimport { ItemTitlePropsContext } from './item-title-props-context'\r\nimport { useMediaRightStore, useMediaRightActions } from '../hooks'\r\nimport type { IMediaRightGroup } from '../types'\r\nimport type { ITitlePropsContextValue } from './item-title-props-context'\r\n\r\nexport interface IMediaGroupWidgetProps extends ITitlePropsContextValue {\r\n localStorageKey?: string\r\n hrefCart?: string\r\n buttonMoveToCartProps?: ButtonProps & { [key: string]: any }\r\n onDetailClick?: ButtonProps['onClick']\r\n}\r\n\r\nexport const MediaGroupWidget: React.FC<IMediaGroupWidgetProps> = (props) => {\r\n const { localStorageKey, hrefCart, buttonMoveToCartProps, onDetailClick } = props\r\n const { groups } = useMediaRightStore({ localStorageKey })\r\n const actions = useMediaRightActions({ localStorageKey })\r\n\r\n const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)\r\n const [expandedGroupId, setExpandedGroupId] = useState<string | false>(false)\r\n\r\n const handleSaveNewGroup = (groupName: string) => {\r\n actions.addGroup({\r\n name: groupName,\r\n id: generateGroupId()\r\n })\r\n }\r\n\r\n const handleEditGroup = (group: IMediaRightGroup) => {\r\n actions.updateGroup(group.id, group)\r\n }\r\n\r\n const handleDeleteGroup = (groupId: string) => {\r\n actions.removeGroup(groupId)\r\n }\r\n\r\n const handleDeleteMedia = (groupId: string, productId: string) => {\r\n actions.removeItem(groupId, productId)\r\n }\r\n\r\n const renderContent = () => {\r\n return (\r\n <>\r\n <Stack spacing={1} className={mediaWidgetClasses.header}>\r\n <Typography variant='h6' component='span' className={mediaWidgetClasses.headerText}>\r\n Your playlist ({groups.length ?? 0} playlist{groups.length > 1 ? 's' : ''})\r\n </Typography>\r\n {canAddGroup(groups) && <NewGroupArea onSaveGroup={handleSaveNewGroup} />}\r\n </Stack>\r\n {/* <Divider /> */}\r\n {groups.length === 0 ? (\r\n <EmptyState />\r\n ) : (\r\n groups.map((group) => (\r\n <MediaGroupAccordion\r\n key={group.id}\r\n group={group}\r\n onEditGroup={handleEditGroup}\r\n onDeleteGroup={handleDeleteGroup}\r\n onDeleteMedia={handleDeleteMedia}\r\n accordionProps={{\r\n expanded: expandedGroupId === group.id,\r\n onChange: (_, isExpanded) => setExpandedGroupId(isExpanded ? group.id : false)\r\n }}\r\n />\r\n ))\r\n )}\r\n {/* <Divider /> */}\r\n <Stack className={mediaWidgetClasses.footer}>\r\n <Button\r\n {...(hrefCart ? { component: 'a', href: hrefCart } : {})}\r\n color='inherit'\r\n size='small'\r\n endIcon={<DriveFileMoveOutlinedIcon />}\r\n onClick={(e) => {\r\n setAnchorEl(null)\r\n if (onDetailClick) onDetailClick(e)\r\n }}\r\n disabled={groups.length < 1}\r\n {...buttonMoveToCartProps}\r\n >\r\n Show Playlist\r\n </Button>\r\n </Stack>\r\n </>\r\n )\r\n }\r\n\r\n return (\r\n <Fragment>\r\n <IconButtonDark onClick={(e) => setAnchorEl(e.currentTarget)}>\r\n <Badge badgeContent={groups.length || 0} color='error'>\r\n <PlaylistPlayIcon />\r\n </Badge>\r\n </IconButtonDark>\r\n <MenuStyled\r\n disableScrollLock\r\n anchorEl={anchorEl}\r\n open={Boolean(anchorEl)}\r\n onClose={() => setAnchorEl(null)}\r\n anchorOrigin={{ vertical: 'top', horizontal: 'right' }}\r\n transformOrigin={{ vertical: 'top', horizontal: 'right' }}\r\n MenuListProps={{ component: 'div' }}\r\n >\r\n <ItemTitlePropsContext.Provider\r\n value={{\r\n itemTitleProps: props.itemTitleProps,\r\n itemTitlePropsGetter: props.itemTitlePropsGetter,\r\n onClose: () => setAnchorEl(null)\r\n }}\r\n >\r\n {renderContent()}\r\n </ItemTitlePropsContext.Provider>\r\n </MenuStyled>\r\n </Fragment>\r\n )\r\n}\r\n\r\nexport const createMediaGroupWidget = (params: IMediaGroupWidgetProps) => {\r\n const _MediaGroupWidget: React.FC<Partial<IMediaGroupWidgetProps>> = (props) => <MediaGroupWidget {...params} {...props} />\r\n _MediaGroupWidget.displayName = 'MediaGroupWidget'\r\n return _MediaGroupWidget\r\n}\r\n"],"names":["MediaGroupWidget","props","_groups$length","localStorageKey","hrefCart","buttonMoveToCartProps","onDetailClick","groups","useMediaRightStore","actions","useMediaRightActions","_useState","useState","_useState2","_slicedToArray","anchorEl","setAnchorEl","_useState3","_useState4","expandedGroupId","setExpandedGroupId","handleSaveNewGroup","groupName","addGroup","name","id","generateGroupId","handleEditGroup","group","updateGroup","handleDeleteGroup","groupId","removeGroup","handleDeleteMedia","productId","removeItem","_jsxs","Fragment","children","_jsx","IconButtonDark","onClick","e","currentTarget","Badge","badgeContent","length","color","PlaylistPlayIcon","MenuStyled","disableScrollLock","open","Boolean","onClose","anchorOrigin","vertical","horizontal","transformOrigin","MenuListProps","component","ItemTitlePropsContext","Provider","value","itemTitleProps","itemTitlePropsGetter","_Fragment","Stack","spacing","className","mediaWidgetClasses","header","Typography","variant","headerText","canAddGroup","NewGroupArea","onSaveGroup","EmptyState","map","MediaGroupAccordion","onEditGroup","onDeleteGroup","onDeleteMedia","accordionProps","expanded","onChange","_","isExpanded","footer","Button","_objectSpread","href","size","endIcon","DriveFileMoveOutlinedIcon","disabled","createMediaGroupWidget","params","_MediaGroupWidget","displayName"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/media-right/media-widget/index.tsx"],"sourcesContent":["import { Fragment, useState } from 'react'\r\nimport { Badge, Box, Button, ButtonProps, Drawer, Stack, Typography, useMediaQuery, useTheme } from '@mui/material'\r\nimport PlaylistPlayIcon from '@mui/icons-material/PlaylistPlay'\r\nimport DriveFileMoveOutlinedIcon from '@mui/icons-material/DriveFileMoveOutlined'\r\nimport { EmptyState } from './units'\r\nimport { NewGroupArea } from './new-group-area'\r\nimport { canAddGroup, generateGroupId } from '../helpers'\r\nimport { mediaWidgetClasses, MenuContentStyled, MenuStyled } from './styled'\r\nimport { IconButtonDark } from '../../components/buttons'\r\nimport { MediaGroupAccordion } from './media-group-accordion'\r\nimport { ItemTitlePropsContext } from './item-title-props-context'\r\nimport { useMediaRightStore, useMediaRightActions } from '../hooks'\r\nimport type { IMediaRightGroup } from '../types'\r\nimport type { ITitlePropsContextValue } from './item-title-props-context'\r\n\r\nexport interface IMediaGroupWidgetProps extends ITitlePropsContextValue {\r\n localStorageKey?: string\r\n hrefCart?: string\r\n buttonMoveToCartProps?: ButtonProps & { [key: string]: any }\r\n onDetailClick?: ButtonProps['onClick']\r\n}\r\n\r\nexport const MediaGroupWidget: React.FC<IMediaGroupWidgetProps> = (props) => {\r\n const { localStorageKey, hrefCart, buttonMoveToCartProps, onDetailClick } = props\r\n const { groups } = useMediaRightStore({ localStorageKey })\r\n const actions = useMediaRightActions({ localStorageKey })\r\n const theme = useTheme()\r\n const isMobile = useMediaQuery(theme.breakpoints.down('sm'))\r\n\r\n const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)\r\n const [expandedGroupId, setExpandedGroupId] = useState<string | false>(false)\r\n\r\n const handleSaveNewGroup = (groupName: string) => {\r\n actions.addGroup({\r\n name: groupName,\r\n id: generateGroupId()\r\n })\r\n }\r\n\r\n const handleEditGroup = (group: IMediaRightGroup) => {\r\n actions.updateGroup(group.id, group)\r\n }\r\n\r\n const handleDeleteGroup = (groupId: string) => {\r\n actions.removeGroup(groupId)\r\n }\r\n\r\n const handleDeleteMedia = (groupId: string, productId: string) => {\r\n actions.removeItem(groupId, productId)\r\n }\r\n\r\n const renderContent = () => {\r\n return (\r\n <>\r\n <Stack spacing={1} className={mediaWidgetClasses.header}>\r\n <Typography variant='h6' component='span' className={mediaWidgetClasses.headerText}>\r\n Your playlist ({groups.length ?? 0} playlist{groups.length > 1 ? 's' : ''})\r\n </Typography>\r\n {canAddGroup(groups) && <NewGroupArea onSaveGroup={handleSaveNewGroup} />}\r\n </Stack>\r\n {/* <Divider /> */}\r\n {groups.length === 0 ? (\r\n <EmptyState />\r\n ) : (\r\n <div className={mediaWidgetClasses.content}>\r\n {groups.map((group) => (\r\n <MediaGroupAccordion\r\n key={group.id}\r\n group={group}\r\n onEditGroup={handleEditGroup}\r\n onDeleteGroup={handleDeleteGroup}\r\n onDeleteMedia={handleDeleteMedia}\r\n accordionProps={{\r\n expanded: expandedGroupId === group.id,\r\n onChange: (_, isExpanded) => setExpandedGroupId(isExpanded ? group.id : false)\r\n }}\r\n />\r\n ))}\r\n </div>\r\n )}\r\n {/* <Divider /> */}\r\n <Stack className={mediaWidgetClasses.footer}>\r\n <Button\r\n {...(hrefCart ? { component: 'a', href: hrefCart } : {})}\r\n color='inherit'\r\n size='small'\r\n endIcon={<DriveFileMoveOutlinedIcon />}\r\n onClick={(e) => {\r\n setAnchorEl(null)\r\n if (onDetailClick) onDetailClick(e)\r\n }}\r\n disabled={groups.length < 1}\r\n {...buttonMoveToCartProps}\r\n >\r\n Show Playlist\r\n </Button>\r\n </Stack>\r\n </>\r\n )\r\n }\r\n\r\n return (\r\n <Fragment>\r\n <IconButtonDark onClick={(e) => setAnchorEl(e.currentTarget)}>\r\n <Badge badgeContent={groups.length || 0} color='error'>\r\n <PlaylistPlayIcon />\r\n </Badge>\r\n </IconButtonDark>\r\n {isMobile ? (\r\n <Drawer\r\n anchor='right'\r\n open={Boolean(anchorEl)}\r\n onClose={() => setAnchorEl(null)}\r\n disableScrollLock\r\n PaperProps={{ sx: { width: 'calc(100% - 100px)', maxWidth: 360 } }}\r\n >\r\n <MenuContentStyled className='mobile'>\r\n <ItemTitlePropsContext.Provider\r\n value={{\r\n itemTitleProps: props.itemTitleProps,\r\n itemTitlePropsGetter: props.itemTitlePropsGetter,\r\n onClose: () => setAnchorEl(null)\r\n }}\r\n >\r\n {renderContent()}\r\n </ItemTitlePropsContext.Provider>\r\n </MenuContentStyled>\r\n </Drawer>\r\n ) : (\r\n <MenuStyled\r\n disableScrollLock\r\n anchorEl={anchorEl}\r\n open={Boolean(anchorEl)}\r\n onClose={() => setAnchorEl(null)}\r\n anchorOrigin={{ vertical: 'top', horizontal: 'right' }}\r\n transformOrigin={{ vertical: 'top', horizontal: 'right' }}\r\n MenuListProps={{ component: 'div' }}\r\n >\r\n <MenuContentStyled>\r\n <ItemTitlePropsContext.Provider\r\n value={{\r\n itemTitleProps: props.itemTitleProps,\r\n itemTitlePropsGetter: props.itemTitlePropsGetter,\r\n onClose: () => setAnchorEl(null)\r\n }}\r\n >\r\n {renderContent()}\r\n </ItemTitlePropsContext.Provider>\r\n </MenuContentStyled>\r\n </MenuStyled>\r\n )}\r\n </Fragment>\r\n )\r\n}\r\n\r\nexport const createMediaGroupWidget = (params: IMediaGroupWidgetProps) => {\r\n const _MediaGroupWidget: React.FC<Partial<IMediaGroupWidgetProps>> = (props) => <MediaGroupWidget {...params} {...props} />\r\n _MediaGroupWidget.displayName = 'MediaGroupWidget'\r\n return _MediaGroupWidget\r\n}\r\n"],"names":["MediaGroupWidget","props","localStorageKey","hrefCart","buttonMoveToCartProps","onDetailClick","groups","useMediaRightStore","actions","useMediaRightActions","theme","useTheme","isMobile","useMediaQuery","breakpoints","down","_useState","useState","_useState2","_slicedToArray","anchorEl","setAnchorEl","_useState3","_useState4","expandedGroupId","setExpandedGroupId","handleSaveNewGroup","groupName","addGroup","name","id","generateGroupId","handleEditGroup","group","updateGroup","handleDeleteGroup","groupId","removeGroup","handleDeleteMedia","productId","removeItem","renderContent","_groups$length","_jsxs","_Fragment","children","Stack","spacing","className","mediaWidgetClasses","header","Typography","variant","component","headerText","length","canAddGroup","_jsx","NewGroupArea","onSaveGroup","EmptyState","content","map","MediaGroupAccordion","onEditGroup","onDeleteGroup","onDeleteMedia","accordionProps","expanded","onChange","_","isExpanded","footer","Button","_objectSpread","href","color","size","endIcon","DriveFileMoveOutlinedIcon","onClick","e","disabled","Fragment","IconButtonDark","currentTarget","Badge","badgeContent","PlaylistPlayIcon","Drawer","anchor","open","Boolean","onClose","disableScrollLock","PaperProps","sx","width","maxWidth","MenuContentStyled","ItemTitlePropsContext","Provider","value","itemTitleProps","itemTitlePropsGetter","MenuStyled","anchorOrigin","vertical","horizontal","transformOrigin","MenuListProps","createMediaGroupWidget","params","_MediaGroupWidget","displayName"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{defineProperty as e}from"../../_virtual/_rollupPluginBabelHelpers.js";import{styled as t,Menu as
|
|
1
|
+
import{defineProperty as e}from"../../_virtual/_rollupPluginBabelHelpers.js";import{styled as t,Box as o,Menu as i}from"@mui/material";var r={header:"DinoMediaWidget-header",headerText:"DinoMediaWidget-headerText",footer:"DinoMediaWidget-footer",content:"DinoMediaWidget-content",item:"DinoMediaWidget-item",itemTitle:"DinoMediaWidget-itemTitle",itemChild:"DinoMediaWidget-itemChild",itemChildTitle:"DinoMediaWidget-itemChildTitle"},a=t(o)(function(t){var o=t.theme;return e(e(e(e(e(e(e({display:"flex",flexDirection:"column",overflowY:"auto",maxHeight:"60vh","&::-webkit-scrollbar":{width:"6px",background:"transparent"},"&::-webkit-scrollbar-thumb":{background:"#e0e0e0",borderRadius:"8px"},"&::-webkit-scrollbar-thumb:hover":{background:"#bdbdbd"},"&":{scrollbarWidth:"thin",scrollbarColor:"#e0e0e0 transparent"}},".".concat(r.header),{padding:"12px 16px",position:"sticky",top:0,backgroundColor:o.palette.background.paper,zIndex:2,boxShadow:"0px 0.5px 5px 0px rgba(0, 0, 0, 0.15)",alignItems:"flex-start"}),".".concat(r.headerText),{flex:1,color:o.palette.text.primary}),".".concat(r.footer),{position:"sticky",bottom:0,backgroundColor:o.palette.background.paper,zIndex:1,boxShadow:"0px 0.5px 5px 0px rgba(0, 0, 0, 0.15)",justifyContent:"end",flexDirection:"row",padding:"6px 12px"}),".".concat(r.item),{display:"flex",alignItems:"center",flex:1,gap:1,minWidth:0}),".".concat(r.itemTitle),{fontWeight:600,flex:1,minWidth:0,color:o.palette.text.primary,marginLeft:o.spacing(1)}),".".concat(r.itemChildTitle),{color:o.palette.text.primary}),"&.mobile",e({height:"100%",maxHeight:"none"},".".concat(r.content),{flex:1}))}),n=t(i)(function(e){var t=e.theme;return{"--color-bg":t.palette.background.paper,"--color-text":t.palette.text.primary,marginTop:"45px",">.MuiPaper-root":{position:"relative",overflow:"visible",display:"flex",flexDirection:"column",backgroundColor:"var(--color-bg, #000000)",borderRadius:t.shape.borderRadius,minWidth:"280px",width:"90vw",maxWidth:"450px",boxShadow:"0 1px 1px rgba(0, 0, 0, 0.05), 0 2px 2px rgba(0, 0, 0, 0.2), 0 4px 4px rgba(0, 0, 0, 0.15), 0 8px 8px rgba(0, 0, 0, 0.05)",animation:"fadeInDown 0.3s ease-out",marginTop:"8px","&::before":{content:'""',position:"absolute",backgroundColor:t.palette.divider,width:"10px",height:"10px",top:"-4px",right:t.spacing(1),transform:"translateX(-50%) rotate(45deg)",zIndex:0},"@keyframes fadeInDown":{"0%":{opacity:0,transform:"translateY(-10px)"},"100%":{opacity:1,transform:"translateY(0)"}}},".MuiBackdrop-root":{backgroundColor:"transparent"},".MuiList-root":{padding:0,height:"100%"}}});export{a as MenuContentStyled,n as MenuStyled,r as mediaWidgetClasses};
|
|
2
2
|
//# sourceMappingURL=styled.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styled.js","sources":["../../../src/media-right/media-widget/styled.tsx"],"sourcesContent":["import { Menu, styled } from '@mui/material'\r\nimport type { ComponentType } from 'react'\r\nimport type { MenuProps } from '@mui/material'\r\n\r\nexport const mediaWidgetClasses = {\r\n root: 'DinoMediaWidget-root',\r\n header: 'DinoMediaWidget-header',\r\n headerText: 'DinoMediaWidget-headerText',\r\n footer: 'DinoMediaWidget-footer',\r\n item: 'DinoMediaWidget-item',\r\n itemTitle: 'DinoMediaWidget-itemTitle',\r\n itemChild: 'DinoMediaWidget-itemChild',\r\n itemChildTitle: 'DinoMediaWidget-itemChildTitle'\r\n}\r\n\r\nexport const
|
|
1
|
+
{"version":3,"file":"styled.js","sources":["../../../src/media-right/media-widget/styled.tsx"],"sourcesContent":["import { Box, Menu, styled } from '@mui/material'\r\nimport type { ComponentType } from 'react'\r\nimport type { BoxProps, MenuProps } from '@mui/material'\r\n\r\nexport const mediaWidgetClasses = {\r\n root: 'DinoMediaWidget-root',\r\n header: 'DinoMediaWidget-header',\r\n headerText: 'DinoMediaWidget-headerText',\r\n footer: 'DinoMediaWidget-footer',\r\n content: 'DinoMediaWidget-content',\r\n item: 'DinoMediaWidget-item',\r\n itemTitle: 'DinoMediaWidget-itemTitle',\r\n itemChild: 'DinoMediaWidget-itemChild',\r\n itemChildTitle: 'DinoMediaWidget-itemChildTitle'\r\n}\r\n\r\nexport const MenuContentStyled: ComponentType<BoxProps> = styled(Box)(({ theme }) => ({\r\n display: 'flex',\r\n flexDirection: 'column',\r\n overflowY: 'auto',\r\n maxHeight: '60vh',\r\n '&::-webkit-scrollbar': { width: '6px', background: 'transparent' },\r\n '&::-webkit-scrollbar-thumb': { background: '#e0e0e0', borderRadius: '8px' },\r\n '&::-webkit-scrollbar-thumb:hover': { background: '#bdbdbd' },\r\n '&': { scrollbarWidth: 'thin', scrollbarColor: '#e0e0e0 transparent' },\r\n [`.${mediaWidgetClasses.header}`]: {\r\n padding: '12px 16px',\r\n position: 'sticky',\r\n top: 0,\r\n backgroundColor: theme.palette.background.paper,\r\n zIndex: 2,\r\n boxShadow: '0px 0.5px 5px 0px rgba(0, 0, 0, 0.15)',\r\n alignItems: 'flex-start'\r\n },\r\n [`.${mediaWidgetClasses.headerText}`]: { flex: 1, color: theme.palette.text.primary },\r\n [`.${mediaWidgetClasses.footer}`]: {\r\n position: 'sticky',\r\n bottom: 0,\r\n backgroundColor: theme.palette.background.paper,\r\n zIndex: 1,\r\n boxShadow: '0px 0.5px 5px 0px rgba(0, 0, 0, 0.15)',\r\n justifyContent: 'end',\r\n flexDirection: 'row',\r\n padding: '6px 12px'\r\n },\r\n [`.${mediaWidgetClasses.item}`]: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n flex: 1,\r\n gap: 1,\r\n minWidth: 0\r\n },\r\n [`.${mediaWidgetClasses.itemTitle}`]: {\r\n fontWeight: 600,\r\n flex: 1,\r\n minWidth: 0,\r\n color: theme.palette.text.primary,\r\n marginLeft: theme.spacing(1)\r\n },\r\n [`.${mediaWidgetClasses.itemChildTitle}`]: { color: theme.palette.text.primary },\r\n // Mobile specific styles\r\n '&.mobile': {\r\n height: '100%',\r\n maxHeight: 'none',\r\n [`.${mediaWidgetClasses.content}`]: { flex: 1 }\r\n }\r\n}))\r\n\r\nexport const MenuStyled: ComponentType<MenuProps> = styled(Menu)(({ theme }) => ({\r\n '--color-bg': theme.palette.background.paper,\r\n '--color-text': theme.palette.text.primary,\r\n\r\n marginTop: '45px',\r\n '>.MuiPaper-root': {\r\n position: 'relative',\r\n overflow: 'visible',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n backgroundColor: 'var(--color-bg, #000000)',\r\n borderRadius: theme.shape.borderRadius,\r\n minWidth: '280px',\r\n width: '90vw',\r\n maxWidth: '450px',\r\n boxShadow: `0 1px 1px rgba(0, 0, 0, 0.05), 0 2px 2px rgba(0, 0, 0, 0.2), 0 4px 4px rgba(0, 0, 0, 0.15), 0 8px 8px rgba(0, 0, 0, 0.05)`,\r\n animation: 'fadeInDown 0.3s ease-out',\r\n marginTop: '8px',\r\n\r\n '&::before': {\r\n content: '\"\"',\r\n position: 'absolute',\r\n backgroundColor: theme.palette.divider,\r\n width: '10px',\r\n height: '10px',\r\n top: '-4px',\r\n right: theme.spacing(1),\r\n transform: 'translateX(-50%) rotate(45deg)',\r\n zIndex: 0\r\n },\r\n\r\n '@keyframes fadeInDown': {\r\n '0%': { opacity: 0, transform: 'translateY(-10px)' },\r\n '100%': { opacity: 1, transform: 'translateY(0)' }\r\n }\r\n },\r\n '.MuiBackdrop-root': { backgroundColor: 'transparent' },\r\n '.MuiList-root': { padding: 0, height: '100%' }\r\n}))\r\n"],"names":["mediaWidgetClasses","header","headerText","footer","content","item","itemTitle","itemChild","itemChildTitle","MenuContentStyled","styled","Box","_ref","theme","_defineProperty","display","flexDirection","overflowY","maxHeight","width","background","borderRadius","scrollbarWidth","scrollbarColor","concat","padding","position","top","backgroundColor","palette","paper","zIndex","boxShadow","alignItems","flex","color","text","primary","bottom","justifyContent","gap","minWidth","fontWeight","marginLeft","spacing","height","MenuStyled","Menu","_ref3","marginTop","overflow","shape","maxWidth","animation","divider","right","transform","opacity"],"mappings":"uIAIO,IAAMA,EAAqB,CAEhCC,OAAQ,yBACRC,WAAY,6BACZC,OAAQ,yBACRC,QAAS,0BACTC,KAAM,uBACNC,UAAW,4BACXC,UAAW,4BACXC,eAAgB,kCAGLC,EAA6CC,EAAOC,EAAPD,CAAY,SAAAE,GAAA,IAAGC,EAAKD,EAALC,MAAK,OAAAC,EAAAA,EAAAA,EAAAA,EAAAA,EAAAA,EAAAA,EAAA,CAC5EC,QAAS,OACTC,cAAe,SACfC,UAAW,OACXC,UAAW,OACX,uBAAwB,CAAEC,MAAO,MAAOC,WAAY,eACpD,6BAA8B,CAAEA,WAAY,UAAWC,aAAc,OACrE,mCAAoC,CAAED,WAAY,WAClD,IAAK,CAAEE,eAAgB,OAAQC,eAAgB,wBAAuB,IAAAC,OACjExB,EAAmBC,QAAW,CACjCwB,QAAS,YACTC,SAAU,SACVC,IAAK,EACLC,gBAAiBf,EAAMgB,QAAQT,WAAWU,MAC1CC,OAAQ,EACRC,UAAW,wCACXC,WAAY,mBACbT,OACIxB,EAAmBE,YAAe,CAAEgC,KAAM,EAAGC,MAAOtB,EAAMgB,QAAQO,KAAKC,cAASb,OAChFxB,EAAmBG,QAAW,CACjCuB,SAAU,SACVY,OAAQ,EACRV,gBAAiBf,EAAMgB,QAAQT,WAAWU,MAC1CC,OAAQ,EACRC,UAAW,wCACXO,eAAgB,MAChBvB,cAAe,MACfS,QAAS,iBACVD,OACIxB,EAAmBK,MAAS,CAC/BU,QAAS,OACTkB,WAAY,SACZC,KAAM,EACNM,IAAK,EACLC,SAAU,QACXjB,OACIxB,EAAmBM,WAAc,CACpCoC,WAAY,IACZR,KAAM,EACNO,SAAU,EACVN,MAAOtB,EAAMgB,QAAQO,KAAKC,QAC1BM,WAAY9B,EAAM+B,QAAQ,SAC3BpB,OACIxB,EAAmBQ,gBAAmB,CAAE2B,MAAOtB,EAAMgB,QAAQO,KAAKC,UAEvE,WAAUvB,EAAA,CACR+B,OAAQ,OACR3B,UAAW,QAAM,IAAAM,OACZxB,EAAmBI,SAAY,CAAE8B,KAAM,IAAG,GAItCY,EAAuCpC,EAAOqC,EAAPrC,CAAa,SAAAsC,GAAA,IAAGnC,EAAKmC,EAALnC,MAAK,MAAQ,CAC/E,aAAcA,EAAMgB,QAAQT,WAAWU,MACvC,eAAgBjB,EAAMgB,QAAQO,KAAKC,QAEnCY,UAAW,OACX,kBAAmB,CACjBvB,SAAU,WACVwB,SAAU,UACVnC,QAAS,OACTC,cAAe,SACfY,gBAAiB,2BACjBP,aAAcR,EAAMsC,MAAM9B,aAC1BoB,SAAU,QACVtB,MAAO,OACPiC,SAAU,QACVpB,UAAsI,4HACtIqB,UAAW,2BACXJ,UAAW,MAEX,YAAa,CACX7C,QAAS,KACTsB,SAAU,WACVE,gBAAiBf,EAAMgB,QAAQyB,QAC/BnC,MAAO,OACP0B,OAAQ,OACRlB,IAAK,OACL4B,MAAO1C,EAAM+B,QAAQ,GACrBY,UAAW,iCACXzB,OAAQ,GAGV,wBAAyB,CACvB,KAAM,CAAE0B,QAAS,EAAGD,UAAW,qBAC/B,OAAQ,CAAEC,QAAS,EAAGD,UAAW,mBAGrC,oBAAqB,CAAE5B,gBAAiB,eACxC,gBAAiB,CAAEH,QAAS,EAAGoB,OAAQ,QACxC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{inherits as e,createClass as
|
|
1
|
+
import{inherits as e,createClass as i,classCallCheck as t,callSuper as r,defineProperty as n}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as o,jsx as a}from"react/jsx-runtime";import{Component as l}from"react";import{Box as c,Typography as s,alpha as m,colors as d,Stack as h,Divider as u,Button as p}from"@mui/material";import f from"@mui/icons-material/DraftsOutlined";import v from"@mui/icons-material/MarkEmailUnreadOutlined";import{formatTimeAgo as g}from"./helpers.js";import{NoDataPanel as x}from"../components/no-data-panel.js";import{NotifyListStyled as N,notifyListClasses as C}from"./styled.js";var b=function(){function b(){var e;t(this,b);for(var i=arguments.length,l=new Array(i),u=0;u<i;u++)l[u]=arguments[u];return e=r(this,b,[].concat(l)),n(e,"renderItem",function(i,t){return o(c,{className:C.item,onClick:function(){return e.onClickHandler(i)},children:[a(h,{px:1,children:i.IsRead?a(f,{color:"disabled"}):a(v,{color:"success"})}),o(c,{flex:1,children:[a(s,{variant:"subtitle1",component:"h6",className:C.itemTitle,children:i.Title}),a(s,{variant:"caption",className:C.itemSubTitle,children:i.SubTitle}),a(h,{direction:"row",spacing:1,justifyContent:"flex-end",children:a(s,{variant:"caption",color:m(d.common.white,.5),children:g(i.DateCreated)})})]})]},t.toString())}),n(e,"onClickHandler",function(i){e.props.onClick&&e.props.onClick(i)}),n(e,"getDescription",function(e){return 0===e?"No new notifications":1===e?"You have 1 unread notification":"You have ".concat(e," unread notifications")}),n(e,"getItems",function(i){return e.props.data.filter(function(e){return void 0===i||e.IsRead===i})}),e}return e(b,l),i(b,[{key:"render",value:function(){var e=this.getItems(!0),i=this.getItems(!1);return o(N,{className:"".concat(C.root).concat(this.props.isMobile?" mobile":""),children:[a("div",{className:C.header,children:o(c,{flex:1,children:[a(s,{variant:"h6",children:"Notifications"}),a(s,{variant:"body2",color:m(d.common.white,.6),children:this.getDescription(i.length)})]})}),o(h,{className:C.items,children:[i.length>0&&o("div",{children:[o("div",{className:C.groupTitle,children:[a(s,{variant:"caption",children:"Unseen"}),a(u,{sx:{borderColor:m(d.common.white,.1)}})]}),i.map(this.renderItem)]}),e.length>0&&o("div",{children:[o("div",{className:C.groupTitle,children:[a(s,{variant:"caption",children:"Seen"}),a(u,{sx:{borderColor:m(d.common.white,.1)}})]}),e.map(this.renderItem)]}),i.length+e.length===0&&a(x,{title:"No Notifications",subTitle:"You're all caught up!",sx:{minWidth:250,flex:1}})]}),a("div",{className:C.footer,children:a(p,{variant:"text",sx:{flex:"0 0 auto",width:"auto"},children:a(s,{variant:"caption",sx:{textTransform:"none",fontWeight:600},children:"View All"})})})]})}}])}();export{b as default};
|
|
2
2
|
//# sourceMappingURL=notify-list.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"notify-list.js","sources":["../../src/notification/notify-list.tsx"],"sourcesContent":["import { Component } from 'react'\r\nimport { alpha, Box, Button, colors, Divider, Stack, Typography } from '@mui/material'\r\nimport DraftsOutlinedIcon from '@mui/icons-material/DraftsOutlined'\r\nimport MarkEmailUnreadOutlinedIcon from '@mui/icons-material/MarkEmailUnreadOutlined'\r\nimport { INotification } from './types'\r\nimport { formatTimeAgo } from './helpers'\r\nimport { NotifyListStyled, notifyListClasses } from './styled'\r\n\r\ninterface INotifyListProps {\r\n data: INotification[]\r\n onClick?: (value: INotification) => void\r\n}\r\n\r\nclass NotifyList extends Component<INotifyListProps> {\r\n render() {\r\n const listReaded = this.getItems(true)\r\n const listUnReaded = this.getItems(false)\r\n return (\r\n <NotifyListStyled className={notifyListClasses.root}>\r\n {/* Render the menu header */}\r\n <div className={notifyListClasses.header}>\r\n <Box flex={1}>\r\n <Typography variant='h6'>Notifications</Typography>\r\n <Typography variant='body2' color={alpha(colors.common.white, 0.6)}>\r\n {this.getDescription(listUnReaded.length)}\r\n </Typography>\r\n </Box>\r\n </div>\r\n {/* <Divider variant='middle' sx={{ borderColor: alpha(colors.common.white, 0.1) }} /> */}\r\n {/* Render sub-menu items */}\r\n <Stack className={notifyListClasses.items}>\r\n {listUnReaded.length > 0 && (\r\n <div className={notifyListClasses.groupTitle}>\r\n
|
|
1
|
+
{"version":3,"file":"notify-list.js","sources":["../../src/notification/notify-list.tsx"],"sourcesContent":["import { Component } from 'react'\r\nimport { alpha, Box, Button, colors, Divider, Stack, Typography } from '@mui/material'\r\nimport DraftsOutlinedIcon from '@mui/icons-material/DraftsOutlined'\r\nimport MarkEmailUnreadOutlinedIcon from '@mui/icons-material/MarkEmailUnreadOutlined'\r\nimport { INotification } from './types'\r\nimport { formatTimeAgo } from './helpers'\r\nimport { NoDataPanel } from '../components/no-data-panel'\r\nimport { NotifyListStyled, notifyListClasses } from './styled'\r\n\r\ninterface INotifyListProps {\r\n data: INotification[]\r\n onClick?: (value: INotification) => void\r\n isMobile?: boolean\r\n}\r\n\r\nclass NotifyList extends Component<INotifyListProps> {\r\n render() {\r\n const listReaded = this.getItems(true)\r\n const listUnReaded = this.getItems(false)\r\n return (\r\n <NotifyListStyled className={`${notifyListClasses.root}${this.props.isMobile ? ' mobile' : ''}`}>\r\n {/* Render the menu header */}\r\n <div className={notifyListClasses.header}>\r\n <Box flex={1}>\r\n <Typography variant='h6'>Notifications</Typography>\r\n <Typography variant='body2' color={alpha(colors.common.white, 0.6)}>\r\n {this.getDescription(listUnReaded.length)}\r\n </Typography>\r\n </Box>\r\n </div>\r\n {/* <Divider variant='middle' sx={{ borderColor: alpha(colors.common.white, 0.1) }} /> */}\r\n {/* Render sub-menu items */}\r\n <Stack className={notifyListClasses.items}>\r\n {listUnReaded.length > 0 && (\r\n <div>\r\n <div className={notifyListClasses.groupTitle}>\r\n <Typography variant='caption'>Unseen</Typography>\r\n <Divider sx={{ borderColor: alpha(colors.common.white, 0.1) }} />\r\n </div>\r\n {listUnReaded.map(this.renderItem)}\r\n </div>\r\n )}\r\n {listReaded.length > 0 && (\r\n <div>\r\n <div className={notifyListClasses.groupTitle}>\r\n <Typography variant='caption'>Seen</Typography>\r\n <Divider sx={{ borderColor: alpha(colors.common.white, 0.1) }} />\r\n </div>\r\n {listReaded.map(this.renderItem)}\r\n </div>\r\n )}\r\n {listUnReaded.length + listReaded.length === 0 && (\r\n <NoDataPanel title='No Notifications' subTitle=\"You're all caught up!\" sx={{ minWidth: 250, flex: 1 }} />\r\n )}\r\n </Stack>\r\n <div className={notifyListClasses.footer}>\r\n <Button variant='text' sx={{ flex: '0 0 auto', width: 'auto' }}>\r\n <Typography variant='caption' sx={{ textTransform: 'none', fontWeight: 600 }}>\r\n View All\r\n </Typography>\r\n </Button>\r\n </div>\r\n </NotifyListStyled>\r\n )\r\n }\r\n\r\n renderItem = (item: INotification, index: number) => {\r\n // Render each item in the menu\r\n return (\r\n <Box key={index.toString()} className={notifyListClasses.item} onClick={() => this.onClickHandler(item)}>\r\n <Stack px={1}>{item.IsRead ? <DraftsOutlinedIcon color='disabled' /> : <MarkEmailUnreadOutlinedIcon color='success' />}</Stack>\r\n <Box flex={1}>\r\n <Typography variant='subtitle1' component='h6' className={notifyListClasses.itemTitle}>\r\n {item.Title}\r\n </Typography>\r\n <Typography variant='caption' className={notifyListClasses.itemSubTitle}>\r\n {item.SubTitle}\r\n </Typography>\r\n <Stack direction='row' spacing={1} justifyContent='flex-end'>\r\n <Typography variant='caption' color={alpha(colors.common.white, 0.5)}>\r\n {formatTimeAgo(item.DateCreated)}\r\n </Typography>\r\n </Stack>\r\n </Box>\r\n </Box>\r\n )\r\n }\r\n\r\n onClickHandler = (notification: INotification) => {\r\n if (!this.props.onClick) return\r\n // Call the onClick handler if provided\r\n this.props.onClick(notification)\r\n }\r\n\r\n getDescription = (count: number) => {\r\n if (count === 0) return 'No new notifications'\r\n if (count === 1) return 'You have 1 unread notification'\r\n return `You have ${count} unread notifications`\r\n }\r\n\r\n getItems = (isReaded?: boolean) => {\r\n return this.props.data.filter((item) => (isReaded !== undefined ? item.IsRead === isReaded : true))\r\n }\r\n}\r\nexport default NotifyList\r\n"],"names":["NotifyList","_this","_classCallCheck","_len","arguments","length","args","Array","_key","_callSuper","this","concat","_defineProperty","item","index","_jsxs","Box","className","notifyListClasses","onClick","onClickHandler","children","_jsx","Stack","px","IsRead","DraftsOutlinedIcon","color","MarkEmailUnreadOutlinedIcon","flex","Typography","variant","component","itemTitle","Title","itemSubTitle","SubTitle","direction","spacing","justifyContent","alpha","colors","common","white","formatTimeAgo","DateCreated","toString","notification","props","count","isReaded","data","filter","undefined","_inherits","Component","_createClass","key","value","listReaded","getItems","listUnReaded","NotifyListStyled","root","isMobile","header","getDescription","items","groupTitle","Divider","sx","borderColor","map","renderItem","NoDataPanel","title","subTitle","minWidth","footer","Button","width","textTransform","fontWeight"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{defineProperty as t}from"../_virtual/_rollupPluginBabelHelpers.js";import{styled as
|
|
1
|
+
import{defineProperty as t}from"../_virtual/_rollupPluginBabelHelpers.js";import{styled as e,Menu as o,Box as r,alpha as i}from"@mui/material";var a=e(o)(function(t){var e=t.theme;return{"--color-bg":"#323234",marginTop:"45px",".MuiPaper-root":{overflow:"visible",backgroundColor:"var(--color-bg, #000000)",borderRadius:4,minWidth:"280px",maxWidth:"550px",boxShadow:"0 1px 1px rgba(0, 0, 0, 0.05), 0 2px 2px rgba(0, 0, 0, 0.2), 0 4px 4px rgba(0, 0, 0, 0.15), 0 8px 8px rgba(0, 0, 0, 0.05)",animation:"dinoFadeInDown 0.3s ease-out",marginTop:"8px",color:e.palette.common.white,display:"flex","@keyframes dinoFadeInDown":{"0%":{opacity:0,transform:"translateY(-10px)"},"100%":{opacity:1,transform:"translateY(0)"}},"&::before":{content:'""',position:"absolute",backgroundColor:"var(--color-bg, #000000)",width:"10px",height:"10px",top:"-4px",right:e.spacing(1),transform:"translateX(-50%) rotate(45deg)",zIndex:0}},".MuiBackdrop-root":{backgroundColor:"transparent"},".MuiList-root":{padding:0,backgroundColor:"var(--color-bg, #000000)",borderRadius:e.shape.borderRadius,width:"100%"}}}),n={root:"NotifyList-root",header:"NotifyList-header",footer:"NotifyList-footer",items:"NotifyList-items",item:"NotifyList-item",readed:"NotifyList-readed",itemIcon:"NotifyList-itemIcon",itemTitle:"NotifyList-itemText",itemSubTitle:"NotifyList-itemSubTitle",groupTitle:"NotifyList-groupTitle"},l=function(t,e){return"".concat((null==e?void 0:e.prefix)||"",".").concat(n[t]).concat((null==e?void 0:e.suffix)||"")},s=e(r)(function(e){var o=e.theme;return t(t(t(t(t(t(t({display:"flex",flexDirection:"column",height:"100%"},l("header"),{display:"flex",alignItems:"flex-end",padding:o.spacing(1.5),margin:o.spacing(0),backgroundColor:i(o.palette.common.white,.05)}),l("footer"),{backgroundColor:i(o.palette.common.white,.05),padding:o.spacing(1.5),display:"flex",justifyContent:"flex-end",alignItems:"center"}),l("groupTitle"),{padding:o.spacing(.5,1),display:"flex",alignItems:"center",gap:o.spacing(1),".MuiTypography-root":{fontWeight:600},".MuiDivider-root":{flex:1}}),l("items"),{overflowY:"auto",padding:o.spacing(.5),flex:1,"&::-webkit-scrollbar":{width:"6px"},"&::-webkit-scrollbar-track":{background:"transparent",borderRadius:"3px"},"&::-webkit-scrollbar-thumb":{background:i(o.palette.common.white,.2),borderRadius:"3px",transition:"background 0.2s ease"},"&::-webkit-scrollbar-thumb:hover":{background:i(o.palette.common.white,.3)},"&:hover::-webkit-scrollbar-track":{background:i(o.palette.common.white,.05)},scrollbarWidth:"thin",scrollbarColor:"".concat(i(o.palette.common.white,.2)," transparent")}),l("itemTitle"),{transition:"color 0.2s ease",lineHeight:"1.35",marginBottom:o.spacing(.5),display:"-webkit-box",WebkitLineClamp:2,WebkitBoxOrient:"vertical",overflow:"hidden",textOverflow:"ellipsis"}),l("itemSubTitle"),{color:"var(--text-color-secondary, ".concat(i(o.palette.common.white,.5),")"),transition:"color 0.2s ease",display:"-webkit-box",WebkitLineClamp:2,WebkitBoxOrient:"vertical",overflow:"hidden",textOverflow:"ellipsis",marginBottom:o.spacing(.5)}),l("item"),t(t({display:"flex",alignItems:"center",gap:o.spacing(1.5),padding:o.spacing(1,1.5),cursor:"pointer",borderRadius:o.shape.borderRadius,transition:"all 0.2s ease",border:"1px dashed transparent",borderBottomColor:i(o.palette.common.white,.1),"&:last-of-type":{borderBottomColor:"transparent"}},l("readed",{prefix:"&"}),{backgroundColor:"var(--bg-nav-item-readed, rgba(255, 255, 255, 0.05))",color:o.palette.text.secondary}),"&:hover",{"--text-color-secondary":i(o.palette.common.white,.8),borderColor:i(o.palette.common.white,.1),backgroundColor:"var(--bg-nav-item-hover, rgba(255, 255, 255, 0.1))"}))}),c={root:"NotifyList-root",header:"NotifyList-header",footer:"NotifyList-footer",title:"NotifyList-title",closeButton:"NotifyList-closeButton",footerActions:"NotifyList-footerActions"},d=function(t,e){return"".concat("",".").concat(c[t]).concat("")},p=e(r)(function(e){var o=e.theme;return t(t(t(t(t(t({backgroundColor:"#fff",width:"calc(100vw - 48px)",margin:"0 auto",overflowX:"hidden",overflowY:"auto",minHeight:"200px",display:"flex",flexDirection:"column",alignItems:"center",borderRadius:o.shape.borderRadius},o.breakpoints.up("md"),{width:o.breakpoints.values.md}),d("header"),{display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%",padding:o.spacing(.75,1.5),margin:o.spacing(0)}),d("footer"),{padding:o.spacing(.75,1.5),display:"flex",alignItems:"center",width:"100%"}),d("footerActions"),{display:"flex",gap:o.spacing(1),alignItems:"center",justifyContent:"flex-end",flex:1}),d("closeButton"),{color:o.palette.text.secondary,width:"auto","&:hover":{color:o.palette.error.main,backgroundColor:i(o.palette.error.main,.1)}}),".".concat(c.title),{fontWeight:500,color:o.palette.grey[900]})});export{a as MenuStyled,p as NotifyDetailStyled,s as NotifyListStyled,c as notifyDetailClasses,n as notifyListClasses};
|
|
2
2
|
//# sourceMappingURL=styled.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styled.js","sources":["../../src/notification/styled.tsx"],"sourcesContent":["import { alpha, Box, Menu, styled } from '@mui/material'\r\nimport type { ComponentType } from 'react'\r\nimport type { BoxProps, MenuProps } from '@mui/material'\r\n\r\nexport const MenuStyled: ComponentType<MenuProps> = styled(Menu)(({ theme }) => ({\r\n '--color-bg': '#323234',\r\n marginTop: '45px',\r\n '.MuiPaper-root': {\r\n overflow: 'visible',\r\n backgroundColor: 'var(--color-bg, #000000)',\r\n borderRadius: 4,\r\n minWidth: '280px',\r\n maxWidth: '550px',\r\n boxShadow: `0 1px 1px rgba(0, 0, 0, 0.05), 0 2px 2px rgba(0, 0, 0, 0.2), 0 4px 4px rgba(0, 0, 0, 0.15), 0 8px 8px rgba(0, 0, 0, 0.05)`,\r\n animation: 'dinoFadeInDown 0.3s ease-out',\r\n marginTop: '8px',\r\n color: theme.palette.common.white,\r\n display: 'flex',\r\n\r\n '@keyframes dinoFadeInDown': {\r\n '0%': { opacity: 0, transform: 'translateY(-10px)' },\r\n '100%': { opacity: 1, transform: 'translateY(0)' }\r\n },\r\n\r\n '&::before': {\r\n content: '\"\"',\r\n position: 'absolute',\r\n backgroundColor: 'var(--color-bg, #000000)',\r\n width: '10px',\r\n height: '10px',\r\n top: '-4px',\r\n right: theme.spacing(1),\r\n transform: 'translateX(-50%) rotate(45deg)',\r\n zIndex: 0\r\n }\r\n },\r\n '.MuiBackdrop-root': { backgroundColor: 'transparent' },\r\n '.MuiList-root': { padding: 0, backgroundColor: 'var(--color-bg, #000000)', borderRadius: theme.shape.borderRadius }\r\n}))\r\n\r\nexport const notifyListClasses = {\r\n root: 'NotifyList-root',\r\n header: 'NotifyList-header',\r\n footer: 'NotifyList-footer',\r\n items: 'NotifyList-items',\r\n item: 'NotifyList-item',\r\n readed: 'NotifyList-readed',\r\n itemIcon: 'NotifyList-itemIcon',\r\n itemTitle: 'NotifyList-itemText',\r\n itemSubTitle: 'NotifyList-itemSubTitle',\r\n groupTitle: 'NotifyList-groupTitle'\r\n}\r\n\r\nconst getNotifyListClasses = (key: keyof typeof notifyListClasses, options?: { prefix?: string; suffix?: string }) => {\r\n return `${options?.prefix || ''}.${notifyListClasses[key]}${options?.suffix || ''}`\r\n}\r\n\r\nexport const NotifyListStyled: ComponentType<BoxProps> = styled(Box)(({ theme }) => ({\r\n display: 'flex',\r\n flexDirection: 'column',\r\n height: '100%',\r\n [getNotifyListClasses('header')]: {\r\n display: 'flex',\r\n alignItems: 'flex-end',\r\n padding: theme.spacing(1.5),\r\n margin: theme.spacing(0),\r\n backgroundColor: alpha(theme.palette.common.white, 0.05)\r\n },\r\n [getNotifyListClasses('footer')]: {\r\n backgroundColor: alpha(theme.palette.common.white, 0.05),\r\n padding: theme.spacing(1.5),\r\n display: 'flex',\r\n justifyContent: 'flex-end',\r\n alignItems: 'center'\r\n },\r\n [getNotifyListClasses('groupTitle')]: {\r\n padding: theme.spacing(0.5, 1),\r\n display: 'flex',\r\n alignItems: 'center',\r\n gap: theme.spacing(1),\r\n '.MuiTypography-root': { fontWeight: 600 },\r\n '.MuiDivider-root': { flex: 1 }\r\n },\r\n [getNotifyListClasses('items')]: {\r\n overflowY: 'auto',\r\n padding: theme.spacing(0.5),\r\n '&::-webkit-scrollbar': {\r\n width: '6px'\r\n },\r\n '&::-webkit-scrollbar-track': {\r\n background: 'transparent',\r\n borderRadius: '3px'\r\n },\r\n '&::-webkit-scrollbar-thumb': {\r\n background: alpha(theme.palette.common.white, 0.2),\r\n borderRadius: '3px',\r\n transition: 'background 0.2s ease'\r\n },\r\n '&::-webkit-scrollbar-thumb:hover': {\r\n background: alpha(theme.palette.common.white, 0.3)\r\n },\r\n '&:hover::-webkit-scrollbar-track': {\r\n background: alpha(theme.palette.common.white, 0.05)\r\n },\r\n scrollbarWidth: 'thin',\r\n scrollbarColor: `${alpha(theme.palette.common.white, 0.2)} transparent`\r\n },\r\n [getNotifyListClasses('itemTitle')]: {\r\n transition: 'color 0.2s ease',\r\n lineHeight: '1.35',\r\n marginBottom: theme.spacing(0.5),\r\n display: '-webkit-box',\r\n WebkitLineClamp: 2,\r\n WebkitBoxOrient: 'vertical',\r\n overflow: 'hidden',\r\n textOverflow: 'ellipsis'\r\n },\r\n [getNotifyListClasses('itemSubTitle')]: {\r\n color: `var(--text-color-secondary, ${alpha(theme.palette.common.white, 0.5)})`,\r\n transition: 'color 0.2s ease',\r\n display: '-webkit-box',\r\n WebkitLineClamp: 2,\r\n WebkitBoxOrient: 'vertical',\r\n overflow: 'hidden',\r\n textOverflow: 'ellipsis',\r\n marginBottom: theme.spacing(0.5)\r\n },\r\n [getNotifyListClasses('item')]: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n gap: theme.spacing(1.5),\r\n padding: theme.spacing(1, 1.5),\r\n cursor: 'pointer',\r\n borderRadius: theme.shape.borderRadius,\r\n transition: 'all 0.2s ease',\r\n border: `1px dashed transparent`,\r\n borderBottomColor: alpha(theme.palette.common.white, 0.1),\r\n '&:last-of-type': {\r\n borderBottomColor: 'transparent'\r\n },\r\n [getNotifyListClasses('readed', { prefix: '&' })]: {\r\n backgroundColor: 'var(--bg-nav-item-readed, rgba(255, 255, 255, 0.05))',\r\n color: theme.palette.text.secondary\r\n },\r\n '&:hover': {\r\n '--text-color-secondary': alpha(theme.palette.common.white, 0.8),\r\n borderColor: alpha(theme.palette.common.white, 0.1),\r\n backgroundColor: 'var(--bg-nav-item-hover, rgba(255, 255, 255, 0.1))'\r\n }\r\n }\r\n}))\r\n\r\nexport const notifyDetailClasses = {\r\n root: 'NotifyList-root',\r\n header: 'NotifyList-header',\r\n footer: 'NotifyList-footer',\r\n title: 'NotifyList-title',\r\n closeButton: 'NotifyList-closeButton',\r\n footerActions: 'NotifyList-footerActions'\r\n}\r\n\r\nconst getNotifyDetailClasses = (key: keyof typeof notifyDetailClasses, options?: { prefix?: string; suffix?: string }) => {\r\n return `${options?.prefix || ''}.${notifyDetailClasses[key]}${options?.suffix || ''}`\r\n}\r\n\r\nexport const NotifyDetailStyled: ComponentType<BoxProps> = styled(Box)(({ theme }) => ({\r\n backgroundColor: '#fff',\r\n width: 'calc(100vw - 48px)',\r\n margin: '0 auto',\r\n overflowX: 'hidden',\r\n overflowY: 'auto',\r\n minHeight: '200px',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n borderRadius: theme.shape.borderRadius,\r\n [theme.breakpoints.up('md')]: { width: theme.breakpoints.values.md },\r\n\r\n [getNotifyDetailClasses('header')]: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'space-between',\r\n width: '100%',\r\n padding: theme.spacing(0.75, 1.5),\r\n margin: theme.spacing(0)\r\n },\r\n [getNotifyDetailClasses('footer')]: {\r\n padding: theme.spacing(0.75, 1.5),\r\n display: 'flex',\r\n alignItems: 'center',\r\n width: '100%'\r\n },\r\n [getNotifyDetailClasses('footerActions')]: {\r\n display: 'flex',\r\n gap: theme.spacing(1),\r\n alignItems: 'center',\r\n justifyContent: 'flex-end',\r\n flex: 1\r\n },\r\n [getNotifyDetailClasses('closeButton')]: {\r\n color: theme.palette.text.secondary,\r\n width: 'auto',\r\n '&:hover': {\r\n color: theme.palette.error.main,\r\n backgroundColor: alpha(theme.palette.error.main, 0.1)\r\n }\r\n },\r\n [`.${notifyDetailClasses.title}`]: {\r\n fontWeight: 500,\r\n color: theme.palette.grey[900]\r\n }\r\n}))\r\n"],"names":["MenuStyled","styled","Menu","_ref","theme","marginTop","overflow","backgroundColor","borderRadius","minWidth","maxWidth","boxShadow","animation","color","palette","common","white","display","opacity","transform","content","position","width","height","top","right","spacing","zIndex","padding","shape","notifyListClasses","root","header","footer","items","item","readed","itemIcon","itemTitle","itemSubTitle","groupTitle","getNotifyListClasses","key","options","concat","prefix","suffix","NotifyListStyled","Box","_ref2","_defineProperty","flexDirection","alignItems","margin","alpha","justifyContent","gap","fontWeight","flex","overflowY","background","transition","scrollbarWidth","scrollbarColor","lineHeight","marginBottom","WebkitLineClamp","WebkitBoxOrient","textOverflow","cursor","border","borderBottomColor","text","secondary","borderColor","notifyDetailClasses","title","closeButton","footerActions","getNotifyDetailClasses","NotifyDetailStyled","_ref4","overflowX","minHeight","breakpoints","up","values","md","error","main","grey"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"styled.js","sources":["../../src/notification/styled.tsx"],"sourcesContent":["import { alpha, Box, Menu, styled } from '@mui/material'\r\nimport type { ComponentType } from 'react'\r\nimport type { BoxProps, MenuProps } from '@mui/material'\r\n\r\nexport const MenuStyled: ComponentType<MenuProps> = styled(Menu)(({ theme }) => ({\r\n '--color-bg': '#323234',\r\n marginTop: '45px',\r\n '.MuiPaper-root': {\r\n overflow: 'visible',\r\n backgroundColor: 'var(--color-bg, #000000)',\r\n borderRadius: 4,\r\n minWidth: '280px',\r\n maxWidth: '550px',\r\n boxShadow: `0 1px 1px rgba(0, 0, 0, 0.05), 0 2px 2px rgba(0, 0, 0, 0.2), 0 4px 4px rgba(0, 0, 0, 0.15), 0 8px 8px rgba(0, 0, 0, 0.05)`,\r\n animation: 'dinoFadeInDown 0.3s ease-out',\r\n marginTop: '8px',\r\n color: theme.palette.common.white,\r\n display: 'flex',\r\n\r\n '@keyframes dinoFadeInDown': {\r\n '0%': { opacity: 0, transform: 'translateY(-10px)' },\r\n '100%': { opacity: 1, transform: 'translateY(0)' }\r\n },\r\n\r\n '&::before': {\r\n content: '\"\"',\r\n position: 'absolute',\r\n backgroundColor: 'var(--color-bg, #000000)',\r\n width: '10px',\r\n height: '10px',\r\n top: '-4px',\r\n right: theme.spacing(1),\r\n transform: 'translateX(-50%) rotate(45deg)',\r\n zIndex: 0\r\n }\r\n },\r\n '.MuiBackdrop-root': { backgroundColor: 'transparent' },\r\n '.MuiList-root': {\r\n padding: 0,\r\n backgroundColor: 'var(--color-bg, #000000)',\r\n borderRadius: theme.shape.borderRadius,\r\n width: '100%'\r\n }\r\n}))\r\n\r\nexport const notifyListClasses = {\r\n root: 'NotifyList-root',\r\n header: 'NotifyList-header',\r\n footer: 'NotifyList-footer',\r\n items: 'NotifyList-items',\r\n item: 'NotifyList-item',\r\n readed: 'NotifyList-readed',\r\n itemIcon: 'NotifyList-itemIcon',\r\n itemTitle: 'NotifyList-itemText',\r\n itemSubTitle: 'NotifyList-itemSubTitle',\r\n groupTitle: 'NotifyList-groupTitle'\r\n}\r\n\r\nconst getNotifyListClasses = (key: keyof typeof notifyListClasses, options?: { prefix?: string; suffix?: string }) => {\r\n return `${options?.prefix || ''}.${notifyListClasses[key]}${options?.suffix || ''}`\r\n}\r\n\r\nexport const NotifyListStyled: ComponentType<BoxProps> = styled(Box)(({ theme }) => ({\r\n display: 'flex',\r\n flexDirection: 'column',\r\n height: '100%',\r\n [getNotifyListClasses('header')]: {\r\n display: 'flex',\r\n alignItems: 'flex-end',\r\n padding: theme.spacing(1.5),\r\n margin: theme.spacing(0),\r\n backgroundColor: alpha(theme.palette.common.white, 0.05)\r\n },\r\n [getNotifyListClasses('footer')]: {\r\n backgroundColor: alpha(theme.palette.common.white, 0.05),\r\n padding: theme.spacing(1.5),\r\n display: 'flex',\r\n justifyContent: 'flex-end',\r\n alignItems: 'center'\r\n },\r\n [getNotifyListClasses('groupTitle')]: {\r\n padding: theme.spacing(0.5, 1),\r\n display: 'flex',\r\n alignItems: 'center',\r\n gap: theme.spacing(1),\r\n '.MuiTypography-root': { fontWeight: 600 },\r\n '.MuiDivider-root': { flex: 1 }\r\n },\r\n [getNotifyListClasses('items')]: {\r\n overflowY: 'auto',\r\n padding: theme.spacing(0.5),\r\n flex: 1,\r\n '&::-webkit-scrollbar': { width: '6px' },\r\n '&::-webkit-scrollbar-track': { background: 'transparent', borderRadius: '3px' },\r\n '&::-webkit-scrollbar-thumb': {\r\n background: alpha(theme.palette.common.white, 0.2),\r\n borderRadius: '3px',\r\n transition: 'background 0.2s ease'\r\n },\r\n '&::-webkit-scrollbar-thumb:hover': {\r\n background: alpha(theme.palette.common.white, 0.3)\r\n },\r\n '&:hover::-webkit-scrollbar-track': {\r\n background: alpha(theme.palette.common.white, 0.05)\r\n },\r\n scrollbarWidth: 'thin',\r\n scrollbarColor: `${alpha(theme.palette.common.white, 0.2)} transparent`\r\n },\r\n [getNotifyListClasses('itemTitle')]: {\r\n transition: 'color 0.2s ease',\r\n lineHeight: '1.35',\r\n marginBottom: theme.spacing(0.5),\r\n display: '-webkit-box',\r\n WebkitLineClamp: 2,\r\n WebkitBoxOrient: 'vertical',\r\n overflow: 'hidden',\r\n textOverflow: 'ellipsis'\r\n },\r\n [getNotifyListClasses('itemSubTitle')]: {\r\n color: `var(--text-color-secondary, ${alpha(theme.palette.common.white, 0.5)})`,\r\n transition: 'color 0.2s ease',\r\n display: '-webkit-box',\r\n WebkitLineClamp: 2,\r\n WebkitBoxOrient: 'vertical',\r\n overflow: 'hidden',\r\n textOverflow: 'ellipsis',\r\n marginBottom: theme.spacing(0.5)\r\n },\r\n [getNotifyListClasses('item')]: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n gap: theme.spacing(1.5),\r\n padding: theme.spacing(1, 1.5),\r\n cursor: 'pointer',\r\n borderRadius: theme.shape.borderRadius,\r\n transition: 'all 0.2s ease',\r\n border: `1px dashed transparent`,\r\n borderBottomColor: alpha(theme.palette.common.white, 0.1),\r\n '&:last-of-type': { borderBottomColor: 'transparent' },\r\n [getNotifyListClasses('readed', { prefix: '&' })]: {\r\n backgroundColor: 'var(--bg-nav-item-readed, rgba(255, 255, 255, 0.05))',\r\n color: theme.palette.text.secondary\r\n },\r\n '&:hover': {\r\n '--text-color-secondary': alpha(theme.palette.common.white, 0.8),\r\n borderColor: alpha(theme.palette.common.white, 0.1),\r\n backgroundColor: 'var(--bg-nav-item-hover, rgba(255, 255, 255, 0.1))'\r\n }\r\n }\r\n}))\r\n\r\nexport const notifyDetailClasses = {\r\n root: 'NotifyList-root',\r\n header: 'NotifyList-header',\r\n footer: 'NotifyList-footer',\r\n title: 'NotifyList-title',\r\n closeButton: 'NotifyList-closeButton',\r\n footerActions: 'NotifyList-footerActions'\r\n}\r\n\r\nconst getNotifyDetailClasses = (key: keyof typeof notifyDetailClasses, options?: { prefix?: string; suffix?: string }) => {\r\n return `${options?.prefix || ''}.${notifyDetailClasses[key]}${options?.suffix || ''}`\r\n}\r\n\r\nexport const NotifyDetailStyled: ComponentType<BoxProps> = styled(Box)(({ theme }) => ({\r\n backgroundColor: '#fff',\r\n width: 'calc(100vw - 48px)',\r\n margin: '0 auto',\r\n overflowX: 'hidden',\r\n overflowY: 'auto',\r\n minHeight: '200px',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n borderRadius: theme.shape.borderRadius,\r\n [theme.breakpoints.up('md')]: { width: theme.breakpoints.values.md },\r\n\r\n [getNotifyDetailClasses('header')]: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'space-between',\r\n width: '100%',\r\n padding: theme.spacing(0.75, 1.5),\r\n margin: theme.spacing(0)\r\n },\r\n [getNotifyDetailClasses('footer')]: {\r\n padding: theme.spacing(0.75, 1.5),\r\n display: 'flex',\r\n alignItems: 'center',\r\n width: '100%'\r\n },\r\n [getNotifyDetailClasses('footerActions')]: {\r\n display: 'flex',\r\n gap: theme.spacing(1),\r\n alignItems: 'center',\r\n justifyContent: 'flex-end',\r\n flex: 1\r\n },\r\n [getNotifyDetailClasses('closeButton')]: {\r\n color: theme.palette.text.secondary,\r\n width: 'auto',\r\n '&:hover': {\r\n color: theme.palette.error.main,\r\n backgroundColor: alpha(theme.palette.error.main, 0.1)\r\n }\r\n },\r\n [`.${notifyDetailClasses.title}`]: {\r\n fontWeight: 500,\r\n color: theme.palette.grey[900]\r\n }\r\n}))\r\n"],"names":["MenuStyled","styled","Menu","_ref","theme","marginTop","overflow","backgroundColor","borderRadius","minWidth","maxWidth","boxShadow","animation","color","palette","common","white","display","opacity","transform","content","position","width","height","top","right","spacing","zIndex","padding","shape","notifyListClasses","root","header","footer","items","item","readed","itemIcon","itemTitle","itemSubTitle","groupTitle","getNotifyListClasses","key","options","concat","prefix","suffix","NotifyListStyled","Box","_ref2","_defineProperty","flexDirection","alignItems","margin","alpha","justifyContent","gap","fontWeight","flex","overflowY","background","transition","scrollbarWidth","scrollbarColor","lineHeight","marginBottom","WebkitLineClamp","WebkitBoxOrient","textOverflow","cursor","border","borderBottomColor","text","secondary","borderColor","notifyDetailClasses","title","closeButton","footerActions","getNotifyDetailClasses","NotifyDetailStyled","_ref4","overflowX","minHeight","breakpoints","up","values","md","error","main","grey"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{slicedToArray as t,toConsumableArray as n,inherits as o,createClass as e,asyncToGenerator as r,objectSpread2 as a,classCallCheck as i,callSuper as l,defineProperty as c,regenerator as s}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsx as u,jsxs as d,Fragment as f}from"react/jsx-runtime";import{useTheme as p,useMediaQuery as h,Badge as m,Drawer as v}from"@mui/material";import{useState as C,useEffect as g,Component as y}from"react";import{GlobalModal as b,mapGlobalModalContext as k}from"dinocollab-core/api-context";import w from"@mui/icons-material/NotificationsNone";import{MenuStyled as D}from"./styled.js";import{IconButtonDark as x}from"../components/buttons.js";import{useFetchData as R}from"./hook.js";import S from"./notify-list.js";import{NotifyDetail as M}from"./notify-detail.js";var T=function(){function t(n){var o;return i(this,t),o=l(this,t,[n]),c(o,"onClickHandler",function(t){var n;o.onClose(),null===(n=o.globalModalContext)||void 0===n||n.show({backdropActivated:!0,renderContent:function(){var n;return u(M,{data:t,fetchDetail:o.props.fetchDetail,onRead:o.onReadHandler,onClose:null===(n=o.globalModalContext)||void 0===n?void 0:n.close})}})}),c(o,"onOpen",function(t){o.setState({anchorEl:t})}),c(o,"onClose",function(){o.setState({anchorEl:null})}),c(o,"onReadHandler",function(){var t=r(s().m(function t(n){var e,r,a;return s().w(function(t){for(;;)switch(t.n){case 0:null===(e=o.globalModalContext)||void 0===e||e.close();try{null===(r=(a=o.props).onRead)||void 0===r||r.call(a,n)}catch(t){console.error("Error updating read state:",t)}case 1:return t.a(2)}},t)}));return function(n){return t.apply(this,arguments)}}()),o.state={anchorEl:null,hydrated:!1},o}return o(t,y),e(t,[{key:"notifications",get:function(){var t;return null!==(t=this.props.data)&&void 0!==t?t:[]}},{key:"newFeatureCount",get:function(){return this.notifications.filter(function(t){return!t.IsRead}).length}},{key:"componentDidMount",value:function(){this.setState({hydrated:!0})}},{key:"componentDidUpdate",value:function(t){var n=this;if(t.data!==this.props.data&&this.props.data.length>0){var o=this.props.data.filter(function(t){return"Popup"===t.AreaType&&!t.IsRead});o.length>0&&setTimeout(function(){var t,e;null===(t=(e=n.props).onAutoShowPopup)||void 0===t||t.call(e,o[0])},1500)}}},{key:"render",value:function(){var t=this,n=Boolean(this.state.anchorEl);return d(f,{children:[u(x,{onClick:function(n){return t.onOpen(n.currentTarget)},children:u(m,{badgeContent:this.state.hydrated?this.newFeatureCount:0,color:"error",children:u(w,{fontSize:"small"})})}),this.props.isMobile?u(v,{anchor:"right",open:n,onClose:this.onClose,disableScrollLock:!0,PaperProps:{sx:{width:"calc(100% - 100px)",maxWidth:360
|
|
1
|
+
import{slicedToArray as t,toConsumableArray as n,inherits as o,createClass as e,asyncToGenerator as r,objectSpread2 as a,classCallCheck as i,callSuper as l,defineProperty as c,regenerator as s}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsx as u,jsxs as d,Fragment as f}from"react/jsx-runtime";import{useTheme as p,useMediaQuery as h,Badge as m,Drawer as v}from"@mui/material";import{useState as C,useEffect as g,Component as y}from"react";import{GlobalModal as b,mapGlobalModalContext as k}from"dinocollab-core/api-context";import w from"@mui/icons-material/NotificationsNone";import{MenuStyled as D}from"./styled.js";import{IconButtonDark as x}from"../components/buttons.js";import{useFetchData as R}from"./hook.js";import S from"./notify-list.js";import{NotifyDetail as M}from"./notify-detail.js";var T=function(){function t(n){var o;return i(this,t),o=l(this,t,[n]),c(o,"onClickHandler",function(t){var n;o.onClose(),null===(n=o.globalModalContext)||void 0===n||n.show({backdropActivated:!0,renderContent:function(){var n;return u(M,{data:t,fetchDetail:o.props.fetchDetail,onRead:o.onReadHandler,onClose:null===(n=o.globalModalContext)||void 0===n?void 0:n.close})}})}),c(o,"onOpen",function(t){o.setState({anchorEl:t})}),c(o,"onClose",function(){o.setState({anchorEl:null})}),c(o,"onReadHandler",function(){var t=r(s().m(function t(n){var e,r,a;return s().w(function(t){for(;;)switch(t.n){case 0:null===(e=o.globalModalContext)||void 0===e||e.close();try{null===(r=(a=o.props).onRead)||void 0===r||r.call(a,n)}catch(t){console.error("Error updating read state:",t)}case 1:return t.a(2)}},t)}));return function(n){return t.apply(this,arguments)}}()),o.state={anchorEl:null,hydrated:!1},o}return o(t,y),e(t,[{key:"notifications",get:function(){var t;return null!==(t=this.props.data)&&void 0!==t?t:[]}},{key:"newFeatureCount",get:function(){return this.notifications.filter(function(t){return!t.IsRead}).length}},{key:"componentDidMount",value:function(){this.setState({hydrated:!0})}},{key:"componentDidUpdate",value:function(t){var n=this;if(t.data!==this.props.data&&this.props.data.length>0){var o=this.props.data.filter(function(t){return"Popup"===t.AreaType&&!t.IsRead});o.length>0&&setTimeout(function(){var t,e;null===(t=(e=n.props).onAutoShowPopup)||void 0===t||t.call(e,o[0])},1500)}}},{key:"render",value:function(){var t=this,n=Boolean(this.state.anchorEl);return d(f,{children:[u(x,{onClick:function(n){return t.onOpen(n.currentTarget)},children:u(m,{badgeContent:this.state.hydrated?this.newFeatureCount:0,color:"error",children:u(w,{fontSize:"small"})})}),this.props.isMobile?u(v,{anchor:"right",open:n,onClose:this.onClose,disableScrollLock:!0,PaperProps:{sx:{width:"calc(100% - 100px)",maxWidth:360}},children:k(function(n){return t.globalModalContext=n,u(S,{data:t.props.data,onClick:t.onClickHandler})})}):u(D,{disableScrollLock:!0,anchorEl:this.state.anchorEl,open:n,onClose:this.onClose,anchorOrigin:{vertical:"top",horizontal:"right"},transformOrigin:{vertical:"top",horizontal:"right"},MenuListProps:{component:"div"},children:k(function(n){return t.globalModalContext=n,u(S,{data:t.props.data,onClick:t.onClickHandler})})})]})}}])}(),j=function(o){var e=R(o.featData),i=C([]),l=t(i,2),c=l[0],d=l[1],f=p(),m=h(f.breakpoints.down("sm"));g(function(){if(e.data){var t=n(e.data).sort(function(t,n){return new Date(n.DateCreated).getTime()-new Date(t.DateCreated).getTime()});d(t)}},[e.data]);var v=function(){var t=r(s().m(function t(n,e,r){var i;return s().w(function(t){for(;;)switch(t.n){case 0:return t.n=1,null===(i=o.onRead)||void 0===i?void 0:i.call(o,n,e,r);case 1:d(function(t){return t.map(function(t){return t.Id===n?a(a({},t),{},{IsRead:!0}):t}).sort(function(t,n){return new Date(n.DateCreated).getTime()-new Date(t.DateCreated).getTime()})});case 2:return t.a(2)}},t)}));return function(n,o,e){return t.apply(this,arguments)}}();return u(b,{children:k(function(t){return u(T,{data:c,loading:e.loading,fetchDetail:o.fetchDetail,onRead:v,onAutoShowPopup:function(n){return function(t,n){n.show({backdropActivated:!0,renderContent:function(){return u(M,{data:t,fetchDetail:o.fetchDetail,onRead:(e=r(s().m(function t(o,e,r){return s().w(function(t){for(;;)switch(t.n){case 0:return n.close(),t.n=1,v(o,e,r);case 1:return t.a(2)}},t)})),function(t,n,o){return e.apply(this,arguments)}),onClose:n.close});var e}})}(n,t)},isMobile:m})})})},P=function(t){var n=function(n){return u(j,a(a({},t),n))};return n.displayName="NotificationWidget",n};export{j as NotificationWidget,P as createNotificationWidget,j as default};
|
|
2
2
|
//# sourceMappingURL=widget.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"widget.js","sources":["../../src/notification/widget.tsx"],"sourcesContent":["import { Badge, Drawer, useMediaQuery, useTheme } from '@mui/material'\r\nimport { Component, FC, useEffect, useState } from 'react'\r\nimport { GlobalModal, IGlobalModalContext, mapGlobalModalContext } from 'dinocollab-core/api-context'\r\nimport NotificationsNoneIcon from '@mui/icons-material/NotificationsNone'\r\nimport { MenuStyled } from './styled'\r\nimport { IconButtonDark } from '../components/buttons'\r\nimport { FetchDataFunction, useFetchData } from './hook'\r\nimport { INotification, ReadFunction, FetchDetailFunction, INotificationPropsDef } from './types'\r\nimport NotifyList from './notify-list'\r\nimport NotifyDetail from './notify-detail'\r\n\r\ninterface INotificationProps extends INotificationPropsDef {\r\n loading?: boolean\r\n data: INotification[]\r\n fetchDetail?: FetchDetailFunction\r\n onAutoShowPopup?: (notification: INotification) => void\r\n isMobile?: boolean\r\n}\r\n\r\ninterface INotificationState {\r\n anchorEl: HTMLElement | null\r\n hydrated: boolean\r\n}\r\nclass NotificationContent extends Component<INotificationProps, INotificationState> {\r\n globalModalContext?: IGlobalModalContext\r\n constructor(props: INotificationProps) {\r\n super(props)\r\n this.state = { anchorEl: null, hydrated: false }\r\n }\r\n\r\n get notifications() {\r\n return this.props.data ?? []\r\n }\r\n\r\n get newFeatureCount() {\r\n return this.notifications.filter((n) => !n.IsRead).length\r\n }\r\n\r\n componentDidMount() {\r\n // When mounted on the client, set hydrated = true\r\n this.setState({ hydrated: true })\r\n }\r\n\r\n componentDidUpdate(prevProps: INotificationProps) {\r\n // Auto show popup notifications\r\n if (prevProps.data !== this.props.data && this.props.data.length > 0) {\r\n const popupNotifications = this.props.data.filter((n) => n.AreaType === 'Popup' && !n.IsRead)\r\n if (popupNotifications.length > 0) {\r\n // Delay to improve UX\r\n setTimeout(() => {\r\n this.props.onAutoShowPopup?.(popupNotifications[0])\r\n }, 1500)\r\n }\r\n }\r\n }\r\n\r\n render() {\r\n const isOpen = Boolean(this.state.anchorEl)\r\n\r\n return (\r\n <>\r\n <IconButtonDark onClick={(e) => this.onOpen(e.currentTarget)}>\r\n <Badge badgeContent={this.state.hydrated ? this.newFeatureCount : 0} color='error'>\r\n <NotificationsNoneIcon fontSize='small' />\r\n </Badge>\r\n </IconButtonDark>\r\n\r\n {this.props.isMobile ? (\r\n <Drawer\r\n anchor='right'\r\n open={isOpen}\r\n onClose={this.onClose}\r\n disableScrollLock\r\n PaperProps={{ sx: { width: 'calc(100% - 100px)', maxWidth: 360, pt: 2 } }}\r\n >\r\n {mapGlobalModalContext((context: IGlobalModalContext) => {\r\n this.globalModalContext = context\r\n return <NotifyList data={this.props.data} onClick={this.onClickHandler} />\r\n })}\r\n </Drawer>\r\n ) : (\r\n <MenuStyled\r\n disableScrollLock\r\n anchorEl={this.state.anchorEl}\r\n open={isOpen}\r\n onClose={this.onClose}\r\n anchorOrigin={{ vertical: 'top', horizontal: 'right' }}\r\n transformOrigin={{ vertical: 'top', horizontal: 'right' }}\r\n MenuListProps={{ component: 'div' }}\r\n >\r\n {mapGlobalModalContext((context: IGlobalModalContext) => {\r\n this.globalModalContext = context\r\n return <NotifyList data={this.props.data} onClick={this.onClickHandler} />\r\n })}\r\n </MenuStyled>\r\n )}\r\n </>\r\n )\r\n }\r\n\r\n onClickHandler = (value: INotification) => {\r\n this.onClose()\r\n this.globalModalContext?.show({\r\n backdropActivated: true,\r\n renderContent: () => (\r\n <NotifyDetail data={value} fetchDetail={this.props.fetchDetail} onRead={this.onReadHandler} onClose={this.globalModalContext?.close} />\r\n )\r\n })\r\n }\r\n\r\n onOpen = (target: HTMLElement) => {\r\n this.setState({ anchorEl: target })\r\n }\r\n\r\n onClose = () => {\r\n this.setState({ anchorEl: null })\r\n }\r\n\r\n onReadHandler: ReadFunction = async (id) => {\r\n this.globalModalContext?.close()\r\n // NotifyLocalStorage.setSingle(value.Id)\r\n try {\r\n // Call the callback to update the read state in the parent component\r\n this.props.onRead?.(id)\r\n } catch (error) {\r\n console.error('Error updating read state:', error)\r\n }\r\n }\r\n}\r\n\r\nexport interface INotificationWidgetProps {\r\n featData: FetchDataFunction<INotification[]>\r\n fetchDetail?: FetchDetailFunction\r\n onRead?: ReadFunction\r\n}\r\n\r\nexport const NotificationWidget: FC<INotificationWidgetProps> = (props) => {\r\n const intitialData = useFetchData<INotification[]>(props.featData)\r\n const [data, setData] = useState<INotification[]>([])\r\n const theme = useTheme()\r\n const isMobile = useMediaQuery(theme.breakpoints.down('sm'))\r\n\r\n // When initialData changes, update the local state\r\n useEffect(() => {\r\n if (intitialData.data) {\r\n const sortedData = [...intitialData.data].sort((a, b) => new Date(b.DateCreated).getTime() - new Date(a.DateCreated).getTime())\r\n setData(sortedData)\r\n }\r\n }, [intitialData.data])\r\n\r\n // Function to update read notifications\r\n const handleRead: ReadFunction = async (id: string, signal, options) => {\r\n await props.onRead?.(id, signal, options)\r\n setData((prev) => {\r\n const l = prev.map((n) => (n.Id === id ? { ...n, IsRead: true } : n))\r\n return l.sort((a, b) => new Date(b.DateCreated).getTime() - new Date(a.DateCreated).getTime())\r\n })\r\n }\r\n\r\n // Auto show popup notification\r\n const handleAutoShowPopup = (notification: INotification, context: IGlobalModalContext) => {\r\n context.show({\r\n backdropActivated: true,\r\n renderContent: () => (\r\n <NotifyDetail\r\n data={notification}\r\n fetchDetail={props.fetchDetail}\r\n onRead={async (id, s, o) => {\r\n context.close()\r\n await handleRead(id, s, o)\r\n }}\r\n onClose={context.close}\r\n />\r\n )\r\n })\r\n }\r\n\r\n return (\r\n <GlobalModal>\r\n {mapGlobalModalContext((context: IGlobalModalContext) => (\r\n <NotificationContent\r\n data={data}\r\n loading={intitialData.loading}\r\n fetchDetail={props.fetchDetail}\r\n onRead={handleRead}\r\n onAutoShowPopup={(x) => handleAutoShowPopup(x, context)}\r\n isMobile={isMobile}\r\n />\r\n ))}\r\n </GlobalModal>\r\n )\r\n}\r\nexport default NotificationWidget\r\n\r\nexport const createNotificationWidget = (params: INotificationWidgetProps) => {\r\n const _NotificationWidget: FC<Partial<INotificationWidgetProps>> = (props) => <NotificationWidget {...params} {...props} />\r\n _NotificationWidget.displayName = 'NotificationWidget'\r\n return _NotificationWidget\r\n}\r\n"],"names":["NotificationContent","props","_this","_classCallCheck","_callSuper","_defineProperty","value","_this$globalModalCont","onClose","globalModalContext","show","backdropActivated","renderContent","_this$globalModalCont2","_jsx","NotifyDetail","data","fetchDetail","onRead","onReadHandler","close","target","setState","anchorEl","_ref","_asyncToGenerator","_regenerator","m","_callee","id","_this$globalModalCont3","_this$props$onRead","_this$props","w","_context","n","call","error","console","a","_x","apply","this","arguments","state","hydrated","_inherits","Component","_createClass","key","get","_this$props$data","notifications","filter","IsRead","length","prevProps","_this2","popupNotifications","AreaType","setTimeout","_this2$props$onAutoSh","_this2$props","onAutoShowPopup","_this3","isOpen","Boolean","_jsxs","_Fragment","children","IconButtonDark","onClick","e","onOpen","currentTarget","Badge","badgeContent","newFeatureCount","color","NotificationsNoneIcon","fontSize","isMobile","Drawer","anchor","open","disableScrollLock","PaperProps","sx","width","maxWidth","pt","mapGlobalModalContext","context","NotifyList","onClickHandler","MenuStyled","anchorOrigin","vertical","horizontal","transformOrigin","MenuListProps","component","NotificationWidget","intitialData","useFetchData","featData","_useState","useState","_useState2","_slicedToArray","setData","theme","useTheme","useMediaQuery","breakpoints","down","useEffect","sortedData","_toConsumableArray","sort","b","Date","DateCreated","getTime","handleRead","_ref2","_callee2","signal","options","_props$onRead","_context2","prev","map","Id","_objectSpread","_x2","_x3","_x4","GlobalModal","loading","x","notification","_onRead","_callee3","s","o","_context3","_x5","_x6","_x7","handleAutoShowPopup","createNotificationWidget","params","_NotificationWidget","displayName"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"widget.js","sources":["../../src/notification/widget.tsx"],"sourcesContent":["import { Badge, Drawer, useMediaQuery, useTheme } from '@mui/material'\r\nimport { Component, FC, useEffect, useState } from 'react'\r\nimport { GlobalModal, IGlobalModalContext, mapGlobalModalContext } from 'dinocollab-core/api-context'\r\nimport NotificationsNoneIcon from '@mui/icons-material/NotificationsNone'\r\nimport { MenuStyled } from './styled'\r\nimport { IconButtonDark } from '../components/buttons'\r\nimport { FetchDataFunction, useFetchData } from './hook'\r\nimport { INotification, ReadFunction, FetchDetailFunction, INotificationPropsDef } from './types'\r\nimport NotifyList from './notify-list'\r\nimport NotifyDetail from './notify-detail'\r\n\r\ninterface INotificationProps extends INotificationPropsDef {\r\n loading?: boolean\r\n data: INotification[]\r\n fetchDetail?: FetchDetailFunction\r\n onAutoShowPopup?: (notification: INotification) => void\r\n isMobile?: boolean\r\n}\r\n\r\ninterface INotificationState {\r\n anchorEl: HTMLElement | null\r\n hydrated: boolean\r\n}\r\nclass NotificationContent extends Component<INotificationProps, INotificationState> {\r\n globalModalContext?: IGlobalModalContext\r\n constructor(props: INotificationProps) {\r\n super(props)\r\n this.state = { anchorEl: null, hydrated: false }\r\n }\r\n\r\n get notifications() {\r\n return this.props.data ?? []\r\n }\r\n\r\n get newFeatureCount() {\r\n return this.notifications.filter((n) => !n.IsRead).length\r\n }\r\n\r\n componentDidMount() {\r\n // When mounted on the client, set hydrated = true\r\n this.setState({ hydrated: true })\r\n }\r\n\r\n componentDidUpdate(prevProps: INotificationProps) {\r\n // Auto show popup notifications\r\n if (prevProps.data !== this.props.data && this.props.data.length > 0) {\r\n const popupNotifications = this.props.data.filter((n) => n.AreaType === 'Popup' && !n.IsRead)\r\n if (popupNotifications.length > 0) {\r\n // Delay to improve UX\r\n setTimeout(() => {\r\n this.props.onAutoShowPopup?.(popupNotifications[0])\r\n }, 1500)\r\n }\r\n }\r\n }\r\n\r\n render() {\r\n const isOpen = Boolean(this.state.anchorEl)\r\n\r\n return (\r\n <>\r\n <IconButtonDark onClick={(e) => this.onOpen(e.currentTarget)}>\r\n <Badge badgeContent={this.state.hydrated ? this.newFeatureCount : 0} color='error'>\r\n <NotificationsNoneIcon fontSize='small' />\r\n </Badge>\r\n </IconButtonDark>\r\n\r\n {this.props.isMobile ? (\r\n <Drawer\r\n anchor='right'\r\n open={isOpen}\r\n onClose={this.onClose}\r\n disableScrollLock\r\n PaperProps={{ sx: { width: 'calc(100% - 100px)', maxWidth: 360 } }}\r\n >\r\n {mapGlobalModalContext((context: IGlobalModalContext) => {\r\n this.globalModalContext = context\r\n return <NotifyList data={this.props.data} onClick={this.onClickHandler} />\r\n })}\r\n </Drawer>\r\n ) : (\r\n <MenuStyled\r\n disableScrollLock\r\n anchorEl={this.state.anchorEl}\r\n open={isOpen}\r\n onClose={this.onClose}\r\n anchorOrigin={{ vertical: 'top', horizontal: 'right' }}\r\n transformOrigin={{ vertical: 'top', horizontal: 'right' }}\r\n MenuListProps={{ component: 'div' }}\r\n >\r\n {mapGlobalModalContext((context: IGlobalModalContext) => {\r\n this.globalModalContext = context\r\n return <NotifyList data={this.props.data} onClick={this.onClickHandler} />\r\n })}\r\n </MenuStyled>\r\n )}\r\n </>\r\n )\r\n }\r\n\r\n onClickHandler = (value: INotification) => {\r\n this.onClose()\r\n this.globalModalContext?.show({\r\n backdropActivated: true,\r\n renderContent: () => (\r\n <NotifyDetail data={value} fetchDetail={this.props.fetchDetail} onRead={this.onReadHandler} onClose={this.globalModalContext?.close} />\r\n )\r\n })\r\n }\r\n\r\n onOpen = (target: HTMLElement) => {\r\n this.setState({ anchorEl: target })\r\n }\r\n\r\n onClose = () => {\r\n this.setState({ anchorEl: null })\r\n }\r\n\r\n onReadHandler: ReadFunction = async (id) => {\r\n this.globalModalContext?.close()\r\n // NotifyLocalStorage.setSingle(value.Id)\r\n try {\r\n // Call the callback to update the read state in the parent component\r\n this.props.onRead?.(id)\r\n } catch (error) {\r\n console.error('Error updating read state:', error)\r\n }\r\n }\r\n}\r\n\r\nexport interface INotificationWidgetProps {\r\n featData: FetchDataFunction<INotification[]>\r\n fetchDetail?: FetchDetailFunction\r\n onRead?: ReadFunction\r\n}\r\n\r\nexport const NotificationWidget: FC<INotificationWidgetProps> = (props) => {\r\n const intitialData = useFetchData<INotification[]>(props.featData)\r\n const [data, setData] = useState<INotification[]>([])\r\n const theme = useTheme()\r\n const isMobile = useMediaQuery(theme.breakpoints.down('sm'))\r\n\r\n // When initialData changes, update the local state\r\n useEffect(() => {\r\n if (intitialData.data) {\r\n const sortedData = [...intitialData.data].sort((a, b) => new Date(b.DateCreated).getTime() - new Date(a.DateCreated).getTime())\r\n setData(sortedData)\r\n }\r\n }, [intitialData.data])\r\n\r\n // Function to update read notifications\r\n const handleRead: ReadFunction = async (id: string, signal, options) => {\r\n await props.onRead?.(id, signal, options)\r\n setData((prev) => {\r\n const l = prev.map((n) => (n.Id === id ? { ...n, IsRead: true } : n))\r\n return l.sort((a, b) => new Date(b.DateCreated).getTime() - new Date(a.DateCreated).getTime())\r\n })\r\n }\r\n\r\n // Auto show popup notification\r\n const handleAutoShowPopup = (notification: INotification, context: IGlobalModalContext) => {\r\n context.show({\r\n backdropActivated: true,\r\n renderContent: () => (\r\n <NotifyDetail\r\n data={notification}\r\n fetchDetail={props.fetchDetail}\r\n onRead={async (id, s, o) => {\r\n context.close()\r\n await handleRead(id, s, o)\r\n }}\r\n onClose={context.close}\r\n />\r\n )\r\n })\r\n }\r\n\r\n return (\r\n <GlobalModal>\r\n {mapGlobalModalContext((context: IGlobalModalContext) => (\r\n <NotificationContent\r\n data={data}\r\n loading={intitialData.loading}\r\n fetchDetail={props.fetchDetail}\r\n onRead={handleRead}\r\n onAutoShowPopup={(x) => handleAutoShowPopup(x, context)}\r\n isMobile={isMobile}\r\n />\r\n ))}\r\n </GlobalModal>\r\n )\r\n}\r\nexport default NotificationWidget\r\n\r\nexport const createNotificationWidget = (params: INotificationWidgetProps) => {\r\n const _NotificationWidget: FC<Partial<INotificationWidgetProps>> = (props) => <NotificationWidget {...params} {...props} />\r\n _NotificationWidget.displayName = 'NotificationWidget'\r\n return _NotificationWidget\r\n}\r\n"],"names":["NotificationContent","props","_this","_classCallCheck","_callSuper","_defineProperty","value","_this$globalModalCont","onClose","globalModalContext","show","backdropActivated","renderContent","_this$globalModalCont2","_jsx","NotifyDetail","data","fetchDetail","onRead","onReadHandler","close","target","setState","anchorEl","_ref","_asyncToGenerator","_regenerator","m","_callee","id","_this$globalModalCont3","_this$props$onRead","_this$props","w","_context","n","call","error","console","a","_x","apply","this","arguments","state","hydrated","_inherits","Component","_createClass","key","get","_this$props$data","notifications","filter","IsRead","length","prevProps","_this2","popupNotifications","AreaType","setTimeout","_this2$props$onAutoSh","_this2$props","onAutoShowPopup","_this3","isOpen","Boolean","_jsxs","IconButtonDark","onClick","e","onOpen","currentTarget","children","Badge","badgeContent","newFeatureCount","color","NotificationsNoneIcon","fontSize","isMobile","Drawer","anchor","open","disableScrollLock","PaperProps","sx","width","maxWidth","mapGlobalModalContext","context","NotifyList","onClickHandler","MenuStyled","anchorOrigin","vertical","horizontal","transformOrigin","MenuListProps","component","NotificationWidget","intitialData","useFetchData","featData","_useState","useState","_useState2","_slicedToArray","setData","theme","useTheme","useMediaQuery","breakpoints","down","useEffect","sortedData","_toConsumableArray","sort","b","Date","DateCreated","getTime","handleRead","_ref2","_callee2","signal","options","_props$onRead","_context2","prev","map","Id","_objectSpread","_x2","_x3","_x4","GlobalModal","loading","x","notification","_onRead","_callee3","s","o","_context3","_x5","_x6","_x7","handleAutoShowPopup","createNotificationWidget","params","_NotificationWidget","displayName"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../../src/cart/styled.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAC1C,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAExD,eAAO,MAAM,UAAU,EAAE,aAAa,CAAC,SAAS,
|
|
1
|
+
{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../../src/cart/styled.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAC1C,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAExD,eAAO,MAAM,UAAU,EAAE,aAAa,CAAC,SAAS,CAsC7C,CAAA;AAEH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;CAY9B,CAAA;AAMD,eAAO,MAAM,iBAAiB,EAAE,aAAa,CAAC,QAAQ,CAqGnD,CAAA"}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { FC } from 'react';
|
|
2
2
|
import { ButtonProps } from '@mui/material';
|
|
3
|
-
import type { FC } from 'react';
|
|
4
3
|
import type { TypographyProps } from '@mui/material';
|
|
5
4
|
import { ICartItem } from './types';
|
|
6
5
|
import { IAppSiteBaseUrl } from '../types';
|
|
@@ -20,21 +19,7 @@ interface ICartWidgetProps {
|
|
|
20
19
|
itemTitleProps?: ITypographyProps;
|
|
21
20
|
itemTitlePropsGetter?: (item: ICartItem, close?: () => void) => ITypographyProps;
|
|
22
21
|
}
|
|
23
|
-
|
|
24
|
-
anchorEl: HTMLElement | null;
|
|
25
|
-
hydrated: boolean;
|
|
26
|
-
}
|
|
27
|
-
export declare class CartWidget extends Component<ICartWidgetProps, ICartWidgetState> {
|
|
28
|
-
constructor(props: ICartWidgetProps);
|
|
29
|
-
get carts(): ICartItem<any>[];
|
|
30
|
-
componentDidMount(): void;
|
|
31
|
-
render: () => import("react/jsx-runtime").JSX.Element;
|
|
32
|
-
renderContent: () => import("react/jsx-runtime").JSX.Element;
|
|
33
|
-
renderTitle: (item: ICartItem) => import("react/jsx-runtime").JSX.Element;
|
|
34
|
-
renderItem: (item: ICartItem) => import("react/jsx-runtime").JSX.Element;
|
|
35
|
-
onOpen: (target: HTMLElement) => void;
|
|
36
|
-
onClose: () => void;
|
|
37
|
-
}
|
|
22
|
+
export declare const CartWidget: FC<ICartWidgetProps>;
|
|
38
23
|
export declare const createCartWidget: (params: ICartWidgetProps) => FC<Partial<ICartWidgetProps>>;
|
|
39
24
|
export {};
|
|
40
25
|
//# sourceMappingURL=widget.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"widget.d.ts","sourceRoot":"","sources":["../../../src/cart/widget.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"widget.d.ts","sourceRoot":"","sources":["../../../src/cart/widget.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiC,EAAE,EAAE,MAAM,OAAO,CAAA;AAEzD,OAAO,EAAsB,WAAW,EAAwD,MAAM,eAAe,CAAA;AACrH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAGpD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAEnC,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAI1C,KAAK,gBAAgB,GAAG,eAAe,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,CAAA;AAEhE,UAAU,gBAAgB;IACxB,OAAO,EAAE,eAAe,CAAA;IACxB,KAAK,CAAC,EAAE,SAAS,EAAE,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,qBAAqB,CAAC,EAAE,WAAW,GAAG;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAA;IAC5D,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACxC,iBAAiB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,EAAE,UAAU,CAAC,KAAK,IAAI,CAAA;IACpG,cAAc,CAAC,EAAE,gBAAgB,CAAA;IACjC,oBAAoB,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,EAAE,KAAK,CAAC,EAAE,MAAM,IAAI,KAAK,gBAAgB,CAAA;CACjF;AAOD,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,gBAAgB,CAoI3C,CAAA;AAED,eAAO,MAAM,gBAAgB,WAAY,gBAAgB,kCAIxD,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"app-header.styled.d.ts","sourceRoot":"","sources":["../../../src/layout-global/app-header.styled.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,QAAQ,EAAU,MAAM,eAAe,CAAA;AACrD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAE1C,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;CAc5B,CAAA;AAMD,eAAO,MAAM,YAAY,EAAE,aAAa,CAAC,QAAQ,
|
|
1
|
+
{"version":3,"file":"app-header.styled.d.ts","sourceRoot":"","sources":["../../../src/layout-global/app-header.styled.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,QAAQ,EAAU,MAAM,eAAe,CAAA;AACrD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAE1C,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;CAc5B,CAAA;AAMD,eAAO,MAAM,YAAY,EAAE,aAAa,CAAC,QAAQ,CA6B9C,CAAA;AACH,MAAM,MAAM,gBAAgB,GAAG,OAAO,YAAY,CAAA;AAGlD,eAAO,MAAM,SAAS,EAAE,aAAa,CAAC,QAAQ,CAkB3C,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/media-right/media-widget/index.tsx"],"names":[],"mappings":";AACA,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/media-right/media-widget/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAsB,WAAW,EAAsD,MAAM,eAAe,CAAA;AAYnH,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAA;AAEzE,MAAM,WAAW,sBAAuB,SAAQ,uBAAuB;IACrE,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,qBAAqB,CAAC,EAAE,WAAW,GAAG;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAA;IAC5D,aAAa,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAA;CACvC;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAmI7D,CAAA;AAED,eAAO,MAAM,sBAAsB,WAAY,sBAAsB,wDAIpE,CAAA"}
|
|
@@ -1,14 +1,16 @@
|
|
|
1
1
|
import type { ComponentType } from 'react';
|
|
2
|
-
import type { MenuProps } from '@mui/material';
|
|
2
|
+
import type { BoxProps, MenuProps } from '@mui/material';
|
|
3
3
|
export declare const mediaWidgetClasses: {
|
|
4
4
|
root: string;
|
|
5
5
|
header: string;
|
|
6
6
|
headerText: string;
|
|
7
7
|
footer: string;
|
|
8
|
+
content: string;
|
|
8
9
|
item: string;
|
|
9
10
|
itemTitle: string;
|
|
10
11
|
itemChild: string;
|
|
11
12
|
itemChildTitle: string;
|
|
12
13
|
};
|
|
14
|
+
export declare const MenuContentStyled: ComponentType<BoxProps>;
|
|
13
15
|
export declare const MenuStyled: ComponentType<MenuProps>;
|
|
14
16
|
//# sourceMappingURL=styled.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../../../src/media-right/media-widget/styled.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAC1C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;
|
|
1
|
+
{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../../../src/media-right/media-widget/styled.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAC1C,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAExD,eAAO,MAAM,kBAAkB;;;;;;;;;;CAU9B,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,aAAa,CAAC,QAAQ,CAkDnD,CAAA;AAEH,eAAO,MAAM,UAAU,EAAE,aAAa,CAAC,SAAS,CAsC7C,CAAA"}
|
|
@@ -3,6 +3,7 @@ import { INotification } from './types';
|
|
|
3
3
|
interface INotifyListProps {
|
|
4
4
|
data: INotification[];
|
|
5
5
|
onClick?: (value: INotification) => void;
|
|
6
|
+
isMobile?: boolean;
|
|
6
7
|
}
|
|
7
8
|
declare class NotifyList extends Component<INotifyListProps> {
|
|
8
9
|
render(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"notify-list.d.ts","sourceRoot":"","sources":["../../../src/notification/notify-list.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAIjC,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;
|
|
1
|
+
{"version":3,"file":"notify-list.d.ts","sourceRoot":"","sources":["../../../src/notification/notify-list.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAIjC,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAKvC,UAAU,gBAAgB;IACxB,IAAI,EAAE,aAAa,EAAE,CAAA;IACrB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,cAAM,UAAW,SAAQ,SAAS,CAAC,gBAAgB,CAAC;IAClD,MAAM;IAkDN,UAAU,SAAU,aAAa,SAAS,MAAM,6CAoB/C;IAED,cAAc,iBAAkB,aAAa,UAI5C;IAED,cAAc,UAAW,MAAM,YAI9B;IAED,QAAQ,cAAe,OAAO,qBAE7B;CACF;AACD,eAAe,UAAU,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../../src/notification/styled.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAC1C,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAExD,eAAO,MAAM,UAAU,EAAE,aAAa,CAAC,SAAS,
|
|
1
|
+
{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../../src/notification/styled.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAC1C,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAExD,eAAO,MAAM,UAAU,EAAE,aAAa,CAAC,SAAS,CAuC7C,CAAA;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;;;CAW7B,CAAA;AAMD,eAAO,MAAM,gBAAgB,EAAE,aAAa,CAAC,QAAQ,CAuFlD,CAAA;AAEH,eAAO,MAAM,mBAAmB;;;;;;;CAO/B,CAAA;AAMD,eAAO,MAAM,kBAAkB,EAAE,aAAa,CAAC,QAAQ,CA8CpD,CAAA"}
|