@zohoim/chat-components 0.0.13 → 0.0.14

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 (358) hide show
  1. package/es/ActionIcon/ActionIcon.js +57 -35
  2. package/es/ActionIcon/css/ActionIcon.module.css +4 -23
  3. package/es/ActionIcon/props/defaultProps.js +4 -2
  4. package/es/ActionIcon/props/propTypes.js +10 -3
  5. package/es/ActionIconWrapper/ActionIconWrapper.js +49 -0
  6. package/es/ActionIconWrapper/css/ActionIconWrapper.module.css +27 -0
  7. package/es/ActionIconWrapper/index.js +1 -0
  8. package/es/{MediaControls → ActionIconWrapper}/props/defaultProps.js +3 -3
  9. package/es/ActionIconWrapper/props/propTypes.js +11 -0
  10. package/es/AttachmentBubble/AttachmentBubble.js +28 -28
  11. package/es/AttachmentBubble/css/AttachmentBubble.module.css +16 -15
  12. package/es/AttachmentBubble/props/defaultProps.js +2 -2
  13. package/es/AttachmentBubble/props/propTypes.js +10 -5
  14. package/es/AttachmentBubbleInfo/AttachmentBubbleInfo.js +7 -19
  15. package/es/AttachmentBubbleInfo/css/AttachmentBubbleInfo.module.css +20 -16
  16. package/es/AttachmentBubbleInfo/props/defaultProps.js +1 -1
  17. package/es/AttachmentBubbleInfo/props/propTypes.js +3 -3
  18. package/es/AttachmentIcon/AttachmentIcon.js +47 -0
  19. package/es/AttachmentIcon/css/AttachmentIcon.module.css +4 -0
  20. package/es/AttachmentIcon/index.js +1 -0
  21. package/es/{im/IMAttachmentIcon → AttachmentIcon}/props/defaultProps.js +3 -3
  22. package/es/AttachmentIcon/props/propTypes.js +11 -0
  23. package/es/{im/IMAttachmentIcon/IMAttachmentIcon.js → AttachmentIcon/utils/getAttachmentIconComponent.js} +10 -40
  24. package/es/Audio/Audio.js +14 -36
  25. package/es/Audio/css/Audio.module.css +3 -3
  26. package/es/Audio/props/defaultProps.js +2 -3
  27. package/es/Audio/props/propTypes.js +3 -4
  28. package/es/AudioBubble/AudioBubble.js +25 -42
  29. package/es/AudioBubble/props/defaultProps.js +2 -4
  30. package/es/AudioBubble/props/propTypes.js +10 -7
  31. package/es/Fonts/puviFont.module.css +55 -54
  32. package/es/ImageBubble/ImageBubble.js +20 -20
  33. package/es/ImageBubble/css/ImageBubble.module.css +8 -11
  34. package/es/ImageBubble/props/defaultProps.js +1 -1
  35. package/es/ImageBubble/props/propTypes.js +5 -3
  36. package/es/InfoBubble/InfoBubble.js +6 -8
  37. package/es/InfoBubble/props/defaultProps.js +1 -1
  38. package/es/LazyLoadImage/LazyLoadImage.js +6 -16
  39. package/es/LazyLoadImage/css/LazyLoadImage.module.css +1 -0
  40. package/es/LazyLoadImage/props/defaultProps.js +1 -1
  41. package/es/LazyLoadImage/props/propTypes.js +3 -3
  42. package/es/LocationBubble/LocationBubble.js +15 -33
  43. package/es/LocationBubble/css/LocationBubble.module.css +11 -11
  44. package/es/LocationBubble/props/defaultProps.js +1 -1
  45. package/es/LocationBubble/props/propTypes.js +2 -2
  46. package/es/MediaBubbleWrapper/MediaBubbleWrapper.js +59 -0
  47. package/es/MediaBubbleWrapper/css/MediaBubbleWrapper.module.css +3 -0
  48. package/es/MediaBubbleWrapper/index.js +1 -0
  49. package/es/MediaBubbleWrapper/props/defaultProps.js +7 -0
  50. package/es/MediaBubbleWrapper/props/propTypes.js +16 -0
  51. package/es/Message/Message.js +59 -37
  52. package/es/Message/props/defaultProps.js +3 -3
  53. package/es/Message/props/propTypes.js +17 -38
  54. package/es/MessageAction/MessageAction.js +31 -18
  55. package/es/MessageAction/props/defaultProps.js +4 -4
  56. package/es/MessageAction/props/propTypes.js +11 -8
  57. package/es/MessageActions/MessageActions.js +54 -96
  58. package/es/MessageActions/css/MessageActions.module.css +2 -9
  59. package/es/MessageActions/props/defaultProps.js +2 -4
  60. package/es/MessageActions/props/propTypes.js +13 -19
  61. package/es/MessageActionsMore/MessageActionsMore.js +43 -35
  62. package/es/MessageActionsMore/css/MessageActionsMore.module.css +8 -5
  63. package/es/MessageActionsMore/props/defaultProps.js +3 -2
  64. package/es/MessageActionsMore/props/propTypes.js +3 -2
  65. package/es/MessageActionsWrapper/MessageActionsWrapper.js +36 -44
  66. package/es/MessageActionsWrapper/css/MessageActionsWrapper.module.css +1 -1
  67. package/es/MessageActionsWrapper/props/defaultProps.js +4 -5
  68. package/es/MessageActionsWrapper/props/propTypes.js +7 -4
  69. package/es/MessageAvatar/MessageAvatar.js +11 -19
  70. package/es/MessageAvatar/css/MessageAvatar.module.css +3 -3
  71. package/es/MessageAvatar/props/defaultProps.js +2 -6
  72. package/es/MessageAvatar/props/propTypes.js +5 -5
  73. package/es/MessageBox/MessageBox.js +24 -25
  74. package/es/MessageBox/css/MessageBox.module.css +12 -14
  75. package/es/MessageBox/css/cssJSLogic.js +1 -21
  76. package/es/MessageBox/props/defaultProps.js +1 -3
  77. package/es/MessageBox/props/propTypes.js +8 -7
  78. package/es/MessageBubble/MessageBubble.js +61 -38
  79. package/es/MessageBubble/css/MessageBubble.module.css +11 -8
  80. package/es/MessageBubble/css/cssJSLogic.js +10 -26
  81. package/es/MessageBubble/props/defaultProps.js +1 -1
  82. package/es/MessageBubble/props/propTypes.js +7 -7
  83. package/es/MessageStatus/MessageStatus.js +11 -11
  84. package/es/MessageStatus/css/MessageStatus.module.css +1 -1
  85. package/es/MessageStatus/css/cssJSLogic.js +13 -9
  86. package/es/MessageStatus/props/defaultProps.js +1 -1
  87. package/es/MessageStatus/props/propTypes.js +4 -14
  88. package/es/MoreActionItem/MoreActionItem.js +21 -33
  89. package/es/MoreActionItem/css/MoreActionItem.module.css +5 -11
  90. package/es/MoreActionItem/props/defaultProps.js +1 -5
  91. package/es/MoreActionItem/props/propTypes.js +6 -5
  92. package/es/ReplyBubble/ReplyBubble.js +59 -28
  93. package/es/ReplyBubble/css/ReplyBubble.module.css +17 -0
  94. package/es/ReplyBubble/props/defaultProps.js +3 -4
  95. package/es/ReplyBubble/props/propTypes.js +15 -8
  96. package/es/ReplyBubbleContent/ReplyBubbleContent.js +11 -22
  97. package/es/ReplyBubbleContent/css/ReplyBubbleContent.module.css +38 -38
  98. package/es/ReplyBubbleContent/props/defaultProps.js +1 -1
  99. package/es/ReplyBubbleContent/props/propTypes.js +4 -4
  100. package/es/ReplyBubbleHeader/ReplyBubbleHeader.js +25 -31
  101. package/es/ReplyBubbleHeader/css/ReplyBubbleHeader.module.css +4 -7
  102. package/es/ReplyBubbleHeader/props/defaultProps.js +2 -4
  103. package/es/ReplyBubbleHeader/props/propTypes.js +3 -2
  104. package/es/TextBubble/TextBubble.js +11 -29
  105. package/es/TextBubble/css/TextBubble.module.css +13 -9
  106. package/es/TextBubble/props/defaultProps.js +2 -5
  107. package/es/TextBubble/props/propTypes.js +3 -4
  108. package/es/Theme/{DeskAssets.js → ThemeAssets.js} +10 -6
  109. package/es/Theme/ThemeWrapper.js +54 -57
  110. package/es/Theme/{ToolttipWrapper.js → TooltipWrapper.js} +29 -25
  111. package/es/Theme/constants/index.js +1 -4
  112. package/es/Theme/crm/dark/blueFanTheme.js +5 -5
  113. package/es/Theme/crm/dark/blueTheme.js +5 -5
  114. package/es/Theme/crm/dark/commonColorVariable.js +5 -5
  115. package/es/Theme/crm/dark/darkBlueTheme.js +5 -5
  116. package/es/Theme/crm/dark/darkGreyTheme.js +5 -5
  117. package/es/Theme/crm/dark/greenTheme.js +5 -5
  118. package/es/Theme/crm/dark/orangeTheme.js +5 -5
  119. package/es/Theme/crm/dark/pinkTheme.js +5 -5
  120. package/es/Theme/crm/dark/tealTheme.js +5 -5
  121. package/es/Theme/crm/dark/whiteTheme.js +5 -5
  122. package/es/Theme/crm/light/blueFanTheme.js +5 -5
  123. package/es/Theme/crm/light/blueTheme.js +3 -3
  124. package/es/Theme/crm/light/commonColorVariable.js +3 -3
  125. package/es/Theme/crm/light/darkBlueTheme.js +5 -5
  126. package/es/Theme/crm/light/darkGreyTheme.js +5 -5
  127. package/es/Theme/crm/light/greenTheme.js +3 -3
  128. package/es/Theme/crm/light/orangeTheme.js +3 -3
  129. package/es/Theme/crm/light/pinkTheme.js +3 -3
  130. package/es/Theme/crm/light/tealTheme.js +3 -3
  131. package/es/Theme/crm/light/whiteTheme.js +5 -5
  132. package/es/Theme/crm/pureDark/blueFanTheme.js +5 -5
  133. package/es/Theme/crm/pureDark/blueTheme.js +5 -5
  134. package/es/Theme/crm/pureDark/commonColorVariable.js +3 -3
  135. package/es/Theme/crm/pureDark/darkBlueTheme.js +5 -5
  136. package/es/Theme/crm/pureDark/darkGreyTheme.js +5 -5
  137. package/es/Theme/crm/pureDark/greenTheme.js +5 -5
  138. package/es/Theme/crm/pureDark/orangeTheme.js +5 -5
  139. package/es/Theme/crm/pureDark/pinkTheme.js +5 -5
  140. package/es/Theme/crm/pureDark/tealTheme.js +5 -5
  141. package/es/Theme/crm/pureDark/whiteTheme.js +5 -5
  142. package/es/Theme/css/TooltipWrapper.module.css +2 -2
  143. package/es/Theme/props/defaultProps.js +2 -3
  144. package/es/Theme/props/propTypes.js +5 -6
  145. package/es/Theme/{desk/commonDeskColorVariable.js → themeVariables/commonThemeColorVariable.js} +2 -3
  146. package/es/Theme/{desk → themeVariables}/dark/blueTheme.js +11 -11
  147. package/es/Theme/{desk → themeVariables}/dark/commonColorVariable.js +1 -1
  148. package/es/Theme/{desk → themeVariables}/dark/greenTheme.js +7 -7
  149. package/es/Theme/{desk → themeVariables}/dark/orangeTheme.js +7 -7
  150. package/es/Theme/{desk → themeVariables}/dark/redTheme.js +7 -7
  151. package/es/Theme/{desk → themeVariables}/dark/yellowTheme.js +7 -7
  152. package/es/Theme/{desk → themeVariables}/light/blueTheme.js +7 -7
  153. package/es/Theme/{desk → themeVariables}/light/commonColorVariable.js +1 -1
  154. package/es/Theme/{desk → themeVariables}/light/greenTheme.js +7 -7
  155. package/es/Theme/{desk → themeVariables}/light/orangeTheme.js +6 -6
  156. package/es/Theme/{desk → themeVariables}/light/redTheme.js +6 -6
  157. package/es/Theme/{desk → themeVariables}/light/yellowTheme.js +7 -7
  158. package/es/Theme/{desk → themeVariables}/pureDark/blueTheme.js +7 -7
  159. package/es/Theme/{desk → themeVariables}/pureDark/commonColorVariable.js +1 -1
  160. package/es/Theme/{desk → themeVariables}/pureDark/greenTheme.js +7 -7
  161. package/es/Theme/{desk → themeVariables}/pureDark/orangeTheme.js +7 -7
  162. package/es/Theme/{desk → themeVariables}/pureDark/redTheme.js +7 -7
  163. package/es/Theme/{desk → themeVariables}/pureDark/yellowTheme.js +7 -7
  164. package/es/Theme/utils/combineConfigurations.js +17 -0
  165. package/es/Theme/utils/flatVariables.js +12 -0
  166. package/es/Theme/utils/getCustomizedCssVariables.js +19 -0
  167. package/es/Theme/utils/getThemeConfigurations.js +47 -175
  168. package/es/Theme/utils/getWrapperDivProps.js +12 -0
  169. package/es/Video/Video.js +13 -45
  170. package/es/Video/css/Video.module.css +2 -7
  171. package/es/Video/props/defaultProps.js +2 -3
  172. package/es/Video/props/propTypes.js +3 -4
  173. package/es/VideoBubble/VideoBubble.js +31 -35
  174. package/es/VideoBubble/css/VideoBubble.module.css +4 -4
  175. package/es/VideoBubble/props/defaultProps.js +2 -3
  176. package/es/VideoBubble/props/propTypes.js +11 -7
  177. package/es/icons/create-icon-components.js +30 -0
  178. package/es/icons/icon.template.js +9 -8
  179. package/es/icons/iconSrc/common/index.js +1 -2
  180. package/es/im/ArticleBubble/ArticleBubble.js +66 -0
  181. package/es/{ArticleBubble → im/ArticleBubble}/css/ArticleBubble.module.css +9 -10
  182. package/es/{ArticleBubble → im/ArticleBubble}/props/defaultProps.js +1 -1
  183. package/es/im/ArticleBubble/props/propTypes.js +13 -0
  184. package/es/im/IMAutoMessageInfo/IMAutoMessageInfo.js +10 -20
  185. package/es/im/IMAutoMessageInfo/css/IMAutoMessageInfo.module.css +2 -3
  186. package/es/im/IMAutoMessageInfo/props/defaultProps.js +1 -1
  187. package/es/im/IMAutoMessageInfo/props/propTypes.js +11 -9
  188. package/es/im/IMInfoBubble/IMInfoBubble.js +6 -8
  189. package/es/im/IMInfoBubble/props/defaultProps.js +1 -1
  190. package/es/im/IMIntegrationIcon/IMIntegrationIcon.js +31 -38
  191. package/es/im/IMIntegrationIcon/css/IMIntegrationIcon.module.css +5 -8
  192. package/es/im/IMIntegrationIcon/css/cssJSLogic.js +9 -13
  193. package/es/im/IMIntegrationIcon/index.js +1 -2
  194. package/es/im/IMIntegrationIcon/props/defaultProps.js +6 -4
  195. package/es/im/IMIntegrationIcon/props/propTypes.js +6 -17
  196. package/es/im/IMMessage/IMMessage.js +76 -91
  197. package/es/im/IMMessage/props/defaultProps.js +1 -10
  198. package/es/im/IMMessage/props/propTypes.js +49 -96
  199. package/es/im/IMMessageContent/IMMessageContent.js +74 -65
  200. package/es/im/IMMessageContent/css/IMMessageContent.module.css +1 -1
  201. package/es/im/IMMessageContent/props/defaultProps.js +2 -3
  202. package/es/im/IMMessageContent/props/propTypes.js +28 -23
  203. package/es/im/IMMessageMeta/IMMessageMeta.js +26 -21
  204. package/es/im/IMMessageMeta/css/IMMessageMeta.module.css +15 -4
  205. package/es/im/IMMessageMeta/css/cssJSLogic.js +11 -3
  206. package/es/im/IMMessageMeta/props/defaultProps.js +1 -1
  207. package/es/im/IMMessageMeta/props/propTypes.js +17 -12
  208. package/es/im/IMReplyBubble/IMReplyBubble.js +20 -59
  209. package/es/im/IMReplyBubble/props/defaultProps.js +2 -4
  210. package/es/im/IMReplyBubble/props/propTypes.js +16 -14
  211. package/es/im/IMTextBubble/IMTextBubble.js +15 -31
  212. package/es/im/IMTextBubble/props/defaultProps.js +3 -9
  213. package/es/im/IMTextBubble/props/propTypes.js +22 -8
  214. package/es/im/IMTicketLink/IMTicketLink.js +13 -11
  215. package/es/im/IMTicketLink/css/IMTicketLink.module.css +3 -4
  216. package/es/im/IMTicketLink/props/defaultProps.js +1 -1
  217. package/es/im/IMTicketLink/props/propTypes.js +4 -3
  218. package/es/im/index.js +1 -9
  219. package/es/index.js +4 -6
  220. package/package.json +32 -14
  221. package/es/ActionIcon/css/cssJSLogic.js +0 -10
  222. package/es/ArticleBubble/ArticleBubble.js +0 -70
  223. package/es/ArticleBubble/css/cssJSLogic.js +0 -34
  224. package/es/ArticleBubble/props/propTypes.js +0 -10
  225. package/es/AttachmentBubble/css/cssJSLogic.js +0 -18
  226. package/es/AttachmentBubbleInfo/css/cssJSLogic.js +0 -18
  227. package/es/Audio/css/cssJSLogic.js +0 -14
  228. package/es/AudioBubble/css/AudioBubble.module.css +0 -3
  229. package/es/AudioBubble/css/cssJSLogic.js +0 -20
  230. package/es/ImageBubble/css/cssJSLogic.js +0 -22
  231. package/es/LazyLoadImage/css/cssJSLogic.js +0 -10
  232. package/es/LocationBubble/css/cssJSLogic.js +0 -30
  233. package/es/MediaControls/MediaControls.js +0 -59
  234. package/es/MediaControls/css/MediaControls.module.css +0 -1
  235. package/es/MediaControls/css/cssJSLogic.js +0 -22
  236. package/es/MediaControls/index.js +0 -1
  237. package/es/MediaControls/props/propTypes.js +0 -11
  238. package/es/Message/css/Message.module.css +0 -0
  239. package/es/Message/css/cssJSLogic.js +0 -10
  240. package/es/MessageAction/css/MessageAction.module.css +0 -0
  241. package/es/MessageAction/css/cssJSLogic.js +0 -0
  242. package/es/MessageActions/css/cssJSLogic.js +0 -20
  243. package/es/MessageActionsMore/css/cssJSLogic.js +0 -28
  244. package/es/MessageActionsWrapper/css/cssJSLogic.js +0 -10
  245. package/es/MessageActionsWrapper/props/propConstants.js +0 -7
  246. package/es/MessageAvatar/css/cssJSLogic.js +0 -18
  247. package/es/MessageBubble/props/propConstants.js +0 -6
  248. package/es/MoreActionItem/css/cssJSLogic.js +0 -27
  249. package/es/ReplyBubble/css/cssJSLogic.js +0 -10
  250. package/es/ReplyBubbleContent/css/cssJSLogic.js +0 -22
  251. package/es/ReplyBubbleHeader/css/cssJSLogic.js +0 -18
  252. package/es/TextBubble/css/cssJSLogic.js +0 -18
  253. package/es/Theme/css/cssJSLogic.js +0 -14
  254. package/es/Video/css/cssJSLogic.js +0 -14
  255. package/es/VideoBubble/css/cssJSLogic.js +0 -10
  256. package/es/icons/factory/actions/convertTicket.svg +0 -21
  257. package/es/icons/factory/common/quote.svg +0 -1
  258. package/es/icons/iconSrc/actions/ConvertTicket.js +0 -25
  259. package/es/icons/iconSrc/actions/index.js +0 -1
  260. package/es/icons/iconSrc/common/Quote.js +0 -17
  261. package/es/im/IMArticleBubble/IMArticleBubble.js +0 -54
  262. package/es/im/IMArticleBubble/css/IMArticleBubble.module.css +0 -0
  263. package/es/im/IMArticleBubble/css/cssJSLogic.js +0 -10
  264. package/es/im/IMArticleBubble/index.js +0 -1
  265. package/es/im/IMArticleBubble/props/defaultProps.js +0 -8
  266. package/es/im/IMArticleBubble/props/propTypes.js +0 -14
  267. package/es/im/IMAttachmentBubble/IMAttachmentBubble.js +0 -62
  268. package/es/im/IMAttachmentBubble/css/IMAttachmentBubble.module.css +0 -1
  269. package/es/im/IMAttachmentBubble/css/cssJSLogic.js +0 -10
  270. package/es/im/IMAttachmentBubble/index.js +0 -1
  271. package/es/im/IMAttachmentBubble/props/defaultProps.js +0 -10
  272. package/es/im/IMAttachmentBubble/props/propTypes.js +0 -16
  273. package/es/im/IMAttachmentIcon/css/IMAttachmentIcon.module.css +0 -4
  274. package/es/im/IMAttachmentIcon/css/cssJSLogic.js +0 -16
  275. package/es/im/IMAttachmentIcon/index.js +0 -1
  276. package/es/im/IMAttachmentIcon/props/propTypes.js +0 -26
  277. package/es/im/IMAudioBubble/IMAudioBubble.js +0 -62
  278. package/es/im/IMAudioBubble/css/IMAudioBubble.module.css +0 -8
  279. package/es/im/IMAudioBubble/css/cssJSLogic.js +0 -20
  280. package/es/im/IMAudioBubble/index.js +0 -1
  281. package/es/im/IMAudioBubble/props/defaultProps.js +0 -11
  282. package/es/im/IMAudioBubble/props/propTypes.js +0 -17
  283. package/es/im/IMAutoMessageInfo/css/cssJSLogic.js +0 -10
  284. package/es/im/IMDateTime/IMDateTime.js +0 -40
  285. package/es/im/IMDateTime/css/IMDateTime.module.css +0 -10
  286. package/es/im/IMDateTime/css/cssJSLogic.js +0 -10
  287. package/es/im/IMDateTime/index.js +0 -1
  288. package/es/im/IMDateTime/props/defaultProps.js +0 -6
  289. package/es/im/IMDateTime/props/propTypes.js +0 -6
  290. package/es/im/IMImageBubble/IMImageBubble.js +0 -50
  291. package/es/im/IMImageBubble/css/IMImageBubble.module.css +0 -0
  292. package/es/im/IMImageBubble/css/cssJSLogic.js +0 -10
  293. package/es/im/IMImageBubble/index.js +0 -1
  294. package/es/im/IMImageBubble/props/defaultProps.js +0 -7
  295. package/es/im/IMImageBubble/props/propTypes.js +0 -13
  296. package/es/im/IMIntegrationIcon/props/propConstants.js +0 -8
  297. package/es/im/IMLocationBubble/IMLocationBubble.js +0 -50
  298. package/es/im/IMLocationBubble/css/IMLocationBubble.module.css +0 -0
  299. package/es/im/IMLocationBubble/css/cssJSLogic.js +0 -10
  300. package/es/im/IMLocationBubble/index.js +0 -1
  301. package/es/im/IMLocationBubble/props/defaultProps.js +0 -8
  302. package/es/im/IMLocationBubble/props/propTypes.js +0 -11
  303. package/es/im/IMMessage/css/IMMessage.module.css +0 -0
  304. package/es/im/IMMessage/css/cssJSLogic.js +0 -10
  305. package/es/im/IMMessageAvatar/IMMessageAvatar.js +0 -45
  306. package/es/im/IMMessageAvatar/css/IMMessageAvatar.module.css +0 -0
  307. package/es/im/IMMessageAvatar/css/cssJSLogic.js +0 -0
  308. package/es/im/IMMessageAvatar/index.js +0 -1
  309. package/es/im/IMMessageAvatar/props/defaultProps.js +0 -12
  310. package/es/im/IMMessageAvatar/props/propTypes.js +0 -53
  311. package/es/im/IMMessageContent/css/cssJSLogic.js +0 -10
  312. package/es/im/IMReplyBubble/css/IMReplyBubble.module.css +0 -18
  313. package/es/im/IMReplyBubble/css/cssJSLogic.js +0 -10
  314. package/es/im/IMTextBubble/css/IMTextBubble.module.css +0 -1
  315. package/es/im/IMTextBubble/css/cssJSLogic.js +0 -10
  316. package/es/im/IMVideoBubble/IMVideoBubble.js +0 -61
  317. package/es/im/IMVideoBubble/css/IMVideoBubble.module.css +0 -1
  318. package/es/im/IMVideoBubble/css/cssJSLogic.js +0 -10
  319. package/es/im/IMVideoBubble/index.js +0 -1
  320. package/es/im/IMVideoBubble/props/defaultProps.js +0 -11
  321. package/es/im/IMVideoBubble/props/propTypes.js +0 -17
  322. package/es/unused/AvatarSpace/AvatarSpace.js +0 -40
  323. package/es/unused/AvatarSpace/css/AvatarSpace.module.css +0 -1
  324. package/es/unused/AvatarSpace/css/cssJSLogic.js +0 -15
  325. package/es/unused/AvatarSpace/index.js +0 -1
  326. package/es/unused/AvatarSpace/props/defaultProps.js +0 -10
  327. package/es/unused/AvatarSpace/props/propConstants.js +0 -7
  328. package/es/unused/AvatarSpace/props/propTypes.js +0 -8
  329. package/es/unused/MessageBoxFooter/MessageBoxFooter.js +0 -39
  330. package/es/unused/MessageBoxFooter/css/MessageBoxFooter.module.css +0 -3
  331. package/es/unused/MessageBoxFooter/css/cssJSLogic.js +0 -10
  332. package/es/unused/MessageBoxFooter/index.js +0 -1
  333. package/es/unused/MessageBoxFooter/props/defaultProps.js +0 -5
  334. package/es/unused/MessageBoxFooter/props/propTypes.js +0 -6
  335. package/es/unused/MessageBoxHeader/MessageBoxHeader.js +0 -7
  336. package/es/unused/MessageBoxHeader/css/MessageBoxHeader.module.css +0 -0
  337. package/es/unused/MessageBoxHeader/css/cssJsLogic.js +0 -0
  338. package/es/unused/MessageBoxHeader/index.js +0 -2
  339. package/es/unused/MessageBoxHeader/props/defaultProps.js +0 -0
  340. package/es/unused/MessageBoxHeader/props/propTypes.js +0 -0
  341. package/es/unused/MessageWrapper/MessageWrapper.js +0 -36
  342. package/es/unused/MessageWrapper/css/MessageWrapper.module.css +0 -0
  343. package/es/unused/MessageWrapper/css/cssJSLogic.js +0 -10
  344. package/es/unused/MessageWrapper/index.js +0 -1
  345. package/es/unused/MessageWrapper/props/defaultProps.js +0 -6
  346. package/es/unused/MessageWrapper/props/propTypes.js +0 -6
  347. package/es/unused/TextMessage/DefaultActions.js +0 -60
  348. package/es/unused/TextMessage/TextMessage.js +0 -67
  349. package/es/unused/TextMessage/TextMessage1.js +0 -66
  350. package/es/unused/TextMessage/css/TextMessage.module.css +0 -5
  351. package/es/unused/TextMessage/css/cssJSLogic.js +0 -0
  352. package/es/unused/TextMessage/index.js +0 -1
  353. package/es/unused/TextMessage/props/defaultProps.js +0 -4
  354. package/es/unused/TextMessage/props/propConstants.js +0 -3
  355. package/es/unused/TextMessage/props/propTypes.js +0 -17
  356. package/es/unused/darkTheme.js +0 -9
  357. package/es/unused/defaultTheme.js +0 -33
  358. /package/es/{ArticleBubble → im/ArticleBubble}/index.js +0 -0
package/es/icons/create-icon-components.js CHANGED
@@ -1,14 +1,22 @@
1
1
  /* eslint-disable */
2
2
  const commandLineArgs = require('command-line-args');
3
+
3
4
  const path = require('path');
5
+
4
6
  const fs = require('fs');
7
+
5
8
  const templateList = require('./icon.template');
9
+
6
10
  const jsdom = require('jsdom');
11
+
7
12
  const {
8
13
  JSDOM
9
14
  } = jsdom;
15
+
10
16
  const reactToJsx = require('react-to-jsx');
17
+
11
18
  const HtmlToReactParser = require('html-to-react').Parser;
19
+
12
20
  const htmlToReactParser = new HtmlToReactParser();
13
21
  const options = commandLineArgs([{
14
22
  name: 'sourucePath',
@@ -21,6 +29,7 @@ const options = commandLineArgs([{
21
29
  }]);
22
30
  const sourucePath = `${__dirname}/${options.sourucePath}`;
23
31
  const targetPath = `${__dirname}/${options.targetPath}`;
32
+
24
33
  function readAllFolder(sourucePath, targetPath, index, filesList, callback) {
25
34
  const readDirMain = fs.readdirSync(sourucePath, {
26
35
  withFileTypes: true
@@ -28,18 +37,22 @@ function readAllFolder(sourucePath, targetPath, index, filesList, callback) {
28
37
  readDirMain.forEach(dirNext => {
29
38
  const sourceDirPath = path.join(`${sourucePath}/${dirNext.name}`);
30
39
  const targetDirPath = path.join(`${targetPath}/${dirNext.name}`);
40
+
31
41
  if (fs.existsSync(sourceDirPath) && fs.lstatSync(sourceDirPath).isDirectory()) {
32
42
  filesList[index + 1] = [];
33
43
  readAllFolder(sourceDirPath, targetDirPath, index + 1, filesList, callback);
34
44
  createIndexFiles(filesList[index + 1], targetDirPath);
35
45
  return;
36
46
  }
47
+
37
48
  const svgFileName = callback(dirNext, sourucePath, targetPath);
49
+
38
50
  if (svgFileName) {
39
51
  filesList[index] = (filesList[index] || []).concat(svgFileName);
40
52
  }
41
53
  });
42
54
  }
55
+
43
56
  function createIndexFiles(filesList, targetDirPath) {
44
57
  let indexContent = '';
45
58
  filesList.forEach(fileName => {
@@ -48,6 +61,7 @@ function createIndexFiles(filesList, targetDirPath) {
48
61
  name: fileName
49
62
  })}\n`;
50
63
  });
64
+
51
65
  if (indexContent) {
52
66
  const fsPromises = fs.promises;
53
67
  fsPromises.mkdir(targetDirPath, {
@@ -57,8 +71,10 @@ function createIndexFiles(filesList, targetDirPath) {
57
71
  });
58
72
  }
59
73
  }
74
+
60
75
  function getFormattedSvgFileName(fileName) {
61
76
  const replacer = '/'; // OS won't allow this char.so.
77
+
62
78
  let str = fileName.replace(/[^A-z0-9]/g, replacer);
63
79
  str = str.split('');
64
80
  str.forEach((charCode, index) => {
@@ -70,16 +86,20 @@ function getFormattedSvgFileName(fileName) {
70
86
  fileName = str.join('');
71
87
  return fileName.charAt(0).toUpperCase() + fileName.slice(1);
72
88
  }
89
+
73
90
  function isValidFileName(fileName) {
74
91
  return /[A-z]/g.test(fileName.charAt(0));
75
92
  }
93
+
76
94
  readAllFolder(sourucePath, targetPath, 0, [], (file, sourucePath, targetPath) => {
77
95
  let svgFileName = '';
96
+
78
97
  if (file && path.extname(file.name) === '.svg') {
79
98
  if (!isValidFileName(file.name)) {
80
99
  console.error(`Invalid File Name Error!!! - This file ${file.name} is should be startswith A-z `);
81
100
  return;
82
101
  }
102
+
83
103
  try {
84
104
  const readFilePath = path.join(`${sourucePath}/${file.name}`);
85
105
  const svgFileContent = fs.readFileSync(readFilePath).toString();
@@ -91,36 +111,45 @@ readAllFolder(sourucePath, targetPath, 0, [], (file, sourucePath, targetPath) =>
91
111
  const dom = new JSDOM(`<!DOCTYPE html>${svgFileContent}`);
92
112
  const doc = dom.window.document;
93
113
  const collection = doc.querySelectorAll('title');
114
+
94
115
  for (const elem of collection) {
95
116
  elem.parentNode.removeChild(elem);
96
117
  }
118
+
97
119
  const svgElement = doc.querySelector('svg');
98
120
  svgElement.removeAttribute('width');
99
121
  svgElement.removeAttribute('height');
100
122
  svgElement.removeAttribute('version');
101
123
  const styleTags = svgElement.querySelector('style');
102
124
  let styleTagsContent;
125
+
103
126
  if (styleTags) {
104
127
  styleTagsContent = styleTags.innerHTML;
105
128
  const NewStyleElement = doc.createElement('style');
106
129
  styleTags.parentNode.replaceChild(NewStyleElement, styleTags);
107
130
  }
131
+
108
132
  const collectionPathEl = svgElement.querySelectorAll('path');
133
+
109
134
  for (const entry of collectionPathEl.entries()) {
110
135
  const index = entry[0];
111
136
  const elem = entry[1];
112
137
  elem.setAttribute('class', `path-${index}`);
138
+
113
139
  if (elem.getAttribute('fill') == 'black' || elem.getAttribute('fill') == '#010101') {
114
140
  elem.removeAttribute('fill');
115
141
  }
116
142
  }
143
+
117
144
  const svgHtmlContent = svgElement.outerHTML.replace(/\s+/g, ' ').trim();
118
145
  const svgAsReactElement = htmlToReactParser.parse(svgHtmlContent);
119
146
  let svgHtmlContentResult = reactToJsx(svgAsReactElement).replace(/\s+/g, ' ').trim();
147
+
120
148
  if (styleTags) {
121
149
  // console.log(styleTags, 'styleTags');
122
150
  svgHtmlContentResult = svgHtmlContentResult.replace('<style/>', `<style dangerouslySetInnerHTML={{__html: \`${styleTagsContent}\` }} />`);
123
151
  }
152
+
124
153
  svgHtmlContentResult = svgHtmlContentResult.replace(/color-interpolation-filters/gi, 'colorInterpolationFilters');
125
154
  svgHtmlContentResult = svgHtmlContentResult.replace(/feflood/gi, 'feFlood');
126
155
  svgHtmlContentResult = svgHtmlContentResult.replace(/fecolormatrix/gi, 'feColorMatrix');
@@ -138,5 +167,6 @@ readAllFolder(sourucePath, targetPath, 0, [], (file, sourucePath, targetPath) =>
138
167
  console.error(err);
139
168
  }
140
169
  }
170
+
141
171
  return svgFileName;
142
172
  });
package/es/icons/icon.template.js CHANGED
@@ -3,17 +3,17 @@ function iconTemplate(_ref) {
3
3
  path,
4
4
  value
5
5
  } = _ref;
6
- return `
7
- /* eslint-disable */
8
- import React from 'react';
9
- import Icon from '${path}';
6
+ return `/* eslint-disable */
7
+ import React from 'react';
8
+ import Icon from '${path}';
10
9
 
11
- export default function IconComponent(props) {
12
- return <Icon {...props}>${value}</Icon>
13
- }
10
+ export default function IconComponent(props) {
11
+ return <Icon {...props}>${value}</Icon>
12
+ }
14
13
 
15
- IconComponent.propTypes=Icon.propTypes;`;
14
+ IconComponent.propTypes=Icon.propTypes;`;
16
15
  }
16
+
17
17
  function indexTemplate(_ref2) {
18
18
  let {
19
19
  name,
@@ -21,6 +21,7 @@ function indexTemplate(_ref2) {
21
21
  } = _ref2;
22
22
  return `export { default as ${name} } from '${path}';`;
23
23
  }
24
+
24
25
  module.exports = {
25
26
  iconTemplate,
26
27
  indexTemplate
package/es/icons/iconSrc/common/index.js CHANGED
@@ -1,2 +1 @@
1
- export { default as Article } from './Article';
2
- export { default as Quote } from './Quote';
1
+ export { default as Article } from './Article';
package/es/im/ArticleBubble/ArticleBubble.js ADDED
@@ -0,0 +1,66 @@
1
+ /** ** Libraries *** */
2
+ import React, { useMemo } from 'react';
3
+ /** ** Hooks *** */
4
+
5
+ import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
6
+ import useArticleBubble from '@zohoim/chat-components-hooks/es/im/ArticleBubble/useArticleBubble';
7
+ /** ** Constants *** */
8
+
9
+ import articleBubbleDefaultProps from './props/defaultProps';
10
+ import articleBubblePropTypes from './props/propTypes';
11
+ /** ** Components *** */
12
+
13
+ import { Container } from '@zohodesk/components/es/Layout';
14
+ /** ** Styles *** */
15
+
16
+ import style from './css/ArticleBubble.module.css';
17
+ /** ** Icons *** */
18
+
19
+ import ArticleIcon from '../../icons/iconSrc/common/Article';
20
+ export default function ArticleBubble(props) {
21
+ const {
22
+ customStyle,
23
+ info,
24
+ articleDetails,
25
+ onClick: propOnClick
26
+ } = props;
27
+ const {
28
+ title,
29
+ summary
30
+ } = articleDetails;
31
+ const {
32
+ onClick,
33
+ webUrl
34
+ } = useArticleBubble({
35
+ articleDetails,
36
+ onClick: propOnClick
37
+ });
38
+ /* External CSS Customization */
39
+
40
+ const newStyle = useMergeStyle(style, customStyle);
41
+ const iconCustomStyle = useMemo(() => ({
42
+ base: newStyle.articleIcon
43
+ }), [newStyle.articleIcon]);
44
+ return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Container, {
45
+ align: "vertical",
46
+ alignBox: "row",
47
+ isCover: false
48
+ }, /*#__PURE__*/React.createElement("div", {
49
+ className: newStyle.icon
50
+ }, /*#__PURE__*/React.createElement(ArticleIcon, {
51
+ customStyle: iconCustomStyle
52
+ })), /*#__PURE__*/React.createElement("div", null, info)), /*#__PURE__*/React.createElement("a", {
53
+ className: newStyle.articleWrapper,
54
+ href: webUrl,
55
+ onClick: onClick,
56
+ rel: "noopener noreferrer",
57
+ target: "_blank"
58
+ }, /*#__PURE__*/React.createElement("div", {
59
+ className: newStyle.title
60
+ }, title), /*#__PURE__*/React.createElement("div", {
61
+ className: newStyle.summary
62
+ }, summary)));
63
+ }
64
+ ArticleBubble.propTypes = articleBubblePropTypes;
65
+ ArticleBubble.defaultProps = articleBubbleDefaultProps;
66
+ ArticleBubble.displayName = 'ArticleBubble';
package/es/{ArticleBubble → im/ArticleBubble}/css/ArticleBubble.module.css RENAMED
@@ -3,18 +3,17 @@
3
3
  }
4
4
 
5
5
  .articleWrapper {
6
- padding: var(--imlib_size_8) var(--imlib_size_10);
6
+ padding: var(--zd_size8) var(--zd_size10) ;
7
7
  background-color: var(--imlib_chat_components_articleBubble_bg_color);
8
- border-radius: var(--imlib_size_3);
8
+ border-radius: 3px;
9
9
  cursor: pointer;
10
- border: var(--imlib_size_1) solid
11
- var(--imlib_chat_components_articleBubble_border_color);
12
- margin: var(--imlib_size_4) 0 var(--imlib_size_2);
10
+ border: 1px solid var(--imlib_chat_components_articleBubble_border_color);
11
+ margin: var(--zd_size4) 0 var(--zd_size2) ;
13
12
  }
14
13
 
15
14
  .title {
16
15
  color: var(--imlib_chat_components_articleBubble_color);
17
- font-size: var(--imlib_size_15);
16
+ font-size: var(--zd_font_size15) ;
18
17
  line-height: 1.5;
19
18
  overflow: hidden;
20
19
  white-space: nowrap;
@@ -24,9 +23,9 @@
24
23
 
25
24
  .summary {
26
25
  color: var(--imlib_chat_components_articleBubble_color);
27
- font-size: var(--imlib_size_13);
26
+ font-size: var(--zd_font_size13) ;
28
27
  line-height: 1.5;
29
- max-height: var(--imlib_size_40);
28
+ max-height: var(--zd_size40) ;
30
29
  -webkit-line-clamp: 2;
31
30
  display: -webkit-box;
32
31
  -webkit-box-orient: vertical;
@@ -35,8 +34,8 @@
35
34
  }
36
35
 
37
36
  .articleIcon {
38
- width: var(--imlib_size_16);
39
- height: var(--imlib_size_16);
37
+ width: var(--zd_size16) ;
38
+ height: var(--zd_size16) ;
40
39
  }
41
40
 
42
41
  .articleIcon :global(.path-0) {
package/es/{ArticleBubble → im/ArticleBubble}/props/defaultProps.js RENAMED
@@ -1,5 +1,5 @@
1
1
  /** ** Constants *** */
2
- import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
2
+ import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
3
3
  const articleBubbleDefaultProps = {
4
4
  customStyle: dummyObject
5
5
  };
package/es/im/ArticleBubble/props/propTypes.js ADDED
@@ -0,0 +1,13 @@
1
+ /** ** Libraries *** */
2
+ import PropTypes from 'prop-types';
3
+ const articleBubblePropTypes = {
4
+ articleDetails: PropTypes.shape({
5
+ summary: PropTypes.string.isRequired,
6
+ title: PropTypes.string.isRequired,
7
+ webUrl: PropTypes.string
8
+ }).isRequired,
9
+ customStyle: PropTypes.object,
10
+ info: PropTypes.string,
11
+ onClick: PropTypes.func
12
+ };
13
+ export default articleBubblePropTypes;
package/es/im/IMAutoMessageInfo/IMAutoMessageInfo.js CHANGED
@@ -1,39 +1,29 @@
1
- /* eslint-disable react/jsx-no-bind */
2
- /* eslint-disable max-len */
3
-
4
1
  /** ** Libraries *** */
5
2
  import React from 'react';
6
-
7
3
  /** ** Hooks *** */
8
- import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
9
- import useIMAutoMessageInfo from '@zohoim/chat-components-hooks/es/im/IMAutoMessageInfo/useIMAutoMessageInfo';
10
4
 
5
+ import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
11
6
  /** ** Constants *** */
7
+
12
8
  import imAutoMessageInfoDefaultProps from './props/defaultProps';
13
9
  import imAutoMessageInfoPropTypes from './props/propTypes';
14
-
15
- /** ** Methods *** */
16
- import cssJSLogic from './css/cssJSLogic';
17
-
18
10
  /** ** Styles *** */
11
+
19
12
  import style from './css/IMAutoMessageInfo.module.css';
20
13
  export default function IMAutoMessageInfo(props) {
21
14
  const {
22
- autoMessageContent,
23
- autoMessageTitle
24
- } = useIMAutoMessageInfo(props);
25
- const {
15
+ autoMessageType,
16
+ autoMessagesI18N,
17
+ autoMessagesTitleI18N,
26
18
  customStyle
27
19
  } = props;
20
+ /* External CSS Customization */
28
21
 
29
- /* External customization */
30
22
  const newStyle = useMergeStyle(style, customStyle);
31
- /* CSS classnames added based on logic */
32
- const {
33
- imAutoMessageInfoClass
34
- } = cssJSLogic(props, newStyle);
23
+ const autoMessageContent = autoMessagesI18N[autoMessageType] || '';
24
+ const autoMessageTitle = autoMessagesTitleI18N[autoMessageType] || '';
35
25
  return autoMessageContent ? /*#__PURE__*/React.createElement("div", {
36
- className: imAutoMessageInfoClass,
26
+ className: newStyle.imAutoMessageInfo,
37
27
  "data-title": autoMessageTitle
38
28
  }, autoMessageContent) : null;
39
29
  }
package/es/im/IMAutoMessageInfo/css/IMAutoMessageInfo.module.css CHANGED
@@ -1,12 +1,11 @@
1
1
  .varClass {
2
- --imAutoMessageInfo-font_size: var(--imlib_size_13);
3
- --imAutoMessageInfo-max_width: var(--imlib_size_100);
2
+ --imAutoMessageInfo-font_size: var(--zd_font_size13);
3
+ --imAutoMessageInfo-max_width: var(--zd_size100);
4
4
  --imAutoMessageInfo-letter_spacing: 0.2px;
5
5
  }
6
6
 
7
7
  .imAutoMessageInfo {
8
8
  composes: varClass;
9
-
10
9
  font-size: var(--imAutoMessageInfo-font_size);
11
10
  letter-spacing: var(--imAutoMessageInfo-letter_spacing);
12
11
  max-width: var(--imAutoMessageInfo-max_width);
package/es/im/IMAutoMessageInfo/props/defaultProps.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /** ** Constants *** */
2
- import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
2
+ import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
3
3
  const imAutoMessageInfoDefaultProps = {
4
4
  customStyle: dummyObject
5
5
  };
package/es/im/IMAutoMessageInfo/props/propTypes.js CHANGED
@@ -1,6 +1,8 @@
1
1
  /** ** Libraries *** */
2
2
  import PropTypes from 'prop-types';
3
- import { autoMessageTypes } from '@zohoim/chat-components-utils/es/constants/messageConstants';
3
+ /** ** Constants *** */
4
+
5
+ import autoMessageTypes from '@zohoim/chat-components-utils/es/imUtils/constants/autoMessageTypes';
4
6
  const {
5
7
  WELCOMEMSG,
6
8
  WORKFLOW_MESSAGE,
@@ -8,19 +10,19 @@ const {
8
10
  UN_SUPPORTED_FILE
9
11
  } = autoMessageTypes;
10
12
  const imAutoMessageInfoPropTypes = {
11
- customStyle: PropTypes.object,
12
- autoMessageType: PropTypes.oneOf([WELCOMEMSG, WORKFLOW_MESSAGE, WORKFLOW_NOTIFICATION, UN_SUPPORTED_FILE]),
13
+ autoMessageType: PropTypes.oneOf(Object.values(autoMessageTypes)).isRequired,
13
14
  autoMessagesI18N: PropTypes.shape({
15
+ [UN_SUPPORTED_FILE]: PropTypes.string,
14
16
  [WELCOMEMSG]: PropTypes.string,
15
17
  [WORKFLOW_MESSAGE]: PropTypes.string,
16
- [WORKFLOW_NOTIFICATION]: PropTypes.string,
17
- [UN_SUPPORTED_FILE]: PropTypes.string
18
- }),
18
+ [WORKFLOW_NOTIFICATION]: PropTypes.string
19
+ }).isRequired,
19
20
  autoMessagesTitleI18N: PropTypes.shape({
21
+ [UN_SUPPORTED_FILE]: PropTypes.string,
20
22
  [WELCOMEMSG]: PropTypes.string,
21
23
  [WORKFLOW_MESSAGE]: PropTypes.string,
22
- [WORKFLOW_NOTIFICATION]: PropTypes.string,
23
- [UN_SUPPORTED_FILE]: PropTypes.string
24
- })
24
+ [WORKFLOW_NOTIFICATION]: PropTypes.string
25
+ }).isRequired,
26
+ customStyle: PropTypes.object
25
27
  };
26
28
  export default imAutoMessageInfoPropTypes;
package/es/im/IMInfoBubble/IMInfoBubble.js CHANGED
@@ -1,29 +1,27 @@
1
- /* eslint-disable react/jsx-no-bind */
2
- /* eslint-disable max-len */
3
-
4
1
  /** ** Libraries *** */
5
2
  import React from 'react';
6
-
7
3
  /** ** Hooks *** */
8
- import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
9
4
 
5
+ import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
10
6
  /** ** Constants *** */
7
+
11
8
  import imInfoBubbleDefaultProps from './props/defaultProps';
12
9
  import imInfoBubblePropTypes from './props/propTypes';
13
-
14
10
  /** ** Methods *** */
15
- import cssJSLogic from './css/cssJSLogic';
16
11
 
12
+ import cssJSLogic from './css/cssJSLogic';
17
13
  /** ** Styles *** */
14
+
18
15
  import style from './css/IMInfoBubble.module.css';
19
16
  export default function IMInfoBubble(props) {
20
17
  const {
21
18
  customStyle
22
19
  } = props;
20
+ /* External CSS Customization */
23
21
 
24
- /* External customization */
25
22
  const newStyle = useMergeStyle(style, customStyle);
26
23
  /* CSS classnames added based on logic */
24
+
27
25
  const {
28
26
  imInfoBubbleClass
29
27
  } = cssJSLogic(props, newStyle);
package/es/im/IMInfoBubble/props/defaultProps.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /** ** Constants *** */
2
- import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
2
+ import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
3
3
  const imInfoBubbleDefaultProps = {
4
4
  customStyle: dummyObject
5
5
  };
package/es/im/IMIntegrationIcon/IMIntegrationIcon.js CHANGED
@@ -1,30 +1,27 @@
1
- /* eslint-disable react/jsx-no-bind */
2
-
3
1
  /** ** Libraries *** */
4
- import React from 'react';
5
-
2
+ import React, { useCallback, useMemo } from 'react';
6
3
  /** ** Icons *** */
4
+
7
5
  import WhatsappIcon from '../../icons/iconSrc/integrations/ChWhatsApp';
8
6
  import TelegramIcon from '../../icons/iconSrc/integrations/TtTelegram';
9
7
  import InstagramIcon from '../../icons/iconSrc/integrations/ChInstagram';
10
8
  import ASAPIcon from '../../icons/iconSrc/integrations/TtASAP';
11
9
  import WeChatIcon from '../../icons/iconSrc/integrations/TtWechat';
12
10
  import TwillioIcon from '../../icons/iconSrc/integrations/TtTwillio';
13
- import LineIcon from '../../icons/iconSrc/integrations/TtTwitter';
14
- // import TwitterIcon from '../icons/iconSrc/integrations/TtTwitter';
11
+ import LineIcon from '../../icons/iconSrc/integrations/TtTwitter'; // import TwitterIcon from '../icons/iconSrc/integrations/TtTwitter';
15
12
 
16
13
  /** ** CSS *** */
17
- import style from './css/IMIntegrationIcon.module.css';
18
14
 
15
+ import style from './css/IMIntegrationIcon.module.css';
19
16
  /** ** Methods *** */
17
+
20
18
  import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
21
19
  import cssJSLogic from './css/cssJSLogic';
22
-
23
20
  /** ** Constants *** */
21
+
24
22
  import imIntegrationIconDefaultProps from './props/defaultProps';
25
23
  import imIntegrationIconPropTypes from './props/propTypes';
26
- import constantProps from './props/propConstants';
27
- import integrationConstants from '@zohoim/chat-components-utils/es/constants/integrationConstants';
24
+ import integrationConstants from '@zohoim/chat-components-utils/es/imUtils/constants/integrationConstants';
28
25
  const {
29
26
  WHATSAPP,
30
27
  TELEGRAM,
@@ -41,50 +38,46 @@ const integrationIconMapping = {
41
38
  [ASAP]: ASAPIcon,
42
39
  [WECHAT]: WeChatIcon,
43
40
  [TWILLIO]: TwillioIcon,
44
- [LINE]: LineIcon
45
- // [TWITTER]: TwitterIcon
46
- };
41
+ [LINE]: LineIcon // [TWITTER]: TwitterIcon
47
42
 
43
+ };
48
44
  export default function IMIntegrationIcon(props) {
49
45
  const {
50
46
  customStyle,
51
- isCustom,
52
- renderIcon,
53
- title
47
+ renderCustomIcon,
48
+ title,
49
+ integrationName,
50
+ onClick,
51
+ size
54
52
  } = props;
53
+ /* External CSS Customization */
55
54
 
56
- /* external customization */
57
55
  const newStyle = useMergeStyle(style, customStyle);
58
56
  /* css classnames added based on logic */
57
+
59
58
  const {
60
59
  iconWrapperClass,
61
- iconStyle
62
- } = cssJSLogic(props, newStyle);
63
- function handleClick(e) {
64
- const {
65
- id,
66
- onClick
67
- } = props;
68
- onClick && onClick({
69
- id,
70
- e
71
- });
72
- }
73
- function renderDefaultIcon() {
74
- const {
75
- integrationName
76
- } = props;
60
+ iconClass
61
+ } = cssJSLogic({
62
+ integrationName,
63
+ size
64
+ }, newStyle);
65
+ const iconStyle = useMemo(() => ({
66
+ base: iconClass
67
+ }), [iconClass]);
68
+ const renderDefaultIcon = useCallback(() => {
77
69
  const IntegrationIcon = integrationIconMapping[integrationName] || null;
78
70
  return IntegrationIcon ? /*#__PURE__*/React.createElement("div", {
79
71
  className: iconWrapperClass,
80
72
  "data-title": title,
81
- onClick: handleClick
73
+ onClick: onClick
82
74
  }, /*#__PURE__*/React.createElement(IntegrationIcon, {
83
75
  customStyle: iconStyle
84
76
  })) : null;
85
- }
86
- return /*#__PURE__*/React.createElement(React.Fragment, null, isCustom ? renderIcon() : renderDefaultIcon());
77
+ }, [integrationName, title, onClick, iconWrapperClass, iconStyle]);
78
+ return renderCustomIcon ? renderCustomIcon({
79
+ integrationName
80
+ }) : renderDefaultIcon();
87
81
  }
88
82
  IMIntegrationIcon.defaultProps = imIntegrationIconDefaultProps;
89
- IMIntegrationIcon.propTypes = imIntegrationIconPropTypes;
90
- IMIntegrationIcon.constantProps = constantProps;
83
+ IMIntegrationIcon.propTypes = imIntegrationIconPropTypes;
package/es/im/IMIntegrationIcon/css/IMIntegrationIcon.module.css CHANGED
@@ -1,8 +1,8 @@
1
1
  .varClass {
2
- --integrationIcon-small_height: var(--imlib_size_22);
3
- --integrationIcon-small_width: var(--imlib_size_22);
4
- --integrationIcon-medium_height: var(--imlib_size_26);
5
- --integrationIcon-medium_width: var(--imlib_size_26);
2
+ --integrationIcon-small_height: var(--zd_size22);
3
+ --integrationIcon-small_width: var(--zd_size22);
4
+ --integrationIcon-medium_height: var(--zd_size26);
5
+ --integrationIcon-medium_width: var(--zd_size26);
6
6
  }
7
7
 
8
8
  .integrationIcon {
@@ -10,7 +10,6 @@
10
10
  display: flex;
11
11
  align-items: center;
12
12
  justify-content: center;
13
-
14
13
  border-radius: 50%;
15
14
  }
16
15
 
@@ -19,7 +18,7 @@
19
18
  .asapIcon :global(.cls-1),
20
19
  .weChatIcon :global(.cls-1),
21
20
  .weChatIcon :global(.path-0),
22
- .lineIcon :global(.cls-1){
21
+ .lineIcon :global(.cls-1) {
23
22
  fill: var(--imlib_chat_components_imIntegrationIcon_path0_color);
24
23
  }
25
24
 
@@ -80,7 +79,6 @@
80
79
  );
81
80
  }
82
81
 
83
-
84
82
  .instagramIcon {
85
83
  background-color: var(
86
84
  --imlib_chat_components_imIntegrationIcon_instagram_color
@@ -90,7 +88,6 @@
90
88
  .asapIcon {
91
89
  background-color: var(--imlib_chat_components_imIntegrationIcon_asap_color);
92
90
  }
93
-
94
91
  /* .twitterIcon {
95
92
  background-color: var(
96
93
  --imlib_chat_components_imIntegrationIcon_twitter_color