@alfalab/core-components-universal-modal 3.0.7 → 3.1.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/components/content/base-content/index.css +1 -1
- package/components/content/base-content/index.module.css.js +1 -1
- package/components/content/desktop/desktop.css +2 -2
- package/components/content/desktop/desktop.module.css.js +1 -1
- package/components/content/mobile/mobile.css +3 -3
- package/components/content/mobile/mobile.module.css.js +1 -1
- package/components/footer/base-footer/index.css +3 -3
- package/components/footer/base-footer/index.module.css.js +1 -1
- package/components/footer/desktop/desktop.css +1 -1
- package/components/footer/desktop/desktop.module.css.js +1 -1
- package/components/footer/desktop/layout.css +9 -9
- package/components/footer/desktop/layout.module.css.js +1 -1
- package/components/footer/mobile/layout.mobile.css +8 -8
- package/components/footer/mobile/layout.mobile.module.css.js +1 -1
- package/components/footer/mobile/mobile.css +2 -2
- package/components/footer/mobile/mobile.module.css.js +1 -1
- package/components/header/base-header/index.css +4 -4
- package/components/header/base-header/index.module.css.js +1 -1
- package/components/header/desktop/desktop.css +5 -5
- package/components/header/desktop/desktop.module.css.js +1 -1
- package/components/header/mobile/mobile.css +3 -3
- package/components/header/mobile/mobile.module.css.js +1 -1
- package/cssm/desktop/components/center-modal/center-modal.js +13 -8
- package/cssm/desktop/components/center-modal/center-modal.js.map +1 -1
- package/cssm/desktop/components/center-modal/index.module.css +7 -3
- package/cssm/desktop/components/modal-content/modal-content.d.ts +3 -3
- package/cssm/desktop/components/modal-content/modal-content.js +1 -3
- package/cssm/desktop/components/modal-content/modal-content.js.map +1 -1
- package/cssm/desktop/components/side-modal/index.module.css +6 -2
- package/cssm/desktop/components/side-modal/side-modal.js +14 -9
- package/cssm/desktop/components/side-modal/side-modal.js.map +1 -1
- package/cssm/desktop/hooks/use-scrollable-container-ref.d.ts +10 -0
- package/cssm/desktop/hooks/use-scrollable-container-ref.js +27 -0
- package/cssm/desktop/hooks/use-scrollable-container-ref.js.map +1 -0
- package/desktop/components/center-modal/center-modal.js +13 -8
- package/desktop/components/center-modal/center-modal.js.map +1 -1
- package/desktop/components/center-modal/index.css +527 -523
- package/desktop/components/center-modal/index.module.css.js +1 -1
- package/desktop/components/center-modal/index.module.css.js.map +1 -1
- package/desktop/components/center-modal/transitions/safari-transitions.css +7 -7
- package/desktop/components/center-modal/transitions/safari-transitions.module.css.js +1 -1
- package/desktop/components/center-modal/transitions/transitions.css +7 -7
- package/desktop/components/center-modal/transitions/transitions.module.css.js +1 -1
- package/desktop/components/modal-content/modal-content.css +4 -4
- package/desktop/components/modal-content/modal-content.d.ts +3 -3
- package/desktop/components/modal-content/modal-content.js +1 -3
- package/desktop/components/modal-content/modal-content.js.map +1 -1
- package/desktop/components/modal-content/modal-content.module.css.js +1 -1
- package/desktop/components/side-modal/index.css +529 -525
- package/desktop/components/side-modal/index.module.css.js +1 -1
- package/desktop/components/side-modal/index.module.css.js.map +1 -1
- package/desktop/components/side-modal/side-modal.js +14 -9
- package/desktop/components/side-modal/side-modal.js.map +1 -1
- package/desktop/components/side-modal/transitions/transitions.css +71 -71
- package/desktop/components/side-modal/transitions/transitions.module.css.js +1 -1
- package/desktop/hooks/use-scrollable-container-ref.d.ts +10 -0
- package/desktop/hooks/use-scrollable-container-ref.js +27 -0
- package/desktop/hooks/use-scrollable-container-ref.js.map +1 -0
- package/desktop/styles/transitions/full-size-backdrop-transitions.css +13 -13
- package/desktop/styles/transitions/full-size-backdrop-transitions.module.css.js +1 -1
- package/desktop/styles/transitions/full-size-vertical-bottom-transitions.css +7 -7
- package/desktop/styles/transitions/full-size-vertical-bottom-transitions.module.css.js +1 -1
- package/desktop/styles/transitions/full-size-vertical-center-transitions.css +7 -7
- package/desktop/styles/transitions/full-size-vertical-center-transitions.module.css.js +1 -1
- package/desktop/styles/transitions/full-size-vertical-top-transitions.css +7 -7
- package/desktop/styles/transitions/full-size-vertical-top-transitions.module.css.js +1 -1
- package/esm/components/content/base-content/index.css +1 -1
- package/esm/components/content/base-content/index.module.css.js +1 -1
- package/esm/components/content/desktop/desktop.css +2 -2
- package/esm/components/content/desktop/desktop.module.css.js +1 -1
- package/esm/components/content/mobile/mobile.css +3 -3
- package/esm/components/content/mobile/mobile.module.css.js +1 -1
- package/esm/components/footer/base-footer/index.css +3 -3
- package/esm/components/footer/base-footer/index.module.css.js +1 -1
- package/esm/components/footer/desktop/desktop.css +1 -1
- package/esm/components/footer/desktop/desktop.module.css.js +1 -1
- package/esm/components/footer/desktop/layout.css +9 -9
- package/esm/components/footer/desktop/layout.module.css.js +1 -1
- package/esm/components/footer/mobile/layout.mobile.css +8 -8
- package/esm/components/footer/mobile/layout.mobile.module.css.js +1 -1
- package/esm/components/footer/mobile/mobile.css +2 -2
- package/esm/components/footer/mobile/mobile.module.css.js +1 -1
- package/esm/components/header/base-header/index.css +4 -4
- package/esm/components/header/base-header/index.module.css.js +1 -1
- package/esm/components/header/desktop/desktop.css +5 -5
- package/esm/components/header/desktop/desktop.module.css.js +1 -1
- package/esm/components/header/mobile/mobile.css +3 -3
- package/esm/components/header/mobile/mobile.module.css.js +1 -1
- package/esm/desktop/components/center-modal/center-modal.js +13 -8
- package/esm/desktop/components/center-modal/center-modal.js.map +1 -1
- package/esm/desktop/components/center-modal/index.css +527 -523
- package/esm/desktop/components/center-modal/index.module.css.js +1 -1
- package/esm/desktop/components/center-modal/index.module.css.js.map +1 -1
- package/esm/desktop/components/center-modal/transitions/safari-transitions.css +7 -7
- package/esm/desktop/components/center-modal/transitions/safari-transitions.module.css.js +1 -1
- package/esm/desktop/components/center-modal/transitions/transitions.css +7 -7
- package/esm/desktop/components/center-modal/transitions/transitions.module.css.js +1 -1
- package/esm/desktop/components/modal-content/modal-content.css +4 -4
- package/esm/desktop/components/modal-content/modal-content.d.ts +3 -3
- package/esm/desktop/components/modal-content/modal-content.js +1 -3
- package/esm/desktop/components/modal-content/modal-content.js.map +1 -1
- package/esm/desktop/components/modal-content/modal-content.module.css.js +1 -1
- package/esm/desktop/components/side-modal/index.css +529 -525
- package/esm/desktop/components/side-modal/index.module.css.js +1 -1
- package/esm/desktop/components/side-modal/index.module.css.js.map +1 -1
- package/esm/desktop/components/side-modal/side-modal.js +14 -9
- package/esm/desktop/components/side-modal/side-modal.js.map +1 -1
- package/esm/desktop/components/side-modal/transitions/transitions.css +71 -71
- package/esm/desktop/components/side-modal/transitions/transitions.module.css.js +1 -1
- package/esm/desktop/hooks/use-scrollable-container-ref.d.ts +10 -0
- package/esm/desktop/hooks/use-scrollable-container-ref.js +23 -0
- package/esm/desktop/hooks/use-scrollable-container-ref.js.map +1 -0
- package/esm/desktop/styles/transitions/full-size-backdrop-transitions.css +13 -13
- package/esm/desktop/styles/transitions/full-size-backdrop-transitions.module.css.js +1 -1
- package/esm/desktop/styles/transitions/full-size-vertical-bottom-transitions.css +7 -7
- package/esm/desktop/styles/transitions/full-size-vertical-bottom-transitions.module.css.js +1 -1
- package/esm/desktop/styles/transitions/full-size-vertical-center-transitions.css +7 -7
- package/esm/desktop/styles/transitions/full-size-vertical-center-transitions.module.css.js +1 -1
- package/esm/desktop/styles/transitions/full-size-vertical-top-transitions.css +7 -7
- package/esm/desktop/styles/transitions/full-size-vertical-top-transitions.module.css.js +1 -1
- package/esm/mobile/mobile.css +3 -3
- package/esm/mobile/mobile.module.css.js +1 -1
- package/esm/mobile/transitions/right-side-transitions.mobile.css +7 -7
- package/esm/mobile/transitions/right-side-transitions.mobile.module.css.js +1 -1
- package/esm/mobile/transitions/transitions.mobile.css +7 -7
- package/esm/mobile/transitions/transitions.mobile.module.css.js +1 -1
- package/mobile/mobile.css +3 -3
- package/mobile/mobile.module.css.js +1 -1
- package/mobile/transitions/right-side-transitions.mobile.css +7 -7
- package/mobile/transitions/right-side-transitions.mobile.module.css.js +1 -1
- package/mobile/transitions/transitions.mobile.css +7 -7
- package/mobile/transitions/transitions.mobile.module.css.js +1 -1
- package/modern/components/content/base-content/index.css +1 -1
- package/modern/components/content/base-content/index.module.css.js +1 -1
- package/modern/components/content/desktop/desktop.css +2 -2
- package/modern/components/content/desktop/desktop.module.css.js +1 -1
- package/modern/components/content/mobile/mobile.css +3 -3
- package/modern/components/content/mobile/mobile.module.css.js +1 -1
- package/modern/components/footer/base-footer/index.css +3 -3
- package/modern/components/footer/base-footer/index.module.css.js +1 -1
- package/modern/components/footer/desktop/desktop.css +1 -1
- package/modern/components/footer/desktop/desktop.module.css.js +1 -1
- package/modern/components/footer/desktop/layout.css +9 -9
- package/modern/components/footer/desktop/layout.module.css.js +1 -1
- package/modern/components/footer/mobile/layout.mobile.css +8 -8
- package/modern/components/footer/mobile/layout.mobile.module.css.js +1 -1
- package/modern/components/footer/mobile/mobile.css +2 -2
- package/modern/components/footer/mobile/mobile.module.css.js +1 -1
- package/modern/components/header/base-header/index.css +4 -4
- package/modern/components/header/base-header/index.module.css.js +1 -1
- package/modern/components/header/desktop/desktop.css +5 -5
- package/modern/components/header/desktop/desktop.module.css.js +1 -1
- package/modern/components/header/mobile/mobile.css +3 -3
- package/modern/components/header/mobile/mobile.module.css.js +1 -1
- package/modern/desktop/components/center-modal/center-modal.js +12 -8
- package/modern/desktop/components/center-modal/center-modal.js.map +1 -1
- package/modern/desktop/components/center-modal/index.css +527 -523
- package/modern/desktop/components/center-modal/index.module.css.js +1 -1
- package/modern/desktop/components/center-modal/index.module.css.js.map +1 -1
- package/modern/desktop/components/center-modal/transitions/safari-transitions.css +7 -7
- package/modern/desktop/components/center-modal/transitions/safari-transitions.module.css.js +1 -1
- package/modern/desktop/components/center-modal/transitions/transitions.css +7 -7
- package/modern/desktop/components/center-modal/transitions/transitions.module.css.js +1 -1
- package/modern/desktop/components/modal-content/modal-content.css +4 -4
- package/modern/desktop/components/modal-content/modal-content.d.ts +3 -3
- package/modern/desktop/components/modal-content/modal-content.js +1 -3
- package/modern/desktop/components/modal-content/modal-content.js.map +1 -1
- package/modern/desktop/components/modal-content/modal-content.module.css.js +1 -1
- package/modern/desktop/components/side-modal/index.css +529 -525
- package/modern/desktop/components/side-modal/index.module.css.js +1 -1
- package/modern/desktop/components/side-modal/index.module.css.js.map +1 -1
- package/modern/desktop/components/side-modal/side-modal.js +12 -8
- package/modern/desktop/components/side-modal/side-modal.js.map +1 -1
- package/modern/desktop/components/side-modal/transitions/transitions.css +71 -71
- package/modern/desktop/components/side-modal/transitions/transitions.module.css.js +1 -1
- package/modern/desktop/hooks/use-scrollable-container-ref.d.ts +10 -0
- package/modern/desktop/hooks/use-scrollable-container-ref.js +21 -0
- package/modern/desktop/hooks/use-scrollable-container-ref.js.map +1 -0
- package/modern/desktop/styles/transitions/full-size-backdrop-transitions.css +13 -13
- package/modern/desktop/styles/transitions/full-size-backdrop-transitions.module.css.js +1 -1
- package/modern/desktop/styles/transitions/full-size-vertical-bottom-transitions.css +7 -7
- package/modern/desktop/styles/transitions/full-size-vertical-bottom-transitions.module.css.js +1 -1
- package/modern/desktop/styles/transitions/full-size-vertical-center-transitions.css +7 -7
- package/modern/desktop/styles/transitions/full-size-vertical-center-transitions.module.css.js +1 -1
- package/modern/desktop/styles/transitions/full-size-vertical-top-transitions.css +7 -7
- package/modern/desktop/styles/transitions/full-size-vertical-top-transitions.module.css.js +1 -1
- package/modern/mobile/mobile.css +3 -3
- package/modern/mobile/mobile.module.css.js +1 -1
- package/modern/mobile/transitions/right-side-transitions.mobile.css +7 -7
- package/modern/mobile/transitions/right-side-transitions.mobile.module.css.js +1 -1
- package/modern/mobile/transitions/transitions.mobile.css +7 -7
- package/modern/mobile/transitions/transitions.mobile.module.css.js +1 -1
- package/moderncssm/desktop/components/center-modal/center-modal.js +12 -8
- package/moderncssm/desktop/components/center-modal/center-modal.js.map +1 -1
- package/moderncssm/desktop/components/center-modal/index.module.css +9 -4
- package/moderncssm/desktop/components/modal-content/modal-content.d.ts +3 -3
- package/moderncssm/desktop/components/modal-content/modal-content.js +1 -3
- package/moderncssm/desktop/components/modal-content/modal-content.js.map +1 -1
- package/moderncssm/desktop/components/side-modal/index.module.css +7 -2
- package/moderncssm/desktop/components/side-modal/side-modal.js +12 -8
- package/moderncssm/desktop/components/side-modal/side-modal.js.map +1 -1
- package/moderncssm/desktop/hooks/use-scrollable-container-ref.d.ts +10 -0
- package/moderncssm/desktop/hooks/use-scrollable-container-ref.js +21 -0
- package/moderncssm/desktop/hooks/use-scrollable-container-ref.js.map +1 -0
- package/package.json +3 -3
- package/src/desktop/components/center-modal/center-modal.module.css +1 -5
- package/src/desktop/components/center-modal/center-modal.tsx +14 -14
- package/src/desktop/components/center-modal/index.module.css +2 -1
- package/src/desktop/components/modal-content/modal-content.tsx +8 -9
- package/src/desktop/components/side-modal/index.module.css +2 -1
- package/src/desktop/components/side-modal/side-modal.module.css +0 -4
- package/src/desktop/components/side-modal/side-modal.tsx +14 -14
- package/src/desktop/hooks/use-scrollable-container-ref.ts +29 -0
- package/src/desktop/styles/common.module.css +10 -0
- package/cssm/desktop/hooks/use-outside-scroll.d.ts +0 -8
- package/cssm/desktop/hooks/use-outside-scroll.js +0 -21
- package/cssm/desktop/hooks/use-outside-scroll.js.map +0 -1
- package/cssm/desktop/hooks/useModalWheel.d.ts +0 -5
- package/cssm/desktop/hooks/useModalWheel.js +0 -20
- package/cssm/desktop/hooks/useModalWheel.js.map +0 -1
- package/desktop/hooks/use-outside-scroll.d.ts +0 -8
- package/desktop/hooks/use-outside-scroll.js +0 -21
- package/desktop/hooks/use-outside-scroll.js.map +0 -1
- package/desktop/hooks/useModalWheel.d.ts +0 -5
- package/desktop/hooks/useModalWheel.js +0 -20
- package/desktop/hooks/useModalWheel.js.map +0 -1
- package/esm/desktop/hooks/use-outside-scroll.d.ts +0 -8
- package/esm/desktop/hooks/use-outside-scroll.js +0 -17
- package/esm/desktop/hooks/use-outside-scroll.js.map +0 -1
- package/esm/desktop/hooks/useModalWheel.d.ts +0 -5
- package/esm/desktop/hooks/useModalWheel.js +0 -16
- package/esm/desktop/hooks/useModalWheel.js.map +0 -1
- package/modern/desktop/hooks/use-outside-scroll.d.ts +0 -8
- package/modern/desktop/hooks/use-outside-scroll.js +0 -17
- package/modern/desktop/hooks/use-outside-scroll.js.map +0 -1
- package/modern/desktop/hooks/useModalWheel.d.ts +0 -5
- package/modern/desktop/hooks/useModalWheel.js +0 -16
- package/modern/desktop/hooks/useModalWheel.js.map +0 -1
- package/moderncssm/desktop/hooks/use-outside-scroll.d.ts +0 -8
- package/moderncssm/desktop/hooks/use-outside-scroll.js +0 -17
- package/moderncssm/desktop/hooks/use-outside-scroll.js.map +0 -1
- package/moderncssm/desktop/hooks/useModalWheel.d.ts +0 -5
- package/moderncssm/desktop/hooks/useModalWheel.js +0 -16
- package/moderncssm/desktop/hooks/useModalWheel.js.map +0 -1
- package/src/desktop/hooks/use-outside-scroll.ts +0 -20
- package/src/desktop/hooks/useModalWheel.ts +0 -16
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"side-modal.js","sources":["../../../../src/desktop/components/side-modal/side-modal.tsx"],"sourcesContent":["import React, { forwardRef, useRef } from 'react';\nimport cn from 'classnames';\n\nimport { BaseModal } from '@alfalab/core-components-base-modal';\n\nimport {
|
|
1
|
+
{"version":3,"file":"side-modal.js","sources":["../../../../src/desktop/components/side-modal/side-modal.tsx"],"sourcesContent":["import React, { forwardRef, useRef } from 'react';\nimport cn from 'classnames';\n\nimport { BaseModal } from '@alfalab/core-components-base-modal';\n\nimport { useScrollableContainerRef } from '../../hooks/use-scrollable-container-ref';\nimport { type UniversalModalDesktopProps } from '../../types/props';\nimport { getFullSizeModalTransitions } from '../../utils/get-full-size-modal-transitions';\nimport { getHeightStyle } from '../../utils/get-height-style';\nimport { getMarginStyles } from '../../utils/get-margin-styles';\nimport { getWidthStyle } from '../../utils/get-width-style';\nimport { ModalContent } from '../modal-content/modal-content';\n\nimport { getDefaultTransitionProps } from './get-default-transition-props';\n\nimport styles from './index.module.css';\n\nexport const SideModal = forwardRef<HTMLDivElement, UniversalModalDesktopProps>((props, ref) => {\n const {\n width = 500,\n height = 'fullHeight',\n horizontalAlign = 'center',\n verticalAlign = 'center',\n overlay = true,\n open,\n dataTestId,\n className,\n children,\n margin,\n scrollableContainerRef: scrollableContainerRefProp,\n onClose,\n ...restProps\n } = props;\n const componentRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement>(null);\n const { handleWheel, scrollableContainerRef } = useScrollableContainerRef({\n overlay,\n refObject: scrollableContainerRefProp,\n });\n\n const {\n isFullSizeModal,\n componentTransitions: fullSizeModalContentTransitions,\n backdropTransitions: fullSizeModalBackdropTransitions,\n } = getFullSizeModalTransitions({ verticalAlign, width, height });\n\n const withoutOverlay = !overlay;\n\n return (\n <BaseModal\n {...restProps}\n open={open}\n dataTestId={dataTestId}\n ref={ref}\n componentRef={componentRef}\n contentElementRef={contentRef}\n scrollHandler='content'\n disableBlockingScroll={withoutOverlay}\n wrapperClassName={cn(styles.wrapper, styles.baseModalContainer, {\n [styles.wrapperAlignStart]: horizontalAlign === 'start',\n [styles.wrapperAlignEnd]: horizontalAlign === 'end',\n [styles.wrapperJustifyCenter]: verticalAlign === 'center',\n [styles.wrapperJustifyEnd]: verticalAlign === 'bottom',\n [styles.withoutOverlay]: withoutOverlay,\n })}\n className={cn(styles.component, className, styles.baseModalComponent, {\n ...getMarginStyles({ styles, margin }),\n })}\n contentClassName={styles.content}\n transitionProps={{\n ...getDefaultTransitionProps({\n horizontalAlign,\n margin,\n }),\n ...(isFullSizeModal && fullSizeModalContentTransitions),\n ...restProps.transitionProps,\n }}\n backdropProps={{\n shouldRender: overlay,\n ...(isFullSizeModal && fullSizeModalBackdropTransitions),\n ...restProps.backdropProps,\n }}\n componentDivProps={{\n style: {\n width: getWidthStyle(width, margin),\n ...getHeightStyle(height, margin),\n },\n }}\n onWheel={handleWheel}\n onClose={onClose}\n >\n <ModalContent height={height} scrollableContainerRef={scrollableContainerRef}>\n {children}\n </ModalContent>\n </BaseModal>\n );\n});\n"],"names":["forwardRef","__rest","useRef","useScrollableContainerRef","getFullSizeModalTransitions","React","BaseModal","__assign","cn","styles","getMarginStyles","getDefaultTransitionProps","getWidthStyle","getHeightStyle","ModalContent"],"mappings":"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"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { type RefObject, type WheelEvent } from 'react';
|
|
2
|
+
interface Params {
|
|
3
|
+
overlay: boolean;
|
|
4
|
+
refObject?: RefObject<HTMLDivElement>;
|
|
5
|
+
}
|
|
6
|
+
export declare const useScrollableContainerRef: ({ overlay, refObject }: Params) => {
|
|
7
|
+
handleWheel: (e: WheelEvent<HTMLElement>) => void;
|
|
8
|
+
scrollableContainerRef: RefObject<HTMLDivElement>;
|
|
9
|
+
};
|
|
10
|
+
export {};
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var React = require('react');
|
|
6
|
+
|
|
7
|
+
var useScrollableContainerRef = function (_a) {
|
|
8
|
+
var overlay = _a.overlay, refObject = _a.refObject;
|
|
9
|
+
var innerScrollableContainerRef = React.useRef(null);
|
|
10
|
+
var scrollableContainerRef = refObject || innerScrollableContainerRef;
|
|
11
|
+
var handleWheel = React.useCallback(function (e) {
|
|
12
|
+
var _a;
|
|
13
|
+
if (!overlay || e.target !== e.currentTarget) {
|
|
14
|
+
return;
|
|
15
|
+
}
|
|
16
|
+
(_a = scrollableContainerRef.current) === null || _a === void 0 ? void 0 : _a.scrollBy({
|
|
17
|
+
top: e.deltaY,
|
|
18
|
+
});
|
|
19
|
+
}, [overlay, scrollableContainerRef]);
|
|
20
|
+
return {
|
|
21
|
+
handleWheel: handleWheel,
|
|
22
|
+
scrollableContainerRef: scrollableContainerRef,
|
|
23
|
+
};
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
exports.useScrollableContainerRef = useScrollableContainerRef;
|
|
27
|
+
//# sourceMappingURL=use-scrollable-container-ref.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-scrollable-container-ref.js","sources":["../../../src/desktop/hooks/use-scrollable-container-ref.ts"],"sourcesContent":["import { type RefObject, useCallback, useRef, type WheelEvent } from 'react';\n\ninterface Params {\n overlay: boolean;\n refObject?: RefObject<HTMLDivElement>;\n}\n\nexport const useScrollableContainerRef = ({ overlay, refObject }: Params) => {\n const innerScrollableContainerRef = useRef<HTMLDivElement>(null);\n const scrollableContainerRef = refObject || innerScrollableContainerRef;\n\n const handleWheel = useCallback(\n (e: WheelEvent<HTMLElement>) => {\n if (!overlay || e.target !== e.currentTarget) {\n return;\n }\n\n scrollableContainerRef.current?.scrollBy({\n top: e.deltaY,\n });\n },\n [overlay, scrollableContainerRef],\n );\n\n return {\n handleWheel,\n scrollableContainerRef,\n };\n};\n"],"names":["useRef","useCallback"],"mappings":";;;;;;AAOO,IAAM,yBAAyB,GAAG,UAAC,EAA8B,EAAA;QAA5B,OAAO,GAAA,EAAA,CAAA,OAAA,EAAE,SAAS,GAAA,EAAA,CAAA,SAAA;AAC1D,IAAA,IAAM,2BAA2B,GAAGA,YAAM,CAAiB,IAAI,CAAC;AAChE,IAAA,IAAM,sBAAsB,GAAG,SAAS,IAAI,2BAA2B;AAEvE,IAAA,IAAM,WAAW,GAAGC,iBAAW,CAC3B,UAAC,CAA0B,EAAA;;QACvB,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,aAAa,EAAE;YAC1C;;AAGJ,QAAA,CAAA,EAAA,GAAA,sBAAsB,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,QAAQ,CAAC;YACrC,GAAG,EAAE,CAAC,CAAC,MAAM;AAChB,SAAA,CAAC;AACN,KAAC,EACD,CAAC,OAAO,EAAE,sBAAsB,CAAC,CACpC;IAED,OAAO;AACH,QAAA,WAAW,EAAA,WAAA;AACX,QAAA,sBAAsB,EAAA,sBAAA;KACzB;AACL;;;;"}
|
|
@@ -7,7 +7,7 @@ var React = require('react');
|
|
|
7
7
|
var cn = require('classnames');
|
|
8
8
|
var coreComponentsBaseModal = require('@alfalab/core-components-base-modal');
|
|
9
9
|
var coreComponentsShared = require('@alfalab/core-components-shared');
|
|
10
|
-
var
|
|
10
|
+
var useScrollableContainerRef = require('../../hooks/use-scrollable-container-ref.js');
|
|
11
11
|
var getFullSizeModalTransitions = require('../../utils/get-full-size-modal-transitions.js');
|
|
12
12
|
var getHeightStyle = require('../../utils/get-height-style.js');
|
|
13
13
|
var getMarginStyles = require('../../utils/get-margin-styles.js');
|
|
@@ -25,19 +25,24 @@ var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
|
|
|
25
25
|
// в safari некорректно отрабатывает transform:scale (???), поэтому применяем немного другую анимацию
|
|
26
26
|
var transitionProps = coreComponentsShared.isMacOS() && coreComponentsShared.isSafari() ? safariTransitions_module : transitions_module;
|
|
27
27
|
var CenterModal = React.forwardRef(function (props, ref) {
|
|
28
|
-
var _a
|
|
29
|
-
var dataTestId = props.dataTestId, className = props.className, open = props.open, children = props.children,
|
|
28
|
+
var _a;
|
|
29
|
+
var dataTestId = props.dataTestId, className = props.className, open = props.open, children = props.children, _b = props.width, width = _b === void 0 ? 500 : _b, _c = props.height, height = _c === void 0 ? 'hugContent' : _c, _d = props.verticalAlign, verticalAlign = _d === void 0 ? 'center' : _d, _e = props.overlay, overlay = _e === void 0 ? true : _e, margin = props.margin, scrollableContainerRefProp = props.scrollableContainerRef, onClose = props.onClose, restProps = tslib.__rest(props, ["dataTestId", "className", "open", "children", "width", "height", "verticalAlign", "overlay", "margin", "scrollableContainerRef", "onClose"]);
|
|
30
30
|
var componentRef = React.useRef(null);
|
|
31
|
-
var
|
|
32
|
-
|
|
33
|
-
|
|
31
|
+
var _f = useScrollableContainerRef.useScrollableContainerRef({
|
|
32
|
+
overlay: overlay,
|
|
33
|
+
refObject: scrollableContainerRefProp,
|
|
34
|
+
}), handleWheel = _f.handleWheel, scrollableContainerRef = _f.scrollableContainerRef;
|
|
35
|
+
var _g = getFullSizeModalTransitions.getFullSizeModalTransitions({ verticalAlign: verticalAlign, width: width, height: height }), isFullSizeModal = _g.isFullSizeModal, fullSizeModalContentTransitions = _g.componentTransitions, fullSizeModalBackdropTransitions = _g.backdropTransitions;
|
|
36
|
+
var withoutOverlay = !overlay;
|
|
37
|
+
return (React__default.default.createElement(coreComponentsBaseModal.BaseModal, tslib.__assign({}, restProps, { open: open, dataTestId: dataTestId, ref: ref, componentRef: componentRef, scrollHandler: 'content', disableBlockingScroll: withoutOverlay, wrapperClassName: cn__default.default(index_module.baseModalContainer, (_a = {},
|
|
34
38
|
_a[index_module.wrapperJustifyStart] = verticalAlign === 'top',
|
|
35
39
|
_a[index_module.wrapperJustifyCenter] = verticalAlign === 'center',
|
|
36
40
|
_a[index_module.wrapperJustifyEnd] = verticalAlign === 'bottom',
|
|
37
|
-
_a
|
|
41
|
+
_a[index_module.withoutOverlay] = withoutOverlay,
|
|
42
|
+
_a)), className: cn__default.default(index_module.component, className, index_module.baseModalComponent, tslib.__assign({}, getMarginStyles.getMarginStyles({ styles: index_module, margin: margin }))), transitionProps: tslib.__assign(tslib.__assign({ classNames: transitionProps }, (isFullSizeModal && fullSizeModalContentTransitions)), restProps.transitionProps), backdropProps: tslib.__assign(tslib.__assign({ shouldRender: overlay }, (isFullSizeModal && fullSizeModalBackdropTransitions)), restProps.backdropProps), componentDivProps: {
|
|
38
43
|
style: tslib.__assign({ width: getWidthStyle.getWidthStyle(width, margin) }, getHeightStyle.getHeightStyle(height, margin)),
|
|
39
44
|
}, onWheel: handleWheel, onClose: onClose }),
|
|
40
|
-
React__default.default.createElement(modalContent.ModalContent, { height: height,
|
|
45
|
+
React__default.default.createElement(modalContent.ModalContent, { height: height, scrollableContainerRef: scrollableContainerRef }, children)));
|
|
41
46
|
});
|
|
42
47
|
|
|
43
48
|
exports.CenterModal = CenterModal;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"center-modal.js","sources":["../../../src/desktop/components/center-modal/center-modal.tsx"],"sourcesContent":["import React, { forwardRef, useRef } from 'react';\nimport cn from 'classnames';\n\nimport { BaseModal } from '@alfalab/core-components-base-modal';\nimport { isMacOS, isSafari } from '@alfalab/core-components-shared';\n\nimport {
|
|
1
|
+
{"version":3,"file":"center-modal.js","sources":["../../../src/desktop/components/center-modal/center-modal.tsx"],"sourcesContent":["import React, { forwardRef, useRef } from 'react';\nimport cn from 'classnames';\n\nimport { BaseModal } from '@alfalab/core-components-base-modal';\nimport { isMacOS, isSafari } from '@alfalab/core-components-shared';\n\nimport { useScrollableContainerRef } from '../../hooks/use-scrollable-container-ref';\nimport { type UniversalModalDesktopProps } from '../../types/props';\nimport { getFullSizeModalTransitions } from '../../utils/get-full-size-modal-transitions';\nimport { getHeightStyle } from '../../utils/get-height-style';\nimport { getMarginStyles } from '../../utils/get-margin-styles';\nimport { getWidthStyle } from '../../utils/get-width-style';\nimport { ModalContent } from '../modal-content/modal-content';\n\nimport styles from './index.module.css';\nimport safariTransitions from './transitions/safari-transitions.module.css';\nimport transitions from './transitions/transitions.module.css';\n\n// в safari некорректно отрабатывает transform:scale (???), поэтому применяем немного другую анимацию\nconst transitionProps = isMacOS() && isSafari() ? safariTransitions : transitions;\n\nexport const CenterModal = forwardRef<HTMLDivElement, UniversalModalDesktopProps>((props, ref) => {\n const {\n dataTestId,\n className,\n open,\n children,\n width = 500,\n height = 'hugContent',\n verticalAlign = 'center',\n overlay = true,\n margin,\n scrollableContainerRef: scrollableContainerRefProp,\n onClose,\n ...restProps\n } = props;\n\n const componentRef = useRef<HTMLDivElement>(null);\n const { handleWheel, scrollableContainerRef } = useScrollableContainerRef({\n overlay,\n refObject: scrollableContainerRefProp,\n });\n\n const {\n isFullSizeModal,\n componentTransitions: fullSizeModalContentTransitions,\n backdropTransitions: fullSizeModalBackdropTransitions,\n } = getFullSizeModalTransitions({ verticalAlign, width, height });\n\n const withoutOverlay = !overlay;\n\n return (\n <BaseModal\n {...restProps}\n open={open}\n dataTestId={dataTestId}\n ref={ref}\n componentRef={componentRef}\n scrollHandler='content'\n disableBlockingScroll={withoutOverlay}\n wrapperClassName={cn(styles.baseModalContainer, {\n [styles.wrapperJustifyStart]: verticalAlign === 'top',\n [styles.wrapperJustifyCenter]: verticalAlign === 'center',\n [styles.wrapperJustifyEnd]: verticalAlign === 'bottom',\n [styles.withoutOverlay]: withoutOverlay,\n })}\n className={cn(styles.component, className, styles.baseModalComponent, {\n ...getMarginStyles({ styles, margin }),\n })}\n transitionProps={{\n classNames: transitionProps,\n ...(isFullSizeModal && fullSizeModalContentTransitions),\n ...restProps.transitionProps,\n }}\n backdropProps={{\n shouldRender: overlay,\n ...(isFullSizeModal && fullSizeModalBackdropTransitions),\n ...restProps.backdropProps,\n }}\n componentDivProps={{\n style: {\n width: getWidthStyle(width, margin),\n ...getHeightStyle(height, margin),\n },\n }}\n onWheel={handleWheel}\n onClose={onClose}\n >\n <ModalContent height={height} scrollableContainerRef={scrollableContainerRef}>\n {children}\n </ModalContent>\n </BaseModal>\n );\n});\n"],"names":["isMacOS","isSafari","safariTransitions","transitions","forwardRef","__rest","useRef","useScrollableContainerRef","getFullSizeModalTransitions","React","BaseModal","__assign","cn","styles","getMarginStyles","getWidthStyle","getHeightStyle","ModalContent"],"mappings":"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"}
|