sceyt-chat-react-uikit 1.8.8-beta.11 → 1.8.8-beta.13

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 (3) hide show
  1. package/index.js +70 -7
  2. package/index.modern.js +70 -7
  3. package/package.json +1 -1
package/index.js CHANGED
@@ -34650,6 +34650,7 @@ function SvgMessage(props) {
34650
34650
  var _templateObject$j, _templateObject2$h, _templateObject3$e, _templateObject4$b, _templateObject5$8;
34651
34651
  var detailsSwitcherTimeout;
34652
34652
  function Chat(_ref) {
34653
+ var _window;
34653
34654
  var children = _ref.children,
34654
34655
  hideChannelList = _ref.hideChannelList,
34655
34656
  onSelectedChannelUpdated = _ref.onSelectedChannelUpdated,
@@ -34674,6 +34675,9 @@ function Chat(_ref) {
34674
34675
  channelDetailsWidth = _useState[0],
34675
34676
  setChannelDetailsWidth = _useState[1];
34676
34677
  var connectionStatus = useSelector(connectionStatusSelector, reactRedux.shallowEqual);
34678
+ var _useState2 = React.useState((_window = window) === null || _window === void 0 ? void 0 : _window.innerWidth),
34679
+ windowWidth = _useState2[0],
34680
+ setWindowWidth = _useState2[1];
34677
34681
  React.useEffect(function () {
34678
34682
  if (hideChannelList && !channelListWidth && connectionStatus === CONNECTION_STATUS.CONNECTED) {
34679
34683
  dispatch(setHideChannelListAC(true));
@@ -34714,7 +34718,9 @@ function Chat(_ref) {
34714
34718
  detailsSwitcherTimeout = setTimeout(function () {
34715
34719
  var panelId = messageSearchIsOpen ? 'messages_search_wrapper' : 'channel_details_wrapper';
34716
34720
  var panelContainer = document.getElementById(panelId);
34717
- if (panelContainer) {
34721
+ if (windowWidth < 1200) {
34722
+ setChannelDetailsWidth(0);
34723
+ } else if (panelContainer) {
34718
34724
  setChannelDetailsWidth(panelContainer.offsetWidth);
34719
34725
  }
34720
34726
  }, 1);
@@ -34722,7 +34728,16 @@ function Chat(_ref) {
34722
34728
  clearTimeout(detailsSwitcherTimeout);
34723
34729
  setChannelDetailsWidth(0);
34724
34730
  }
34725
- }, [channelDetailsIsOpen, messageSearchIsOpen]);
34731
+ }, [channelDetailsIsOpen, messageSearchIsOpen, windowWidth]);
34732
+ React.useEffect(function () {
34733
+ var handleWindowResize = function handleWindowResize() {
34734
+ setWindowWidth(window.innerWidth);
34735
+ };
34736
+ window.addEventListener('resize', handleWindowResize);
34737
+ return function () {
34738
+ window.removeEventListener('resize', handleWindowResize);
34739
+ };
34740
+ }, []);
34726
34741
  return /*#__PURE__*/React__default.createElement(Container$8, {
34727
34742
  className: className,
34728
34743
  widthOffset: channelListWidth,
@@ -34929,7 +34944,7 @@ function ChatHeader(_ref) {
34929
34944
  onClick: function onClick() {
34930
34945
  return channelDetailsOnOpen();
34931
34946
  },
34932
- infoIconColor: accentColor,
34947
+ infoIconColor: channelDetailsIsOpen ? accentColor : iconPrimary,
34933
34948
  order: infoIconOrder
34934
34949
  }, infoIcon || /*#__PURE__*/React__default.createElement(DefaultInfoIcon, {
34935
34950
  color: iconPrimary
@@ -44717,6 +44732,15 @@ var Message$1 = function Message(_ref) {
44717
44732
  }
44718
44733
  setMessageActionsShow(false);
44719
44734
  }, []);
44735
+ var handleMediaItemClickWithActionsClose = React.useCallback(function (attachment) {
44736
+ if (messageActionsTimeout.current) {
44737
+ clearTimeout(messageActionsTimeout.current);
44738
+ }
44739
+ setMessageActionsShow(false);
44740
+ if (handleMediaItemClick) {
44741
+ handleMediaItemClick(attachment);
44742
+ }
44743
+ }, [handleMediaItemClick]);
44720
44744
  var handleReactionAddDelete = React.useCallback(function (selectedEmoji) {
44721
44745
  if (message.userReactions && message.userReactions.some(function (item) {
44722
44746
  return item.key === selectedEmoji;
@@ -44832,6 +44856,24 @@ var Message$1 = function Message(_ref) {
44832
44856
  setMessageActionsShow(false);
44833
44857
  }
44834
44858
  }, [openedMessageMenuId]);
44859
+ React.useEffect(function () {
44860
+ if (!reactionsPopupOpen) {
44861
+ return undefined;
44862
+ }
44863
+ var scrollContainer = document.getElementById('scrollableDiv');
44864
+ if (!scrollContainer) {
44865
+ return undefined;
44866
+ }
44867
+ var handleChatScroll = function handleChatScroll() {
44868
+ setReactionsPopupOpen(false);
44869
+ };
44870
+ scrollContainer.addEventListener('scroll', handleChatScroll, {
44871
+ passive: true
44872
+ });
44873
+ return function () {
44874
+ scrollContainer.removeEventListener('scroll', handleChatScroll);
44875
+ };
44876
+ }, [reactionsPopupOpen]);
44835
44877
  React.useEffect(function () {
44836
44878
  document.addEventListener('mousedown', handleClick);
44837
44879
  return function () {
@@ -44954,7 +44996,7 @@ var Message$1 = function Message(_ref) {
44954
44996
  handleCreateChat: handleCreateChat,
44955
44997
  handleReactionAddDelete: handleReactionAddDelete,
44956
44998
  handleScrollToRepliedMessage: handleScrollToRepliedMessage,
44957
- handleMediaItemClick: handleMediaItemClick,
44999
+ handleMediaItemClick: handleMediaItemClickWithActionsClose,
44958
45000
  isThreadMessage: isThreadMessage,
44959
45001
  handleOpenUserProfile: handleOpenUserProfile,
44960
45002
  unsupportedMessage: unsupportedMessage,
@@ -44969,7 +45011,7 @@ var Message$1 = function Message(_ref) {
44969
45011
  MessageActionsMenu: MessageActionsMenu,
44970
45012
  messageActionsBelow: messageActionsBelow,
44971
45013
  handleScrollToRepliedMessage: handleScrollToRepliedMessage,
44972
- handleMediaItemClick: handleMediaItemClick,
45014
+ handleMediaItemClick: handleMediaItemClickWithActionsClose,
44973
45015
  isPendingMessage: isPendingMessage,
44974
45016
  prevMessage: prevMessage,
44975
45017
  nextMessage: nextMessage,
@@ -58825,6 +58867,7 @@ var EmptyStateText = styled__default.p(_templateObject25$2 || (_templateObject25
58825
58867
 
58826
58868
  var _templateObject$1c;
58827
58869
  var ChannelDetailsContainer = function ChannelDetailsContainer(_ref) {
58870
+ var _window;
58828
58871
  var _ref$size = _ref.size,
58829
58872
  size = _ref$size === void 0 ? 'large' : _ref$size,
58830
58873
  detailsTitleText = _ref.detailsTitleText,
@@ -58944,11 +58987,29 @@ var ChannelDetailsContainer = function ChannelDetailsContainer(_ref) {
58944
58987
  showGroupsInCommon = _ref.showGroupsInCommon;
58945
58988
  var channelDetailsIsOpen = useSelector(channelInfoIsOpenSelector, reactRedux.shallowEqual);
58946
58989
  var messageSearchIsOpen = useSelector(messageSearchIsOpenSelector, reactRedux.shallowEqual);
58990
+ var _useState = React.useState((_window = window) === null || _window === void 0 ? void 0 : _window.innerWidth),
58991
+ windowWidth = _useState[0],
58992
+ setWindowWidth = _useState[1];
58993
+ var theme = useSelector(themeSelector);
58994
+ var _useColor = useColors(),
58995
+ bgColor = _useColor[THEME_COLORS.BACKGROUND];
58947
58996
  React.useEffect(function () {
58948
58997
  setShowChannelDetails(true);
58949
58998
  }, []);
58999
+ React.useEffect(function () {
59000
+ var handleWindowResize = function handleWindowResize() {
59001
+ setWindowWidth(window.innerWidth);
59002
+ };
59003
+ window.addEventListener('resize', handleWindowResize);
59004
+ return function () {
59005
+ window.removeEventListener('resize', handleWindowResize);
59006
+ };
59007
+ }, []);
58950
59008
  return /*#__PURE__*/React__default.createElement(DetailsWrapper, {
58951
- id: messageSearchIsOpen ? 'messages_search_wrapper' : 'channel_details_wrapper'
59009
+ id: messageSearchIsOpen ? 'messages_search_wrapper' : 'channel_details_wrapper',
59010
+ window: windowWidth,
59011
+ theme: theme,
59012
+ bgColor: bgColor
58952
59013
  }, messageSearchIsOpen && /*#__PURE__*/React__default.createElement(MessagesSearch, {
58953
59014
  size: size
58954
59015
  }), channelDetailsIsOpen && !messageSearchIsOpen && (/*#__PURE__*/React__default.createElement(Details, {
@@ -59067,7 +59128,9 @@ var ChannelDetailsContainer = function ChannelDetailsContainer(_ref) {
59067
59128
  showGroupsInCommon: showGroupsInCommon
59068
59129
  })));
59069
59130
  };
59070
- var DetailsWrapper = styled__default.div(_templateObject$1c || (_templateObject$1c = _taggedTemplateLiteralLoose(["\n user-select: text;\n"])));
59131
+ var DetailsWrapper = styled__default.div(_templateObject$1c || (_templateObject$1c = _taggedTemplateLiteralLoose(["\n user-select: text;\n ", "\n"])), function (props) {
59132
+ return props.window && props.window < 1200 && "\n position: absolute;\n right: 0;\n top: 0;\n background: " + props.bgColor + ";\n z-index: 10;\n box-shadow: " + (props.theme === THEME.DARK ? '0 0 12px rgba(0, 0, 0, 0.5)' : '0 0 12px rgba(0, 0, 0, 0.08)') + ";\n height: 100%;\n ";
59133
+ });
59071
59134
 
59072
59135
  var _templateObject$1d, _templateObject2$17;
59073
59136
  var MessagesScrollToBottomButton = function MessagesScrollToBottomButton(_ref) {
package/index.modern.js CHANGED
@@ -34630,6 +34630,7 @@ function SvgMessage(props) {
34630
34630
  var _templateObject$j, _templateObject2$h, _templateObject3$e, _templateObject4$b, _templateObject5$8;
34631
34631
  var detailsSwitcherTimeout;
34632
34632
  function Chat(_ref) {
34633
+ var _window;
34633
34634
  var children = _ref.children,
34634
34635
  hideChannelList = _ref.hideChannelList,
34635
34636
  onSelectedChannelUpdated = _ref.onSelectedChannelUpdated,
@@ -34654,6 +34655,9 @@ function Chat(_ref) {
34654
34655
  channelDetailsWidth = _useState[0],
34655
34656
  setChannelDetailsWidth = _useState[1];
34656
34657
  var connectionStatus = useSelector(connectionStatusSelector, shallowEqual);
34658
+ var _useState2 = useState((_window = window) === null || _window === void 0 ? void 0 : _window.innerWidth),
34659
+ windowWidth = _useState2[0],
34660
+ setWindowWidth = _useState2[1];
34657
34661
  useEffect(function () {
34658
34662
  if (hideChannelList && !channelListWidth && connectionStatus === CONNECTION_STATUS.CONNECTED) {
34659
34663
  dispatch(setHideChannelListAC(true));
@@ -34694,7 +34698,9 @@ function Chat(_ref) {
34694
34698
  detailsSwitcherTimeout = setTimeout(function () {
34695
34699
  var panelId = messageSearchIsOpen ? 'messages_search_wrapper' : 'channel_details_wrapper';
34696
34700
  var panelContainer = document.getElementById(panelId);
34697
- if (panelContainer) {
34701
+ if (windowWidth < 1200) {
34702
+ setChannelDetailsWidth(0);
34703
+ } else if (panelContainer) {
34698
34704
  setChannelDetailsWidth(panelContainer.offsetWidth);
34699
34705
  }
34700
34706
  }, 1);
@@ -34702,7 +34708,16 @@ function Chat(_ref) {
34702
34708
  clearTimeout(detailsSwitcherTimeout);
34703
34709
  setChannelDetailsWidth(0);
34704
34710
  }
34705
- }, [channelDetailsIsOpen, messageSearchIsOpen]);
34711
+ }, [channelDetailsIsOpen, messageSearchIsOpen, windowWidth]);
34712
+ useEffect(function () {
34713
+ var handleWindowResize = function handleWindowResize() {
34714
+ setWindowWidth(window.innerWidth);
34715
+ };
34716
+ window.addEventListener('resize', handleWindowResize);
34717
+ return function () {
34718
+ window.removeEventListener('resize', handleWindowResize);
34719
+ };
34720
+ }, []);
34706
34721
  return /*#__PURE__*/React__default.createElement(Container$8, {
34707
34722
  className: className,
34708
34723
  widthOffset: channelListWidth,
@@ -34909,7 +34924,7 @@ function ChatHeader(_ref) {
34909
34924
  onClick: function onClick() {
34910
34925
  return channelDetailsOnOpen();
34911
34926
  },
34912
- infoIconColor: accentColor,
34927
+ infoIconColor: channelDetailsIsOpen ? accentColor : iconPrimary,
34913
34928
  order: infoIconOrder
34914
34929
  }, infoIcon || /*#__PURE__*/React__default.createElement(DefaultInfoIcon, {
34915
34930
  color: iconPrimary
@@ -44697,6 +44712,15 @@ var Message$1 = function Message(_ref) {
44697
44712
  }
44698
44713
  setMessageActionsShow(false);
44699
44714
  }, []);
44715
+ var handleMediaItemClickWithActionsClose = useCallback(function (attachment) {
44716
+ if (messageActionsTimeout.current) {
44717
+ clearTimeout(messageActionsTimeout.current);
44718
+ }
44719
+ setMessageActionsShow(false);
44720
+ if (handleMediaItemClick) {
44721
+ handleMediaItemClick(attachment);
44722
+ }
44723
+ }, [handleMediaItemClick]);
44700
44724
  var handleReactionAddDelete = useCallback(function (selectedEmoji) {
44701
44725
  if (message.userReactions && message.userReactions.some(function (item) {
44702
44726
  return item.key === selectedEmoji;
@@ -44812,6 +44836,24 @@ var Message$1 = function Message(_ref) {
44812
44836
  setMessageActionsShow(false);
44813
44837
  }
44814
44838
  }, [openedMessageMenuId]);
44839
+ useEffect(function () {
44840
+ if (!reactionsPopupOpen) {
44841
+ return undefined;
44842
+ }
44843
+ var scrollContainer = document.getElementById('scrollableDiv');
44844
+ if (!scrollContainer) {
44845
+ return undefined;
44846
+ }
44847
+ var handleChatScroll = function handleChatScroll() {
44848
+ setReactionsPopupOpen(false);
44849
+ };
44850
+ scrollContainer.addEventListener('scroll', handleChatScroll, {
44851
+ passive: true
44852
+ });
44853
+ return function () {
44854
+ scrollContainer.removeEventListener('scroll', handleChatScroll);
44855
+ };
44856
+ }, [reactionsPopupOpen]);
44815
44857
  useEffect(function () {
44816
44858
  document.addEventListener('mousedown', handleClick);
44817
44859
  return function () {
@@ -44934,7 +44976,7 @@ var Message$1 = function Message(_ref) {
44934
44976
  handleCreateChat: handleCreateChat,
44935
44977
  handleReactionAddDelete: handleReactionAddDelete,
44936
44978
  handleScrollToRepliedMessage: handleScrollToRepliedMessage,
44937
- handleMediaItemClick: handleMediaItemClick,
44979
+ handleMediaItemClick: handleMediaItemClickWithActionsClose,
44938
44980
  isThreadMessage: isThreadMessage,
44939
44981
  handleOpenUserProfile: handleOpenUserProfile,
44940
44982
  unsupportedMessage: unsupportedMessage,
@@ -44949,7 +44991,7 @@ var Message$1 = function Message(_ref) {
44949
44991
  MessageActionsMenu: MessageActionsMenu,
44950
44992
  messageActionsBelow: messageActionsBelow,
44951
44993
  handleScrollToRepliedMessage: handleScrollToRepliedMessage,
44952
- handleMediaItemClick: handleMediaItemClick,
44994
+ handleMediaItemClick: handleMediaItemClickWithActionsClose,
44953
44995
  isPendingMessage: isPendingMessage,
44954
44996
  prevMessage: prevMessage,
44955
44997
  nextMessage: nextMessage,
@@ -58805,6 +58847,7 @@ var EmptyStateText = styled.p(_templateObject25$2 || (_templateObject25$2 = _tag
58805
58847
 
58806
58848
  var _templateObject$1c;
58807
58849
  var ChannelDetailsContainer = function ChannelDetailsContainer(_ref) {
58850
+ var _window;
58808
58851
  var _ref$size = _ref.size,
58809
58852
  size = _ref$size === void 0 ? 'large' : _ref$size,
58810
58853
  detailsTitleText = _ref.detailsTitleText,
@@ -58924,11 +58967,29 @@ var ChannelDetailsContainer = function ChannelDetailsContainer(_ref) {
58924
58967
  showGroupsInCommon = _ref.showGroupsInCommon;
58925
58968
  var channelDetailsIsOpen = useSelector(channelInfoIsOpenSelector, shallowEqual);
58926
58969
  var messageSearchIsOpen = useSelector(messageSearchIsOpenSelector, shallowEqual);
58970
+ var _useState = useState((_window = window) === null || _window === void 0 ? void 0 : _window.innerWidth),
58971
+ windowWidth = _useState[0],
58972
+ setWindowWidth = _useState[1];
58973
+ var theme = useSelector(themeSelector);
58974
+ var _useColor = useColors(),
58975
+ bgColor = _useColor[THEME_COLORS.BACKGROUND];
58927
58976
  useEffect(function () {
58928
58977
  setShowChannelDetails(true);
58929
58978
  }, []);
58979
+ useEffect(function () {
58980
+ var handleWindowResize = function handleWindowResize() {
58981
+ setWindowWidth(window.innerWidth);
58982
+ };
58983
+ window.addEventListener('resize', handleWindowResize);
58984
+ return function () {
58985
+ window.removeEventListener('resize', handleWindowResize);
58986
+ };
58987
+ }, []);
58930
58988
  return /*#__PURE__*/React__default.createElement(DetailsWrapper, {
58931
- id: messageSearchIsOpen ? 'messages_search_wrapper' : 'channel_details_wrapper'
58989
+ id: messageSearchIsOpen ? 'messages_search_wrapper' : 'channel_details_wrapper',
58990
+ window: windowWidth,
58991
+ theme: theme,
58992
+ bgColor: bgColor
58932
58993
  }, messageSearchIsOpen && /*#__PURE__*/React__default.createElement(MessagesSearch, {
58933
58994
  size: size
58934
58995
  }), channelDetailsIsOpen && !messageSearchIsOpen && (/*#__PURE__*/React__default.createElement(Details, {
@@ -59047,7 +59108,9 @@ var ChannelDetailsContainer = function ChannelDetailsContainer(_ref) {
59047
59108
  showGroupsInCommon: showGroupsInCommon
59048
59109
  })));
59049
59110
  };
59050
- var DetailsWrapper = styled.div(_templateObject$1c || (_templateObject$1c = _taggedTemplateLiteralLoose(["\n user-select: text;\n"])));
59111
+ var DetailsWrapper = styled.div(_templateObject$1c || (_templateObject$1c = _taggedTemplateLiteralLoose(["\n user-select: text;\n ", "\n"])), function (props) {
59112
+ return props.window && props.window < 1200 && "\n position: absolute;\n right: 0;\n top: 0;\n background: " + props.bgColor + ";\n z-index: 10;\n box-shadow: " + (props.theme === THEME.DARK ? '0 0 12px rgba(0, 0, 0, 0.5)' : '0 0 12px rgba(0, 0, 0, 0.08)') + ";\n height: 100%;\n ";
59113
+ });
59051
59114
 
59052
59115
  var _templateObject$1d, _templateObject2$17;
59053
59116
  var MessagesScrollToBottomButton = function MessagesScrollToBottomButton(_ref) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sceyt-chat-react-uikit",
3
- "version": "1.8.8-beta.11",
3
+ "version": "1.8.8-beta.13",
4
4
  "description": "Interactive React UI Components for Sceyt Chat.",
5
5
  "author": "Sceyt",
6
6
  "license": "MIT",