@messenger-box/property-ext-browser 5.0.11-alpha.5 → 5.0.11-alpha.7

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.
Files changed (7) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/lib/components/InboxMessage/MessageWidgets/MessageAlert.d.ts +1 -0
  3. package/lib/components/InboxMessage/MessageWidgets/MessageAlert.d.ts.map +1 -1
  4. package/lib/components/InboxMessage/MessageWidgets/MessageAlert.js +3 -3
  5. package/lib/components/InboxMessage/MessageWidgets/MessageAlert.js.map +1 -1
  6. package/package.json +3 -3
  7. package/src/components/InboxMessage/MessageWidgets/MessageAlert.tsx +26 -22
package/CHANGELOG.md CHANGED
@@ -3,6 +3,14 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [5.0.11-alpha.7](https://github.com/CDEBase/messenger-box/compare/v5.0.11-alpha.6...v5.0.11-alpha.7) (2024-04-23)
7
+
8
+ **Note:** Version bump only for package @messenger-box/property-ext-browser
9
+
10
+ ## [5.0.11-alpha.6](https://github.com/CDEBase/messenger-box/compare/v5.0.11-alpha.5...v5.0.11-alpha.6) (2024-04-11)
11
+
12
+ **Note:** Version bump only for package @messenger-box/property-ext-browser
13
+
6
14
  ## [5.0.11-alpha.5](https://github.com/CDEBase/messenger-box/compare/v5.0.11-alpha.4...v5.0.11-alpha.5) (2024-04-10)
7
15
 
8
16
  **Note:** Version bump only for package @messenger-box/property-ext-browser
package/lib/components/InboxMessage/MessageWidgets/MessageAlert.d.ts CHANGED
@@ -3,6 +3,7 @@ import { IPost } from '@messenger-box/core';
3
3
  export interface IPropertyMessageWidgetProps {
4
4
  message: IPost;
5
5
  index: number;
6
+ onMessageClick: (ref: IPost) => void;
6
7
  }
7
8
  export declare const MessageAlert: (props: IPropertyMessageWidgetProps) => React.JSX.Element;
8
9
  //# sourceMappingURL=MessageAlert.d.ts.map
package/lib/components/InboxMessage/MessageWidgets/MessageAlert.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"MessageAlert.d.ts","sourceRoot":"","sources":["../../../../src/components/InboxMessage/MessageWidgets/MessageAlert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAG5C,MAAM,WAAW,2BAA2B;IACxC,OAAO,EAAE,KAAK,CAAA;IACd,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,YAAY,UAAW,2BAA2B,sBAuC9D,CAAA"}
1
+ {"version":3,"file":"MessageAlert.d.ts","sourceRoot":"","sources":["../../../../src/components/InboxMessage/MessageWidgets/MessageAlert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAG5C,MAAM,WAAW,2BAA2B;IACxC,OAAO,EAAE,KAAK,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAC;CACxC;AAED,eAAO,MAAM,YAAY,UAAW,2BAA2B,sBA0C9D,CAAC"}
package/lib/components/InboxMessage/MessageWidgets/MessageAlert.js CHANGED
@@ -1,14 +1,14 @@
1
1
  import React from'react';import*as Icons from'@chakra-ui/icons';import parse from'html-react-parser';import {useColorModeValue,Stack,Text,Link}from'@chakra-ui/react';const MessageAlert = (props) => {
2
- const { message, index } = props;
2
+ const { message, index, onMessageClick } = props;
3
3
  const { attachment } = message.propsConfiguration.contents;
4
4
  const Icon = Icons[attachment.icon];
5
5
  const color = useColorModeValue('white', 'gray.800');
6
6
  const bgColor = useColorModeValue('gray.800', 'white');
7
- return (React.createElement(Stack, { key: `${index}`, mt: "4", mb: "10", bgColor: bgColor, padding: 3, margin: 2, opacity: 0.7, borderRadius: 20, direction: ['column', 'row'] },
7
+ return (React.createElement(Stack, { key: `${index}`, mt: "4", mb: "10", bgColor: bgColor, padding: 3, margin: 2, opacity: 0.7, borderRadius: 20, direction: ['column', 'row'], cursor: 'pointer', onClick: () => onMessageClick(message) },
8
8
  React.createElement(Icon, { w: 6, h: 6, color: color }),
9
9
  React.createElement(Text, { fontSize: "14px", mt: "5px", mb: "5px", whiteSpace: 'pre-line', color: color }, attachment.isTitleHtml ? parse(attachment.title) : attachment?.title),
10
10
  attachment.callToAction && (React.createElement(Link, { color: color, mr: "2", style: {
11
- textDecoration: 'underline'
11
+ textDecoration: 'underline',
12
12
  }, href: attachment.callToAction.link, isExternal: true },
13
13
  attachment.callToAction.title,
14
14
  " ",
package/lib/components/InboxMessage/MessageWidgets/MessageAlert.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"MessageAlert.js","sources":["../../../../src/components/InboxMessage/MessageWidgets/MessageAlert.tsx"],"sourcesContent":[null],"names":[],"mappings":"sKAYa,MAAA,YAAY,GAAG,CAAC,KAAkC,KAAI;AAC/D,IAAA,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IACjC,MAAM,EAAE,UAAU,EAAE,GAAG,OAAO,CAAC,kBAAkB,CAAC,QAA4D,CAAC;IAC/G,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;IACpC,MAAM,KAAK,GAAG,iBAAiB,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;IACrD,MAAM,OAAO,GAAG,iBAAiB,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;IACvD,QACI,oBAAC,KAAK,EAAA,EACF,GAAG,EAAE,CAAA,EAAG,KAAK,CAAE,CAAA,EACf,EAAE,EAAC,GAAG,EACN,EAAE,EAAC,IAAI,EACP,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,CAAC,EACV,MAAM,EAAE,CAAC,EACT,OAAO,EAAE,GAAG,EACZ,YAAY,EAAE,EAAE,EAChB,SAAS,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,EAAA;AAE5B,QAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,EAAG,CAAA;AACjC,QAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,QAAQ,EAAC,MAAM,EAAC,EAAE,EAAC,KAAK,EAAC,EAAE,EAAC,KAAK,EAAC,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAA,EACvE,UAAU,CAAC,WAAW,GAAG,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,GAAG,UAAU,EAAE,KAAK,CAClE;AAEH,QAAA,UAAU,CAAC,YAAY,KACnB,KAAA,CAAA,aAAA,CAAC,IAAI,EACD,EAAA,KAAK,EAAE,KAAK,EACZ,EAAE,EAAC,GAAG,EACN,KAAK,EAAE;AACH,gBAAA,cAAc,EAAE,WAAW;aAC9B,EACD,IAAI,EAAE,UAAU,CAAC,YAAY,CAAC,IAAI,EAClC,UAAU,EAAA,IAAA,EAAA;YAET,UAAU,CAAC,YAAY,CAAC,KAAK;;AAAE,YAAA,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,gBAAgB,EAAA,EAAC,EAAE,EAAC,KAAK,EAAA,CAAE,CAC/D,CACV,CAED,EACX;AACL"}
1
+ {"version":3,"file":"MessageAlert.js","sources":["../../../../src/components/InboxMessage/MessageWidgets/MessageAlert.tsx"],"sourcesContent":[null],"names":[],"mappings":"sKAaa,MAAA,YAAY,GAAG,CAAC,KAAkC,KAAI;IAC/D,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IACjD,MAAM,EAAE,UAAU,EAAE,GAAG,OAAO,CAAC,kBAAkB,CAAC,QAEjD,CAAC;IACF,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;IACpC,MAAM,KAAK,GAAG,iBAAiB,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;IACrD,MAAM,OAAO,GAAG,iBAAiB,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;IAEvD,QACI,KAAC,CAAA,aAAA,CAAA,KAAK,EACF,EAAA,GAAG,EAAE,CAAA,EAAG,KAAK,CAAA,CAAE,EACf,EAAE,EAAC,GAAG,EACN,EAAE,EAAC,IAAI,EACP,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,CAAC,EACV,MAAM,EAAE,CAAC,EACT,OAAO,EAAE,GAAG,EACZ,YAAY,EAAE,EAAE,EAChB,SAAS,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,EAC5B,MAAM,EAAE,SAAS,EACjB,OAAO,EAAE,MAAM,cAAc,CAAC,OAAO,CAAC,EAAA;AAEtC,QAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,EAAI,CAAA;AAClC,QAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,QAAQ,EAAC,MAAM,EAAC,EAAE,EAAC,KAAK,EAAC,EAAE,EAAC,KAAK,EAAC,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAA,EACvE,UAAU,CAAC,WAAW,GAAG,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,GAAG,UAAU,EAAE,KAAK,CAClE;AACN,QAAA,UAAU,CAAC,YAAY,KACpB,KAAA,CAAA,aAAA,CAAC,IAAI,EACD,EAAA,KAAK,EAAE,KAAK,EACZ,EAAE,EAAC,GAAG,EACN,KAAK,EAAE;AACH,gBAAA,cAAc,EAAE,WAAW;aAC9B,EACD,IAAI,EAAE,UAAU,CAAC,YAAY,CAAC,IAAI,EAClC,UAAU,EAAA,IAAA,EAAA;YAET,UAAU,CAAC,YAAY,CAAC,KAAK;;AAAE,YAAA,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,gBAAgB,EAAA,EAAC,EAAE,EAAC,KAAK,EAAA,CAAG,CAChE,CACV,CACG,EACV;AACN"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@messenger-box/property-ext-browser",
3
- "version": "5.0.11-alpha.5",
3
+ "version": "5.0.11-alpha.7",
4
4
  "description": "Extention to Messenger to support property on browser",
5
5
  "license": "ISC",
6
6
  "author": "CDMBase LLC",
@@ -23,7 +23,7 @@
23
23
  "dependencies": {
24
24
  "@emotion/react": "^11",
25
25
  "@emotion/styled": "^11",
26
- "@messenger-box/chakra-ui-inbox": "5.0.11-alpha.5",
26
+ "@messenger-box/chakra-ui-inbox": "5.0.11-alpha.7",
27
27
  "@messenger-box/core": "5.0.11-alpha.5",
28
28
  "@messenger-box/property-ext-core": "5.0.11-alpha.5",
29
29
  "date-fns": "^2.28.0",
@@ -58,5 +58,5 @@
58
58
  "typescript": {
59
59
  "definition": "lib/index.d.ts"
60
60
  },
61
- "gitHead": "906a872d168de0dd3468411df430ffc7dce8076a"
61
+ "gitHead": "c6318645a3b3cb8ba9d118e17db02fd91eac217b"
62
62
  }
package/src/components/InboxMessage/MessageWidgets/MessageAlert.tsx CHANGED
@@ -6,16 +6,20 @@ import { IPost } from '@messenger-box/core';
6
6
  import { AlertMessageAttachmentsInterface } from '../../../interfaces';
7
7
 
8
8
  export interface IPropertyMessageWidgetProps {
9
- message: IPost
10
- index: number,
9
+ message: IPost;
10
+ index: number;
11
+ onMessageClick: (ref: IPost) => void;
11
12
  }
12
13
 
13
14
  export const MessageAlert = (props: IPropertyMessageWidgetProps) => {
14
- const { message, index } = props;
15
- const { attachment } = message.propsConfiguration.contents as { attachment: AlertMessageAttachmentsInterface };
15
+ const { message, index, onMessageClick } = props;
16
+ const { attachment } = message.propsConfiguration.contents as {
17
+ attachment: AlertMessageAttachmentsInterface;
18
+ };
16
19
  const Icon = Icons[attachment.icon];
17
20
  const color = useColorModeValue('white', 'gray.800');
18
21
  const bgColor = useColorModeValue('gray.800', 'white');
22
+
19
23
  return (
20
24
  <Stack
21
25
  key={`${index}`}
@@ -27,26 +31,26 @@ export const MessageAlert = (props: IPropertyMessageWidgetProps) => {
27
31
  opacity={0.7}
28
32
  borderRadius={20}
29
33
  direction={['column', 'row']}
34
+ cursor={'pointer'}
35
+ onClick={() => onMessageClick(message)}
30
36
  >
31
- <Icon w={6} h={6} color={color}/>
37
+ <Icon w={6} h={6} color={color} />
32
38
  <Text fontSize="14px" mt="5px" mb="5px" whiteSpace={'pre-line'} color={color}>
33
39
  {attachment.isTitleHtml ? parse(attachment.title) : attachment?.title}
34
40
  </Text>
35
- {
36
- attachment.callToAction && (
37
- <Link
38
- color={color}
39
- mr="2"
40
- style={{
41
- textDecoration: 'underline'
42
- }}
43
- href={attachment.callToAction.link}
44
- isExternal
45
- >
46
- {attachment.callToAction.title} <Icons.ExternalLinkIcon mx="2px"/>
47
- </Link>
48
- )
49
- }
41
+ {attachment.callToAction && (
42
+ <Link
43
+ color={color}
44
+ mr="2"
45
+ style={{
46
+ textDecoration: 'underline',
47
+ }}
48
+ href={attachment.callToAction.link}
49
+ isExternal
50
+ >
51
+ {attachment.callToAction.title} <Icons.ExternalLinkIcon mx="2px" />
52
+ </Link>
53
+ )}
50
54
  </Stack>
51
- )
52
- }
55
+ );
56
+ };