box-ui-elements 23.1.0 → 23.2.0-beta.1

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.
@@ -71,6 +71,7 @@ function MessageCenter({
71
71
  setIsOpen(false);
72
72
  }
73
73
  const icon = /*#__PURE__*/React.createElement(ButtonComponent, {
74
+ badgeCount: unreadMessageCount,
74
75
  "data-resin-target": "messageCenterOpenModal",
75
76
  "data-testid": "message-center-unread-count",
76
77
  onClick: handleOnClick,
@@ -16,7 +16,7 @@ import Internationalize from '../../../elements/common/Internationalize';
16
16
 
17
17
  type Props = {|
18
18
  apiHost: string,
19
- buttonComponent: React.ComponentType<{ render: () => React.Node }>,
19
+ buttonComponent: React.ComponentType<{ render: () => React.Node, badgeCount: null | number }>,
20
20
  contentPreviewProps?: ContentPreviewProps,
21
21
  getEligibleMessages: () => Promise<GetEligibleMessageCenterMessages>,
22
22
  getToken: (fileId: string) => Promise<Token>,
@@ -102,6 +102,7 @@ function MessageCenter({
102
102
 
103
103
  const icon = (
104
104
  <ButtonComponent
105
+ badgeCount={unreadMessageCount}
105
106
  data-resin-target="messageCenterOpenModal"
106
107
  data-testid="message-center-unread-count"
107
108
  onClick={handleOnClick}
@@ -1 +1 @@
1
- {"version":3,"file":"MessageCenter.js","names":["React","noop","Megaphone20","CountBadge","Badgeable","MessageCenterModal","Internationalize","MessageCenter","contentPreviewProps","getUnreadMessageCount","buttonComponent","ButtonComponent","getEligibleMessages","getToken","apiHost","postMarkAllMessagesAsSeen","overscanRowCount","language","messages","onMessageShown","isOpen","setIsOpen","useState","unreadMessageCount","setUnreadMessageCount","eligibleMessages","setEligibleMessages","isFetchingMessagesRef","useRef","useEffect","fetchUnreadMessageCount","count","err","fetchEligibleMessages","current","eligibleMessagesResponse","isOpenAndNoMessages","shouldPrefetch","handleOnClick","prevIsOpen","onRequestClose","icon","createElement","onClick","render","className","topRight","isVisible","shouldAnimate","value","Fragment"],"sources":["../../../../src/features/message-center/components/MessageCenter.js"],"sourcesContent":["// @flow\nimport * as React from 'react';\nimport noop from 'lodash/noop';\nimport Megaphone20 from '../../../icon/fill/Megaphone20';\nimport CountBadge from '../../../components/count-badge/CountBadge';\nimport Badgeable from '../../../components/badgeable/Badgeable';\nimport type { Token, StringMap } from '../../../common/types/core';\nimport MessageCenterModal from './message-center-modal/MessageCenterModal';\nimport type {\n GetEligibleMessageCenterMessages,\n UnreadEligibleMessageCenterMessageCount,\n EligibleMessageCenterMessage,\n} from '../types';\nimport type { ContentPreviewProps } from '../../message-preview-content/MessagePreviewContent';\nimport Internationalize from '../../../elements/common/Internationalize';\n\ntype Props = {|\n apiHost: string,\n buttonComponent: React.ComponentType<{ render: () => React.Node }>,\n contentPreviewProps?: ContentPreviewProps,\n getEligibleMessages: () => Promise<GetEligibleMessageCenterMessages>,\n getToken: (fileId: string) => Promise<Token>,\n getUnreadMessageCount: () => Promise<UnreadEligibleMessageCenterMessageCount>,\n language?: string,\n messages?: StringMap,\n onMessageShown?: EligibleMessageCenterMessage => void,\n overscanRowCount?: number,\n postMarkAllMessagesAsSeen: (messageArray: Array<EligibleMessageCenterMessage> | Error) => Promise<null>,\n|};\n\nfunction MessageCenter({\n contentPreviewProps,\n getUnreadMessageCount,\n buttonComponent: ButtonComponent,\n getEligibleMessages,\n getToken,\n apiHost,\n postMarkAllMessagesAsSeen,\n overscanRowCount,\n language,\n messages,\n onMessageShown = noop,\n}: Props) {\n const [isOpen, setIsOpen] = React.useState(false);\n const [unreadMessageCount, setUnreadMessageCount] = React.useState(null);\n // TODO: create hook for fetching, loading\n const [eligibleMessages, setEligibleMessages] = React.useState<GetEligibleMessageCenterMessages | null | Error>(\n null,\n );\n const isFetchingMessagesRef = React.useRef(false);\n\n React.useEffect(() => {\n async function fetchUnreadMessageCount() {\n try {\n const { count } = await getUnreadMessageCount();\n setUnreadMessageCount(count);\n } catch (err) {\n // TODO: add error handling\n }\n }\n\n fetchUnreadMessageCount();\n }, [getUnreadMessageCount]);\n\n React.useEffect(() => {\n async function fetchEligibleMessages() {\n if (!isFetchingMessagesRef.current) {\n isFetchingMessagesRef.current = true;\n try {\n const eligibleMessagesResponse = await getEligibleMessages();\n setEligibleMessages(eligibleMessagesResponse);\n } catch (err) {\n setEligibleMessages(err);\n }\n isFetchingMessagesRef.current = false;\n }\n }\n\n const isOpenAndNoMessages = isOpen && !eligibleMessages;\n // if there are unread messages, prefetch the data as the user is more likely to click on the message center\n const shouldPrefetch = !isOpen && !eligibleMessages && !!unreadMessageCount;\n if (isOpenAndNoMessages || shouldPrefetch) {\n fetchEligibleMessages();\n }\n }, [eligibleMessages, getEligibleMessages, isOpen, unreadMessageCount]);\n\n function handleOnClick() {\n setIsOpen(prevIsOpen => !prevIsOpen);\n if (unreadMessageCount && unreadMessageCount > 0 && eligibleMessages) {\n try {\n postMarkAllMessagesAsSeen(eligibleMessages);\n } catch (err) {\n // swallow\n }\n setUnreadMessageCount(0);\n }\n }\n\n function onRequestClose() {\n setIsOpen(false);\n }\n\n const icon = (\n <ButtonComponent\n data-resin-target=\"messageCenterOpenModal\"\n data-testid=\"message-center-unread-count\"\n onClick={handleOnClick}\n render={() => (\n <Badgeable\n className=\"icon-bell-badge\"\n topRight={\n <CountBadge isVisible={!!unreadMessageCount} shouldAnimate value={unreadMessageCount || 0} />\n }\n >\n <Megaphone20 className=\"bdl-MessageCenter-icon\" />\n </Badgeable>\n )}\n />\n );\n\n return (\n <Internationalize messages={messages} language={language}>\n <span className=\"bdl-MessageCenter\" data-resin-component=\"messageCenter\">\n {isOpen ? (\n <>\n {icon}\n <MessageCenterModal\n apiHost={apiHost}\n contentPreviewProps={contentPreviewProps}\n getToken={getToken}\n messages={eligibleMessages}\n onRequestClose={onRequestClose}\n overscanRowCount={overscanRowCount}\n onMessageShown={onMessageShown}\n />\n </>\n ) : (\n <>{icon}</>\n )}\n </span>\n </Internationalize>\n );\n}\n\nexport default MessageCenter;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"MessageCenter.js","names":["React","noop","Megaphone20","CountBadge","Badgeable","MessageCenterModal","Internationalize","MessageCenter","contentPreviewProps","getUnreadMessageCount","buttonComponent","ButtonComponent","getEligibleMessages","getToken","apiHost","postMarkAllMessagesAsSeen","overscanRowCount","language","messages","onMessageShown","isOpen","setIsOpen","useState","unreadMessageCount","setUnreadMessageCount","eligibleMessages","setEligibleMessages","isFetchingMessagesRef","useRef","useEffect","fetchUnreadMessageCount","count","err","fetchEligibleMessages","current","eligibleMessagesResponse","isOpenAndNoMessages","shouldPrefetch","handleOnClick","prevIsOpen","onRequestClose","icon","createElement","badgeCount","onClick","render","className","topRight","isVisible","shouldAnimate","value","Fragment"],"sources":["../../../../src/features/message-center/components/MessageCenter.js"],"sourcesContent":["// @flow\nimport * as React from 'react';\nimport noop from 'lodash/noop';\nimport Megaphone20 from '../../../icon/fill/Megaphone20';\nimport CountBadge from '../../../components/count-badge/CountBadge';\nimport Badgeable from '../../../components/badgeable/Badgeable';\nimport type { Token, StringMap } from '../../../common/types/core';\nimport MessageCenterModal from './message-center-modal/MessageCenterModal';\nimport type {\n GetEligibleMessageCenterMessages,\n UnreadEligibleMessageCenterMessageCount,\n EligibleMessageCenterMessage,\n} from '../types';\nimport type { ContentPreviewProps } from '../../message-preview-content/MessagePreviewContent';\nimport Internationalize from '../../../elements/common/Internationalize';\n\ntype Props = {|\n apiHost: string,\n buttonComponent: React.ComponentType<{ render: () => React.Node, badgeCount: null | number }>,\n contentPreviewProps?: ContentPreviewProps,\n getEligibleMessages: () => Promise<GetEligibleMessageCenterMessages>,\n getToken: (fileId: string) => Promise<Token>,\n getUnreadMessageCount: () => Promise<UnreadEligibleMessageCenterMessageCount>,\n language?: string,\n messages?: StringMap,\n onMessageShown?: EligibleMessageCenterMessage => void,\n overscanRowCount?: number,\n postMarkAllMessagesAsSeen: (messageArray: Array<EligibleMessageCenterMessage> | Error) => Promise<null>,\n|};\n\nfunction MessageCenter({\n contentPreviewProps,\n getUnreadMessageCount,\n buttonComponent: ButtonComponent,\n getEligibleMessages,\n getToken,\n apiHost,\n postMarkAllMessagesAsSeen,\n overscanRowCount,\n language,\n messages,\n onMessageShown = noop,\n}: Props) {\n const [isOpen, setIsOpen] = React.useState(false);\n const [unreadMessageCount, setUnreadMessageCount] = React.useState(null);\n // TODO: create hook for fetching, loading\n const [eligibleMessages, setEligibleMessages] = React.useState<GetEligibleMessageCenterMessages | null | Error>(\n null,\n );\n const isFetchingMessagesRef = React.useRef(false);\n\n React.useEffect(() => {\n async function fetchUnreadMessageCount() {\n try {\n const { count } = await getUnreadMessageCount();\n setUnreadMessageCount(count);\n } catch (err) {\n // TODO: add error handling\n }\n }\n\n fetchUnreadMessageCount();\n }, [getUnreadMessageCount]);\n\n React.useEffect(() => {\n async function fetchEligibleMessages() {\n if (!isFetchingMessagesRef.current) {\n isFetchingMessagesRef.current = true;\n try {\n const eligibleMessagesResponse = await getEligibleMessages();\n setEligibleMessages(eligibleMessagesResponse);\n } catch (err) {\n setEligibleMessages(err);\n }\n isFetchingMessagesRef.current = false;\n }\n }\n\n const isOpenAndNoMessages = isOpen && !eligibleMessages;\n // if there are unread messages, prefetch the data as the user is more likely to click on the message center\n const shouldPrefetch = !isOpen && !eligibleMessages && !!unreadMessageCount;\n if (isOpenAndNoMessages || shouldPrefetch) {\n fetchEligibleMessages();\n }\n }, [eligibleMessages, getEligibleMessages, isOpen, unreadMessageCount]);\n\n function handleOnClick() {\n setIsOpen(prevIsOpen => !prevIsOpen);\n if (unreadMessageCount && unreadMessageCount > 0 && eligibleMessages) {\n try {\n postMarkAllMessagesAsSeen(eligibleMessages);\n } catch (err) {\n // swallow\n }\n setUnreadMessageCount(0);\n }\n }\n\n function onRequestClose() {\n setIsOpen(false);\n }\n\n const icon = (\n <ButtonComponent\n badgeCount={unreadMessageCount}\n data-resin-target=\"messageCenterOpenModal\"\n data-testid=\"message-center-unread-count\"\n onClick={handleOnClick}\n render={() => (\n <Badgeable\n className=\"icon-bell-badge\"\n topRight={\n <CountBadge isVisible={!!unreadMessageCount} shouldAnimate value={unreadMessageCount || 0} />\n }\n >\n <Megaphone20 className=\"bdl-MessageCenter-icon\" />\n </Badgeable>\n )}\n />\n );\n\n return (\n <Internationalize messages={messages} language={language}>\n <span className=\"bdl-MessageCenter\" data-resin-component=\"messageCenter\">\n {isOpen ? (\n <>\n {icon}\n <MessageCenterModal\n apiHost={apiHost}\n contentPreviewProps={contentPreviewProps}\n getToken={getToken}\n messages={eligibleMessages}\n onRequestClose={onRequestClose}\n overscanRowCount={overscanRowCount}\n onMessageShown={onMessageShown}\n />\n </>\n ) : (\n <>{icon}</>\n )}\n </span>\n </Internationalize>\n );\n}\n\nexport default MessageCenter;\n"],"mappings":"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","ignoreList":[]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "box-ui-elements",
3
- "version": "23.1.0",
3
+ "version": "23.2.0-beta.1",
4
4
  "description": "Box UI Elements",
5
5
  "author": "Box (https://www.box.com/)",
6
6
  "license": "SEE LICENSE IN LICENSE",
@@ -172,4 +172,14 @@ describe('components/message-center/MessageCenter.integration', () => {
172
172
 
173
173
  expect(wrapper.find(Message)).toHaveLength(2);
174
174
  });
175
+
176
+ test('should render ButtonComponent with badgeCount prop passed from MessageCenter', async () => {
177
+ const wrapper = await getWrapper();
178
+ const badgeCount = countResponse.count;
179
+
180
+ await actWait();
181
+ wrapper.update();
182
+
183
+ expect(wrapper.find('ButtonComponent').props().badgeCount).toBe(badgeCount);
184
+ });
175
185
  });
@@ -16,7 +16,7 @@ import Internationalize from '../../../elements/common/Internationalize';
16
16
 
17
17
  type Props = {|
18
18
  apiHost: string,
19
- buttonComponent: React.ComponentType<{ render: () => React.Node }>,
19
+ buttonComponent: React.ComponentType<{ render: () => React.Node, badgeCount: null | number }>,
20
20
  contentPreviewProps?: ContentPreviewProps,
21
21
  getEligibleMessages: () => Promise<GetEligibleMessageCenterMessages>,
22
22
  getToken: (fileId: string) => Promise<Token>,
@@ -102,6 +102,7 @@ function MessageCenter({
102
102
 
103
103
  const icon = (
104
104
  <ButtonComponent
105
+ badgeCount={unreadMessageCount}
105
106
  data-resin-target="messageCenterOpenModal"
106
107
  data-testid="message-center-unread-count"
107
108
  onClick={handleOnClick}