@alfalab/core-components-notification 6.1.26 → 6.2.0

package/src/Component.tsx

@@ -0,0 +1,237 @@
+import React, {
+    forwardRef,
+    Fragment,
+    MouseEvent,
+    useCallback,
+    useEffect,
+    useRef,
+    useState,
+} from 'react';
+import mergeRefs from 'react-merge-refs';
+import { useSwipeable } from 'react-swipeable';
+import cn from 'classnames';
+import elementClosest from 'element-closest';
+
+import { Portal } from '@alfalab/core-components-portal';
+import { Stack, stackingOrder } from '@alfalab/core-components-stack';
+import {
+    ToastPlateDesktop,
+    ToastPlateDesktopProps,
+} from '@alfalab/core-components-toast-plate/desktop';
+
+import { useClickOutside } from './utils';
+
+import styles from './index.module.css';
+
+export type NotificationProps = ToastPlateDesktopProps & {
+    /**
+     * Управление видимостью компонента
+     */
+    visible?: boolean;
+
+    /**
+     * Отступ от верхнего края
+     */
+    offset?: number;
+
+    /**
+     * Время до закрытия компонента
+     */
+    autoCloseDelay?: number | null;
+
+    /**
+     * Использовать портал
+     */
+    usePortal?: boolean;
+
+    /**
+     * z-index компонента
+     */
+    zIndex?: number;
+
+    /**
+     * Обработчик события истечения времени до закрытия компонента
+     */
+    onCloseTimeout?: () => void;
+
+    /**
+     * Обработчик события наведения курсора на компонент
+     */
+    onMouseEnter?: (event?: MouseEvent<HTMLDivElement>) => void;
+
+    /**
+     * Обработчик события снятия курсора с компонента
+     */
+    onMouseLeave?: (event?: MouseEvent<HTMLDivElement>) => void;
+
+    /**
+     * Обработчик клика вне компонента
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    onClickOutside?: (event?: MouseEvent<any>) => void;
+};
+
+const notificationClassNameSelector = `.${styles.notificationComponent}`;
+
+export const Notification = forwardRef<HTMLDivElement, NotificationProps>(
+    (
+        {
+            className,
+            actionSectionClassName,
+            children,
+            visible,
+            offset = 108,
+            hasCloser = true,
+            autoCloseDelay = 5000,
+            usePortal = true,
+            zIndex = stackingOrder.TOAST,
+            style,
+            onClose,
+            onCloseTimeout,
+            onMouseEnter,
+            onMouseLeave,
+            onClickOutside,
+            ...restProps
+        },
+        ref,
+    ) => {
+        const notificationRef = useRef<HTMLDivElement>(null);
+        const autoCloseTimeoutRef = useRef(0);
+        const closeTimeoutRef = useRef(0);
+
+        const [isClosing, setIsClosing] = useState(false);
+
+        const startAutoCloseTimer = useCallback(() => {
+            if (autoCloseDelay !== null) {
+                autoCloseTimeoutRef.current = window.setTimeout(() => {
+                    if (onCloseTimeout) {
+                        onCloseTimeout();
+                    }
+                }, autoCloseDelay);
+            }
+        }, [autoCloseDelay, onCloseTimeout]);
+
+        const stopAutoCloseTimer = useCallback(() => {
+            clearTimeout(autoCloseTimeoutRef.current);
+        }, []);
+
+        useEffect(
+            () => () => {
+                clearTimeout(closeTimeoutRef.current);
+            },
+            [],
+        );
+
+        useEffect(() => {
+            elementClosest(window);
+        }, []);
+
+        useEffect(() => {
+            if (visible) {
+                startAutoCloseTimer();
+            }
+
+            return () => {
+                stopAutoCloseTimer();
+            };
+        }, [startAutoCloseTimer, stopAutoCloseTimer, visible]);
+
+        const handleMouseEnter = useCallback(
+            (event: React.MouseEvent<HTMLDivElement>) => {
+                stopAutoCloseTimer();
+
+                if (onMouseEnter) {
+                    onMouseEnter(event);
+                }
+            },
+            [onMouseEnter, stopAutoCloseTimer],
+        );
+
+        const handleMouseLeave = useCallback(
+            (event: React.MouseEvent<HTMLDivElement>) => {
+                stopAutoCloseTimer();
+                startAutoCloseTimer();
+
+                if (onMouseLeave) {
+                    onMouseLeave(event);
+                }
+            },
+            [onMouseLeave, startAutoCloseTimer, stopAutoCloseTimer],
+        );
+
+        const handleOutsideClick = useCallback(
+            (event: React.MouseEvent | React.TouchEvent) => {
+                const isTargetNotification = !!(event.target as Element).closest(
+                    notificationClassNameSelector,
+                );
+
+                /*
+                 * проверка isTargetNotification нужна для предотвращения срабатывания handleOutsideClick
+                 * при клике на другие нотификации, если их несколько на странице
+                 */
+                if (onClickOutside && visible && !isTargetNotification) {
+                    onClickOutside(event as React.MouseEvent);
+                }
+            },
+            [onClickOutside, visible],
+        );
+
+        useClickOutside(notificationRef, handleOutsideClick);
+
+        const swipeableHandlers = useSwipeable({
+            onSwiped: ({ dir }) => {
+                if (onClose && ['Left', 'Right', 'Up'].includes(dir)) {
+                    setIsClosing(true);
+
+                    closeTimeoutRef.current = window.setTimeout(() => {
+                        setIsClosing(false);
+                        onClose();
+                    }, 100);
+                }
+            },
+            delta: 100,
+        });
+
+        const Wrapper = usePortal ? Portal : Fragment;
+
+        return (
+            <Stack value={zIndex}>
+                {(computedZIndex) => (
+                    <Wrapper>
+                        <div {...swipeableHandlers}>
+                            <ToastPlateDesktop
+                                className={cn(
+                                    styles.notificationComponent,
+                                    {
+                                        [styles.isVisible]: visible,
+                                        [styles.isClosing]: isClosing,
+                                    },
+                                    className,
+                                )}
+                                contentClassName={styles.toastContent}
+                                actionSectionClassName={cn(
+                                    actionSectionClassName,
+                                    styles.actionSection,
+                                )}
+                                style={{
+                                    top: offset,
+                                    zIndex: computedZIndex,
+                                    ...style,
+                                }}
+                                onMouseEnter={handleMouseEnter}
+                                onMouseLeave={handleMouseLeave}
+                                ref={mergeRefs([ref, notificationRef])}
+                                role={visible ? 'alert' : undefined}
+                                hasCloser={hasCloser}
+                                onClose={onClose}
+                                {...restProps}
+                            >
+                                {children}
+                            </ToastPlateDesktop>
+                        </div>
+                    </Wrapper>
+                )}
+            </Stack>
+        );
+    },
+);

package/src/index.module.css

@@ -0,0 +1,50 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+:root {
+    --notification-desktop-content-width: 278px;
+}
+
+.notificationComponent {
+    visibility: hidden;
+    position: fixed;
+    right: var(--gap-s);
+    transform: translate(0, -500px);
+    display: inline-flex;
+    width: calc(100% - var(--gap-xl));
+    max-width: calc(100vw - var(--gap-xl));
+    user-select: none;
+    transition: transform 0.4s ease-out;
+
+    @media screen and (min-width: 600px) {
+        right: var(--gap-4xl);
+        width: auto;
+        transform: translate(calc(100% + var(--gap-4xl)), 0);
+    }
+
+    &.isVisible {
+        visibility: visible;
+        transform: translate(0, 0);
+    }
+
+    &.isClosing {
+        transition: transform 0.1s ease-out;
+        transform: translate(100vw, 0);
+
+        @media screen and (min-width: 600px) {
+            transform: translate(calc(100% + var(--gap-4xl)), 0);
+        }
+    }
+}
+
+.toastContent {
+    @media screen and (min-width: 600px) {
+        width: var(--notification-desktop-content-width);
+    }
+}
+
+.actionSection {
+    min-width: 104px;
+    min-height: 48px;
+    padding: 0 var(--gap-xs);
+    margin: var(--gap-s-neg) 0;
+}

package/src/index.ts

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

package/src/utils/index.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+
+/*
+ * Дублирую хук из @alfalab/hooks, так как не подходят названия событий
+ * https://github.com/core-ds/utils/blob/develop/packages/hooks/src/useClickOutside/hook.ts
+ * issue завел, когда изменения будут реализованы, отсюда можно будет удалить
+ * https://github.com/core-ds/utils/issues/35
+ */
+export function useClickOutside(
+    ref: React.RefObject<HTMLElement>,
+    cb: (e: React.MouseEvent | React.TouchEvent) => void,
+): void {
+    React.useEffect(() => {
+        // eslint-disable-next-line
+        const handler = (event: any) => {
+            if (!ref.current || ref.current.contains(event.target)) {
+                return;
+            }
+
+            cb(event);
+        };
+
+        document.addEventListener('click', handler);
+        document.addEventListener('touchend', handler);
+
+        return () => {
+            document.removeEventListener('click', handler);
+            document.removeEventListener('touchend', handler);
+        };
+    }, [ref, cb]);
+}

package/typings-9211a437.d.ts

@@ -0,0 +1,95 @@
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, ElementType, ReactNode } from 'react';
+type StyleColors = {
+    default: {
+        [key: string]: string;
+    };
+    inverted: {
+        [key: string]: string;
+    };
+};
+type ComponentProps = {
+    /**
+     * Тип кнопки
+     * @default secondary
+     */
+    view?: 'accent' | 'primary' | 'secondary' | 'tertiary' | 'outlined' | 'filled' | 'transparent' | 'link' | 'ghost';
+    /**
+     * Слот слева
+     */
+    leftAddons?: ReactNode;
+    /**
+     * Слот справа
+     */
+    rightAddons?: ReactNode;
+    /**
+     * Размер компонента
+     * @default m
+     */
+    size?: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl';
+    /**
+     * Растягивает компонент на ширину контейнера
+     * @default false
+     */
+    block?: boolean;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс для спиннера
+     */
+    spinnerClassName?: string;
+    /**
+     * Выводит ссылку в виде кнопки
+     */
+    href?: string;
+    /**
+     * Позволяет использовать кастомный компонент для кнопки (например Link из роутера)
+     */
+    Component?: ElementType;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Показать лоадер
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Не переносить текст кнопки на новую строку
+     * @default false
+     */
+    nowrap?: boolean;
+    /**
+     * Набор цветов для компонента
+     */
+    colors?: 'default' | 'inverted';
+    /**
+     * Дочерние элементы.
+     */
+    children?: ReactNode;
+    /**
+     * Основные стили компонента.
+     */
+    styles: {
+        [key: string]: string;
+    };
+    /**
+     * Стили компонента для default и inverted режима.
+     */
+    colorStylesMap: StyleColors;
+};
+type AnchorBaseButtonProps = ComponentProps & AnchorHTMLAttributes<HTMLAnchorElement>;
+type NativeBaseButtonProps = ComponentProps & ButtonHTMLAttributes<HTMLButtonElement>;
+type BaseButtonProps = Partial<AnchorBaseButtonProps | NativeBaseButtonProps>;
+type AnchorButtonProps = Omit<BaseButtonProps, 'styles' | 'colorStylesMap'> & AnchorHTMLAttributes<HTMLAnchorElement>;
+type NativeButtonProps = Omit<BaseButtonProps, 'styles' | 'colorStylesMap'> & ButtonHTMLAttributes<HTMLButtonElement>;
+type ButtonProps = Partial<AnchorButtonProps | NativeButtonProps> & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+};
+export { StyleColors, ComponentProps, AnchorBaseButtonProps, NativeBaseButtonProps, BaseButtonProps, AnchorButtonProps, NativeButtonProps, ButtonProps };

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);
-    });