@alfalab/core-components-universal-modal 1.0.0

package/moderncssm/desktop/components/center-modal/center-modal.js

@@ -0,0 +1,42 @@
+import React, { forwardRef, useRef } from 'react';
+import cn from 'classnames';
+import { BaseModal } from '@alfalab/core-components-base-modal/moderncssm';
+import { os, browser } from '@alfalab/core-components-shared/moderncssm';
+import { useModalHeight } from '../../hooks/useModalHeight.js';
+import { useModalWheel } from '../../hooks/useModalWheel.js';
+import { useModalWidth } from '../../hooks/useModalWidth.js';
+import { getFullSizeModalTransitions } from '../../utils/get-full-size-modal-transitions.js';
+import { getMargins } from '../../utils/get-margins.js';
+import { BaseUniversalModalContent } from '../base-universal-modal-content/base-universal-modal-content.js';
+import styles from './styles/index.module.css';
+import safariTransitions from './styles/transitions/safari-transitions.module.css';
+import transitions from './styles/transitions/transitions.module.css';
+
+// в safari некорректно отрабатывает transform:scale (???), поэтому применяем немного другую анимацию
+const transitionProps = os.isMacOS() && browser.isSafari() ? safariTransitions : transitions;
+const CenterModal = forwardRef((props, ref) => {
+    const { dataTestId, className, open, children, width = 500, height = 'fullHeight', verticalAlign = 'center', overlay = true, margin, onClose, ...restProps } = props;
+    const componentRef = useRef(null);
+    useModalWidth(width, open, componentRef);
+    useModalHeight(height, open, componentRef);
+    const { wheelDeltaY, handleWheel } = useModalWheel(overlay);
+    const { isFullSizeModal, componentTransitions: fullSizeModalContentTransitions, backdropTransitions: fullSizeModalBackdropTransitions, } = getFullSizeModalTransitions({ verticalAlign, width, height });
+    return (React.createElement(BaseModal, { ...restProps, dataTestId: dataTestId, ref: ref, componentRef: componentRef, transitionProps: {
+            classNames: transitionProps,
+            ...(isFullSizeModal && fullSizeModalContentTransitions),
+            ...restProps.transitionProps,
+        }, backdropProps: {
+            transparent: !overlay,
+            ...(isFullSizeModal && fullSizeModalBackdropTransitions),
+            ...restProps.backdropProps,
+        }, className: cn(styles.component, className, {
+            [styles.overlayHidden]: !overlay,
+            [styles.verticalTop]: verticalAlign === 'top',
+            [styles.verticalBottom]: verticalAlign === 'bottom',
+            ...getMargins({ styles, margin }),
+        }), scrollHandler: 'content', open: open, disableBlockingScroll: !overlay, onWheel: handleWheel, onClose: onClose },
+        React.createElement("div", { className: styles.container },
+            React.createElement(BaseUniversalModalContent, { wheelDeltaY: wheelDeltaY }, children))));
+});
+
+export { CenterModal };

package/moderncssm/desktop/components/center-modal/index.d.ts

@@ -0,0 +1 @@
+export { CenterModal } from "./center-modal";

package/moderncssm/desktop/components/center-modal/index.js

@@ -0,0 +1 @@
+export { CenterModal } from './center-modal.js';

package/moderncssm/desktop/components/center-modal/styles/center-modal.module.css

@@ -0,0 +1,38 @@
+/* */
+
+:root {
+
+    /* scroll */
+}
+
+.component {
+    min-width: 500px;
+    width: 500px;
+    min-height: 264px;
+    height: 100%;
+    border-radius: var(--border-radius-24);
+    overflow-x: hidden;
+
+    /*
+        Применяем аппаратное ускорение с помощью will-change и backface-visibility
+        Также в классах анимации добавлен translateZ(0)
+    */
+    will-change: transform, opacity;
+    backface-visibility: hidden
+}
+
+.component.overlayHidden {
+        box-shadow: var(--shadow-m);
+    }
+
+.component .container {
+        height: 100%;
+    }
+
+.verticalTop {
+    margin-top: 0;
+}
+
+.verticalBottom {
+    margin-bottom: 0;
+}