@alfalab/core-components-notification-manager 5.2.9 → 5.3.1

package/component.js

@@ -15,7 +15,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"notification-manager__component_1umri","notification":"notification-manager__notification_1umri","enter":"notification-manager__enter_1umri","enterActive":"notification-manager__enterActive_1umri","exit":"notification-manager__exit_1umri","exitActive":"notification-manager__exitActive_1umri"};
+var styles = {"component":"notification-manager__component_18uty","notification":"notification-manager__notification_18uty","enter":"notification-manager__enter_18uty","enterActive":"notification-manager__enterActive_18uty","exit":"notification-manager__exit_18uty","exitActive":"notification-manager__exitActive_18uty"};
 require('./index.css')
 
 var CSS_TRANSITION_CLASS_NAMES = {

package/esm/component.js

@@ -6,7 +6,7 @@ import { Portal } from '@alfalab/core-components-portal/esm';
 import { stackingOrder, Stack } from '@alfalab/core-components-stack/esm';
 import { Notification } from './components/notification/component.js';
 
-var styles = {"component":"notification-manager__component_1umri","notification":"notification-manager__notification_1umri","enter":"notification-manager__enter_1umri","enterActive":"notification-manager__enterActive_1umri","exit":"notification-manager__exit_1umri","exitActive":"notification-manager__exitActive_1umri"};
+var styles = {"component":"notification-manager__component_18uty","notification":"notification-manager__notification_18uty","enter":"notification-manager__enter_18uty","enterActive":"notification-manager__enterActive_18uty","exit":"notification-manager__exit_18uty","exitActive":"notification-manager__exitActive_18uty"};
 require('./index.css')
 
 var CSS_TRANSITION_CLASS_NAMES = {

package/esm/index.css

@@ -1,11 +1,11 @@
-/* hash: a45ka */
+/* hash: 1rgsa */
 :root {
     --gap-s: 12px;
     --gap-xl: 24px;
     --gap-4xl: 48px;
 }
 
-.notification-manager__component_1umri {
+.notification-manager__component_18uty {
     position: fixed;
     top: 0;
     right: var(--gap-s);
@@ -13,48 +13,48 @@
     flex-direction: column;
 }
 
-.notification-manager__component_1umri .notification-manager__notification_1umri {
+.notification-manager__component_18uty .notification-manager__notification_18uty {
     position: static;
     width: calc(100vw - var(--gap-xl));
     margin-top: var(--gap-s);
     will-change: transform;
 }
 
-.notification-manager__enter_1umri {
+.notification-manager__enter_18uty {
     visibility: hidden;
     transform: translate(0, -500px);
 }
 
-.notification-manager__enterActive_1umri {
+.notification-manager__enterActive_18uty {
     visibility: visible;
     transform: translate(0);
     transition: transform 0.4s ease-out;
 }
 
-.notification-manager__exit_1umri {
+.notification-manager__exit_18uty {
     opacity: 0;
 }
 
-.notification-manager__exitActive_1umri {
+.notification-manager__exitActive_18uty {
     visibility: hidden;
     opacity: 0;
     transition: opacity 0.15s ease-in-out;
 }
 
 @media (min-width: 600px) {
-    .notification-manager__component_1umri {
+    .notification-manager__component_18uty {
         right: var(--gap-4xl);
     }
 
-    .notification-manager__component_1umri .notification-manager__notification_1umri {
+    .notification-manager__component_18uty .notification-manager__notification_18uty {
         width: auto;
     }
 
-    .notification-manager__enter_1umri {
+    .notification-manager__enter_18uty {
         transform: translate(100%, 0);
     }
 
-    .notification-manager__enterActive_1umri {
+    .notification-manager__enterActive_18uty {
         transform: translate(0);
     }
 }

package/index.css

@@ -1,11 +1,11 @@
-/* hash: a45ka */
+/* hash: 1rgsa */
 :root {
     --gap-s: 12px;
     --gap-xl: 24px;
     --gap-4xl: 48px;
 }
 
-.notification-manager__component_1umri {
+.notification-manager__component_18uty {
     position: fixed;
     top: 0;
     right: var(--gap-s);
@@ -13,48 +13,48 @@
     flex-direction: column;
 }
 
-.notification-manager__component_1umri .notification-manager__notification_1umri {
+.notification-manager__component_18uty .notification-manager__notification_18uty {
     position: static;
     width: calc(100vw - var(--gap-xl));
     margin-top: var(--gap-s);
     will-change: transform;
 }
 
-.notification-manager__enter_1umri {
+.notification-manager__enter_18uty {
     visibility: hidden;
     transform: translate(0, -500px);
 }
 
-.notification-manager__enterActive_1umri {
+.notification-manager__enterActive_18uty {
     visibility: visible;
     transform: translate(0);
     transition: transform 0.4s ease-out;
 }
 
-.notification-manager__exit_1umri {
+.notification-manager__exit_18uty {
     opacity: 0;
 }
 
-.notification-manager__exitActive_1umri {
+.notification-manager__exitActive_18uty {
     visibility: hidden;
     opacity: 0;
     transition: opacity 0.15s ease-in-out;
 }
 
 @media (min-width: 600px) {
-    .notification-manager__component_1umri {
+    .notification-manager__component_18uty {
         right: var(--gap-4xl);
     }
 
-    .notification-manager__component_1umri .notification-manager__notification_1umri {
+    .notification-manager__component_18uty .notification-manager__notification_18uty {
         width: auto;
     }
 
-    .notification-manager__enter_1umri {
+    .notification-manager__enter_18uty {
         transform: translate(100%, 0);
     }
 
-    .notification-manager__enterActive_1umri {
+    .notification-manager__enterActive_18uty {
         transform: translate(0);
     }
 }

package/modern/component.js

@@ -5,7 +5,7 @@ import { Portal } from '@alfalab/core-components-portal/modern';
 import { Stack, stackingOrder } from '@alfalab/core-components-stack/modern';
 import { Notification } from './components/notification/component.js';
 
-const styles = {"component":"notification-manager__component_1umri","notification":"notification-manager__notification_1umri","enter":"notification-manager__enter_1umri","enterActive":"notification-manager__enterActive_1umri","exit":"notification-manager__exit_1umri","exitActive":"notification-manager__exitActive_1umri"};
+const styles = {"component":"notification-manager__component_18uty","notification":"notification-manager__notification_18uty","enter":"notification-manager__enter_18uty","enterActive":"notification-manager__enterActive_18uty","exit":"notification-manager__exit_18uty","exitActive":"notification-manager__exitActive_18uty"};
 require('./index.css')
 
 const CSS_TRANSITION_CLASS_NAMES = {

package/modern/index.css

@@ -1,11 +1,11 @@
-/* hash: a45ka */
+/* hash: 1rgsa */
 :root {
     --gap-s: 12px;
     --gap-xl: 24px;
     --gap-4xl: 48px;
 }
 
-.notification-manager__component_1umri {
+.notification-manager__component_18uty {
     position: fixed;
     top: 0;
     right: var(--gap-s);
@@ -13,48 +13,48 @@
     flex-direction: column;
 }
 
-.notification-manager__component_1umri .notification-manager__notification_1umri {
+.notification-manager__component_18uty .notification-manager__notification_18uty {
     position: static;
     width: calc(100vw - var(--gap-xl));
     margin-top: var(--gap-s);
     will-change: transform;
 }
 
-.notification-manager__enter_1umri {
+.notification-manager__enter_18uty {
     visibility: hidden;
     transform: translate(0, -500px);
 }
 
-.notification-manager__enterActive_1umri {
+.notification-manager__enterActive_18uty {
     visibility: visible;
     transform: translate(0);
     transition: transform 0.4s ease-out;
 }
 
-.notification-manager__exit_1umri {
+.notification-manager__exit_18uty {
     opacity: 0;
 }
 
-.notification-manager__exitActive_1umri {
+.notification-manager__exitActive_18uty {
     visibility: hidden;
     opacity: 0;
     transition: opacity 0.15s ease-in-out;
 }
 
 @media (min-width: 600px) {
-    .notification-manager__component_1umri {
+    .notification-manager__component_18uty {
         right: var(--gap-4xl);
     }
 
-    .notification-manager__component_1umri .notification-manager__notification_1umri {
+    .notification-manager__component_18uty .notification-manager__notification_18uty {
         width: auto;
     }
 
-    .notification-manager__enter_1umri {
+    .notification-manager__enter_18uty {
         transform: translate(100%, 0);
     }
 
-    .notification-manager__enterActive_1umri {
+    .notification-manager__enterActive_18uty {
         transform: translate(0);
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-notification-manager",
-    "version": "5.2.9",
+    "version": "5.3.1",
     "description": "Notification manager",
     "keywords": [],
     "license": "MIT",
@@ -14,9 +14,9 @@
         "react": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
     "dependencies": {
-        "@alfalab/core-components-notification": "^6.1.27",
-        "@alfalab/core-components-portal": "^3.1.5",
-        "@alfalab/core-components-stack": "^4.0.4",
+        "@alfalab/core-components-notification": "^6.2.1",
+        "@alfalab/core-components-portal": "^3.2.0",
+        "@alfalab/core-components-stack": "^4.1.0",
         "classnames": "^2.3.1",
         "react-transition-group": "^4.4.5",
         "tslib": "^2.4.0"

package/src/component.tsx

@@ -0,0 +1,102 @@
+import React, { forwardRef, HTMLAttributes } from 'react';
+import { CSSTransition, TransitionGroup } from 'react-transition-group';
+import cn from 'classnames';
+
+import { Portal, PortalProps } from '@alfalab/core-components-portal';
+import { Stack, stackingOrder } from '@alfalab/core-components-stack';
+
+import { Notification, NotificationElement } from './components';
+
+import styles from './index.module.css';
+
+export type NotificationManagerProps = HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Массив нотификаций.
+     * В нотификации обязательно передавайте id.
+     */
+    notifications: NotificationElement[];
+
+    /**
+     * Дополнительный класс (native prop)
+     */
+    className?: string;
+
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+
+    /**
+     * z-index компонента
+     */
+    zIndex?: number;
+
+    /**
+     * Удаление нотификации
+     */
+    onRemoveNotification: (id: string) => void;
+
+    /**
+     * Нода, компонент или функция возвращающая их
+     *
+     * Контейнер к которому будут добавляться порталы
+     */
+    container?: PortalProps['getPortalContainer'];
+};
+
+const CSS_TRANSITION_CLASS_NAMES = {
+    enter: styles.enter,
+    enterActive: styles.enterActive,
+    exit: styles.exit,
+    exitActive: styles.exitActive,
+};
+
+export const NotificationManager = forwardRef<HTMLDivElement, NotificationManagerProps>(
+    (
+        {
+            notifications,
+            className,
+            dataTestId,
+            zIndex = stackingOrder.TOAST,
+            style = {},
+            onRemoveNotification,
+            container,
+            ...restProps
+        },
+        ref,
+    ) => (
+        <Stack value={zIndex}>
+            {(computedZIndex) => (
+                <Portal getPortalContainer={container}>
+                    <div
+                        className={cn(styles.component, className)}
+                        ref={ref}
+                        data-test-id={dataTestId}
+                        style={{
+                            zIndex: computedZIndex,
+                            ...style,
+                        }}
+                        {...restProps}
+                    >
+                        <TransitionGroup>
+                            {notifications.map((element) => (
+                                <CSSTransition
+                                    key={element.props.id}
+                                    timeout={400}
+                                    classNames={CSS_TRANSITION_CLASS_NAMES}
+                                    unmountOnExit={true}
+                                >
+                                    <Notification
+                                        element={element}
+                                        className={styles.notification}
+                                        onRemoveNotification={onRemoveNotification}
+                                    />
+                                </CSSTransition>
+                            ))}
+                        </TransitionGroup>
+                    </div>
+                </Portal>
+            )}
+        </Stack>
+    ),
+);

package/src/components/index.ts

@@ -0,0 +1 @@
+export * from './notification';

package/src/components/notification/component.tsx

@@ -0,0 +1,51 @@
+import { cloneElement, FC, ReactElement, useCallback, useMemo } from 'react';
+import cn from 'classnames';
+
+import { NotificationProps as CoreNotificationProps } from '@alfalab/core-components-notification';
+
+export type NotificationElement = ReactElement<CoreNotificationProps & { id: string }>;
+
+type NotificationProps = {
+    element: NotificationElement;
+    className: string;
+    onRemoveNotification: (id: string) => void;
+};
+
+export const Notification: FC<NotificationProps> = ({
+    element,
+    className,
+    onRemoveNotification,
+}) => {
+    const { onClose, onCloseTimeout } = element.props;
+
+    const handleClose = useCallback(() => {
+        if (onClose) {
+            onClose();
+        }
+
+        onRemoveNotification(element.props.id);
+    }, [onClose, onRemoveNotification, element.props.id]);
+
+    const handleCloseTimeout = useCallback(() => {
+        if (onCloseTimeout) {
+            onCloseTimeout();
+        }
+
+        onRemoveNotification(element.props.id);
+    }, [element.props.id, onCloseTimeout, onRemoveNotification]);
+
+    const notificationProps = useMemo<CoreNotificationProps>(
+        () => ({
+            ...element.props,
+            visible: true,
+            className: cn(className, element.props.className),
+            usePortal: false,
+            offset: 0,
+            onClose: handleClose,
+            onCloseTimeout: handleCloseTimeout,
+        }),
+        [element, handleClose, handleCloseTimeout, className],
+    );
+
+    return cloneElement(element, notificationProps);
+};

package/src/components/notification/index.ts

@@ -0,0 +1 @@
+export * from './component';

package/src/index.module.css

@@ -0,0 +1,55 @@
+@import '@alfalab/core-components-vars/src/gaps.css';
+
+.component {
+    position: fixed;
+    top: 0;
+    right: var(--gap-s);
+    display: flex;
+    flex-direction: column;
+}
+
+.component .notification {
+    position: static;
+    width: calc(100vw - var(--gap-xl));
+    margin-top: var(--gap-s);
+    will-change: transform;
+}
+
+.enter {
+    visibility: hidden;
+    transform: translate(0, -500px);
+}
+
+.enterActive {
+    visibility: visible;
+    transform: translate(0);
+    transition: transform 0.4s ease-out;
+}
+
+.exit {
+    opacity: 0;
+}
+
+.exitActive {
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity 0.15s ease-in-out;
+}
+
+@media (--tablet-s) {
+    .component {
+        right: var(--gap-4xl);
+    }
+
+    .component .notification {
+        width: auto;
+    }
+
+    .enter {
+        transform: translate(100%, 0);
+    }
+
+    .enterActive {
+        transform: translate(0);
+    }
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from './component';