@expressms/smartapp-ui 3.0.0-alpha.20 → 3.0.0-alpha.200
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/build/main/assets/icons/accepted-invite-status.svg +4 -0
- package/build/main/assets/icons/chevron.svg +3 -0
- package/build/main/assets/icons/close-modal.svg +1 -1
- package/build/main/assets/icons/copy.svg +3 -0
- package/build/main/assets/icons/declined-invite-status.svg +4 -0
- package/build/main/assets/icons/department.svg +3 -0
- package/build/main/assets/icons/doc-small.svg +5 -5
- package/build/main/assets/icons/download.svg +3 -0
- package/build/main/assets/icons/file-small.svg +5 -5
- package/build/main/assets/icons/file.svg +1 -1
- package/build/main/assets/icons/image-no-preview-small.svg +11 -0
- package/build/main/assets/icons/image-no-preview.svg +11 -0
- package/build/main/assets/icons/job-position.svg +3 -0
- package/build/main/assets/icons/needs-action-invite-status.svg +4 -0
- package/build/main/assets/icons/notification-close.svg +1 -1
- package/build/main/assets/icons/notification-error.svg +5 -0
- package/build/main/assets/icons/notification-failure-filled.svg +3 -0
- package/build/main/assets/icons/notification-info-filled.svg +5 -0
- package/build/main/assets/icons/notification-success-filled.svg +4 -0
- package/build/main/assets/icons/office.svg +3 -0
- package/build/main/assets/icons/pdf-small.svg +5 -5
- package/build/main/assets/icons/ppt-small.svg +5 -5
- package/build/main/assets/icons/private.svg +4 -11
- package/build/main/assets/icons/search.svg +1 -1
- package/build/main/assets/icons/select-arrow-down.svg +3 -0
- package/build/main/assets/icons/select-arrow-up.svg +3 -0
- package/build/main/assets/icons/server.svg +3 -0
- package/build/main/assets/icons/txt-small.svg +5 -5
- package/build/main/assets/icons/video-no-preview-small.svg +11 -0
- package/build/main/assets/icons/video-no-preview.svg +11 -0
- package/build/main/assets/icons/xls-small.svg +5 -5
- package/build/main/assets/storybook/index.d.ts +3 -0
- package/build/main/assets/storybook/index.js +3 -0
- package/build/main/assets/storybook/index.js.map +1 -1
- package/build/main/constants/constants.d.ts +90 -46
- package/build/main/constants/constants.js +131 -49
- package/build/main/constants/constants.js.map +1 -1
- package/build/main/constants/types.d.ts +11 -1
- package/build/main/helpers/index.d.ts +3 -1
- package/build/main/helpers/index.js +21 -2
- package/build/main/helpers/index.js.map +1 -1
- package/build/main/hooks/useCharHintDisplay.d.ts +9 -0
- package/build/main/hooks/useCharHintDisplay.js +35 -0
- package/build/main/hooks/useCharHintDisplay.js.map +1 -0
- package/build/main/hooks/useMobileLongTap.d.ts +16 -0
- package/build/main/hooks/useMobileLongTap.js +65 -0
- package/build/main/hooks/useMobileLongTap.js.map +1 -0
- package/build/main/hooks/useModal.d.ts +18 -10
- package/build/main/hooks/useModal.js +229 -12
- package/build/main/hooks/useModal.js.map +1 -1
- package/build/main/index.d.ts +2 -0
- package/build/main/index.js +2 -0
- package/build/main/index.js.map +1 -1
- package/build/main/styles/styles.scss +2 -2
- package/build/main//321/201omponents/ActionModal/ActionModal.js +1 -1
- package/build/main//321/201omponents/ActionModal/ActionModal.js.map +1 -1
- package/build/main//321/201omponents/AttachedFile/AttachedFile.d.ts +1 -1
- package/build/main//321/201omponents/AttachedFile/AttachedFile.js +81 -26
- package/build/main//321/201omponents/AttachedFile/AttachedFile.js.map +1 -1
- package/build/main//321/201omponents/AttachedFile/types.d.ts +1 -0
- package/build/main//321/201omponents/Avatar/Avatar.d.ts +3 -2
- package/build/main//321/201omponents/Avatar/Avatar.js +55 -27
- package/build/main//321/201omponents/Avatar/Avatar.js.map +1 -1
- package/build/main//321/201omponents/Avatar/types.d.ts +9 -5
- package/build/main//321/201omponents/Avatar/types.js +5 -2
- package/build/main//321/201omponents/Avatar/types.js.map +1 -1
- package/build/main//321/201omponents/Button/Button.d.ts +1 -1
- package/build/main//321/201omponents/Button/Button.js +16 -10
- package/build/main//321/201omponents/Button/Button.js.map +1 -1
- package/build/main//321/201omponents/Button/types.d.ts +9 -2
- package/build/main//321/201omponents/Button/types.js +3 -0
- package/build/main//321/201omponents/Button/types.js.map +1 -1
- package/build/main//321/201omponents/Calendar/Calendar.d.ts +14 -2
- package/build/main//321/201omponents/Calendar/Calendar.js +202 -62
- package/build/main//321/201omponents/Calendar/Calendar.js.map +1 -1
- package/build/main//321/201omponents/Calendar/types.d.ts +18 -5
- package/build/main//321/201omponents/Charts/ChartBar/ChartBar.js +1 -1
- package/build/main//321/201omponents/Charts/ChartLine/ChartLine.js +1 -1
- package/build/main//321/201omponents/Charts/ChartPie/ChartPie.js +1 -1
- package/build/main//321/201omponents/Chip/Chip.d.ts +3 -2
- package/build/main//321/201omponents/Chip/Chip.js +210 -46
- package/build/main//321/201omponents/Chip/Chip.js.map +1 -1
- package/build/main//321/201omponents/Chip/types.d.ts +14 -4
- package/build/main//321/201omponents/ChipDndContext/ChipDndContext.d.ts +13 -0
- package/build/main//321/201omponents/ChipDndContext/ChipDndContext.js +76 -0
- package/build/main//321/201omponents/ChipDndContext/ChipDndContext.js.map +1 -0
- package/build/main//321/201omponents/ChipDndContext/index.d.ts +1 -0
- package/build/main//321/201omponents/ChipDndContext/index.js +2 -0
- package/build/main//321/201omponents/ChipDndContext/index.js.map +1 -0
- package/build/main//321/201omponents/ConfirmationModal/ConfirmationModal.d.ts +1 -1
- package/build/main//321/201omponents/ConfirmationModal/ConfirmationModal.js +3 -2
- package/build/main//321/201omponents/ConfirmationModal/ConfirmationModal.js.map +1 -1
- package/build/main//321/201omponents/ConfirmationModal/types.d.ts +5 -2
- package/build/main//321/201omponents/ContextMenu/ContextMenu.d.ts +1 -1
- package/build/main//321/201omponents/ContextMenu/ContextMenu.js +68 -27
- package/build/main//321/201omponents/ContextMenu/ContextMenu.js.map +1 -1
- package/build/main//321/201omponents/ContextMenu/types.d.ts +14 -7
- package/build/main//321/201omponents/ContextMenuItem/ContextMenuItem.d.ts +4 -0
- package/build/main//321/201omponents/ContextMenuItem/ContextMenuItem.js +49 -0
- package/build/main//321/201omponents/ContextMenuItem/ContextMenuItem.js.map +1 -0
- package/build/main//321/201omponents/ContextMenuItem/index.d.ts +1 -0
- package/build/main//321/201omponents/ContextMenuItem/index.js +2 -0
- package/build/main//321/201omponents/ContextMenuItem/index.js.map +1 -0
- package/build/main//321/201omponents/ContextMenuItem/types.d.ts +28 -0
- package/build/main//321/201omponents/ContextMenuItem/types.js +6 -0
- package/build/main//321/201omponents/ContextMenuItem/types.js.map +1 -0
- package/build/main//321/201omponents/CustomSelect/CustomSelect.d.ts +1 -1
- package/build/main//321/201omponents/CustomSelect/CustomSelect.js +55 -22
- package/build/main//321/201omponents/CustomSelect/CustomSelect.js.map +1 -1
- package/build/main//321/201omponents/CustomSelect/selectStyles.d.ts +1 -1
- package/build/main//321/201omponents/CustomSelect/selectStyles.js +33 -26
- package/build/main//321/201omponents/CustomSelect/selectStyles.js.map +1 -1
- package/build/main//321/201omponents/CustomSelect/types.d.ts +21 -4
- package/build/main//321/201omponents/CustomSelectProfiles/CustomSelectProfiles.d.ts +1 -1
- package/build/main//321/201omponents/CustomSelectProfiles/CustomSelectProfiles.js +33 -24
- package/build/main//321/201omponents/CustomSelectProfiles/CustomSelectProfiles.js.map +1 -1
- package/build/main//321/201omponents/CustomSelectProfiles/selectStyles.d.ts +11 -0
- package/build/main//321/201omponents/CustomSelectProfiles/selectStyles.js +39 -0
- package/build/main//321/201omponents/CustomSelectProfiles/selectStyles.js.map +1 -0
- package/build/main//321/201omponents/CustomSelectProfiles/types.d.ts +6 -5
- package/build/main//321/201omponents/DragAndDrop/DragAndDrop.js +2 -2
- package/build/main//321/201omponents/DragAndDrop/DragAndDrop.js.map +1 -1
- package/build/main//321/201omponents/DraggablePopup/DraggablePopup.d.ts +1 -1
- package/build/main//321/201omponents/DraggablePopup/DraggablePopup.js +24 -18
- package/build/main//321/201omponents/DraggablePopup/DraggablePopup.js.map +1 -1
- package/build/main//321/201omponents/DraggablePopup/types.d.ts +8 -8
- package/build/main//321/201omponents/Flex/Flex.d.ts +1 -1
- package/build/main//321/201omponents/Flex/Flex.js +2 -2
- package/build/main//321/201omponents/Flex/Flex.js.map +1 -1
- package/build/main//321/201omponents/Flex/types.d.ts +2 -0
- package/build/main//321/201omponents/Input/Input.d.ts +1 -1
- package/build/main//321/201omponents/Input/Input.js +89 -31
- package/build/main//321/201omponents/Input/Input.js.map +1 -1
- package/build/main//321/201omponents/Input/types.d.ts +10 -3
- package/build/main//321/201omponents/ListItem/ListItem.js +21 -10
- package/build/main//321/201omponents/ListItem/ListItem.js.map +1 -1
- package/build/main//321/201omponents/ListItem/types.d.ts +8 -2
- package/build/main//321/201omponents/Modal/Modal.d.ts +3 -2
- package/build/main//321/201omponents/Modal/Modal.js +212 -77
- package/build/main//321/201omponents/Modal/Modal.js.map +1 -1
- package/build/main//321/201omponents/Modal/types.d.ts +38 -2
- package/build/main//321/201omponents/Notification/Notification.d.ts +4 -6
- package/build/main//321/201omponents/Notification/Notification.js +88 -30
- package/build/main//321/201omponents/Notification/Notification.js.map +1 -1
- package/build/main//321/201omponents/Notification/types.d.ts +23 -5
- package/build/main//321/201omponents/Skeleton/Skeleton.js +1 -1
- package/build/main//321/201omponents/Skeleton/Skeleton.js.map +1 -1
- package/build/main//321/201omponents/Stories/Stories.js +72 -4
- package/build/main//321/201omponents/Stories/Stories.js.map +1 -1
- package/build/main//321/201omponents/Textarea/Textarea.d.ts +1 -1
- package/build/main//321/201omponents/Textarea/Textarea.js +2 -2
- package/build/main//321/201omponents/Textarea/Textarea.js.map +1 -1
- package/build/main//321/201omponents/Textarea/types.d.ts +2 -2
- package/build/main//321/201omponents/UserDropdown/ContactBottomSheet/ContactBottomSheet.d.ts +1 -1
- package/build/main//321/201omponents/UserDropdown/ContactBottomSheet/ContactBottomSheet.js +12 -2
- package/build/main//321/201omponents/UserDropdown/ContactBottomSheet/ContactBottomSheet.js.map +1 -1
- package/build/main//321/201omponents/UserDropdown/ContactInfo/ContactInfo.js +23 -13
- package/build/main//321/201omponents/UserDropdown/ContactInfo/ContactInfo.js.map +1 -1
- package/build/main//321/201omponents/UserDropdown/LoadingMessage/LoadingMessage.d.ts +2 -1
- package/build/main//321/201omponents/UserDropdown/LoadingMessage/LoadingMessage.js +4 -3
- package/build/main//321/201omponents/UserDropdown/LoadingMessage/LoadingMessage.js.map +1 -1
- package/build/main//321/201omponents/UserDropdown/MenuList/MenuList.js +35 -60
- package/build/main//321/201omponents/UserDropdown/MenuList/MenuList.js.map +1 -1
- package/build/main//321/201omponents/UserDropdown/MultiValueLabel/MultiValueLabel.d.ts +3 -2
- package/build/main//321/201omponents/UserDropdown/MultiValueLabel/MultiValueLabel.js +34 -38
- package/build/main//321/201omponents/UserDropdown/MultiValueLabel/MultiValueLabel.js.map +1 -1
- package/build/main//321/201omponents/UserDropdown/Option/Option.js +16 -11
- package/build/main//321/201omponents/UserDropdown/Option/Option.js.map +1 -1
- package/build/main//321/201omponents/UserDropdown/SearchInCatalogButton/SearchInCatalogButton.d.ts +1 -1
- package/build/main//321/201omponents/UserDropdown/SearchInCatalogButton/SearchInCatalogButton.js +6 -9
- package/build/main//321/201omponents/UserDropdown/SearchInCatalogButton/SearchInCatalogButton.js.map +1 -1
- package/build/main//321/201omponents/UserDropdown/UserDropdown.d.ts +3 -3
- package/build/main//321/201omponents/UserDropdown/UserDropdown.js +238 -263
- package/build/main//321/201omponents/UserDropdown/UserDropdown.js.map +1 -1
- package/build/main//321/201omponents/UserDropdown/components/Delimiter.d.ts +8 -0
- package/build/main//321/201omponents/UserDropdown/components/Delimiter.js +10 -0
- package/build/main//321/201omponents/UserDropdown/components/Delimiter.js.map +1 -0
- package/build/main//321/201omponents/UserDropdown/components/Hint.d.ts +6 -0
- package/build/main//321/201omponents/UserDropdown/components/Hint.js +21 -0
- package/build/main//321/201omponents/UserDropdown/components/Hint.js.map +1 -0
- package/build/main//321/201omponents/UserDropdown/components/Input.d.ts +2 -0
- package/build/main//321/201omponents/UserDropdown/components/Input.js +24 -0
- package/build/main//321/201omponents/UserDropdown/components/Input.js.map +1 -0
- package/build/main//321/201omponents/UserDropdown/components/Mask.d.ts +7 -0
- package/build/main//321/201omponents/UserDropdown/components/Mask.js +18 -0
- package/build/main//321/201omponents/UserDropdown/components/Mask.js.map +1 -0
- package/build/main//321/201omponents/UserDropdown/components/Title.d.ts +5 -0
- package/build/main//321/201omponents/UserDropdown/components/Title.js +18 -0
- package/build/main//321/201omponents/UserDropdown/components/Title.js.map +1 -0
- package/build/main//321/201omponents/UserDropdown/constants.d.ts +57 -0
- package/build/main//321/201omponents/UserDropdown/constants.js +73 -0
- package/build/main//321/201omponents/UserDropdown/constants.js.map +1 -1
- package/build/main//321/201omponents/UserDropdown/helpers.d.ts +84 -41
- package/build/main//321/201omponents/UserDropdown/helpers.js +184 -14
- package/build/main//321/201omponents/UserDropdown/helpers.js.map +1 -1
- package/build/main//321/201omponents/UserDropdown/selectStyles.d.ts +1 -1
- package/build/main//321/201omponents/UserDropdown/selectStyles.js +57 -27
- package/build/main//321/201omponents/UserDropdown/selectStyles.js.map +1 -1
- package/build/main//321/201omponents/UserDropdown/types.d.ts +144 -60
- package/build/main//321/201omponents/UserDropdown/types.js +1 -8
- package/build/main//321/201omponents/UserDropdown/types.js.map +1 -1
- package/package.json +11 -7
- package/build/main/assets/icons/avatar-arrow-down.svg +0 -3
- package/build/main/assets/icons/avatar-arrow-up.svg +0 -3
- package/build/main/hooks/useLongTap.d.ts +0 -12
- package/build/main/hooks/useLongTap.js +0 -29
- package/build/main/hooks/useLongTap.js.map +0 -1
|
@@ -12,10 +12,13 @@ var __assign = (this && this.__assign) || function () {
|
|
|
12
12
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
13
|
import { useCallback, useEffect, useRef } from 'react';
|
|
14
14
|
import classNames from 'classnames';
|
|
15
|
+
import { isUndefined } from 'lodash';
|
|
16
|
+
import Avatar from '../Avatar';
|
|
15
17
|
import Checkbox from '../Checkbox';
|
|
16
18
|
import RadioButton from '../RadioButton';
|
|
17
19
|
import Toggle from '../Toggle';
|
|
18
20
|
import { generateFontFamilyStyle, generateId } from '../../helpers';
|
|
21
|
+
import { AVATAR_SIZES } from '../Avatar/types';
|
|
19
22
|
import '../../styles/styles.scss';
|
|
20
23
|
export var LIST_ITEM_TYPE = {
|
|
21
24
|
interactive: 'interactive',
|
|
@@ -52,9 +55,10 @@ var isElement = function (element) {
|
|
|
52
55
|
return { isIndicatorElement: isIndicatorElement, isIconElement: isIconElement, isNoElement: isNoElement };
|
|
53
56
|
};
|
|
54
57
|
var ListItem = function (props) {
|
|
55
|
-
var fontFamily = props.fontFamily, textRef = props.textRef, type = props.type, text = props.text, element = props.element, isDisabled = props.isDisabled, className = props.className, styles = props.styles, textStyles = props.textStyles, interactiveElementStyles = props.interactiveElementStyles;
|
|
58
|
+
var platform = props.platform, fontFamily = props.fontFamily, textRef = props.textRef, type = props.type, text = props.text, element = props.element, isDisabled = props.isDisabled, isTextTruncated = props.isTextTruncated, className = props.className, styles = props.styles, textStyles = props.textStyles, primaryTextStyles = props.primaryTextStyles, primaryTextClassName = props.primaryTextClassName, interactiveElementStyles = props.interactiveElementStyles, avatar = props.avatar;
|
|
56
59
|
var listItemRef = useRef(null);
|
|
57
60
|
var isRadioButtonOrCheckbox = element === INTERACTIVE_ELEMENT.radioButton || element === INTERACTIVE_ELEMENT.checkbox;
|
|
61
|
+
var isUserListItem = !isUndefined(avatar);
|
|
58
62
|
var _a = isType(type), isInteractiveType = _a.isInteractiveType, isNotInteractiveType = _a.isNotInteractiveType;
|
|
59
63
|
var _b = isElement(element), isIndicatorElement = _b.isIndicatorElement, isIconElement = _b.isIconElement, isNoElement = _b.isNoElement;
|
|
60
64
|
var isLeftPosition = function (position) { return position === INTERACTIVE_POSITION.left; };
|
|
@@ -123,13 +127,17 @@ var ListItem = function (props) {
|
|
|
123
127
|
return null;
|
|
124
128
|
};
|
|
125
129
|
var renderLeftElement = function () {
|
|
130
|
+
if (isUserListItem) {
|
|
131
|
+
var secondaryText = props.secondaryText;
|
|
132
|
+
var username = secondaryText || text;
|
|
133
|
+
return _jsx(Avatar, { fontFamily: fontFamily, className: "smartapp-list-item__avatar", avatar: avatar, username: username, size: AVATAR_SIZES.size_32 });
|
|
134
|
+
}
|
|
126
135
|
if (isInteractiveType) {
|
|
127
136
|
var _a = props, _b = _a.position, position = _b === void 0 ? INTERACTIVE_POSITION.right : _b, _c = _a.isIndicator, isIndicator = _c === void 0 ? false : _c, color = _a.color;
|
|
128
137
|
return isLeftPosition(position) ? renderInteractiveElement() : renderIndicatorElement({ isIndicator: isIndicator, color: color });
|
|
129
138
|
}
|
|
130
|
-
if (isNotInteractiveType)
|
|
139
|
+
if (isNotInteractiveType)
|
|
131
140
|
return renderNotInteractiveElement();
|
|
132
|
-
}
|
|
133
141
|
};
|
|
134
142
|
var renderRightElement = function () {
|
|
135
143
|
if (isInteractiveType) {
|
|
@@ -139,12 +147,13 @@ var ListItem = function (props) {
|
|
|
139
147
|
};
|
|
140
148
|
var renderSecondaryText = function () {
|
|
141
149
|
if (isNotInteractiveType && isNoElement) {
|
|
142
|
-
var _a = props, secondaryText = _a.secondaryText, secondaryTextColor = _a.secondaryTextColor;
|
|
143
|
-
return secondaryText ? _jsx("div", __assign({ style: { color: secondaryTextColor } }, { children: secondaryText })) : null;
|
|
150
|
+
var _a = props, secondaryText = _a.secondaryText, secondaryTextColor = _a.secondaryTextColor, _b = _a.secondaryTextStyles, secondaryTextStyles = _b === void 0 ? {} : _b, secondaryTextClassName = _a.secondaryTextClassName;
|
|
151
|
+
return secondaryText ? (_jsx("div", __assign({ className: secondaryTextClassName, style: __assign({ color: secondaryTextColor }, secondaryTextStyles) }, { children: secondaryText }))) : null;
|
|
144
152
|
}
|
|
145
153
|
};
|
|
146
154
|
var generateTextClassName = function () {
|
|
147
|
-
var
|
|
155
|
+
var defaultTextClassname = 'smartapp-list-item__text';
|
|
156
|
+
var classNames = isUserListItem || isTextTruncated ? [defaultTextClassname, "".concat(defaultTextClassname, "--wrap")] : [defaultTextClassname];
|
|
148
157
|
if (isInteractiveType) {
|
|
149
158
|
var _a = props, _b = _a.position, position = _b === void 0 ? INTERACTIVE_POSITION.right : _b, isIndicator = _a.isIndicator;
|
|
150
159
|
var isLeftClassNeeded = isLeftPosition(position) || isIndicator;
|
|
@@ -159,14 +168,16 @@ var ListItem = function (props) {
|
|
|
159
168
|
return classNames;
|
|
160
169
|
};
|
|
161
170
|
var generateClassName = function () {
|
|
162
|
-
var
|
|
171
|
+
var typeClassName = "smartapp-list-item__".concat(type);
|
|
172
|
+
var selectedClassName = "".concat(typeClassName, "--selected");
|
|
173
|
+
var classNames = ['smartapp-list-item', typeClassName, "".concat(typeClassName, "--").concat(platform)];
|
|
163
174
|
if (isNotInteractiveType) {
|
|
164
175
|
var isSelected = props.isSelected;
|
|
165
|
-
isSelected && classNames.push("
|
|
176
|
+
isSelected && classNames.push.apply(classNames, [selectedClassName, "".concat(selectedClassName, "__").concat(platform)]);
|
|
166
177
|
}
|
|
167
178
|
if (isNoElement) {
|
|
168
179
|
var secondaryText = props.secondaryText;
|
|
169
|
-
secondaryText && classNames.push("
|
|
180
|
+
secondaryText && classNames.push("".concat(typeClassName, "--with-secondary-text"));
|
|
170
181
|
}
|
|
171
182
|
isDisabled && classNames.push('smartapp-list-item__disabled');
|
|
172
183
|
className && classNames.push(className);
|
|
@@ -197,7 +208,7 @@ var ListItem = function (props) {
|
|
|
197
208
|
window.removeEventListener('mouseup', handleMouseUp);
|
|
198
209
|
};
|
|
199
210
|
}, [handleMouseUp]);
|
|
200
|
-
return (_jsxs("div", __assign({ ref: listItemRef, className: classNames(generateClassName()), style: __assign(__assign({}, generateFontFamilyStyle(fontFamily)), styles), onMouseDown: handleMouseDown, onClick: handleClick }, { children: [renderLeftElement(), _jsxs("div", __assign({ className: classNames(generateTextClassName()), style: textStyles }, { children: [_jsx("div", __assign({ ref: textRef }, { children: text })), renderSecondaryText()] })), renderRightElement()] })));
|
|
211
|
+
return (_jsxs("div", __assign({ ref: listItemRef, className: classNames(generateClassName()), style: __assign(__assign({}, generateFontFamilyStyle(fontFamily)), styles), onMouseDown: handleMouseDown, onClick: handleClick }, { children: [renderLeftElement(), _jsxs("div", __assign({ className: classNames(generateTextClassName()), style: textStyles }, { children: [_jsx("div", __assign({ ref: textRef, className: primaryTextClassName, style: primaryTextStyles }, { children: text })), renderSecondaryText()] })), renderRightElement()] })));
|
|
201
212
|
};
|
|
202
213
|
export default ListItem;
|
|
203
214
|
//# sourceMappingURL=ListItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItem.js","sourceRoot":"","sources":["../../../../src/сomponents/ListItem/ListItem.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAc,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAC7D,OAAO,UAAU,MAAM,YAAY,CAAA;AACnC,OAAO,QAAQ,MAAM,aAAa,CAAA;AAClC,OAAO,WAAW,MAAM,gBAAgB,CAAA;AACxC,OAAO,MAAM,MAAM,WAAW,CAAA;AAC9B,OAAO,EAAE,uBAAuB,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;
|
|
1
|
+
{"version":3,"file":"ListItem.js","sourceRoot":"","sources":["../../../../src/сomponents/ListItem/ListItem.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ReactElement, RefObject } from 'react';
|
|
2
|
-
import { IFontFamilyProps, TStyles } from '../../constants';
|
|
2
|
+
import { IFontFamilyProps, IPlatformProps, TAvatar, TStyles } from '../../constants';
|
|
3
3
|
export type TInteractivePosition = 'left' | 'right';
|
|
4
4
|
export type TInteractiveElement = 'radio-button' | 'checkbox' | 'toggle';
|
|
5
5
|
export type TNotInteractiveElement = 'icon' | 'indicator' | 'no-element';
|
|
@@ -25,17 +25,23 @@ export interface NotInteractiveNoElementItemProps {
|
|
|
25
25
|
element: 'no-element';
|
|
26
26
|
secondaryText?: string;
|
|
27
27
|
secondaryTextColor?: string;
|
|
28
|
+
secondaryTextStyles?: TStyles;
|
|
29
|
+
secondaryTextClassName?: string;
|
|
28
30
|
}
|
|
29
31
|
export type NotInteractiveItemProps = (NotInteractiveIconItemProps | NotInteractiveIndicatorItemProps | NotInteractiveNoElementItemProps) & {
|
|
30
32
|
type: 'not-interactive';
|
|
31
33
|
isSelected?: boolean;
|
|
32
34
|
};
|
|
33
|
-
export type IListItemProps = IFontFamilyProps & (InteractiveItemProps | NotInteractiveItemProps) & {
|
|
35
|
+
export type IListItemProps = IFontFamilyProps & IPlatformProps & (InteractiveItemProps | NotInteractiveItemProps) & {
|
|
34
36
|
text: string;
|
|
35
37
|
isDisabled?: boolean;
|
|
38
|
+
isTextTruncated?: boolean;
|
|
36
39
|
className?: string;
|
|
37
40
|
styles?: TStyles;
|
|
38
41
|
textStyles?: TStyles;
|
|
42
|
+
primaryTextStyles?: TStyles;
|
|
43
|
+
primaryTextClassName?: string;
|
|
39
44
|
interactiveElementStyles?: TStyles;
|
|
40
45
|
textRef?: RefObject<HTMLDivElement | null>;
|
|
46
|
+
avatar?: TAvatar;
|
|
41
47
|
};
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import { IModalProps } from './types';
|
|
1
|
+
import { IModalProps, TBottomSheetScrollMobileConfig } from './types';
|
|
2
2
|
import '../../styles/styles.scss';
|
|
3
|
-
declare const
|
|
3
|
+
export declare const DEFAULT_BOTTOM_SHEET_SCROLL_MOBILE_CONFIG: TBottomSheetScrollMobileConfig;
|
|
4
|
+
declare const Modal: ({ fontFamily, isModalOpen, isClosableOutside, isCloseIconHidden, isPopup, isBottomSheet, isDisabledBottomSheet, isCloseButtonDisabled, isResetPaddingBottom, isScrollBordersVisible, isDisableTitleCollapsing, isBottomContentBorderShown, isNeedToScrollUp, isDisablePopupDragging, modalId, contentId, mobileContentId, modalRef: outerModalRef, content, bottomContent, title, titleIcons, platform, popupClassName, className, titleClassName, iconsClassName, popupStyles, styles, titleStyles, contentStyles, scrollableContentStyles, iconColor, backgroundColor, modalMaxHeight, bottomSheetProps, bottomSheetDetent, bottomSheetStyles, externalBottomSheetScrollContainer, contextMenuProps, bottomSheetScrollMobileConfig, handleChangeTitleBorderDisplayed, handleClickOutside, handleCloseModal, handleBottomSheetInitialized, onScroll: externalHandleScroll, }: IModalProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
4
5
|
export default Modal;
|
|
@@ -30,75 +30,117 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
|
30
30
|
return to.concat(ar || Array.prototype.slice.call(from));
|
|
31
31
|
};
|
|
32
32
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
33
|
+
/* eslint-disable max-lines */
|
|
33
34
|
import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
|
|
34
35
|
import classNames from 'classnames';
|
|
35
|
-
import { isArray } from 'lodash';
|
|
36
|
+
import { isArray, isNil, isNull, isNumber } from 'lodash';
|
|
36
37
|
import { useModal } from '../../hooks/useModal';
|
|
37
38
|
import ContextMenu from '../ContextMenu';
|
|
38
39
|
import ScrollBar from '../ScrollBar';
|
|
39
40
|
import { DEFAULT_SCROLL_BAR_SIZE } from '../ScrollBar/ScrollBar';
|
|
40
|
-
import { checkIfContentIsCentered, generateBottomSheetClassName, generateClassNames, generateColor, generateFontFamilyStyle, generateIsCloseIconHidden, isMobilePlatform, } from '../../helpers';
|
|
41
|
-
import { COLORS, DRAGGABLE_KEY, EVENT_LISTENER_TYPES, MODAL_ICONS_PADDING_LEFT, PLATFORM } from '../../constants';
|
|
41
|
+
import { checkIfContentIsCentered, clickOutsideTheModal, generateBottomSheetClassName, generateClassNames, generateColor, generateFontFamilyStyle, generateIsCloseIconHidden, isAndroidPlatform, isIosPlatform, isMobilePlatform, } from '../../helpers';
|
|
42
|
+
import { BOTTOM_SHEET, BOTTOM_SHEET_SCROLL_POSITION, COLORS, DRAGGABLE_KEY, EVENT_LISTENER_TYPES, MODAL_ICONS_PADDING_LEFT, PLATFORM, SMARTAPP_MODAL_ID, } from '../../constants';
|
|
42
43
|
import { ReactComponent as CloseIcon } from '../../assets/icons/close-modal.svg';
|
|
43
44
|
import { ReactComponent as MoreIcon } from '../../assets/icons/more.svg';
|
|
44
45
|
import '../../styles/styles.scss';
|
|
45
46
|
var SCROLL_BAR_HEIGHT_WITH_PADDING = 'calc(100% - 20px)';
|
|
46
47
|
var MODAL_MARGIN_SIZE_WEB = 165;
|
|
47
48
|
var CONTENT_PADDING_TOP = 20;
|
|
48
|
-
var
|
|
49
|
+
var BOTTOM_SHEET_CONTENT_PADDING_TOP = 18;
|
|
49
50
|
var MODAL_MARGIN_SIZE_MOBILE = 136;
|
|
50
51
|
var POPUP_CLASS_NAME = 'popup';
|
|
51
52
|
var MIN_SCROLL_TOP = 5;
|
|
52
53
|
var MODAL_PADDING_RIGHT = 20;
|
|
53
54
|
var CONTAINER_EDGE_MARGIN = 4;
|
|
55
|
+
var FULL_HEIGHT_BOTTOM_SHEET_TOP_MARGIN = 24;
|
|
56
|
+
var FULL_HEIGHT_SCROLL_BAR_HEIGHT = 'auto';
|
|
57
|
+
export var DEFAULT_BOTTOM_SHEET_SCROLL_MOBILE_CONFIG = {
|
|
58
|
+
scrollTo: BOTTOM_SHEET_SCROLL_POSITION.bottom,
|
|
59
|
+
extraPaddingFocusedElement: 0,
|
|
60
|
+
topCursorEdge: 0,
|
|
61
|
+
upperVisibilityThreshold: 0,
|
|
62
|
+
shouldDoScrollToFocusedElement: true,
|
|
63
|
+
};
|
|
54
64
|
var TITLE_CLASS_NAMES = {
|
|
55
65
|
border: 'smartapp-modal__content--title__border',
|
|
56
66
|
ellipsis: 'smartapp-modal__content--title__ellipsis',
|
|
57
67
|
ellipsisContainer: 'smartapp-modal__content--title__ellipsis-container',
|
|
58
68
|
};
|
|
69
|
+
var checkIsBottomContentBorderVisible = function (_a) {
|
|
70
|
+
var scrollTop = _a.scrollTop, clientHeight = _a.clientHeight, scrollHeight = _a.scrollHeight;
|
|
71
|
+
return scrollTop + clientHeight < scrollHeight - 1;
|
|
72
|
+
};
|
|
73
|
+
var generateBottomSheetHeightConfig = function (_a) {
|
|
74
|
+
var bottomSheetProps = _a.bottomSheetProps, containerHeight = _a.containerHeight, shouldUseBottomSheet = _a.shouldUseBottomSheet;
|
|
75
|
+
var _b = bottomSheetProps || {}, bottomSheetHeight = _b.height, _c = _b.isFullHeightWithTopMargin, isFullHeightWithTopMargin = _c === void 0 ? false : _c;
|
|
76
|
+
var isBottomSheetHeightAvailable = isNumber(bottomSheetHeight) && bottomSheetHeight > 0;
|
|
77
|
+
var isFullHeightBottomSheet = shouldUseBottomSheet && !isBottomSheetHeightAvailable && isFullHeightWithTopMargin;
|
|
78
|
+
var scrollBarContainerHeight = isFullHeightBottomSheet ? FULL_HEIGHT_SCROLL_BAR_HEIGHT : containerHeight;
|
|
79
|
+
return { bottomSheetHeight: bottomSheetHeight, isFullHeightBottomSheet: isFullHeightBottomSheet, scrollBarContainerHeight: scrollBarContainerHeight };
|
|
80
|
+
};
|
|
59
81
|
var Modal = function (_a) {
|
|
60
|
-
var fontFamily = _a.fontFamily, isModalOpen = _a.isModalOpen, _b = _a.isClosableOutside, isClosableOutside = _b === void 0 ? true : _b, isCloseIconHidden = _a.isCloseIconHidden, _c = _a.isPopup, isPopup = _c === void 0 ? false : _c, _d = _a.isBottomSheet, isBottomSheet = _d === void 0 ? false : _d, _e = _a.isDisabledBottomSheet, isDisabledBottomSheet = _e === void 0 ? false : _e, _f = _a.isCloseButtonDisabled, isCloseButtonDisabled = _f === void 0 ? false : _f, _g = _a.isResetPaddingBottom, isResetPaddingBottom = _g === void 0 ? false : _g, _h = _a.isScrollBordersVisible, isScrollBordersVisible = _h === void 0 ? false : _h, _j = _a.
|
|
82
|
+
var fontFamily = _a.fontFamily, isModalOpen = _a.isModalOpen, _b = _a.isClosableOutside, isClosableOutside = _b === void 0 ? true : _b, isCloseIconHidden = _a.isCloseIconHidden, _c = _a.isPopup, isPopup = _c === void 0 ? false : _c, _d = _a.isBottomSheet, isBottomSheet = _d === void 0 ? false : _d, _e = _a.isDisabledBottomSheet, isDisabledBottomSheet = _e === void 0 ? false : _e, _f = _a.isCloseButtonDisabled, isCloseButtonDisabled = _f === void 0 ? false : _f, _g = _a.isResetPaddingBottom, isResetPaddingBottom = _g === void 0 ? false : _g, _h = _a.isScrollBordersVisible, isScrollBordersVisible = _h === void 0 ? false : _h, _j = _a.isDisableTitleCollapsing, isDisableTitleCollapsing = _j === void 0 ? false : _j, _k = _a.isBottomContentBorderShown, isBottomContentBorderShown = _k === void 0 ? false : _k, _l = _a.isNeedToScrollUp, isNeedToScrollUp = _l === void 0 ? false : _l, _m = _a.isDisablePopupDragging, isDisablePopupDragging = _m === void 0 ? false : _m, modalId = _a.modalId, contentId = _a.contentId, mobileContentId = _a.mobileContentId, outerModalRef = _a.modalRef, content = _a.content, bottomContent = _a.bottomContent, title = _a.title, titleIcons = _a.titleIcons, _o = _a.platform, platform = _o === void 0 ? PLATFORM.web : _o, popupClassName = _a.popupClassName, className = _a.className, titleClassName = _a.titleClassName, iconsClassName = _a.iconsClassName, popupStyles = _a.popupStyles, styles = _a.styles, titleStyles = _a.titleStyles, contentStyles = _a.contentStyles, scrollableContentStyles = _a.scrollableContentStyles, iconColor = _a.iconColor, backgroundColor = _a.backgroundColor, modalMaxHeight = _a.modalMaxHeight, bottomSheetProps = _a.bottomSheetProps, bottomSheetDetent = _a.bottomSheetDetent, bottomSheetStyles = _a.bottomSheetStyles, externalBottomSheetScrollContainer = _a.externalBottomSheetScrollContainer, contextMenuProps = _a.contextMenuProps, _p = _a.bottomSheetScrollMobileConfig, bottomSheetScrollMobileConfig = _p === void 0 ? DEFAULT_BOTTOM_SHEET_SCROLL_MOBILE_CONFIG : _p, handleChangeTitleBorderDisplayed = _a.handleChangeTitleBorderDisplayed, handleClickOutside = _a.handleClickOutside, handleCloseModal = _a.handleCloseModal, handleBottomSheetInitialized = _a.handleBottomSheetInitialized, externalHandleScroll = _a.onScroll;
|
|
61
83
|
var localModalRef = useRef(null);
|
|
62
84
|
var titleRef = useRef(null);
|
|
63
85
|
var titleTextElementRef = useRef(null);
|
|
64
|
-
var iconsRef = useRef(null);
|
|
65
86
|
var scrollableContentRef = useRef(null);
|
|
66
87
|
var contentRef = useRef(null);
|
|
67
88
|
var scrollerRef = useRef(null);
|
|
68
89
|
var bottomContentRef = useRef(null);
|
|
69
90
|
var scrollbarRef = useRef(null);
|
|
70
|
-
var
|
|
71
|
-
var
|
|
72
|
-
var
|
|
73
|
-
var
|
|
91
|
+
var isAndroidContainerHeightInitializedRef = useRef(false);
|
|
92
|
+
var androidContainerHeightContentIdRef = useRef(mobileContentId);
|
|
93
|
+
var elementRefResizeObserver = useRef(null);
|
|
94
|
+
var titleIconsRefResizeObserver = useRef(null);
|
|
95
|
+
var _q = useState(''), containerHeight = _q[0], setContainerHeight = _q[1];
|
|
96
|
+
var _r = useState(0), iconsWidth = _r[0], setIconsWidth = _r[1];
|
|
97
|
+
var _s = useState(false), isTitleBorderVisible = _s[0], setIsTitleBorderVisible = _s[1];
|
|
98
|
+
var _t = useState(false), isBottomContentBorderVisible = _t[0], setIsBottomContentBorderVisible = _t[1];
|
|
74
99
|
var modalRef = outerModalRef || localModalRef;
|
|
75
100
|
var background = generateColor(backgroundColor, COLORS.colorBgBlackoutTransparent);
|
|
76
101
|
var isScrollBordersAvailable = isPopup || isScrollBordersVisible;
|
|
77
102
|
var isTitleBorderDisplayed = isScrollBordersAvailable && isTitleBorderVisible;
|
|
78
|
-
var isBottomContentBorderDisplayed = isScrollBordersAvailable && isBottomContentBorderVisible;
|
|
103
|
+
var isBottomContentBorderDisplayed = (isScrollBordersAvailable && isBottomContentBorderVisible) || isBottomContentBorderShown;
|
|
104
|
+
var _u = bottomSheetScrollMobileConfig.shouldDoScrollToFocusedElement, shouldDoScrollToFocusedElement = _u === void 0 ? true : _u;
|
|
79
105
|
var popupOverlayStyle = __assign({ '--modal-background': background }, popupStyles);
|
|
80
|
-
var
|
|
106
|
+
var _v = useModal({
|
|
81
107
|
isModalOpen: isModalOpen,
|
|
82
|
-
platform: platform,
|
|
83
108
|
isDisabledBottomSheet: isDisabledBottomSheet,
|
|
109
|
+
isClosableOutside: isClosableOutside,
|
|
84
110
|
initialIsBottomSheet: isBottomSheet,
|
|
111
|
+
platform: platform,
|
|
85
112
|
modalRef: modalRef,
|
|
86
|
-
|
|
87
|
-
handleCloseModal: handleCloseModal,
|
|
113
|
+
scrollRef: externalBottomSheetScrollContainer || scrollerRef,
|
|
88
114
|
popupClassName: classNames('modal', popupClassName),
|
|
89
115
|
popupStyles: popupOverlayStyle,
|
|
90
|
-
bottomSheetStyles:
|
|
116
|
+
bottomSheetStyles: bottomSheetStyles,
|
|
91
117
|
bottomSheetProps: bottomSheetProps,
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
118
|
+
bottomSheetDetent: bottomSheetDetent,
|
|
119
|
+
bottomSheetScrollMobileConfig: bottomSheetScrollMobileConfig,
|
|
120
|
+
handleCloseModal: handleCloseModal,
|
|
121
|
+
handleClickOutside: handleClickOutside,
|
|
122
|
+
handleBottomSheetInitialized: handleBottomSheetInitialized,
|
|
123
|
+
}), shouldUseBottomSheet = _v.shouldUseBottomSheet, renderModal = _v.renderModal, offsetScrollY = _v.offsetScrollY, offsetScrollYKey = _v.offsetScrollYKey, bottomKeyboardPadding = _v.bottomKeyboardPadding;
|
|
124
|
+
var isIos = isIosPlatform(platform);
|
|
125
|
+
var isAndroid = isAndroidPlatform(platform);
|
|
126
|
+
var _w = generateBottomSheetHeightConfig({
|
|
127
|
+
bottomSheetProps: bottomSheetProps,
|
|
128
|
+
containerHeight: containerHeight,
|
|
129
|
+
shouldUseBottomSheet: shouldUseBottomSheet,
|
|
130
|
+
}), bottomSheetHeight = _w.bottomSheetHeight, isFullHeightBottomSheet = _w.isFullHeightBottomSheet, scrollBarContainerHeight = _w.scrollBarContainerHeight;
|
|
131
|
+
var findElementWithText = function (root, isButtonExcluded) {
|
|
132
|
+
if (isButtonExcluded === void 0) { isButtonExcluded = false; }
|
|
133
|
+
if (isNull(root))
|
|
134
|
+
return null;
|
|
95
135
|
var stack = [root];
|
|
96
136
|
while (stack.length) {
|
|
97
137
|
// take the first element from the stack
|
|
98
138
|
var node = stack.shift();
|
|
99
139
|
if (!node)
|
|
100
140
|
continue;
|
|
101
|
-
var childNodes = node.childNodes, children = node.children;
|
|
141
|
+
var childNodes = node.childNodes, children = node.children, classList = node.classList;
|
|
142
|
+
if (isButtonExcluded && classList.contains('smartapp-button'))
|
|
143
|
+
continue;
|
|
102
144
|
// check if the current node has any direct text nodes
|
|
103
145
|
// if it does, return this node immediately
|
|
104
146
|
if (Array.from(childNodes).some(function (_a) {
|
|
@@ -112,108 +154,199 @@ var Modal = function (_a) {
|
|
|
112
154
|
}
|
|
113
155
|
return null;
|
|
114
156
|
};
|
|
115
|
-
var generateAdditionalClassName = function () {
|
|
157
|
+
var generateAdditionalClassName = useCallback(function () {
|
|
116
158
|
var bottomSheetClassName = generateBottomSheetClassName(platform, shouldUseBottomSheet);
|
|
117
159
|
return isPopup ? __spreadArray(__spreadArray([], bottomSheetClassName, true), [POPUP_CLASS_NAME], false) : bottomSheetClassName;
|
|
118
|
-
};
|
|
160
|
+
}, [isPopup, platform, shouldUseBottomSheet]);
|
|
119
161
|
var isCloseIconInvisible = generateIsCloseIconHidden(platform, isCloseIconHidden);
|
|
162
|
+
var isCloseIconLocatedOnTheLeft = !isCloseIconInvisible && shouldUseBottomSheet;
|
|
163
|
+
var areThereTitleIcons = (!isCloseIconLocatedOnTheLeft && !isCloseIconInvisible) || !isNil(titleIcons);
|
|
120
164
|
var modalMargins = isMobilePlatform(platform) ? MODAL_MARGIN_SIZE_MOBILE : 2 * MODAL_MARGIN_SIZE_WEB;
|
|
121
165
|
var MAX_MODAL_HEIGHT_WEB = modalMaxHeight || window.innerHeight - modalMargins;
|
|
166
|
+
var isMobileModalWithoutContent = isMobilePlatform(platform) && !shouldUseBottomSheet && isNull(findElementWithText(contentRef.current, true));
|
|
122
167
|
var handleMouseDown = function (event) {
|
|
123
168
|
var target = event.target;
|
|
124
169
|
if (target instanceof HTMLElement || target instanceof SVGElement) {
|
|
125
170
|
target.closest('.smartapp-custom-select__dropdown-indicator') && event.stopPropagation();
|
|
126
171
|
}
|
|
127
172
|
};
|
|
128
|
-
var handleSetContainerHeight = function (elementRef, maxModalHeight) {
|
|
173
|
+
var handleSetContainerHeight = useCallback(function (elementRef, maxModalHeight) {
|
|
129
174
|
var _a, _b;
|
|
130
175
|
if (!elementRef)
|
|
131
|
-
return;
|
|
176
|
+
return false;
|
|
132
177
|
var height = elementRef.getBoundingClientRect().height;
|
|
133
178
|
var titleHeight = ((_a = titleRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height) || 0;
|
|
134
179
|
var bottomContentHeight = ((_b = bottomContentRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().height) || 0;
|
|
135
|
-
var
|
|
136
|
-
var
|
|
180
|
+
var contentAdditionalClassName = generateAdditionalClassName();
|
|
181
|
+
var contentPaddingTop = contentAdditionalClassName.includes(BOTTOM_SHEET) ? BOTTOM_SHEET_CONTENT_PADDING_TOP : CONTENT_PADDING_TOP;
|
|
182
|
+
var defaultContentHeight = maxModalHeight - titleHeight - contentPaddingTop;
|
|
137
183
|
var maxContentHeightValue = defaultContentHeight - bottomContentHeight;
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
184
|
+
var nextContainerHeight = isFullHeightBottomSheet ? maxContentHeightValue : Math.min(height, maxContentHeightValue);
|
|
185
|
+
// Если пересчет на андроиде выдает 0, оставляем как есть
|
|
186
|
+
if (isAndroid && nextContainerHeight <= 0)
|
|
187
|
+
return false;
|
|
188
|
+
setContainerHeight("".concat(nextContainerHeight, "px"));
|
|
189
|
+
return true;
|
|
190
|
+
}, [generateAdditionalClassName, isAndroid, isFullHeightBottomSheet]);
|
|
191
|
+
var handleSetContainerHeightWeb = useCallback(function (contentRef) {
|
|
192
|
+
var maxModalHeight = isFullHeightBottomSheet ? window.innerHeight - FULL_HEIGHT_BOTTOM_SHEET_TOP_MARGIN : MAX_MODAL_HEIGHT_WEB;
|
|
193
|
+
return handleSetContainerHeight(contentRef, maxModalHeight);
|
|
194
|
+
},
|
|
141
195
|
//eslint-disable-next-line
|
|
142
|
-
[contentId, modalMaxHeight]);
|
|
196
|
+
[contentId, modalMaxHeight, isFullHeightBottomSheet]);
|
|
143
197
|
var handleSetContainerHeightMobile = useCallback(function (elementRef) {
|
|
144
|
-
var
|
|
198
|
+
var isAndroidContentChanged = isAndroid && androidContainerHeightContentIdRef.current !== mobileContentId;
|
|
199
|
+
if (isAndroidContentChanged)
|
|
200
|
+
isAndroidContainerHeightInitializedRef.current = false;
|
|
201
|
+
// Для Android BottomSheet повторный замер запрещаем после первого успешного расчета.
|
|
202
|
+
if (isAndroid && isAndroidContainerHeightInitializedRef.current)
|
|
203
|
+
return;
|
|
204
|
+
var visualViewport = window.visualViewport, innerHeight = window.innerHeight;
|
|
205
|
+
var maxFullHeightBottomSheetHeight = ((visualViewport === null || visualViewport === void 0 ? void 0 : visualViewport.height) || innerHeight) - FULL_HEIGHT_BOTTOM_SHEET_TOP_MARGIN;
|
|
206
|
+
var MAX_MODAL_HEIGHT_MOBILE = isFullHeightBottomSheet
|
|
207
|
+
? maxFullHeightBottomSheetHeight
|
|
208
|
+
: modalMaxHeight || ((visualViewport === null || visualViewport === void 0 ? void 0 : visualViewport.height) || innerHeight) - modalMargins;
|
|
145
209
|
contentRef.current = elementRef;
|
|
146
|
-
handleSetContainerHeight(elementRef, MAX_MODAL_HEIGHT_MOBILE);
|
|
210
|
+
var isContainerHeightUpdated = handleSetContainerHeight(elementRef, MAX_MODAL_HEIGHT_MOBILE);
|
|
211
|
+
if (isAndroid && isContainerHeightUpdated) {
|
|
212
|
+
isAndroidContainerHeightInitializedRef.current = true;
|
|
213
|
+
androidContainerHeightContentIdRef.current = mobileContentId;
|
|
214
|
+
}
|
|
147
215
|
},
|
|
148
|
-
|
|
149
|
-
[
|
|
150
|
-
|
|
151
|
-
|
|
216
|
+
/* eslint-disable-next-line */
|
|
217
|
+
[isAndroid, mobileContentId, handleSetContainerHeight, isFullHeightBottomSheet]);
|
|
218
|
+
useLayoutEffect(function () {
|
|
219
|
+
if (!isModalOpen || isFullHeightBottomSheet)
|
|
220
|
+
return;
|
|
221
|
+
if (isAndroid)
|
|
222
|
+
isAndroidContainerHeightInitializedRef.current = false;
|
|
223
|
+
if (isMobilePlatform(platform)) {
|
|
224
|
+
handleSetContainerHeightMobile(contentRef.current);
|
|
225
|
+
return;
|
|
226
|
+
}
|
|
227
|
+
handleSetContainerHeightWeb(contentRef.current);
|
|
228
|
+
}, [
|
|
229
|
+
bottomSheetHeight,
|
|
230
|
+
handleSetContainerHeightMobile,
|
|
231
|
+
handleSetContainerHeightWeb,
|
|
232
|
+
isAndroid,
|
|
233
|
+
isFullHeightBottomSheet,
|
|
234
|
+
isModalOpen,
|
|
235
|
+
platform,
|
|
236
|
+
shouldUseBottomSheet,
|
|
237
|
+
]);
|
|
238
|
+
var changeIsTitleBorderVisible = function (scrollTop) {
|
|
152
239
|
var isTitleBorderShown = scrollTop > MIN_SCROLL_TOP;
|
|
153
240
|
setIsTitleBorderVisible(isTitleBorderShown);
|
|
154
241
|
handleChangeTitleBorderDisplayed === null || handleChangeTitleBorderDisplayed === void 0 ? void 0 : handleChangeTitleBorderDisplayed(isTitleBorderShown);
|
|
155
|
-
setIsBottomContentBorderVisible(scrollTop + clientHeight < contentScrollHeight - 1);
|
|
156
242
|
};
|
|
157
|
-
var
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
243
|
+
var handleScroll = function (event) {
|
|
244
|
+
var scrollHeight = event.contentScrollHeight, clientHeight = event.clientHeight, scrollTop = event.scrollTop;
|
|
245
|
+
changeIsTitleBorderVisible(scrollTop);
|
|
246
|
+
setIsBottomContentBorderVisible(checkIsBottomContentBorderVisible({ scrollTop: scrollTop, clientHeight: clientHeight, scrollHeight: scrollHeight }));
|
|
247
|
+
externalHandleScroll === null || externalHandleScroll === void 0 ? void 0 : externalHandleScroll(event);
|
|
248
|
+
};
|
|
249
|
+
var handleScrollerRef = function (element) {
|
|
250
|
+
if (elementRefResizeObserver.current)
|
|
251
|
+
elementRefResizeObserver.current.disconnect();
|
|
252
|
+
scrollerRef.current = element;
|
|
253
|
+
if (element) {
|
|
254
|
+
var firstElementChild = element.firstElementChild;
|
|
255
|
+
var observer = new ResizeObserver(function () {
|
|
256
|
+
var scrollTop = element.scrollTop, scrollHeight = element.scrollHeight, clientHeight = element.clientHeight;
|
|
257
|
+
changeIsTitleBorderVisible(scrollTop);
|
|
258
|
+
if (bottomContent && clientHeight > 0)
|
|
259
|
+
setIsBottomContentBorderVisible(checkIsBottomContentBorderVisible({ scrollTop: scrollTop, clientHeight: clientHeight, scrollHeight: scrollHeight }));
|
|
260
|
+
});
|
|
261
|
+
if (firstElementChild)
|
|
262
|
+
observer.observe(firstElementChild);
|
|
263
|
+
elementRefResizeObserver.current = observer;
|
|
163
264
|
}
|
|
164
265
|
};
|
|
266
|
+
var handleTitleIconsRef = function (element) {
|
|
267
|
+
if (titleIconsRefResizeObserver.current)
|
|
268
|
+
titleIconsRefResizeObserver.current.disconnect();
|
|
269
|
+
if (element) {
|
|
270
|
+
var observer = new ResizeObserver(function () {
|
|
271
|
+
var width = element.getBoundingClientRect().width;
|
|
272
|
+
setIconsWidth(width);
|
|
273
|
+
});
|
|
274
|
+
observer.observe(element);
|
|
275
|
+
titleIconsRefResizeObserver.current = observer;
|
|
276
|
+
}
|
|
277
|
+
};
|
|
278
|
+
var handleTitleRef = useCallback(function (element) {
|
|
279
|
+
var titleTextElementRefCurrent = titleTextElementRef.current;
|
|
280
|
+
titleRef.current = element;
|
|
281
|
+
if (isNull(titleTextElementRefCurrent) || !(element === null || element === void 0 ? void 0 : element.contains(titleTextElementRefCurrent)))
|
|
282
|
+
titleTextElementRef.current = findElementWithText(element);
|
|
283
|
+
},
|
|
284
|
+
// eslint-disable-next-line
|
|
285
|
+
[modalId]);
|
|
286
|
+
useEffect(function () {
|
|
287
|
+
return function () {
|
|
288
|
+
if (elementRefResizeObserver.current)
|
|
289
|
+
elementRefResizeObserver.current.disconnect();
|
|
290
|
+
if (titleIconsRefResizeObserver.current)
|
|
291
|
+
titleIconsRefResizeObserver.current.disconnect();
|
|
292
|
+
};
|
|
293
|
+
}, []);
|
|
165
294
|
useEffect(function () {
|
|
166
295
|
var handleWindowResize = function () { return handleSetContainerHeightMobile(contentRef.current); };
|
|
167
|
-
|
|
296
|
+
isIos && window.addEventListener(EVENT_LISTENER_TYPES.resize, handleWindowResize);
|
|
168
297
|
return function () { return window.removeEventListener(EVENT_LISTENER_TYPES.resize, handleWindowResize); };
|
|
169
|
-
}, [handleSetContainerHeightMobile,
|
|
298
|
+
}, [handleSetContainerHeightMobile, isIos]);
|
|
299
|
+
useEffect(function () {
|
|
300
|
+
if (!isAndroid || !isModalOpen)
|
|
301
|
+
return;
|
|
302
|
+
isAndroidContainerHeightInitializedRef.current = false;
|
|
303
|
+
handleSetContainerHeightMobile(contentRef.current);
|
|
304
|
+
}, [modalId, mobileContentId, isAndroid, isModalOpen, handleSetContainerHeightMobile]);
|
|
170
305
|
useEffect(function () {
|
|
171
306
|
var checkIfClickedOutside = function (_a) {
|
|
172
307
|
var target = _a.target;
|
|
173
308
|
var modalRefCurrent = modalRef.current;
|
|
174
309
|
if (isModalOpen && isClosableOutside && modalRefCurrent && !modalRefCurrent.contains(target))
|
|
175
|
-
handleCloseModal
|
|
310
|
+
clickOutsideTheModal(handleCloseModal, handleClickOutside);
|
|
176
311
|
};
|
|
177
|
-
!isPopup && (document === null || document === void 0 ? void 0 : document.addEventListener(EVENT_LISTENER_TYPES.click, checkIfClickedOutside, true));
|
|
312
|
+
!isPopup && !shouldUseBottomSheet && (document === null || document === void 0 ? void 0 : document.addEventListener(EVENT_LISTENER_TYPES.click, checkIfClickedOutside, true));
|
|
178
313
|
return function () { return document === null || document === void 0 ? void 0 : document.removeEventListener(EVENT_LISTENER_TYPES.click, checkIfClickedOutside, true); };
|
|
179
|
-
}, [
|
|
180
|
-
useLayoutEffect(function () {
|
|
181
|
-
var resizeObserver = new ResizeObserver(function () {
|
|
182
|
-
var _a;
|
|
183
|
-
var _b = (((_a = iconsRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || {}).width, width = _b === void 0 ? 0 : _b;
|
|
184
|
-
setIconsWidth(width);
|
|
185
|
-
});
|
|
186
|
-
requestAnimationFrame(function () {
|
|
187
|
-
var iconsRefCurrent = iconsRef.current;
|
|
188
|
-
iconsRefCurrent && resizeObserver.observe(iconsRefCurrent);
|
|
189
|
-
});
|
|
190
|
-
return function () { return resizeObserver.disconnect(); };
|
|
191
|
-
}, []);
|
|
314
|
+
}, [handleClickOutside, handleCloseModal, isClosableOutside, isModalOpen, isPopup, modalRef, shouldUseBottomSheet]);
|
|
192
315
|
useEffect(function () {
|
|
193
316
|
var _a;
|
|
194
|
-
|
|
317
|
+
if (isDisableTitleCollapsing)
|
|
318
|
+
return;
|
|
195
319
|
var titleTextElementRefCurrent = titleTextElementRef.current;
|
|
196
|
-
if (!titleTextElementRefCurrent && titleRefCurrent) {
|
|
197
|
-
var titleElementWithText = findTitleElementWithText(titleRefCurrent);
|
|
198
|
-
titleTextElementRef.current = titleElementWithText;
|
|
199
|
-
titleTextElementRefCurrent = titleElementWithText;
|
|
200
|
-
}
|
|
201
320
|
var parentClassList = (_a = titleTextElementRefCurrent === null || titleTextElementRefCurrent === void 0 ? void 0 : titleTextElementRefCurrent.parentElement) === null || _a === void 0 ? void 0 : _a.classList;
|
|
202
321
|
titleTextElementRefCurrent === null || titleTextElementRefCurrent === void 0 ? void 0 : titleTextElementRefCurrent.classList.toggle(TITLE_CLASS_NAMES.ellipsis, isTitleBorderDisplayed);
|
|
203
322
|
!(parentClassList === null || parentClassList === void 0 ? void 0 : parentClassList.contains(TITLE_CLASS_NAMES.border)) && (parentClassList === null || parentClassList === void 0 ? void 0 : parentClassList.toggle(TITLE_CLASS_NAMES.ellipsisContainer, isTitleBorderDisplayed));
|
|
204
|
-
}, [isTitleBorderDisplayed]);
|
|
323
|
+
}, [isDisableTitleCollapsing, isTitleBorderDisplayed]);
|
|
205
324
|
useEffect(function () {
|
|
206
325
|
var scrollbarRefCurrent = scrollbarRef.current;
|
|
207
326
|
if (isNeedToScrollUp && scrollbarRefCurrent)
|
|
208
327
|
scrollbarRefCurrent.scrollTop = 0;
|
|
209
328
|
}, [isNeedToScrollUp]);
|
|
329
|
+
useEffect(function () {
|
|
330
|
+
var scrollbarRefCurrent = scrollbarRef.current;
|
|
331
|
+
if (scrollbarRefCurrent && offsetScrollY)
|
|
332
|
+
scrollbarRefCurrent.scrollTop += offsetScrollY;
|
|
333
|
+
// The "offsetScrollYKey" is required in the useEffect dependency array
|
|
334
|
+
// because sometimes we have to scroll to the same "offsetScrollY" position multiple times consecutively
|
|
335
|
+
}, [offsetScrollY, offsetScrollYKey]);
|
|
210
336
|
var renderTitle = function () {
|
|
211
|
-
|
|
337
|
+
var isPaddingIncreased = shouldUseBottomSheet && isCloseIconLocatedOnTheLeft;
|
|
338
|
+
return (title && (_jsxs("div", __assign({ className: classNames({ 'smartapp-modal__content--title__border': isTitleBorderDisplayed }) }, { children: [isPopup && (_jsx("div", { className: classNames("smartapp-modal__content--title__draggable-zone ".concat(DRAGGABLE_KEY), { cd: isDisablePopupDragging }) })), areThereTitleIcons && renderCloseIconSpace({ elementRef: titleRef }), _jsx("div", __assign({ ref: handleTitleRef, className: classNames('smartapp-modal__content--title', titleClassName, {
|
|
339
|
+
'smartapp-modal__content--title__reduced': isMobileModalWithoutContent,
|
|
340
|
+
'smartapp-modal__content--title__bottom-sheet': shouldUseBottomSheet,
|
|
341
|
+
'smartapp-modal__content--title__bottom-sheet--increased-pt': isPaddingIncreased && (!isTitleBorderDisplayed || isDisableTitleCollapsing),
|
|
342
|
+
'smartapp-modal__content--title__bottom-sheet--increased-pl': isPaddingIncreased && isTitleBorderDisplayed && !isDisableTitleCollapsing,
|
|
343
|
+
'smartapp-modal__content--title__with-title-icons': areThereTitleIcons,
|
|
344
|
+
}), style: titleStyles }, { children: title }))] }))));
|
|
212
345
|
};
|
|
213
346
|
var renderCloseIcon = function () {
|
|
214
347
|
return !isCloseIconInvisible && (_jsx("div", __assign({ onClick: !isCloseButtonDisabled ? handleCloseModal : function () { }, className: classNames('smartapp-modal__content--close-icon', {
|
|
215
348
|
'smartapp-modal__content--close-icon__disabled': isCloseButtonDisabled,
|
|
216
|
-
'smartapp-modal__content--close-
|
|
349
|
+
'smartapp-modal__content--close-icon__located-on-left': isCloseIconLocatedOnTheLeft,
|
|
217
350
|
}) }, { children: _jsx(CloseIcon, { style: { color: generateColor(iconColor) } }) })));
|
|
218
351
|
};
|
|
219
352
|
var renderCloseIconSpace = function (_a) {
|
|
@@ -238,21 +371,23 @@ var Modal = function (_a) {
|
|
|
238
371
|
var renderBottomContent = function () {
|
|
239
372
|
return bottomContent && (_jsx("div", __assign({ ref: bottomContentRef, className: classNames('smartapp-modal__content--bottom', { 'smartapp-modal__content--bottom__border': isBottomContentBorderDisplayed }) }, { children: bottomContent })));
|
|
240
373
|
};
|
|
241
|
-
var modalContent = (_jsx("div", __assign({ ref: modalRef, className: classNames('smartapp-modal', {
|
|
374
|
+
var modalContent = (_jsx("div", __assign({ ref: modalRef, id: SMARTAPP_MODAL_ID, className: classNames('smartapp-modal', {
|
|
242
375
|
'smartapp-modal__bottom-sheet': shouldUseBottomSheet,
|
|
376
|
+
'smartapp-modal__bottom-sheet--full-height': isFullHeightBottomSheet,
|
|
243
377
|
'smartapp-modal__popup': isPopup,
|
|
244
378
|
}, className), style: __assign(__assign({}, generateFontFamilyStyle(fontFamily)), styles), onMouseDown: handleMouseDown }, { children: _jsxs("div", __assign({ className: generateClassNames({
|
|
245
379
|
className: 'smartapp-modal__content',
|
|
246
380
|
delimiter: '--',
|
|
247
381
|
additionalClassName: generateAdditionalClassName(),
|
|
248
|
-
}), style: contentStyles }, { children: [
|
|
382
|
+
}), style: contentStyles }, { children: [isCloseIconLocatedOnTheLeft && renderCloseIcon(), renderTitle(), _jsxs("div", __assign({ ref: handleTitleIconsRef, className: classNames('smartapp-modal__content--icons', iconsClassName, {
|
|
383
|
+
'smartapp-modal__content--icons__bottom-sheet': shouldUseBottomSheet,
|
|
384
|
+
}) }, { children: [titleIcons && renderTitleIcons(), renderContextMenuIcon(), !isCloseIconLocatedOnTheLeft && renderCloseIcon()] })), _jsx(ScrollBar, { scrollbarRef: scrollbarRef, contentId: modalId, containerEdgeMargin: CONTAINER_EDGE_MARGIN, scrollerProps: { elementRef: handleScrollerRef }, content: _jsxs("div", __assign({ ref: isMobilePlatform(platform) ? handleSetContainerHeightMobile : handleSetContainerHeightWeb, className: classNames('smartapp-modal__content--scrollable', {
|
|
385
|
+
'smartapp-modal__content--scrollable__bottom-sheet': shouldUseBottomSheet,
|
|
249
386
|
'smartapp-modal__content--scrollable__pb': !bottomContent && !isResetPaddingBottom,
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
isContent: true,
|
|
255
|
-
}), _jsx("div", __assign({ ref: scrollableContentRef }, { children: content }))] })), containerHeight: containerHeight, trackYHeight: bottomContent ? DEFAULT_SCROLL_BAR_SIZE : SCROLL_BAR_HEIGHT_WITH_PADDING, handleScroll: handleScroll }), renderBottomContent()] })) })));
|
|
387
|
+
'smartapp-modal__content--scrollable__bottom-sheet--pb': shouldUseBottomSheet && !bottomContent && !isResetPaddingBottom,
|
|
388
|
+
}), style: scrollableContentStyles }, { children: [!title && areThereTitleIcons && renderCloseIconSpace({ elementRef: scrollableContentRef, isContent: true }), _jsx("div", __assign({ style: {
|
|
389
|
+
paddingBottom: shouldDoScrollToFocusedElement ? bottomKeyboardPadding : undefined,
|
|
390
|
+
}, ref: scrollableContentRef }, { children: content }))] })), containerHeight: scrollBarContainerHeight, trackYHeight: bottomContent ? DEFAULT_SCROLL_BAR_SIZE : SCROLL_BAR_HEIGHT_WITH_PADDING, handleScroll: handleScroll }), renderBottomContent()] })) })));
|
|
256
391
|
return isPopup ? modalContent : renderModal(modalContent);
|
|
257
392
|
};
|
|
258
393
|
export default Modal;
|