@ozen-ui/kit 0.13.2 → 0.13.4
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/README.md +3 -3
- package/__inner__/cjs/components/Avatar/Avatar.js +3 -3
- package/__inner__/cjs/components/Avatar/get-hash-number.js +2 -2
- package/__inner__/cjs/components/DataList/DataList.js +10 -5
- package/__inner__/cjs/components/DataList/useDataListNavigation.js +1 -1
- package/__inner__/cjs/components/FilePicker/constants.js +2 -2
- package/__inner__/cjs/components/Menu/components/MenuList/MenuList.js +2 -1
- package/__inner__/cjs/components/Popover/Popover.js +4 -2
- package/__inner__/cjs/components/Snackbar/SnackbarProvider.js +16 -14
- package/__inner__/cjs/components/Snackbar/components/Snackbar/Snackbar.d.ts +2 -2
- package/__inner__/cjs/components/Snackbar/components/Snackbar/Snackbar.js +1 -1
- package/__inner__/cjs/components/Snackbar/store/helpers/updateMessagesFromQueue.js +2 -1
- package/__inner__/esm/components/Avatar/Avatar.js +3 -3
- package/__inner__/esm/components/Avatar/get-hash-number.js +2 -2
- package/__inner__/esm/components/DataList/DataList.js +10 -5
- package/__inner__/esm/components/DataList/useDataListNavigation.js +1 -1
- package/__inner__/esm/components/FilePicker/constants.js +2 -2
- package/__inner__/esm/components/Menu/components/MenuList/MenuList.js +2 -1
- package/__inner__/esm/components/Popover/Popover.js +4 -2
- package/__inner__/esm/components/Snackbar/SnackbarProvider.js +16 -14
- package/__inner__/esm/components/Snackbar/components/Snackbar/Snackbar.d.ts +2 -2
- package/__inner__/esm/components/Snackbar/components/Snackbar/Snackbar.js +1 -1
- package/__inner__/esm/components/Snackbar/store/helpers/updateMessagesFromQueue.js +2 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -21,9 +21,9 @@ pnpm add @ozen-ui/kit
|
|
|
21
21
|
|
|
22
22
|
Разделы для знакомства с библиотекой:
|
|
23
23
|
|
|
24
|
-
- [Быстрый старт](https://ozen-ui.netlify.app/?path=/docs
|
|
25
|
-
- [Дизайн-токены](https://ozen-ui.netlify.app/?path=/docs
|
|
26
|
-
- [Обзор компонентов](https://ozen-ui.netlify.app/?path=/docs
|
|
24
|
+
- [Быстрый старт](https://ozen-ui.netlify.app/?path=/docs/documentation-getting-started--docs)
|
|
25
|
+
- [Дизайн-токены](https://ozen-ui.netlify.app/?path=/docs/foundations-design-tokens--docs)
|
|
26
|
+
- [Обзор компонентов](https://ozen-ui.netlify.app/?path=/docs/documentation-overview--docs)
|
|
27
27
|
|
|
28
28
|
## О нас
|
|
29
29
|
|
|
@@ -24,14 +24,14 @@ exports.avatarHueVariant = [1, 2, 3];
|
|
|
24
24
|
var avatarEl = 'div';
|
|
25
25
|
exports.cnAvatar = (0, classname_1.cn)('Avatar');
|
|
26
26
|
var getInitials = function (name) {
|
|
27
|
-
var _a, _b;
|
|
27
|
+
var _a, _b, _c;
|
|
28
28
|
var parts = name.split(' ');
|
|
29
29
|
var initials;
|
|
30
30
|
if (parts.length === 1) {
|
|
31
|
-
initials = parts[0].charAt(0);
|
|
31
|
+
initials = ((_a = parts[0]) === null || _a === void 0 ? void 0 : _a.charAt(0)) || '';
|
|
32
32
|
}
|
|
33
33
|
else {
|
|
34
|
-
initials = ((
|
|
34
|
+
initials = ((_b = parts.shift()) !== null && _b !== void 0 ? _b : '').charAt(0) + ((_c = parts.pop()) !== null && _c !== void 0 ? _c : '').charAt(0);
|
|
35
35
|
}
|
|
36
36
|
return initials.toUpperCase();
|
|
37
37
|
};
|
|
@@ -5,7 +5,7 @@ var cache = {};
|
|
|
5
5
|
var getHashNumber = function (value, maxNumber) {
|
|
6
6
|
var cacheIndex = "".concat(value, "-").concat(maxNumber);
|
|
7
7
|
if (cache[cacheIndex]) {
|
|
8
|
-
return cache[cacheIndex];
|
|
8
|
+
return cache[cacheIndex] || 0;
|
|
9
9
|
}
|
|
10
10
|
var hash = 0;
|
|
11
11
|
for (var i = 0, len = value.length; i < len; i++) {
|
|
@@ -14,6 +14,6 @@ var getHashNumber = function (value, maxNumber) {
|
|
|
14
14
|
hash |= 0;
|
|
15
15
|
}
|
|
16
16
|
cache[cacheIndex] = Math.abs(hash) % maxNumber;
|
|
17
|
-
return cache[cacheIndex];
|
|
17
|
+
return cache[cacheIndex] || 0;
|
|
18
18
|
};
|
|
19
19
|
exports.getHashNumber = getHashNumber;
|
|
@@ -10,6 +10,7 @@ var useEventListener_1 = require("../../hooks/useEventListener");
|
|
|
10
10
|
var useMultiRef_1 = require("../../hooks/useMultiRef");
|
|
11
11
|
var useThemeProps_1 = require("../../hooks/useThemeProps");
|
|
12
12
|
var classname_1 = require("../../utils/classname");
|
|
13
|
+
var isKey_1 = require("../../utils/isKey");
|
|
13
14
|
var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
|
|
14
15
|
var List_1 = require("../List");
|
|
15
16
|
var Popover_1 = require("../Popover");
|
|
@@ -63,16 +64,20 @@ var DataListRender = function (inProps, ref) {
|
|
|
63
64
|
element: anchorRef,
|
|
64
65
|
handler: onKeyDown,
|
|
65
66
|
});
|
|
66
|
-
// Закрывает список
|
|
67
|
+
// Закрывает список нажатию клавиши {Tab}
|
|
68
|
+
// Событие focusout может не срабатывать на устройствах iOS,
|
|
69
|
+
// так как многие интерактивные элементы по клику не получают фокус.
|
|
67
70
|
(0, useEventListener_1.useEventListener)({
|
|
68
71
|
active: open,
|
|
69
|
-
eventName: '
|
|
72
|
+
eventName: 'keydown',
|
|
70
73
|
element: anchorRef,
|
|
71
|
-
handler: function () {
|
|
72
|
-
|
|
74
|
+
handler: function (event) {
|
|
75
|
+
if ((0, isKey_1.isKey)(event, 'Tab')) {
|
|
76
|
+
onClose === null || onClose === void 0 ? void 0 : onClose();
|
|
77
|
+
}
|
|
73
78
|
},
|
|
74
79
|
});
|
|
75
|
-
return (react_1.default.createElement(Popover_1.Popover, tslib_1.__assign({ as: as, open: open, placement: "bottom-start", disableReturnFocus: true,
|
|
80
|
+
return (react_1.default.createElement(Popover_1.Popover, tslib_1.__assign({ as: as, open: open, placement: "bottom-start", disableReturnFocus: true, disableEnforceFocus: true, offset: [0, 4], onClose: onClose, anchorRef: anchorRef, transitionProps: {
|
|
76
81
|
classNames: (0, exports.cnDataList)({ animation: true }),
|
|
77
82
|
} }, other, { onEntered: function () {
|
|
78
83
|
onEntered();
|
|
@@ -78,7 +78,7 @@ function useDataListNavigation(_a) {
|
|
|
78
78
|
var newIndex = isArrowUp
|
|
79
79
|
? (0, getPrevIndex_1.getPrevIndex)(currentIndex !== null && currentIndex !== void 0 ? currentIndex : 0, values.length)
|
|
80
80
|
: (0, getNextIndex_1.getNextIndex)(currentIndex !== null && currentIndex !== void 0 ? currentIndex : -1, values.length);
|
|
81
|
-
var newValue = values[newIndex];
|
|
81
|
+
var newValue = values[newIndex] || '';
|
|
82
82
|
setCurrent(newValue);
|
|
83
83
|
serFocused(newValue);
|
|
84
84
|
if (ref === null || ref === void 0 ? void 0 : ref.current) {
|
|
@@ -15,8 +15,8 @@ var FILE_PICKER_DEFAULT_VALUE_RENDERER = function (files, disableTruncate) {
|
|
|
15
15
|
if (Array.isArray(files) && files.length > 1) {
|
|
16
16
|
return "\u0424\u0430\u0439\u043B\u043E\u0432 \u0432\u044B\u0431\u0440\u0430\u043D\u043E: ".concat(files.length);
|
|
17
17
|
}
|
|
18
|
-
var _a = tslib_1.__read(files, 1),
|
|
19
|
-
if (disableTruncate || file.name.length <= 20) {
|
|
18
|
+
var _a = tslib_1.__read(files, 1), _b = _a[0], file = _b === void 0 ? { name: '' } : _b;
|
|
19
|
+
if (disableTruncate || (file === null || file === void 0 ? void 0 : file.name.length) <= 20) {
|
|
20
20
|
return file.name;
|
|
21
21
|
}
|
|
22
22
|
return "".concat(file.name.slice(0, 9), "...").concat(file.name.slice(-9));
|
|
@@ -32,8 +32,9 @@ exports.MenuList = (0, react_1.forwardRef)(function (inProps, ref) {
|
|
|
32
32
|
}
|
|
33
33
|
});
|
|
34
34
|
return (react_1.default.createElement(List_1.List, tslib_1.__assign({ role: "menu", as: "div", tabIndex: -1, onClick: function (e) {
|
|
35
|
+
var _a;
|
|
35
36
|
if (e.target === e.currentTarget) {
|
|
36
|
-
nodesRef.current[0].focus();
|
|
37
|
+
(_a = nodesRef.current[0]) === null || _a === void 0 ? void 0 : _a.focus();
|
|
37
38
|
}
|
|
38
39
|
}, ref: ref }, other), react_1.Children.map(resolvedChildren, function (child, index) {
|
|
39
40
|
if (!(0, react_1.isValidElement)(child) ||
|
|
@@ -81,8 +81,10 @@ exports.Popover = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)
|
|
|
81
81
|
enabled: !!equalAnchorWidth,
|
|
82
82
|
fn: function (_a) {
|
|
83
83
|
var state = _a.state;
|
|
84
|
-
|
|
85
|
-
|
|
84
|
+
if ('popper' in state.styles) {
|
|
85
|
+
// eslint-disable-next-line no-param-reassign
|
|
86
|
+
state.styles.popper.width = "".concat(state.rects.reference.width, "px");
|
|
87
|
+
}
|
|
86
88
|
},
|
|
87
89
|
effect: function (_a) {
|
|
88
90
|
var _b;
|
|
@@ -64,20 +64,22 @@ exports.SnackbarProvider = (0, react_1.forwardRef)(function (inProps, ref) {
|
|
|
64
64
|
}, [providerProps]);
|
|
65
65
|
var context = (0, react_1.useMemo)(function () { return ({ pushMessage: pushMessage, closeMessage: closeMessage }); }, []);
|
|
66
66
|
var snackbars = Object.keys(messagesByAnchorOrigin).map(function (origin) {
|
|
67
|
-
var
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
67
|
+
var _a;
|
|
68
|
+
var messages = messagesByAnchorOrigin[origin] || [];
|
|
69
|
+
return (react_1.default.createElement(components_1.Snackbar, tslib_1.__assign({}, other, { key: origin, anchorOrigin: (_a = messages === null || messages === void 0 ? void 0 : messages[0]) === null || _a === void 0 ? void 0 : _a.anchorOrigin, className: className, container: container, ref: ref }), !!messages.length &&
|
|
70
|
+
messages.map(function (message) { return (react_1.default.createElement(components_1.SnackbarItem, tslib_1.__assign({}, message, { key: message.key, onClose: function (messageId) {
|
|
71
|
+
var _a;
|
|
72
|
+
closeMessage(messageId);
|
|
73
|
+
(_a = message.onClose) === null || _a === void 0 ? void 0 : _a.call(message, messageId);
|
|
74
|
+
}, onExited: function (messageId) {
|
|
75
|
+
var _a;
|
|
76
|
+
handleExitedSnackbarItem(messageId);
|
|
77
|
+
(_a = message.onExited) === null || _a === void 0 ? void 0 : _a.call(message, messageId);
|
|
78
|
+
}, onEntered: function (messageId) {
|
|
79
|
+
var _a;
|
|
80
|
+
handleEnteredSnackbarItem(messageId);
|
|
81
|
+
(_a = message.onEntered) === null || _a === void 0 ? void 0 : _a.call(message, messageId);
|
|
82
|
+
} }))); })));
|
|
81
83
|
});
|
|
82
84
|
return (react_1.default.createElement(SnackbarContext_1.SnackbarContext.Provider, { value: context },
|
|
83
85
|
children,
|
|
@@ -6,11 +6,11 @@ export declare const cnSnackbar: import("@bem-react/classname").ClassNameFormatt
|
|
|
6
6
|
export type SnackbarRef = PortalRef;
|
|
7
7
|
export type SnackbarProps = PortalProps & {
|
|
8
8
|
/** Расположение сообщения относительно контейнера */
|
|
9
|
-
anchorOrigin
|
|
9
|
+
anchorOrigin?: SnackbarAnchorOrigin;
|
|
10
10
|
};
|
|
11
11
|
export declare const Snackbar: React.ForwardRefExoticComponent<import("../../../Portal").PortalBaseProps & {
|
|
12
12
|
as?: "div" | undefined;
|
|
13
13
|
} & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "container"> & {
|
|
14
14
|
/** Расположение сообщения относительно контейнера */
|
|
15
|
-
anchorOrigin
|
|
15
|
+
anchorOrigin?: SnackbarAnchorOrigin | undefined;
|
|
16
16
|
} & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -10,7 +10,7 @@ var Portal_1 = require("../../../Portal");
|
|
|
10
10
|
var SnackbarManager_1 = require("./SnackbarManager");
|
|
11
11
|
exports.cnSnackbar = (0, classname_1.cn)('Snackbar');
|
|
12
12
|
exports.Snackbar = (0, react_1.forwardRef)(function (_a, ref) {
|
|
13
|
-
var children = _a.children, className = _a.className, _b = _a.anchorOrigin, vertical =
|
|
13
|
+
var children = _a.children, className = _a.className, _b = _a.anchorOrigin, _c = _b === void 0 ? {} : _b, vertical = _c.vertical, horizontal = _c.horizontal, other = tslib_1.__rest(_a, ["children", "className", "anchorOrigin"]);
|
|
14
14
|
var popoverRef = (0, react_1.useRef)(null);
|
|
15
15
|
(0, SnackbarManager_1.useSnackbarManager)(popoverRef, 1100);
|
|
16
16
|
return (react_1.default.createElement(Portal_1.Portal, tslib_1.__assign({ ref: (0, useMultiRef_1.useMultiRef)([ref, popoverRef]), className: (0, exports.cnSnackbar)({
|
|
@@ -28,6 +28,7 @@ var updateMessagesFromQueue = function (state) {
|
|
|
28
28
|
return tslib_1.__assign(tslib_1.__assign({}, state), { messages: newMessages });
|
|
29
29
|
}
|
|
30
30
|
var _a = tslib_1.__read(queue), firstMessageItemFromQueue = _a[0], otherQueue = _a.slice(1);
|
|
31
|
-
return tslib_1.__assign(tslib_1.__assign({}, state), { messages:
|
|
31
|
+
return tslib_1.__assign(tslib_1.__assign({}, state), { messages: messages && firstMessageItemFromQueue
|
|
32
|
+
? tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read(messages), false), [firstMessageItemFromQueue], false) : [], queue: otherQueue });
|
|
32
33
|
};
|
|
33
34
|
exports.updateMessagesFromQueue = updateMessagesFromQueue;
|
|
@@ -21,14 +21,14 @@ export var avatarHueVariant = [1, 2, 3];
|
|
|
21
21
|
var avatarEl = 'div';
|
|
22
22
|
export var cnAvatar = cn('Avatar');
|
|
23
23
|
var getInitials = function (name) {
|
|
24
|
-
var _a, _b;
|
|
24
|
+
var _a, _b, _c;
|
|
25
25
|
var parts = name.split(' ');
|
|
26
26
|
var initials;
|
|
27
27
|
if (parts.length === 1) {
|
|
28
|
-
initials = parts[0].charAt(0);
|
|
28
|
+
initials = ((_a = parts[0]) === null || _a === void 0 ? void 0 : _a.charAt(0)) || '';
|
|
29
29
|
}
|
|
30
30
|
else {
|
|
31
|
-
initials = ((
|
|
31
|
+
initials = ((_b = parts.shift()) !== null && _b !== void 0 ? _b : '').charAt(0) + ((_c = parts.pop()) !== null && _c !== void 0 ? _c : '').charAt(0);
|
|
32
32
|
}
|
|
33
33
|
return initials.toUpperCase();
|
|
34
34
|
};
|
|
@@ -2,7 +2,7 @@ var cache = {};
|
|
|
2
2
|
export var getHashNumber = function (value, maxNumber) {
|
|
3
3
|
var cacheIndex = "".concat(value, "-").concat(maxNumber);
|
|
4
4
|
if (cache[cacheIndex]) {
|
|
5
|
-
return cache[cacheIndex];
|
|
5
|
+
return cache[cacheIndex] || 0;
|
|
6
6
|
}
|
|
7
7
|
var hash = 0;
|
|
8
8
|
for (var i = 0, len = value.length; i < len; i++) {
|
|
@@ -11,5 +11,5 @@ export var getHashNumber = function (value, maxNumber) {
|
|
|
11
11
|
hash |= 0;
|
|
12
12
|
}
|
|
13
13
|
cache[cacheIndex] = Math.abs(hash) % maxNumber;
|
|
14
|
-
return cache[cacheIndex];
|
|
14
|
+
return cache[cacheIndex] || 0;
|
|
15
15
|
};
|
|
@@ -7,6 +7,7 @@ import { useEventListener } from '../../hooks/useEventListener';
|
|
|
7
7
|
import { useMultiRef } from '../../hooks/useMultiRef';
|
|
8
8
|
import { useThemeProps } from '../../hooks/useThemeProps';
|
|
9
9
|
import { cn } from '../../utils/classname';
|
|
10
|
+
import { isKey } from '../../utils/isKey';
|
|
10
11
|
import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
|
|
11
12
|
import { List } from '../List';
|
|
12
13
|
import { Popover } from '../Popover';
|
|
@@ -60,16 +61,20 @@ var DataListRender = function (inProps, ref) {
|
|
|
60
61
|
element: anchorRef,
|
|
61
62
|
handler: onKeyDown,
|
|
62
63
|
});
|
|
63
|
-
// Закрывает список
|
|
64
|
+
// Закрывает список нажатию клавиши {Tab}
|
|
65
|
+
// Событие focusout может не срабатывать на устройствах iOS,
|
|
66
|
+
// так как многие интерактивные элементы по клику не получают фокус.
|
|
64
67
|
useEventListener({
|
|
65
68
|
active: open,
|
|
66
|
-
eventName: '
|
|
69
|
+
eventName: 'keydown',
|
|
67
70
|
element: anchorRef,
|
|
68
|
-
handler: function () {
|
|
69
|
-
|
|
71
|
+
handler: function (event) {
|
|
72
|
+
if (isKey(event, 'Tab')) {
|
|
73
|
+
onClose === null || onClose === void 0 ? void 0 : onClose();
|
|
74
|
+
}
|
|
70
75
|
},
|
|
71
76
|
});
|
|
72
|
-
return (React.createElement(Popover, __assign({ as: as, open: open, placement: "bottom-start", disableReturnFocus: true,
|
|
77
|
+
return (React.createElement(Popover, __assign({ as: as, open: open, placement: "bottom-start", disableReturnFocus: true, disableEnforceFocus: true, offset: [0, 4], onClose: onClose, anchorRef: anchorRef, transitionProps: {
|
|
73
78
|
classNames: cnDataList({ animation: true }),
|
|
74
79
|
} }, other, { onEntered: function () {
|
|
75
80
|
onEntered();
|
|
@@ -75,7 +75,7 @@ export function useDataListNavigation(_a) {
|
|
|
75
75
|
var newIndex = isArrowUp
|
|
76
76
|
? getPrevIndex(currentIndex !== null && currentIndex !== void 0 ? currentIndex : 0, values.length)
|
|
77
77
|
: getNextIndex(currentIndex !== null && currentIndex !== void 0 ? currentIndex : -1, values.length);
|
|
78
|
-
var newValue = values[newIndex];
|
|
78
|
+
var newValue = values[newIndex] || '';
|
|
79
79
|
setCurrent(newValue);
|
|
80
80
|
serFocused(newValue);
|
|
81
81
|
if (ref === null || ref === void 0 ? void 0 : ref.current) {
|
|
@@ -12,8 +12,8 @@ export var FILE_PICKER_DEFAULT_VALUE_RENDERER = function (files, disableTruncate
|
|
|
12
12
|
if (Array.isArray(files) && files.length > 1) {
|
|
13
13
|
return "\u0424\u0430\u0439\u043B\u043E\u0432 \u0432\u044B\u0431\u0440\u0430\u043D\u043E: ".concat(files.length);
|
|
14
14
|
}
|
|
15
|
-
var _a = __read(files, 1),
|
|
16
|
-
if (disableTruncate || file.name.length <= 20) {
|
|
15
|
+
var _a = __read(files, 1), _b = _a[0], file = _b === void 0 ? { name: '' } : _b;
|
|
16
|
+
if (disableTruncate || (file === null || file === void 0 ? void 0 : file.name.length) <= 20) {
|
|
17
17
|
return file.name;
|
|
18
18
|
}
|
|
19
19
|
return "".concat(file.name.slice(0, 9), "...").concat(file.name.slice(-9));
|
|
@@ -29,8 +29,9 @@ export var MenuList = forwardRef(function (inProps, ref) {
|
|
|
29
29
|
}
|
|
30
30
|
});
|
|
31
31
|
return (React.createElement(List, __assign({ role: "menu", as: "div", tabIndex: -1, onClick: function (e) {
|
|
32
|
+
var _a;
|
|
32
33
|
if (e.target === e.currentTarget) {
|
|
33
|
-
nodesRef.current[0].focus();
|
|
34
|
+
(_a = nodesRef.current[0]) === null || _a === void 0 ? void 0 : _a.focus();
|
|
34
35
|
}
|
|
35
36
|
}, ref: ref }, other), Children.map(resolvedChildren, function (child, index) {
|
|
36
37
|
if (!isValidElement(child) ||
|
|
@@ -78,8 +78,10 @@ export var Popover = polymorphicComponentWithRef(function (inProps, ref) {
|
|
|
78
78
|
enabled: !!equalAnchorWidth,
|
|
79
79
|
fn: function (_a) {
|
|
80
80
|
var state = _a.state;
|
|
81
|
-
|
|
82
|
-
|
|
81
|
+
if ('popper' in state.styles) {
|
|
82
|
+
// eslint-disable-next-line no-param-reassign
|
|
83
|
+
state.styles.popper.width = "".concat(state.rects.reference.width, "px");
|
|
84
|
+
}
|
|
83
85
|
},
|
|
84
86
|
effect: function (_a) {
|
|
85
87
|
var _b;
|
|
@@ -61,20 +61,22 @@ export var SnackbarProvider = forwardRef(function (inProps, ref) {
|
|
|
61
61
|
}, [providerProps]);
|
|
62
62
|
var context = useMemo(function () { return ({ pushMessage: pushMessage, closeMessage: closeMessage }); }, []);
|
|
63
63
|
var snackbars = Object.keys(messagesByAnchorOrigin).map(function (origin) {
|
|
64
|
-
var
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
64
|
+
var _a;
|
|
65
|
+
var messages = messagesByAnchorOrigin[origin] || [];
|
|
66
|
+
return (React.createElement(Snackbar, __assign({}, other, { key: origin, anchorOrigin: (_a = messages === null || messages === void 0 ? void 0 : messages[0]) === null || _a === void 0 ? void 0 : _a.anchorOrigin, className: className, container: container, ref: ref }), !!messages.length &&
|
|
67
|
+
messages.map(function (message) { return (React.createElement(SnackbarItem, __assign({}, message, { key: message.key, onClose: function (messageId) {
|
|
68
|
+
var _a;
|
|
69
|
+
closeMessage(messageId);
|
|
70
|
+
(_a = message.onClose) === null || _a === void 0 ? void 0 : _a.call(message, messageId);
|
|
71
|
+
}, onExited: function (messageId) {
|
|
72
|
+
var _a;
|
|
73
|
+
handleExitedSnackbarItem(messageId);
|
|
74
|
+
(_a = message.onExited) === null || _a === void 0 ? void 0 : _a.call(message, messageId);
|
|
75
|
+
}, onEntered: function (messageId) {
|
|
76
|
+
var _a;
|
|
77
|
+
handleEnteredSnackbarItem(messageId);
|
|
78
|
+
(_a = message.onEntered) === null || _a === void 0 ? void 0 : _a.call(message, messageId);
|
|
79
|
+
} }))); })));
|
|
78
80
|
});
|
|
79
81
|
return (React.createElement(SnackbarContext.Provider, { value: context },
|
|
80
82
|
children,
|
|
@@ -6,11 +6,11 @@ export declare const cnSnackbar: import("@bem-react/classname").ClassNameFormatt
|
|
|
6
6
|
export type SnackbarRef = PortalRef;
|
|
7
7
|
export type SnackbarProps = PortalProps & {
|
|
8
8
|
/** Расположение сообщения относительно контейнера */
|
|
9
|
-
anchorOrigin
|
|
9
|
+
anchorOrigin?: SnackbarAnchorOrigin;
|
|
10
10
|
};
|
|
11
11
|
export declare const Snackbar: React.ForwardRefExoticComponent<import("../../../Portal").PortalBaseProps & {
|
|
12
12
|
as?: "div" | undefined;
|
|
13
13
|
} & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "container"> & {
|
|
14
14
|
/** Расположение сообщения относительно контейнера */
|
|
15
|
-
anchorOrigin
|
|
15
|
+
anchorOrigin?: SnackbarAnchorOrigin | undefined;
|
|
16
16
|
} & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -7,7 +7,7 @@ import { Portal } from '../../../Portal';
|
|
|
7
7
|
import { useSnackbarManager } from './SnackbarManager';
|
|
8
8
|
export var cnSnackbar = cn('Snackbar');
|
|
9
9
|
export var Snackbar = forwardRef(function (_a, ref) {
|
|
10
|
-
var children = _a.children, className = _a.className, _b = _a.anchorOrigin, vertical =
|
|
10
|
+
var children = _a.children, className = _a.className, _b = _a.anchorOrigin, _c = _b === void 0 ? {} : _b, vertical = _c.vertical, horizontal = _c.horizontal, other = __rest(_a, ["children", "className", "anchorOrigin"]);
|
|
11
11
|
var popoverRef = useRef(null);
|
|
12
12
|
useSnackbarManager(popoverRef, 1100);
|
|
13
13
|
return (React.createElement(Portal, __assign({ ref: useMultiRef([ref, popoverRef]), className: cnSnackbar({
|
|
@@ -25,5 +25,6 @@ export var updateMessagesFromQueue = function (state) {
|
|
|
25
25
|
return __assign(__assign({}, state), { messages: newMessages });
|
|
26
26
|
}
|
|
27
27
|
var _a = __read(queue), firstMessageItemFromQueue = _a[0], otherQueue = _a.slice(1);
|
|
28
|
-
return __assign(__assign({}, state), { messages:
|
|
28
|
+
return __assign(__assign({}, state), { messages: messages && firstMessageItemFromQueue
|
|
29
|
+
? __spreadArray(__spreadArray([], __read(messages), false), [firstMessageItemFromQueue], false) : [], queue: otherQueue });
|
|
29
30
|
};
|