dinocollab-shared 1.2.42 → 1.2.43
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/components/buttons.js +1 -1
- package/dist/components/buttons.js.map +1 -1
- package/dist/factory/cart-content/create.cart-content.js +2 -0
- package/dist/factory/cart-content/create.cart-content.js.map +1 -0
- package/dist/factory/cart-content/styled.js +2 -0
- package/dist/factory/cart-content/styled.js.map +1 -0
- package/dist/factory/cart-item/create.cart-item.js +2 -0
- package/dist/factory/cart-item/create.cart-item.js.map +1 -0
- package/dist/factory/cart-item/styled.js +2 -0
- package/dist/factory/cart-item/styled.js.map +1 -0
- package/dist/media-player/core/videoplayer.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/media-group-accordion.js +1 -1
- package/dist/media-right/media-widget/media-group-accordion.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/types/cart/styled.d.ts +3 -15
- package/dist/types/cart/styled.d.ts.map +1 -1
- package/dist/types/cart/widget.d.ts +7 -7
- package/dist/types/cart/widget.d.ts.map +1 -1
- package/dist/types/components/buttons.d.ts +1 -0
- package/dist/types/components/buttons.d.ts.map +1 -1
- package/dist/types/factory/cart-content/create.cart-content.d.ts +5 -0
- package/dist/types/factory/cart-content/create.cart-content.d.ts.map +1 -0
- package/dist/types/factory/cart-content/index.d.ts +3 -0
- package/dist/types/factory/cart-content/index.d.ts.map +1 -0
- package/dist/types/factory/cart-content/styled.d.ts +10 -0
- package/dist/types/factory/cart-content/styled.d.ts.map +1 -0
- package/dist/types/factory/cart-content/types.d.ts +49 -0
- package/dist/types/factory/cart-content/types.d.ts.map +1 -0
- package/dist/types/factory/cart-item/create.cart-item.d.ts +5 -0
- package/dist/types/factory/cart-item/create.cart-item.d.ts.map +1 -0
- package/dist/types/factory/cart-item/index.d.ts +3 -0
- package/dist/types/factory/cart-item/index.d.ts.map +1 -0
- package/dist/types/factory/cart-item/styled.d.ts +8 -0
- package/dist/types/factory/cart-item/styled.d.ts.map +1 -0
- package/dist/types/factory/cart-item/types.d.ts +25 -0
- package/dist/types/factory/cart-item/types.d.ts.map +1 -0
- package/dist/types/factory/index.d.ts +3 -0
- package/dist/types/factory/index.d.ts.map +1 -0
- package/dist/types/media-player/core/videoplayer.d.ts +2 -2
- package/dist/types/media-player/core/videoplayer.d.ts.map +1 -1
- package/dist/types/media-right/index.d.ts +0 -1
- package/dist/types/media-right/index.d.ts.map +1 -1
- package/dist/types/media-right/media-widget/index.d.ts +10 -3
- package/dist/types/media-right/media-widget/index.d.ts.map +1 -1
- package/dist/types/media-right/media-widget/media-group-accordion.d.ts +9 -3
- package/dist/types/media-right/media-widget/media-group-accordion.d.ts.map +1 -1
- package/dist/types/media-right/media-widget/styled.d.ts +2 -13
- package/dist/types/media-right/media-widget/styled.d.ts.map +1 -1
- package/package.json +3 -2
- package/dist/media-right/media-widget/item-title-props-context.js +0 -2
- package/dist/media-right/media-widget/item-title-props-context.js.map +0 -1
- package/dist/media-right/media-widget/media-list.js +0 -2
- package/dist/media-right/media-widget/media-list.js.map +0 -1
- package/dist/media-right/media-widget/units.js +0 -2
- package/dist/media-right/media-widget/units.js.map +0 -1
- package/dist/types/media-right/media-widget/item-title-props-context.d.ts +0 -15
- package/dist/types/media-right/media-widget/item-title-props-context.d.ts.map +0 -1
- package/dist/types/media-right/media-widget/media-list.d.ts +0 -8
- package/dist/types/media-right/media-widget/media-list.d.ts.map +0 -1
- package/dist/types/media-right/media-widget/units.d.ts +0 -3
- package/dist/types/media-right/media-widget/units.d.ts.map +0 -1
package/dist/cart/styled.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{styled as r,Stack as o,Menu as t,Typography as a,alpha as e}from"@mui/material";var i=r(o)(function(r){var o=r.theme;return{"--color-bg":"dark"===o.palette.mode?"#121212":o.palette.background.paper,"--color-bg-rba":"dark"===o.palette.mode?"18, 18, 18":"255, 255, 255","--color-text":o.palette.text.primary,"--cart-color-bg":"var(--color-bg)",height:"100%"}}),p=r(t)(function(r){var o=r.theme;return{"--color-bg":"dark"===o.palette.mode?"#121212":o.palette.background.paper,"--color-text":o.palette.text.primary,"--cart-color-bg":"var(--color-bg)",marginTop:"45px","> .MuiPaper-root":{position:"relative",overflow:"visible",display:"flex",flexDirection:"column",backgroundColor:"var(--color-bg, #000000)",borderRadius:o.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:o.spacing(1),transform:"translateX(-50%) rotate(45deg)",zIndex:0}},".MuiBackdrop-root":{backgroundColor:"transparent"},".MuiList-root":{padding:0,height:"100%",minHeight:0,maxHeight:"60vh"}}}),n=r(a)(function(r){var o=r.theme;return{fontWeight:700,fontSize:"0.75rem",backgroundColor:e(o.palette.primary.main||"#E11D48",.1),padding:"2px 8px",borderRadius:"999px",display:"inline-block"}});export{n as ItemTag,p as MenuStyled,i as Root};
|
|
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,
|
|
1
|
+
{"version":3,"file":"styled.js","sources":["../../src/cart/styled.tsx"],"sourcesContent":["import { alpha, Menu, Stack, styled, Typography } from '@mui/material'\r\nimport type { ComponentType } from 'react'\r\nimport type { MenuProps, StackProps, TypographyProps } from '@mui/material'\r\n\r\nexport const Root: ComponentType<StackProps> = styled(Stack)(({ theme }) => ({\r\n '--color-bg': theme.palette.mode === 'dark' ? '#121212' : theme.palette.background.paper,\r\n '--color-bg-rba': theme.palette.mode === 'dark' ? '18, 18, 18' : '255, 255, 255',\r\n '--color-text': theme.palette.text.primary,\r\n '--cart-color-bg': 'var(--color-bg)',\r\n height: '100%'\r\n}))\r\n\r\nexport const MenuStyled: ComponentType<MenuProps> = styled(Menu)(({ theme }) => ({\r\n '--color-bg': theme.palette.mode === 'dark' ? '#121212' : theme.palette.background.paper,\r\n '--color-text': theme.palette.text.primary,\r\n '--cart-color-bg': 'var(--color-bg)',\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%', minHeight: 0, maxHeight: '60vh' }\r\n}))\r\n\r\nexport const ItemTag: ComponentType<TypographyProps> = styled(Typography)(({ theme }) => ({\r\n fontWeight: 700,\r\n fontSize: '0.75rem',\r\n backgroundColor: alpha(theme.palette.primary.main || '#E11D48', 0.1),\r\n padding: '2px 8px',\r\n borderRadius: '999px',\r\n display: 'inline-block'\r\n}))\r\n"],"names":["Root","styled","Stack","_ref","theme","palette","mode","background","paper","text","primary","height","MenuStyled","Menu","_ref2","marginTop","position","overflow","display","flexDirection","backgroundColor","borderRadius","shape","minWidth","maxWidth","boxShadow","animation","color","opacity","transform","content","width","top","right","spacing","zIndex","padding","minHeight","maxHeight","ItemTag","Typography","_ref3","fontWeight","fontSize","alpha","main"],"mappings":"uFAIO,IAAMA,EAAkCC,EAAOC,EAAPD,CAAc,SAAAE,GAAA,IAAGC,EAAKD,EAALC,MAAK,MAAQ,CAC3E,aAAqC,SAAvBA,EAAMC,QAAQC,KAAkB,UAAYF,EAAMC,QAAQE,WAAWC,MACnF,iBAAyC,SAAvBJ,EAAMC,QAAQC,KAAkB,aAAe,gBACjE,eAAgBF,EAAMC,QAAQI,KAAKC,QACnC,kBAAmB,kBACnBC,OAAQ,OACT,GAEYC,EAAuCX,EAAOY,EAAPZ,CAAa,SAAAa,GAAA,IAAGV,EAAKU,EAALV,MAAK,MAAQ,CAC/E,aAAqC,SAAvBA,EAAMC,QAAQC,KAAkB,UAAYF,EAAMC,QAAQE,WAAWC,MACnF,eAAgBJ,EAAMC,QAAQI,KAAKC,QACnC,kBAAmB,kBACnBK,UAAW,OACX,mBAAoB,CAClBC,SAAU,WACVC,SAAU,UACVC,QAAS,OACTC,cAAe,SACfC,gBAAiB,2BACjBC,aAAcjB,EAAMkB,MAAMD,aAC1BE,SAAU,QACVC,SAAU,QACVC,UAAsI,4HACtIC,UAAW,2BACXX,UAAW,MACXY,MAAO,6BAEP,wBAAyB,CACvB,KAAM,CAAEC,QAAS,EAAGC,UAAW,qBAC/B,OAAQ,CAAED,QAAS,EAAGC,UAAW,kBAGnC,YAAa,CACXC,QAAS,KACTd,SAAU,WACVI,gBAAiB,2BACjBW,MAAO,OACPpB,OAAQ,OACRqB,IAAK,OACLC,MAAO7B,EAAM8B,QAAQ,GACrBL,UAAW,iCACXM,OAAQ,IAGZ,oBAAqB,CAAEf,gBAAiB,eACxC,gBAAiB,CAAEgB,QAAS,EAAGzB,OAAQ,OAAQ0B,UAAW,EAAGC,UAAW,QACzE,GAEYC,EAA0CtC,EAAOuC,EAAPvC,CAAmB,SAAAwC,GAAA,IAAGrC,EAAKqC,EAALrC,MAAK,MAAQ,CACxFsC,WAAY,IACZC,SAAU,UACVvB,gBAAiBwB,EAAMxC,EAAMC,QAAQK,QAAQmC,MAAQ,UAAW,IAChET,QAAS,UACTf,aAAc,QACdH,QAAS,eACV"}
|
package/dist/cart/widget.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{slicedToArray as r,objectSpread2 as
|
|
1
|
+
import{slicedToArray as r,objectSpread2 as t}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsx as o,jsxs as e}from"react/jsx-runtime";import{useState as i,useCallback as n,Fragment as l}from"react";import{useTheme as a,useMediaQuery as c,Stack as s,Typography as m,Badge as u,Drawer as d}from"@mui/material";import p from"@mui/icons-material/ShoppingCartOutlined";import{Root as f,MenuStyled as h,ItemTag as v}from"./styled.js";import{getTotalData as C}from"./helpers.js";import{createCartContent as g}from"../factory/cart-content/create.cart-content.js";import{createCartItem as x}from"../factory/cart-item/create.cart-item.js";import{IconButtonDark as b}from"../components/buttons.js";var P=g({labels:{title:"Your Cart",buttonCheckout:"Show in cart"},empty:{title:"Your cart is empty",subTitle:"Try adding some products"}}),T=x({slots:{beforeTile:function(r){var t,i,n,l;return e(s,{direction:"row",flexWrap:"wrap",width:"100%",gap:1,alignItems:"center",justifyContent:"space-between",children:[o(v,{variant:"body1",sx:{color:null!==(t=r.item.PriceColor)&&void 0!==t?t:"#000"},children:null!==(i=r.item.PriceName)&&void 0!==i?i:"Unknown Price"}),e(s,{direction:"row",gap:.5,alignItems:"flex-end",children:[e(m,{children:["$",null!==(n=r.item.Price)&&void 0!==n?n:0]}),e(m,{variant:"body1",sx:{fontSize:"14px",color:"#818181"},children:["x",null!==(l=r.item.Amount)&&void 0!==l?l:0," urls"]})]})]})}}}),y=function(t){var v,g,x=i(null),y=r(x,2),j=y[0],k=y[1],w=i(!1),S=r(w,2),M=S[0],W=S[1],z=a(),B=c(z.breakpoints.down("sm")),I=null!==(v=t.carts)&&void 0!==v?v:[];i(function(){W(!0)});var L=function(){k(null)},N=n(function(){return o(P,{carts:I,isMobile:B,onClose:L,buttonMoveToCartProps:t.buttonMoveToCartProps,onCheckout:function(r){L(),t.onMoveToCartClick&&t.onMoveToCartClick(r)},slots:{headerRight:function(r){var t,i=C(r.carts);return e(s,{justifyContent:"flex-end",children:[o(m,{variant:"caption",sx:{textTransform:"uppercase",fontWeight:500,letterSpacing:"0.1em",color:"var(--color-text-secondary)"},children:"Total"}),e(m,{variant:"h6",sx:{fontWeight:700,color:"#e88c3f"},children:["$",null===(t=i.price)||void 0===t?void 0:t.toFixed(2)]})]})},item:function(r,e){var i;return o(T,{item:r,name:r.ProductName,imageUrl:r.PictureUrl,onRemoveCart:t.onRemoveCart,itemTitleProps:t.itemTitleProps,itemTitlePropsGetter:t.itemTitlePropsGetter,onClose:L},null!==(i=r.ProductId)&&void 0!==i?i:e)}}})},[I,B,t,L]);return e(l,{children:[o(b,{onClick:function(r){return t=r.currentTarget,void k(t);var t},children:o(u,{badgeContent:M&&null!==(g=I.length)&&void 0!==g?g:0,color:"error",children:o(p,{fontSize:"small"})})}),B?o(d,{anchor:"right",open:Boolean(j),onClose:L,disableScrollLock:!0,PaperProps:{sx:{width:"calc(100% - 100px)",maxWidth:360}},children:o(f,{children:N()})}):o(h,{disableScrollLock:!0,anchorEl:j,open:Boolean(j),onClose:L,anchorOrigin:{vertical:"top",horizontal:"right"},transformOrigin:{vertical:"top",horizontal:"right"},MenuListProps:{component:"div",sx:{display:"flex",flexDirection:"column"}},children:o(f,{children:N()})})]})},j=function(r){var e=function(e){return o(y,t(t({},r),e))};return e.displayName="CartWidget",e};export{y as CartWidget,j 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, 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
|
+
{"version":3,"file":"widget.js","sources":["../../src/cart/widget.tsx"],"sourcesContent":["import { Fragment, useState, FC, useCallback } from 'react'\r\nimport { Badge, ButtonProps, Drawer, Stack, Typography, TypographyProps, useMediaQuery, useTheme } from '@mui/material'\r\nimport ShoppingCartOutlinedIcon from '@mui/icons-material/ShoppingCartOutlined'\r\nimport { ICartItem } from './types'\r\nimport { IAppSiteBaseUrl } from '../types'\r\nimport { ItemTag, MenuStyled, Root } from './styled'\r\nimport { IconButtonDark } from '../components'\r\nimport { getTotalData } from './helpers'\r\nimport createCartContent from '../factory/cart-content/create.cart-content'\r\nimport createCartItem from '../factory/cart-item/create.cart-item'\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?: TypographyProps & { [key: string]: any }\r\n itemTitlePropsGetter?: (item: ICartItem, close?: () => void) => TypographyProps & { [key: string]: any }\r\n}\r\n\r\nconst CartContent = createCartContent<ICartItem>({\r\n labels: {\r\n title: 'Your Cart',\r\n buttonCheckout: 'Show in cart'\r\n },\r\n empty: {\r\n title: 'Your cart is empty',\r\n subTitle: 'Try adding some products'\r\n }\r\n})\r\n\r\nconst CartItem = createCartItem<ICartItem>({\r\n slots: {\r\n beforeTile: (ctx) => (\r\n <Stack direction='row' flexWrap={'wrap'} width={'100%'} gap={1} alignItems='center' justifyContent={'space-between'}>\r\n <ItemTag variant='body1' sx={{ color: ctx.item.PriceColor ?? '#000' }}>\r\n {ctx.item.PriceName ?? 'Unknown Price'}\r\n </ItemTag>\r\n <Stack direction='row' gap={0.5} alignItems='flex-end'>\r\n <Typography>${ctx.item.Price ?? 0}</Typography>\r\n <Typography variant='body1' sx={{ fontSize: '14px', color: '#818181' }}>\r\n x{ctx.item.Amount ?? 0} urls\r\n </Typography>\r\n </Stack>\r\n </Stack>\r\n )\r\n }\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 renderContent = useCallback(() => (\r\n <CartContent\r\n carts={carts}\r\n isMobile={isMobile}\r\n onClose={onClose}\r\n buttonMoveToCartProps={props.buttonMoveToCartProps}\r\n onCheckout={(event) => {\r\n onClose()\r\n if (props.onMoveToCartClick) props.onMoveToCartClick(event as React.MouseEvent<HTMLAnchorElement | HTMLButtonElement, MouseEvent>)\r\n }}\r\n slots={{\r\n headerRight: (ctx) => {\r\n const totalData = getTotalData(ctx.carts)\r\n return (\r\n <Stack justifyContent={'flex-end'}>\r\n <Typography\r\n variant='caption'\r\n sx={{ textTransform: 'uppercase', fontWeight: 500, letterSpacing: '0.1em', color: 'var(--color-text-secondary)' }}\r\n >\r\n Total\r\n </Typography>\r\n <Typography variant='h6' sx={{ fontWeight: 700, color: '#e88c3f' }}>\r\n ${totalData.price?.toFixed(2)}\r\n </Typography>\r\n </Stack>\r\n )\r\n },\r\n item: (item, index) => (\r\n <CartItem\r\n key={item.ProductId ?? index}\r\n item={item}\r\n name={item.ProductName}\r\n imageUrl={item.PictureUrl}\r\n onRemoveCart={props.onRemoveCart}\r\n itemTitleProps={props.itemTitleProps}\r\n itemTitlePropsGetter={props.itemTitlePropsGetter}\r\n onClose={onClose}\r\n />\r\n )\r\n }}\r\n />\r\n ), [carts, isMobile, props, onClose])\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 <Root>{renderContent()}</Root>\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 <Root>{renderContent()}</Root>\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":["CartContent","createCartContent","labels","title","buttonCheckout","empty","subTitle","CartItem","createCartItem","slots","beforeTile","ctx","_ctx$item$PriceColor","_ctx$item$PriceName","_ctx$item$Price","_ctx$item$Amount","_jsxs","Stack","direction","flexWrap","width","gap","alignItems","justifyContent","children","_jsx","ItemTag","variant","sx","color","item","PriceColor","PriceName","Typography","Price","fontSize","Amount","CartWidget","props","_props$carts","_carts$length","_useState","useState","_useState2","_slicedToArray","anchorEl","setAnchorEl","_useState3","_useState4","hydrated","setHydrated","theme","useTheme","isMobile","useMediaQuery","breakpoints","down","carts","onClose","renderContent","useCallback","buttonMoveToCartProps","onCheckout","event","onMoveToCartClick","headerRight","_totalData$price","totalData","getTotalData","textTransform","fontWeight","letterSpacing","price","toFixed","index","_item$ProductId","name","ProductName","imageUrl","PictureUrl","onRemoveCart","itemTitleProps","itemTitlePropsGetter","ProductId","Fragment","IconButtonDark","onClick","e","target","currentTarget","Badge","badgeContent","length","ShoppingCartOutlinedIcon","Drawer","anchor","open","Boolean","disableScrollLock","PaperProps","maxWidth","Root","MenuStyled","anchorOrigin","vertical","horizontal","transformOrigin","MenuListProps","component","display","flexDirection","createCartWidget","params","_CartWidget","_objectSpread","displayName"],"mappings":"urBAuBA,IAAMA,EAAcC,EAA6B,CAC/CC,OAAQ,CACNC,MAAO,YACPC,eAAgB,gBAElBC,MAAO,CACLF,MAAO,qBACPG,SAAU,8BAIRC,EAAWC,EAA0B,CACzCC,MAAO,CACLC,WAAY,SAACC,GAAG,IAAAC,EAAAC,EAAAC,EAAAC,EAAA,OACdC,EAACC,EAAM,CAAAC,UAAU,MAAMC,SAAU,OAAQC,MAAO,OAAQC,IAAK,EAAGC,WAAW,SAASC,eAAgB,gBAAeC,SAAA,CACjHC,EAACC,EAAQ,CAAAC,QAAQ,QAAQC,GAAI,CAAEC,MAA0BjB,QAArBA,EAAED,EAAImB,KAAKC,kBAAUnB,IAAAA,EAAAA,EAAI,QAC1DY,SAAkBX,QAAlBA,EAAAF,EAAImB,KAAKE,iBAASnB,IAAAA,EAAAA,EAAI,kBAEzBG,EAACC,EAAK,CAACC,UAAU,MAAMG,IAAK,GAAKC,WAAW,WAAUE,SAAA,CACpDR,EAACiB,EAAa,CAAAT,SAAA,CAAA,IAAcV,QAAdA,EAAAH,EAAImB,KAAKI,aAAKpB,IAAAA,EAAAA,EAAI,KAChCE,EAACiB,EAAU,CAACN,QAAQ,QAAQC,GAAI,CAAEO,SAAU,OAAQN,MAAO,WAAWL,SAAA,CAAA,YAAAT,EAClEJ,EAAImB,KAAKM,cAAM,IAAArB,EAAAA,EAAI,EAAC,gBAGpB,KAKDsB,EAAmC,SAACC,GAAS,IAAAC,EAAAC,EACxDC,EAAgCC,EAA6B,MAAKC,EAAAC,EAAAH,EAAA,GAA3DI,EAAQF,EAAA,GAAEG,EAAWH,EAAA,GAC5BI,EAAgCL,GAAS,GAAMM,EAAAJ,EAAAG,EAAA,GAAxCE,EAAQD,EAAA,GAAEE,EAAWF,EAAA,GACtBG,EAAQC,IACRC,EAAWC,EAAcH,EAAMI,YAAYC,KAAK,OAEhDC,EAAmB,QAAdlB,EAAGD,EAAMmB,aAAK,IAAAlB,EAAAA,EAAI,GAG7BG,EAAS,WACPQ,GAAY,EACd,GAEA,IAIMQ,EAAU,WACdZ,EAAY,KACb,EAEKa,EAAgBC,EAAY,WAAA,OAChCnC,EAACzB,EACC,CAAAyD,MAAOA,EACPJ,SAAUA,EACVK,QAASA,EACTG,sBAAuBvB,EAAMuB,sBAC7BC,WAAY,SAACC,GACXL,IACIpB,EAAM0B,mBAAmB1B,EAAM0B,kBAAkBD,EACtD,EACDtD,MAAO,CACLwD,YAAa,SAACtD,GAAO,IAAAuD,EACbC,EAAYC,EAAazD,EAAI8C,OACnC,OACEzC,EAACC,EAAK,CAACM,eAAgB,WAAUC,SAAA,CAC/BC,EAACQ,EACC,CAAAN,QAAQ,UACRC,GAAI,CAAEyC,cAAe,YAAaC,WAAY,IAAKC,cAAe,QAAS1C,MAAO,+BAA+BL,SAAA,UAInHR,EAACiB,EAAU,CAACN,QAAQ,KAAKC,GAAI,CAAE0C,WAAY,IAAKzC,MAAO,WACnDL,SAAA,CAAA,IAAe,QAAf0C,EAAAC,EAAUK,aAAVN,IAAeA,OAAfA,EAAAA,EAAiBO,QAAQ,QAIlC,EACD3C,KAAM,SAACA,EAAM4C,GAAK,IAAAC,EAAA,OAChBlD,EAAClB,EAEC,CAAAuB,KAAMA,EACN8C,KAAM9C,EAAK+C,YACXC,SAAUhD,EAAKiD,WACfC,aAAc1C,EAAM0C,aACpBC,eAAgB3C,EAAM2C,eACtBC,qBAAsB5C,EAAM4C,qBAC5BxB,QAASA,GAPUiB,QAOHA,EAPX7C,EAAKqD,iBAASR,IAAAA,EAAAA,EAAID,EAQvB,IAIT,EAAE,CAACjB,EAAOJ,EAAUf,EAAOoB,IAE5B,OACE1C,EAACoE,aACC3D,EAAC4D,GAAeC,QAAS,SAACC,GAAC,OArDfC,EAqD2BD,EAAEE,mBApD3C3C,EAAY0C,GADC,IAACA,CAqD2C,EAAAhE,SACrDC,EAACiE,GAAMC,aAAc1C,GAAwB,QAAhBT,EAAIiB,EAAMmC,cAAMpD,IAAAA,EAAAA,EAAS,EAAGX,MAAM,QAAOL,SACpEC,EAACoE,EAAwB,CAAC1D,SAAS,cAGtCkB,EACC5B,EAACqE,EAAM,CACLC,OAAO,QACPC,KAAMC,QAAQpD,GACda,QAASA,EACTwC,mBACA,EAAAC,WAAY,CAAEvE,GAAI,CAAER,MAAO,qBAAsBgF,SAAU,eAE3D3E,EAAC4E,YAAM1C,QAGTlC,EAAC6E,GACCJ,mBAAiB,EACjBrD,SAAUA,EACVmD,KAAMC,QAAQpD,GACda,QAASA,EACT6C,aAAc,CAAEC,SAAU,MAAOC,WAAY,SAC7CC,gBAAiB,CAAEF,SAAU,MAAOC,WAAY,SAChDE,cAAe,CAAEC,UAAW,MAAOhF,GAAI,CAAEiF,QAAS,OAAQC,cAAe,WAAYtF,SAErFC,EAAC4E,EAAI,CAAA7E,SAAEmC,UAKjB,EAEaoD,EAAmB,SAACC,GAC/B,IAAMC,EAA6C,SAAC3E,GAAK,OAAKb,EAACY,EAAU6E,EAAAA,EAAA,CAAA,EAAKF,GAAY1E,GAAS,EAEnG,OADA2E,EAAYE,YAAc,aACnBF,CACT"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{slicedToArray as o,objectSpread2 as r}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as
|
|
1
|
+
import{slicedToArray as o,objectSpread2 as r}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as a,jsx as e}from"react/jsx-runtime";import{useState as i}from"react";import{styled as n,Button as t,IconButton as s,Box as d}from"@mui/material";import c from"@mui/icons-material/Close";import l from"@mui/icons-material/Check";import p from"@mui/icons-material/Remove";var f=n(t)({color:"#fff",padding:"6px 16px",borderRadius:"6px",border:"none",minWidth:"120px",height:"36px",boxShadow:"0 2px 8px rgba(27, 25, 24, 0.2)",background:"linear-gradient(45deg, #d32f2f 0%, #f9a925 70%, #d32f2f 100%)",backgroundSize:"200% auto",transition:"background-position 0.5s ease, box-shadow 0.3s ease, color 0.25s ease","&, .MuiTypography-root":{lineHeight:1,fontWeight:500,textTransform:"unset",fontSize:"16px"},"&:hover":{backgroundPosition:"100% 0",boxShadow:"0 4px 16px rgba(252, 228, 19, 0.23)"},"@keyframes gentleBounceY":{"0%, 5%":{transform:"translateY(0)"},"20%":{transform:"translateY(-3px)"},"30%":{transform:"translateY(-2px)"},"40%":{transform:"translateY(-3px)"},"50%":{transform:"translateY(-2px)"},"75%, 100%":{transform:"translateY(0)"}},"&:not(:hover).animate-bounce":{animation:"gentleBounceY 3s cubic-bezier(0.4, 0.8, 0.4, 1) infinite"}}),m=n(s)({color:"#fff",border:"none",flex:"0 0 auto",width:"unset",boxShadow:"0 2px 8px rgba(27, 25, 24, 0.2)",background:"linear-gradient(45deg, #d32f2f 0%, #fbc02d 70%, #d32f2f 100%)",backgroundSize:"165% auto",transition:"background-position 0.5s ease, box-shadow 0.3s ease","&:hover":{backgroundPosition:"100% 0",boxShadow:"0 4px 16px rgba(252, 228, 19, 0.23)"}});m.displayName="IconButtonOrange";var u=n(s)(function(o){var r=o.theme;return{color:r.palette.common.white,borderRadius:"8px",padding:"8px",width:"auto","&:hover":{backgroundColor:"rgba(255, 255, 255, 0.08)",color:r.palette.common.white},"&:focus":{backgroundColor:"rgba(255, 255, 255, 0.12)"}}}),x=function(n){var t=n.onAccept,f=n.size,m=void 0===f?"small":f,u=n.disabled,x=void 0!==u&&u,b=n.slots,g=void 0===b?{}:b,h=i(!1),k=o(h,2),v=k[0],z=k[1];return v?a(d,{sx:r({display:"flex",gap:.5},g.sxLayout),children:[e(s,r(r({size:m,onClick:function(o){o.stopPropagation(),t(),z(!1)},sx:{color:"success.main"},disabled:x},g.confirmProps),{},{children:e(l,{fontSize:m})})),e(s,r(r({size:m,onClick:function(o){o.stopPropagation(),z(!1)},sx:{color:"error.main"},disabled:x},g.cancelProps),{},{children:e(c,{fontSize:m})}))]}):e(d,{sx:r({},g.sxLayout),children:e(s,r(r({size:m,onClick:function(o){o.stopPropagation(),z(!0)},disabled:x,color:"error"},g.removeProps),{},{children:e(p,{fontSize:m})}))})};export{f as ButtonOrange,x as IconButtonConfirm,u as IconButtonDark,m as IconButtonOrange};
|
|
2
2
|
//# sourceMappingURL=buttons.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"buttons.js","sources":["../../src/components/buttons.tsx"],"sourcesContent":["import { useState } from 'react'\r\nimport { Button, IconButton, styled, Box } from '@mui/material'\r\nimport type { ComponentType, FC } from 'react'\r\nimport type { ButtonProps, IconButtonProps
|
|
1
|
+
{"version":3,"file":"buttons.js","sources":["../../src/components/buttons.tsx"],"sourcesContent":["import { useState } from 'react'\r\nimport { Button, IconButton, styled, Box } from '@mui/material'\r\nimport type { ComponentType, FC } from 'react'\r\nimport type { ButtonProps, IconButtonProps } from '@mui/material'\r\nimport CloseIcon from '@mui/icons-material/Close'\r\nimport CheckIcon from '@mui/icons-material/Check'\r\nimport RemoveIcon from '@mui/icons-material/Remove'\r\nimport { Theme } from '@mui/system'\r\n\r\nexport const ButtonOrange: ComponentType<ButtonProps & { [key: string]: any }> = styled(Button)({\r\n color: '#fff',\r\n padding: '6px 16px',\r\n borderRadius: '6px',\r\n border: 'none',\r\n minWidth: '120px',\r\n height: '36px',\r\n boxShadow: '0 2px 8px rgba(27, 25, 24, 0.2)',\r\n background: 'linear-gradient(45deg, #d32f2f 0%, #f9a925 70%, #d32f2f 100%)',\r\n backgroundSize: '200% auto',\r\n transition: 'background-position 0.5s ease, box-shadow 0.3s ease, color 0.25s ease',\r\n '&, .MuiTypography-root': {\r\n lineHeight: 1,\r\n fontWeight: 500,\r\n textTransform: 'unset',\r\n fontSize: '16px'\r\n },\r\n '&:hover': {\r\n backgroundPosition: '100% 0',\r\n boxShadow: '0 4px 16px rgba(252, 228, 19, 0.23)'\r\n },\r\n '@keyframes gentleBounceY': {\r\n '0%, 5%': { transform: 'translateY(0)' },\r\n '20%': { transform: 'translateY(-3px)' },\r\n '30%': { transform: 'translateY(-2px)' },\r\n '40%': { transform: 'translateY(-3px)' },\r\n '50%': { transform: 'translateY(-2px)' },\r\n '75%, 100%': { transform: 'translateY(0)' }\r\n },\r\n '&:not(:hover).animate-bounce': {\r\n animation: 'gentleBounceY 3s cubic-bezier(0.4, 0.8, 0.4, 1) infinite'\r\n }\r\n})\r\n\r\nexport const IconButtonOrange: ComponentType<IconButtonProps & { [key: string]: any }> = styled(IconButton)({\r\n color: '#fff',\r\n border: 'none',\r\n flex: '0 0 auto',\r\n width: 'unset',\r\n boxShadow: '0 2px 8px rgba(27, 25, 24, 0.2)',\r\n background: 'linear-gradient(45deg, #d32f2f 0%, #fbc02d 70%, #d32f2f 100%)',\r\n backgroundSize: '165% auto',\r\n transition: 'background-position 0.5s ease, box-shadow 0.3s ease',\r\n '&:hover': {\r\n backgroundPosition: '100% 0',\r\n boxShadow: '0 4px 16px rgba(252, 228, 19, 0.23)'\r\n }\r\n})\r\nIconButtonOrange.displayName = 'IconButtonOrange'\r\n\r\n// export const IconButtonSquareDark: ComponentType<IconButtonProps & { [key: string]: any }> = styled(IconButton)(({ theme }) => ({\r\n// color: '#fff',\r\n// border: 'none',\r\n// boxShadow: '0 2px 8px rgba(27, 25, 24, 0.2)',\r\n// background: 'linear-gradient(45deg, #333 0%, #555 70%, #333 100%)',\r\n// backgroundSize: '165% auto',\r\n// transition: 'background-position 0.5s ease, box-shadow 0.3s ease',\r\n// '&:hover': {\r\n// backgroundPosition: '100% 0',\r\n// boxShadow: '0 4px 16px rgba(85, 85, 85, 0.23)'\r\n// }\r\n// }))\r\n// IconButtonSquareDark.displayName = 'IconButtonCirDark'\r\n\r\n// Custom IconButton for dark background\r\nexport const IconButtonDark: ComponentType<IconButtonProps> = styled(IconButton)(({ theme }: { theme: Theme }) => ({\r\n color: theme.palette.common.white,\r\n borderRadius: '8px',\r\n padding: '8px',\r\n width: 'auto',\r\n '&:hover': {\r\n backgroundColor: 'rgba(255, 255, 255, 0.08)',\r\n color: theme.palette.common.white\r\n },\r\n '&:focus': {\r\n backgroundColor: 'rgba(255, 255, 255, 0.12)'\r\n }\r\n}))\r\n\r\nexport interface IIconButtonConfirmProps {\r\n onAccept: () => void\r\n size?: 'small' | 'medium' | 'large'\r\n disabled?: boolean\r\n slots?: {\r\n sxLayout?: IconButtonProps['sx']\r\n removeProps?: IconButtonProps\r\n confirmProps?: IconButtonProps\r\n cancelProps?: IconButtonProps\r\n }\r\n}\r\n\r\nexport const IconButtonConfirm: FC<IIconButtonConfirmProps> = (props) => {\r\n const { onAccept, size = 'small', disabled = false, slots = {} } = props\r\n const [isConfirming, setIsConfirming] = useState(false)\r\n\r\n const handleDeleteClick: IconButtonProps['onClick'] = (e) => {\r\n e.stopPropagation()\r\n setIsConfirming(true)\r\n }\r\n\r\n const handleConfirm: IconButtonProps['onClick'] = (e) => {\r\n e.stopPropagation()\r\n onAccept()\r\n setIsConfirming(false)\r\n }\r\n\r\n const handleCancel: IconButtonProps['onClick'] = (e) => {\r\n e.stopPropagation()\r\n setIsConfirming(false)\r\n }\r\n\r\n if (isConfirming) {\r\n return (\r\n <Box sx={{ display: 'flex', gap: 0.5, ...slots.sxLayout }}>\r\n <IconButton size={size} onClick={handleConfirm} sx={{ color: 'success.main' }} disabled={disabled} {...slots.confirmProps}>\r\n <CheckIcon fontSize={size} />\r\n </IconButton>\r\n <IconButton size={size} onClick={handleCancel} sx={{ color: 'error.main' }} disabled={disabled} {...slots.cancelProps}>\r\n <CloseIcon fontSize={size} />\r\n </IconButton>\r\n </Box>\r\n )\r\n }\r\n return (\r\n <Box sx={{...slots.sxLayout}}>\r\n <IconButton size={size} onClick={handleDeleteClick} disabled={disabled} color='error' {...slots.removeProps}>\r\n <RemoveIcon fontSize={size} />\r\n </IconButton>\r\n </Box>\r\n )\r\n}\r\n"],"names":["ButtonOrange","styled","Button","color","padding","borderRadius","border","minWidth","height","boxShadow","background","backgroundSize","transition","lineHeight","fontWeight","textTransform","fontSize","backgroundPosition","transform","animation","IconButtonOrange","IconButton","flex","width","displayName","IconButtonDark","_ref","theme","palette","common","white","backgroundColor","IconButtonConfirm","props","onAccept","_props$size","size","_props$disabled","disabled","_props$slots","slots","_useState","useState","_useState2","_slicedToArray","isConfirming","setIsConfirming","_jsxs","Box","sx","_objectSpread","display","gap","sxLayout","children","_jsx","onClick","e","stopPropagation","confirmProps","CheckIcon","cancelProps","CloseIcon","removeProps","RemoveIcon"],"mappings":"2XASaA,EAAoEC,EAAOC,EAAPD,CAAe,CAC9FE,MAAO,OACPC,QAAS,WACTC,aAAc,MACdC,OAAQ,OACRC,SAAU,QACVC,OAAQ,OACRC,UAAW,kCACXC,WAAY,gEACZC,eAAgB,YAChBC,WAAY,wEACZ,yBAA0B,CACxBC,WAAY,EACZC,WAAY,IACZC,cAAe,QACfC,SAAU,QAEZ,UAAW,CACTC,mBAAoB,SACpBR,UAAW,uCAEb,2BAA4B,CAC1B,SAAU,CAAES,UAAW,iBACvB,MAAO,CAAEA,UAAW,oBACpB,MAAO,CAAEA,UAAW,oBACpB,MAAO,CAAEA,UAAW,oBACpB,MAAO,CAAEA,UAAW,oBACpB,YAAa,CAAEA,UAAW,kBAE5B,+BAAgC,CAC9BC,UAAW,8DAIFC,EAA4EnB,EAAOoB,EAAPpB,CAAmB,CAC1GE,MAAO,OACPG,OAAQ,OACRgB,KAAM,WACNC,MAAO,QACPd,UAAW,kCACXC,WAAY,gEACZC,eAAgB,YAChBC,WAAY,sDACZ,UAAW,CACTK,mBAAoB,SACpBR,UAAW,yCAGfW,EAAiBI,YAAc,mBAiBxB,IAAMC,EAAiDxB,EAAOoB,EAAPpB,CAAmB,SAAAyB,GAAA,IAAGC,EAAKD,EAALC,MAAK,MAA0B,CACjHxB,MAAOwB,EAAMC,QAAQC,OAAOC,MAC5BzB,aAAc,MACdD,QAAS,MACTmB,MAAO,OACP,UAAW,CACTQ,gBAAiB,4BACjB5B,MAAOwB,EAAMC,QAAQC,OAAOC,OAE9B,UAAW,CACTC,gBAAiB,6BAEpB,GAcYC,EAAiD,SAACC,GAC7D,IAAQC,EAA2DD,EAA3DC,SAAQC,EAAmDF,EAAjDG,KAAAA,OAAO,IAAHD,EAAG,QAAOA,EAAAE,EAAmCJ,EAAjCK,SAAAA,OAAW,IAAHD,GAAQA,EAAAE,EAAiBN,EAAfO,MAAAA,OAAK,IAAAD,EAAG,CAAA,EAAEA,EAC9DE,EAAwCC,GAAS,GAAMC,EAAAC,EAAAH,EAAA,GAAhDI,EAAYF,EAAA,GAAEG,EAAeH,EAAA,GAkBpC,OAAIE,EAEAE,EAACC,EAAG,CAACC,GAAEC,EAAA,CAAIC,QAAS,OAAQC,IAAK,IAAQZ,EAAMa,UAC7CC,SAAA,CAAAC,EAAClC,EAAU6B,EAAAA,EAAA,CAACd,KAAMA,EAAMoB,QAdoB,SAACC,GACjDA,EAAEC,kBACFxB,IACAY,GAAgB,EACjB,EAUqDG,GAAI,CAAE9C,MAAO,gBAAkBmC,SAAUA,GAAcE,EAAMmB,cAAY,GAAA,UACvHJ,EAACK,GAAU5C,SAAUoB,OAEvBmB,EAAClC,EAAU6B,EAAAA,EAAA,CAACd,KAAMA,EAAMoB,QAXmB,SAACC,GAChDA,EAAEC,kBACFZ,GAAgB,EACjB,EAQoDG,GAAI,CAAE9C,MAAO,cAAgBmC,SAAUA,GAAcE,EAAMqB,aAAW,GAAA,UACnHN,EAACO,GAAU9C,SAAUoB,UAM3BmB,EAACP,EAAG,CAACC,GAAEC,EAAA,GAAMV,EAAMa,UAASC,SAC1BC,EAAClC,EAAU6B,EAAAA,EAAA,CAACd,KAAMA,EAAMoB,QA9B0B,SAACC,GACrDA,EAAEC,kBACFZ,GAAgB,EACjB,EA2BuDR,SAAUA,EAAUnC,MAAM,SAAYqC,EAAMuB,aAAW,GAAA,UACzGR,EAACS,GAAWhD,SAAUoB,QAI9B"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{objectSpread2 as l}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as o,Fragment as i,jsxs as t}from"react/jsx-runtime";import e from"@mui/icons-material/ArrowForward";import{Typography as n}from"@mui/material";import{Header as d,HeaderLeft as r,Footer as s,Root as u,Body as v,Items as a}from"./styled.js";import{NoDataPanel as m}from"../../components/no-data-panel.js";import{ButtonOrange as c}from"../../components/buttons.js";var p=function(p){var h=function(h){var f,b,y,g,x,C,P,j,k,M,S,T,w,I,R,W,z,F,L,N,_,A,B,H,q,D,E,G,J,K=null!==(f=h.carts)&&void 0!==f?f:[],O={carts:K,isMobile:h.isMobile,labels:l(l({},null!==(b=null==p?void 0:p.labels)&&void 0!==b?b:{}),null!==(y=null===(g=h.options)||void 0===g?void 0:g.labels)&&void 0!==y?y:{}),empty:l(l({},null!==(x=null==p?void 0:p.empty)&&void 0!==x?x:{}),null!==(C=null===(P=h.options)||void 0===P?void 0:P.empty)&&void 0!==C?C:{})},Q=function(l,o){return l?"function"==typeof l?l(O):l:o},U=o(m,{title:null===(j=O.empty)||void 0===j?void 0:j.title,subTitle:null===(k=O.empty)||void 0===k?void 0:k.subTitle,sx:{m:1,flex:1}}),V=o(i,{children:K.length>0?K.map(function(l,o){var i;return null!==(i=h.slots)&&void 0!==i&&i.item?h.slots.item(l,o,O):null}):null!==(M=Q(null===(S=h.slots)||void 0===S?void 0:S.empty,null))&&void 0!==M?M:U}),X=t(d,l(l({flexWrap:"wrap"},null===(T=h.slots)||void 0===T?void 0:T.headerProps),{},{children:[Q(null===(w=h.slots)||void 0===w?void 0:w.headerLeft,t(r,l(l({},null===(I=h.slots)||void 0===I?void 0:I.headerLeftProps),{},{children:[o(n,{variant:"h5",component:"h2",fontWeight:"bold",children:null===(R=O.labels)||void 0===R?void 0:R.title}),t(n,{variant:"body2",sx:{color:"var(--color-text-secondary)"},children:[null!==(W=K.length)&&void 0!==W?W:0," ",1===K.length?null===(z=O.labels)||void 0===z?void 0:z.itemsSuffixSingle:null===(F=O.labels)||void 0===F?void 0:F.itemsSuffixMany," in total"]})]}))),(null===(L=h.slots)||void 0===L?void 0:L.headerRight)&&Q(null===(N=h.slots)||void 0===N?void 0:N.headerRight,null)]})),Y=o(s,{children:o(c,l(l(l({variant:"contained",size:"medium",endIcon:o(e,{}),onClick:function(l){var o,i;null===(o=h.onClose)||void 0===o||o.call(h),null===(i=h.onCheckout)||void 0===i||i.call(h,l)},disabled:K.length<1,sx:{height:"56px",borderRadius:3,fontWeight:700,fontSize:"1rem",backgroundColor:"#e88c3f",textTransform:"none"}},h.buttonMoveToCartProps),h.buttonCheckoutProps),{},{children:(null===(_=h.buttonMoveToCartProps)||void 0===_?void 0:_.children)||(null===(A=h.buttonCheckoutProps)||void 0===A?void 0:A.children)||(null===(B=O.labels)||void 0===B?void 0:B.buttonCheckout)}))});return t(u,{className:h.isMobile?"mobile":"",children:[Q(null===(H=h.slots)||void 0===H?void 0:H.header,X),o(v,{children:t(a,{children:[Q(null===(q=h.slots)||void 0===q?void 0:q.beforeItems,null),null!==(D=Q(null===(E=h.slots)||void 0===E?void 0:E.items,V))&&void 0!==D?D:V,Q(null===(G=h.slots)||void 0===G?void 0:G.afterItems,null)]})}),Q(null===(J=h.slots)||void 0===J?void 0:J.footer,Y)]})};return h.displayName="FactoryCartContent",h};export{p as createCartContent,p as default};
|
|
2
|
+
//# sourceMappingURL=create.cart-content.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"create.cart-content.js","sources":["../../../src/factory/cart-content/create.cart-content.tsx"],"sourcesContent":["import React, { ComponentType } from 'react'\r\nimport ArrowForwardIcon from '@mui/icons-material/ArrowForward'\r\nimport { Typography } from '@mui/material'\r\nimport { ButtonOrange, NoDataPanel } from '../../components'\r\nimport { Root, Header, HeaderLeft, Body, Items, Footer } from './styled'\r\nimport type { ICartContentProps, ICartContentViewContext, ICartContentOptions } from './types'\r\n\r\nexport const createCartContent = <T = {},>(defaultOptions?: ICartContentOptions): ComponentType<ICartContentProps<T>> => {\r\n const FactoryCartContent: ComponentType<ICartContentProps<T>> = (props) => {\r\n const carts = props.carts ?? []\r\n const viewContext: ICartContentViewContext<T> = {\r\n carts: carts as T[],\r\n isMobile: props.isMobile,\r\n labels: {\r\n ...(defaultOptions?.labels ?? {}),\r\n ...(props.options?.labels ?? {})\r\n },\r\n empty: {\r\n ...(defaultOptions?.empty ?? {}),\r\n ...(props.options?.empty ?? {})\r\n }\r\n }\r\n\r\n const resolveSlot = (slot: any, defaultNode: React.ReactNode) => {\r\n if (!slot) return defaultNode\r\n if (typeof slot === 'function') return slot(viewContext)\r\n return slot\r\n }\r\n\r\n const emptyDefault = <NoDataPanel title={viewContext.empty?.title} subTitle={viewContext.empty?.subTitle} sx={{ m: 1, flex: 1 }} />\r\n const itemsNode = (\r\n <>\r\n {carts.length > 0\r\n ? carts.map((it, i) => (props.slots?.item ? props.slots.item(it as T, i, viewContext) : null))\r\n : (resolveSlot(props.slots?.empty, null) ?? emptyDefault)}\r\n </>\r\n )\r\n\r\n const headerNode = (\r\n <Header flexWrap={'wrap'} {...props.slots?.headerProps}>\r\n {resolveSlot(\r\n props.slots?.headerLeft,\r\n <HeaderLeft {...props.slots?.headerLeftProps}>\r\n <Typography variant='h5' component='h2' fontWeight={'bold'}>\r\n {viewContext.labels?.title}\r\n </Typography>\r\n <Typography variant='body2' sx={{ color: 'var(--color-text-secondary)' }}>\r\n {carts.length ?? 0} {carts.length === 1 ? viewContext.labels?.itemsSuffixSingle : viewContext.labels?.itemsSuffixMany} in total\r\n </Typography>\r\n </HeaderLeft>\r\n )}\r\n {props.slots?.headerRight && resolveSlot(props.slots?.headerRight, null)}\r\n </Header>\r\n )\r\n\r\n const footerNode = (\r\n <Footer>\r\n <ButtonOrange\r\n variant='contained'\r\n size='medium'\r\n endIcon={<ArrowForwardIcon />}\r\n onClick={(e) => {\r\n props.onClose?.()\r\n props.onCheckout?.(e as React.MouseEvent<HTMLButtonElement, MouseEvent>)\r\n }}\r\n disabled={carts.length < 1}\r\n sx={{ height: '56px', borderRadius: 3, fontWeight: 700, fontSize: '1rem', backgroundColor: '#e88c3f', textTransform: 'none' }}\r\n {...props.buttonMoveToCartProps}\r\n {...props.buttonCheckoutProps}\r\n >\r\n {props.buttonMoveToCartProps?.children || props.buttonCheckoutProps?.children || viewContext.labels?.buttonCheckout}\r\n </ButtonOrange>\r\n </Footer>\r\n )\r\n\r\n return (\r\n <Root className={props.isMobile ? 'mobile' : ''}>\r\n {resolveSlot(props.slots?.header, headerNode)}\r\n <Body>\r\n <Items>\r\n {resolveSlot(props.slots?.beforeItems, null)}\r\n {resolveSlot(props.slots?.items, itemsNode) ?? itemsNode}\r\n {resolveSlot(props.slots?.afterItems, null)}\r\n </Items>\r\n </Body>\r\n {resolveSlot(props.slots?.footer, footerNode)}\r\n </Root>\r\n )\r\n }\r\n\r\n FactoryCartContent.displayName = 'FactoryCartContent'\r\n return FactoryCartContent\r\n}\r\n\r\nexport default createCartContent\r\n"],"names":["createCartContent","defaultOptions","FactoryCartContent","props","_props$carts","_defaultOptions$label","_props$options$labels","_props$options","_defaultOptions$empty","_props$options$empty","_props$options2","_viewContext$empty","_viewContext$empty2","_resolveSlot","_props$slots2","_props$slots3","_props$slots4","_props$slots5","_viewContext$labels","_carts$length","_viewContext$labels2","_viewContext$labels3","_props$slots6","_props$slots7","_props$buttonMoveToCa","_props$buttonCheckout","_viewContext$labels4","_props$slots8","_props$slots9","_resolveSlot2","_props$slots0","_props$slots1","_props$slots10","carts","viewContext","isMobile","labels","_objectSpread","options","empty","resolveSlot","slot","defaultNode","emptyDefault","_jsx","NoDataPanel","title","subTitle","sx","m","flex","itemsNode","_Fragment","children","length","map","it","i","_props$slots","slots","item","headerNode","_jsxs","Header","flexWrap","headerProps","headerLeft","HeaderLeft","headerLeftProps","Typography","variant","component","fontWeight","color","itemsSuffixSingle","itemsSuffixMany","headerRight","footerNode","Footer","ButtonOrange","size","endIcon","ArrowForwardIcon","onClick","e","_props$onClose","_props$onCheckout","onClose","call","onCheckout","disabled","height","borderRadius","fontSize","backgroundColor","textTransform","buttonMoveToCartProps","buttonCheckoutProps","buttonCheckout","Root","className","header","Body","Items","beforeItems","items","afterItems","footer","displayName"],"mappings":"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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{styled as r,Box as e,Stack as o}from"@mui/material";var t=r(e)(function(r){var e=r.theme;return{"--height-item":"auto","--color-bg":"var(--cart-color-bg, ".concat("dark"===e.palette.mode?"#1a1a1a":"#FFFFFF",")"),"--color-bg-secondary":"var(--cart-color-bg-secondary, ".concat("dark"===e.palette.mode?"#0F0F0F":"#F9FAFB",")"),"--color-text":e.palette.text.primary,"--color-text-secondary":"dark"===e.palette.mode?"#a1a1aa":"#64748b","--color-border":"dark"===e.palette.mode?"#27272a":"#f1f5f9","--color-primary":e.palette.primary.main||"#E11D48","--border-radius":"12px","--border-radius-lg":"16px",flex:"1",display:"flex",flexDirection:"column",minHeight:0,maxHeight:"60vh","&.mobile":{height:"100%",maxHeight:"none"}}}),a=r(o)(function(r){var e=r.theme;return{padding:e.spacing(1,2),justifyContent:"space-between",flexDirection:"row",alignItems:"center",gap:e.spacing(2),position:"sticky",top:0,background:"var(--color-bg)",backdropFilter:"blur(20px)",WebkitBackdropFilter:"blur(20px)",zIndex:2,borderBottom:"1px solid var(--color-border)"}}),i=r(o)(function(){return{gap:4}}),n=r(e)(function(){return{flex:1,minHeight:0,overflowY:"auto"}}),c=r(e)(function(r){var e=r.theme;return{padding:e.spacing(1),display:"flex",flexDirection:"column",gap:e.spacing(1)}}),l=r(e)(function(r){return{padding:"24px",display:"flex",flexDirection:"column",gap:r.theme.spacing(2),position:"sticky",bottom:0,background:"var(--color-bg)",zIndex:1,borderTop:"1px solid var(--color-border)"}});export{n as Body,l as Footer,a as Header,i as HeaderLeft,c as Items,t as Root,t as default};
|
|
2
|
+
//# sourceMappingURL=styled.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styled.js","sources":["../../../src/factory/cart-content/styled.tsx"],"sourcesContent":["import { Box, BoxProps, Stack, StackProps, styled } from '@mui/material'\r\nimport type { ComponentType } from 'react'\r\n\r\nexport const Root: ComponentType<BoxProps> = styled(Box)(({ theme }) => ({\r\n '--height-item': 'auto',\r\n '--color-bg': `var(--cart-color-bg, ${theme.palette.mode === 'dark' ? '#1a1a1a' : '#FFFFFF'})`,\r\n '--color-bg-secondary': `var(--cart-color-bg-secondary, ${theme.palette.mode === 'dark' ? '#0F0F0F' : '#F9FAFB'})`,\r\n '--color-text': theme.palette.text.primary,\r\n '--color-text-secondary': theme.palette.mode === 'dark' ? '#a1a1aa' : '#64748b',\r\n '--color-border': theme.palette.mode === 'dark' ? '#27272a' : '#f1f5f9',\r\n '--color-primary': theme.palette.primary.main || '#E11D48',\r\n '--border-radius': '12px',\r\n '--border-radius-lg': '16px',\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\r\nexport const Header: ComponentType<StackProps> = styled(Stack)(({ theme }) => ({\r\n padding: theme.spacing(1, 2),\r\n justifyContent: 'space-between',\r\n flexDirection: 'row',\r\n alignItems: 'center',\r\n gap: theme.spacing(2),\r\n position: 'sticky',\r\n top: 0,\r\n background: 'var(--color-bg)',\r\n backdropFilter: 'blur(20px)',\r\n WebkitBackdropFilter: 'blur(20px)',\r\n zIndex: 2,\r\n borderBottom: '1px solid var(--color-border)'\r\n}))\r\n\r\nexport const HeaderLeft: ComponentType<StackProps> = styled(Stack)(() => ({ gap: 4 }))\r\n\r\nexport const Body: ComponentType<BoxProps> = styled(Box)(() => ({ flex: 1, minHeight: 0, overflowY: 'auto' }))\r\n\r\nexport const Items: ComponentType<BoxProps> = styled(Box)(({ theme }) => ({\r\n padding: theme.spacing(1),\r\n display: 'flex',\r\n flexDirection: 'column',\r\n gap: theme.spacing(1)\r\n}))\r\n\r\nexport const Footer: ComponentType<BoxProps> = styled(Box)(({ theme }) => ({\r\n padding: '24px',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n gap: theme.spacing(2),\r\n position: 'sticky',\r\n bottom: 0,\r\n background: 'var(--color-bg)',\r\n zIndex: 1,\r\n borderTop: '1px solid var(--color-border)'\r\n}))\r\n\r\nexport default Root\r\n"],"names":["Root","styled","Box","_ref","theme","concat","palette","mode","text","primary","main","flex","display","flexDirection","minHeight","maxHeight","height","Header","Stack","_ref2","padding","spacing","justifyContent","alignItems","gap","position","top","background","backdropFilter","WebkitBackdropFilter","zIndex","borderBottom","HeaderLeft","Body","overflowY","Items","_ref3","Footer","_ref4","bottom","borderTop"],"mappings":"2DAGO,IAAMA,EAAgCC,EAAOC,EAAPD,CAAY,SAAAE,GAAA,IAAGC,EAAKD,EAALC,MAAK,MAAQ,CACvE,gBAAiB,OACjB,aAAYC,wBAAAA,OAAiD,SAAvBD,EAAME,QAAQC,KAAkB,UAAY,UAAY,KAC9F,uBAAsBF,kCAAAA,OAA2D,SAAvBD,EAAME,QAAQC,KAAkB,UAAY,UAAY,KAClH,eAAgBH,EAAME,QAAQE,KAAKC,QACnC,yBAAiD,SAAvBL,EAAME,QAAQC,KAAkB,UAAY,UACtE,iBAAyC,SAAvBH,EAAME,QAAQC,KAAkB,UAAY,UAC9D,kBAAmBH,EAAME,QAAQG,QAAQC,MAAQ,UACjD,kBAAmB,OACnB,qBAAsB,OACtBC,KAAM,IACNC,QAAS,OACTC,cAAe,SACfC,UAAW,EACXC,UAAW,OACX,WAAY,CAAEC,OAAQ,OAAQD,UAAW,QAC1C,GAEYE,EAAoChB,EAAOiB,EAAPjB,CAAc,SAAAkB,GAAA,IAAGf,EAAKe,EAALf,MAAK,MAAQ,CAC7EgB,QAAShB,EAAMiB,QAAQ,EAAG,GAC1BC,eAAgB,gBAChBT,cAAe,MACfU,WAAY,SACZC,IAAKpB,EAAMiB,QAAQ,GACnBI,SAAU,SACVC,IAAK,EACLC,WAAY,kBACZC,eAAgB,aAChBC,qBAAsB,aACtBC,OAAQ,EACRC,aAAc,gCACf,GAEYC,EAAwC/B,EAAOiB,EAAPjB,CAAc,WAAA,MAAO,CAAEuB,IAAK,EAAG,GAEvES,EAAgChC,EAAOC,EAAPD,CAAY,WAAA,MAAO,CAAEU,KAAM,EAAGG,UAAW,EAAGoB,UAAW,OAAQ,GAE/FC,EAAiClC,EAAOC,EAAPD,CAAY,SAAAmC,GAAA,IAAGhC,EAAKgC,EAALhC,MAAK,MAAQ,CACxEgB,QAAShB,EAAMiB,QAAQ,GACvBT,QAAS,OACTC,cAAe,SACfW,IAAKpB,EAAMiB,QAAQ,GACpB,GAEYgB,EAAkCpC,EAAOC,EAAPD,CAAY,SAAAqC,GAAQ,MAAQ,CACzElB,QAAS,OACTR,QAAS,OACTC,cAAe,SACfW,IAJiEc,EAALlC,MAIjDiB,QAAQ,GACnBI,SAAU,SACVc,OAAQ,EACRZ,WAAY,kBACZG,OAAQ,EACRU,UAAW,gCACZ"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{objectSpread2 as t}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as o,jsxs as r}from"react/jsx-runtime";import{useMemo as e}from"react";import{Typography as l}from"@mui/material";import{ItemTitle as i,ItemRoot as n,ItemImg as a,ItemContent as s}from"./styled.js";import{IconButtonConfirm as u}from"../../components/buttons.js";var m=function(m){var d=function(d){var c,p,v,f={item:d.item},b=e(function(){var t,o;return{slots:null!==(t=null!==(o=d.slots)&&void 0!==o?o:null==m?void 0:m.slots)&&void 0!==t?t:{}}},[]),g=function(t,o){return t?"function"==typeof t?t(f):t:o},x=o(i,{children:o(l,t(t({variant:"subtitle1",title:d.name},null!==(c=d.itemTitleProps)&&void 0!==c?c:d.itemTitlePropsGetter?d.itemTitlePropsGetter(d.item,d.onClose):{}),{},{children:d.name}))});return r(n,{children:[o(a,{src:d.imageUrl,fallbackSrc:"images/default-video.webp",alt:"product-picture"}),r(s,{children:[o(u,{size:"small",onAccept:function(){var t;return null===(t=d.onRemoveCart)||void 0===t?void 0:t.call(d,d.item)},slots:{sxLayout:{position:"absolute",left:0,top:0,flexDirection:"row-reverse",borderTopLeftRadius:"24px",borderBottomRightRadius:"16px",backgroundColor:"rgba(var(--color-bg-rgb), 0.7)"},removeProps:{sx:{color:"#dd5b5b"}}}}),g(null===(p=b.slots)||void 0===p?void 0:p.beforeTile,null),x,g(null===(v=b.slots)||void 0===v?void 0:v.afterTile,null)]})]})};return d.displayName="FactoryCartItem",d};export{m as createCartItem,m as default};
|
|
2
|
+
//# sourceMappingURL=create.cart-item.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"create.cart-item.js","sources":["../../../src/factory/cart-item/create.cart-item.tsx"],"sourcesContent":["import { ComponentType, useMemo } from 'react'\r\nimport { Typography } from '@mui/material'\r\nimport { ItemContent, ItemImg, ItemRoot, ItemTitle } from './styled'\r\nimport IFactoryCartProps, { ICartContext, ICartOptions } from './types'\r\nimport { IconButtonConfirm } from '../../components'\r\n\r\nexport const createCartItem = <T = {},>(configs?: ICartOptions<T>): ComponentType<IFactoryCartProps<T>> => {\r\n const CartItem: ComponentType<IFactoryCartProps<T>> = (props) => {\r\n const viewContext: ICartContext<T> = { item: props.item }\r\n\r\n const initConfigs = useMemo(\r\n () => ({\r\n slots: props.slots ?? configs?.slots ?? {}\r\n }),\r\n []\r\n )\r\n\r\n const resolveSlot = (slot: any, defaultNode: React.ReactNode) => {\r\n if (!slot) return defaultNode\r\n if (typeof slot === 'function') return slot(viewContext)\r\n return slot\r\n }\r\n\r\n const titleNode = (\r\n <ItemTitle>\r\n <Typography\r\n variant='subtitle1'\r\n title={props.name}\r\n {...(props.itemTitleProps ?? (props.itemTitlePropsGetter ? props.itemTitlePropsGetter(props.item, props.onClose) : {}))}\r\n >\r\n {props.name}\r\n </Typography>\r\n </ItemTitle>\r\n )\r\n\r\n return (\r\n <ItemRoot>\r\n <ItemImg src={props.imageUrl} fallbackSrc='images/default-video.webp' alt='product-picture' />\r\n <ItemContent>\r\n <IconButtonConfirm\r\n size='small'\r\n onAccept={() => props.onRemoveCart?.(props.item)}\r\n slots={{\r\n sxLayout: {\r\n position: 'absolute',\r\n left: 0,\r\n top: 0,\r\n flexDirection: 'row-reverse',\r\n borderTopLeftRadius: '24px',\r\n borderBottomRightRadius: '16px',\r\n backgroundColor: 'rgba(var(--color-bg-rgb), 0.7)'\r\n },\r\n removeProps: { sx: { color: '#dd5b5b' } }\r\n }}\r\n />\r\n {resolveSlot(initConfigs.slots?.beforeTile, null)}\r\n {titleNode}\r\n {resolveSlot(initConfigs.slots?.afterTile, null)}\r\n </ItemContent>\r\n </ItemRoot>\r\n )\r\n }\r\n\r\n CartItem.displayName = 'FactoryCartItem'\r\n return CartItem\r\n}\r\n\r\nexport default createCartItem\r\n"],"names":["createCartItem","configs","CartItem","props","_props$itemTitleProps","_initConfigs$slots","_initConfigs$slots2","viewContext","item","initConfigs","useMemo","_ref","_props$slots","slots","resolveSlot","slot","defaultNode","titleNode","_jsx","ItemTitle","children","Typography","_objectSpread","variant","title","name","itemTitleProps","itemTitlePropsGetter","onClose","_jsxs","ItemRoot","ItemImg","src","imageUrl","fallbackSrc","alt","ItemContent","IconButtonConfirm","size","onAccept","_props$onRemoveCart","onRemoveCart","call","sxLayout","position","left","top","flexDirection","borderTopLeftRadius","borderBottomRightRadius","backgroundColor","removeProps","sx","color","beforeTile","afterTile","displayName"],"mappings":"iWAMaA,EAAiB,SAAUC,GACtC,IAAMC,EAAgD,SAACC,GAAS,IAAAC,EAAAC,EAAAC,EACxDC,EAA+B,CAAEC,KAAML,EAAMK,MAE7CC,EAAcC,EAClB,WAAA,IAAAC,EAAAC,EAAA,MAAO,CACLC,MAAoC,QAA/BF,EAAaC,QAAbA,EAAET,EAAMU,aAAKD,IAAAA,EAAAA,EAAIX,aAAO,EAAPA,EAASY,aAAK,IAAAF,EAAAA,EAAI,CAAA,EACxC,EACF,IAGIG,EAAc,SAACC,EAAWC,GAC9B,OAAKD,EACe,mBAATA,EAA4BA,EAAKR,GACrCQ,EAFWC,CAGnB,EAEKC,EACJC,EAACC,EACC,CAAAC,SAAAF,EAACG,EAAUC,EAAAA,EAAA,CACTC,QAAQ,YACRC,MAAOrB,EAAMsB,MACY,QADRrB,EACZD,EAAMuB,sBAAc,IAAAtB,EAAAA,EAAKD,EAAMwB,qBAAuBxB,EAAMwB,qBAAqBxB,EAAMK,KAAML,EAAMyB,SAAW,IAAE,GAAA,CAAER,SAEtHjB,EAAMsB,UAKb,OACEI,EAACC,EAAQ,CAAAV,SAAA,CACPF,EAACa,EAAO,CAACC,IAAK7B,EAAM8B,SAAUC,YAAY,4BAA4BC,IAAI,oBAC1EN,EAACO,aACClB,EAACmB,GACCC,KAAK,QACLC,SAAU,WAAF,IAAAC,EAAA,eAAAA,EAAQrC,EAAMsC,oBAAY,IAAAD,OAAA,EAAlBA,EAAAE,KAAAvC,EAAqBA,EAAMK,KAAK,EAChDK,MAAO,CACL8B,SAAU,CACRC,SAAU,WACVC,KAAM,EACNC,IAAK,EACLC,cAAe,cACfC,oBAAqB,OACrBC,wBAAyB,OACzBC,gBAAiB,kCAEnBC,YAAa,CAAEC,GAAI,CAAEC,MAAO,eAG/BvC,EAA6B,QAAlBT,EAACI,EAAYI,aAAZR,IAAiBA,OAAjBA,EAAAA,EAAmBiD,WAAY,MAC3CrC,EACAH,EAA6BR,QAAlBA,EAACG,EAAYI,iBAAKP,SAAjBA,EAAmBiD,UAAW,WAIlD,EAGD,OADArD,EAASsD,YAAc,kBAChBtD,CACT"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{styled as e,Box as o,alpha as r}from"@mui/material";import{ImageWithFallback as t}from"dinocollab-core/components";var a=e(o)(function(e){var o=e.theme;return{"--height-item":"auto","--color-bg":"dark"===o.palette.mode?"#1A1A1A":"#FFFFFF","--color-bg-rgb":"dark"===o.palette.mode?"26, 26, 26":"255, 255, 255","--color-bg-secondary":"dark"===o.palette.mode?"#0F0F0F":"#F9FAFB","--color-text":"dark"===o.palette.mode?o.palette.common.white:o.palette.common.black,"--color-text-secondary":"dark"===o.palette.mode?"#a1a1aa":"#64748b","--color-border":"dark"===o.palette.mode?"#27272a":"#f1f5f9","--border-radius":"6px","--border-radius-lg":"16px","--mui-palette-text-primary":"dark"===o.palette.mode?"#FFFFFF":"#000000",position:"relative",display:"flex",gap:o.spacing(1),padding:o.spacing(1),background:"rgba(var(--color-bg-rgb), 0.7)",borderRadius:"var(--border-radius-lg)",border:"1px solid var(--color-border)",transition:"all 0.2s ease","& a":{textDecoration:"none",color:"var(--color-text)"},"&:hover":{boxShadow:"0 0 0 1px ".concat(r(o.palette.primary.main||"#E11D48",.2)),borderColor:r(o.palette.primary.main||"#E11D48",.3)},"&:hover a":{textDecoration:"underline"}}}),i=e(t)(function(e){var o=e.theme;return{height:"62px",aspectRatio:"1 / 1",borderRadius:"var(--border-radius)",objectFit:"cover",flex:"0 0 auto",backgroundColor:"dark"===o.palette.mode?"#27272a":r(o.palette.grey[200],.5)}}),l=e(o)({flex:1,marginBlock:" auto",alignItems:"flex-start",display:"flex",flexDirection:"column",justifyContent:"space-between",minWidth:0}),d=e(o)(function(e){return{color:"var(--color-text)",fontWeight:600,fontSize:"0.875rem",lineHeight:1.25,marginBlock:e.theme.spacing(.5),minWidth:0,width:"100%",overflow:"hidden",textOverflow:"ellipsis",display:"-webkit-box",WebkitLineClamp:1,WebkitBoxOrient:"vertical"}});export{l as ItemContent,i as ItemImg,a as ItemRoot,d as ItemTitle};
|
|
2
|
+
//# sourceMappingURL=styled.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styled.js","sources":["../../../src/factory/cart-item/styled.tsx"],"sourcesContent":["import { Box, styled, alpha } from '@mui/material'\r\nimport { ImageWithFallback } from 'dinocollab-core/components'\r\nimport type { ComponentType } from 'react'\r\nimport type { BoxProps } from '@mui/material'\r\nimport type { IImageWithFallbackProps } from 'dinocollab-core/components'\r\n\r\nexport const ItemRoot: ComponentType<BoxProps> = styled(Box)(({ theme }) => ({\r\n '--height-item': 'auto',\r\n '--color-bg': theme.palette.mode === 'dark' ? '#1A1A1A' : '#FFFFFF',\r\n '--color-bg-rgb': theme.palette.mode === 'dark' ? '26, 26, 26' : '255, 255, 255',\r\n '--color-bg-secondary': theme.palette.mode === 'dark' ? '#0F0F0F' : '#F9FAFB',\r\n '--color-text': theme.palette.mode === 'dark' ? theme.palette.common.white : theme.palette.common.black,\r\n '--color-text-secondary': theme.palette.mode === 'dark' ? '#a1a1aa' : '#64748b',\r\n '--color-border': theme.palette.mode === 'dark' ? '#27272a' : '#f1f5f9',\r\n '--border-radius': '6px',\r\n '--border-radius-lg': '16px',\r\n '--mui-palette-text-primary': theme.palette.mode === 'dark' ? '#FFFFFF' : '#000000',\r\n\r\n position: 'relative',\r\n display: 'flex',\r\n gap: theme.spacing(1),\r\n padding: theme.spacing(1),\r\n background: 'rgba(var(--color-bg-rgb), 0.7)',\r\n borderRadius: 'var(--border-radius-lg)',\r\n border: '1px solid var(--color-border)',\r\n transition: 'all 0.2s ease',\r\n '& a': { textDecoration: 'none', color: 'var(--color-text)' },\r\n '&:hover': {\r\n boxShadow: `0 0 0 1px ${alpha(theme.palette.primary.main || '#E11D48', 0.2)}`,\r\n borderColor: alpha(theme.palette.primary.main || '#E11D48', 0.3)\r\n },\r\n '&:hover a': { textDecoration: 'underline' }\r\n}))\r\n\r\nexport const ItemImg: ComponentType<IImageWithFallbackProps> = styled(ImageWithFallback)<{ src?: string }>(({ theme }) => ({\r\n height: '62px',\r\n aspectRatio: '1 / 1',\r\n borderRadius: 'var(--border-radius)',\r\n objectFit: 'cover',\r\n flex: '0 0 auto',\r\n backgroundColor: theme.palette.mode === 'dark' ? '#27272a' : alpha(theme.palette.grey[200], 0.5)\r\n}))\r\n\r\nexport const ItemContent: ComponentType<BoxProps> = styled(Box)({\r\n flex: 1,\r\n marginBlock: ' auto',\r\n alignItems: 'flex-start',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n justifyContent: 'space-between',\r\n minWidth: 0\r\n})\r\n\r\nexport const ItemTitle: ComponentType<BoxProps> = styled(Box)(({ theme }) => ({\r\n color: 'var(--color-text)',\r\n fontWeight: 600,\r\n fontSize: '0.875rem',\r\n lineHeight: 1.25,\r\n marginBlock: theme.spacing(0.5),\r\n minWidth: 0,\r\n width: '100%',\r\n overflow: 'hidden',\r\n textOverflow: 'ellipsis',\r\n display: '-webkit-box',\r\n WebkitLineClamp: 1,\r\n WebkitBoxOrient: 'vertical'\r\n}))\r\n"],"names":["ItemRoot","styled","Box","_ref","theme","palette","mode","common","white","black","position","display","gap","spacing","padding","background","borderRadius","border","transition","textDecoration","color","boxShadow","concat","alpha","primary","main","borderColor","ItemImg","ImageWithFallback","_ref2","height","aspectRatio","objectFit","flex","backgroundColor","grey","ItemContent","marginBlock","alignItems","flexDirection","justifyContent","minWidth","ItemTitle","_ref3","fontWeight","fontSize","lineHeight","width","overflow","textOverflow","WebkitLineClamp","WebkitBoxOrient"],"mappings":"0HAMO,IAAMA,EAAoCC,EAAOC,EAAPD,CAAY,SAAAE,GAAA,IAAGC,EAAKD,EAALC,MAAK,MAAQ,CAC3E,gBAAiB,OACjB,aAAqC,SAAvBA,EAAMC,QAAQC,KAAkB,UAAY,UAC1D,iBAAyC,SAAvBF,EAAMC,QAAQC,KAAkB,aAAe,gBACjE,uBAA+C,SAAvBF,EAAMC,QAAQC,KAAkB,UAAY,UACpE,eAAuC,SAAvBF,EAAMC,QAAQC,KAAkBF,EAAMC,QAAQE,OAAOC,MAAQJ,EAAMC,QAAQE,OAAOE,MAClG,yBAAiD,SAAvBL,EAAMC,QAAQC,KAAkB,UAAY,UACtE,iBAAyC,SAAvBF,EAAMC,QAAQC,KAAkB,UAAY,UAC9D,kBAAmB,MACnB,qBAAsB,OACtB,6BAAqD,SAAvBF,EAAMC,QAAQC,KAAkB,UAAY,UAE1EI,SAAU,WACVC,QAAS,OACTC,IAAKR,EAAMS,QAAQ,GACnBC,QAASV,EAAMS,QAAQ,GACvBE,WAAY,iCACZC,aAAc,0BACdC,OAAQ,gCACRC,WAAY,gBACZ,MAAO,CAAEC,eAAgB,OAAQC,MAAO,qBACxC,UAAW,CACTC,uBAASC,OAAeC,EAAMnB,EAAMC,QAAQmB,QAAQC,MAAQ,UAAW,KACvEC,YAAaH,EAAMnB,EAAMC,QAAQmB,QAAQC,MAAQ,UAAW,KAE9D,YAAa,CAAEN,eAAgB,aAChC,GAEYQ,EAAkD1B,EAAO2B,EAAP3B,CAA4C,SAAA4B,GAAA,IAAGzB,EAAKyB,EAALzB,MAAK,MAAQ,CACzH0B,OAAQ,OACRC,YAAa,QACbf,aAAc,uBACdgB,UAAW,QACXC,KAAM,WACNC,gBAAwC,SAAvB9B,EAAMC,QAAQC,KAAkB,UAAYiB,EAAMnB,EAAMC,QAAQ8B,KAAK,KAAM,IAC7F,GAEYC,EAAuCnC,EAAOC,EAAPD,CAAY,CAC9DgC,KAAM,EACNI,YAAa,QACbC,WAAY,aACZ3B,QAAS,OACT4B,cAAe,SACfC,eAAgB,gBAChBC,SAAU,IAGCC,EAAqCzC,EAAOC,EAAPD,CAAY,SAAA0C,GAAQ,MAAQ,CAC5EvB,MAAO,oBACPwB,WAAY,IACZC,SAAU,WACVC,WAAY,KACZT,YALoEM,EAALvC,MAK5CS,QAAQ,IAC3B4B,SAAU,EACVM,MAAO,OACPC,SAAU,SACVC,aAAc,WACdtC,QAAS,cACTuC,gBAAiB,EACjBC,gBAAiB,WAClB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"videoplayer.js","sources":["../../../src/media-player/core/videoplayer.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef } from 'react'\r\nimport type { PropsWithChildren } from 'react'\r\nimport { Box, Stack, styled, SxProps, Theme, useMediaQuery, useTheme } from '@mui/material'\r\nimport { useVideoPlayerCore } from './useVideoPlayerCore'\r\nimport VideoProgressBar from './progressBar'\r\nimport PlayButton from './btn.play'\r\nimport BtnVolume from './btn.volume'\r\nimport BtnPIP from './btn.pip'\r\nimport FullscreenButton from './btn.fullscreen'\r\nimport MediaTime from './time'\r\n\r\nconst MPCoreClasses = {\r\n root: 'MediaPlayerCore-root',\r\n control: 'MediaPlayerCore-control',\r\n controlCompact: 'MediaPlayerCore-control-compact',\r\n overlay: 'MediaPlayerCore-overlay',\r\n playButton: 'MediaPlayerCore-play-button',\r\n timer: 'MediaPlayerCore-timer',\r\n progressBar: 'MediaPlayerCore-progress-bar',\r\n loading: 'MediaPlayerCore-loading',\r\n timeline: 'MediaPlayerCore-timeline',\r\n bufferedSegments: 'MediaPlayerCore-buffered-segments'\r\n}\r\n\r\nexport interface IControlsConfig {\r\n autoPlay?: boolean\r\n muted?: boolean\r\n volume?: boolean\r\n pip?: boolean\r\n fullscreen?: boolean\r\n preload?: 'auto' | 'metadata' | 'none'\r\n}\r\n\r\n// Giá trị mặc định cho MediaPlayerCore2Slots\r\nexport const defaultControlsConfig: IControlsConfig = {\r\n autoPlay: false,\r\n muted: false,\r\n pip: false,\r\n fullscreen: false,\r\n volume: true,\r\n preload: 'auto'\r\n}\r\n\r\nexport interface MediaPlayerSlot {\r\n controls?: IControlsConfig\r\n anotherControls?: React.ReactNode\r\n mediaMetadata?: MediaMetadata\r\n}\r\ninterface IProps extends MediaPlayerSlot, PropsWithChildren {\r\n src?: string\r\n sx?: SxProps<Theme>\r\n className?: string\r\n}\r\n\r\nconst MediaPlayerCore = forwardRef<HTMLVideoElement, IProps>((props, ref) => {\r\n const videoRef = useRef<HTMLVideoElement | null>(null)\r\n const videoContainerRef = useRef<HTMLDivElement>(null)\r\n const theme = useTheme()\r\n const isMobile = useMediaQuery(theme.breakpoints.down('md'))\r\n const combinedRef = mergeRefs(videoRef, ref)\r\n const { state, controls } = useVideoPlayerCore(videoRef, videoContainerRef)\r\n\r\n function mergeRefs<T>(...refs: (React.Ref<T> | undefined)[]): React.RefCallback<T> {\r\n return (value: T) => {\r\n refs.forEach((ref) => {\r\n if (!ref) return\r\n if (typeof ref === 'function') {\r\n ref(value)\r\n } else {\r\n ;(ref as React.MutableRefObject<T | null>).current = value\r\n }\r\n })\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n if (!('mediaSession' in navigator) || !props.mediaMetadata) return\r\n const video = videoRef.current\r\n if (!video) return\r\n // Set metadata\r\n navigator.mediaSession.metadata = new MediaMetadata({\r\n title: props.mediaMetadata.title || 'Video',\r\n artist: props.mediaMetadata.artist || 'Berlin Tomek',\r\n album: props.mediaMetadata.album || 'Media Album',\r\n artwork: props.mediaMetadata.artwork ? Array.from(props.mediaMetadata.artwork) : undefined\r\n })\r\n return () => {\r\n navigator.mediaSession.setActionHandler('play', null)\r\n navigator.mediaSession.setActionHandler('pause', null)\r\n navigator.mediaSession.setActionHandler('seekbackward', null)\r\n navigator.mediaSession.setActionHandler('seekforward', null)\r\n navigator.mediaSession.setActionHandler('seekto', null)\r\n }\r\n }, [props.mediaMetadata])\r\n\r\n const controlsConfig = { ...defaultControlsConfig, ...props.controls }\r\n\r\n const getClasses = () => {\r\n return [MPCoreClasses.root, props.className].filter((x) => !!x).join(' ')\r\n }\r\n\r\n return (\r\n <Wrap sx={props.sx} className={getClasses()} ref={videoContainerRef}>\r\n <video\r\n ref={combinedRef}\r\n controls={false}\r\n width='100%'\r\n height='100%'\r\n src={props.src}\r\n autoPlay={controlsConfig.autoPlay}\r\n muted={controlsConfig.muted}\r\n preload={controlsConfig.preload}\r\n />\r\n <div className={MPCoreClasses.overlay} onClick={controls.togglePlay} />\r\n <div className={MPCoreClasses.control}>\r\n <PlayButton isPlaying={state.isPlaying} onClick={controls.togglePlay} />\r\n <VideoProgressBar\r\n bufferedSegments={state.bufferedSegments}\r\n progress={state.progress}\r\n isLoading={state.isLoading}\r\n onChange={controls.handleSeek}\r\n />\r\n <MediaTime currentTime={state.currentTime} duration={state.duration} />\r\n <BtnVolume\r\n hidden={isMobile || controlsConfig.muted || !controlsConfig.volume}\r\n sliderPosition='right'\r\n orientation='horizontal'\r\n muted={state.muted}\r\n volume={state.volume}\r\n setVolume={controls.setVolume}\r\n toggleMute={controls.toggleMute}\r\n />\r\n <Stack flexDirection='row' alignItems='center' gap={0}>\r\n {props.anotherControls}\r\n <BtnPIP hidden={isMobile || !controlsConfig.pip} onClick={controls.togglePIP} />\r\n <FullscreenButton hidden={!controlsConfig.fullscreen} isFullscreen={state.isFullscreen} onClick={controls.toggleFullscreen} />\r\n </Stack>\r\n </div>\r\n <div className={MPCoreClasses.controlCompact}>\r\n <VideoProgressBar bufferedSegments={state.bufferedSegments} progress={state.progress} isLoading={state.isLoading} />\r\n </div>\r\n </Wrap>\r\n )\r\n})\r\n\r\nexport default MediaPlayerCore\r\n\r\nconst Wrap = styled(Box)({\r\n '--mp-core1-color-main': '#ed4229',\r\n '--mp-core1-color-text': '#fff',\r\n '--mp-core1-icon-size': '34px',\r\n width: '640px',\r\n height: '360px',\r\n position: 'relative',\r\n [`.${MPCoreClasses.control}`]: {\r\n position: 'absolute',\r\n bottom: 0,\r\n left: 0,\r\n width: '100%',\r\n display: 'flex',\r\n alignItems: 'center',\r\n padding: '6px 8px',\r\n gap: '8px',\r\n zIndex: 3,\r\n transition: '0.3s',\r\n transform: 'translateY(100%)'\r\n },\r\n [`.${MPCoreClasses.controlCompact}`]: {\r\n position: 'absolute',\r\n bottom: 0,\r\n left: 0,\r\n width: '100%',\r\n transition: '0.3s',\r\n zIndex: 2,\r\n opacity: 0.5\r\n },\r\n [`.${MPCoreClasses.overlay}`]: {\r\n position: 'absolute',\r\n bottom: 0,\r\n left: 0,\r\n width: '100%',\r\n height: '100%',\r\n zIndex: 1,\r\n opacity: 0,\r\n transition: '0.3s',\r\n cursor: 'pointer',\r\n background: 'linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 20%)'\r\n },\r\n [`.${MPCoreClasses.bufferedSegments}`]: {\r\n position: 'absolute',\r\n top: 0,\r\n height: '100%',\r\n backgroundColor: 'rgba(255,255,255,0.4)',\r\n pointerEvents: 'none'\r\n },\r\n '&:hover': {\r\n [`.${MPCoreClasses.overlay}`]: {\r\n opacity: 1\r\n },\r\n [`.${MPCoreClasses.control}`]: {\r\n transform: 'translateY(0)'\r\n },\r\n [`.${MPCoreClasses.controlCompact}`]: {\r\n opacity: 0,\r\n transform: 'translateY(110%)'\r\n }\r\n }\r\n})\r\n"],"names":["MPCoreClasses","root","control","controlCompact","overlay","bufferedSegments","defaultControlsConfig","autoPlay","muted","pip","fullscreen","volume","preload","MediaPlayerCore","forwardRef","props","ref","videoRef","useRef","videoContainerRef","theme","useTheme","isMobile","useMediaQuery","breakpoints","down","combinedRef","_len","arguments","length","refs","Array","_key","value","forEach","current","mergeRefs","_useVideoPlayerCore","useVideoPlayerCore","state","controls","useEffect","navigator","mediaMetadata","mediaSession","metadata","MediaMetadata","title","artist","album","artwork","from","undefined","setActionHandler","controlsConfig","_objectSpread","_jsxs","Wrap","sx","className","filter","x","join","children","_jsx","width","height","src","onClick","togglePlay","PlayButton","isPlaying","VideoProgressBar","progress","isLoading","onChange","handleSeek","MediaTime","currentTime","duration","BtnVolume","hidden","sliderPosition","orientation","setVolume","toggleMute","Stack","flexDirection","alignItems","gap","anotherControls","BtnPIP","togglePIP","FullscreenButton","isFullscreen","toggleFullscreen","styled","Box","_defineProperty","position","concat","bottom","left","display","padding","zIndex","transition","transform","opacity","cursor","background","top","backgroundColor","pointerEvents"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"videoplayer.js","sources":["../../../src/media-player/core/videoplayer.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef } from 'react'\r\nimport { Box, Stack, styled, SxProps, Theme, useMediaQuery, useTheme } from '@mui/material'\r\nimport { useVideoPlayerCore } from './useVideoPlayerCore'\r\nimport VideoProgressBar from './progressBar'\r\nimport PlayButton from './btn.play'\r\nimport BtnVolume from './btn.volume'\r\nimport BtnPIP from './btn.pip'\r\nimport FullscreenButton from './btn.fullscreen'\r\nimport MediaTime from './time'\r\n\r\nconst MPCoreClasses = {\r\n root: 'MediaPlayerCore-root',\r\n control: 'MediaPlayerCore-control',\r\n controlCompact: 'MediaPlayerCore-control-compact',\r\n overlay: 'MediaPlayerCore-overlay',\r\n playButton: 'MediaPlayerCore-play-button',\r\n timer: 'MediaPlayerCore-timer',\r\n progressBar: 'MediaPlayerCore-progress-bar',\r\n loading: 'MediaPlayerCore-loading',\r\n timeline: 'MediaPlayerCore-timeline',\r\n bufferedSegments: 'MediaPlayerCore-buffered-segments'\r\n}\r\n\r\nexport interface IControlsConfig {\r\n autoPlay?: boolean\r\n muted?: boolean\r\n volume?: boolean\r\n pip?: boolean\r\n fullscreen?: boolean\r\n preload?: 'auto' | 'metadata' | 'none'\r\n}\r\n\r\n// Giá trị mặc định cho MediaPlayerCore2Slots\r\nexport const defaultControlsConfig: IControlsConfig = {\r\n autoPlay: false,\r\n muted: false,\r\n pip: false,\r\n fullscreen: false,\r\n volume: true,\r\n preload: 'auto'\r\n}\r\n\r\nexport interface MediaPlayerSlot {\r\n controls?: IControlsConfig\r\n anotherControls?: React.ReactNode\r\n mediaMetadata?: MediaMetadata\r\n}\r\ninterface IProps extends MediaPlayerSlot {\r\n src?: string\r\n sx?: SxProps<Theme>\r\n className?: string\r\n}\r\n\r\nconst MediaPlayerCore = forwardRef<HTMLVideoElement, IProps>((props, ref) => {\r\n const videoRef = useRef<HTMLVideoElement | null>(null)\r\n const videoContainerRef = useRef<HTMLDivElement>(null)\r\n const theme = useTheme()\r\n const isMobile = useMediaQuery(theme.breakpoints.down('md'))\r\n const combinedRef = mergeRefs(videoRef, ref)\r\n const { state, controls } = useVideoPlayerCore(videoRef, videoContainerRef)\r\n\r\n function mergeRefs<T>(...refs: (React.Ref<T> | undefined)[]): React.RefCallback<T> {\r\n return (value: T) => {\r\n refs.forEach((ref) => {\r\n if (!ref) return\r\n if (typeof ref === 'function') {\r\n ref(value)\r\n } else {\r\n ;(ref as React.MutableRefObject<T | null>).current = value\r\n }\r\n })\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n if (!('mediaSession' in navigator) || !props.mediaMetadata) return\r\n const video = videoRef.current\r\n if (!video) return\r\n // Set metadata\r\n navigator.mediaSession.metadata = new MediaMetadata({\r\n title: props.mediaMetadata.title || 'Video',\r\n artist: props.mediaMetadata.artist || 'Berlin Tomek',\r\n album: props.mediaMetadata.album || 'Media Album',\r\n artwork: props.mediaMetadata.artwork ? Array.from(props.mediaMetadata.artwork) : undefined\r\n })\r\n return () => {\r\n navigator.mediaSession.setActionHandler('play', null)\r\n navigator.mediaSession.setActionHandler('pause', null)\r\n navigator.mediaSession.setActionHandler('seekbackward', null)\r\n navigator.mediaSession.setActionHandler('seekforward', null)\r\n navigator.mediaSession.setActionHandler('seekto', null)\r\n }\r\n }, [props.mediaMetadata])\r\n\r\n const controlsConfig = { ...defaultControlsConfig, ...props.controls }\r\n\r\n const getClasses = () => {\r\n return [MPCoreClasses.root, props.className].filter((x) => !!x).join(' ')\r\n }\r\n\r\n return (\r\n <Wrap sx={props.sx} className={getClasses()} ref={videoContainerRef}>\r\n <video\r\n ref={combinedRef}\r\n controls={false}\r\n width='100%'\r\n height='100%'\r\n src={props.src}\r\n autoPlay={controlsConfig.autoPlay}\r\n muted={controlsConfig.muted}\r\n preload={controlsConfig.preload}\r\n />\r\n <div className={MPCoreClasses.overlay} onClick={controls.togglePlay} />\r\n <div className={MPCoreClasses.control}>\r\n <PlayButton isPlaying={state.isPlaying} onClick={controls.togglePlay} />\r\n <VideoProgressBar\r\n bufferedSegments={state.bufferedSegments}\r\n progress={state.progress}\r\n isLoading={state.isLoading}\r\n onChange={controls.handleSeek}\r\n />\r\n <MediaTime currentTime={state.currentTime} duration={state.duration} />\r\n <BtnVolume\r\n hidden={isMobile || controlsConfig.muted || !controlsConfig.volume}\r\n sliderPosition='right'\r\n orientation='horizontal'\r\n muted={state.muted}\r\n volume={state.volume}\r\n setVolume={controls.setVolume}\r\n toggleMute={controls.toggleMute}\r\n />\r\n <Stack flexDirection='row' alignItems='center' gap={0}>\r\n {props.anotherControls}\r\n <BtnPIP hidden={isMobile || !controlsConfig.pip} onClick={controls.togglePIP} />\r\n <FullscreenButton hidden={!controlsConfig.fullscreen} isFullscreen={state.isFullscreen} onClick={controls.toggleFullscreen} />\r\n </Stack>\r\n </div>\r\n <div className={MPCoreClasses.controlCompact}>\r\n <VideoProgressBar bufferedSegments={state.bufferedSegments} progress={state.progress} isLoading={state.isLoading} />\r\n </div>\r\n </Wrap>\r\n )\r\n})\r\n\r\nexport default MediaPlayerCore\r\n\r\nconst Wrap = styled(Box)({\r\n '--mp-core1-color-main': '#ed4229',\r\n '--mp-core1-color-text': '#fff',\r\n '--mp-core1-icon-size': '34px',\r\n width: '640px',\r\n height: '360px',\r\n position: 'relative',\r\n [`.${MPCoreClasses.control}`]: {\r\n position: 'absolute',\r\n bottom: 0,\r\n left: 0,\r\n width: '100%',\r\n display: 'flex',\r\n alignItems: 'center',\r\n padding: '6px 8px',\r\n gap: '8px',\r\n zIndex: 3,\r\n transition: '0.3s',\r\n transform: 'translateY(100%)'\r\n },\r\n [`.${MPCoreClasses.controlCompact}`]: {\r\n position: 'absolute',\r\n bottom: 0,\r\n left: 0,\r\n width: '100%',\r\n transition: '0.3s',\r\n zIndex: 2,\r\n opacity: 0.5\r\n },\r\n [`.${MPCoreClasses.overlay}`]: {\r\n position: 'absolute',\r\n bottom: 0,\r\n left: 0,\r\n width: '100%',\r\n height: '100%',\r\n zIndex: 1,\r\n opacity: 0,\r\n transition: '0.3s',\r\n cursor: 'pointer',\r\n background: 'linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 20%)'\r\n },\r\n [`.${MPCoreClasses.bufferedSegments}`]: {\r\n position: 'absolute',\r\n top: 0,\r\n height: '100%',\r\n backgroundColor: 'rgba(255,255,255,0.4)',\r\n pointerEvents: 'none'\r\n },\r\n '&:hover': {\r\n [`.${MPCoreClasses.overlay}`]: {\r\n opacity: 1\r\n },\r\n [`.${MPCoreClasses.control}`]: {\r\n transform: 'translateY(0)'\r\n },\r\n [`.${MPCoreClasses.controlCompact}`]: {\r\n opacity: 0,\r\n transform: 'translateY(110%)'\r\n }\r\n }\r\n})\r\n"],"names":["MPCoreClasses","root","control","controlCompact","overlay","bufferedSegments","defaultControlsConfig","autoPlay","muted","pip","fullscreen","volume","preload","MediaPlayerCore","forwardRef","props","ref","videoRef","useRef","videoContainerRef","theme","useTheme","isMobile","useMediaQuery","breakpoints","down","combinedRef","_len","arguments","length","refs","Array","_key","value","forEach","current","mergeRefs","_useVideoPlayerCore","useVideoPlayerCore","state","controls","useEffect","navigator","mediaMetadata","mediaSession","metadata","MediaMetadata","title","artist","album","artwork","from","undefined","setActionHandler","controlsConfig","_objectSpread","_jsxs","Wrap","sx","className","filter","x","join","children","_jsx","width","height","src","onClick","togglePlay","PlayButton","isPlaying","VideoProgressBar","progress","isLoading","onChange","handleSeek","MediaTime","currentTime","duration","BtnVolume","hidden","sliderPosition","orientation","setVolume","toggleMute","Stack","flexDirection","alignItems","gap","anotherControls","BtnPIP","togglePIP","FullscreenButton","isFullscreen","toggleFullscreen","styled","Box","_defineProperty","position","concat","bottom","left","display","padding","zIndex","transition","transform","opacity","cursor","background","top","backgroundColor","pointerEvents"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{slicedToArray as
|
|
1
|
+
import{slicedToArray as o,objectSpread2 as r}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as t,jsxs as e,Fragment as n}from"react/jsx-runtime";import{useState as i,useCallback as l}from"react";import{useTheme as a,useMediaQuery as c,Badge as u,Drawer as s}from"@mui/material";import p from"@mui/icons-material/PlaylistPlay";import{canAddGroup as m,generateGroupId as d}from"../helpers.js";import{Root as f,MenuStyled as h}from"./styled.js";import{IconButtonDark as g}from"../../components/buttons.js";import{MediaGroupAccordion as y}from"./media-group-accordion.js";import{useMediaRightStore as P,useMediaRightActions as b}from"../hooks.js";import{createCartContent as v}from"../../factory/cart-content/create.cart-content.js";import{createCartItem as x}from"../../factory/cart-item/create.cart-item.js";import{NewGroupArea as C}from"./new-group-area.js";var j=v({labels:{title:"Your Playlist",buttonCheckout:"Show in playlist",itemsSuffixMany:"playlists",itemsSuffixSingle:"playlist"},empty:{title:"Your playlist is empty",subTitle:"Try adding some media items"}}),S=x({}),T=function(r){var v=r.localStorageKey,x=P({localStorageKey:v}).groups,T=b({localStorageKey:v}),G=a(),M=c(G.breakpoints.down("sm")),k=i(null),w=o(k,2),D=w[0],I=w[1],L=i(!1),B=o(L,2),K=B[0],z=B[1],A=function(o){T.addGroup({name:o,id:d()})},E=function(o){T.updateGroup(o.id,o)},N=function(o){T.removeGroup(o)},O=function(o,r){T.removeItem(o,r)},R=l(function(){return t(j,{isMobile:M,carts:x,onClose:function(){return I(null)},onCheckout:function(){return I(null)},buttonMoveToCartProps:r.buttonMoveToCartProps,slots:{headerLeftProps:{flexDirection:"row",alignItems:"flex-end",justifyContent:"space-between",gap:1,flex:1},headerRight:function(o){return m(x)&&t(C,{onSaveGroup:A})},item:function(o){return t(y,{group:o,onEditGroup:E,onDeleteGroup:N,onDeleteMedia:O,accordionProps:{expanded:K===o.id,onChange:function(r,t){return z(!!t&&o.id)}},accordionDetailsProps:{sx:{display:"flex",flexDirection:"column",position:"relative",gap:1,p:1,"& .MuiAccordionDetails-root":{p:0}}},renderItem:function(e){return t(S,{item:e,name:e.ProductName,imageUrl:e.PictureUrl,onRemoveCart:function(){return O(o.id,e.ProductId)},itemTitleProps:r.itemTitleProps,itemTitlePropsGetter:r.itemTitlePropsGetter,onClose:function(){return I(null)}},e.ProductId)}},o.id)}}})},[x,M,r,K]);return e(n,{children:[t(g,{onClick:function(o){return I(o.currentTarget)},children:t(u,{badgeContent:x.length||0,color:"error",children:t(p,{})})}),M?t(s,{anchor:"right",open:Boolean(D),onClose:function(){return I(null)},disableScrollLock:!0,PaperProps:{sx:{width:"calc(100% - 100px)",maxWidth:360}},children:t(f,{children:R()})}):t(h,{disableScrollLock:!0,anchorEl:D,open:Boolean(D),onClose:function(){return I(null)},anchorOrigin:{vertical:"top",horizontal:"right"},transformOrigin:{vertical:"top",horizontal:"right"},MenuListProps:{component:"div"},children:t(f,{children:R()})})]})},G=function(o){var e=function(e){return t(T,r(r({},o),e))};return e.displayName="MediaGroupWidget",e};export{T as MediaGroupWidget,G 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, 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 <>\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 <div className={mediaWidgetClasses.content}>\r\n {groups.length < 1 && <EmptyState />}\r\n {groups.length > 0 && (\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 )}\r\n </div>\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 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","content","EmptyState","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
|
+
{"version":3,"file":"index.js","sources":["../../../src/media-right/media-widget/index.tsx"],"sourcesContent":["import { useCallback, useState } from 'react'\r\nimport { Badge, ButtonProps, Drawer, TypographyProps, useMediaQuery, useTheme } from '@mui/material'\r\nimport PlaylistPlayIcon from '@mui/icons-material/PlaylistPlay'\r\nimport { canAddGroup, generateGroupId } from '../helpers'\r\nimport { MenuStyled, Root } from './styled'\r\nimport { IconButtonDark } from '../../components/buttons'\r\nimport { MediaGroupAccordion } from './media-group-accordion'\r\nimport { useMediaRightStore, useMediaRightActions } from '../hooks'\r\nimport type { IMediaRightGroup, IMediaRightItem } from '../types'\r\nimport createCartContent from '../../factory/cart-content/create.cart-content'\r\nimport createCartItem from '../../factory/cart-item/create.cart-item'\r\nimport { NewGroupArea } from './new-group-area'\r\n\r\nexport interface IMediaGroupWidgetProps {\r\n itemTitleProps?: TypographyProps & { [key: string]: any }\r\n itemTitlePropsGetter?: (item: IMediaRightItem, onClose?: () => void) => TypographyProps & { [key: string]: any }\r\n onClose?: () => void\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\nconst CartContent = createCartContent<IMediaRightGroup>({\r\n labels: {\r\n title: 'Your Playlist',\r\n buttonCheckout: 'Show in playlist',\r\n itemsSuffixMany: 'playlists',\r\n itemsSuffixSingle: 'playlist'\r\n },\r\n empty: {\r\n title: 'Your playlist is empty',\r\n subTitle: 'Try adding some media items'\r\n }\r\n})\r\n\r\nconst CartItem = createCartItem<IMediaRightItem>({})\r\n\r\nexport const MediaGroupWidget: React.FC<IMediaGroupWidgetProps> = (props) => {\r\n const { localStorageKey } = 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 = useCallback(\r\n () => (\r\n <CartContent\r\n isMobile={isMobile}\r\n carts={groups}\r\n onClose={() => setAnchorEl(null)}\r\n onCheckout={() => setAnchorEl(null)}\r\n buttonMoveToCartProps={props.buttonMoveToCartProps}\r\n slots={{\r\n headerLeftProps: {\r\n flexDirection: 'row',\r\n alignItems: 'flex-end',\r\n justifyContent: 'space-between',\r\n gap: 1,\r\n flex: 1\r\n },\r\n headerRight: (ctx) => canAddGroup(groups) && <NewGroupArea onSaveGroup={handleSaveNewGroup} />,\r\n item: (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 accordionDetailsProps={{\r\n sx: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n position: 'relative',\r\n gap: 1,\r\n p: 1,\r\n '& .MuiAccordionDetails-root': { p: 0 }\r\n }\r\n }}\r\n renderItem={(item) => (\r\n <CartItem\r\n item={item}\r\n key={item.ProductId}\r\n name={item.ProductName}\r\n imageUrl={item.PictureUrl}\r\n onRemoveCart={() => handleDeleteMedia(group.id, item.ProductId)}\r\n itemTitleProps={props.itemTitleProps}\r\n itemTitlePropsGetter={props.itemTitlePropsGetter}\r\n onClose={() => setAnchorEl(null)}\r\n />\r\n )}\r\n />\r\n )\r\n }}\r\n />\r\n ),\r\n [groups, isMobile, props, expandedGroupId]\r\n )\r\n\r\n return (\r\n <>\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 <Root>{renderContent()}</Root>\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 <Root>{renderContent()}</Root>\r\n </MenuStyled>\r\n )}\r\n </>\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":["CartContent","createCartContent","labels","title","buttonCheckout","itemsSuffixMany","itemsSuffixSingle","empty","subTitle","CartItem","createCartItem","MediaGroupWidget","props","localStorageKey","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","useCallback","_jsx","carts","onClose","onCheckout","buttonMoveToCartProps","slots","headerLeftProps","flexDirection","alignItems","justifyContent","gap","flex","headerRight","ctx","canAddGroup","NewGroupArea","onSaveGroup","item","MediaGroupAccordion","onEditGroup","onDeleteGroup","onDeleteMedia","accordionProps","expanded","onChange","_","isExpanded","accordionDetailsProps","sx","display","position","p","renderItem","ProductName","imageUrl","PictureUrl","onRemoveCart","ProductId","itemTitleProps","itemTitlePropsGetter","_jsxs","_Fragment","children","IconButtonDark","onClick","e","currentTarget","Badge","badgeContent","length","color","PlaylistPlayIcon","Drawer","anchor","open","Boolean","disableScrollLock","PaperProps","width","maxWidth","Root","MenuStyled","anchorOrigin","vertical","horizontal","transformOrigin","MenuListProps","component","createMediaGroupWidget","params","_MediaGroupWidget","_objectSpread","displayName"],"mappings":"u2BAuBA,IAAMA,EAAcC,EAAoC,CACtDC,OAAQ,CACNC,MAAO,gBACPC,eAAgB,mBAChBC,gBAAiB,YACjBC,kBAAmB,YAErBC,MAAO,CACLJ,MAAO,yBACPK,SAAU,iCAIRC,EAAWC,EAAgC,IAEpCC,EAAqD,SAACC,GACjE,IAAQC,EAAoBD,EAApBC,gBACAC,EAAWC,EAAmB,CAAEF,gBAAAA,IAAhCC,OACFE,EAAUC,EAAqB,CAAEJ,gBAAAA,IACjCK,EAAQC,IACRC,EAAWC,EAAcH,EAAMI,YAAYC,KAAK,OAEtDC,EAAgCC,EAA6B,MAAKC,EAAAC,EAAAH,EAAA,GAA3DI,EAAQF,EAAA,GAAEG,EAAWH,EAAA,GAC5BI,EAA8CL,GAAyB,GAAMM,EAAAJ,EAAAG,EAAA,GAAtEE,EAAeD,EAAA,GAAEE,EAAkBF,EAAA,GAEpCG,EAAqB,SAACC,GAC1BnB,EAAQoB,SAAS,CACfC,KAAMF,EACNG,GAAIC,KAEP,EAEKC,EAAkB,SAACC,GACvBzB,EAAQ0B,YAAYD,EAAMH,GAAIG,EAC/B,EAEKE,EAAoB,SAACC,GACzB5B,EAAQ6B,YAAYD,EACrB,EAEKE,EAAoB,SAACF,EAAiBG,GAC1C/B,EAAQgC,WAAWJ,EAASG,EAC7B,EAEKE,EAAgBC,EACpB,WAAA,OACEC,EAACnD,GACCoB,SAAUA,EACVgC,MAAOtC,EACPuC,QAAS,WAAF,OAAQxB,EAAY,KAAK,EAChCyB,WAAY,WAAF,OAAQzB,EAAY,KAAK,EACnC0B,sBAAuB3C,EAAM2C,sBAC7BC,MAAO,CACLC,gBAAiB,CACfC,cAAe,MACfC,WAAY,WACZC,eAAgB,gBAChBC,IAAK,EACLC,KAAM,GAERC,YAAa,SAACC,GAAG,OAAKC,EAAYnD,IAAWqC,EAACe,GAAaC,YAAajC,GAAsB,EAC9FkC,KAAM,SAAC3B,GAAK,OACVU,EAACkB,EAEC,CAAA5B,MAAOA,EACP6B,YAAa9B,EACb+B,cAAe5B,EACf6B,cAAe1B,EACf2B,eAAgB,CACdC,SAAU1C,IAAoBS,EAAMH,GACpCqC,SAAU,SAACC,EAAGC,GAAU,OAAK5C,IAAmB4C,GAAapC,EAAMH,GAAW,GAEhFwC,sBAAuB,CACrBC,GAAI,CACFC,QAAS,OACTtB,cAAe,SACfuB,SAAU,WACVpB,IAAK,EACLqB,EAAG,EACH,8BAA+B,CAAEA,EAAG,KAGxCC,WAAY,SAACf,GAAI,OACfjB,EAAC1C,EACC,CAAA2D,KAAMA,EAEN/B,KAAM+B,EAAKgB,YACXC,SAAUjB,EAAKkB,WACfC,aAAc,WAAF,OAAQzC,EAAkBL,EAAMH,GAAI8B,EAAKoB,UAAU,EAC/DC,eAAgB7E,EAAM6E,eACtBC,qBAAsB9E,EAAM8E,qBAC5BrC,QAAS,WAAF,OAAQxB,EAAY,KAAK,GAN3BuC,EAAKoB,UAOV,GA7BC/C,EAAMH,GA+BX,IAIT,EACD,CAACxB,EAAQM,EAAUR,EAAOoB,IAG5B,OACE2D,EACEC,EAAA,CAAAC,SAAA,CAAA1C,EAAC2C,EAAc,CAACC,QAAS,SAACC,GAAC,OAAKnE,EAAYmE,EAAEC,cAAc,EAAAJ,SAC1D1C,EAAC+C,GAAMC,aAAcrF,EAAOsF,QAAU,EAAGC,MAAM,QAAOR,SACpD1C,EAACmD,EAAgB,CAAA,OAGpBlF,EACC+B,EAACoD,GACCC,OAAO,QACPC,KAAMC,QAAQ9E,GACdyB,QAAS,WAAF,OAAQxB,EAAY,KAAK,EAChC8E,mBACA,EAAAC,WAAY,CAAE7B,GAAI,CAAE8B,MAAO,qBAAsBC,SAAU,MAE3DjB,SAAA1C,EAAC4D,EAAI,CAAAlB,SAAE5C,QAGTE,EAAC6D,GACCL,mBAAiB,EACjB/E,SAAUA,EACV6E,KAAMC,QAAQ9E,GACdyB,QAAS,WAAF,OAAQxB,EAAY,KAAK,EAChCoF,aAAc,CAAEC,SAAU,MAAOC,WAAY,SAC7CC,gBAAiB,CAAEF,SAAU,MAAOC,WAAY,SAChDE,cAAe,CAAEC,UAAW,OAE5BzB,SAAA1C,EAAC4D,EAAI,CAAAlB,SAAE5C,UAKjB,EAEasE,EAAyB,SAACC,GACrC,IAAMC,EAA+D,SAAC7G,GAAK,OAAKuC,EAACxC,EAAgB+G,EAAAA,EAAA,CAAA,EAAKF,GAAY5G,GAAS,EAE3H,OADA6G,EAAkBE,YAAc,mBACzBF,CACT"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{slicedToArray as
|
|
1
|
+
import{defineProperty as o,slicedToArray as r,objectSpread2 as e}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as i,jsx as n}from"react/jsx-runtime";import{useState as t}from"react";import{styled as a,Accordion as m,accordionSummaryClasses as l,Box as p,Typography as c,AccordionSummary as d,Chip as s,IconButton as u,AccordionDetails as f}from"@mui/material";import g from"@mui/icons-material/Edit";import x from"@mui/icons-material/ExpandMore";import h from"@mui/icons-material/FolderOutlined";import{DeleteButton as b}from"./button.delete.js";import{InlineEditing as v}from"./inline-editing.js";import{mediaRightStoreOptions as y}from"../configs.js";var P=function(o){var a,m=t(!1),l=r(m,2),p=l[0],c=l[1];return i(k,e(e({component:"div"},o.accordionProps),{},{sx:e({my:"0 !important"},null===(a=o.accordionProps)||void 0===a?void 0:a.sx),children:[n(d,e(e({component:"div",expandIcon:n(x,{})},o.accordionSummaryProps),{},{children:i(S,{children:[n(h,{fontSize:"small"}),i(v,{isEdit:p,setShowEdit:c,onSubmit:function(r){o.onEditGroup(e(e({},o.group),{},{name:r})),c(!1)},defaultValue:o.group.name,textField:{inputProps:{maxLength:y.MAX_NAME_GROUP},sx:{flex:1,minWidth:0,"& .MuiOutlinedInput-root":{height:"32px"}}},sxForm:{flex:1},children:[n(W,{variant:"body2",noWrap:!0,title:o.group.name,children:o.group.name}),n(s,{sx:{fontSize:"12px"},label:"".concat(o.group.items.length," items"),size:"small"}),n(u,{size:"small",onClick:function(o){o.stopPropagation(),c(!0)},color:"success",children:n(g,{fontSize:"small"})}),n(b,{onDelete:function(){return o.onDeleteGroup(o.group.id)},size:"small"})]},o.group.id+o.group.name+p)]})})),n(f,e(e({},o.accordionDetailsProps),{},{children:o.group.items.map(function(r){return o.renderItem?o.renderItem(r):null})}))]}))},k=a(m)(o({backgroundColor:"transparent",boxShadow:"none",backgroundImage:"none","&:before":{display:"none"},"&.Mui-expanded":{margin:0}},".".concat(l.root),o({position:"sticky",top:0,zIndex:1,background:"rgba(var(--color-bg-rba),0.7)",backdropFilter:"blur(500px)",WebkitBackdropFilter:"blur(500px)",borderRadius:"12px",minWidth:0},"& .".concat(l.content),{minWidth:0,margin:0}))),S=a(p)(function(o){return{display:"flex",alignItems:"center",flex:1,gap:o.theme.spacing(1),minWidth:0}}),W=a(c)(function(o){var r=o.theme;return{fontWeight:600,flex:1,minWidth:0,color:r.palette.text.primary,marginLeft:r.spacing(1)}});export{S as ItemBox,W as ItemTitle,P as MediaGroupAccordion,k as PlaylistAccordion};
|
|
2
2
|
//# sourceMappingURL=media-group-accordion.js.map
|