sceyt-chat-react-uikit 1.8.8-beta.11 → 1.8.8-beta.12
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.
- package/index.js +41 -5
- package/index.modern.js +41 -5
- 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 (
|
|
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
|
|
@@ -58825,6 +58840,7 @@ var EmptyStateText = styled__default.p(_templateObject25$2 || (_templateObject25
|
|
|
58825
58840
|
|
|
58826
58841
|
var _templateObject$1c;
|
|
58827
58842
|
var ChannelDetailsContainer = function ChannelDetailsContainer(_ref) {
|
|
58843
|
+
var _window;
|
|
58828
58844
|
var _ref$size = _ref.size,
|
|
58829
58845
|
size = _ref$size === void 0 ? 'large' : _ref$size,
|
|
58830
58846
|
detailsTitleText = _ref.detailsTitleText,
|
|
@@ -58944,11 +58960,29 @@ var ChannelDetailsContainer = function ChannelDetailsContainer(_ref) {
|
|
|
58944
58960
|
showGroupsInCommon = _ref.showGroupsInCommon;
|
|
58945
58961
|
var channelDetailsIsOpen = useSelector(channelInfoIsOpenSelector, reactRedux.shallowEqual);
|
|
58946
58962
|
var messageSearchIsOpen = useSelector(messageSearchIsOpenSelector, reactRedux.shallowEqual);
|
|
58963
|
+
var _useState = React.useState((_window = window) === null || _window === void 0 ? void 0 : _window.innerWidth),
|
|
58964
|
+
windowWidth = _useState[0],
|
|
58965
|
+
setWindowWidth = _useState[1];
|
|
58966
|
+
var theme = useSelector(themeSelector);
|
|
58967
|
+
var _useColor = useColors(),
|
|
58968
|
+
bgColor = _useColor[THEME_COLORS.BACKGROUND];
|
|
58947
58969
|
React.useEffect(function () {
|
|
58948
58970
|
setShowChannelDetails(true);
|
|
58949
58971
|
}, []);
|
|
58972
|
+
React.useEffect(function () {
|
|
58973
|
+
var handleWindowResize = function handleWindowResize() {
|
|
58974
|
+
setWindowWidth(window.innerWidth);
|
|
58975
|
+
};
|
|
58976
|
+
window.addEventListener('resize', handleWindowResize);
|
|
58977
|
+
return function () {
|
|
58978
|
+
window.removeEventListener('resize', handleWindowResize);
|
|
58979
|
+
};
|
|
58980
|
+
}, []);
|
|
58950
58981
|
return /*#__PURE__*/React__default.createElement(DetailsWrapper, {
|
|
58951
|
-
id: messageSearchIsOpen ? 'messages_search_wrapper' : 'channel_details_wrapper'
|
|
58982
|
+
id: messageSearchIsOpen ? 'messages_search_wrapper' : 'channel_details_wrapper',
|
|
58983
|
+
window: windowWidth,
|
|
58984
|
+
theme: theme,
|
|
58985
|
+
bgColor: bgColor
|
|
58952
58986
|
}, messageSearchIsOpen && /*#__PURE__*/React__default.createElement(MessagesSearch, {
|
|
58953
58987
|
size: size
|
|
58954
58988
|
}), channelDetailsIsOpen && !messageSearchIsOpen && (/*#__PURE__*/React__default.createElement(Details, {
|
|
@@ -59067,7 +59101,9 @@ var ChannelDetailsContainer = function ChannelDetailsContainer(_ref) {
|
|
|
59067
59101
|
showGroupsInCommon: showGroupsInCommon
|
|
59068
59102
|
})));
|
|
59069
59103
|
};
|
|
59070
|
-
var DetailsWrapper = styled__default.div(_templateObject$1c || (_templateObject$1c = _taggedTemplateLiteralLoose(["\n user-select: text;\n"])))
|
|
59104
|
+
var DetailsWrapper = styled__default.div(_templateObject$1c || (_templateObject$1c = _taggedTemplateLiteralLoose(["\n user-select: text;\n ", "\n"])), function (props) {
|
|
59105
|
+
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 ";
|
|
59106
|
+
});
|
|
59071
59107
|
|
|
59072
59108
|
var _templateObject$1d, _templateObject2$17;
|
|
59073
59109
|
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 (
|
|
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
|
|
@@ -58805,6 +58820,7 @@ var EmptyStateText = styled.p(_templateObject25$2 || (_templateObject25$2 = _tag
|
|
|
58805
58820
|
|
|
58806
58821
|
var _templateObject$1c;
|
|
58807
58822
|
var ChannelDetailsContainer = function ChannelDetailsContainer(_ref) {
|
|
58823
|
+
var _window;
|
|
58808
58824
|
var _ref$size = _ref.size,
|
|
58809
58825
|
size = _ref$size === void 0 ? 'large' : _ref$size,
|
|
58810
58826
|
detailsTitleText = _ref.detailsTitleText,
|
|
@@ -58924,11 +58940,29 @@ var ChannelDetailsContainer = function ChannelDetailsContainer(_ref) {
|
|
|
58924
58940
|
showGroupsInCommon = _ref.showGroupsInCommon;
|
|
58925
58941
|
var channelDetailsIsOpen = useSelector(channelInfoIsOpenSelector, shallowEqual);
|
|
58926
58942
|
var messageSearchIsOpen = useSelector(messageSearchIsOpenSelector, shallowEqual);
|
|
58943
|
+
var _useState = useState((_window = window) === null || _window === void 0 ? void 0 : _window.innerWidth),
|
|
58944
|
+
windowWidth = _useState[0],
|
|
58945
|
+
setWindowWidth = _useState[1];
|
|
58946
|
+
var theme = useSelector(themeSelector);
|
|
58947
|
+
var _useColor = useColors(),
|
|
58948
|
+
bgColor = _useColor[THEME_COLORS.BACKGROUND];
|
|
58927
58949
|
useEffect(function () {
|
|
58928
58950
|
setShowChannelDetails(true);
|
|
58929
58951
|
}, []);
|
|
58952
|
+
useEffect(function () {
|
|
58953
|
+
var handleWindowResize = function handleWindowResize() {
|
|
58954
|
+
setWindowWidth(window.innerWidth);
|
|
58955
|
+
};
|
|
58956
|
+
window.addEventListener('resize', handleWindowResize);
|
|
58957
|
+
return function () {
|
|
58958
|
+
window.removeEventListener('resize', handleWindowResize);
|
|
58959
|
+
};
|
|
58960
|
+
}, []);
|
|
58930
58961
|
return /*#__PURE__*/React__default.createElement(DetailsWrapper, {
|
|
58931
|
-
id: messageSearchIsOpen ? 'messages_search_wrapper' : 'channel_details_wrapper'
|
|
58962
|
+
id: messageSearchIsOpen ? 'messages_search_wrapper' : 'channel_details_wrapper',
|
|
58963
|
+
window: windowWidth,
|
|
58964
|
+
theme: theme,
|
|
58965
|
+
bgColor: bgColor
|
|
58932
58966
|
}, messageSearchIsOpen && /*#__PURE__*/React__default.createElement(MessagesSearch, {
|
|
58933
58967
|
size: size
|
|
58934
58968
|
}), channelDetailsIsOpen && !messageSearchIsOpen && (/*#__PURE__*/React__default.createElement(Details, {
|
|
@@ -59047,7 +59081,9 @@ var ChannelDetailsContainer = function ChannelDetailsContainer(_ref) {
|
|
|
59047
59081
|
showGroupsInCommon: showGroupsInCommon
|
|
59048
59082
|
})));
|
|
59049
59083
|
};
|
|
59050
|
-
var DetailsWrapper = styled.div(_templateObject$1c || (_templateObject$1c = _taggedTemplateLiteralLoose(["\n user-select: text;\n"])))
|
|
59084
|
+
var DetailsWrapper = styled.div(_templateObject$1c || (_templateObject$1c = _taggedTemplateLiteralLoose(["\n user-select: text;\n ", "\n"])), function (props) {
|
|
59085
|
+
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 ";
|
|
59086
|
+
});
|
|
59051
59087
|
|
|
59052
59088
|
var _templateObject$1d, _templateObject2$17;
|
|
59053
59089
|
var MessagesScrollToBottomButton = function MessagesScrollToBottomButton(_ref) {
|