@expressms/smartapp-ui 2.8.0-alpha.2 → 2.8.0
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/button-loader.svg +1 -1
- package/build/main/assets/storybook/index.d.ts +6 -1
- package/build/main/assets/storybook/index.js +6 -1
- package/build/main/assets/storybook/index.js.map +1 -1
- package/build/main/constants/constants.d.ts +1 -1
- package/build/main/constants/constants.js +1 -1
- package/build/main/hooks/useModal.d.ts +5 -4
- package/build/main/hooks/useModal.js +4 -4
- package/build/main/hooks/useModal.js.map +1 -1
- package/build/main/styles/styles.scss +2 -2
- package/build/main//321/201omponents/Avatar/Avatar.d.ts +1 -1
- package/build/main//321/201omponents/Avatar/Avatar.js +7 -1
- package/build/main//321/201omponents/Avatar/Avatar.js.map +1 -1
- package/build/main//321/201omponents/Avatar/types.d.ts +2 -1
- package/build/main//321/201omponents/Avatar/types.js.map +1 -1
- package/build/main//321/201omponents/ConfirmationModal/types.d.ts +1 -1
- package/build/main//321/201omponents/Modal/Modal.d.ts +1 -1
- package/build/main//321/201omponents/Modal/Modal.js +13 -9
- package/build/main//321/201omponents/Modal/Modal.js.map +1 -1
- package/build/main//321/201omponents/Modal/types.d.ts +4 -3
- package/build/main//321/201omponents/Skeleton/Skeleton.js +12 -5
- package/build/main//321/201omponents/Skeleton/Skeleton.js.map +1 -1
- package/build/main//321/201omponents/UserDropdown/MenuList/MenuList.d.ts +1 -0
- package/build/main//321/201omponents/UserDropdown/MenuList/MenuList.js +10 -5
- package/build/main//321/201omponents/UserDropdown/MenuList/MenuList.js.map +1 -1
- package/build/main//321/201omponents/UserDropdown/UserDropdown.d.ts +1 -1
- package/build/main//321/201omponents/UserDropdown/UserDropdown.js +52 -24
- package/build/main//321/201omponents/UserDropdown/UserDropdown.js.map +1 -1
- package/build/main//321/201omponents/UserDropdown/selectStyles.js +7 -4
- package/build/main//321/201omponents/UserDropdown/selectStyles.js.map +1 -1
- package/build/main//321/201omponents/UserDropdown/types.d.ts +1 -0
- package/build/main//321/201omponents/index.d.ts +0 -1
- package/build/main//321/201omponents/index.js +0 -1
- package/build/main//321/201omponents/index.js.map +1 -1
- package/package.json +2 -3
- package/build/main//321/201omponents/DraggablePopup/DraggablePopup.d.ts +0 -4
- package/build/main//321/201omponents/DraggablePopup/DraggablePopup.js +0 -83
- package/build/main//321/201omponents/DraggablePopup/DraggablePopup.js.map +0 -1
- package/build/main//321/201omponents/DraggablePopup/index.d.ts +0 -1
- package/build/main//321/201omponents/DraggablePopup/index.js +0 -2
- package/build/main//321/201omponents/DraggablePopup/index.js.map +0 -1
- package/build/main//321/201omponents/DraggablePopup/types.d.ts +0 -14
- package/build/main//321/201omponents/DraggablePopup/types.js +0 -2
- package/build/main//321/201omponents/DraggablePopup/types.js.map +0 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { IAvatarProps } from './types';
|
|
2
2
|
import '../../styles/styles.scss';
|
|
3
|
-
declare const Avatar: ({ theme, className, styles, avatarRef, isSelected, isHighlighted, isInactive, isSpam, isCrown, isEye, size, username, initials, avatar, counter, outlineDefaultBackground, outlineDarkBackground, onClick, onMouseDown, }: IAvatarProps) => import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
declare const Avatar: ({ theme, className, styles, avatarRef, isSelected, isHighlighted, isInactive, isSpam, isCrown, isEye, size, username, initials, avatar, counter, icon, outlineDefaultBackground, outlineDarkBackground, onClick, onMouseDown, }: IAvatarProps) => import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
export default Avatar;
|
|
@@ -30,13 +30,14 @@ var PERCENTS;
|
|
|
30
30
|
PERCENTS[PERCENTS["pct_50"] = 50] = "pct_50";
|
|
31
31
|
PERCENTS[PERCENTS["pct_57"] = 57] = "pct_57";
|
|
32
32
|
PERCENTS[PERCENTS["pct_60"] = 60] = "pct_60";
|
|
33
|
+
PERCENTS[PERCENTS["pct_62_5"] = 62.5] = "pct_62_5";
|
|
33
34
|
PERCENTS[PERCENTS["pct_65"] = 65] = "pct_65";
|
|
34
35
|
PERCENTS[PERCENTS["pct_75"] = 75] = "pct_75";
|
|
35
36
|
})(PERCENTS || (PERCENTS = {}));
|
|
36
37
|
var AVATAR_OPACITY = 0.5;
|
|
37
38
|
var USER_INITIALS_OPACITY = 0.3;
|
|
38
39
|
var Avatar = function (_a) {
|
|
39
|
-
var _b = _a.theme, theme = _b === void 0 ? THEME.default : _b, className = _a.className, styles = _a.styles, avatarRef = _a.avatarRef, isSelected = _a.isSelected, isHighlighted = _a.isHighlighted, isInactive = _a.isInactive, isSpam = _a.isSpam, isCrown = _a.isCrown, isEye = _a.isEye, _c = _a.size, size = _c === void 0 ? 44 : _c, _d = _a.username, username = _d === void 0 ? '' : _d, initials = _a.initials, avatar = _a.avatar, _e = _a.counter, counter = _e === void 0 ? 0 : _e, _f = _a.outlineDefaultBackground, outlineDefaultBackground = _f === void 0 ? COLORS.white : _f, _g = _a.outlineDarkBackground, outlineDarkBackground = _g === void 0 ? COLORS.brightBlack : _g, _h = _a.onClick, onClick = _h === void 0 ? function () { return undefined; } : _h, onMouseDown = _a.onMouseDown;
|
|
40
|
+
var _b = _a.theme, theme = _b === void 0 ? THEME.default : _b, className = _a.className, styles = _a.styles, avatarRef = _a.avatarRef, isSelected = _a.isSelected, isHighlighted = _a.isHighlighted, isInactive = _a.isInactive, isSpam = _a.isSpam, isCrown = _a.isCrown, isEye = _a.isEye, _c = _a.size, size = _c === void 0 ? 44 : _c, _d = _a.username, username = _d === void 0 ? '' : _d, initials = _a.initials, avatar = _a.avatar, _e = _a.counter, counter = _e === void 0 ? 0 : _e, icon = _a.icon, _f = _a.outlineDefaultBackground, outlineDefaultBackground = _f === void 0 ? COLORS.white : _f, _g = _a.outlineDarkBackground, outlineDarkBackground = _g === void 0 ? COLORS.brightBlack : _g, _h = _a.onClick, onClick = _h === void 0 ? function () { return undefined; } : _h, onMouseDown = _a.onMouseDown;
|
|
40
41
|
var inactiveOpacity = avatar ? AVATAR_OPACITY : USER_INITIALS_OPACITY;
|
|
41
42
|
var outlineBackground = isDarkTheme(theme) ? outlineDarkBackground : outlineDefaultBackground;
|
|
42
43
|
var outlineWidth = calculatePercentageOfValue({ value: size, percentage: PERCENTS.pct_5, shouldBeRounded: false });
|
|
@@ -72,6 +73,11 @@ var Avatar = function (_a) {
|
|
|
72
73
|
var infoSize = calculatePercentageOfValue({ value: size, percentage: PERCENTS.pct_60 });
|
|
73
74
|
return _jsx(InfoIcon, { width: infoSize, height: infoSize });
|
|
74
75
|
}
|
|
76
|
+
if (icon) {
|
|
77
|
+
var iconSize = calculatePercentageOfValue({ value: size, percentage: PERCENTS.pct_62_5 });
|
|
78
|
+
var iconSizeInPx = "".concat(iconSize, "px");
|
|
79
|
+
return (_jsx("div", __assign({ className: "smartapp-avatar__content--icon", style: { width: iconSizeInPx, height: iconSizeInPx } }, { children: icon })));
|
|
80
|
+
}
|
|
75
81
|
return avatar ? _jsx("img", { src: avatar, alt: "avatar" }) : renderUserInitials();
|
|
76
82
|
};
|
|
77
83
|
var renderCounter = function () {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../../src/сomponents/Avatar/Avatar.tsx"],"names":[],"mappings":";;;;;;;;;;;;AACA,OAAO,UAAU,MAAM,YAAY,CAAA;AACnC,OAAO,EAAE,0BAA0B,EAAE,cAAc,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AACxG,OAAO,EAAE,eAAe,EAAgB,MAAM,SAAS,CAAA;AACvD,OAAO,EAAE,MAAM,EAAE,oCAAoC,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA;AACrF,OAAO,EAAE,cAAc,IAAI,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AACxE,OAAO,EAAE,cAAc,IAAI,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AACxE,OAAO,EAAE,cAAc,IAAI,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAC1E,OAAO,EAAE,cAAc,IAAI,WAAW,EAAE,MAAM,gCAAgC,CAAA;AAC9E,OAAO,0BAA0B,CAAA;AAEjC,IAAK,
|
|
1
|
+
{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../../src/сomponents/Avatar/Avatar.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { RefObject } from 'react';
|
|
1
|
+
import { ReactNode, RefObject } from 'react';
|
|
2
2
|
import { IThemeProps, TStyles } from '../../constants';
|
|
3
3
|
export interface IAvatarProps extends IThemeProps {
|
|
4
4
|
avatarRef?: RefObject<HTMLDivElement | null>;
|
|
@@ -15,6 +15,7 @@ export interface IAvatarProps extends IThemeProps {
|
|
|
15
15
|
initials?: string;
|
|
16
16
|
avatar?: string | null;
|
|
17
17
|
counter?: number;
|
|
18
|
+
icon?: ReactNode;
|
|
18
19
|
outlineDefaultBackground?: string;
|
|
19
20
|
outlineDarkBackground?: string;
|
|
20
21
|
onClick?: () => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/сomponents/Avatar/types.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/сomponents/Avatar/types.ts"],"names":[],"mappings":"AAyBA,MAAM,CAAN,IAAY,eAMX;AAND,WAAY,eAAe;IACzB,kCAAe,CAAA;IACf,iCAAc,CAAA;IACd,mCAAgB,CAAA;IAChB,gCAAa,CAAA;IACb,oCAAiB,CAAA;AACnB,CAAC,EANW,eAAe,KAAf,eAAe,QAM1B"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
|
-
import { BottomSheetProps } from 'react-spring-bottom-sheet';
|
|
2
|
+
import { BottomSheetProps } from 'alex.chus-react-spring-bottom-sheet';
|
|
3
3
|
import { ICommonProps, TStyles } from '../../constants';
|
|
4
4
|
export interface IConfirmationModalProps extends ICommonProps {
|
|
5
5
|
isModalOpen: boolean;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { IModalProps } from './types';
|
|
2
2
|
import '../../styles/styles.scss';
|
|
3
|
-
declare const Modal: ({ isModalOpen, isClosableOutside, isCloseIconHidden, modalId, content, bottomContent, handleCloseModal, title, platform, popupClassName, className, popupStyles, styles, titleStyles, contentStyles, iconColor, backgroundColor, isBottomSheet, isDisabledBottomSheet, bottomSheetProps,
|
|
3
|
+
declare const Modal: ({ isModalOpen, isClosableOutside, isCloseIconHidden, modalId, content, bottomContent, handleCloseModal, title, platform, popupClassName, className, popupStyles, styles, titleStyles, contentStyles, iconColor, backgroundColor, isBottomSheet, isDisabledBottomSheet, bottomSheetProps, isCloseButtonDisabled, externalBottomSheetScrollContainer, }: IModalProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
4
4
|
export default Modal;
|
|
@@ -25,13 +25,14 @@ var CONTENT_PADDING_TOP = 20;
|
|
|
25
25
|
var MODAL_TITLE_MARGIN_BOTTOM = 16;
|
|
26
26
|
var MODAL_MARGIN_SIZE_MOBILE = 136;
|
|
27
27
|
var Modal = function (_a) {
|
|
28
|
-
var isModalOpen = _a.isModalOpen, _b = _a.isClosableOutside, isClosableOutside = _b === void 0 ? true : _b, isCloseIconHidden = _a.isCloseIconHidden, modalId = _a.modalId, content = _a.content, bottomContent = _a.bottomContent, handleCloseModal = _a.handleCloseModal, title = _a.title, _c = _a.platform, platform = _c === void 0 ? PLATFORM.web : _c, popupClassName = _a.popupClassName, className = _a.className, popupStyles = _a.popupStyles, styles = _a.styles, titleStyles = _a.titleStyles, contentStyles = _a.contentStyles, iconColor = _a.iconColor, backgroundColor = _a.backgroundColor, _d = _a.isBottomSheet, isBottomSheet = _d === void 0 ? false : _d, _e = _a.isDisabledBottomSheet, isDisabledBottomSheet = _e === void 0 ? false : _e, bottomSheetProps = _a.bottomSheetProps,
|
|
28
|
+
var isModalOpen = _a.isModalOpen, _b = _a.isClosableOutside, isClosableOutside = _b === void 0 ? true : _b, isCloseIconHidden = _a.isCloseIconHidden, modalId = _a.modalId, content = _a.content, bottomContent = _a.bottomContent, handleCloseModal = _a.handleCloseModal, title = _a.title, _c = _a.platform, platform = _c === void 0 ? PLATFORM.web : _c, popupClassName = _a.popupClassName, className = _a.className, popupStyles = _a.popupStyles, styles = _a.styles, titleStyles = _a.titleStyles, contentStyles = _a.contentStyles, iconColor = _a.iconColor, backgroundColor = _a.backgroundColor, _d = _a.isBottomSheet, isBottomSheet = _d === void 0 ? false : _d, _e = _a.isDisabledBottomSheet, isDisabledBottomSheet = _e === void 0 ? false : _e, bottomSheetProps = _a.bottomSheetProps, _f = _a.isCloseButtonDisabled, isCloseButtonDisabled = _f === void 0 ? false : _f, externalBottomSheetScrollContainer = _a.externalBottomSheetScrollContainer;
|
|
29
29
|
var ref = useRef(null);
|
|
30
30
|
var titleRef = useRef(null);
|
|
31
31
|
var scrollableContentRef = useRef(null);
|
|
32
|
+
var scrollerRef = useRef(null);
|
|
32
33
|
var bottomContentRef = useRef(null);
|
|
33
|
-
var
|
|
34
|
-
var
|
|
34
|
+
var _g = useState(''), containerHeight = _g[0], setContainerHeight = _g[1];
|
|
35
|
+
var _h = useModal({
|
|
35
36
|
isModalOpen: isModalOpen,
|
|
36
37
|
platform: platform,
|
|
37
38
|
isDisabledBottomSheet: isDisabledBottomSheet,
|
|
@@ -42,11 +43,12 @@ var Modal = function (_a) {
|
|
|
42
43
|
popupClassName: classNames('modal', popupClassName),
|
|
43
44
|
popupStyles: popupStyles,
|
|
44
45
|
bottomSheetProps: bottomSheetProps,
|
|
45
|
-
|
|
46
|
+
scrollRef: externalBottomSheetScrollContainer || scrollerRef,
|
|
47
|
+
}), shouldUseBottomSheet = _h.shouldUseBottomSheet, renderModal = _h.renderModal;
|
|
46
48
|
var additionalClassName = generateBottomSheetClassName(platform, shouldUseBottomSheet);
|
|
47
49
|
var isCloseIconInvisible = generateIsCloseIconHidden(platform, isCloseIconHidden);
|
|
48
50
|
var MAX_MODAL_HEIGHT = window.innerHeight - (isMobilePlatform(platform) ? MODAL_MARGIN_SIZE_MOBILE : 2 * MODAL_MARGIN_SIZE_WEB);
|
|
49
|
-
var handleMouseDown = function (event) { return
|
|
51
|
+
var handleMouseDown = function (event) { return event.stopPropagation(); };
|
|
50
52
|
var handleSetContainerHeight = function (contentRef) {
|
|
51
53
|
var _a, _b;
|
|
52
54
|
if (!contentRef)
|
|
@@ -68,11 +70,11 @@ var Modal = function (_a) {
|
|
|
68
70
|
handleCloseModal();
|
|
69
71
|
}
|
|
70
72
|
};
|
|
71
|
-
|
|
73
|
+
document === null || document === void 0 ? void 0 : document.addEventListener('click', checkIfClickedOutside, true);
|
|
72
74
|
return function () {
|
|
73
75
|
document === null || document === void 0 ? void 0 : document.removeEventListener('click', checkIfClickedOutside, true);
|
|
74
76
|
};
|
|
75
|
-
}, [isModalOpen, isClosableOutside, handleCloseModal
|
|
77
|
+
}, [isModalOpen, isClosableOutside, handleCloseModal]);
|
|
76
78
|
var renderCloseIconSpace = function (_a) {
|
|
77
79
|
var elementRef = _a.elementRef, _b = _a.isLarge, isLarge = _b === void 0 ? false : _b, _c = _a.isContent, isContent = _c === void 0 ? false : _c;
|
|
78
80
|
return (_jsx("div", { className: classNames('close-icon-space', {
|
|
@@ -81,8 +83,10 @@ var Modal = function (_a) {
|
|
|
81
83
|
'close-icon-space__centered': checkIfContentIsCentered(elementRef),
|
|
82
84
|
}) }));
|
|
83
85
|
};
|
|
84
|
-
var modalContent = (_jsx("div", __assign({ ref: ref, className: classNames('smartapp-modal', { 'smartapp-modal__bottom-sheet': shouldUseBottomSheet }, className), style: styles, onMouseDown: handleMouseDown }, { children: _jsxs("div", __assign({ className: generateClassNames({ className: 'smartapp-modal__content', delimiter: '--', additionalClassName: additionalClassName }), style: contentStyles }, { children: [title && (_jsxs("div", { children: [!isCloseIconInvisible && renderCloseIconSpace({ elementRef: titleRef, isLarge: true }), _jsx("p", __assign({ ref: titleRef, className: "smartapp-modal__content--title", style: titleStyles }, { children: title }))] })), !isCloseIconInvisible && (_jsx("div", __assign({ onClick:
|
|
85
|
-
|
|
86
|
+
var modalContent = (_jsx("div", __assign({ ref: ref, className: classNames('smartapp-modal', { 'smartapp-modal__bottom-sheet': shouldUseBottomSheet }, className), style: styles, onMouseDown: handleMouseDown }, { children: _jsxs("div", __assign({ className: generateClassNames({ className: 'smartapp-modal__content', delimiter: '--', additionalClassName: additionalClassName }), style: contentStyles }, { children: [title && (_jsxs("div", { children: [!isCloseIconInvisible && renderCloseIconSpace({ elementRef: titleRef, isLarge: true }), _jsx("p", __assign({ ref: titleRef, className: "smartapp-modal__content--title", style: titleStyles }, { children: title }))] })), !isCloseIconInvisible && (_jsx("div", __assign({ onClick: !isCloseButtonDisabled ? handleCloseModal : function () { }, className: classNames('smartapp-modal__content--close-icon', {
|
|
87
|
+
'smartapp-modal__content--close-icon__disabled': isCloseButtonDisabled,
|
|
88
|
+
}) }, { children: _jsx(CloseIcon, { style: { color: generateColor(iconColor) } }) }))), _jsx(ScrollBar, { contentId: modalId, scrollerProps: { elementRef: function (el) { return (scrollerRef.current = el); } }, content: _jsxs("div", __assign({ ref: handleSetContainerHeight, className: classNames('smartapp-modal__content--pr', { 'smartapp-modal__content--pb': !bottomContent }) }, { children: [!title && !isCloseIconInvisible && renderCloseIconSpace({ elementRef: scrollableContentRef, isContent: true }), _jsx("div", __assign({ ref: scrollableContentRef }, { children: content }))] })), containerHeight: containerHeight, trackHeight: bottomContent ? DEFAULT_SCROLL_BAR_HEIGHT : SCROLL_BAR_HEIGHT_WITH_PADDING }), bottomContent && (_jsx("div", __assign({ ref: bottomContentRef, className: classNames('smartapp-modal__content--bottom', 'smartapp-modal__content--pr', 'smartapp-modal__content--pb') }, { children: bottomContent })))] })) })));
|
|
89
|
+
return renderModal(modalContent);
|
|
86
90
|
};
|
|
87
91
|
export default Modal;
|
|
88
92
|
//# sourceMappingURL=Modal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../../src/сomponents/Modal/Modal.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAc,EAAa,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACrE,OAAO,UAAU,MAAM,YAAY,CAAA;AACnC,OAAO,SAAS,MAAM,cAAc,CAAA;AACpC,OAAO,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAA;AAClE,OAAO,EAAE,cAAc,IAAI,SAAS,EAAE,MAAM,qCAAqC,CAAA;AACjF,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAC1C,OAAO,EACL,wBAAwB,EACxB,kBAAkB,EAClB,aAAa,EACb,yBAAyB,EACzB,4BAA4B,EAC5B,gBAAgB,GACjB,MAAM,eAAe,CAAA;AAEtB,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAC/C,OAAO,0BAA0B,CAAA;AAEjC,IAAM,8BAA8B,GAAG,mBAAmB,CAAA;AAC1D,IAAM,qBAAqB,GAAG,GAAG,CAAA;AACjC,IAAM,mBAAmB,GAAG,EAAE,CAAA;AAC9B,IAAM,yBAAyB,GAAG,EAAE,CAAA;AACpC,IAAM,wBAAwB,GAAG,GAAG,CAAA;AAIpC,IAAM,KAAK,GAAG,UAAC,
|
|
1
|
+
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../../src/сomponents/Modal/Modal.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { ReactElement } from 'react';
|
|
2
|
-
import { BottomSheetProps } from 'react-spring-bottom-sheet';
|
|
1
|
+
import { ReactElement, RefObject } from 'react';
|
|
2
|
+
import { BottomSheetProps } from 'alex.chus-react-spring-bottom-sheet';
|
|
3
3
|
import { ICommonProps, TStyles } from '../../constants';
|
|
4
4
|
export interface IModalProps extends ICommonProps {
|
|
5
5
|
isModalOpen: boolean;
|
|
@@ -21,5 +21,6 @@ export interface IModalProps extends ICommonProps {
|
|
|
21
21
|
isBottomSheet?: boolean;
|
|
22
22
|
isDisabledBottomSheet?: boolean;
|
|
23
23
|
bottomSheetProps?: Partial<BottomSheetProps>;
|
|
24
|
-
|
|
24
|
+
isCloseButtonDisabled?: boolean;
|
|
25
|
+
externalBottomSheetScrollContainer?: RefObject<HTMLDivElement | null>;
|
|
25
26
|
}
|
|
@@ -6,12 +6,15 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
6
6
|
import { useEffect, useRef, useState } from 'react';
|
|
7
7
|
import styled, { css, keyframes } from 'styled-components';
|
|
8
8
|
import { COLORS, THEME } from '../../constants';
|
|
9
|
-
import { generateColor, isDarkTheme } from '../../helpers';
|
|
9
|
+
import { generateColor, isDarkTheme as checkIsDarkTheme } from '../../helpers';
|
|
10
10
|
import '../../styles/styles.scss';
|
|
11
11
|
// animation gradient size
|
|
12
|
-
var
|
|
13
|
-
var
|
|
14
|
-
var
|
|
12
|
+
var startEdgeGradientSizeDefault = '8.26%';
|
|
13
|
+
var startEdgeGradientSizeDark = '0%';
|
|
14
|
+
var centerGradientSizeDefault = '39.24%';
|
|
15
|
+
var centerGradientSizeDark = '46.36%';
|
|
16
|
+
var endEdgeGradientSizeDefault = '70.22%';
|
|
17
|
+
var endEdgeGradientSizeDark = '100%';
|
|
15
18
|
export var Skeleton = function (_a) {
|
|
16
19
|
var className = _a.className, styles = _a.styles, baseColor = _a.baseColor, width = _a.width, height = _a.height, _b = _a.borderRadius, borderRadius = _b === void 0 ? 8 : _b, circle = _a.circle, _c = _a.theme, theme = _c === void 0 ? THEME.default : _c,
|
|
17
20
|
// needed to determine the offset, the left border must coincide with the left border of the skeletons (without padding in container)
|
|
@@ -26,6 +29,7 @@ export var Skeleton = function (_a) {
|
|
|
26
29
|
initialOffset = _e === void 0 ? -230 : _e;
|
|
27
30
|
var skeletonRef = useRef(null);
|
|
28
31
|
var _f = useState({ container: { left: 0, width: 0 }, item: { left: 0, width: 0 } }), position = _f[0], setPosition = _f[1];
|
|
32
|
+
var isDarkTheme = checkIsDarkTheme(theme);
|
|
29
33
|
//after mount set offset sizes
|
|
30
34
|
useEffect(function () {
|
|
31
35
|
var containerRefCurrent = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current;
|
|
@@ -45,8 +49,11 @@ export var Skeleton = function (_a) {
|
|
|
45
49
|
return { startOffset: startOffset, finalOffset: finalOffset };
|
|
46
50
|
};
|
|
47
51
|
var skeletonBackgroundColor = generateColor(baseColor, 'var(--color-input-primary)');
|
|
48
|
-
var skeletonGradientCenter = isDarkTheme
|
|
52
|
+
var skeletonGradientCenter = isDarkTheme ? COLORS.skeletonDarkGradientCenter : COLORS.skeletonGradientCenter;
|
|
49
53
|
var skeletonGradientEdge = COLORS.skeletonGradientEdge;
|
|
54
|
+
var startEdgeGradientSize = isDarkTheme ? startEdgeGradientSizeDark : startEdgeGradientSizeDefault;
|
|
55
|
+
var centerGradientSize = isDarkTheme ? centerGradientSizeDark : centerGradientSizeDefault;
|
|
56
|
+
var endEdgeGradientSize = isDarkTheme ? endEdgeGradientSizeDark : endEdgeGradientSizeDefault;
|
|
50
57
|
var skeletonCSS = {
|
|
51
58
|
width: width,
|
|
52
59
|
height: circle ? width : height,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../../../src/сomponents/Skeleton/Skeleton.tsx"],"names":[],"mappings":";;;;;AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC1D,OAAO,MAAM,EAAE,EAAE,GAAG,EAAW,SAAS,EAAE,MAAM,mBAAmB,CAAA;AACnE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;
|
|
1
|
+
{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../../../src/сomponents/Skeleton/Skeleton.tsx"],"names":[],"mappings":"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"}
|
|
@@ -14,12 +14,15 @@ import { useEffect, useRef } from 'react';
|
|
|
14
14
|
import { components } from 'react-select';
|
|
15
15
|
import { FixedSizeList } from 'react-window';
|
|
16
16
|
import { AutoSizer } from 'react-virtualized';
|
|
17
|
+
import classNames from 'classnames';
|
|
17
18
|
import LoadingMessage from '../LoadingMessage/LoadingMessage';
|
|
19
|
+
import '../../../styles/styles.scss';
|
|
18
20
|
var MIN_INPUT_SYMBOLS = 3;
|
|
19
21
|
var SKELETON_ROWS_COUNT = 3;
|
|
20
|
-
var MENU_ITEM_HEIGHT =
|
|
21
|
-
var MAX_MENU_HEIGHT =
|
|
22
|
+
var MENU_ITEM_HEIGHT = 54;
|
|
23
|
+
var MAX_MENU_HEIGHT = 292;
|
|
22
24
|
var LIST_OVER_SCAN_COUNT = 5;
|
|
25
|
+
var PADDING_SIZE = 12;
|
|
23
26
|
var MenuList = function (props) {
|
|
24
27
|
var _a;
|
|
25
28
|
var appTheme = props.appTheme, selectRef = props.selectRef, scrollFromTop = props.scrollFromTop, hasNextPage = props.hasNextPage, isLoading = props.isLoading, isUserTyping = props.isUserTyping, isNextPageLoading = props.isNextPageLoading, onLoadNextPage = props.onLoadNextPage, children = props.children;
|
|
@@ -51,7 +54,7 @@ var MenuList = function (props) {
|
|
|
51
54
|
if (!Array.isArray(children))
|
|
52
55
|
return _jsx(_Fragment, { children: children });
|
|
53
56
|
var childrenLength = children.length;
|
|
54
|
-
var listChildrenHeight = childrenLength * MENU_ITEM_HEIGHT;
|
|
57
|
+
var listChildrenHeight = childrenLength * MENU_ITEM_HEIGHT + PADDING_SIZE;
|
|
55
58
|
var listHeight = listChildrenHeight > MAX_MENU_HEIGHT ? MAX_MENU_HEIGHT : listChildrenHeight;
|
|
56
59
|
var itemCount = hasNextPage ? childrenLength + SKELETON_ROWS_COUNT : childrenLength;
|
|
57
60
|
var isNextPageSkeletonsVisible = hasNextPage && !isNextPageLoading && !isLoading && !isUserTyping;
|
|
@@ -62,14 +65,16 @@ var MenuList = function (props) {
|
|
|
62
65
|
var index = _a.index, style = _a.style;
|
|
63
66
|
var isLastRow = index === childrenLength - 1;
|
|
64
67
|
var rowRef = isNextPageSkeletonsVisible ? lastElement : null;
|
|
65
|
-
return (_jsxs("div", __assign({ ref: rowRef, style: style, role: children[index] ? 'option' : ''
|
|
68
|
+
return (_jsxs("div", __assign({ ref: rowRef, style: style, role: children[index] ? 'option' : '',
|
|
69
|
+
// добавляем класс для последнего элемента, чтобы скрыть разделитель
|
|
70
|
+
className: classNames({ 'smartapp-menu-list__item--last': isLastRow }) }, { children: [children[index], isLastRow && renderSkeletons()] }), index));
|
|
66
71
|
};
|
|
67
72
|
return (_jsx(components.MenuList, __assign({}, props, { children: _jsx(AutoSizer, __assign({ disableHeight: true }, { children: function (_a) {
|
|
68
73
|
var width = _a.width;
|
|
69
74
|
return (_jsx(FixedSizeList, __assign({ ref: virtualizationListRef, height: listHeight, itemCount: itemCount, itemSize: MENU_ITEM_HEIGHT, width: width, overscanCount: LIST_OVER_SCAN_COUNT, onScroll: function (_a) {
|
|
70
75
|
var scrollOffset = _a.scrollOffset;
|
|
71
76
|
return (scrollFromTop.current = scrollOffset);
|
|
72
|
-
}, initialScrollOffset: scrollFromTop.current }, { children: rowRenderer })));
|
|
77
|
+
}, initialScrollOffset: scrollFromTop.current, className: "smartapp-menu-list" }, { children: rowRenderer })));
|
|
73
78
|
} })) })));
|
|
74
79
|
};
|
|
75
80
|
export default MenuList;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuList.js","sourceRoot":"","sources":["../../../../../src/сomponents/UserDropdown/MenuList/MenuList.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,aAAa,EAA2B,MAAM,cAAc,CAAA;AACrE,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAC7C,OAAO,cAAc,MAAM,kCAAkC,CAAA;
|
|
1
|
+
{"version":3,"file":"MenuList.js","sourceRoot":"","sources":["../../../../../src/сomponents/UserDropdown/MenuList/MenuList.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,aAAa,EAA2B,MAAM,cAAc,CAAA;AACrE,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAC7C,OAAO,UAAU,MAAM,YAAY,CAAA;AACnC,OAAO,cAAc,MAAM,kCAAkC,CAAA;AAE7D,OAAO,6BAA6B,CAAA;AAEpC,IAAM,iBAAiB,GAAG,CAAC,CAAA;AAC3B,IAAM,mBAAmB,GAAG,CAAC,CAAA;AAC7B,IAAM,gBAAgB,GAAG,EAAE,CAAA;AAC3B,IAAM,eAAe,GAAG,GAAG,CAAA;AAC3B,IAAM,oBAAoB,GAAG,CAAC,CAAA;AAC9B,IAAM,YAAY,GAAG,EAAE,CAAA;AAMvB,IAAM,QAAQ,GAAG,UAAC,KAAqB;;IAC7B,IAAA,QAAQ,GAAkH,KAAK,SAAvH,EAAE,SAAS,GAAuG,KAAK,UAA5G,EAAE,aAAa,GAAwF,KAAK,cAA7F,EAAE,WAAW,GAA2E,KAAK,YAAhF,EAAE,SAAS,GAAgE,KAAK,UAArE,EAAE,YAAY,GAAkD,KAAK,aAAvD,EAAE,iBAAiB,GAA+B,KAAK,kBAApC,EAAE,cAAc,GAAe,KAAK,eAApB,EAAE,QAAQ,GAAK,KAAK,SAAV,CAAU;IACvI,IAAM,gBAAgB,GAAG,SAAS,CAAC,OAAO,CAAA;IAC1C,IAAM,UAAU,GAAG,MAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,KAAK,0CAAE,UAAU,CAAA;IACtD,IAAM,gBAAgB,GAAG,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,MAAM,CAAA;IAE3C,IAAM,qBAAqB,GAAG,MAAM,CAAgC,IAAI,CAAC,CAAA;IACzE,IAAM,WAAW,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAA;IACvD,IAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,oBAAoB,CAAC,UAAC,OAAO,IAAK,OAAA,OAAO,CAAC,CAAC,CAAC,CAAC,cAAc,IAAI,kBAAkB,EAAE,EAAjD,CAAiD,CAAC,CAAC,CAAA;IAEjH,SAAS,CAAC;QACR,IAAM,kBAAkB,GAAG,WAAW,CAAC,OAAO,CAAA;QAC9C,IAAM,eAAe,GAAG,QAAQ,CAAC,OAAO,CAAA;QAExC,kBAAkB,IAAI,eAAe,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAA;QAEjE,OAAO;YACL,kBAAkB,IAAI,eAAe,CAAC,SAAS,CAAC,kBAAkB,CAAC,CAAA;QACrE,CAAC,CAAA;QACD,2BAA2B;IAC7B,CAAC,EAAE,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,CAAA;IAEzB,IAAM,kBAAkB,GAAG;QACzB,cAAc,CAAC,UAAU,CAAC,CAAA;QAE1B,IAAI,qBAAqB,CAAC,OAAO,EAAE;YAEtB,IAAA,YAAY,GACnB,qBAAqB,CAAC,OAAO,mBADV,CACU;YAEjC,aAAa,CAAC,OAAO,GAAG,YAAY,GAAG,gBAAgB,GAAG,mBAAmB,CAAA;SAC9E;IACH,CAAC,CAAA;IAED,IAAI,UAAU,CAAC,MAAM,GAAG,iBAAiB;QAAE,OAAO,IAAI,CAAA;IACtD,0EAA0E;IAC1E,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC;QAAE,OAAO,4BAAG,QAAQ,GAAI,CAAA;IAEpD,IAAM,cAAc,GAAG,QAAQ,CAAC,MAAM,CAAA;IACtC,IAAM,kBAAkB,GAAG,cAAc,GAAG,gBAAgB,GAAG,YAAY,CAAA;IAC3E,IAAM,UAAU,GAAG,kBAAkB,GAAG,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,kBAAkB,CAAA;IAC9F,IAAM,SAAS,GAAG,WAAW,CAAC,CAAC,CAAC,cAAc,GAAG,mBAAmB,CAAC,CAAC,CAAC,cAAc,CAAA;IACrF,IAAM,0BAA0B,GAAG,WAAW,IAAI,CAAC,iBAAiB,IAAI,CAAC,SAAS,IAAI,CAAC,YAAY,CAAA;IACnG,IAAM,6BAA6B,GAAG,iBAAiB,IAAI,SAAS,IAAI,CAAC,YAAY,IAAI,gBAAgB,IAAI,iBAAiB,CAAC,CAAA;IAC/H,IAAM,kBAAkB,GAAG,0BAA0B,IAAI,6BAA6B,CAAA;IAEtF,IAAM,eAAe,GAAG,cAAM,OAAA,kBAAkB,IAAI,KAAC,cAAc,IAAC,KAAK,EAAE,QAAQ,EAAE,iBAAiB,EAAE,mBAAmB,GAAI,EAAjG,CAAiG,CAAA;IAE/H,IAAM,WAAW,GAAG,UAAC,EAAyC;YAAvC,KAAK,WAAA,EAAE,KAAK,WAAA;QACjC,IAAM,SAAS,GAAG,KAAK,KAAK,cAAc,GAAG,CAAC,CAAA;QAC9C,IAAM,MAAM,GAAG,0BAA0B,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAA;QAE9D,OAAO,CACL,wBAEE,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;YACrC,oEAAoE;YACpE,SAAS,EAAE,UAAU,CAAC,EAAE,gCAAgC,EAAE,SAAS,EAAE,CAAC,iBAErE,QAAQ,CAAC,KAAK,CAAC,EACf,SAAS,IAAI,eAAe,EAAE,MAR1B,KAAK,CASN,CACP,CAAA;IACH,CAAC,CAAA;IAED,OAAO,CACL,KAAC,UAAU,CAAC,QAAQ,eAAK,KAAK,cAC5B,KAAC,SAAS,aAAC,aAAa,sBACrB,UAAC,EAAS;oBAAP,KAAK,WAAA;gBAAO,OAAA,CACd,KAAC,aAAa,aACZ,GAAG,EAAE,qBAAqB,EAC1B,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,gBAAgB,EAC1B,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,oBAAoB,EACnC,QAAQ,EAAE,UAAC,EAAgB;4BAAd,YAAY,kBAAA;wBAAO,OAAA,CAAC,aAAa,CAAC,OAAO,GAAG,YAAY,CAAC;oBAAtC,CAAsC,EACtE,mBAAmB,EAAE,aAAa,CAAC,OAAO,EAC1C,SAAS,EAAC,oBAAoB,gBAE7B,WAAW,IACE,CACjB;YAde,CAcf,IACS,IACQ,CACvB,CAAA;AACH,CAAC,CAAA;AAED,eAAe,QAAQ,CAAA"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { IUserDropdownProps } from './types';
|
|
2
2
|
import '../../styles/styles.scss';
|
|
3
3
|
export declare const EMAIL_FIELD = "email";
|
|
4
|
-
declare const UserDropdown: ({ theme, platform, isDisabled, isLoading, isChipsVisible, isChipsCollapsable, isMenuCloseOnSelect, isFilteringDisabled, hasNextPage, isNextPageLoading, language, layoutType, title, mask, placeholder, hint, noOptionsMessage, maxMembersCount, fillType, menuPosition, containerClassName, containerStyles, selectedEntries, corporateEntries, myContactsEntries, onInputChange, onChange, onMenuOpen, onMenuClose, onLoadNextPage, }: IUserDropdownProps) => import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
declare const UserDropdown: ({ theme, platform, isDisabled, isLoading, isChipsVisible, isChipsCollapsable, isMenuCloseOnSelect, isFilteringDisabled, hasNextPage, isNextPageLoading, language, layoutType, title, mask, placeholder, hint, noOptionsMessage, maxMembersCount, fillType, menuPosition, autoFocus, containerClassName, containerStyles, selectedEntries, corporateEntries, myContactsEntries, onInputChange, onChange, onMenuOpen, onMenuClose, onLoadNextPage, }: IUserDropdownProps) => import("react/jsx-runtime").JSX.Element;
|
|
5
5
|
export default UserDropdown;
|
|
@@ -38,13 +38,22 @@ import { DEFAULT_INPUT_PADDING, ENTER_KEY, FILL_TYPE, INPUT_COUNTER_TIMEOUT, LAN
|
|
|
38
38
|
import selectStyles from './selectStyles';
|
|
39
39
|
import '../../styles/styles.scss';
|
|
40
40
|
var MIN_INPUT_SYMBOLS = 3;
|
|
41
|
-
export var EMAIL_FIELD = 'email';
|
|
42
41
|
var THREE_DIGIT_NUMBER_WIDTH = 48;
|
|
43
42
|
var TWO_DIGIT_NUMBER_WIDTH = 40;
|
|
44
43
|
var SINGLE_DIGIT_NUMBER_WIDTH = 32;
|
|
45
44
|
var INPUT_SPACE_WIDTH = 46;
|
|
46
45
|
var GAP = 8;
|
|
47
46
|
var USER_TYPING_TIMEOUT = 1000;
|
|
47
|
+
export var EMAIL_FIELD = 'email';
|
|
48
|
+
var MENU_ACTIONS;
|
|
49
|
+
(function (MENU_ACTIONS) {
|
|
50
|
+
MENU_ACTIONS["close"] = "menu-close";
|
|
51
|
+
})(MENU_ACTIONS || (MENU_ACTIONS = {}));
|
|
52
|
+
var INPUT_ACTIONS;
|
|
53
|
+
(function (INPUT_ACTIONS) {
|
|
54
|
+
INPUT_ACTIONS["change"] = "input-change";
|
|
55
|
+
INPUT_ACTIONS["blur"] = "input-blur";
|
|
56
|
+
})(INPUT_ACTIONS || (INPUT_ACTIONS = {}));
|
|
48
57
|
var EXCLUDED_FIELDS;
|
|
49
58
|
(function (EXCLUDED_FIELDS) {
|
|
50
59
|
EXCLUDED_FIELDS["value"] = "value";
|
|
@@ -66,23 +75,28 @@ var EXCLUDED_FIELDS;
|
|
|
66
75
|
var COMMON_FIELDS_TO_OMIT = Object.keys(omit(EXCLUDED_FIELDS, [EXCLUDED_FIELDS.language, EXCLUDED_FIELDS.isMyContacts, EXCLUDED_FIELDS.isEnteredByUser, EXCLUDED_FIELDS.isError]));
|
|
67
76
|
var Input = function (props) { return _jsx(components.Input, __assign({}, props, { enterkeyhint: "done" })); };
|
|
68
77
|
var UserDropdown = function (_a) {
|
|
69
|
-
var _b = _a.theme, theme = _b === void 0 ? THEME.default : _b, _c = _a.platform, platform = _c === void 0 ? PLATFORM.web : _c, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isLoading, isLoading = _e === void 0 ? false : _e, _f = _a.isChipsVisible, isChipsVisible = _f === void 0 ? true : _f, _g = _a.isChipsCollapsable, isChipsCollapsable = _g === void 0 ? false : _g, _h = _a.isMenuCloseOnSelect, isMenuCloseOnSelect = _h === void 0 ? true : _h, _j = _a.isFilteringDisabled, isFilteringDisabled = _j === void 0 ? false : _j, _k = _a.hasNextPage, hasNextPage = _k === void 0 ? false : _k, _l = _a.isNextPageLoading, isNextPageLoading = _l === void 0 ? false : _l, _m = _a.language, language = _m === void 0 ? LANGUAGES.ru : _m, _o = _a.layoutType, layoutType = _o === void 0 ? LAYOUT_TYPE.minimal : _o, title = _a.title, mask = _a.mask, placeholder = _a.placeholder, hint = _a.hint, noOptionsMessage = _a.noOptionsMessage, maxMembersCount = _a.maxMembersCount, _p = _a.fillType, fillType = _p === void 0 ? FILL_TYPE.primary : _p, _q = _a.menuPosition, menuPosition = _q === void 0 ? MENU_POSITIONS.top : _q, containerClassName = _a.containerClassName, containerStyles = _a.containerStyles,
|
|
70
|
-
var
|
|
71
|
-
var
|
|
72
|
-
var
|
|
73
|
-
var
|
|
74
|
-
var
|
|
75
|
-
var
|
|
76
|
-
var
|
|
77
|
-
var
|
|
78
|
-
var
|
|
79
|
-
var
|
|
78
|
+
var _b = _a.theme, theme = _b === void 0 ? THEME.default : _b, _c = _a.platform, platform = _c === void 0 ? PLATFORM.web : _c, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isLoading, isLoading = _e === void 0 ? false : _e, _f = _a.isChipsVisible, isChipsVisible = _f === void 0 ? true : _f, _g = _a.isChipsCollapsable, isChipsCollapsable = _g === void 0 ? false : _g, _h = _a.isMenuCloseOnSelect, isMenuCloseOnSelect = _h === void 0 ? true : _h, _j = _a.isFilteringDisabled, isFilteringDisabled = _j === void 0 ? false : _j, _k = _a.hasNextPage, hasNextPage = _k === void 0 ? false : _k, _l = _a.isNextPageLoading, isNextPageLoading = _l === void 0 ? false : _l, _m = _a.language, language = _m === void 0 ? LANGUAGES.ru : _m, _o = _a.layoutType, layoutType = _o === void 0 ? LAYOUT_TYPE.minimal : _o, title = _a.title, mask = _a.mask, placeholder = _a.placeholder, hint = _a.hint, noOptionsMessage = _a.noOptionsMessage, maxMembersCount = _a.maxMembersCount, _p = _a.fillType, fillType = _p === void 0 ? FILL_TYPE.primary : _p, _q = _a.menuPosition, menuPosition = _q === void 0 ? MENU_POSITIONS.top : _q, _r = _a.autoFocus, autoFocus = _r === void 0 ? false : _r, containerClassName = _a.containerClassName, containerStyles = _a.containerStyles, _s = _a.selectedEntries, selectedEntries = _s === void 0 ? [] : _s, corporateEntries = _a.corporateEntries, myContactsEntries = _a.myContactsEntries, onInputChange = _a.onInputChange, onChange = _a.onChange, onMenuOpen = _a.onMenuOpen, onMenuClose = _a.onMenuClose, onLoadNextPage = _a.onLoadNextPage;
|
|
79
|
+
var _t = useState(''), userDropdownId = _t[0], setUserDropdownId = _t[1];
|
|
80
|
+
var _u = useState([]), selectedUsers = _u[0], setSelectedUsers = _u[1];
|
|
81
|
+
var _v = useState(null), timeoutId = _v[0], setTimeoutId = _v[1];
|
|
82
|
+
var _w = useState(''), paddingLeft = _w[0], setPaddingLeft = _w[1];
|
|
83
|
+
var _x = useState(0), maskWidth = _x[0], setMaskWidth = _x[1];
|
|
84
|
+
var _y = useState(false), isError = _y[0], setIsError = _y[1];
|
|
85
|
+
var _z = useState(true), isSearchable = _z[0], setIsSearchable = _z[1];
|
|
86
|
+
var _0 = useState(false), isUserTyping = _0[0], setIsUserTyping = _0[1];
|
|
87
|
+
var _1 = useState(null), modalData = _1[0], setModalData = _1[1];
|
|
88
|
+
var _2 = useState(''), chipLabelWithMaxWidth = _2[0], setChipLabelWithMaxWidth = _2[1];
|
|
89
|
+
var _3 = useState(''), inputValue = _3[0], setInputValue = _3[1];
|
|
80
90
|
var isInputFocused = useRef(false);
|
|
81
91
|
var selectRef = useRef(null);
|
|
82
92
|
var maskRef = useRef(null);
|
|
83
93
|
var menuScrollFromTop = useRef(0);
|
|
84
94
|
var collapsableChipsCount = useRef(0);
|
|
85
95
|
var lastVisibleChipIndex = useRef(-1);
|
|
96
|
+
var checkIsValueIsEmail = function (inputValue) {
|
|
97
|
+
var regex = new RegExp(/^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/);
|
|
98
|
+
return regex.test(inputValue);
|
|
99
|
+
};
|
|
86
100
|
var calculatePaddingLeft = function () {
|
|
87
101
|
var _a, _b;
|
|
88
102
|
var maskWidth = ((_b = (_a = maskRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.width) || null;
|
|
@@ -149,8 +163,23 @@ var UserDropdown = function (_a) {
|
|
|
149
163
|
handleResetError();
|
|
150
164
|
onMenuClose && onMenuClose();
|
|
151
165
|
};
|
|
152
|
-
var handleInputChange = function (inputValue) {
|
|
153
|
-
|
|
166
|
+
var handleInputChange = function (inputValue, additionalInfo) {
|
|
167
|
+
if (additionalInfo) {
|
|
168
|
+
var action = additionalInfo.action, prevInputValue = additionalInfo.prevInputValue;
|
|
169
|
+
var trimPrevInputValue_1 = prevInputValue.trim();
|
|
170
|
+
var isInputBlurAction = action === INPUT_ACTIONS.blur;
|
|
171
|
+
var isMenuCloseAction = action === MENU_ACTIONS.close;
|
|
172
|
+
if (!isInputBlurAction && !isMenuCloseAction)
|
|
173
|
+
setInputValue(inputValue);
|
|
174
|
+
if ((isInputBlurAction || isMenuCloseAction) && checkIsValueIsEmail(trimPrevInputValue_1)) {
|
|
175
|
+
var isUserAlreadySelected = selectedUsers.some(function (_a) {
|
|
176
|
+
var email = _a.email;
|
|
177
|
+
return email === trimPrevInputValue_1;
|
|
178
|
+
});
|
|
179
|
+
setInputValue(isUserAlreadySelected ? trimPrevInputValue_1 : '');
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
setIsUserTyping(!isEmpty(inputValue));
|
|
154
183
|
handleResetError();
|
|
155
184
|
if (inputValue.length >= MIN_INPUT_SYMBOLS) {
|
|
156
185
|
requestDebounce(inputValue);
|
|
@@ -163,10 +192,9 @@ var UserDropdown = function (_a) {
|
|
|
163
192
|
};
|
|
164
193
|
var handleAddUser = function (needToShowError) {
|
|
165
194
|
if (needToShowError === void 0) { needToShowError = true; }
|
|
166
|
-
var
|
|
167
|
-
var
|
|
195
|
+
var props = selectRef.current.props;
|
|
196
|
+
var options = props.options, inputValue = props.inputValue, onChange = props.onChange;
|
|
168
197
|
var trimInputValue = inputValue.trim();
|
|
169
|
-
var regex = new RegExp(/^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/);
|
|
170
198
|
var optionProps = {
|
|
171
199
|
email: trimInputValue,
|
|
172
200
|
platform: platform,
|
|
@@ -177,7 +205,7 @@ var UserDropdown = function (_a) {
|
|
|
177
205
|
collapsableChipsCount: collapsableChipsCount,
|
|
178
206
|
lastVisibleChipIndex: lastVisibleChipIndex,
|
|
179
207
|
};
|
|
180
|
-
if (
|
|
208
|
+
if (checkIsValueIsEmail(trimInputValue)) {
|
|
181
209
|
var isUserAlreadySelected = selectedUsers.find(function (_a) {
|
|
182
210
|
var email = _a.email;
|
|
183
211
|
return email === trimInputValue;
|
|
@@ -187,11 +215,9 @@ var UserDropdown = function (_a) {
|
|
|
187
215
|
return email === trimInputValue;
|
|
188
216
|
});
|
|
189
217
|
onChange(__spreadArray(__spreadArray([], selectedUsers, true), [existingUser || generateEnteredByUserOption(optionProps)], false));
|
|
190
|
-
isUserAlreadySelected && needToShowError
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
onChange(__spreadArray(__spreadArray([], selectedUsers, true), [generateEnteredByUserOption(__assign(__assign({}, optionProps), { isError: true }))], false));
|
|
194
|
-
onInputChange('');
|
|
218
|
+
isUserAlreadySelected && needToShowError
|
|
219
|
+
? setIsError(true)
|
|
220
|
+
: handleInputChange('', { action: INPUT_ACTIONS.change, prevInputValue: trimInputValue });
|
|
195
221
|
}
|
|
196
222
|
return Promise.resolve();
|
|
197
223
|
};
|
|
@@ -302,6 +328,8 @@ var UserDropdown = function (_a) {
|
|
|
302
328
|
};
|
|
303
329
|
var handleUnCollapseChips = function () {
|
|
304
330
|
var _a;
|
|
331
|
+
if (!userDropdownId)
|
|
332
|
+
return;
|
|
305
333
|
var chipsNodes = ((_a = document.querySelector("#".concat(userDropdownId))) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.smartapp-chip')) || [];
|
|
306
334
|
var chips = Array.from(chipsNodes);
|
|
307
335
|
chips.forEach(function (chip) {
|
|
@@ -391,7 +419,7 @@ var UserDropdown = function (_a) {
|
|
|
391
419
|
}, []);
|
|
392
420
|
var OptionComponent = useCallback(function (props) { return _jsx(Option, __assign({}, props, { children: props.children })); }, []);
|
|
393
421
|
var MenuListComponent = useCallback(function (props) { return (_jsx(MenuList, __assign({}, props, { children: props.children, appTheme: theme, selectRef: selectRef, scrollFromTop: menuScrollFromTop, hasNextPage: hasNextPage, isLoading: isLoading, isUserTyping: isUserTyping, isNextPageLoading: isNextPageLoading, onLoadNextPage: function (inputValue) { return onLoadNextPage && onLoadNextPage(inputValue); } }))); }, [hasNextPage, isLoading, isNextPageLoading, isUserTyping, onLoadNextPage, theme]);
|
|
394
|
-
return (_jsxs("div", __assign({ id: userDropdownId, className: classNames('smartapp-user-dropdown', containerClassName), style: containerStyles }, { children: [renderTitle(), _jsxs("div", __assign({ className: "smartapp-user-dropdown__container" }, { children: [renderMask(), _jsx(Select, { ref: selectRef, isMulti: true, openMenuOnFocus: true, blurInputOnSelect: false, captureMenuScroll: false, isSearchable: isSearchable, menuPlacement: menuPosition, controlShouldRenderValue: isChipsVisible, backspaceRemovesValue: isChipsVisible, isDisabled: isDisabled, closeMenuOnSelect: isMenuCloseOnSelect, isLoading: isLoading || isUserTyping, isClearable: false, styles: generateStyles(), placeholder: placeholder || '', noOptionsMessage: generateNoOptionsMessage, loadingMessage: function () { return _jsx(LoadingMessage, { theme: theme }); }, value: selectedUsers, options: !isNull(corporateEntries) || !isNull(myContactsEntries) ? generateOptions() : undefined, filterOption: handleFilterOption, onInputChange: handleInputChange, onChange: handleChange, onMenuClose: handleMenuClose, onMenuOpen: onMenuOpen, onKeyDown: handleKeyDown, onBlur: handleBlur, onFocus: handleFocus, components: {
|
|
422
|
+
return (_jsxs("div", __assign({ id: userDropdownId, className: classNames('smartapp-user-dropdown', containerClassName), style: containerStyles }, { children: [renderTitle(), _jsxs("div", __assign({ className: "smartapp-user-dropdown__container" }, { children: [renderMask(), _jsx(Select, { ref: selectRef, isMulti: true, openMenuOnFocus: true, blurInputOnSelect: false, captureMenuScroll: false, isSearchable: isSearchable, menuPlacement: menuPosition, controlShouldRenderValue: isChipsVisible, backspaceRemovesValue: isChipsVisible, isDisabled: isDisabled, closeMenuOnSelect: isMenuCloseOnSelect, isLoading: isLoading || isUserTyping, isClearable: false, styles: generateStyles(), placeholder: placeholder || '', noOptionsMessage: generateNoOptionsMessage, loadingMessage: function () { return _jsx(LoadingMessage, { theme: theme }); }, value: selectedUsers, inputValue: inputValue, options: !isNull(corporateEntries) || !isNull(myContactsEntries) ? generateOptions() : undefined, filterOption: handleFilterOption, onInputChange: handleInputChange, onChange: handleChange, onMenuClose: handleMenuClose, onMenuOpen: onMenuOpen, onKeyDown: handleKeyDown, onBlur: handleBlur, autoFocus: autoFocus, onFocus: handleFocus, components: {
|
|
395
423
|
Input: Input,
|
|
396
424
|
MultiValueLabel: MultiValueLabel,
|
|
397
425
|
MultiValueRemove: MultiValueRemove,
|