@alfalab/core-components-notification 7.5.10 → 8.0.0-snapshot-1393ffa
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/Component.js +11 -12
- package/Component.js.map +1 -0
- package/cssm/Component.js +9 -8
- package/cssm/Component.js.map +1 -0
- package/cssm/index.js +1 -0
- package/cssm/index.js.map +1 -0
- package/cssm/index.module.css +7 -27
- package/cssm/shared/index.js +3 -2
- package/cssm/shared/index.js.map +1 -0
- package/{Component.d.ts → cssm/src/Component.d.ts} +5 -8
- package/cssm/src/index.d.ts +1 -0
- package/cssm/src/shared/index.d.ts +1 -0
- package/cssm/src/utils/getNotificationTestIds.d.ts +4 -0
- package/cssm/src/utils/index.d.ts +2 -0
- package/cssm/utils/getNotificationTestIds.js +4 -19
- package/cssm/utils/getNotificationTestIds.js.map +1 -0
- package/cssm/utils/index.js +1 -0
- package/cssm/utils/index.js.map +1 -0
- package/esm/Component.js +3 -4
- package/esm/Component.js.map +1 -0
- package/esm/index.css +15 -36
- package/esm/index.js +1 -0
- package/esm/index.js.map +1 -0
- package/esm/index.module.css.js +6 -0
- package/esm/index.module.css.js.map +1 -0
- package/esm/shared/index.js +1 -0
- package/esm/shared/index.js.map +1 -0
- package/esm/{Component.d.ts → src/Component.d.ts} +5 -8
- package/esm/src/index.d.ts +1 -0
- package/esm/src/shared/index.d.ts +1 -0
- package/esm/src/utils/getNotificationTestIds.d.ts +4 -0
- package/esm/src/utils/index.d.ts +2 -0
- package/esm/utils/getNotificationTestIds.js +2 -17
- package/esm/utils/getNotificationTestIds.js.map +1 -0
- package/esm/utils/index.js +1 -0
- package/esm/utils/index.js.map +1 -0
- package/index.css +15 -36
- package/index.js +1 -0
- package/index.js.map +1 -0
- package/index.module.css.js +8 -0
- package/index.module.css.js.map +1 -0
- package/modern/Component.js +3 -4
- package/modern/Component.js.map +1 -0
- package/modern/index.css +15 -36
- package/modern/index.js +1 -0
- package/modern/index.js.map +1 -0
- package/modern/index.module.css.js +6 -0
- package/modern/index.module.css.js.map +1 -0
- package/modern/shared/index.js +1 -0
- package/modern/shared/index.js.map +1 -0
- package/{cssm → modern/src}/Component.d.ts +5 -8
- package/modern/src/index.d.ts +1 -0
- package/modern/src/shared/index.d.ts +1 -0
- package/modern/src/utils/getNotificationTestIds.d.ts +4 -0
- package/modern/src/utils/index.d.ts +2 -0
- package/modern/utils/getNotificationTestIds.js +2 -17
- package/modern/utils/getNotificationTestIds.js.map +1 -0
- package/modern/utils/index.js +1 -0
- package/modern/utils/index.js.map +1 -0
- package/moderncssm/Component.js +2 -1
- package/moderncssm/Component.js.map +1 -0
- package/moderncssm/index.js +1 -0
- package/moderncssm/index.js.map +1 -0
- package/moderncssm/index.module.css +1 -2
- package/moderncssm/shared/index.js +1 -0
- package/moderncssm/shared/index.js.map +1 -0
- package/{modern → moderncssm/src}/Component.d.ts +5 -8
- package/moderncssm/src/index.d.ts +1 -0
- package/moderncssm/src/shared/index.d.ts +1 -0
- package/moderncssm/src/utils/getNotificationTestIds.d.ts +4 -0
- package/moderncssm/src/utils/index.d.ts +2 -0
- package/moderncssm/utils/getNotificationTestIds.js +2 -17
- package/moderncssm/utils/getNotificationTestIds.js.map +1 -0
- package/moderncssm/utils/index.js +1 -0
- package/moderncssm/utils/index.js.map +1 -0
- package/package.json +8 -6
- package/shared/index.js +3 -2
- package/shared/index.js.map +1 -0
- package/src/Component.d.ts +86 -0
- package/src/Component.tsx +1 -1
- package/src/index.d.ts +1 -0
- package/src/shared/index.d.ts +1 -0
- package/src/utils/getNotificationTestIds.d.ts +4 -0
- package/src/utils/index.d.ts +2 -0
- package/utils/getNotificationTestIds.js +4 -19
- package/utils/getNotificationTestIds.js.map +1 -0
- package/utils/index.js +1 -0
- package/utils/index.js.map +1 -0
- package/browser-e5f2ef37.d.ts +0 -8
- package/cssm/browser-e5f2ef37.d.ts +0 -8
- package/cssm/fnUtils-edf8408d.d.ts +0 -16
- package/cssm/index.d.ts +0 -1
- package/cssm/shared/index.d.ts +0 -1
- package/cssm/useCustomWebkitScrollbar-e5f2ef37.d.ts +0 -2
- package/cssm/useIsMounted-edf8408d.d.ts +0 -3
- package/cssm/utils/getNotificationTestIds.d.ts +0 -5
- package/cssm/utils/index.d.ts +0 -4
- package/esm/browser-e5f2ef37.d.ts +0 -8
- package/esm/fnUtils-edf8408d.d.ts +0 -16
- package/esm/index.d.ts +0 -1
- package/esm/shared/index.d.ts +0 -1
- package/esm/useCustomWebkitScrollbar-e5f2ef37.d.ts +0 -2
- package/esm/useIsMounted-edf8408d.d.ts +0 -3
- package/esm/utils/getNotificationTestIds.d.ts +0 -5
- package/esm/utils/index.d.ts +0 -4
- package/fnUtils-edf8408d.d.ts +0 -16
- package/index.d.ts +0 -1
- package/modern/browser-e5f2ef37.d.ts +0 -8
- package/modern/fnUtils-edf8408d.d.ts +0 -16
- package/modern/index.d.ts +0 -1
- package/modern/shared/index.d.ts +0 -1
- package/modern/useCustomWebkitScrollbar-e5f2ef37.d.ts +0 -2
- package/modern/useIsMounted-edf8408d.d.ts +0 -3
- package/modern/utils/getNotificationTestIds.d.ts +0 -5
- package/modern/utils/index.d.ts +0 -4
- package/moderncssm/Component.d.ts +0 -89
- package/moderncssm/browser-e5f2ef37.d.ts +0 -8
- package/moderncssm/fnUtils-edf8408d.d.ts +0 -16
- package/moderncssm/index.d.ts +0 -1
- package/moderncssm/shared/index.d.ts +0 -1
- package/moderncssm/useCustomWebkitScrollbar-e5f2ef37.d.ts +0 -2
- package/moderncssm/useIsMounted-edf8408d.d.ts +0 -3
- package/moderncssm/utils/getNotificationTestIds.d.ts +0 -5
- package/moderncssm/utils/index.d.ts +0 -4
- package/shared/index.d.ts +0 -1
- package/useCustomWebkitScrollbar-e5f2ef37.d.ts +0 -2
- package/useIsMounted-edf8408d.d.ts +0 -3
- package/utils/getNotificationTestIds.d.ts +0 -5
- package/utils/index.d.ts +0 -4
package/Component.js
CHANGED
|
@@ -10,9 +10,10 @@ var cn = require('classnames');
|
|
|
10
10
|
var elementClosest = require('element-closest');
|
|
11
11
|
var coreComponentsPortal = require('@alfalab/core-components-portal');
|
|
12
12
|
var coreComponentsStack = require('@alfalab/core-components-stack');
|
|
13
|
+
var coreComponentsStackContext = require('@alfalab/core-components-stack-context');
|
|
13
14
|
var desktop = require('@alfalab/core-components-toast-plate/desktop');
|
|
14
|
-
var
|
|
15
|
-
var
|
|
15
|
+
var index = require('./utils/index.js');
|
|
16
|
+
var index_module = require('./index.module.css.js');
|
|
16
17
|
|
|
17
18
|
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
18
19
|
|
|
@@ -21,12 +22,9 @@ var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
|
|
|
21
22
|
var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
|
|
22
23
|
var elementClosest__default = /*#__PURE__*/_interopDefaultCompat(elementClosest);
|
|
23
24
|
|
|
24
|
-
var
|
|
25
|
-
require('./index.css')
|
|
26
|
-
|
|
27
|
-
var notificationClassNameSelector = ".".concat(styles.notificationComponent);
|
|
25
|
+
var notificationClassNameSelector = ".".concat(index_module.notificationComponent);
|
|
28
26
|
var Notification = React.forwardRef(function (_a, ref) {
|
|
29
|
-
var className = _a.className, actionSectionClassName = _a.actionSectionClassName, children = _a.children, visible = _a.visible, _b = _a.offset, offset = _b === void 0 ? 108 : _b, _c = _a.hasCloser, hasCloser = _c === void 0 ? true : _c, _d = _a.autoCloseDelay, autoCloseDelay = _d === void 0 ? 5000 : _d, _e = _a.usePortal, usePortal = _e === void 0 ? true : _e, _f = _a.zIndex, zIndex = _f === void 0 ?
|
|
27
|
+
var className = _a.className, actionSectionClassName = _a.actionSectionClassName, children = _a.children, visible = _a.visible, _b = _a.offset, offset = _b === void 0 ? 108 : _b, _c = _a.hasCloser, hasCloser = _c === void 0 ? true : _c, _d = _a.autoCloseDelay, autoCloseDelay = _d === void 0 ? 5000 : _d, _e = _a.usePortal, usePortal = _e === void 0 ? true : _e, _f = _a.zIndex, zIndex = _f === void 0 ? coreComponentsStackContext.stackingOrder.TOAST : _f, style = _a.style, _g = _a.position, position = _g === void 0 ? 'top' : _g, onClose = _a.onClose, onCloseTimeout = _a.onCloseTimeout, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onClickOutside = _a.onClickOutside, restProps = tslib.__rest(_a, ["className", "actionSectionClassName", "children", "visible", "offset", "hasCloser", "autoCloseDelay", "usePortal", "zIndex", "style", "position", "onClose", "onCloseTimeout", "onMouseEnter", "onMouseLeave", "onClickOutside"]);
|
|
30
28
|
var notificationRef = React.useRef(null);
|
|
31
29
|
var autoCloseTimeoutRef = React.useRef(0);
|
|
32
30
|
var closeTimeoutRef = React.useRef(0);
|
|
@@ -80,7 +78,7 @@ var Notification = React.forwardRef(function (_a, ref) {
|
|
|
80
78
|
onClickOutside(event);
|
|
81
79
|
}
|
|
82
80
|
}, [onClickOutside, visible]);
|
|
83
|
-
|
|
81
|
+
index.useClickOutside(notificationRef, handleOutsideClick);
|
|
84
82
|
var swipeableHandlers = reactSwipeable.useSwipeable({
|
|
85
83
|
onSwiped: function (_a) {
|
|
86
84
|
var dir = _a.dir;
|
|
@@ -99,12 +97,13 @@ var Notification = React.forwardRef(function (_a, ref) {
|
|
|
99
97
|
var _a, _b;
|
|
100
98
|
return (React__default.default.createElement(Wrapper, null,
|
|
101
99
|
React__default.default.createElement("div", tslib.__assign({}, swipeableHandlers),
|
|
102
|
-
React__default.default.createElement(desktop.ToastPlateDesktop, tslib.__assign({ className: cn__default.default(
|
|
103
|
-
_a[
|
|
104
|
-
_a[
|
|
105
|
-
_a), className), contentClassName:
|
|
100
|
+
React__default.default.createElement(desktop.ToastPlateDesktop, tslib.__assign({ className: cn__default.default(index_module.notificationComponent, (_a = {},
|
|
101
|
+
_a[index_module.isVisible] = visible,
|
|
102
|
+
_a[index_module.isClosing] = isClosing,
|
|
103
|
+
_a), className), contentClassName: index_module.toastContent, actionSectionClassName: cn__default.default(actionSectionClassName, index_module.actionSection), style: tslib.__assign((_b = {}, _b[position] = offset, _b.zIndex = computedZIndex, _b), style), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: mergeRefs__default.default([ref, notificationRef]), role: visible ? 'alert' : undefined, hasCloser: hasCloser, onClose: onClose }, restProps), children))));
|
|
106
104
|
}));
|
|
107
105
|
});
|
|
108
106
|
Notification.displayName = 'Notification';
|
|
109
107
|
|
|
110
108
|
exports.Notification = Notification;
|
|
109
|
+
//# sourceMappingURL=Component.js.map
|
package/Component.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, {\n forwardRef,\n Fragment,\n MouseEvent,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport { useSwipeable } from 'react-swipeable';\nimport cn from 'classnames';\nimport elementClosest from 'element-closest';\n\nimport { Portal } from '@alfalab/core-components-portal';\nimport { Stack } from '@alfalab/core-components-stack';\nimport { stackingOrder } from '@alfalab/core-components-stack-context';\nimport {\n ToastPlateDesktop,\n ToastPlateDesktopProps,\n} from '@alfalab/core-components-toast-plate/desktop';\n\nimport { useClickOutside } from './utils';\n\nimport styles from './index.module.css';\n\nexport type NotificationProps = ToastPlateDesktopProps & {\n /**\n * Управление видимостью компонента\n */\n visible?: boolean;\n\n /**\n * Отступ от верхнего края\n */\n offset?: number;\n\n /**\n * Время до закрытия компонента\n */\n autoCloseDelay?: number | null;\n\n /**\n * Использовать портал\n */\n usePortal?: boolean;\n\n /**\n * z-index компонента\n */\n zIndex?: number;\n\n /**\n * Позиционирование компонента от верхнего или нижнего края экрана\n */\n position?: 'top' | 'bottom';\n\n /**\n * Обработчик события истечения времени до закрытия компонента\n */\n onCloseTimeout?: () => void;\n\n /**\n * Обработчик события наведения курсора на компонент\n */\n onMouseEnter?: (event?: MouseEvent<HTMLDivElement>) => void;\n\n /**\n * Обработчик события снятия курсора с компонента\n */\n onMouseLeave?: (event?: MouseEvent<HTMLDivElement>) => void;\n\n /**\n * Обработчик клика вне компонента\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n onClickOutside?: (event?: MouseEvent<any>) => void;\n};\n\nconst notificationClassNameSelector = `.${styles.notificationComponent}`;\n\nexport const Notification = forwardRef<HTMLDivElement, NotificationProps>(\n (\n {\n className,\n actionSectionClassName,\n children,\n visible,\n offset = 108,\n hasCloser = true,\n autoCloseDelay = 5000,\n usePortal = true,\n zIndex = stackingOrder.TOAST,\n style,\n position = 'top',\n onClose,\n onCloseTimeout,\n onMouseEnter,\n onMouseLeave,\n onClickOutside,\n ...restProps\n },\n ref,\n ) => {\n const notificationRef = useRef<HTMLDivElement>(null);\n const autoCloseTimeoutRef = useRef(0);\n const closeTimeoutRef = useRef(0);\n\n const [isClosing, setIsClosing] = useState(false);\n\n const startAutoCloseTimer = useCallback(() => {\n if (autoCloseDelay !== null) {\n autoCloseTimeoutRef.current = window.setTimeout(() => {\n if (onCloseTimeout) {\n onCloseTimeout();\n }\n }, autoCloseDelay);\n }\n }, [autoCloseDelay, onCloseTimeout]);\n\n const stopAutoCloseTimer = useCallback(() => {\n clearTimeout(autoCloseTimeoutRef.current);\n }, []);\n\n useEffect(\n () => () => {\n clearTimeout(closeTimeoutRef.current);\n },\n [],\n );\n\n useEffect(() => {\n elementClosest(window);\n }, []);\n\n useEffect(() => {\n if (visible) {\n startAutoCloseTimer();\n }\n\n return () => {\n stopAutoCloseTimer();\n };\n }, [startAutoCloseTimer, stopAutoCloseTimer, visible]);\n\n const handleMouseEnter = useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => {\n stopAutoCloseTimer();\n\n if (onMouseEnter) {\n onMouseEnter(event);\n }\n },\n [onMouseEnter, stopAutoCloseTimer],\n );\n\n const handleMouseLeave = useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => {\n stopAutoCloseTimer();\n startAutoCloseTimer();\n\n if (onMouseLeave) {\n onMouseLeave(event);\n }\n },\n [onMouseLeave, startAutoCloseTimer, stopAutoCloseTimer],\n );\n\n const handleOutsideClick = useCallback(\n (event: React.MouseEvent | React.TouchEvent) => {\n const isTargetNotification = !!(event.target as Element).closest(\n notificationClassNameSelector,\n );\n\n /*\n * проверка isTargetNotification нужна для предотвращения срабатывания handleOutsideClick\n * при клике на другие нотификации, если их несколько на странице\n */\n if (onClickOutside && visible && !isTargetNotification) {\n onClickOutside(event as React.MouseEvent);\n }\n },\n [onClickOutside, visible],\n );\n\n useClickOutside(notificationRef, handleOutsideClick);\n\n const swipeableHandlers = useSwipeable({\n onSwiped: ({ dir }) => {\n if (onClose && ['Left', 'Right', 'Up'].includes(dir)) {\n setIsClosing(true);\n\n closeTimeoutRef.current = window.setTimeout(() => {\n setIsClosing(false);\n onClose();\n }, 100);\n }\n },\n delta: 100,\n });\n\n const Wrapper = usePortal ? Portal : Fragment;\n\n return (\n <Stack value={zIndex}>\n {(computedZIndex) => (\n <Wrapper>\n <div {...swipeableHandlers}>\n <ToastPlateDesktop\n className={cn(\n styles.notificationComponent,\n {\n [styles.isVisible]: visible,\n [styles.isClosing]: isClosing,\n },\n className,\n )}\n contentClassName={styles.toastContent}\n actionSectionClassName={cn(\n actionSectionClassName,\n styles.actionSection,\n )}\n style={{\n [position]: offset,\n zIndex: computedZIndex,\n ...style,\n }}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n ref={mergeRefs([ref, notificationRef])}\n role={visible ? 'alert' : undefined}\n hasCloser={hasCloser}\n onClose={onClose}\n {...restProps}\n >\n {children}\n </ToastPlateDesktop>\n </div>\n </Wrapper>\n )}\n </Stack>\n );\n },\n);\n\nNotification.displayName = 'Notification';\n"],"names":["styles","forwardRef","stackingOrder","__rest","useRef","useState","useCallback","useEffect","elementClosest","useClickOutside","useSwipeable","Portal","Fragment","React","Stack","__assign","ToastPlateDesktop","cn","mergeRefs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA+EA,IAAM,6BAA6B,GAAG,GAAA,CAAA,MAAA,CAAIA,YAAM,CAAC,qBAAqB,CAAE;IAE3D,YAAY,GAAGC,gBAAU,CAClC,UACI,EAkBC,EACD,GAAG,EAAA;AAlBC,IAAA,IAAA,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,sBAAsB,GAAA,EAAA,CAAA,sBAAA,EACtB,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,OAAO,aAAA,EACP,EAAA,GAAA,EAAA,CAAA,MAAY,EAAZ,MAAM,mBAAG,GAAG,GAAA,EAAA,EACZ,EAAA,GAAA,EAAA,CAAA,SAAgB,EAAhB,SAAS,GAAA,EAAA,KAAA,MAAA,GAAG,IAAI,GAAA,EAAA,EAChB,EAAqB,GAAA,EAAA,CAAA,cAAA,EAArB,cAAc,GAAA,EAAA,KAAA,MAAA,GAAG,IAAI,GAAA,EAAA,EACrB,EAAgB,GAAA,EAAA,CAAA,SAAA,EAAhB,SAAS,GAAG,EAAA,KAAA,MAAA,GAAA,IAAI,GAAA,EAAA,EAChB,cAA4B,EAA5B,MAAM,GAAG,EAAA,KAAA,MAAA,GAAAC,wCAAa,CAAC,KAAK,GAAA,EAAA,EAC5B,KAAK,WAAA,EACL,EAAA,GAAA,EAAA,CAAA,QAAgB,EAAhB,QAAQ,mBAAG,KAAK,GAAA,EAAA,EAChB,OAAO,aAAA,EACP,cAAc,GAAA,EAAA,CAAA,cAAA,EACd,YAAY,GAAA,EAAA,CAAA,YAAA,EACZ,YAAY,GAAA,EAAA,CAAA,YAAA,EACZ,cAAc,GAAA,EAAA,CAAA,cAAA,EACX,SAAS,GAAAC,YAAA,CAAA,EAAA,EAjBhB,kOAkBC,CADe;AAIhB,IAAA,IAAM,eAAe,GAAGC,YAAM,CAAiB,IAAI,CAAC;AACpD,IAAA,IAAM,mBAAmB,GAAGA,YAAM,CAAC,CAAC,CAAC;AACrC,IAAA,IAAM,eAAe,GAAGA,YAAM,CAAC,CAAC,CAAC;IAE3B,IAAA,EAAA,GAA4BC,cAAQ,CAAC,KAAK,CAAC,EAA1C,SAAS,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,YAAY,GAAA,EAAA,CAAA,CAAA,CAAmB;IAEjD,IAAM,mBAAmB,GAAGC,iBAAW,CAAC,YAAA;QACpC,IAAI,cAAc,KAAK,IAAI,EAAE;AACzB,YAAA,mBAAmB,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,YAAA;AAC5C,gBAAA,IAAI,cAAc,EAAE;AAChB,oBAAA,cAAc,EAAE;AACnB;aACJ,EAAE,cAAc,CAAC;AACrB;AACL,KAAC,EAAE,CAAC,cAAc,EAAE,cAAc,CAAC,CAAC;IAEpC,IAAM,kBAAkB,GAAGA,iBAAW,CAAC,YAAA;AACnC,QAAA,YAAY,CAAC,mBAAmB,CAAC,OAAO,CAAC;KAC5C,EAAE,EAAE,CAAC;IAENC,eAAS,CACL,cAAM,OAAA,YAAA;AACF,QAAA,YAAY,CAAC,eAAe,CAAC,OAAO,CAAC;AACzC,KAAC,CAFK,EAEL,EACD,EAAE,CACL;AAED,IAAAA,eAAS,CAAC,YAAA;QACNC,+BAAc,CAAC,MAAM,CAAC;KACzB,EAAE,EAAE,CAAC;AAEN,IAAAD,eAAS,CAAC,YAAA;AACN,QAAA,IAAI,OAAO,EAAE;AACT,YAAA,mBAAmB,EAAE;AACxB;QAED,OAAO,YAAA;AACH,YAAA,kBAAkB,EAAE;AACxB,SAAC;KACJ,EAAE,CAAC,mBAAmB,EAAE,kBAAkB,EAAE,OAAO,CAAC,CAAC;AAEtD,IAAA,IAAM,gBAAgB,GAAGD,iBAAW,CAChC,UAAC,KAAuC,EAAA;AACpC,QAAA,kBAAkB,EAAE;AAEpB,QAAA,IAAI,YAAY,EAAE;YACd,YAAY,CAAC,KAAK,CAAC;AACtB;AACL,KAAC,EACD,CAAC,YAAY,EAAE,kBAAkB,CAAC,CACrC;AAED,IAAA,IAAM,gBAAgB,GAAGA,iBAAW,CAChC,UAAC,KAAuC,EAAA;AACpC,QAAA,kBAAkB,EAAE;AACpB,QAAA,mBAAmB,EAAE;AAErB,QAAA,IAAI,YAAY,EAAE;YACd,YAAY,CAAC,KAAK,CAAC;AACtB;KACJ,EACD,CAAC,YAAY,EAAE,mBAAmB,EAAE,kBAAkB,CAAC,CAC1D;AAED,IAAA,IAAM,kBAAkB,GAAGA,iBAAW,CAClC,UAAC,KAA0C,EAAA;AACvC,QAAA,IAAM,oBAAoB,GAAG,CAAC,CAAE,KAAK,CAAC,MAAkB,CAAC,OAAO,CAC5D,6BAA6B,CAChC;AAED;;;AAGG;AACH,QAAA,IAAI,cAAc,IAAI,OAAO,IAAI,CAAC,oBAAoB,EAAE;YACpD,cAAc,CAAC,KAAyB,CAAC;AAC5C;AACL,KAAC,EACD,CAAC,cAAc,EAAE,OAAO,CAAC,CAC5B;AAED,IAAAG,qBAAe,CAAC,eAAe,EAAE,kBAAkB,CAAC;IAEpD,IAAM,iBAAiB,GAAGC,2BAAY,CAAC;QACnC,QAAQ,EAAE,UAAC,EAAO,EAAA;AAAL,YAAA,IAAA,GAAG,GAAA,EAAA,CAAA,GAAA;AACZ,YAAA,IAAI,OAAO,IAAI,CAAC,MAAM,EAAE,OAAO,EAAE,IAAI,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;gBAClD,YAAY,CAAC,IAAI,CAAC;AAElB,gBAAA,eAAe,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,YAAA;oBACxC,YAAY,CAAC,KAAK,CAAC;AACnB,oBAAA,OAAO,EAAE;iBACZ,EAAE,GAAG,CAAC;AACV;SACJ;AACD,QAAA,KAAK,EAAE,GAAG;AACb,KAAA,CAAC;IAEF,IAAM,OAAO,GAAG,SAAS,GAAGC,2BAAM,GAAGC,cAAQ;IAE7C,QACIC,qCAACC,yBAAK,EAAA,EAAC,KAAK,EAAE,MAAM,EACf,EAAA,UAAC,cAAc,EAAA;;QAAK,QACjBD,qCAAC,OAAO,EAAA,IAAA;AACJ,YAAAA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAAE,cAAA,CAAA,EAAA,EAAS,iBAAiB,CAAA;gBACtBF,sBAAC,CAAA,aAAA,CAAAG,yBAAiB,mBACd,SAAS,EAAEC,mBAAE,CACTjB,YAAM,CAAC,qBAAqB,GAAA,EAAA,GAAA,EAAA;AAExB,wBAAA,EAAA,CAACA,YAAM,CAAC,SAAS,CAAA,GAAG,OAAO;AAC3B,wBAAA,EAAA,CAACA,YAAM,CAAC,SAAS,CAAA,GAAG,SAAS;AAEjC,wBAAA,EAAA,GAAA,SAAS,CACZ,EACD,gBAAgB,EAAEA,YAAM,CAAC,YAAY,EACrC,sBAAsB,EAAEiB,mBAAE,CACtB,sBAAsB,EACtBjB,YAAM,CAAC,aAAa,CACvB,EACD,KAAK,8BACA,QAAQ,CAAA,GAAG,MAAM,EAClB,SAAM,GAAE,cAAc,EACnB,EAAA,GAAA,KAAK,GAEZ,YAAY,EAAE,gBAAgB,EAC9B,YAAY,EAAE,gBAAgB,EAC9B,GAAG,EAAEkB,0BAAS,CAAC,CAAC,GAAG,EAAE,eAAe,CAAC,CAAC,EACtC,IAAI,EAAE,OAAO,GAAG,OAAO,GAAG,SAAS,EACnC,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAAA,EACZ,SAAS,CAEZ,EAAA,QAAQ,CACO,CAClB,CACA;KACb,CACG;AAEhB,CAAC;AAGL,YAAY,CAAC,WAAW,GAAG,cAAc;;;;"}
|
package/cssm/Component.js
CHANGED
|
@@ -8,11 +8,11 @@ var mergeRefs = require('react-merge-refs');
|
|
|
8
8
|
var reactSwipeable = require('react-swipeable');
|
|
9
9
|
var cn = require('classnames');
|
|
10
10
|
var elementClosest = require('element-closest');
|
|
11
|
-
var
|
|
12
|
-
var
|
|
11
|
+
var cssm$2 = require('@alfalab/core-components-portal/cssm');
|
|
12
|
+
var cssm$1 = require('@alfalab/core-components-stack/cssm');
|
|
13
|
+
var cssm = require('@alfalab/core-components-stack-context/cssm');
|
|
13
14
|
var desktop = require('@alfalab/core-components-toast-plate/cssm/desktop');
|
|
14
|
-
var
|
|
15
|
-
var utils_index = require('./utils/index.js');
|
|
15
|
+
var index = require('./utils/index.js');
|
|
16
16
|
var styles = require('./index.module.css');
|
|
17
17
|
|
|
18
18
|
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
@@ -25,7 +25,7 @@ var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
|
|
|
25
25
|
|
|
26
26
|
var notificationClassNameSelector = ".".concat(styles__default.default.notificationComponent);
|
|
27
27
|
var Notification = React.forwardRef(function (_a, ref) {
|
|
28
|
-
var className = _a.className, actionSectionClassName = _a.actionSectionClassName, children = _a.children, visible = _a.visible, _b = _a.offset, offset = _b === void 0 ? 108 : _b, _c = _a.hasCloser, hasCloser = _c === void 0 ? true : _c, _d = _a.autoCloseDelay, autoCloseDelay = _d === void 0 ? 5000 : _d, _e = _a.usePortal, usePortal = _e === void 0 ? true : _e, _f = _a.zIndex, zIndex = _f === void 0 ?
|
|
28
|
+
var className = _a.className, actionSectionClassName = _a.actionSectionClassName, children = _a.children, visible = _a.visible, _b = _a.offset, offset = _b === void 0 ? 108 : _b, _c = _a.hasCloser, hasCloser = _c === void 0 ? true : _c, _d = _a.autoCloseDelay, autoCloseDelay = _d === void 0 ? 5000 : _d, _e = _a.usePortal, usePortal = _e === void 0 ? true : _e, _f = _a.zIndex, zIndex = _f === void 0 ? cssm.stackingOrder.TOAST : _f, style = _a.style, _g = _a.position, position = _g === void 0 ? 'top' : _g, onClose = _a.onClose, onCloseTimeout = _a.onCloseTimeout, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onClickOutside = _a.onClickOutside, restProps = tslib.__rest(_a, ["className", "actionSectionClassName", "children", "visible", "offset", "hasCloser", "autoCloseDelay", "usePortal", "zIndex", "style", "position", "onClose", "onCloseTimeout", "onMouseEnter", "onMouseLeave", "onClickOutside"]);
|
|
29
29
|
var notificationRef = React.useRef(null);
|
|
30
30
|
var autoCloseTimeoutRef = React.useRef(0);
|
|
31
31
|
var closeTimeoutRef = React.useRef(0);
|
|
@@ -79,7 +79,7 @@ var Notification = React.forwardRef(function (_a, ref) {
|
|
|
79
79
|
onClickOutside(event);
|
|
80
80
|
}
|
|
81
81
|
}, [onClickOutside, visible]);
|
|
82
|
-
|
|
82
|
+
index.useClickOutside(notificationRef, handleOutsideClick);
|
|
83
83
|
var swipeableHandlers = reactSwipeable.useSwipeable({
|
|
84
84
|
onSwiped: function (_a) {
|
|
85
85
|
var dir = _a.dir;
|
|
@@ -93,8 +93,8 @@ var Notification = React.forwardRef(function (_a, ref) {
|
|
|
93
93
|
},
|
|
94
94
|
delta: 100,
|
|
95
95
|
});
|
|
96
|
-
var Wrapper = usePortal ?
|
|
97
|
-
return (React__default.default.createElement(
|
|
96
|
+
var Wrapper = usePortal ? cssm$2.Portal : React.Fragment;
|
|
97
|
+
return (React__default.default.createElement(cssm$1.Stack, { value: zIndex }, function (computedZIndex) {
|
|
98
98
|
var _a, _b;
|
|
99
99
|
return (React__default.default.createElement(Wrapper, null,
|
|
100
100
|
React__default.default.createElement("div", tslib.__assign({}, swipeableHandlers),
|
|
@@ -107,3 +107,4 @@ var Notification = React.forwardRef(function (_a, ref) {
|
|
|
107
107
|
Notification.displayName = 'Notification';
|
|
108
108
|
|
|
109
109
|
exports.Notification = Notification;
|
|
110
|
+
//# sourceMappingURL=Component.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["../../src/Component.tsx"],"sourcesContent":["import React, {\n forwardRef,\n Fragment,\n MouseEvent,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport { useSwipeable } from 'react-swipeable';\nimport cn from 'classnames';\nimport elementClosest from 'element-closest';\n\nimport { Portal } from '@alfalab/core-components-portal';\nimport { Stack } from '@alfalab/core-components-stack';\nimport { stackingOrder } from '@alfalab/core-components-stack-context';\nimport {\n ToastPlateDesktop,\n ToastPlateDesktopProps,\n} from '@alfalab/core-components-toast-plate/desktop';\n\nimport { useClickOutside } from './utils';\n\nimport styles from './index.module.css';\n\nexport type NotificationProps = ToastPlateDesktopProps & {\n /**\n * Управление видимостью компонента\n */\n visible?: boolean;\n\n /**\n * Отступ от верхнего края\n */\n offset?: number;\n\n /**\n * Время до закрытия компонента\n */\n autoCloseDelay?: number | null;\n\n /**\n * Использовать портал\n */\n usePortal?: boolean;\n\n /**\n * z-index компонента\n */\n zIndex?: number;\n\n /**\n * Позиционирование компонента от верхнего или нижнего края экрана\n */\n position?: 'top' | 'bottom';\n\n /**\n * Обработчик события истечения времени до закрытия компонента\n */\n onCloseTimeout?: () => void;\n\n /**\n * Обработчик события наведения курсора на компонент\n */\n onMouseEnter?: (event?: MouseEvent<HTMLDivElement>) => void;\n\n /**\n * Обработчик события снятия курсора с компонента\n */\n onMouseLeave?: (event?: MouseEvent<HTMLDivElement>) => void;\n\n /**\n * Обработчик клика вне компонента\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n onClickOutside?: (event?: MouseEvent<any>) => void;\n};\n\nconst notificationClassNameSelector = `.${styles.notificationComponent}`;\n\nexport const Notification = forwardRef<HTMLDivElement, NotificationProps>(\n (\n {\n className,\n actionSectionClassName,\n children,\n visible,\n offset = 108,\n hasCloser = true,\n autoCloseDelay = 5000,\n usePortal = true,\n zIndex = stackingOrder.TOAST,\n style,\n position = 'top',\n onClose,\n onCloseTimeout,\n onMouseEnter,\n onMouseLeave,\n onClickOutside,\n ...restProps\n },\n ref,\n ) => {\n const notificationRef = useRef<HTMLDivElement>(null);\n const autoCloseTimeoutRef = useRef(0);\n const closeTimeoutRef = useRef(0);\n\n const [isClosing, setIsClosing] = useState(false);\n\n const startAutoCloseTimer = useCallback(() => {\n if (autoCloseDelay !== null) {\n autoCloseTimeoutRef.current = window.setTimeout(() => {\n if (onCloseTimeout) {\n onCloseTimeout();\n }\n }, autoCloseDelay);\n }\n }, [autoCloseDelay, onCloseTimeout]);\n\n const stopAutoCloseTimer = useCallback(() => {\n clearTimeout(autoCloseTimeoutRef.current);\n }, []);\n\n useEffect(\n () => () => {\n clearTimeout(closeTimeoutRef.current);\n },\n [],\n );\n\n useEffect(() => {\n elementClosest(window);\n }, []);\n\n useEffect(() => {\n if (visible) {\n startAutoCloseTimer();\n }\n\n return () => {\n stopAutoCloseTimer();\n };\n }, [startAutoCloseTimer, stopAutoCloseTimer, visible]);\n\n const handleMouseEnter = useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => {\n stopAutoCloseTimer();\n\n if (onMouseEnter) {\n onMouseEnter(event);\n }\n },\n [onMouseEnter, stopAutoCloseTimer],\n );\n\n const handleMouseLeave = useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => {\n stopAutoCloseTimer();\n startAutoCloseTimer();\n\n if (onMouseLeave) {\n onMouseLeave(event);\n }\n },\n [onMouseLeave, startAutoCloseTimer, stopAutoCloseTimer],\n );\n\n const handleOutsideClick = useCallback(\n (event: React.MouseEvent | React.TouchEvent) => {\n const isTargetNotification = !!(event.target as Element).closest(\n notificationClassNameSelector,\n );\n\n /*\n * проверка isTargetNotification нужна для предотвращения срабатывания handleOutsideClick\n * при клике на другие нотификации, если их несколько на странице\n */\n if (onClickOutside && visible && !isTargetNotification) {\n onClickOutside(event as React.MouseEvent);\n }\n },\n [onClickOutside, visible],\n );\n\n useClickOutside(notificationRef, handleOutsideClick);\n\n const swipeableHandlers = useSwipeable({\n onSwiped: ({ dir }) => {\n if (onClose && ['Left', 'Right', 'Up'].includes(dir)) {\n setIsClosing(true);\n\n closeTimeoutRef.current = window.setTimeout(() => {\n setIsClosing(false);\n onClose();\n }, 100);\n }\n },\n delta: 100,\n });\n\n const Wrapper = usePortal ? Portal : Fragment;\n\n return (\n <Stack value={zIndex}>\n {(computedZIndex) => (\n <Wrapper>\n <div {...swipeableHandlers}>\n <ToastPlateDesktop\n className={cn(\n styles.notificationComponent,\n {\n [styles.isVisible]: visible,\n [styles.isClosing]: isClosing,\n },\n className,\n )}\n contentClassName={styles.toastContent}\n actionSectionClassName={cn(\n actionSectionClassName,\n styles.actionSection,\n )}\n style={{\n [position]: offset,\n zIndex: computedZIndex,\n ...style,\n }}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n ref={mergeRefs([ref, notificationRef])}\n role={visible ? 'alert' : undefined}\n hasCloser={hasCloser}\n onClose={onClose}\n {...restProps}\n >\n {children}\n </ToastPlateDesktop>\n </div>\n </Wrapper>\n )}\n </Stack>\n );\n },\n);\n\nNotification.displayName = 'Notification';\n"],"names":["styles","forwardRef","stackingOrder","__rest","useRef","useState","useCallback","useEffect","elementClosest","useClickOutside","useSwipeable","Portal","Fragment","React","Stack","__assign","ToastPlateDesktop","cn","mergeRefs"],"mappings":"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"}
|
package/cssm/index.js
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
|
package/cssm/index.module.css
CHANGED
|
@@ -1,28 +1,9 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
/* Hard */
|
|
8
|
-
|
|
9
|
-
/* Up */
|
|
10
|
-
|
|
11
|
-
/* Hard up */
|
|
12
|
-
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
13
|
-
|
|
14
|
-
/* новые значения, используйте их */
|
|
15
|
-
} :root { /* deprecated */ /* deprecated */
|
|
16
|
-
--gap-xs: 8px; /* deprecated */
|
|
17
|
-
--gap-s: 12px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
18
|
-
--gap-xl: 24px; /* deprecated */ /* deprecated */ /* deprecated */
|
|
19
|
-
--gap-4xl: 48px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
20
|
-
--gap-s-neg: -12px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
21
|
-
|
|
22
|
-
/* новые значения, используйте их */
|
|
23
|
-
|
|
24
|
-
/* no-unit может приводить к проблемам в calc (#1559) */
|
|
25
|
-
/* stylelint-disable-next-line length-zero-no-unit */
|
|
1
|
+
:root {
|
|
2
|
+
--gap-xs: 8px;
|
|
3
|
+
--gap-s: 12px;
|
|
4
|
+
--gap-xl: 24px;
|
|
5
|
+
--gap-4xl: 48px;
|
|
6
|
+
--gap-s-neg: -12px;
|
|
26
7
|
--gap-0: 0px;
|
|
27
8
|
--gap-8: var(--gap-xs);
|
|
28
9
|
--gap-12: var(--gap-s);
|
|
@@ -30,8 +11,6 @@
|
|
|
30
11
|
--gap-48: var(--gap-4xl);
|
|
31
12
|
--gap-12-neg: var(--gap-s-neg);
|
|
32
13
|
} :root {
|
|
33
|
-
} :root {
|
|
34
|
-
} /* сбрасывает синюю подсветку при нажатии */ :root {
|
|
35
14
|
--notification-desktop-content-width: 278px;
|
|
36
15
|
} .notificationComponent {
|
|
37
16
|
visibility: hidden;
|
|
@@ -40,6 +19,7 @@
|
|
|
40
19
|
width: calc(100% - var(--gap-24));
|
|
41
20
|
max-width: calc(100vw - var(--gap-24));
|
|
42
21
|
-webkit-user-select: none;
|
|
22
|
+
-moz-user-select: none;
|
|
43
23
|
user-select: none;
|
|
44
24
|
transition: transform 0.4s ease-out
|
|
45
25
|
} @media screen and (min-width: 600px) { .notificationComponent {
|
package/cssm/shared/index.js
CHANGED
|
@@ -2,8 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var
|
|
5
|
+
var getNotificationTestIds = require('../utils/getNotificationTestIds.js');
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
|
9
|
-
exports.getNotificationTestIds =
|
|
9
|
+
exports.getNotificationTestIds = getNotificationTestIds.getNotificationTestIds;
|
|
10
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
|
|
@@ -1,8 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
3
|
-
|
|
4
|
-
import { ToastPlateDesktopProps } from "@alfalab/core-components-toast-plate/desktop";
|
|
5
|
-
type NotificationProps = ToastPlateDesktopProps & {
|
|
1
|
+
import React, { MouseEvent } from 'react';
|
|
2
|
+
import { ToastPlateDesktopProps } from '@alfalab/core-components-toast-plate/desktop';
|
|
3
|
+
export declare type NotificationProps = ToastPlateDesktopProps & {
|
|
6
4
|
/**
|
|
7
5
|
* Управление видимостью компонента
|
|
8
6
|
*/
|
|
@@ -44,7 +42,7 @@ type NotificationProps = ToastPlateDesktopProps & {
|
|
|
44
42
|
*/
|
|
45
43
|
onClickOutside?: (event?: MouseEvent<any>) => void;
|
|
46
44
|
};
|
|
47
|
-
declare const Notification: React.ForwardRefExoticComponent<ToastPlateDesktopProps & {
|
|
45
|
+
export declare const Notification: React.ForwardRefExoticComponent<ToastPlateDesktopProps & {
|
|
48
46
|
/**
|
|
49
47
|
* Управление видимостью компонента
|
|
50
48
|
*/
|
|
@@ -68,7 +66,7 @@ declare const Notification: React.ForwardRefExoticComponent<ToastPlateDesktopPro
|
|
|
68
66
|
/**
|
|
69
67
|
* Позиционирование компонента от верхнего или нижнего края экрана
|
|
70
68
|
*/
|
|
71
|
-
position?: "
|
|
69
|
+
position?: "top" | "bottom" | undefined;
|
|
72
70
|
/**
|
|
73
71
|
* Обработчик события истечения времени до закрытия компонента
|
|
74
72
|
*/
|
|
@@ -86,4 +84,3 @@ declare const Notification: React.ForwardRefExoticComponent<ToastPlateDesktopPro
|
|
|
86
84
|
*/
|
|
87
85
|
onClickOutside?: ((event?: MouseEvent<any>) => void) | undefined;
|
|
88
86
|
} & React.RefAttributes<HTMLDivElement>>;
|
|
89
|
-
export { NotificationProps, Notification };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './Component';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { getNotificationTestIds } from '../utils/getNotificationTestIds';
|
|
@@ -2,29 +2,14 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var
|
|
6
|
-
var React = require('react');
|
|
7
|
-
require('@alfalab/hooks');
|
|
8
|
-
|
|
9
|
-
function getDataTestId(dataTestId, element) {
|
|
10
|
-
var elementPart = element ? "-".concat(element.toLowerCase()) : '';
|
|
11
|
-
return dataTestId ? "".concat(dataTestId).concat(elementPart) : undefined;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
detectBrowser.detect();
|
|
15
|
-
|
|
16
|
-
detectBrowser.detect();
|
|
17
|
-
|
|
18
|
-
React.createContext(function () { return null; });
|
|
19
|
-
|
|
20
|
-
/* eslint-disable no-console */
|
|
21
|
-
if (process.env.NODE_ENV === 'development') ;
|
|
5
|
+
var cssm = require('@alfalab/core-components-shared/cssm');
|
|
22
6
|
|
|
23
7
|
function getNotificationTestIds(dataTestId) {
|
|
24
8
|
return {
|
|
25
|
-
badge: getDataTestId(dataTestId, 'badge'),
|
|
26
|
-
component: getDataTestId(dataTestId, 'component'),
|
|
9
|
+
badge: cssm.getDataTestId(dataTestId, 'badge'),
|
|
10
|
+
component: cssm.getDataTestId(dataTestId, 'component'),
|
|
27
11
|
};
|
|
28
12
|
}
|
|
29
13
|
|
|
30
14
|
exports.getNotificationTestIds = getNotificationTestIds;
|
|
15
|
+
//# sourceMappingURL=getNotificationTestIds.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"getNotificationTestIds.js","sources":["../../../src/utils/getNotificationTestIds.ts"],"sourcesContent":["import { getDataTestId } from '@alfalab/core-components-shared';\n\nexport function getNotificationTestIds(dataTestId: string) {\n return {\n badge: getDataTestId(dataTestId, 'badge'),\n component: getDataTestId(dataTestId, 'component'),\n };\n}\n"],"names":["getDataTestId"],"mappings":";;;;;;AAEM,SAAU,sBAAsB,CAAC,UAAkB,EAAA;IACrD,OAAO;AACH,QAAA,KAAK,EAAEA,kBAAa,CAAC,UAAU,EAAE,OAAO,CAAC;AACzC,QAAA,SAAS,EAAEA,kBAAa,CAAC,UAAU,EAAE,WAAW,CAAC;KACpD;AACL;;;;"}
|
package/cssm/utils/index.js
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/utils/index.ts"],"sourcesContent":["import React from 'react';\n\n/*\n * Дублирую хук из @alfalab/hooks, так как не подходят названия событий\n * https://github.com/core-ds/utils/blob/develop/packages/hooks/src/useClickOutside/hook.ts\n * issue завел, когда изменения будут реализованы, отсюда можно будет удалить\n * https://github.com/core-ds/utils/issues/35\n */\nexport function useClickOutside(\n ref: React.RefObject<HTMLElement>,\n cb: (e: React.MouseEvent | React.TouchEvent) => void,\n): void {\n React.useEffect(() => {\n // eslint-disable-next-line\n const handler = (event: any) => {\n if (!ref.current || ref.current.contains(event.target)) {\n return;\n }\n\n cb(event);\n };\n\n document.addEventListener('click', handler);\n document.addEventListener('touchend', handler);\n\n return () => {\n document.removeEventListener('click', handler);\n document.removeEventListener('touchend', handler);\n };\n }, [ref, cb]);\n}\n"],"names":["React"],"mappings":";;;;;;;;;;AAEA;;;;;AAKG;AACa,SAAA,eAAe,CAC3B,GAAiC,EACjC,EAAoD,EAAA;IAEpDA,sBAAK,CAAC,SAAS,CAAC,YAAA;;QAEZ,IAAM,OAAO,GAAG,UAAC,KAAU,EAAA;AACvB,YAAA,IAAI,CAAC,GAAG,CAAC,OAAO,IAAI,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE;gBACpD;AACH;YAED,EAAE,CAAC,KAAK,CAAC;AACb,SAAC;AAED,QAAA,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,OAAO,CAAC;AAC3C,QAAA,QAAQ,CAAC,gBAAgB,CAAC,UAAU,EAAE,OAAO,CAAC;QAE9C,OAAO,YAAA;AACH,YAAA,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,OAAO,CAAC;AAC9C,YAAA,QAAQ,CAAC,mBAAmB,CAAC,UAAU,EAAE,OAAO,CAAC;AACrD,SAAC;AACL,KAAC,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;AACjB;;;;"}
|
package/esm/Component.js
CHANGED
|
@@ -6,12 +6,10 @@ import cn from 'classnames';
|
|
|
6
6
|
import elementClosest from 'element-closest';
|
|
7
7
|
import { Portal } from '@alfalab/core-components-portal/esm';
|
|
8
8
|
import { Stack } from '@alfalab/core-components-stack/esm';
|
|
9
|
+
import { stackingOrder } from '@alfalab/core-components-stack-context/esm';
|
|
9
10
|
import { ToastPlateDesktop } from '@alfalab/core-components-toast-plate/esm/desktop';
|
|
10
|
-
import { stackingOrder } from '@alfalab/stack-context';
|
|
11
11
|
import { useClickOutside } from './utils/index.js';
|
|
12
|
-
|
|
13
|
-
var styles = {"notificationComponent":"notification__notificationComponent_1o0d1","isVisible":"notification__isVisible_1o0d1","isClosing":"notification__isClosing_1o0d1","toastContent":"notification__toastContent_1o0d1","actionSection":"notification__actionSection_1o0d1"};
|
|
14
|
-
require('./index.css')
|
|
12
|
+
import styles from './index.module.css.js';
|
|
15
13
|
|
|
16
14
|
var notificationClassNameSelector = ".".concat(styles.notificationComponent);
|
|
17
15
|
var Notification = forwardRef(function (_a, ref) {
|
|
@@ -97,3 +95,4 @@ var Notification = forwardRef(function (_a, ref) {
|
|
|
97
95
|
Notification.displayName = 'Notification';
|
|
98
96
|
|
|
99
97
|
export { Notification };
|
|
98
|
+
//# sourceMappingURL=Component.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["../../src/Component.tsx"],"sourcesContent":["import React, {\n forwardRef,\n Fragment,\n MouseEvent,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport { useSwipeable } from 'react-swipeable';\nimport cn from 'classnames';\nimport elementClosest from 'element-closest';\n\nimport { Portal } from '@alfalab/core-components-portal';\nimport { Stack } from '@alfalab/core-components-stack';\nimport { stackingOrder } from '@alfalab/core-components-stack-context';\nimport {\n ToastPlateDesktop,\n ToastPlateDesktopProps,\n} from '@alfalab/core-components-toast-plate/desktop';\n\nimport { useClickOutside } from './utils';\n\nimport styles from './index.module.css';\n\nexport type NotificationProps = ToastPlateDesktopProps & {\n /**\n * Управление видимостью компонента\n */\n visible?: boolean;\n\n /**\n * Отступ от верхнего края\n */\n offset?: number;\n\n /**\n * Время до закрытия компонента\n */\n autoCloseDelay?: number | null;\n\n /**\n * Использовать портал\n */\n usePortal?: boolean;\n\n /**\n * z-index компонента\n */\n zIndex?: number;\n\n /**\n * Позиционирование компонента от верхнего или нижнего края экрана\n */\n position?: 'top' | 'bottom';\n\n /**\n * Обработчик события истечения времени до закрытия компонента\n */\n onCloseTimeout?: () => void;\n\n /**\n * Обработчик события наведения курсора на компонент\n */\n onMouseEnter?: (event?: MouseEvent<HTMLDivElement>) => void;\n\n /**\n * Обработчик события снятия курсора с компонента\n */\n onMouseLeave?: (event?: MouseEvent<HTMLDivElement>) => void;\n\n /**\n * Обработчик клика вне компонента\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n onClickOutside?: (event?: MouseEvent<any>) => void;\n};\n\nconst notificationClassNameSelector = `.${styles.notificationComponent}`;\n\nexport const Notification = forwardRef<HTMLDivElement, NotificationProps>(\n (\n {\n className,\n actionSectionClassName,\n children,\n visible,\n offset = 108,\n hasCloser = true,\n autoCloseDelay = 5000,\n usePortal = true,\n zIndex = stackingOrder.TOAST,\n style,\n position = 'top',\n onClose,\n onCloseTimeout,\n onMouseEnter,\n onMouseLeave,\n onClickOutside,\n ...restProps\n },\n ref,\n ) => {\n const notificationRef = useRef<HTMLDivElement>(null);\n const autoCloseTimeoutRef = useRef(0);\n const closeTimeoutRef = useRef(0);\n\n const [isClosing, setIsClosing] = useState(false);\n\n const startAutoCloseTimer = useCallback(() => {\n if (autoCloseDelay !== null) {\n autoCloseTimeoutRef.current = window.setTimeout(() => {\n if (onCloseTimeout) {\n onCloseTimeout();\n }\n }, autoCloseDelay);\n }\n }, [autoCloseDelay, onCloseTimeout]);\n\n const stopAutoCloseTimer = useCallback(() => {\n clearTimeout(autoCloseTimeoutRef.current);\n }, []);\n\n useEffect(\n () => () => {\n clearTimeout(closeTimeoutRef.current);\n },\n [],\n );\n\n useEffect(() => {\n elementClosest(window);\n }, []);\n\n useEffect(() => {\n if (visible) {\n startAutoCloseTimer();\n }\n\n return () => {\n stopAutoCloseTimer();\n };\n }, [startAutoCloseTimer, stopAutoCloseTimer, visible]);\n\n const handleMouseEnter = useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => {\n stopAutoCloseTimer();\n\n if (onMouseEnter) {\n onMouseEnter(event);\n }\n },\n [onMouseEnter, stopAutoCloseTimer],\n );\n\n const handleMouseLeave = useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => {\n stopAutoCloseTimer();\n startAutoCloseTimer();\n\n if (onMouseLeave) {\n onMouseLeave(event);\n }\n },\n [onMouseLeave, startAutoCloseTimer, stopAutoCloseTimer],\n );\n\n const handleOutsideClick = useCallback(\n (event: React.MouseEvent | React.TouchEvent) => {\n const isTargetNotification = !!(event.target as Element).closest(\n notificationClassNameSelector,\n );\n\n /*\n * проверка isTargetNotification нужна для предотвращения срабатывания handleOutsideClick\n * при клике на другие нотификации, если их несколько на странице\n */\n if (onClickOutside && visible && !isTargetNotification) {\n onClickOutside(event as React.MouseEvent);\n }\n },\n [onClickOutside, visible],\n );\n\n useClickOutside(notificationRef, handleOutsideClick);\n\n const swipeableHandlers = useSwipeable({\n onSwiped: ({ dir }) => {\n if (onClose && ['Left', 'Right', 'Up'].includes(dir)) {\n setIsClosing(true);\n\n closeTimeoutRef.current = window.setTimeout(() => {\n setIsClosing(false);\n onClose();\n }, 100);\n }\n },\n delta: 100,\n });\n\n const Wrapper = usePortal ? Portal : Fragment;\n\n return (\n <Stack value={zIndex}>\n {(computedZIndex) => (\n <Wrapper>\n <div {...swipeableHandlers}>\n <ToastPlateDesktop\n className={cn(\n styles.notificationComponent,\n {\n [styles.isVisible]: visible,\n [styles.isClosing]: isClosing,\n },\n className,\n )}\n contentClassName={styles.toastContent}\n actionSectionClassName={cn(\n actionSectionClassName,\n styles.actionSection,\n )}\n style={{\n [position]: offset,\n zIndex: computedZIndex,\n ...style,\n }}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n ref={mergeRefs([ref, notificationRef])}\n role={visible ? 'alert' : undefined}\n hasCloser={hasCloser}\n onClose={onClose}\n {...restProps}\n >\n {children}\n </ToastPlateDesktop>\n </div>\n </Wrapper>\n )}\n </Stack>\n );\n },\n);\n\nNotification.displayName = 'Notification';\n"],"names":[],"mappings":"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"}
|
package/esm/index.css
CHANGED
|
@@ -1,29 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
:
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
/* Hard */
|
|
9
|
-
|
|
10
|
-
/* Up */
|
|
11
|
-
|
|
12
|
-
/* Hard up */
|
|
13
|
-
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
14
|
-
|
|
15
|
-
/* новые значения, используйте их */
|
|
16
|
-
} :root { /* deprecated */ /* deprecated */
|
|
17
|
-
--gap-xs: 8px; /* deprecated */
|
|
18
|
-
--gap-s: 12px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
19
|
-
--gap-xl: 24px; /* deprecated */ /* deprecated */ /* deprecated */
|
|
20
|
-
--gap-4xl: 48px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
21
|
-
--gap-s-neg: -12px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
22
|
-
|
|
23
|
-
/* новые значения, используйте их */
|
|
24
|
-
|
|
25
|
-
/* no-unit может приводить к проблемам в calc (#1559) */
|
|
26
|
-
/* stylelint-disable-next-line length-zero-no-unit */
|
|
1
|
+
:root {
|
|
2
|
+
--gap-xs: 8px;
|
|
3
|
+
--gap-s: 12px;
|
|
4
|
+
--gap-xl: 24px;
|
|
5
|
+
--gap-4xl: 48px;
|
|
6
|
+
--gap-s-neg: -12px;
|
|
27
7
|
--gap-0: 0px;
|
|
28
8
|
--gap-8: var(--gap-xs);
|
|
29
9
|
--gap-12: var(--gap-s);
|
|
@@ -31,38 +11,37 @@
|
|
|
31
11
|
--gap-48: var(--gap-4xl);
|
|
32
12
|
--gap-12-neg: var(--gap-s-neg);
|
|
33
13
|
} :root {
|
|
34
|
-
} :root {
|
|
35
|
-
} /* сбрасывает синюю подсветку при нажатии */ :root {
|
|
36
14
|
--notification-desktop-content-width: 278px;
|
|
37
|
-
} .
|
|
15
|
+
} .notification__notificationComponent_1qc43 {
|
|
38
16
|
visibility: hidden;
|
|
39
17
|
right: var(--gap-12);
|
|
40
18
|
transform: translate(0, -500px);
|
|
41
19
|
width: calc(100% - var(--gap-24));
|
|
42
20
|
max-width: calc(100vw - var(--gap-24));
|
|
43
21
|
-webkit-user-select: none;
|
|
22
|
+
-moz-user-select: none;
|
|
44
23
|
user-select: none;
|
|
45
24
|
transition: transform 0.4s ease-out
|
|
46
|
-
} @media screen and (min-width: 600px) { .
|
|
25
|
+
} @media screen and (min-width: 600px) { .notification__notificationComponent_1qc43 {
|
|
47
26
|
right: var(--gap-48);
|
|
48
27
|
width: auto;
|
|
49
28
|
transform: translate(calc(100% + var(--gap-48)), 0)
|
|
50
29
|
}
|
|
51
|
-
} .
|
|
30
|
+
} .notification__notificationComponent_1qc43.notification__isVisible_1qc43 {
|
|
52
31
|
visibility: visible;
|
|
53
32
|
transform: translate(0, 0);
|
|
54
|
-
} .
|
|
33
|
+
} .notification__notificationComponent_1qc43.notification__isClosing_1qc43 {
|
|
55
34
|
transition: transform 0.1s ease-out;
|
|
56
35
|
transform: translate(100vw, 0)
|
|
57
|
-
} @media screen and (min-width: 600px) { .
|
|
36
|
+
} @media screen and (min-width: 600px) { .notification__notificationComponent_1qc43.notification__isClosing_1qc43 {
|
|
58
37
|
transform: translate(calc(100% + var(--gap-48)), 0)
|
|
59
38
|
}
|
|
60
|
-
} .
|
|
39
|
+
} .notification__notificationComponent_1qc43.notification__notificationComponent_1qc43 {
|
|
61
40
|
position: fixed;
|
|
62
|
-
} @media screen and (min-width: 600px) { .
|
|
41
|
+
} @media screen and (min-width: 600px) { .notification__toastContent_1qc43 {
|
|
63
42
|
width: var(--notification-desktop-content-width)
|
|
64
43
|
}
|
|
65
|
-
} .
|
|
44
|
+
} .notification__actionSection_1qc43 {
|
|
66
45
|
min-width: 104px;
|
|
67
46
|
min-height: 48px;
|
|
68
47
|
padding: var(--gap-0) var(--gap-8);
|
package/esm/index.js
CHANGED
package/esm/index.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import './index.css';
|
|
2
|
+
|
|
3
|
+
var styles = {"notificationComponent":"notification__notificationComponent_1qc43","isVisible":"notification__isVisible_1qc43","isClosing":"notification__isClosing_1qc43","toastContent":"notification__toastContent_1qc43","actionSection":"notification__actionSection_1qc43"};
|
|
4
|
+
|
|
5
|
+
export { styles as default };
|
|
6
|
+
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '../../vars/src/index.css';\n\n:root {\n --notification-desktop-content-width: 278px;\n}\n\n.notificationComponent {\n visibility: hidden;\n right: var(--gap-12);\n transform: translate(0, -500px);\n width: calc(100% - var(--gap-24));\n max-width: calc(100vw - var(--gap-24));\n user-select: none;\n transition: transform 0.4s ease-out;\n\n @media screen and (min-width: 600px) {\n right: var(--gap-48);\n width: auto;\n transform: translate(calc(100% + var(--gap-48)), 0);\n }\n\n &.isVisible {\n visibility: visible;\n transform: translate(0, 0);\n }\n\n &.isClosing {\n transition: transform 0.1s ease-out;\n transform: translate(100vw, 0);\n\n @media screen and (min-width: 600px) {\n transform: translate(calc(100% + var(--gap-48)), 0);\n }\n }\n}\n\n.notificationComponent.notificationComponent {\n position: fixed;\n}\n\n.toastContent {\n @media screen and (min-width: 600px) {\n width: var(--notification-desktop-content-width);\n }\n}\n\n.actionSection {\n min-width: 104px;\n min-height: 48px;\n padding: var(--gap-0) var(--gap-8);\n margin: var(--gap-12-neg) var(--gap-0);\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,uBAAuB,CAAC,2CAA2C,CAAC,WAAW,CAAC,+BAA+B,CAAC,WAAW,CAAC,+BAA+B,CAAC,cAAc,CAAC,kCAAkC,CAAC,eAAe,CAAC,mCAAmC,CAAC;;;;"}
|
package/esm/shared/index.js
CHANGED