dinocollab-shared 1.2.41 → 1.2.42
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/notification/notify-list.js +1 -1
- package/dist/notification/notify-list.js.map +1 -1
- package/dist/notification/widget.js +1 -1
- package/dist/notification/widget.js.map +1 -1
- package/dist/types/notification/notify-list.d.ts +11 -2
- package/dist/types/notification/notify-list.d.ts.map +1 -1
- package/dist/types/notification/widget.d.ts +2 -0
- package/dist/types/notification/widget.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{inherits as e,createClass as i,
|
|
1
|
+
import{inherits as e,createClass as i,objectSpread2 as t,classCallCheck as n,callSuper as r,defineProperty as o}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as l,jsx as a}from"react/jsx-runtime";import{Component as c}from"react";import{Box as s,Typography as d,alpha as m,colors as h,Stack as p,Divider as u,Button as f}from"@mui/material";import v from"@mui/icons-material/DraftsOutlined";import g from"@mui/icons-material/MarkEmailUnreadOutlined";import{formatTimeAgo as b}from"./helpers.js";import{NoDataPanel as x}from"../components/no-data-panel.js";import{NotifyListStyled as C,notifyListClasses as w}from"./styled.js";var N=function(){function N(){var e;n(this,N);for(var i=arguments.length,t=new Array(i),c=0;c<i;c++)t[c]=arguments[c];return e=r(this,N,[].concat(t)),o(e,"renderItem",function(i,t){return l(s,{className:w.item,onClick:function(){return e.onClickHandler(i)},children:[a(p,{px:1,children:i.IsRead?a(v,{color:"disabled"}):a(g,{color:"success"})}),l(s,{flex:1,children:[a(d,{variant:"subtitle1",component:"h6",className:w.itemTitle,children:i.Title}),a(d,{variant:"caption",className:w.itemSubTitle,children:i.SubTitle}),a(p,{direction:"row",spacing:1,justifyContent:"flex-end",children:a(d,{variant:"caption",color:m(h.common.white,.5),children:b(i.DateCreated)})})]})]},t.toString())}),o(e,"onClickHandler",function(i){e.props.onClick&&e.props.onClick(i)}),o(e,"getDescription",function(e){return 0===e?"No new notifications":1===e?"You have 1 unread notification":"You have ".concat(e," unread notifications")}),o(e,"getItems",function(i){return e.props.data.filter(function(e){return void 0===i||e.IsRead===i})}),e}return e(N,c),i(N,[{key:"render",value:function(){var e,i=this,n=this.getItems(!0),r=this.getItems(!1);return l(C,{className:"".concat(w.root).concat(this.props.isMobile?" mobile":""),children:[a("div",{className:w.header,children:l(s,{flex:1,children:[a(d,{variant:"h6",children:"Notifications"}),a(d,{variant:"body2",color:m(h.common.white,.6),children:this.getDescription(r.length)})]})}),l(p,{className:w.items,children:[r.length>0&&l("div",{children:[l("div",{className:w.groupTitle,children:[a(d,{variant:"caption",children:"Unseen"}),a(u,{sx:{borderColor:m(h.common.white,.1)}})]}),r.map(this.renderItem)]}),n.length>0&&l("div",{children:[l("div",{className:w.groupTitle,children:[a(d,{variant:"caption",children:"Seen"}),a(u,{sx:{borderColor:m(h.common.white,.1)}})]}),n.map(this.renderItem)]}),r.length+n.length===0&&a(x,{title:"No Notifications",subTitle:"You're all caught up!",sx:{minWidth:250,flex:1}})]}),!1!==this.props.enableViewAll&&a("div",{className:w.footer,children:a(f,t(t({variant:"text"},this.props.buttonViewAllProps),{},{onClick:function(e){var t,n,r,o;null===(t=i.props.buttonViewAllProps)||void 0===t||null===(n=t.onClick)||void 0===n||n.call(t,e),null===(r=(o=i.props).onViewAllClick)||void 0===r||r.call(o)},sx:t({flex:"0 0 auto",width:"auto"},null===(e=this.props.buttonViewAllProps)||void 0===e?void 0:e.sx),children:a(d,{variant:"caption",sx:{textTransform:"none",fontWeight:600},children:"View All"})}))})]})}}])}();export{N as default};
|
|
2
2
|
//# sourceMappingURL=notify-list.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"notify-list.js","sources":["../../src/notification/notify-list.tsx"],"sourcesContent":["import { Component } from 'react'\r\nimport { alpha, Box, Button, colors, Divider, Stack, Typography } from '@mui/material'\r\nimport DraftsOutlinedIcon from '@mui/icons-material/DraftsOutlined'\r\nimport MarkEmailUnreadOutlinedIcon from '@mui/icons-material/MarkEmailUnreadOutlined'\r\nimport { INotification } from './types'\r\nimport { formatTimeAgo } from './helpers'\r\nimport { NoDataPanel } from '../components/no-data-panel'\r\nimport { NotifyListStyled, notifyListClasses } from './styled'\r\n\r\ninterface INotifyListProps {\r\n data: INotification[]\r\n onClick?: (value: INotification) => void\r\n isMobile?: boolean\r\n}\r\n\r\nclass NotifyList extends Component<INotifyListProps> {\r\n render() {\r\n const listReaded = this.getItems(true)\r\n const listUnReaded = this.getItems(false)\r\n return (\r\n <NotifyListStyled className={`${notifyListClasses.root}${this.props.isMobile ? ' mobile' : ''}`}>\r\n {/* Render the menu header */}\r\n <div className={notifyListClasses.header}>\r\n <Box flex={1}>\r\n <Typography variant='h6'>Notifications</Typography>\r\n <Typography variant='body2' color={alpha(colors.common.white, 0.6)}>\r\n {this.getDescription(listUnReaded.length)}\r\n </Typography>\r\n </Box>\r\n </div>\r\n {/* <Divider variant='middle' sx={{ borderColor: alpha(colors.common.white, 0.1) }} /> */}\r\n {/* Render sub-menu items */}\r\n <Stack className={notifyListClasses.items}>\r\n {listUnReaded.length > 0 && (\r\n <div>\r\n <div className={notifyListClasses.groupTitle}>\r\n <Typography variant='caption'>Unseen</Typography>\r\n <Divider sx={{ borderColor: alpha(colors.common.white, 0.1) }} />\r\n </div>\r\n {listUnReaded.map(this.renderItem)}\r\n </div>\r\n )}\r\n {listReaded.length > 0 && (\r\n <div>\r\n <div className={notifyListClasses.groupTitle}>\r\n <Typography variant='caption'>Seen</Typography>\r\n <Divider sx={{ borderColor: alpha(colors.common.white, 0.1) }} />\r\n </div>\r\n {listReaded.map(this.renderItem)}\r\n </div>\r\n )}\r\n {listUnReaded.length + listReaded.length === 0 && (\r\n <NoDataPanel title='No Notifications' subTitle=\"You're all caught up!\" sx={{ minWidth: 250, flex: 1 }} />\r\n )}\r\n </Stack>\r\n <div className={notifyListClasses.footer}>\r\n
|
|
1
|
+
{"version":3,"file":"notify-list.js","sources":["../../src/notification/notify-list.tsx"],"sourcesContent":["import { Component, ComponentProps } from 'react'\r\nimport { alpha, Box, Button, colors, Divider, Stack, Typography } from '@mui/material'\r\nimport DraftsOutlinedIcon from '@mui/icons-material/DraftsOutlined'\r\nimport MarkEmailUnreadOutlinedIcon from '@mui/icons-material/MarkEmailUnreadOutlined'\r\nimport { INotification } from './types'\r\nimport { formatTimeAgo } from './helpers'\r\nimport { NoDataPanel } from '../components/no-data-panel'\r\nimport { NotifyListStyled, notifyListClasses } from './styled'\r\n\r\nexport interface INotifyListSlots {\r\n /** @default true */\r\n enableViewAll?: boolean\r\n buttonViewAllProps?: ComponentProps<typeof Button> & { [key: string]: any }\r\n onViewAllClick?: () => void\r\n}\r\n\r\ninterface INotifyListProps extends INotifyListSlots {\r\n data: INotification[]\r\n onClick?: (value: INotification) => void\r\n isMobile?: boolean\r\n}\r\n\r\nclass NotifyList extends Component<INotifyListProps> {\r\n render() {\r\n const listReaded = this.getItems(true)\r\n const listUnReaded = this.getItems(false)\r\n return (\r\n <NotifyListStyled className={`${notifyListClasses.root}${this.props.isMobile ? ' mobile' : ''}`}>\r\n {/* Render the menu header */}\r\n <div className={notifyListClasses.header}>\r\n <Box flex={1}>\r\n <Typography variant='h6'>Notifications</Typography>\r\n <Typography variant='body2' color={alpha(colors.common.white, 0.6)}>\r\n {this.getDescription(listUnReaded.length)}\r\n </Typography>\r\n </Box>\r\n </div>\r\n {/* <Divider variant='middle' sx={{ borderColor: alpha(colors.common.white, 0.1) }} /> */}\r\n {/* Render sub-menu items */}\r\n <Stack className={notifyListClasses.items}>\r\n {listUnReaded.length > 0 && (\r\n <div>\r\n <div className={notifyListClasses.groupTitle}>\r\n <Typography variant='caption'>Unseen</Typography>\r\n <Divider sx={{ borderColor: alpha(colors.common.white, 0.1) }} />\r\n </div>\r\n {listUnReaded.map(this.renderItem)}\r\n </div>\r\n )}\r\n {listReaded.length > 0 && (\r\n <div>\r\n <div className={notifyListClasses.groupTitle}>\r\n <Typography variant='caption'>Seen</Typography>\r\n <Divider sx={{ borderColor: alpha(colors.common.white, 0.1) }} />\r\n </div>\r\n {listReaded.map(this.renderItem)}\r\n </div>\r\n )}\r\n {listUnReaded.length + listReaded.length === 0 && (\r\n <NoDataPanel title='No Notifications' subTitle=\"You're all caught up!\" sx={{ minWidth: 250, flex: 1 }} />\r\n )}\r\n </Stack>\r\n {this.props.enableViewAll !== false && (\r\n <div className={notifyListClasses.footer}>\r\n <Button\r\n variant='text'\r\n {...this.props.buttonViewAllProps}\r\n onClick={(e) => {\r\n this.props.buttonViewAllProps?.onClick?.(e)\r\n this.props.onViewAllClick?.()\r\n }}\r\n sx={{ flex: '0 0 auto', width: 'auto', ...this.props.buttonViewAllProps?.sx }}\r\n >\r\n <Typography variant='caption' sx={{ textTransform: 'none', fontWeight: 600 }}>\r\n View All\r\n </Typography>\r\n </Button>\r\n </div>\r\n )}\r\n </NotifyListStyled>\r\n )\r\n }\r\n\r\n renderItem = (item: INotification, index: number) => {\r\n // Render each item in the menu\r\n return (\r\n <Box key={index.toString()} className={notifyListClasses.item} onClick={() => this.onClickHandler(item)}>\r\n <Stack px={1}>{item.IsRead ? <DraftsOutlinedIcon color='disabled' /> : <MarkEmailUnreadOutlinedIcon color='success' />}</Stack>\r\n <Box flex={1}>\r\n <Typography variant='subtitle1' component='h6' className={notifyListClasses.itemTitle}>\r\n {item.Title}\r\n </Typography>\r\n <Typography variant='caption' className={notifyListClasses.itemSubTitle}>\r\n {item.SubTitle}\r\n </Typography>\r\n <Stack direction='row' spacing={1} justifyContent='flex-end'>\r\n <Typography variant='caption' color={alpha(colors.common.white, 0.5)}>\r\n {formatTimeAgo(item.DateCreated)}\r\n </Typography>\r\n </Stack>\r\n </Box>\r\n </Box>\r\n )\r\n }\r\n\r\n onClickHandler = (notification: INotification) => {\r\n if (!this.props.onClick) return\r\n // Call the onClick handler if provided\r\n this.props.onClick(notification)\r\n }\r\n\r\n getDescription = (count: number) => {\r\n if (count === 0) return 'No new notifications'\r\n if (count === 1) return 'You have 1 unread notification'\r\n return `You have ${count} unread notifications`\r\n }\r\n\r\n getItems = (isReaded?: boolean) => {\r\n return this.props.data.filter((item) => (isReaded !== undefined ? item.IsRead === isReaded : true))\r\n }\r\n}\r\nexport default NotifyList\r\n"],"names":["NotifyList","_this","_classCallCheck","_len","arguments","length","args","Array","_key","_callSuper","this","concat","_defineProperty","item","index","_jsxs","Box","className","notifyListClasses","onClick","onClickHandler","children","_jsx","Stack","px","IsRead","DraftsOutlinedIcon","color","MarkEmailUnreadOutlinedIcon","flex","Typography","variant","component","itemTitle","Title","itemSubTitle","SubTitle","direction","spacing","justifyContent","alpha","colors","common","white","formatTimeAgo","DateCreated","toString","notification","props","count","isReaded","data","filter","undefined","_inherits","Component","_createClass","key","value","_this$props$buttonVie","_this2","listReaded","getItems","listUnReaded","NotifyListStyled","root","isMobile","header","getDescription","items","groupTitle","Divider","sx","borderColor","map","renderItem","NoDataPanel","title","subTitle","minWidth","enableViewAll","footer","Button","_objectSpread","buttonViewAllProps","e","_this2$props$buttonVi","_this2$props$buttonVi2","_this2$props$onViewAl","_this2$props","call","onViewAllClick","width","textTransform","fontWeight"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{slicedToArray as t,toConsumableArray as n,inherits as o,createClass as e,
|
|
1
|
+
import{slicedToArray as t,toConsumableArray as n,inherits as o,createClass as e,objectSpread2 as r,asyncToGenerator as a,classCallCheck as i,callSuper as l,defineProperty as s,regenerator as c}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsx as u,jsxs as d,Fragment as f}from"react/jsx-runtime";import{useTheme as p,useMediaQuery as h,Badge as m,Drawer as v}from"@mui/material";import{useState as C,useEffect as g,Component as y}from"react";import{GlobalModal as k,mapGlobalModalContext as w}from"dinocollab-core/api-context";import b from"@mui/icons-material/NotificationsNone";import{MenuStyled as D}from"./styled.js";import{IconButtonDark as S}from"../components/buttons.js";import{useFetchData as x}from"./hook.js";import R from"./notify-list.js";import{NotifyDetail as A}from"./notify-detail.js";var M=function(){function t(n){var o;return i(this,t),o=l(this,t,[n]),s(o,"onClickHandler",function(t){var n;o.onClose(),null===(n=o.globalModalContext)||void 0===n||n.show({backdropActivated:!0,renderContent:function(){var n;return u(A,{data:t,fetchDetail:o.props.fetchDetail,onRead:o.onReadHandler,onClose:null===(n=o.globalModalContext)||void 0===n?void 0:n.close})}})}),s(o,"onOpen",function(t){o.setState({anchorEl:t})}),s(o,"onClose",function(){o.setState({anchorEl:null})}),s(o,"onReadHandler",function(){var t=a(c().m(function t(n){var e,r,a;return c().w(function(t){for(;;)switch(t.n){case 0:null===(e=o.globalModalContext)||void 0===e||e.close();try{null===(r=(a=o.props).onRead)||void 0===r||r.call(a,n)}catch(t){console.error("Error updating read state:",t)}case 1:return t.a(2)}},t)}));return function(n){return t.apply(this,arguments)}}()),o.state={anchorEl:null,hydrated:!1},o}return o(t,y),e(t,[{key:"notifications",get:function(){var t;return null!==(t=this.props.data)&&void 0!==t?t:[]}},{key:"newFeatureCount",get:function(){return this.notifications.filter(function(t){return!t.IsRead}).length}},{key:"componentDidMount",value:function(){this.setState({hydrated:!0})}},{key:"componentDidUpdate",value:function(t){var n=this;if(t.data!==this.props.data&&this.props.data.length>0){var o=this.props.data.filter(function(t){return"Popup"===t.AreaType&&!t.IsRead});o.length>0&&setTimeout(function(){var t,e;null===(t=(e=n.props).onAutoShowPopup)||void 0===t||t.call(e,o[0])},1500)}}},{key:"render",value:function(){var t=this,n=Boolean(this.state.anchorEl);return d(f,{children:[u(S,{onClick:function(n){return t.onOpen(n.currentTarget)},children:u(m,{badgeContent:this.state.hydrated?this.newFeatureCount:0,color:"error",children:u(b,{fontSize:"small"})})}),this.props.isMobile?u(v,{anchor:"right",open:n,onClose:this.onClose,disableScrollLock:!0,PaperProps:{sx:{width:"calc(100% - 100px)",maxWidth:360}},children:w(function(n){return t.globalModalContext=n,u(R,r({data:t.props.data,onClick:t.onClickHandler,onViewAllClick:t.onClose},t.props.notifyListSlots))})}):u(D,{disableScrollLock:!0,anchorEl:this.state.anchorEl,open:n,onClose:this.onClose,anchorOrigin:{vertical:"top",horizontal:"right"},transformOrigin:{vertical:"top",horizontal:"right"},MenuListProps:{component:"div"},children:w(function(n){return t.globalModalContext=n,u(R,r({data:t.props.data,onClick:t.onClickHandler,onViewAllClick:t.onClose},t.props.notifyListSlots))})})]})}}])}(),T=function(o){var e=x(o.featData),i=C([]),l=t(i,2),s=l[0],d=l[1],f=p(),m=h(f.breakpoints.down("sm"));g(function(){if(e.data){var t=n(e.data).sort(function(t,n){return new Date(n.DateCreated).getTime()-new Date(t.DateCreated).getTime()});d(t)}},[e.data]);var v=function(){var t=a(c().m(function t(n,e,a){var i;return c().w(function(t){for(;;)switch(t.n){case 0:return t.n=1,null===(i=o.onRead)||void 0===i?void 0:i.call(o,n,e,a);case 1:d(function(t){return t.map(function(t){return t.Id===n?r(r({},t),{},{IsRead:!0}):t}).sort(function(t,n){return new Date(n.DateCreated).getTime()-new Date(t.DateCreated).getTime()})});case 2:return t.a(2)}},t)}));return function(n,o,e){return t.apply(this,arguments)}}();return u(k,{children:w(function(t){return u(M,{data:s,loading:e.loading,fetchDetail:o.fetchDetail,onRead:v,onAutoShowPopup:function(n){return function(t,n){n.show({backdropActivated:!0,renderContent:function(){return u(A,{data:t,fetchDetail:o.fetchDetail,onRead:(e=a(c().m(function t(o,e,r){return c().w(function(t){for(;;)switch(t.n){case 0:return n.close(),t.n=1,v(o,e,r);case 1:return t.a(2)}},t)})),function(t,n,o){return e.apply(this,arguments)}),onClose:n.close});var e}})}(n,t)},isMobile:m,notifyListSlots:o.notifyListSlots})})})},j=function(t){var n=function(n){return u(T,r(r({},t),n))};return n.displayName="NotificationWidget",n};export{T as NotificationWidget,j as createNotificationWidget,T as default};
|
|
2
2
|
//# sourceMappingURL=widget.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"widget.js","sources":["../../src/notification/widget.tsx"],"sourcesContent":["import { Badge, Drawer, useMediaQuery, useTheme } from '@mui/material'\r\nimport { Component, FC, useEffect, useState } from 'react'\r\nimport { GlobalModal, IGlobalModalContext, mapGlobalModalContext } from 'dinocollab-core/api-context'\r\nimport NotificationsNoneIcon from '@mui/icons-material/NotificationsNone'\r\nimport { MenuStyled } from './styled'\r\nimport { IconButtonDark } from '../components/buttons'\r\nimport { FetchDataFunction, useFetchData } from './hook'\r\nimport { INotification, ReadFunction, FetchDetailFunction, INotificationPropsDef } from './types'\r\nimport NotifyList from './notify-list'\r\nimport NotifyDetail from './notify-detail'\r\n\r\ninterface INotificationProps extends INotificationPropsDef {\r\n loading?: boolean\r\n data: INotification[]\r\n fetchDetail?: FetchDetailFunction\r\n onAutoShowPopup?: (notification: INotification) => void\r\n isMobile?: boolean\r\n}\r\n\r\ninterface INotificationState {\r\n anchorEl: HTMLElement | null\r\n hydrated: boolean\r\n}\r\nclass NotificationContent extends Component<INotificationProps, INotificationState> {\r\n globalModalContext?: IGlobalModalContext\r\n constructor(props: INotificationProps) {\r\n super(props)\r\n this.state = { anchorEl: null, hydrated: false }\r\n }\r\n\r\n get notifications() {\r\n return this.props.data ?? []\r\n }\r\n\r\n get newFeatureCount() {\r\n return this.notifications.filter((n) => !n.IsRead).length\r\n }\r\n\r\n componentDidMount() {\r\n // When mounted on the client, set hydrated = true\r\n this.setState({ hydrated: true })\r\n }\r\n\r\n componentDidUpdate(prevProps: INotificationProps) {\r\n // Auto show popup notifications\r\n if (prevProps.data !== this.props.data && this.props.data.length > 0) {\r\n const popupNotifications = this.props.data.filter((n) => n.AreaType === 'Popup' && !n.IsRead)\r\n if (popupNotifications.length > 0) {\r\n // Delay to improve UX\r\n setTimeout(() => {\r\n this.props.onAutoShowPopup?.(popupNotifications[0])\r\n }, 1500)\r\n }\r\n }\r\n }\r\n\r\n render() {\r\n const isOpen = Boolean(this.state.anchorEl)\r\n\r\n return (\r\n <>\r\n <IconButtonDark onClick={(e) => this.onOpen(e.currentTarget)}>\r\n <Badge badgeContent={this.state.hydrated ? this.newFeatureCount : 0} color='error'>\r\n <NotificationsNoneIcon fontSize='small' />\r\n </Badge>\r\n </IconButtonDark>\r\n\r\n {this.props.isMobile ? (\r\n <Drawer\r\n anchor='right'\r\n open={isOpen}\r\n onClose={this.onClose}\r\n disableScrollLock\r\n PaperProps={{ sx: { width: 'calc(100% - 100px)', maxWidth: 360 } }}\r\n >\r\n {mapGlobalModalContext((context: IGlobalModalContext) => {\r\n this.globalModalContext = context\r\n return <NotifyList data={this.props.data} onClick={this.onClickHandler} />\r\n })}\r\n </Drawer>\r\n ) : (\r\n <MenuStyled\r\n disableScrollLock\r\n anchorEl={this.state.anchorEl}\r\n open={isOpen}\r\n onClose={this.onClose}\r\n anchorOrigin={{ vertical: 'top', horizontal: 'right' }}\r\n transformOrigin={{ vertical: 'top', horizontal: 'right' }}\r\n MenuListProps={{ component: 'div' }}\r\n >\r\n {mapGlobalModalContext((context: IGlobalModalContext) => {\r\n this.globalModalContext = context\r\n return <NotifyList data={this.props.data} onClick={this.onClickHandler} />\r\n })}\r\n </MenuStyled>\r\n )}\r\n </>\r\n )\r\n }\r\n\r\n onClickHandler = (value: INotification) => {\r\n this.onClose()\r\n this.globalModalContext?.show({\r\n backdropActivated: true,\r\n renderContent: () => (\r\n <NotifyDetail data={value} fetchDetail={this.props.fetchDetail} onRead={this.onReadHandler} onClose={this.globalModalContext?.close} />\r\n )\r\n })\r\n }\r\n\r\n onOpen = (target: HTMLElement) => {\r\n this.setState({ anchorEl: target })\r\n }\r\n\r\n onClose = () => {\r\n this.setState({ anchorEl: null })\r\n }\r\n\r\n onReadHandler: ReadFunction = async (id) => {\r\n this.globalModalContext?.close()\r\n // NotifyLocalStorage.setSingle(value.Id)\r\n try {\r\n // Call the callback to update the read state in the parent component\r\n this.props.onRead?.(id)\r\n } catch (error) {\r\n console.error('Error updating read state:', error)\r\n }\r\n }\r\n}\r\n\r\nexport interface INotificationWidgetProps {\r\n featData: FetchDataFunction<INotification[]>\r\n fetchDetail?: FetchDetailFunction\r\n onRead?: ReadFunction\r\n}\r\n\r\nexport const NotificationWidget: FC<INotificationWidgetProps> = (props) => {\r\n const intitialData = useFetchData<INotification[]>(props.featData)\r\n const [data, setData] = useState<INotification[]>([])\r\n const theme = useTheme()\r\n const isMobile = useMediaQuery(theme.breakpoints.down('sm'))\r\n\r\n // When initialData changes, update the local state\r\n useEffect(() => {\r\n if (intitialData.data) {\r\n const sortedData = [...intitialData.data].sort((a, b) => new Date(b.DateCreated).getTime() - new Date(a.DateCreated).getTime())\r\n setData(sortedData)\r\n }\r\n }, [intitialData.data])\r\n\r\n // Function to update read notifications\r\n const handleRead: ReadFunction = async (id: string, signal, options) => {\r\n await props.onRead?.(id, signal, options)\r\n setData((prev) => {\r\n const l = prev.map((n) => (n.Id === id ? { ...n, IsRead: true } : n))\r\n return l.sort((a, b) => new Date(b.DateCreated).getTime() - new Date(a.DateCreated).getTime())\r\n })\r\n }\r\n\r\n // Auto show popup notification\r\n const handleAutoShowPopup = (notification: INotification, context: IGlobalModalContext) => {\r\n context.show({\r\n backdropActivated: true,\r\n renderContent: () => (\r\n <NotifyDetail\r\n data={notification}\r\n fetchDetail={props.fetchDetail}\r\n onRead={async (id, s, o) => {\r\n context.close()\r\n await handleRead(id, s, o)\r\n }}\r\n onClose={context.close}\r\n />\r\n )\r\n })\r\n }\r\n\r\n return (\r\n <GlobalModal>\r\n {mapGlobalModalContext((context: IGlobalModalContext) => (\r\n <NotificationContent\r\n data={data}\r\n loading={intitialData.loading}\r\n fetchDetail={props.fetchDetail}\r\n onRead={handleRead}\r\n onAutoShowPopup={(x) => handleAutoShowPopup(x, context)}\r\n isMobile={isMobile}\r\n />\r\n ))}\r\n </GlobalModal>\r\n )\r\n}\r\nexport default NotificationWidget\r\n\r\nexport const createNotificationWidget = (params: INotificationWidgetProps) => {\r\n const _NotificationWidget: FC<Partial<INotificationWidgetProps>> = (props) => <NotificationWidget {...params} {...props} />\r\n _NotificationWidget.displayName = 'NotificationWidget'\r\n return _NotificationWidget\r\n}\r\n"],"names":["NotificationContent","props","_this","_classCallCheck","_callSuper","_defineProperty","value","_this$globalModalCont","onClose","globalModalContext","show","backdropActivated","renderContent","_this$globalModalCont2","_jsx","NotifyDetail","data","fetchDetail","onRead","onReadHandler","close","target","setState","anchorEl","_ref","_asyncToGenerator","_regenerator","m","_callee","id","_this$globalModalCont3","_this$props$onRead","_this$props","w","_context","n","call","error","console","a","_x","apply","this","arguments","state","hydrated","_inherits","Component","_createClass","key","get","_this$props$data","notifications","filter","IsRead","length","prevProps","_this2","popupNotifications","AreaType","setTimeout","_this2$props$onAutoSh","_this2$props","onAutoShowPopup","_this3","isOpen","Boolean","_jsxs","IconButtonDark","onClick","e","onOpen","currentTarget","children","Badge","badgeContent","newFeatureCount","color","NotificationsNoneIcon","fontSize","isMobile","Drawer","anchor","open","disableScrollLock","PaperProps","sx","width","maxWidth","mapGlobalModalContext","context","NotifyList","onClickHandler","MenuStyled","anchorOrigin","vertical","horizontal","transformOrigin","MenuListProps","component","NotificationWidget","intitialData","useFetchData","featData","_useState","useState","_useState2","_slicedToArray","setData","theme","useTheme","useMediaQuery","breakpoints","down","useEffect","sortedData","_toConsumableArray","sort","b","Date","DateCreated","getTime","handleRead","_ref2","_callee2","signal","options","_props$onRead","_context2","prev","map","Id","_objectSpread","_x2","_x3","_x4","GlobalModal","loading","x","notification","_onRead","_callee3","s","o","_context3","_x5","_x6","_x7","handleAutoShowPopup","createNotificationWidget","params","_NotificationWidget","displayName"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"widget.js","sources":["../../src/notification/widget.tsx"],"sourcesContent":["import { Badge, Drawer, useMediaQuery, useTheme } from '@mui/material'\r\nimport { Component, FC, useEffect, useState } from 'react'\r\nimport { GlobalModal, IGlobalModalContext, mapGlobalModalContext } from 'dinocollab-core/api-context'\r\nimport NotificationsNoneIcon from '@mui/icons-material/NotificationsNone'\r\nimport { MenuStyled } from './styled'\r\nimport { IconButtonDark } from '../components/buttons'\r\nimport { FetchDataFunction, useFetchData } from './hook'\r\nimport { INotification, ReadFunction, FetchDetailFunction, INotificationPropsDef } from './types'\r\nimport NotifyList, { INotifyListSlots } from './notify-list'\r\nimport NotifyDetail from './notify-detail'\r\n\r\ninterface INotificationProps extends INotificationPropsDef {\r\n loading?: boolean\r\n data: INotification[]\r\n fetchDetail?: FetchDetailFunction\r\n onAutoShowPopup?: (notification: INotification) => void\r\n isMobile?: boolean\r\n notifyListSlots?: INotifyListSlots\r\n}\r\n\r\ninterface INotificationState {\r\n anchorEl: HTMLElement | null\r\n hydrated: boolean\r\n}\r\nclass NotificationContent extends Component<INotificationProps, INotificationState> {\r\n globalModalContext?: IGlobalModalContext\r\n constructor(props: INotificationProps) {\r\n super(props)\r\n this.state = { anchorEl: null, hydrated: false }\r\n }\r\n\r\n get notifications() {\r\n return this.props.data ?? []\r\n }\r\n\r\n get newFeatureCount() {\r\n return this.notifications.filter((n) => !n.IsRead).length\r\n }\r\n\r\n componentDidMount() {\r\n // When mounted on the client, set hydrated = true\r\n this.setState({ hydrated: true })\r\n }\r\n\r\n componentDidUpdate(prevProps: INotificationProps) {\r\n // Auto show popup notifications\r\n if (prevProps.data !== this.props.data && this.props.data.length > 0) {\r\n const popupNotifications = this.props.data.filter((n) => n.AreaType === 'Popup' && !n.IsRead)\r\n if (popupNotifications.length > 0) {\r\n // Delay to improve UX\r\n setTimeout(() => {\r\n this.props.onAutoShowPopup?.(popupNotifications[0])\r\n }, 1500)\r\n }\r\n }\r\n }\r\n\r\n render() {\r\n const isOpen = Boolean(this.state.anchorEl)\r\n\r\n return (\r\n <>\r\n <IconButtonDark onClick={(e) => this.onOpen(e.currentTarget)}>\r\n <Badge badgeContent={this.state.hydrated ? this.newFeatureCount : 0} color='error'>\r\n <NotificationsNoneIcon fontSize='small' />\r\n </Badge>\r\n </IconButtonDark>\r\n\r\n {this.props.isMobile ? (\r\n <Drawer\r\n anchor='right'\r\n open={isOpen}\r\n onClose={this.onClose}\r\n disableScrollLock\r\n PaperProps={{ sx: { width: 'calc(100% - 100px)', maxWidth: 360 } }}\r\n >\r\n {mapGlobalModalContext((context: IGlobalModalContext) => {\r\n this.globalModalContext = context\r\n return <NotifyList data={this.props.data} onClick={this.onClickHandler} onViewAllClick={this.onClose} {...this.props.notifyListSlots} />\r\n })}\r\n </Drawer>\r\n ) : (\r\n <MenuStyled\r\n disableScrollLock\r\n anchorEl={this.state.anchorEl}\r\n open={isOpen}\r\n onClose={this.onClose}\r\n anchorOrigin={{ vertical: 'top', horizontal: 'right' }}\r\n transformOrigin={{ vertical: 'top', horizontal: 'right' }}\r\n MenuListProps={{ component: 'div' }}\r\n >\r\n {mapGlobalModalContext((context: IGlobalModalContext) => {\r\n this.globalModalContext = context\r\n return <NotifyList data={this.props.data} onClick={this.onClickHandler} onViewAllClick={this.onClose} {...this.props.notifyListSlots} />\r\n })}\r\n </MenuStyled>\r\n )}\r\n </>\r\n )\r\n }\r\n\r\n onClickHandler = (value: INotification) => {\r\n this.onClose()\r\n this.globalModalContext?.show({\r\n backdropActivated: true,\r\n renderContent: () => (\r\n <NotifyDetail data={value} fetchDetail={this.props.fetchDetail} onRead={this.onReadHandler} onClose={this.globalModalContext?.close} />\r\n )\r\n })\r\n }\r\n\r\n onOpen = (target: HTMLElement) => {\r\n this.setState({ anchorEl: target })\r\n }\r\n\r\n onClose = () => {\r\n this.setState({ anchorEl: null })\r\n }\r\n\r\n onReadHandler: ReadFunction = async (id) => {\r\n this.globalModalContext?.close()\r\n // NotifyLocalStorage.setSingle(value.Id)\r\n try {\r\n // Call the callback to update the read state in the parent component\r\n this.props.onRead?.(id)\r\n } catch (error) {\r\n console.error('Error updating read state:', error)\r\n }\r\n }\r\n}\r\n\r\nexport interface INotificationWidgetProps {\r\n featData: FetchDataFunction<INotification[]>\r\n fetchDetail?: FetchDetailFunction\r\n onRead?: ReadFunction\r\n notifyListSlots?: INotifyListSlots\r\n}\r\n\r\nexport const NotificationWidget: FC<INotificationWidgetProps> = (props) => {\r\n const intitialData = useFetchData<INotification[]>(props.featData)\r\n const [data, setData] = useState<INotification[]>([])\r\n const theme = useTheme()\r\n const isMobile = useMediaQuery(theme.breakpoints.down('sm'))\r\n\r\n // When initialData changes, update the local state\r\n useEffect(() => {\r\n if (intitialData.data) {\r\n const sortedData = [...intitialData.data].sort((a, b) => new Date(b.DateCreated).getTime() - new Date(a.DateCreated).getTime())\r\n setData(sortedData)\r\n }\r\n }, [intitialData.data])\r\n\r\n // Function to update read notifications\r\n const handleRead: ReadFunction = async (id: string, signal, options) => {\r\n await props.onRead?.(id, signal, options)\r\n setData((prev) => {\r\n const l = prev.map((n) => (n.Id === id ? { ...n, IsRead: true } : n))\r\n return l.sort((a, b) => new Date(b.DateCreated).getTime() - new Date(a.DateCreated).getTime())\r\n })\r\n }\r\n\r\n // Auto show popup notification\r\n const handleAutoShowPopup = (notification: INotification, context: IGlobalModalContext) => {\r\n context.show({\r\n backdropActivated: true,\r\n renderContent: () => (\r\n <NotifyDetail\r\n data={notification}\r\n fetchDetail={props.fetchDetail}\r\n onRead={async (id, s, o) => {\r\n context.close()\r\n await handleRead(id, s, o)\r\n }}\r\n onClose={context.close}\r\n />\r\n )\r\n })\r\n }\r\n\r\n return (\r\n <GlobalModal>\r\n {mapGlobalModalContext((context: IGlobalModalContext) => (\r\n <NotificationContent\r\n data={data}\r\n loading={intitialData.loading}\r\n fetchDetail={props.fetchDetail}\r\n onRead={handleRead}\r\n onAutoShowPopup={(x) => handleAutoShowPopup(x, context)}\r\n isMobile={isMobile}\r\n notifyListSlots={props.notifyListSlots}\r\n />\r\n ))}\r\n </GlobalModal>\r\n )\r\n}\r\nexport default NotificationWidget\r\n\r\nexport const createNotificationWidget = (params: INotificationWidgetProps) => {\r\n const _NotificationWidget: FC<Partial<INotificationWidgetProps>> = (props) => <NotificationWidget {...params} {...props} />\r\n _NotificationWidget.displayName = 'NotificationWidget'\r\n return _NotificationWidget\r\n}\r\n"],"names":["NotificationContent","props","_this","_classCallCheck","_callSuper","_defineProperty","value","_this$globalModalCont","onClose","globalModalContext","show","backdropActivated","renderContent","_this$globalModalCont2","_jsx","NotifyDetail","data","fetchDetail","onRead","onReadHandler","close","target","setState","anchorEl","_ref","_asyncToGenerator","_regenerator","m","_callee","id","_this$globalModalCont3","_this$props$onRead","_this$props","w","_context","n","call","error","console","a","_x","apply","this","arguments","state","hydrated","_inherits","Component","_createClass","key","get","_this$props$data","notifications","filter","IsRead","length","prevProps","_this2","popupNotifications","AreaType","setTimeout","_this2$props$onAutoSh","_this2$props","onAutoShowPopup","_this3","isOpen","Boolean","_jsxs","IconButtonDark","onClick","e","onOpen","currentTarget","children","Badge","badgeContent","newFeatureCount","color","NotificationsNoneIcon","fontSize","isMobile","Drawer","anchor","open","disableScrollLock","PaperProps","sx","width","maxWidth","mapGlobalModalContext","context","NotifyList","_objectSpread","onClickHandler","onViewAllClick","notifyListSlots","MenuStyled","anchorOrigin","vertical","horizontal","transformOrigin","MenuListProps","component","NotificationWidget","intitialData","useFetchData","featData","_useState","useState","_useState2","_slicedToArray","setData","theme","useTheme","useMediaQuery","breakpoints","down","useEffect","sortedData","_toConsumableArray","sort","b","Date","DateCreated","getTime","handleRead","_ref2","_callee2","signal","options","_props$onRead","_context2","prev","map","Id","_x2","_x3","_x4","GlobalModal","loading","x","notification","_onRead","_callee3","s","o","_context3","_x5","_x6","_x7","handleAutoShowPopup","createNotificationWidget","params","_NotificationWidget","displayName"],"mappings":"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"}
|
|
@@ -1,6 +1,15 @@
|
|
|
1
|
-
import { Component } from 'react';
|
|
1
|
+
import { Component, ComponentProps } from 'react';
|
|
2
|
+
import { Button } from '@mui/material';
|
|
2
3
|
import { INotification } from './types';
|
|
3
|
-
interface
|
|
4
|
+
export interface INotifyListSlots {
|
|
5
|
+
/** @default true */
|
|
6
|
+
enableViewAll?: boolean;
|
|
7
|
+
buttonViewAllProps?: ComponentProps<typeof Button> & {
|
|
8
|
+
[key: string]: any;
|
|
9
|
+
};
|
|
10
|
+
onViewAllClick?: () => void;
|
|
11
|
+
}
|
|
12
|
+
interface INotifyListProps extends INotifyListSlots {
|
|
4
13
|
data: INotification[];
|
|
5
14
|
onClick?: (value: INotification) => void;
|
|
6
15
|
isMobile?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"notify-list.d.ts","sourceRoot":"","sources":["../../../src/notification/notify-list.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"notify-list.d.ts","sourceRoot":"","sources":["../../../src/notification/notify-list.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AACjD,OAAO,EAAc,MAAM,EAAsC,MAAM,eAAe,CAAA;AAGtF,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAKvC,MAAM,WAAW,gBAAgB;IAC/B,oBAAoB;IACpB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,kBAAkB,CAAC,EAAE,cAAc,CAAC,OAAO,MAAM,CAAC,GAAG;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAA;IAC3E,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;CAC5B;AAED,UAAU,gBAAiB,SAAQ,gBAAgB;IACjD,IAAI,EAAE,aAAa,EAAE,CAAA;IACrB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,cAAM,UAAW,SAAQ,SAAS,CAAC,gBAAgB,CAAC;IAClD,MAAM;IA4DN,UAAU,SAAU,aAAa,SAAS,MAAM,6CAoB/C;IAED,cAAc,iBAAkB,aAAa,UAI5C;IAED,cAAc,UAAW,MAAM,YAI9B;IAED,QAAQ,cAAe,OAAO,qBAE7B;CACF;AACD,eAAe,UAAU,CAAA"}
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
2
|
import { FetchDataFunction } from './hook';
|
|
3
3
|
import { INotification, ReadFunction, FetchDetailFunction } from './types';
|
|
4
|
+
import { INotifyListSlots } from './notify-list';
|
|
4
5
|
export interface INotificationWidgetProps {
|
|
5
6
|
featData: FetchDataFunction<INotification[]>;
|
|
6
7
|
fetchDetail?: FetchDetailFunction;
|
|
7
8
|
onRead?: ReadFunction;
|
|
9
|
+
notifyListSlots?: INotifyListSlots;
|
|
8
10
|
}
|
|
9
11
|
export declare const NotificationWidget: FC<INotificationWidgetProps>;
|
|
10
12
|
export default NotificationWidget;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"widget.d.ts","sourceRoot":"","sources":["../../../src/notification/widget.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,EAAE,EAAuB,MAAM,OAAO,CAAA;AAK1D,OAAO,EAAE,iBAAiB,EAAgB,MAAM,QAAQ,CAAA;AACxD,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,mBAAmB,EAAyB,MAAM,SAAS,CAAA;
|
|
1
|
+
{"version":3,"file":"widget.d.ts","sourceRoot":"","sources":["../../../src/notification/widget.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,EAAE,EAAuB,MAAM,OAAO,CAAA;AAK1D,OAAO,EAAE,iBAAiB,EAAgB,MAAM,QAAQ,CAAA;AACxD,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,mBAAmB,EAAyB,MAAM,SAAS,CAAA;AACjG,OAAmB,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA;AA2H5D,MAAM,WAAW,wBAAwB;IACvC,QAAQ,EAAE,iBAAiB,CAAC,aAAa,EAAE,CAAC,CAAA;IAC5C,WAAW,CAAC,EAAE,mBAAmB,CAAA;IACjC,MAAM,CAAC,EAAE,YAAY,CAAA;IACrB,eAAe,CAAC,EAAE,gBAAgB,CAAA;CACnC;AAED,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,wBAAwB,CAwD3D,CAAA;AACD,eAAe,kBAAkB,CAAA;AAEjC,eAAO,MAAM,wBAAwB,WAAY,wBAAwB,0CAIxE,CAAA"}
|