sceyt-chat-react-uikit 1.7.2-beta.4 → 1.7.2-beta.6

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 +16 -9
  2. package/index.modern.js +16 -9
  3. package/package.json +1 -1
package/index.js CHANGED
@@ -32814,7 +32814,7 @@ var Message$1 = function Message(_ref) {
32814
32814
  handleAddDeleteEmoji: handleReactionAddDelete,
32815
32815
  reactionsDetailsPopupBorderRadius: reactionsDetailsPopupBorderRadius,
32816
32816
  reactionsDetailsPopupHeaderItemsStyle: reactionsDetailsPopupHeaderItemsStyle
32817
- })), message.reactionTotals && message.reactionTotals.length && (/*#__PURE__*/React__default.createElement(ReactionsContainer, {
32817
+ })), /*#__PURE__*/React__default.createElement(ReactionsContainer, {
32818
32818
  id: message.id + "_reactions_container",
32819
32819
  border: reactionsContainerBorder,
32820
32820
  boxShadow: reactionsContainerBoxShadow,
@@ -32822,8 +32822,9 @@ var Message$1 = function Message(_ref) {
32822
32822
  topPosition: reactionsContainerTopPosition,
32823
32823
  padding: reactionsContainerPadding,
32824
32824
  backgroundColor: reactionsContainerBackground || backgroundSections,
32825
- rtlDirection: ownMessageOnRightSide && !message.incoming
32826
- }, /*#__PURE__*/React__default.createElement(MessageReactionsCont, {
32825
+ rtlDirection: ownMessageOnRightSide && !message.incoming,
32826
+ isReacted: message.reactionTotals && message.reactionTotals.length > 0
32827
+ }, message.reactionTotals && message.reactionTotals.length && (/*#__PURE__*/React__default.createElement(MessageReactionsCont, {
32827
32828
  rtlDirection: ownMessageOnRightSide && !message.incoming,
32828
32829
  onClick: handleToggleReactionsPopup
32829
32830
  }, message.reactionTotals.slice(0, reactionsDisplayCount || 5).map(function (summery) {
@@ -32914,7 +32915,7 @@ var EmptySelection = styled__default.span(_templateObject8$d || (_templateObject
32914
32915
  }, function (props) {
32915
32916
  return props.disabled && '0.5';
32916
32917
  });
32917
- var ReactionsContainer = styled__default.div(_templateObject9$b || (_templateObject9$b = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n margin-left: ", ";\n margin-right: ", ";\n\n margin-top: 4px;\n justify-content: flex-end;\n border: ", ";\n box-shadow: ", ";\n filter: drop-shadow(0px 0px 2px rgba(17, 21, 57, 0.08));\n border-radius: ", ";\n background-color: ", ";\n padding: ", ";\n z-index: 9;\n ", ";\n"])), function (props) {
32918
+ var ReactionsContainer = styled__default.div(_templateObject9$b || (_templateObject9$b = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n margin-left: ", ";\n margin-right: ", ";\n\n margin-top: 4px;\n justify-content: flex-end;\n border: ", ";\n box-shadow: ", ";\n filter: drop-shadow(0px 0px 2px rgba(17, 21, 57, 0.08));\n border-radius: ", ";\n background-color: ", ";\n padding: ", ";\n z-index: 9;\n ", ";\n overflow: hidden;\n height: ", ";\n transition: all 0.3s;\n"])), function (props) {
32918
32919
  return props.rtlDirection && 'auto';
32919
32920
  }, function (props) {
32920
32921
  return !props.rtlDirection && 'auto';
@@ -32927,9 +32928,11 @@ var ReactionsContainer = styled__default.div(_templateObject9$b || (_templateObj
32927
32928
  }, function (props) {
32928
32929
  return props.backgroundColor;
32929
32930
  }, function (props) {
32930
- return props.padding || '4px 8px';
32931
+ return !props.isReacted ? '0' : props.padding || '4px 8px';
32931
32932
  }, function (props) {
32932
32933
  return props.topPosition && "\n position: relative;\n top: " + props.topPosition + ";\n ";
32934
+ }, function (props) {
32935
+ return props.isReacted ? '16px' : '0';
32933
32936
  });
32934
32937
  var MessageReactionsCont = styled__default.div(_templateObject0$a || (_templateObject0$a = _taggedTemplateLiteralLoose(["\n position: relative;\n display: inline-flex;\n max-width: 300px;\n direction: ", ";\n cursor: pointer;\n"])), function (props) {
32935
32938
  return props.rtlDirection && 'ltr';
@@ -33251,7 +33254,14 @@ var MessageList = function MessageList(_ref2) {
33251
33254
  var text = '';
33252
33255
  for (var i = dateLabels.length - 1; i >= 0; i--) {
33253
33256
  var dateLabel = dateLabels[i];
33254
- if (!text && container.scrollTop > dateLabel.offsetTop - 28) {
33257
+ var aroundThreshold = 40;
33258
+ var labelTop = dateLabel.offsetTop - 28;
33259
+ var labelBottom = labelTop + (dateLabel.offsetHeight || 0) - 28;
33260
+ if (container.scrollTop >= labelTop - aroundThreshold && container.scrollTop <= labelBottom + aroundThreshold) {
33261
+ setShowTopDate(false);
33262
+ break;
33263
+ }
33264
+ if (!text && container.scrollTop > labelTop - 28) {
33255
33265
  var span = (dateLabel === null || dateLabel === void 0 ? void 0 : dateLabel.firstChild) && dateLabel.firstChild.firstChild;
33256
33266
  text = span ? span.innerText || '' : '';
33257
33267
  setTopDateLabel(text);
@@ -33273,9 +33283,6 @@ var MessageList = function MessageList(_ref2) {
33273
33283
  }
33274
33284
  setShowTopDate(true);
33275
33285
  clearTimeout(hideTopDateTimeout.current);
33276
- hideTopDateTimeout.current = setTimeout(function () {
33277
- setShowTopDate(false);
33278
- }, 1000);
33279
33286
  renderTopDate();
33280
33287
  var forceLoadPrevMessages = false;
33281
33288
  if (-target.scrollTop + target.offsetHeight + 30 > target.scrollHeight) {
package/index.modern.js CHANGED
@@ -32793,7 +32793,7 @@ var Message$1 = function Message(_ref) {
32793
32793
  handleAddDeleteEmoji: handleReactionAddDelete,
32794
32794
  reactionsDetailsPopupBorderRadius: reactionsDetailsPopupBorderRadius,
32795
32795
  reactionsDetailsPopupHeaderItemsStyle: reactionsDetailsPopupHeaderItemsStyle
32796
- })), message.reactionTotals && message.reactionTotals.length && (/*#__PURE__*/React__default.createElement(ReactionsContainer, {
32796
+ })), /*#__PURE__*/React__default.createElement(ReactionsContainer, {
32797
32797
  id: message.id + "_reactions_container",
32798
32798
  border: reactionsContainerBorder,
32799
32799
  boxShadow: reactionsContainerBoxShadow,
@@ -32801,8 +32801,9 @@ var Message$1 = function Message(_ref) {
32801
32801
  topPosition: reactionsContainerTopPosition,
32802
32802
  padding: reactionsContainerPadding,
32803
32803
  backgroundColor: reactionsContainerBackground || backgroundSections,
32804
- rtlDirection: ownMessageOnRightSide && !message.incoming
32805
- }, /*#__PURE__*/React__default.createElement(MessageReactionsCont, {
32804
+ rtlDirection: ownMessageOnRightSide && !message.incoming,
32805
+ isReacted: message.reactionTotals && message.reactionTotals.length > 0
32806
+ }, message.reactionTotals && message.reactionTotals.length && (/*#__PURE__*/React__default.createElement(MessageReactionsCont, {
32806
32807
  rtlDirection: ownMessageOnRightSide && !message.incoming,
32807
32808
  onClick: handleToggleReactionsPopup
32808
32809
  }, message.reactionTotals.slice(0, reactionsDisplayCount || 5).map(function (summery) {
@@ -32893,7 +32894,7 @@ var EmptySelection = styled.span(_templateObject8$d || (_templateObject8$d = _ta
32893
32894
  }, function (props) {
32894
32895
  return props.disabled && '0.5';
32895
32896
  });
32896
- var ReactionsContainer = styled.div(_templateObject9$b || (_templateObject9$b = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n margin-left: ", ";\n margin-right: ", ";\n\n margin-top: 4px;\n justify-content: flex-end;\n border: ", ";\n box-shadow: ", ";\n filter: drop-shadow(0px 0px 2px rgba(17, 21, 57, 0.08));\n border-radius: ", ";\n background-color: ", ";\n padding: ", ";\n z-index: 9;\n ", ";\n"])), function (props) {
32897
+ var ReactionsContainer = styled.div(_templateObject9$b || (_templateObject9$b = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n margin-left: ", ";\n margin-right: ", ";\n\n margin-top: 4px;\n justify-content: flex-end;\n border: ", ";\n box-shadow: ", ";\n filter: drop-shadow(0px 0px 2px rgba(17, 21, 57, 0.08));\n border-radius: ", ";\n background-color: ", ";\n padding: ", ";\n z-index: 9;\n ", ";\n overflow: hidden;\n height: ", ";\n transition: all 0.3s;\n"])), function (props) {
32897
32898
  return props.rtlDirection && 'auto';
32898
32899
  }, function (props) {
32899
32900
  return !props.rtlDirection && 'auto';
@@ -32906,9 +32907,11 @@ var ReactionsContainer = styled.div(_templateObject9$b || (_templateObject9$b =
32906
32907
  }, function (props) {
32907
32908
  return props.backgroundColor;
32908
32909
  }, function (props) {
32909
- return props.padding || '4px 8px';
32910
+ return !props.isReacted ? '0' : props.padding || '4px 8px';
32910
32911
  }, function (props) {
32911
32912
  return props.topPosition && "\n position: relative;\n top: " + props.topPosition + ";\n ";
32913
+ }, function (props) {
32914
+ return props.isReacted ? '16px' : '0';
32912
32915
  });
32913
32916
  var MessageReactionsCont = styled.div(_templateObject0$a || (_templateObject0$a = _taggedTemplateLiteralLoose(["\n position: relative;\n display: inline-flex;\n max-width: 300px;\n direction: ", ";\n cursor: pointer;\n"])), function (props) {
32914
32917
  return props.rtlDirection && 'ltr';
@@ -33230,7 +33233,14 @@ var MessageList = function MessageList(_ref2) {
33230
33233
  var text = '';
33231
33234
  for (var i = dateLabels.length - 1; i >= 0; i--) {
33232
33235
  var dateLabel = dateLabels[i];
33233
- if (!text && container.scrollTop > dateLabel.offsetTop - 28) {
33236
+ var aroundThreshold = 40;
33237
+ var labelTop = dateLabel.offsetTop - 28;
33238
+ var labelBottom = labelTop + (dateLabel.offsetHeight || 0) - 28;
33239
+ if (container.scrollTop >= labelTop - aroundThreshold && container.scrollTop <= labelBottom + aroundThreshold) {
33240
+ setShowTopDate(false);
33241
+ break;
33242
+ }
33243
+ if (!text && container.scrollTop > labelTop - 28) {
33234
33244
  var span = (dateLabel === null || dateLabel === void 0 ? void 0 : dateLabel.firstChild) && dateLabel.firstChild.firstChild;
33235
33245
  text = span ? span.innerText || '' : '';
33236
33246
  setTopDateLabel(text);
@@ -33252,9 +33262,6 @@ var MessageList = function MessageList(_ref2) {
33252
33262
  }
33253
33263
  setShowTopDate(true);
33254
33264
  clearTimeout(hideTopDateTimeout.current);
33255
- hideTopDateTimeout.current = setTimeout(function () {
33256
- setShowTopDate(false);
33257
- }, 1000);
33258
33265
  renderTopDate();
33259
33266
  var forceLoadPrevMessages = false;
33260
33267
  if (-target.scrollTop + target.offsetHeight + 30 > target.scrollHeight) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sceyt-chat-react-uikit",
3
- "version": "1.7.2-beta.4",
3
+ "version": "1.7.2-beta.6",
4
4
  "description": "Interactive React UI Components for Sceyt Chat.",
5
5
  "author": "Sceyt",
6
6
  "license": "MIT",