@alfalab/core-components-notification-manager 5.2.8 → 5.3.0

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_dmwvq","notification":"notification-manager__notification_dmwvq","enter":"notification-manager__enter_dmwvq","enterActive":"notification-manager__enterActive_dmwvq","exit":"notification-manager__exit_dmwvq","exitActive":"notification-manager__exitActive_dmwvq"};
+var styles = {"component":"notification-manager__component_1awn9","notification":"notification-manager__notification_1awn9","enter":"notification-manager__enter_1awn9","enterActive":"notification-manager__enterActive_1awn9","exit":"notification-manager__exit_1awn9","exitActive":"notification-manager__exitActive_1awn9"};
 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_dmwvq","notification":"notification-manager__notification_dmwvq","enter":"notification-manager__enter_dmwvq","enterActive":"notification-manager__enterActive_dmwvq","exit":"notification-manager__exit_dmwvq","exitActive":"notification-manager__exitActive_dmwvq"};
+var styles = {"component":"notification-manager__component_1awn9","notification":"notification-manager__notification_1awn9","enter":"notification-manager__enter_1awn9","enterActive":"notification-manager__enterActive_1awn9","exit":"notification-manager__exit_1awn9","exitActive":"notification-manager__exitActive_1awn9"};
 require('./index.css')
 
 var CSS_TRANSITION_CLASS_NAMES = {

package/esm/index.css

@@ -1,11 +1,11 @@
-/* hash: 1mcng */
+/* hash: 16vys */
 :root {
     --gap-s: 12px;
     --gap-xl: 24px;
     --gap-4xl: 48px;
 }
 
-.notification-manager__component_dmwvq {
+.notification-manager__component_1awn9 {
     position: fixed;
     top: 0;
     right: var(--gap-s);
@@ -13,48 +13,48 @@
     flex-direction: column;
 }
 
-.notification-manager__component_dmwvq .notification-manager__notification_dmwvq {
+.notification-manager__component_1awn9 .notification-manager__notification_1awn9 {
     position: static;
     width: calc(100vw - var(--gap-xl));
     margin-top: var(--gap-s);
     will-change: transform;
 }
 
-.notification-manager__enter_dmwvq {
+.notification-manager__enter_1awn9 {
     visibility: hidden;
     transform: translate(0, -500px);
 }
 
-.notification-manager__enterActive_dmwvq {
+.notification-manager__enterActive_1awn9 {
     visibility: visible;
     transform: translate(0);
     transition: transform 0.4s ease-out;
 }
 
-.notification-manager__exit_dmwvq {
+.notification-manager__exit_1awn9 {
     opacity: 0;
 }
 
-.notification-manager__exitActive_dmwvq {
+.notification-manager__exitActive_1awn9 {
     visibility: hidden;
     opacity: 0;
     transition: opacity 0.15s ease-in-out;
 }
 
 @media (min-width: 600px) {
-    .notification-manager__component_dmwvq {
+    .notification-manager__component_1awn9 {
         right: var(--gap-4xl);
     }
 
-    .notification-manager__component_dmwvq .notification-manager__notification_dmwvq {
+    .notification-manager__component_1awn9 .notification-manager__notification_1awn9 {
         width: auto;
     }
 
-    .notification-manager__enter_dmwvq {
+    .notification-manager__enter_1awn9 {
         transform: translate(100%, 0);
     }
 
-    .notification-manager__enterActive_dmwvq {
+    .notification-manager__enterActive_1awn9 {
         transform: translate(0);
     }
 }

package/index.css

@@ -1,11 +1,11 @@
-/* hash: 1mcng */
+/* hash: 16vys */
 :root {
     --gap-s: 12px;
     --gap-xl: 24px;
     --gap-4xl: 48px;
 }
 
-.notification-manager__component_dmwvq {
+.notification-manager__component_1awn9 {
     position: fixed;
     top: 0;
     right: var(--gap-s);
@@ -13,48 +13,48 @@
     flex-direction: column;
 }
 
-.notification-manager__component_dmwvq .notification-manager__notification_dmwvq {
+.notification-manager__component_1awn9 .notification-manager__notification_1awn9 {
     position: static;
     width: calc(100vw - var(--gap-xl));
     margin-top: var(--gap-s);
     will-change: transform;
 }
 
-.notification-manager__enter_dmwvq {
+.notification-manager__enter_1awn9 {
     visibility: hidden;
     transform: translate(0, -500px);
 }
 
-.notification-manager__enterActive_dmwvq {
+.notification-manager__enterActive_1awn9 {
     visibility: visible;
     transform: translate(0);
     transition: transform 0.4s ease-out;
 }
 
-.notification-manager__exit_dmwvq {
+.notification-manager__exit_1awn9 {
     opacity: 0;
 }
 
-.notification-manager__exitActive_dmwvq {
+.notification-manager__exitActive_1awn9 {
     visibility: hidden;
     opacity: 0;
     transition: opacity 0.15s ease-in-out;
 }
 
 @media (min-width: 600px) {
-    .notification-manager__component_dmwvq {
+    .notification-manager__component_1awn9 {
         right: var(--gap-4xl);
     }
 
-    .notification-manager__component_dmwvq .notification-manager__notification_dmwvq {
+    .notification-manager__component_1awn9 .notification-manager__notification_1awn9 {
         width: auto;
     }
 
-    .notification-manager__enter_dmwvq {
+    .notification-manager__enter_1awn9 {
         transform: translate(100%, 0);
     }
 
-    .notification-manager__enterActive_dmwvq {
+    .notification-manager__enterActive_1awn9 {
         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_dmwvq","notification":"notification-manager__notification_dmwvq","enter":"notification-manager__enter_dmwvq","enterActive":"notification-manager__enterActive_dmwvq","exit":"notification-manager__exit_dmwvq","exitActive":"notification-manager__exitActive_dmwvq"};
+const styles = {"component":"notification-manager__component_1awn9","notification":"notification-manager__notification_1awn9","enter":"notification-manager__enter_1awn9","enterActive":"notification-manager__enterActive_1awn9","exit":"notification-manager__exit_1awn9","exitActive":"notification-manager__exitActive_1awn9"};
 require('./index.css')
 
 const CSS_TRANSITION_CLASS_NAMES = {

package/modern/index.css

@@ -1,11 +1,11 @@
-/* hash: 1mcng */
+/* hash: 16vys */
 :root {
     --gap-s: 12px;
     --gap-xl: 24px;
     --gap-4xl: 48px;
 }
 
-.notification-manager__component_dmwvq {
+.notification-manager__component_1awn9 {
     position: fixed;
     top: 0;
     right: var(--gap-s);
@@ -13,48 +13,48 @@
     flex-direction: column;
 }
 
-.notification-manager__component_dmwvq .notification-manager__notification_dmwvq {
+.notification-manager__component_1awn9 .notification-manager__notification_1awn9 {
     position: static;
     width: calc(100vw - var(--gap-xl));
     margin-top: var(--gap-s);
     will-change: transform;
 }
 
-.notification-manager__enter_dmwvq {
+.notification-manager__enter_1awn9 {
     visibility: hidden;
     transform: translate(0, -500px);
 }
 
-.notification-manager__enterActive_dmwvq {
+.notification-manager__enterActive_1awn9 {
     visibility: visible;
     transform: translate(0);
     transition: transform 0.4s ease-out;
 }
 
-.notification-manager__exit_dmwvq {
+.notification-manager__exit_1awn9 {
     opacity: 0;
 }
 
-.notification-manager__exitActive_dmwvq {
+.notification-manager__exitActive_1awn9 {
     visibility: hidden;
     opacity: 0;
     transition: opacity 0.15s ease-in-out;
 }
 
 @media (min-width: 600px) {
-    .notification-manager__component_dmwvq {
+    .notification-manager__component_1awn9 {
         right: var(--gap-4xl);
     }
 
-    .notification-manager__component_dmwvq .notification-manager__notification_dmwvq {
+    .notification-manager__component_1awn9 .notification-manager__notification_1awn9 {
         width: auto;
     }
 
-    .notification-manager__enter_dmwvq {
+    .notification-manager__enter_1awn9 {
         transform: translate(100%, 0);
     }
 
-    .notification-manager__enterActive_dmwvq {
+    .notification-manager__enterActive_1awn9 {
         transform: translate(0);
     }
 }

package/package.json

@@ -1,14 +1,11 @@
 {
     "name": "@alfalab/core-components-notification-manager",
-    "version": "5.2.8",
+    "version": "5.3.0",
     "description": "Notification manager",
     "keywords": [],
     "license": "MIT",
     "main": "index.js",
     "module": "./esm/index.js",
-    "scripts": {
-        "postinstall": "node -e \"if (require('fs').existsSync('./send-stats.js')){require('./send-stats.js')} \""
-    },
     "publishConfig": {
         "access": "public",
         "directory": "dist"
@@ -17,9 +14,9 @@
         "react": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
     "dependencies": {
-        "@alfalab/core-components-notification": "^6.1.26",
-        "@alfalab/core-components-portal": "^3.1.4",
-        "@alfalab/core-components-stack": "^4.0.4",
+        "@alfalab/core-components-notification": "^6.2.0",
+        "@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';

package/send-stats.js

@@ -1,82 +0,0 @@
-const http = require('http');
-const fs = require('fs');
-const { promisify } = require('util');
-const path = require('path');
-
-const readFile = promisify(fs.readFile);
-
-async function main() {
-    const remoteHost = process.env.NIS_HOST || 'digital';
-    const remotePort = process.env.NIS_PORT || 80;
-    const remotePath = process.env.NIS_PATH || '/npm-install-stats/api/install-stats';
-
-    try {
-        const [_, node, os, arch] =
-            /node\/v(\d+\.\d+\.\d+) (\w+) (\w+)/.exec(process.env.npm_config_user_agent) || [];
-        const [__, npm] = /npm\/(\d+\.\d+\.\d+)/.exec(process.env.npm_config_user_agent) || [];
-        const [___, yarn] = /yarn\/(\d+\.\d+\.\d+)/.exec(process.env.npm_config_user_agent) || [];
-
-        let ownPackageJson, packageJson;
-
-        try {
-            const result = await Promise.all([
-                readFile(path.join(process.cwd(), 'package.json'), 'utf-8'),
-                readFile(path.join(process.cwd(), '../../../package.json'), 'utf-8'),
-            ]);
-
-            ownPackageJson = JSON.parse(result[0]);
-            packageJson = JSON.parse(result[1]);
-        } catch (err) {
-            ownPackageJson = '';
-            packageJson = '';
-        }
-
-        const data = {
-            node,
-            npm,
-            yarn,
-            os,
-            arch,
-            ownPackageJson: JSON.stringify(ownPackageJson),
-            packageJson: JSON.stringify(packageJson),
-        };
-
-        const body = JSON.stringify(data);
-
-        const options = {
-            host: remoteHost,
-            port: remotePort,
-            path: remotePath,
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                'Content-Length': body.length,
-            },
-        };
-
-        return new Promise((resolve, reject) => {
-            const req = http.request(options, (res) => {
-                res.on('end', () => {
-                    resolve();
-                });
-            });
-
-            req.on('error', () => {
-                reject();
-            });
-
-            req.write(body);
-            req.end();
-        });
-    } catch (error) {
-        throw error;
-    }
-}
-
-main()
-    .then(() => {
-        process.exit(0);
-    })
-    .catch(() => {
-        process.exit(0);
-    });