@expressms/smartapp-ui 2.6.4 → 2.6.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/main/constants/constants.d.ts +2 -0
- package/build/main/constants/constants.js +2 -0
- package/build/main/constants/constants.js.map +1 -1
- package/build/main/helpers/index.d.ts +3 -1
- package/build/main/helpers/index.js +10 -1
- package/build/main/helpers/index.js.map +1 -1
- package/build/main/hooks/useModal.d.ts +20 -0
- package/build/main/hooks/useModal.js +55 -0
- package/build/main/hooks/useModal.js.map +1 -0
- package/build/main/styles/styles.scss +2 -2
- package/build/main//321/201omponents/ActionModal/ActionModal.js +5 -4
- package/build/main//321/201omponents/ActionModal/ActionModal.js.map +1 -1
- package/build/main//321/201omponents/Button/Button.d.ts +1 -1
- package/build/main//321/201omponents/Button/Button.js +4 -4
- package/build/main//321/201omponents/Button/Button.js.map +1 -1
- package/build/main//321/201omponents/Button/types.d.ts +1 -3
- package/build/main//321/201omponents/ConfirmationModal/ConfirmationModal.d.ts +1 -1
- package/build/main//321/201omponents/ConfirmationModal/ConfirmationModal.js +29 -6
- package/build/main//321/201omponents/ConfirmationModal/ConfirmationModal.js.map +1 -1
- package/build/main//321/201omponents/ConfirmationModal/types.d.ts +4 -0
- package/build/main//321/201omponents/Modal/Modal.d.ts +1 -1
- package/build/main//321/201omponents/Modal/Modal.js +33 -13
- package/build/main//321/201omponents/Modal/Modal.js.map +1 -1
- package/build/main//321/201omponents/Modal/types.d.ts +3 -0
- package/build/main//321/201omponents/UserDropdown/ContactBottomSheet/ContactBottomSheet.js +1 -1
- package/build/main//321/201omponents/UserDropdown/ContactBottomSheet/ContactBottomSheet.js.map +1 -1
- package/build/main//321/201omponents/UserDropdown/ContactInfo/ContactInfo.d.ts +1 -1
- package/build/main//321/201omponents/UserDropdown/ContactInfo/ContactInfo.js +4 -4
- package/build/main//321/201omponents/UserDropdown/ContactInfo/ContactInfo.js.map +1 -1
- package/build/main//321/201omponents/UserDropdown/LoadingMessage/LoadingMessage.js +1 -1
- package/build/main//321/201omponents/UserDropdown/Option/Option.js +36 -1
- package/build/main//321/201omponents/UserDropdown/Option/Option.js.map +1 -1
- package/build/main//321/201omponents/UserDropdown/UserDropdown.d.ts +1 -0
- package/build/main//321/201omponents/UserDropdown/UserDropdown.js +1 -1
- package/build/main//321/201omponents/UserDropdown/UserDropdown.js.map +1 -1
- package/build/main//321/201omponents/UserDropdown/selectStyles.js +4 -4
- package/build/main//321/201omponents/UserDropdown/selectStyles.js.map +1 -1
- package/build/main//321/201omponents/UserDropdown/types.d.ts +1 -0
- package/package.json +2 -1
|
@@ -15,14 +15,15 @@ import Popup from 'reactjs-popup';
|
|
|
15
15
|
import classNames from 'classnames';
|
|
16
16
|
import Button from '../Button';
|
|
17
17
|
import Input from '../Input';
|
|
18
|
-
import { generateClassNames, generateColor, generateIsCloseIconHidden } from '../../helpers';
|
|
18
|
+
import { checkIfContentIsCentered, generateClassNames, generateColor, generateIsCloseIconHidden } from '../../helpers';
|
|
19
19
|
import { PLATFORM } from '../../constants';
|
|
20
20
|
import { ReactComponent as CloseIcon } from '../../assets/icons/cancel-cross.svg';
|
|
21
21
|
import '../../styles/styles.scss';
|
|
22
22
|
var ActionModal = function (_a) {
|
|
23
23
|
var isModalOpen = _a.isModalOpen, _b = _a.isClosableOutside, isClosableOutside = _b === void 0 ? true : _b, isCloseIconHidden = _a.isCloseIconHidden, title = _a.title, buttonName = _a.buttonName, confirmButtonFunction = _a.confirmButtonFunction, cancelButtonFunction = _a.cancelButtonFunction, _c = _a.platform, platform = _c === void 0 ? PLATFORM.web : _c, placeholder = _a.placeholder, _d = _a.defaultValue, defaultValue = _d === void 0 ? '' : _d, isWaitingResponse = _a.isWaitingResponse, isButtonDisabled = _a.isButtonDisabled, popupClassName = _a.popupClassName, className = _a.className, popupStyles = _a.popupStyles, styles = _a.styles, titleStyles = _a.titleStyles, iconColor = _a.iconColor, _e = _a.buttonWidth, buttonWidth = _e === void 0 ? 100 : _e, backgroundColor = _a.backgroundColor, inputFillType = _a.inputFillType;
|
|
24
|
-
var
|
|
24
|
+
var isCloseIconInvisible = generateIsCloseIconHidden(platform, isCloseIconHidden);
|
|
25
25
|
var ref = useRef(null);
|
|
26
|
+
var titleRef = useRef(null);
|
|
26
27
|
var _f = useState(defaultValue), value = _f[0], setValue = _f[1];
|
|
27
28
|
var handleConfirmClick = function () {
|
|
28
29
|
confirmButtonFunction(value);
|
|
@@ -32,6 +33,7 @@ var ActionModal = function (_a) {
|
|
|
32
33
|
setValue('');
|
|
33
34
|
cancelButtonFunction();
|
|
34
35
|
};
|
|
36
|
+
var handleChange = function (value) { return setValue(value); };
|
|
35
37
|
useEffect(function () {
|
|
36
38
|
document.documentElement.style.setProperty('--action-modal-background', generateColor(backgroundColor));
|
|
37
39
|
}, [backgroundColor]);
|
|
@@ -47,8 +49,7 @@ var ActionModal = function (_a) {
|
|
|
47
49
|
};
|
|
48
50
|
// eslint-disable-next-line
|
|
49
51
|
}, [isModalOpen, isClosableOutside, cancelButtonFunction, value]);
|
|
50
|
-
|
|
51
|
-
return (_jsx(Popup, __assign({ className: classNames('action-modal', popupClassName), overlayStyle: popupStyles, closeOnDocumentClick: isClosableOutside, modal: true, open: isModalOpen }, { children: _jsx("div", __assign({ ref: ref, className: classNames('smartapp-action-modal', className), style: styles }, { children: _jsxs("div", __assign({ className: "smartapp-action-modal__content" }, { children: [_jsx("p", __assign({ className: generateClassNames({ className: 'smartapp-action-modal__content--title', delimiter: '__', additionalClassName: platform }), style: titleStyles }, { children: title })), !isCloseIconNotVisible && (_jsx("div", __assign({ onClick: handleCloseModal, className: "smartapp-action-modal__content--cancel-cross" }, { children: _jsx(CloseIcon, { style: { color: generateColor(iconColor) } }) }))), _jsx("div", __assign({ className: "smartapp-action-modal__content--input" }, { children: _jsx(Input, { defaultValue: value, placeholder: placeholder, fillType: inputFillType, disabled: isWaitingResponse, onChange: handleChange }) })), _jsx("div", __assign({ className: "smartapp-action-modal__content--buttons" }, { children: _jsx(Button, { width: buttonWidth, isWaitingResponse: isWaitingResponse, isDisabled: isButtonDisabled, title: buttonName, onClick: handleConfirmClick }) }))] })) })) })));
|
|
52
|
+
return (_jsx(Popup, __assign({ className: classNames('action-modal', popupClassName), overlayStyle: popupStyles, closeOnDocumentClick: isClosableOutside, modal: true, open: isModalOpen }, { children: _jsx("div", __assign({ ref: ref, className: classNames('smartapp-action-modal', className), style: styles }, { children: _jsxs("div", __assign({ className: "smartapp-action-modal__content" }, { children: [_jsxs("div", { children: [!isCloseIconInvisible && (_jsx("div", { className: classNames('close-icon-space', { 'close-icon-space__centered': checkIfContentIsCentered(titleRef) }) })), _jsx("p", __assign({ ref: titleRef, className: generateClassNames({ className: 'smartapp-action-modal__content--title', delimiter: '__', additionalClassName: platform }), style: titleStyles }, { children: title }))] }), !isCloseIconInvisible && (_jsx("div", __assign({ onClick: handleCloseModal, className: "smartapp-action-modal__content--cancel-cross" }, { children: _jsx(CloseIcon, { style: { color: generateColor(iconColor) } }) }))), _jsx("div", __assign({ className: "smartapp-action-modal__content--input" }, { children: _jsx(Input, { defaultValue: value, placeholder: placeholder, fillType: inputFillType, disabled: isWaitingResponse, onChange: handleChange }) })), _jsx("div", __assign({ className: "smartapp-action-modal__content--buttons" }, { children: _jsx(Button, { width: buttonWidth, isWaitingResponse: isWaitingResponse, disabled: isButtonDisabled, title: buttonName, onClick: handleConfirmClick }) }))] })) })) })));
|
|
52
53
|
};
|
|
53
54
|
export default ActionModal;
|
|
54
55
|
//# sourceMappingURL=ActionModal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionModal.js","sourceRoot":"","sources":["../../../../src/сomponents/ActionModal/ActionModal.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC1D,OAAO,KAAK,MAAM,eAAe,CAAA;AACjC,OAAO,UAAU,MAAM,YAAY,CAAA;AACnC,OAAO,MAAM,MAAM,WAAW,CAAA;AAC9B,OAAO,KAAK,MAAM,UAAU,CAAA;AAC5B,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,yBAAyB,EAAE,MAAM,eAAe,CAAA;
|
|
1
|
+
{"version":3,"file":"ActionModal.js","sourceRoot":"","sources":["../../../../src/сomponents/ActionModal/ActionModal.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { IButtonProps } from './types';
|
|
2
2
|
import '../../styles/styles.scss';
|
|
3
|
-
declare const Button: ({ title,
|
|
3
|
+
declare const Button: ({ title, disabled, isDisabledClickable, isWaitingResponse, variant, appearance, icon, width, className, styles, onClick, ...props }: IButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
export default Button;
|
|
@@ -28,13 +28,13 @@ import { ReactComponent as LoaderIcon } from '../../assets/icons/button-loader.s
|
|
|
28
28
|
import { TButtonVariant, TButtonAppearance } from './types';
|
|
29
29
|
import '../../styles/styles.scss';
|
|
30
30
|
var Button = function (_a) {
|
|
31
|
-
var title = _a.title, _b = _a.
|
|
31
|
+
var title = _a.title, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.isDisabledClickable, isDisabledClickable = _c === void 0 ? false : _c, _d = _a.isWaitingResponse, isWaitingResponse = _d === void 0 ? false : _d, _e = _a.variant, variant = _e === void 0 ? TButtonVariant.primary : _e, _f = _a.appearance, appearance = _f === void 0 ? TButtonAppearance.accent : _f, icon = _a.icon, _g = _a.width, width = _g === void 0 ? 100 : _g, className = _a.className, styles = _a.styles, onClick = _a.onClick, props = __rest(_a, ["title", "disabled", "isDisabledClickable", "isWaitingResponse", "variant", "appearance", "icon", "width", "className", "styles", "onClick"]);
|
|
32
32
|
var buttonTitleRef = useRef(null);
|
|
33
33
|
var buttonTitleRefCurrent = buttonTitleRef.current;
|
|
34
34
|
var changeTransitionDelay = function (transitionDelay) {
|
|
35
35
|
return buttonTitleRefCurrent && (buttonTitleRefCurrent.style.transitionDelay = "".concat(transitionDelay, "ms"));
|
|
36
36
|
};
|
|
37
|
-
var handleButtonClick = function (event) { return (!
|
|
37
|
+
var handleButtonClick = function (event) { return (!disabled || (disabled && isDisabledClickable)) && (onClick === null || onClick === void 0 ? void 0 : onClick(event)); };
|
|
38
38
|
useEffect(function () {
|
|
39
39
|
if (isWaitingResponse) {
|
|
40
40
|
buttonTitleRefCurrent === null || buttonTitleRefCurrent === void 0 ? void 0 : buttonTitleRefCurrent.classList.add('smartapp-button__title--hidden');
|
|
@@ -47,9 +47,9 @@ var Button = function (_a) {
|
|
|
47
47
|
// eslint-disable-next-line
|
|
48
48
|
}, [isWaitingResponse]);
|
|
49
49
|
return (_jsxs("div", __assign({ className: classNames('smartapp-button', "smartapp-button__".concat(appearance), className), style: { width: "".concat(width, "%") } }, { children: [_jsxs("button", __assign({ className: classNames("smartapp-button__".concat(variant), "smartapp-button__".concat(variant, "--").concat(appearance), {
|
|
50
|
-
'smartapp-button__disabled':
|
|
50
|
+
'smartapp-button__disabled': disabled,
|
|
51
51
|
'smartapp-button__with-icon': !isNil(icon),
|
|
52
|
-
}), style: styles, onClick: handleButtonClick }, props, { children: [icon && _jsx("div", { children: icon }), _jsx("span", __assign({ ref: buttonTitleRef, className: "smartapp-button__title" }, { children: title }))] })), _jsx("div", __assign({ className: classNames('smartapp-button__loader', "smartapp-button__loader--".concat(variant), {
|
|
52
|
+
}), style: styles, disabled: disabled && !isDisabledClickable, onClick: handleButtonClick }, props, { children: [icon && _jsx("div", { children: icon }), _jsx("span", __assign({ ref: buttonTitleRef, className: "smartapp-button__title" }, { children: title }))] })), _jsx("div", __assign({ className: classNames('smartapp-button__loader', "smartapp-button__loader--".concat(variant), {
|
|
53
53
|
'smartapp-button__loader--hidden': !isWaitingResponse,
|
|
54
54
|
}) }, { children: _jsx(LoaderIcon, {}) }))] })));
|
|
55
55
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/сomponents/Button/Button.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAChD,OAAO,UAAU,MAAM,YAAY,CAAA;AACnC,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAA;AAC9B,OAAO,EAAE,cAAc,IAAI,UAAU,EAAE,MAAM,sCAAsC,CAAA;AACnF,OAAO,EAAgB,cAAc,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AACzE,OAAO,0BAA0B,CAAA;AAEjC,IAAM,MAAM,GAAG,UAAC,EAaD;IAZb,IAAA,KAAK,WAAA,EACL,
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/сomponents/Button/Button.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { ReactElement, ButtonHTMLAttributes } from 'react';
|
|
2
2
|
import { IntRange } from '../types';
|
|
3
3
|
import { TStyles } from '../../constants';
|
|
4
4
|
export declare enum TButtonVariant {
|
|
@@ -11,7 +11,6 @@ export declare enum TButtonAppearance {
|
|
|
11
11
|
}
|
|
12
12
|
export interface IButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
13
13
|
title: string;
|
|
14
|
-
isDisabled?: boolean;
|
|
15
14
|
isDisabledClickable?: boolean;
|
|
16
15
|
isWaitingResponse?: boolean;
|
|
17
16
|
variant?: 'primary' | 'secondary';
|
|
@@ -20,5 +19,4 @@ export interface IButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
|
20
19
|
width?: IntRange<1, 101>;
|
|
21
20
|
className?: string;
|
|
22
21
|
styles?: TStyles;
|
|
23
|
-
onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
|
|
24
22
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { IConfirmationModalProps } from './types';
|
|
2
2
|
import '../../styles/styles.scss';
|
|
3
|
-
declare const ConfirmationModal: ({ isModalOpen, isClosableOutside, isConfirmLoading, isCancelLoading, isCloseIconHidden, title, text, cancelButtonName, confirmButtonName, cancelButtonFunction, confirmButtonFunction, handleCloseModal, platform, popupClassName, className, popupStyles, styles, titleStyles, iconColor, backgroundColor, buttonsDirection, }: IConfirmationModalProps) => import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
declare const ConfirmationModal: ({ isModalOpen, isClosableOutside, isConfirmLoading, isCancelLoading, isCloseIconHidden, title, text, cancelButtonName, confirmButtonName, cancelButtonFunction, confirmButtonFunction, handleCloseModal, platform, popupClassName, className, popupStyles, styles, titleStyles, iconColor, backgroundColor, buttonsDirection, isBottomSheet, isDisabledBottomSheet, bottomSheetProps, }: IConfirmationModalProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
4
4
|
export default ConfirmationModal;
|
|
@@ -11,25 +11,40 @@ var __assign = (this && this.__assign) || function () {
|
|
|
11
11
|
};
|
|
12
12
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
13
|
import { useEffect, useRef } from 'react';
|
|
14
|
-
import Popup from 'reactjs-popup';
|
|
15
14
|
import classNames from 'classnames';
|
|
16
15
|
import Button from '../Button';
|
|
17
16
|
import { TButtonVariant } from '../Button/types';
|
|
18
17
|
import { PLATFORM, MODAL_BUTTONS_DIRECTION } from '../../constants';
|
|
19
|
-
import { generateClassNames, generateColor, generateIsCloseIconHidden } from '../../helpers';
|
|
18
|
+
import { checkIfContentIsCentered, generateClassNames, generateColor, generateIsCloseIconHidden, generateBottomSheetClassName } from '../../helpers';
|
|
20
19
|
import { ReactComponent as CloseIcon } from '../../assets/icons/cancel-cross.svg';
|
|
20
|
+
import { useModal } from '../../hooks/useModal';
|
|
21
21
|
import '../../styles/styles.scss';
|
|
22
22
|
var ROW = 'row';
|
|
23
23
|
var COLUMN_REVERSE = 'column-reverse';
|
|
24
24
|
var ConfirmationModal = function (_a) {
|
|
25
|
-
var isModalOpen = _a.isModalOpen, _b = _a.isClosableOutside, isClosableOutside = _b === void 0 ? true : _b, _c = _a.isConfirmLoading, isConfirmLoading = _c === void 0 ? false : _c, _d = _a.isCancelLoading, isCancelLoading = _d === void 0 ? false : _d, isCloseIconHidden = _a.isCloseIconHidden, title = _a.title, text = _a.text, cancelButtonName = _a.cancelButtonName, confirmButtonName = _a.confirmButtonName, cancelButtonFunction = _a.cancelButtonFunction, confirmButtonFunction = _a.confirmButtonFunction, handleCloseModal = _a.handleCloseModal, _e = _a.platform, platform = _e === void 0 ? PLATFORM.web : _e, popupClassName = _a.popupClassName, className = _a.className, popupStyles = _a.popupStyles, styles = _a.styles, titleStyles = _a.titleStyles, iconColor = _a.iconColor, backgroundColor = _a.backgroundColor, _f = _a.buttonsDirection, buttonsDirection = _f === void 0 ? MODAL_BUTTONS_DIRECTION.row : _f;
|
|
25
|
+
var isModalOpen = _a.isModalOpen, _b = _a.isClosableOutside, isClosableOutside = _b === void 0 ? true : _b, _c = _a.isConfirmLoading, isConfirmLoading = _c === void 0 ? false : _c, _d = _a.isCancelLoading, isCancelLoading = _d === void 0 ? false : _d, isCloseIconHidden = _a.isCloseIconHidden, title = _a.title, text = _a.text, cancelButtonName = _a.cancelButtonName, confirmButtonName = _a.confirmButtonName, cancelButtonFunction = _a.cancelButtonFunction, confirmButtonFunction = _a.confirmButtonFunction, handleCloseModal = _a.handleCloseModal, _e = _a.platform, platform = _e === void 0 ? PLATFORM.web : _e, popupClassName = _a.popupClassName, className = _a.className, popupStyles = _a.popupStyles, styles = _a.styles, titleStyles = _a.titleStyles, iconColor = _a.iconColor, backgroundColor = _a.backgroundColor, _f = _a.buttonsDirection, buttonsDirection = _f === void 0 ? MODAL_BUTTONS_DIRECTION.row : _f, _g = _a.isBottomSheet, isBottomSheet = _g === void 0 ? false : _g, _h = _a.isDisabledBottomSheet, isDisabledBottomSheet = _h === void 0 ? false : _h, bottomSheetProps = _a.bottomSheetProps;
|
|
26
26
|
var ref = useRef(null);
|
|
27
|
+
var titleRef = useRef(null);
|
|
28
|
+
var textRef = useRef(null);
|
|
27
29
|
var btnsContainerDirection = buttonsDirection === MODAL_BUTTONS_DIRECTION.row ? ROW : COLUMN_REVERSE;
|
|
28
|
-
var
|
|
30
|
+
var isCloseIconInvisible = generateIsCloseIconHidden(platform, isCloseIconHidden);
|
|
31
|
+
var cancelFunction = handleCloseModal || cancelButtonFunction;
|
|
32
|
+
var _j = useModal({
|
|
33
|
+
isModalOpen: isModalOpen,
|
|
34
|
+
platform: platform,
|
|
35
|
+
isDisabledBottomSheet: isDisabledBottomSheet,
|
|
36
|
+
initialIsBottomSheet: isBottomSheet,
|
|
37
|
+
modalRef: ref,
|
|
38
|
+
isClosableOutside: isClosableOutside,
|
|
39
|
+
handleCloseModal: cancelFunction,
|
|
40
|
+
popupClassName: classNames('confirmation-modal', popupClassName),
|
|
41
|
+
popupStyles: popupStyles,
|
|
42
|
+
bottomSheetProps: bottomSheetProps,
|
|
43
|
+
}), shouldUseBottomSheet = _j.shouldUseBottomSheet, renderModal = _j.renderModal;
|
|
44
|
+
var additionalClassName = generateBottomSheetClassName(platform, shouldUseBottomSheet);
|
|
29
45
|
useEffect(function () {
|
|
30
46
|
document.documentElement.style.setProperty('--confirmation-modal-background', generateColor(backgroundColor));
|
|
31
47
|
}, [backgroundColor]);
|
|
32
|
-
var cancelFunction = handleCloseModal || cancelButtonFunction;
|
|
33
48
|
useEffect(function () {
|
|
34
49
|
var checkIfClickedOutside = function (e) {
|
|
35
50
|
if (isModalOpen && isClosableOutside && ref.current && !ref.current.contains(e.target)) {
|
|
@@ -42,7 +57,15 @@ var ConfirmationModal = function (_a) {
|
|
|
42
57
|
};
|
|
43
58
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
44
59
|
}, [isModalOpen, isClosableOutside]);
|
|
45
|
-
|
|
60
|
+
var renderCloseIconSpace = function (_a) {
|
|
61
|
+
var elementRef = _a.elementRef, _b = _a.isContent, isContent = _b === void 0 ? false : _b;
|
|
62
|
+
return (_jsx("div", { className: classNames('close-icon-space', {
|
|
63
|
+
'close-icon-space__content': isContent,
|
|
64
|
+
'close-icon-space__centered': checkIfContentIsCentered(elementRef),
|
|
65
|
+
}) }));
|
|
66
|
+
};
|
|
67
|
+
var modalContent = (_jsx("div", __assign({ ref: ref, className: classNames('smartapp-confirmation-modal', { 'smartapp-confirmation-modal__bottom-sheet': shouldUseBottomSheet }, className), style: styles }, { children: _jsxs("div", __assign({ className: generateClassNames({ className: 'smartapp-confirmation-modal__content', delimiter: '--', additionalClassName: additionalClassName }) }, { children: [title && (_jsxs("div", { children: [!isCloseIconInvisible && renderCloseIconSpace({ elementRef: titleRef }), _jsx("p", __assign({ ref: titleRef, className: "smartapp-confirmation-modal__content--title", style: titleStyles }, { children: title }))] })), !isCloseIconInvisible && (_jsx("div", __assign({ onClick: cancelFunction, className: "smartapp-confirmation-modal__content--close-icon" }, { children: _jsx(CloseIcon, { style: { color: generateColor(iconColor) } }) }))), _jsxs("div", { children: [!title && !isCloseIconInvisible && renderCloseIconSpace({ elementRef: textRef, isContent: true }), _jsx("p", __assign({ ref: textRef, className: "smartapp-confirmation-modal__content--text" }, { children: text }))] }), _jsxs("div", __assign({ style: { flexDirection: btnsContainerDirection }, className: "smartapp-confirmation-modal__content--buttons" }, { children: [cancelButtonName && (_jsx(Button, { title: cancelButtonName, isWaitingResponse: isCancelLoading, variant: TButtonVariant.secondary, onClick: cancelButtonFunction, disabled: isConfirmLoading })), _jsx(Button, { isWaitingResponse: isConfirmLoading, title: confirmButtonName, onClick: confirmButtonFunction, disabled: isCancelLoading })] }))] })) })));
|
|
68
|
+
return renderModal(modalContent);
|
|
46
69
|
};
|
|
47
70
|
export default ConfirmationModal;
|
|
48
71
|
//# sourceMappingURL=ConfirmationModal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ConfirmationModal.js","sourceRoot":"","sources":["../../../../src/сomponents/ConfirmationModal/ConfirmationModal.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAc,
|
|
1
|
+
{"version":3,"file":"ConfirmationModal.js","sourceRoot":"","sources":["../../../../src/сomponents/ConfirmationModal/ConfirmationModal.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
|
+
import { BottomSheetProps } from 'react-spring-bottom-sheet';
|
|
2
3
|
import { ICommonProps, TStyles } from '../../constants';
|
|
3
4
|
export interface IConfirmationModalProps extends ICommonProps {
|
|
4
5
|
isModalOpen: boolean;
|
|
@@ -21,4 +22,7 @@ export interface IConfirmationModalProps extends ICommonProps {
|
|
|
21
22
|
iconColor?: string;
|
|
22
23
|
backgroundColor?: string;
|
|
23
24
|
buttonsDirection?: 'row' | 'column';
|
|
25
|
+
isBottomSheet?: boolean;
|
|
26
|
+
isDisabledBottomSheet?: boolean;
|
|
27
|
+
bottomSheetProps?: Partial<BottomSheetProps>;
|
|
24
28
|
}
|
|
@@ -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, }: IModalProps) => import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
declare const Modal: ({ isModalOpen, isClosableOutside, isCloseIconHidden, modalId, content, bottomContent, handleCloseModal, title, platform, popupClassName, className, popupStyles, styles, titleStyles, contentStyles, iconColor, backgroundColor, isBottomSheet, isDisabledBottomSheet, bottomSheetProps, }: IModalProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
4
4
|
export default Modal;
|
|
@@ -11,30 +11,41 @@ var __assign = (this && this.__assign) || function () {
|
|
|
11
11
|
};
|
|
12
12
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
13
|
import { useEffect, useRef, useState } from 'react';
|
|
14
|
-
import Popup from 'reactjs-popup';
|
|
15
14
|
import classNames from 'classnames';
|
|
16
15
|
import ScrollBar from '../ScrollBar';
|
|
17
16
|
import { DEFAULT_SCROLL_BAR_HEIGHT } from '../ScrollBar/ScrollBar';
|
|
18
17
|
import { ReactComponent as CloseIcon } from '../../assets/icons/cancel-cross.svg';
|
|
19
18
|
import { PLATFORM } from '../../constants';
|
|
20
|
-
import { generateClassNames, generateColor, generateIsCloseIconHidden } from '../../helpers';
|
|
19
|
+
import { checkIfContentIsCentered, generateClassNames, generateColor, generateIsCloseIconHidden, generateBottomSheetClassName, isMobilePlatform, } from '../../helpers';
|
|
20
|
+
import { useModal } from '../../hooks/useModal';
|
|
21
21
|
import '../../styles/styles.scss';
|
|
22
22
|
var SCROLL_BAR_HEIGHT_WITH_PADDING = 'calc(100% - 20px)';
|
|
23
23
|
var MODAL_MARGIN_SIZE_WEB = 165;
|
|
24
|
-
var MODAL_MARGIN_SIZE_MOBILE = 136;
|
|
25
24
|
var CONTENT_PADDING_TOP = 20;
|
|
26
25
|
var MODAL_TITLE_MARGIN_BOTTOM = 16;
|
|
27
|
-
var
|
|
26
|
+
var MODAL_MARGIN_SIZE_MOBILE = 136;
|
|
28
27
|
var Modal = function (_a) {
|
|
29
|
-
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;
|
|
30
|
-
var isCloseIconNotVisible = generateIsCloseIconHidden(platform, isCloseIconHidden);
|
|
31
|
-
// additionalClassName use in smartapp-modal__content
|
|
32
|
-
var additionalClassName = [platform, isBottomSheet ? BOTTOM_SHEET : ''].filter(Boolean);
|
|
33
|
-
var MAX_MODAL_HEIGHT = window.innerHeight - (isBottomSheet ? MODAL_MARGIN_SIZE_MOBILE : 2 * MODAL_MARGIN_SIZE_WEB);
|
|
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;
|
|
34
29
|
var ref = useRef(null);
|
|
35
30
|
var titleRef = useRef(null);
|
|
36
|
-
var
|
|
37
|
-
var
|
|
31
|
+
var scrollableContentRef = useRef(null);
|
|
32
|
+
var bottomContentRef = useRef(null);
|
|
33
|
+
var _f = useState(''), containerHeight = _f[0], setContainerHeight = _f[1];
|
|
34
|
+
var _g = useModal({
|
|
35
|
+
isModalOpen: isModalOpen,
|
|
36
|
+
platform: platform,
|
|
37
|
+
isDisabledBottomSheet: isDisabledBottomSheet,
|
|
38
|
+
initialIsBottomSheet: isBottomSheet,
|
|
39
|
+
modalRef: ref,
|
|
40
|
+
isClosableOutside: isClosableOutside,
|
|
41
|
+
handleCloseModal: handleCloseModal,
|
|
42
|
+
popupClassName: classNames('modal', popupClassName),
|
|
43
|
+
popupStyles: popupStyles,
|
|
44
|
+
bottomSheetProps: bottomSheetProps,
|
|
45
|
+
}), shouldUseBottomSheet = _g.shouldUseBottomSheet, renderModal = _g.renderModal;
|
|
46
|
+
var additionalClassName = generateBottomSheetClassName(platform, shouldUseBottomSheet);
|
|
47
|
+
var isCloseIconInvisible = generateIsCloseIconHidden(platform, isCloseIconHidden);
|
|
48
|
+
var MAX_MODAL_HEIGHT = window.innerHeight - (isMobilePlatform(platform) ? MODAL_MARGIN_SIZE_MOBILE : 2 * MODAL_MARGIN_SIZE_WEB);
|
|
38
49
|
var handleMouseDown = function (event) { return event.stopPropagation(); };
|
|
39
50
|
var handleSetContainerHeight = function (contentRef) {
|
|
40
51
|
var _a, _b;
|
|
@@ -42,7 +53,7 @@ var Modal = function (_a) {
|
|
|
42
53
|
return;
|
|
43
54
|
var height = contentRef.getBoundingClientRect().height;
|
|
44
55
|
var titleHeight = ((_a = titleRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height) || 0;
|
|
45
|
-
var bottomContentHeight = ((_b =
|
|
56
|
+
var bottomContentHeight = ((_b = bottomContentRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().height) || 0;
|
|
46
57
|
var titleHeightWithMargin = titleHeight ? titleHeight + MODAL_TITLE_MARGIN_BOTTOM : titleHeight;
|
|
47
58
|
var defaultContentHeight = MAX_MODAL_HEIGHT - titleHeightWithMargin - CONTENT_PADDING_TOP;
|
|
48
59
|
var maxContentHeightValue = bottomContent ? defaultContentHeight - bottomContentHeight : defaultContentHeight;
|
|
@@ -62,7 +73,16 @@ var Modal = function (_a) {
|
|
|
62
73
|
document === null || document === void 0 ? void 0 : document.removeEventListener('click', checkIfClickedOutside, true);
|
|
63
74
|
};
|
|
64
75
|
}, [isModalOpen, isClosableOutside, handleCloseModal]);
|
|
65
|
-
|
|
76
|
+
var renderCloseIconSpace = function (_a) {
|
|
77
|
+
var elementRef = _a.elementRef, _b = _a.isLarge, isLarge = _b === void 0 ? false : _b, _c = _a.isContent, isContent = _c === void 0 ? false : _c;
|
|
78
|
+
return (_jsx("div", { className: classNames('close-icon-space', {
|
|
79
|
+
'close-icon-space__large': isLarge,
|
|
80
|
+
'close-icon-space__content': isContent,
|
|
81
|
+
'close-icon-space__centered': checkIfContentIsCentered(elementRef),
|
|
82
|
+
}) }));
|
|
83
|
+
};
|
|
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: handleCloseModal, className: "smartapp-modal__content--close-icon" }, { children: _jsx(CloseIcon, { style: { color: generateColor(iconColor) } }) }))), _jsx(ScrollBar, { contentId: modalId, 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 })))] })) })));
|
|
85
|
+
return renderModal(modalContent);
|
|
66
86
|
};
|
|
67
87
|
export default Modal;
|
|
68
88
|
//# sourceMappingURL=Modal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../../src/сomponents/Modal/Modal.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAc,
|
|
1
|
+
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../../src/сomponents/Modal/Modal.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { ReactElement } from 'react';
|
|
2
|
+
import { BottomSheetProps } from 'react-spring-bottom-sheet';
|
|
2
3
|
import { ICommonProps, TStyles } from '../../constants';
|
|
3
4
|
export interface IModalProps extends ICommonProps {
|
|
4
5
|
isModalOpen: boolean;
|
|
@@ -18,4 +19,6 @@ export interface IModalProps extends ICommonProps {
|
|
|
18
19
|
iconColor?: string;
|
|
19
20
|
backgroundColor?: string;
|
|
20
21
|
isBottomSheet?: boolean;
|
|
22
|
+
isDisabledBottomSheet?: boolean;
|
|
23
|
+
bottomSheetProps?: Partial<BottomSheetProps>;
|
|
21
24
|
}
|
|
@@ -25,7 +25,7 @@ var ContactBottomSheet = function (_a) {
|
|
|
25
25
|
modalContent === null || modalContent === void 0 ? void 0 : modalContent.removeEventListener('touchend', handlePreventDefault);
|
|
26
26
|
};
|
|
27
27
|
}, []);
|
|
28
|
-
return (_jsxs("div", __assign({ className: "smartapp-contact-bottom-sheet" }, { children: [_jsxs("div", __assign({ className: "smartapp-contact-bottom-sheet__header" }, { children: [_jsx(Avatar, { username: name, avatar: avatar, size: 48 }), _jsxs("div", __assign({ className: "smartapp-contact-bottom-sheet__header--text" }, { children: [_jsxs("div", __assign({ className: "smartapp-contact-bottom-sheet__header--text__name" }, { children: [_jsx(CorporateUserIcon, {}), _jsx("div", { children: name })] })), _jsx("div", __assign({ className: "smartapp-contact-bottom-sheet__header--text__email" }, { children: email }))] }))] })), _jsx(
|
|
28
|
+
return (_jsxs("div", __assign({ className: "smartapp-contact-bottom-sheet" }, { children: [_jsxs("div", __assign({ className: "smartapp-contact-bottom-sheet__header" }, { children: [_jsx(Avatar, { username: name, avatar: avatar, size: 48 }), _jsxs("div", __assign({ className: "smartapp-contact-bottom-sheet__header--text" }, { children: [_jsxs("div", __assign({ className: "smartapp-contact-bottom-sheet__header--text__name" }, { children: [_jsx(CorporateUserIcon, {}), _jsx("div", { children: name })] })), _jsx("div", __assign({ className: "smartapp-contact-bottom-sheet__header--text__email" }, { children: email }))] }))] })), _jsx(ContactInfo, { language: language, serverName: serverName, company: company, department: department, companyPosition: companyPosition })] })));
|
|
29
29
|
};
|
|
30
30
|
export default ContactBottomSheet;
|
|
31
31
|
//# sourceMappingURL=ContactBottomSheet.js.map
|
package/build/main//321/201omponents/UserDropdown/ContactBottomSheet/ContactBottomSheet.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContactBottomSheet.js","sourceRoot":"","sources":["../../../../../src/сomponents/UserDropdown/ContactBottomSheet/ContactBottomSheet.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACxC,OAAO,MAAM,MAAM,cAAc,CAAA;AACjC,OAAO,WAAW,MAAM,4BAA4B,CAAA;AAEpD,OAAO,EAAE,cAAc,IAAI,iBAAiB,EAAE,MAAM,0CAA0C,CAAA;AAC9F,OAAO,6BAA6B,CAAA;AAEpC,IAAM,kBAAkB,GAAG,UAAC,EAAwG;QAAtG,QAAQ,cAAA,EAAE,MAAM,YAAA,EAAE,IAAI,UAAA,EAAE,KAAK,WAAA,EAAE,UAAU,gBAAA,EAAE,OAAO,aAAA,EAAE,UAAU,gBAAA,EAAE,eAAe,qBAAA;IAC3G,SAAS,CAAC;QACR,IAAM,YAAY,GAA0B,QAAQ,CAAC,aAAa,CAAC,0BAA0B,CAAC,CAAA;QAC9F,IAAM,oBAAoB,GAAG,UAAC,KAAY,IAAK,OAAA,KAAK,CAAC,cAAc,EAAE,EAAtB,CAAsB,CAAA;QAErE,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,gBAAgB,CAAC,UAAU,EAAE,oBAAoB,CAAC,CAAA;QAEhE,OAAO;YACL,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,mBAAmB,CAAC,UAAU,EAAE,oBAAoB,CAAC,CAAA;QACrE,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,CACL,wBAAK,SAAS,EAAC,+BAA+B,iBAC5C,wBAAK,SAAS,EAAC,uCAAuC,iBACpD,KAAC,MAAM,IAAC,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,GAAI,EACpD,wBAAK,SAAS,EAAC,6CAA6C,iBAC1D,wBAAK,SAAS,EAAC,mDAAmD,iBAChE,KAAC,iBAAiB,KAAG,EACrB,wBAAM,IAAI,GAAO,KACb,EACN,uBAAK,SAAS,EAAC,oDAAoD,gBAAE,KAAK,IAAO,KAC7E,KACF,EACN,
|
|
1
|
+
{"version":3,"file":"ContactBottomSheet.js","sourceRoot":"","sources":["../../../../../src/сomponents/UserDropdown/ContactBottomSheet/ContactBottomSheet.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACxC,OAAO,MAAM,MAAM,cAAc,CAAA;AACjC,OAAO,WAAW,MAAM,4BAA4B,CAAA;AAEpD,OAAO,EAAE,cAAc,IAAI,iBAAiB,EAAE,MAAM,0CAA0C,CAAA;AAC9F,OAAO,6BAA6B,CAAA;AAEpC,IAAM,kBAAkB,GAAG,UAAC,EAAwG;QAAtG,QAAQ,cAAA,EAAE,MAAM,YAAA,EAAE,IAAI,UAAA,EAAE,KAAK,WAAA,EAAE,UAAU,gBAAA,EAAE,OAAO,aAAA,EAAE,UAAU,gBAAA,EAAE,eAAe,qBAAA;IAC3G,SAAS,CAAC;QACR,IAAM,YAAY,GAA0B,QAAQ,CAAC,aAAa,CAAC,0BAA0B,CAAC,CAAA;QAC9F,IAAM,oBAAoB,GAAG,UAAC,KAAY,IAAK,OAAA,KAAK,CAAC,cAAc,EAAE,EAAtB,CAAsB,CAAA;QAErE,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,gBAAgB,CAAC,UAAU,EAAE,oBAAoB,CAAC,CAAA;QAEhE,OAAO;YACL,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,mBAAmB,CAAC,UAAU,EAAE,oBAAoB,CAAC,CAAA;QACrE,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,CACL,wBAAK,SAAS,EAAC,+BAA+B,iBAC5C,wBAAK,SAAS,EAAC,uCAAuC,iBACpD,KAAC,MAAM,IAAC,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,GAAI,EACpD,wBAAK,SAAS,EAAC,6CAA6C,iBAC1D,wBAAK,SAAS,EAAC,mDAAmD,iBAChE,KAAC,iBAAiB,KAAG,EACrB,wBAAM,IAAI,GAAO,KACb,EACN,uBAAK,SAAS,EAAC,oDAAoD,gBAAE,KAAK,IAAO,KAC7E,KACF,EACN,KAAC,WAAW,IAAC,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,eAAe,EAAE,eAAe,GAAI,KACnI,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,kBAAkB,CAAA"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { IContactInfo } from '../types';
|
|
2
2
|
import '../../../styles/styles.scss';
|
|
3
|
-
declare const ContactInfo: ({ language, serverName, company, department, companyPosition }: IContactInfo) => import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
declare const ContactInfo: ({ elementRef, language, serverName, company, department, companyPosition }: IContactInfo) => import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
export default ContactInfo;
|
|
@@ -10,7 +10,7 @@ var __assign = (this && this.__assign) || function () {
|
|
|
10
10
|
return __assign.apply(this, arguments);
|
|
11
11
|
};
|
|
12
12
|
var _a;
|
|
13
|
-
import { jsx as _jsx, jsxs as _jsxs
|
|
13
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
14
14
|
import { LANGUAGES } from '../../../constants';
|
|
15
15
|
import '../../../styles/styles.scss';
|
|
16
16
|
var INFO_TITLE_TEXT = (_a = {},
|
|
@@ -58,13 +58,13 @@ var INFO_TITLE_TEXT = (_a = {},
|
|
|
58
58
|
},
|
|
59
59
|
_a);
|
|
60
60
|
var ContactInfo = function (_a) {
|
|
61
|
-
var language = _a.language, serverName = _a.serverName, company = _a.company, department = _a.department, companyPosition = _a.companyPosition;
|
|
61
|
+
var elementRef = _a.elementRef, language = _a.language, serverName = _a.serverName, company = _a.company, department = _a.department, companyPosition = _a.companyPosition;
|
|
62
62
|
var _b = INFO_TITLE_TEXT[language], serverTitle = _b.server, companyTitle = _b.company, departmentTitle = _b.department, companyPositionTitle = _b.companyPosition;
|
|
63
63
|
var renderInfoItem = function (_a) {
|
|
64
64
|
var title = _a.title, info = _a.info;
|
|
65
|
-
return (_jsxs("div", __assign({ className: "smartapp-contact-
|
|
65
|
+
return (_jsxs("div", __assign({ className: "smartapp-contact-info__item" }, { children: [_jsx("div", { children: title }), _jsx("div", { children: info })] })));
|
|
66
66
|
};
|
|
67
|
-
return (_jsxs(
|
|
67
|
+
return (_jsxs("div", __assign({ ref: elementRef, className: "smartapp-contact-info" }, { children: [serverName && renderInfoItem({ title: serverTitle, info: serverName }), company && renderInfoItem({ title: companyTitle, info: company }), department && renderInfoItem({ title: departmentTitle, info: department }), companyPosition && renderInfoItem({ title: companyPositionTitle, info: companyPosition })] })));
|
|
68
68
|
};
|
|
69
69
|
export default ContactInfo;
|
|
70
70
|
//# sourceMappingURL=ContactInfo.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContactInfo.js","sourceRoot":"","sources":["../../../../../src/сomponents/UserDropdown/ContactInfo/ContactInfo.tsx"],"names":[],"mappings":";;;;;;;;;;;;;AACA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAE9C,OAAO,6BAA6B,CAAA;AAKpC,IAAM,eAAe;IACnB,GAAC,SAAS,CAAC,EAAE,IAAG;QACd,MAAM,EAAE,QAAQ;QAChB,OAAO,EAAE,UAAU;QACnB,UAAU,EAAE,OAAO;QACnB,eAAe,EAAE,WAAW;KAC7B;IACD,GAAC,SAAS,CAAC,EAAE,IAAG;QACd,MAAM,EAAE,QAAQ;QAChB,OAAO,EAAE,SAAS;QAClB,UAAU,EAAE,YAAY;QACxB,eAAe,EAAE,UAAU;KAC5B;IACD,GAAC,SAAS,CAAC,EAAE,IAAG;QACd,MAAM,EAAE,QAAQ;QAChB,OAAO,EAAE,OAAO;QAChB,UAAU,EAAE,WAAW;QACvB,eAAe,EAAE,UAAU;KAC5B;IACD,GAAC,SAAS,CAAC,EAAE,IAAG;QACd,MAAM,EAAE,UAAU;QAClB,OAAO,EAAE,SAAS;QAClB,UAAU,EAAE,SAAS;QACrB,eAAe,EAAE,OAAO;KACzB;IACD,GAAC,SAAS,CAAC,EAAE,IAAG;QACd,MAAM,EAAE,SAAS;QACjB,OAAO,EAAE,SAAS;QAClB,UAAU,EAAE,aAAa;QACzB,eAAe,EAAE,OAAO;KACzB;IACD,GAAC,SAAS,CAAC,EAAE,IAAG;QACd,MAAM,EAAE,aAAa;QACrB,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,SAAS;QACrB,eAAe,EAAE,QAAQ;KAC1B;IACD,GAAC,SAAS,CAAC,GAAG,IAAG;QACf,MAAM,EAAE,SAAS;QACjB,OAAO,EAAE,UAAU;QACnB,UAAU,EAAE,SAAS;QACrB,eAAe,EAAE,WAAW;KAC7B;OACF,CAAA;AAED,IAAM,WAAW,GAAG,UAAC,
|
|
1
|
+
{"version":3,"file":"ContactInfo.js","sourceRoot":"","sources":["../../../../../src/сomponents/UserDropdown/ContactInfo/ContactInfo.tsx"],"names":[],"mappings":";;;;;;;;;;;;;AACA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAE9C,OAAO,6BAA6B,CAAA;AAKpC,IAAM,eAAe;IACnB,GAAC,SAAS,CAAC,EAAE,IAAG;QACd,MAAM,EAAE,QAAQ;QAChB,OAAO,EAAE,UAAU;QACnB,UAAU,EAAE,OAAO;QACnB,eAAe,EAAE,WAAW;KAC7B;IACD,GAAC,SAAS,CAAC,EAAE,IAAG;QACd,MAAM,EAAE,QAAQ;QAChB,OAAO,EAAE,SAAS;QAClB,UAAU,EAAE,YAAY;QACxB,eAAe,EAAE,UAAU;KAC5B;IACD,GAAC,SAAS,CAAC,EAAE,IAAG;QACd,MAAM,EAAE,QAAQ;QAChB,OAAO,EAAE,OAAO;QAChB,UAAU,EAAE,WAAW;QACvB,eAAe,EAAE,UAAU;KAC5B;IACD,GAAC,SAAS,CAAC,EAAE,IAAG;QACd,MAAM,EAAE,UAAU;QAClB,OAAO,EAAE,SAAS;QAClB,UAAU,EAAE,SAAS;QACrB,eAAe,EAAE,OAAO;KACzB;IACD,GAAC,SAAS,CAAC,EAAE,IAAG;QACd,MAAM,EAAE,SAAS;QACjB,OAAO,EAAE,SAAS;QAClB,UAAU,EAAE,aAAa;QACzB,eAAe,EAAE,OAAO;KACzB;IACD,GAAC,SAAS,CAAC,EAAE,IAAG;QACd,MAAM,EAAE,aAAa;QACrB,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,SAAS;QACrB,eAAe,EAAE,QAAQ;KAC1B;IACD,GAAC,SAAS,CAAC,GAAG,IAAG;QACf,MAAM,EAAE,SAAS;QACjB,OAAO,EAAE,UAAU;QACnB,UAAU,EAAE,SAAS;QACrB,eAAe,EAAE,WAAW;KAC7B;OACF,CAAA;AAED,IAAM,WAAW,GAAG,UAAC,EAAwF;QAAtF,UAAU,gBAAA,EAAE,QAAQ,cAAA,EAAE,UAAU,gBAAA,EAAE,OAAO,aAAA,EAAE,UAAU,gBAAA,EAAE,eAAe,qBAAA;IACrF,IAAA,KAAqH,eAAe,CAAC,QAAQ,CAAC,EAApI,WAAW,YAAA,EAAW,YAAY,aAAA,EAAc,eAAe,gBAAA,EAAmB,oBAAoB,qBAA8B,CAAA;IAEpJ,IAAM,cAAc,GAAG,UAAC,EAAgC;YAA9B,KAAK,WAAA,EAAE,IAAI,UAAA;QAAwB,OAAA,CAC3D,wBAAK,SAAS,EAAC,6BAA6B,iBAC1C,wBAAM,KAAK,GAAO,EAClB,wBAAM,IAAI,GAAO,KACb,CACP;IAL4D,CAK5D,CAAA;IAED,OAAO,CACL,wBAAK,GAAG,EAAE,UAAU,EAAE,SAAS,EAAC,uBAAuB,iBACpD,UAAU,IAAI,cAAc,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,EACtE,OAAO,IAAI,cAAc,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,EACjE,UAAU,IAAI,cAAc,CAAC,EAAE,KAAK,EAAE,eAAe,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,EAC1E,eAAe,IAAI,cAAc,CAAC,EAAE,KAAK,EAAE,oBAAoB,EAAE,IAAI,EAAE,eAAe,EAAE,CAAC,KACtF,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,WAAW,CAAA"}
|
|
@@ -13,7 +13,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
13
13
|
import { useRef } from 'react';
|
|
14
14
|
import { Skeleton } from '../../Skeleton';
|
|
15
15
|
import '../../../styles/styles.scss';
|
|
16
|
-
var LOADING_MESSAGE_ITEMS =
|
|
16
|
+
var LOADING_MESSAGE_ITEMS = 6;
|
|
17
17
|
var LoadingMessage = function (_a) {
|
|
18
18
|
var theme = _a.theme, _b = _a.skeletonRowsCount, skeletonRowsCount = _b === void 0 ? LOADING_MESSAGE_ITEMS : _b;
|
|
19
19
|
var ref = useRef(null);
|
|
@@ -13,6 +13,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
13
13
|
import { useEffect, useRef, useState } from 'react';
|
|
14
14
|
import Popup from 'reactjs-popup';
|
|
15
15
|
import { components } from 'react-select';
|
|
16
|
+
import classNames from 'classnames';
|
|
16
17
|
import Avatar from '../../Avatar';
|
|
17
18
|
import ContactInfo from '../ContactInfo/ContactInfo';
|
|
18
19
|
import { isMobilePlatform, isWebPlatform } from '../../../helpers';
|
|
@@ -23,12 +24,26 @@ import '../../../styles/styles.scss';
|
|
|
23
24
|
var POPUP_APPEARANCE_DELAY = 1000;
|
|
24
25
|
var PADDING_LEFT = 8;
|
|
25
26
|
var INDENTS = 50;
|
|
27
|
+
var POPUP_MARGIN_TOP = 3;
|
|
28
|
+
var EMPTY_SPACE = 8;
|
|
29
|
+
var POPUP_HIDDEN_CLASSNAME = 'contact-info-hidden';
|
|
30
|
+
var POPUP_VERTICAL_POSITION;
|
|
31
|
+
(function (POPUP_VERTICAL_POSITION) {
|
|
32
|
+
POPUP_VERTICAL_POSITION["bottom"] = "bottom";
|
|
33
|
+
POPUP_VERTICAL_POSITION["top"] = "top";
|
|
34
|
+
})(POPUP_VERTICAL_POSITION || (POPUP_VERTICAL_POSITION = {}));
|
|
26
35
|
var Option = function (props) {
|
|
27
36
|
var _a;
|
|
28
37
|
var _b = props.data, label = _b.label, avatar = _b.avatar, email = _b.email, serverName = _b.serverName, company = _b.company, department = _b.department, companyPosition = _b.companyPosition, isMyContacts = _b.isMyContacts, platform = _b.platform, language = _b.language, setIsSearchable = _b.setIsSearchable, setModalData = _b.setModalData;
|
|
29
38
|
var ref = useRef(null);
|
|
39
|
+
var contactInfoRef = useRef(null);
|
|
40
|
+
var popupRef = useRef(null);
|
|
30
41
|
var _c = useState(0), left = _c[0], setLeft = _c[1];
|
|
31
42
|
var _d = useState(0), maxWidth = _d[0], setMaxWidth = _d[1];
|
|
43
|
+
var _e = useState(POPUP_VERTICAL_POSITION.bottom), popupVerticalPosition = _e[0], setPopupVerticalPosition = _e[1];
|
|
44
|
+
var _f = useState(POPUP_HIDDEN_CLASSNAME), hiddenClassName = _f[0], setHiddenClassName = _f[1];
|
|
45
|
+
var _g = useState(POPUP_MARGIN_TOP), popupMarginTop = _g[0], setPopupMarginTop = _g[1];
|
|
46
|
+
var _h = useState(null), timeoutId = _h[0], setTimeoutId = _h[1];
|
|
32
47
|
var clientRect = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
|
|
33
48
|
var clientRectLeft = ((clientRect === null || clientRect === void 0 ? void 0 : clientRect.left) || 0) + PADDING_LEFT;
|
|
34
49
|
var clientRectWidth = ((clientRect === null || clientRect === void 0 ? void 0 : clientRect.width) || INDENTS) - INDENTS;
|
|
@@ -42,11 +57,31 @@ var Option = function (props) {
|
|
|
42
57
|
var isIconVisible = !isMyContacts && isMobilePlatform(platform);
|
|
43
58
|
return isIconVisible && _jsx(ContactInfoIcon, { className: "smartapp-option__container--icon", onClick: handleContactInfoIconClick });
|
|
44
59
|
};
|
|
60
|
+
var calculatePopupVerticalPosition = function () {
|
|
61
|
+
var popupRefCurrent = popupRef.current;
|
|
62
|
+
var contactInfoRefCurrent = contactInfoRef.current;
|
|
63
|
+
if (popupRefCurrent && contactInfoRefCurrent) {
|
|
64
|
+
var _a = contactInfoRefCurrent.getBoundingClientRect(), height = _a.height, y = _a.y;
|
|
65
|
+
if (window.innerHeight - y <= height + EMPTY_SPACE) {
|
|
66
|
+
popupRefCurrent.close();
|
|
67
|
+
setPopupVerticalPosition(POPUP_VERTICAL_POSITION.top);
|
|
68
|
+
setPopupMarginTop(-POPUP_MARGIN_TOP);
|
|
69
|
+
var nextTimeoutId = setTimeout(function () { var _a; return (_a = popupRef.current) === null || _a === void 0 ? void 0 : _a.open(); }, 0);
|
|
70
|
+
setTimeoutId(nextTimeoutId);
|
|
71
|
+
}
|
|
72
|
+
setHiddenClassName('');
|
|
73
|
+
}
|
|
74
|
+
};
|
|
75
|
+
var handleClosePopup = function () { return timeoutId && clearTimeout(timeoutId); };
|
|
45
76
|
useEffect(function () {
|
|
46
77
|
setLeft(clientRectLeft);
|
|
47
78
|
setMaxWidth(clientRectWidth);
|
|
48
79
|
}, [clientRectLeft, clientRectWidth]);
|
|
49
|
-
var renderContactInfoPopup = function () { return (_jsx(Popup, __assign({
|
|
80
|
+
var renderContactInfoPopup = function () { return (_jsx(Popup, __assign({ ref: popupRef, onOpen: calculatePopupVerticalPosition, onClose: handleClosePopup, className: classNames('contact-info', hiddenClassName), position: "".concat(popupVerticalPosition, " center"), contentStyle: {
|
|
81
|
+
'--contact-info-content-margin-top': "".concat(popupMarginTop, "px"),
|
|
82
|
+
'--contact-info-content-left': "".concat(left, "px"),
|
|
83
|
+
'--contact-info-content-max-width': "".concat(maxWidth, "px"),
|
|
84
|
+
}, on: ['hover'], mouseEnterDelay: POPUP_APPEARANCE_DELAY, trigger: function () { return (_jsx("div", { children: _jsx(Avatar, { username: label, avatar: avatar, size: 32 }) })); } }, { children: _jsx(ContactInfo, { elementRef: contactInfoRef, language: language, serverName: serverName, company: company, department: department, companyPosition: companyPosition }) }))); };
|
|
50
85
|
return (_jsx(components.Option, __assign({}, props, { innerRef: function (el) {
|
|
51
86
|
ref.current = el;
|
|
52
87
|
} }, { children: _jsxs("div", __assign({ className: "smartapp-option" }, { children: [!isMyContacts && isWebPlatform(platform) ? renderContactInfoPopup() : _jsx(Avatar, { username: label, avatar: avatar, size: 32 }), _jsxs("div", __assign({ className: "smartapp-option__container" }, { children: [_jsxs("div", __assign({ className: "smartapp-option__container--info" }, { children: [_jsxs("div", __assign({ className: "smartapp-option__container--info__name" }, { children: [renderUserIcon(), _jsx("div", { children: label })] })), _jsx("div", __assign({ className: "smartapp-option__container--info__email" }, { children: email }))] })), renderContactInfoIcon()] }))] })) })));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Option.js","sourceRoot":"","sources":["../../../../../src/сomponents/UserDropdown/Option/Option.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC1D,OAAO,KAAK,MAAM,eAAe,CAAA;
|
|
1
|
+
{"version":3,"file":"Option.js","sourceRoot":"","sources":["../../../../../src/сomponents/UserDropdown/Option/Option.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { IUserDropdownProps } from './types';
|
|
2
2
|
import '../../styles/styles.scss';
|
|
3
|
+
export declare const EMAIL_FIELD = "email";
|
|
3
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
5
|
export default UserDropdown;
|
|
@@ -39,7 +39,7 @@ import { DEFAULT_INPUT_PADDING, ENTER_KEY, FILL_TYPE, INPUT_COUNTER_TIMEOUT, LAN
|
|
|
39
39
|
import selectStyles from './selectStyles';
|
|
40
40
|
import '../../styles/styles.scss';
|
|
41
41
|
var MIN_INPUT_SYMBOLS = 3;
|
|
42
|
-
var EMAIL_FIELD = 'email';
|
|
42
|
+
export var EMAIL_FIELD = 'email';
|
|
43
43
|
var THREE_DIGIT_NUMBER_WIDTH = 48;
|
|
44
44
|
var TWO_DIGIT_NUMBER_WIDTH = 40;
|
|
45
45
|
var SINGLE_DIGIT_NUMBER_WIDTH = 32;
|