@expressms/smartapp-ui 2.6.0 → 2.6.1
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/styles/styles.scss +2 -2
- package/build/main//321/201omponents/Modal/Modal.d.ts +1 -1
- package/build/main//321/201omponents/Modal/Modal.js +19 -6
- package/build/main//321/201omponents/Modal/Modal.js.map +1 -1
- package/build/main//321/201omponents/Modal/types.d.ts +1 -0
- package/build/main//321/201omponents/ScrollBar/ScrollBar.d.ts +2 -1
- package/build/main//321/201omponents/ScrollBar/ScrollBar.js +15 -15
- package/build/main//321/201omponents/ScrollBar/ScrollBar.js.map +1 -1
- package/build/main//321/201omponents/ScrollBar/types.d.ts +2 -0
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { IModalProps } from './types';
|
|
2
2
|
import '../../styles/styles.scss';
|
|
3
|
-
declare const Modal: ({ isModalOpen, isClosableOutside, isCloseIconHidden, layoutType, content, bottomContent, handleCloseModal, title, platform, titleStyles, contentStyles, iconColor, backgroundColor, }: IModalProps) => import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
declare const Modal: ({ isModalOpen, isClosableOutside, isCloseIconHidden, modalId, layoutType, content, bottomContent, handleCloseModal, title, platform, titleStyles, contentStyles, iconColor, backgroundColor, }: IModalProps) => import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
export default Modal;
|
|
@@ -15,23 +15,36 @@ import Popup from 'reactjs-popup';
|
|
|
15
15
|
import { isNil } from 'lodash';
|
|
16
16
|
import classNames from 'classnames';
|
|
17
17
|
import ScrollBar from '../ScrollBar';
|
|
18
|
+
import { DEFAULT_SCROLL_BAR_HEIGHT } from '../ScrollBar/ScrollBar';
|
|
18
19
|
import { ReactComponent as CloseIcon } from '../../assets/icons/cancel-cross.svg';
|
|
19
20
|
import { CLOSABLE_CLASS_NAME, FIXED_WIDTH_CLASS_NAME, LAYOUT_TYPE, PLATFORM } from '../../constants';
|
|
20
21
|
import { getClassNames, getColor, isMobilePlatform, isModalHasFixedWidth } from '../../helpers';
|
|
21
22
|
import '../../styles/styles.scss';
|
|
23
|
+
var SCROLL_BAR_HEIGHT_WITH_PADDING = 'calc(100% - 24px)';
|
|
24
|
+
var MAX_MODAL_HEIGHT = 394;
|
|
25
|
+
var CONTENT_PADDING_TOP = 32;
|
|
26
|
+
var MODAL_TITLE_MARGIN_BOTTOM = 16;
|
|
22
27
|
var Modal = function (_a) {
|
|
23
|
-
var isModalOpen = _a.isModalOpen, _b = _a.isClosableOutside, isClosableOutside = _b === void 0 ? true : _b, isCloseIconHidden = _a.isCloseIconHidden, _c = _a.layoutType, layoutType = _c === void 0 ? LAYOUT_TYPE.minimal : _c, content = _a.content, bottomContent = _a.bottomContent, handleCloseModal = _a.handleCloseModal, title = _a.title, _d = _a.platform, platform = _d === void 0 ? PLATFORM.web : _d, titleStyles = _a.titleStyles, contentStyles = _a.contentStyles, iconColor = _a.iconColor, backgroundColor = _a.backgroundColor;
|
|
28
|
+
var isModalOpen = _a.isModalOpen, _b = _a.isClosableOutside, isClosableOutside = _b === void 0 ? true : _b, isCloseIconHidden = _a.isCloseIconHidden, modalId = _a.modalId, _c = _a.layoutType, layoutType = _c === void 0 ? LAYOUT_TYPE.minimal : _c, content = _a.content, bottomContent = _a.bottomContent, handleCloseModal = _a.handleCloseModal, title = _a.title, _d = _a.platform, platform = _d === void 0 ? PLATFORM.web : _d, titleStyles = _a.titleStyles, contentStyles = _a.contentStyles, iconColor = _a.iconColor, backgroundColor = _a.backgroundColor;
|
|
24
29
|
var isCloseIconNotVisible = isNil(isCloseIconHidden) ? isMobilePlatform(platform) : isCloseIconHidden;
|
|
25
30
|
var additionalClassName = isModalHasFixedWidth({ layoutType: layoutType, platform: platform }) ? [platform, FIXED_WIDTH_CLASS_NAME] : [platform];
|
|
26
31
|
var popupAdditionalClassName = isClosableOutside ? [platform, CLOSABLE_CLASS_NAME] : [platform];
|
|
27
32
|
var ref = useRef(null);
|
|
33
|
+
var titleRef = useRef(null);
|
|
34
|
+
var bottomRef = useRef(null);
|
|
28
35
|
var _e = useState(''), containerHeight = _e[0], setContainerHeight = _e[1];
|
|
29
36
|
var handleMouseDown = function (event) { return event.stopPropagation(); };
|
|
30
37
|
var handleSetContainerHeight = function (contentRef) {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
38
|
+
var _a, _b;
|
|
39
|
+
if (!contentRef)
|
|
40
|
+
return;
|
|
41
|
+
var height = contentRef.getBoundingClientRect().height;
|
|
42
|
+
var titleHeight = ((_a = titleRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height) || 0;
|
|
43
|
+
var bottomContentHeight = ((_b = bottomRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().height) || 0;
|
|
44
|
+
var titleHeightWithMargin = titleHeight ? titleHeight + MODAL_TITLE_MARGIN_BOTTOM : titleHeight;
|
|
45
|
+
var defaultContentHeight = MAX_MODAL_HEIGHT - titleHeightWithMargin - CONTENT_PADDING_TOP;
|
|
46
|
+
var maxContentHeightValue = bottomContent ? defaultContentHeight - bottomContentHeight : defaultContentHeight;
|
|
47
|
+
setContainerHeight("".concat(height > maxContentHeightValue ? maxContentHeightValue : height, "px"));
|
|
35
48
|
};
|
|
36
49
|
useEffect(function () {
|
|
37
50
|
document.documentElement.style.setProperty('--modal-background', getColor(backgroundColor));
|
|
@@ -47,7 +60,7 @@ var Modal = function (_a) {
|
|
|
47
60
|
document === null || document === void 0 ? void 0 : document.removeEventListener('click', checkIfClickedOutside, true);
|
|
48
61
|
};
|
|
49
62
|
}, [isModalOpen, isClosableOutside, handleCloseModal]);
|
|
50
|
-
return (_jsx(Popup, __assign({ className: getClassNames({ className: 'modal', delimiter: '-', additionalClassName: popupAdditionalClassName }), closeOnDocumentClick: isClosableOutside, modal: true, open: isModalOpen }, { children: _jsx("div", __assign({ ref: ref, className: getClassNames({ className: 'smartapp-modal', delimiter: '__', additionalClassName: additionalClassName }), onMouseDown: handleMouseDown }, { children: _jsxs("div", __assign({ className: getClassNames({ className: 'smartapp-modal__content', delimiter: '--', additionalClassName: platform }), style: contentStyles }, { children: [title && (_jsx("p", __assign({ className: "smartapp-modal__content--title", style: titleStyles }, { children: title }))), isClosableOutside && !isCloseIconNotVisible && (_jsx("div", __assign({ onClick: handleCloseModal, className: "smartapp-modal__content--close-icon" }, { children: _jsx(CloseIcon, { style: { color: getColor(iconColor) } }) }))), _jsx(ScrollBar, { content: _jsx("div", __assign({ ref: handleSetContainerHeight, className: classNames('smartapp-modal__content--pr', { 'smartapp-modal__content--pb': !bottomContent }) }, { children: content })), containerHeight: containerHeight }), bottomContent && (_jsx("div", __assign({ className: classNames('smartapp-modal__content--bottom', 'smartapp-modal__content--pr', 'smartapp-modal__content--pb') }, { children: bottomContent })))] })) })) })));
|
|
63
|
+
return (_jsx(Popup, __assign({ className: getClassNames({ className: 'modal', delimiter: '-', additionalClassName: popupAdditionalClassName }), closeOnDocumentClick: isClosableOutside, modal: true, open: isModalOpen }, { children: _jsx("div", __assign({ ref: ref, className: getClassNames({ className: 'smartapp-modal', delimiter: '__', additionalClassName: additionalClassName }), onMouseDown: handleMouseDown }, { children: _jsxs("div", __assign({ className: getClassNames({ className: 'smartapp-modal__content', delimiter: '--', additionalClassName: platform }), style: contentStyles }, { children: [title && (_jsx("p", __assign({ ref: titleRef, className: "smartapp-modal__content--title", style: titleStyles }, { children: title }))), isClosableOutside && !isCloseIconNotVisible && (_jsx("div", __assign({ onClick: handleCloseModal, className: "smartapp-modal__content--close-icon" }, { children: _jsx(CloseIcon, { style: { color: getColor(iconColor) } }) }))), _jsx(ScrollBar, { contentId: modalId, content: _jsx("div", __assign({ ref: handleSetContainerHeight, className: classNames('smartapp-modal__content--pr', { 'smartapp-modal__content--pb': !bottomContent }) }, { children: content })), containerHeight: containerHeight, trackHeight: bottomContent ? DEFAULT_SCROLL_BAR_HEIGHT : SCROLL_BAR_HEIGHT_WITH_PADDING }), bottomContent && (_jsx("div", __assign({ ref: bottomRef, className: classNames('smartapp-modal__content--bottom', 'smartapp-modal__content--pr', 'smartapp-modal__content--pb') }, { children: bottomContent })))] })) })) })));
|
|
51
64
|
};
|
|
52
65
|
export default Modal;
|
|
53
66
|
//# sourceMappingURL=Modal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../../src/сomponents/Modal/Modal.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC1D,OAAO,KAAK,MAAM,eAAe,CAAA;AACjC,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAA;AAC9B,OAAO,UAAU,MAAM,YAAY,CAAA;AACnC,OAAO,SAAS,MAAM,cAAc,CAAA;AACpC,OAAO,EAAE,cAAc,IAAI,SAAS,EAAE,MAAM,qCAAqC,CAAA;AACjF,OAAO,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AACpG,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAA;AAE/F,OAAO,0BAA0B,CAAA;AAEjC,IAAM,KAAK,GAAG,UAAC,
|
|
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 { IScrollBarProps } from './types';
|
|
2
2
|
import '../../styles/styles.scss';
|
|
3
|
-
declare const
|
|
3
|
+
export declare const DEFAULT_SCROLL_BAR_HEIGHT = "100%";
|
|
4
|
+
declare const ScrollBar: ({ contentId, content, handleScroll, width, hideDuration, containerHeight, trackHeight, }: IScrollBarProps) => import("react/jsx-runtime").JSX.Element;
|
|
4
5
|
export default ScrollBar;
|
|
@@ -16,35 +16,35 @@ import Scrollbar from 'react-scrollbars-custom';
|
|
|
16
16
|
import { v4 as uuidv4 } from 'uuid';
|
|
17
17
|
import { DEFAULT_SCROLL_BAR_HIDE_DURATION, DEFAULT_SCROLL_BAR_WIDTH } from '../../constants';
|
|
18
18
|
import '../../styles/styles.scss';
|
|
19
|
-
var DEFAULT_SCROLL_BAR_HEIGHT = '100%';
|
|
19
|
+
export var DEFAULT_SCROLL_BAR_HEIGHT = '100%';
|
|
20
20
|
var HIDE_THUMB_CLASSNAME = 'smartapp-scroll__thumb';
|
|
21
21
|
var SHOW_THUMB_CLASSNAME = "".concat(HIDE_THUMB_CLASSNAME, "--show ").concat(HIDE_THUMB_CLASSNAME);
|
|
22
22
|
var ScrollBar = function (_a) {
|
|
23
|
-
var content = _a.content, handleScroll = _a.handleScroll, _b = _a.width, width = _b === void 0 ? DEFAULT_SCROLL_BAR_WIDTH : _b, _c = _a.hideDuration, hideDuration = _c === void 0 ? DEFAULT_SCROLL_BAR_HIDE_DURATION : _c, _d = _a.containerHeight, containerHeight = _d === void 0 ? DEFAULT_SCROLL_BAR_HEIGHT : _d;
|
|
24
|
-
var
|
|
25
|
-
var
|
|
26
|
-
var generateThumbClassName = useCallback(function () { return (scrolling ? SHOW_THUMB_CLASSNAME : HIDE_THUMB_CLASSNAME); }, [scrolling]);
|
|
27
|
-
var generateScrollerClassNames = function () { return ({
|
|
28
|
-
'smartapp-scroll__scroller--width-6': width === 6,
|
|
29
|
-
'smartapp-scroll__scroller--width-5': width === 5,
|
|
30
|
-
'smartapp-scroll__scroller--width-4': width === 4,
|
|
31
|
-
}); };
|
|
23
|
+
var contentId = _a.contentId, content = _a.content, handleScroll = _a.handleScroll, _b = _a.width, width = _b === void 0 ? DEFAULT_SCROLL_BAR_WIDTH : _b, _c = _a.hideDuration, hideDuration = _c === void 0 ? DEFAULT_SCROLL_BAR_HIDE_DURATION : _c, _d = _a.containerHeight, containerHeight = _d === void 0 ? DEFAULT_SCROLL_BAR_HEIGHT : _d, _e = _a.trackHeight, trackHeight = _e === void 0 ? DEFAULT_SCROLL_BAR_HEIGHT : _e;
|
|
24
|
+
var _f = useState(uuidv4()), scrollbarKey = _f[0], setScrollbarKey = _f[1];
|
|
25
|
+
var _g = useState(false), scrolling = _g[0], setScrolling = _g[1];
|
|
32
26
|
useEffect(function () {
|
|
33
27
|
var debounceTimeout = setTimeout(function () { return setScrolling(false); }, hideDuration);
|
|
34
28
|
return function () { return clearTimeout(debounceTimeout); };
|
|
35
29
|
/* eslint-disable-next-line */
|
|
36
30
|
}, [scrolling]);
|
|
37
31
|
useLayoutEffect(function () {
|
|
38
|
-
|
|
32
|
+
if (contentId) {
|
|
39
33
|
setScrolling(false);
|
|
40
|
-
|
|
41
|
-
}
|
|
42
|
-
}, [
|
|
34
|
+
setScrollbarKey(contentId);
|
|
35
|
+
}
|
|
36
|
+
}, [contentId]);
|
|
43
37
|
var onScroll = function () {
|
|
44
38
|
handleScroll === null || handleScroll === void 0 ? void 0 : handleScroll();
|
|
45
39
|
setScrolling(true);
|
|
46
40
|
};
|
|
47
|
-
|
|
41
|
+
var generateThumbClassName = useCallback(function () { return (scrolling ? SHOW_THUMB_CLASSNAME : HIDE_THUMB_CLASSNAME); }, [scrolling]);
|
|
42
|
+
var generateScrollerStyles = function () { return ({ '--scroller-height': trackHeight }); };
|
|
43
|
+
var generateTrackYProps = function () { return ({
|
|
44
|
+
className: classNames('smartapp-scroll__scroller', "smartapp-scroll__scroller--width-".concat(width)),
|
|
45
|
+
style: generateScrollerStyles(),
|
|
46
|
+
}); };
|
|
47
|
+
return (_jsx("div", __assign({ style: { height: containerHeight }, className: "smartapp-scroll" }, { children: _jsx(Scrollbar, __assign({ native: false, mobileNative: false, removeTracksWhenNotUsed: true, onScroll: onScroll, wrapperProps: { className: 'smartapp-scroll__wrapper' }, thumbYProps: { className: generateThumbClassName() }, trackYProps: generateTrackYProps() }, { children: content }), scrollbarKey) })));
|
|
48
48
|
};
|
|
49
49
|
export default ScrollBar;
|
|
50
50
|
//# sourceMappingURL=ScrollBar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScrollBar.js","sourceRoot":"","sources":["../../../../src/сomponents/ScrollBar/ScrollBar.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAc,EAAE,WAAW,EAAE,SAAS,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChF,OAAO,UAAU,MAAM,YAAY,CAAA;AACnC,OAAO,SAAS,MAAM,yBAAyB,CAAA;AAC/C,OAAO,EAAE,EAAE,IAAI,MAAM,EAAE,MAAM,MAAM,CAAA;AAEnC,OAAO,EAAE,gCAAgC,EAAE,wBAAwB,EAAE,MAAM,iBAAiB,CAAA;AAC5F,OAAO,0BAA0B,CAAA;AAEjC,IAAM,yBAAyB,GAAG,MAAM,CAAA;
|
|
1
|
+
{"version":3,"file":"ScrollBar.js","sourceRoot":"","sources":["../../../../src/сomponents/ScrollBar/ScrollBar.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
2
|
import { IntRange } from '../types';
|
|
3
3
|
export interface IScrollBarProps {
|
|
4
|
+
trackHeight?: string;
|
|
4
5
|
containerHeight?: string;
|
|
5
6
|
width?: IntRange<4, 7>;
|
|
6
7
|
hideDuration?: number;
|
|
7
8
|
handleScroll?: () => void;
|
|
8
9
|
content: ReactNode;
|
|
10
|
+
contentId?: string;
|
|
9
11
|
}
|