@skbkontur/react-ui 4.18.0-next.0 → 4.18.0
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/CHANGELOG.md +29 -0
- package/cjs/components/SingleToast/SingleToast.d.ts +11 -0
- package/cjs/components/SingleToast/SingleToast.js +20 -0
- package/cjs/components/SingleToast/SingleToast.js.map +1 -0
- package/cjs/components/SingleToast/SingleToast.md +35 -0
- package/cjs/components/SingleToast/index.d.ts +1 -0
- package/cjs/components/SingleToast/index.js +1 -0
- package/cjs/components/SingleToast/index.js.map +1 -0
- package/cjs/components/Toast/Toast.d.ts +10 -3
- package/cjs/components/Toast/Toast.js +22 -4
- package/cjs/components/Toast/Toast.js.map +1 -1
- package/cjs/components/Toast/Toast.md +0 -105
- package/cjs/index.d.ts +1 -0
- package/cjs/index.js +1 -0
- package/cjs/index.js.map +1 -1
- package/components/SingleToast/SingleToast/SingleToast.js +53 -0
- package/components/SingleToast/SingleToast/SingleToast.js.map +1 -0
- package/components/SingleToast/SingleToast/package.json +6 -0
- package/components/SingleToast/SingleToast.d.ts +11 -0
- package/components/SingleToast/SingleToast.md +35 -0
- package/components/SingleToast/index/index.js +1 -0
- package/components/SingleToast/index/index.js.map +1 -0
- package/components/SingleToast/index/package.json +6 -0
- package/components/SingleToast/index.d.ts +1 -0
- package/components/SingleToast/package.json +6 -0
- package/components/Toast/Toast/Toast.js +13 -4
- package/components/Toast/Toast/Toast.js.map +1 -1
- package/components/Toast/Toast.d.ts +10 -3
- package/components/Toast/Toast.md +0 -105
- package/index.d.ts +1 -0
- package/index.js +1 -0
- package/index.js.map +1 -1
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,35 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [4.18.0](https://github.com/skbkontur/retail-ui/compare/@skbkontur/react-ui@4.17.4...@skbkontur/react-ui@4.18.0) (2023-12-04)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* **Button:** not render arrow when prop arrow is false ([#3320](https://github.com/skbkontur/retail-ui/issues/3320)) ([fd231c1](https://github.com/skbkontur/retail-ui/commit/fd231c131f5bf8d5b1824cc79cce59aac30e27c3))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
### Features
|
|
15
|
+
|
|
16
|
+
* **MiniModal:** add new control ([#3228](https://github.com/skbkontur/retail-ui/issues/3228)) ([80a0fef](https://github.com/skbkontur/retail-ui/commit/80a0fefcc00b1fc6ba5f867459ab9151815bf8c7))
|
|
17
|
+
* **SingleToast:** add new component ([#3314](https://github.com/skbkontur/retail-ui/issues/3314)) ([1daf55b](https://github.com/skbkontur/retail-ui/commit/1daf55bb5e432b14dd729a91983cdb3fa9e466a5))
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
## [4.17.4](https://github.com/skbkontur/retail-ui/compare/@skbkontur/react-ui@4.17.3...@skbkontur/react-ui@4.17.4) (2023-12-04)
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
### Bug Fixes
|
|
27
|
+
|
|
28
|
+
* **GlobalLoader:** repair of call chain done()➔start()➔done() ([#3319](https://github.com/skbkontur/retail-ui/issues/3319)) ([9be8e35](https://github.com/skbkontur/retail-ui/commit/9be8e35c9216e055e4b213467115023d8b6d6282))
|
|
29
|
+
* **Select:** reject focus of unmounted input ([#3318](https://github.com/skbkontur/retail-ui/issues/3318)) ([f3ac028](https://github.com/skbkontur/retail-ui/commit/f3ac028e4b0e83564c693dde1f22a5592d6cb3d3))
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
6
35
|
## [4.17.3](https://github.com/skbkontur/retail-ui/compare/@skbkontur/react-ui@4.17.2...@skbkontur/react-ui@4.17.3) (2023-11-14)
|
|
7
36
|
|
|
8
37
|
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Toast, ToastProps } from '../Toast/Toast';
|
|
3
|
+
/**
|
|
4
|
+
* Позволяет вызывать тосты с помощью статических методов. В отличие от статических методов из компонента `<Toast>` - их можно кастомизировать и они работают с `React@18`.
|
|
5
|
+
*/
|
|
6
|
+
export declare class SingleToast extends React.Component<ToastProps> {
|
|
7
|
+
static ref: React.RefObject<Toast>;
|
|
8
|
+
static push: typeof Toast.push;
|
|
9
|
+
static close: typeof Toast.close;
|
|
10
|
+
render: () => JSX.Element;
|
|
11
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.SingleToast = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
|
|
2
|
+
var _reactDom = _interopRequireDefault(require("react-dom"));
|
|
3
|
+
|
|
4
|
+
var _Toast = require("../Toast/Toast");
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* Позволяет вызывать тосты с помощью статических методов. В отличие от статических методов из компонента `<Toast>` - их можно кастомизировать и они работают с `React@18`.
|
|
8
|
+
*/var
|
|
9
|
+
SingleToast = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(SingleToast, _React$Component);function SingleToast() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
render = function () {
|
|
19
|
+
return /*#__PURE__*/_react.default.createElement(_Toast.Toast, (0, _extends2.default)({ ref: SingleToast.ref }, _this.props));
|
|
20
|
+
};return _this;}return SingleToast;}(_react.default.Component);exports.SingleToast = SingleToast;SingleToast.ref = /*#__PURE__*/_react.default.createRef();SingleToast.push = function () {var _SingleToast$ref$curr;SingleToast.close();for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {args[_key2] = arguments[_key2];}(_SingleToast$ref$curr = SingleToast.ref.current) == null ? void 0 : _SingleToast$ref$curr.push.apply(_SingleToast$ref$curr, args);};SingleToast.close = function () {_reactDom.default.flushSync(function () {var _SingleToast$ref$curr2;return (_SingleToast$ref$curr2 = SingleToast.ref.current) == null ? void 0 : _SingleToast$ref$curr2.close();});};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["SingleToast.tsx"],"names":["SingleToast","render","ref","props","React","Component","createRef","push","close","args","current","ReactDOM","flushSync"],"mappings":"yUAAA;AACA;;AAEA;;AAEA;AACA;AACA,G;AACaA,W;;;;;;;;;AASXC,IAAAA,M,GAAS,YAAM;AACb,0BAAO,6BAAC,YAAD,2BAAO,GAAG,EAAED,WAAW,CAACE,GAAxB,IAAiC,MAAKC,KAAtC,EAAP;AACD,K,oCAX8BC,eAAMC,S,oCAA1BL,W,CACGE,G,gBAAME,eAAME,SAAN,E,CADTN,W,CAEGO,I,GAA0B,YAAa,2BACnDP,WAAW,CAACQ,KAAZ,GADmD,mCAATC,IAAS,yDAATA,IAAS,4BAEnD,yBAAAT,WAAW,CAACE,GAAZ,CAAgBQ,OAAhB,2CAAyBH,IAAzB,8BAAiCE,IAAjC,EACD,C,CALUT,W,CAMGQ,K,GAA4B,YAAM,CAC9CG,kBAASC,SAAT,CAAmB,yEAAMZ,WAAW,CAACE,GAAZ,CAAgBQ,OAAtB,qBAAM,uBAAyBF,KAAzB,EAAN,EAAnB,EACD,C","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { Toast, ToastProps } from '../Toast/Toast';\n\n/**\n * Позволяет вызывать тосты с помощью статических методов. В отличие от статических методов из компонента `<Toast>` - их можно кастомизировать и они работают с `React@18`.\n */\nexport class SingleToast extends React.Component<ToastProps> {\n public static ref = React.createRef<Toast>();\n public static push: typeof Toast.push = (...args) => {\n SingleToast.close();\n SingleToast.ref.current?.push(...args);\n };\n public static close: typeof Toast.close = () => {\n ReactDOM.flushSync(() => SingleToast.ref.current?.close());\n };\n render = () => {\n return <Toast ref={SingleToast.ref} {...this.props} />;\n };\n}\n"]}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
`<SingleToast>` можно добавить в единственном месте в проекте, а статические методы будут всегда использовать последний отрендеренный экземпляр `<Toast>`.
|
|
2
|
+
|
|
3
|
+
_На внешний вид этого примера влияет следующий пример_
|
|
4
|
+
|
|
5
|
+
```jsx harmony
|
|
6
|
+
import { Button, SingleToast } from '@skbkontur/react-ui';
|
|
7
|
+
|
|
8
|
+
<div>
|
|
9
|
+
<SingleToast />
|
|
10
|
+
<Button onClick={() => SingleToast.push('Статический тост')}>
|
|
11
|
+
Показать статический тост
|
|
12
|
+
</Button>
|
|
13
|
+
</div>
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
`<SingleToast>` можно кастомизировать с помощью переменных темы для `toast`.
|
|
17
|
+
```jsx harmony
|
|
18
|
+
import { Button, SingleToast, ThemeContext, ThemeFactory, THEME_2022 } from '@skbkontur/react-ui';
|
|
19
|
+
|
|
20
|
+
const rand = () => "Пример жёлтого тоста № " + Math.round(Math.random() * 100).toString();
|
|
21
|
+
|
|
22
|
+
const pushToast = () => {
|
|
23
|
+
SingleToast.push(rand(), {
|
|
24
|
+
label: "Cancel",
|
|
25
|
+
handler: () => SingleToast.push("Canceled")
|
|
26
|
+
});
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
<div>
|
|
30
|
+
<SingleToast theme={{ toastBg: '#f1c40f' }} />
|
|
31
|
+
<Button onClick={pushToast}>
|
|
32
|
+
Показать тост с жёлтым фоном
|
|
33
|
+
</Button>
|
|
34
|
+
</div>
|
|
35
|
+
```
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './SingleToast';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";exports.__esModule = true;var _SingleToast = require("./SingleToast");Object.keys(_SingleToast).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _SingleToast[key]) return;exports[key] = _SingleToast[key];});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["index.ts"],"names":[],"mappings":"uCAAA","sourcesContent":["export * from './SingleToast';\n"]}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React, { AriaAttributes } from 'react';
|
|
2
|
+
import { ThemeIn } from '../../lib/theming/Theme';
|
|
2
3
|
import { Nullable } from '../../typings/utility-types';
|
|
3
4
|
import { CommonProps } from '../../internal/CommonWrapper';
|
|
4
5
|
import { ToastView } from './ToastView';
|
|
@@ -16,6 +17,11 @@ export interface ToastState {
|
|
|
16
17
|
export interface ToastProps extends Pick<AriaAttributes, 'aria-label'>, CommonProps {
|
|
17
18
|
onPush?: (notification: string, action?: Action) => void;
|
|
18
19
|
onClose?: (notification: string, action?: Action) => void;
|
|
20
|
+
/**
|
|
21
|
+
* Обычный объект с переменными темы.
|
|
22
|
+
* Он будет объединён с темой из контекста.
|
|
23
|
+
*/
|
|
24
|
+
theme?: ThemeIn;
|
|
19
25
|
}
|
|
20
26
|
export declare const ToastDataTids: {
|
|
21
27
|
readonly toastStatic: "StaticToast";
|
|
@@ -27,14 +33,15 @@ export declare const ToastDataTids: {
|
|
|
27
33
|
* Показывает уведомления.
|
|
28
34
|
*
|
|
29
35
|
* Доступен статический метод: `Toast.push(notification, action?, showTime?)`.
|
|
30
|
-
* Однако, при его использовании не работает
|
|
31
|
-
*
|
|
36
|
+
* Однако, при его использовании не работает кастомизация, они не поддерживаются в `React@18`, а также могут быть проблемы с перекрытием уведомления другими элементами страницы.
|
|
37
|
+
*
|
|
38
|
+
* Для статических тостов <u>рекомендуется</u> использовать компонент [SingleToast](https://tech.skbkontur.ru/react-ui/#/Components/SingleToast) - в нём исправлены эти проблемы.
|
|
32
39
|
*
|
|
33
|
-
* Рекомендуется использовать Toast через `ref` (см. примеры).
|
|
34
40
|
*/
|
|
35
41
|
export declare class Toast extends React.Component<ToastProps, ToastState> {
|
|
36
42
|
static __KONTUR_REACT_UI__: string;
|
|
37
43
|
private setRootNode;
|
|
44
|
+
private theme;
|
|
38
45
|
static push(notification: string, action?: Nullable<Action>, showTime?: number): void;
|
|
39
46
|
static close(): void;
|
|
40
47
|
_toast: Nullable<ToastView>;
|
|
@@ -2,6 +2,9 @@
|
|
|
2
2
|
var _reactTransitionGroup = require("react-transition-group");
|
|
3
3
|
var _globalObject = require("@skbkontur/global-object");
|
|
4
4
|
|
|
5
|
+
var _ThemeFactory = require("../../lib/theming/ThemeFactory");
|
|
6
|
+
var _ThemeContext = require("../../lib/theming/ThemeContext");
|
|
7
|
+
|
|
5
8
|
var _RenderContainer = require("../../internal/RenderContainer");
|
|
6
9
|
|
|
7
10
|
var _CommonWrapper = require("../../internal/CommonWrapper");
|
|
@@ -26,6 +29,11 @@ var _ToastStatic = require("./ToastStatic");var _class, _class2, _temp;
|
|
|
26
29
|
|
|
27
30
|
|
|
28
31
|
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
29
37
|
|
|
30
38
|
|
|
31
39
|
|
|
@@ -41,16 +49,17 @@ var ToastDataTids = {
|
|
|
41
49
|
* Показывает уведомления.
|
|
42
50
|
*
|
|
43
51
|
* Доступен статический метод: `Toast.push(notification, action?, showTime?)`.
|
|
44
|
-
* Однако, при его использовании не работает
|
|
45
|
-
*
|
|
52
|
+
* Однако, при его использовании не работает кастомизация, они не поддерживаются в `React@18`, а также могут быть проблемы с перекрытием уведомления другими элементами страницы.
|
|
53
|
+
*
|
|
54
|
+
* Для статических тостов <u>рекомендуется</u> использовать компонент [SingleToast](https://tech.skbkontur.ru/react-ui/#/Components/SingleToast) - в нём исправлены эти проблемы.
|
|
46
55
|
*
|
|
47
|
-
* Рекомендуется использовать Toast через `ref` (см. примеры).
|
|
48
56
|
*/exports.ToastDataTids = ToastDataTids;var
|
|
49
57
|
|
|
50
58
|
Toast = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Toast, _React$Component);Toast.
|
|
51
59
|
|
|
52
60
|
|
|
53
61
|
|
|
62
|
+
|
|
54
63
|
push = function push(notification, action, showTime) {
|
|
55
64
|
_ToastStatic.ToastStatic.push(notification, action, showTime);
|
|
56
65
|
};Toast.
|
|
@@ -100,6 +109,15 @@ Toast = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
|
|
|
100
109
|
|
|
101
110
|
|
|
102
111
|
|
|
112
|
+
|
|
113
|
+
|
|
114
|
+
|
|
115
|
+
|
|
116
|
+
|
|
117
|
+
|
|
118
|
+
|
|
119
|
+
|
|
120
|
+
|
|
103
121
|
|
|
104
122
|
|
|
105
123
|
|
|
@@ -178,7 +196,7 @@ Toast = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
|
|
|
178
196
|
|
|
179
197
|
_refToast = function (element) {
|
|
180
198
|
_this._toast = element;
|
|
181
|
-
};_this.state = { notification: null, action: null, id: 0, showTime: null };return _this;}var _proto = Toast.prototype;_proto.componentWillUnmount = function componentWillUnmount() {this._clearTimer();};_proto.render = function render() {return /*#__PURE__*/_react.default.createElement(_RenderContainer.RenderContainer, null, /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.TransitionGroup, null,
|
|
199
|
+
};_this.state = { notification: null, action: null, id: 0, showTime: null };return _this;}var _proto = Toast.prototype;_proto.componentWillUnmount = function componentWillUnmount() {this._clearTimer();};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = _this2.props.theme ? _ThemeFactory.ThemeFactory.create(_this2.props.theme, theme) : theme;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: _this2.theme }, /*#__PURE__*/_react.default.createElement(_RenderContainer.RenderContainer, null, /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.TransitionGroup, null, _this2._renderToast())));});} /**
|
|
182
200
|
* Показывает тост с `notification` в качестве сообщения.
|
|
183
201
|
* Тост автоматически скрывается через 3 или 7 секунд,
|
|
184
202
|
* в зависимости от наличия у него кнопки `action`.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Toast.tsx"],"names":["ToastDataTids","toastStatic","toastView","action","close","Toast","rootNode","push","notification","showTime","ToastStatic","props","rootRef","React","createRef","safelyCall","onClose","state","setState","setRootRef","element","setRootNode","current","_clearTimer","_timeout","globalObject","clearTimeout","_setTimer","setTimeout","_refToast","_toast","id","componentWillUnmount","render","_renderToast","onPush","toastProps","onMouseEnter","onMouseLeave","children","enter","styles","enterActive","exit","exitActive","isTestEnv","Component","__KONTUR_REACT_UI__","fn","args"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } from 'react';\nimport { CSSTransition, TransitionGroup } from 'react-transition-group';\nimport { globalObject, SafeTimer } from '@skbkontur/global-object';\n\nimport { RenderContainer } from '../../internal/RenderContainer';\nimport { Nullable } from '../../typings/utility-types';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './Toast.styles';\nimport { ToastView, ToastViewProps } from './ToastView';\nimport { ToastStatic } from './ToastStatic';\n\nexport interface Action {\n label: string;\n handler: () => void;\n 'aria-label'?: string;\n}\n\nexport interface ToastState {\n notification: Nullable<string>;\n action: Nullable<Action>;\n id: number;\n showTime: Nullable<number>;\n}\n\nexport interface ToastProps extends Pick<AriaAttributes, 'aria-label'>, CommonProps {\n onPush?: (notification: string, action?: Action) => void;\n onClose?: (notification: string, action?: Action) => void;\n}\n\nexport const ToastDataTids = {\n toastStatic: 'StaticToast',\n toastView: 'ToastView__root',\n action: 'ToastView__action',\n close: 'ToastView__close',\n} as const;\n\n/**\n * Показывает уведомления.\n *\n * Доступен статический метод: `Toast.push(notification, action?, showTime?)`.\n * Однако, при его использовании не работает кастомизация и могут быть проблемы\n * с перекрытием уведомления другими элементами страницы.\n *\n * Рекомендуется использовать Toast через `ref` (см. примеры).\n */\n@rootNode\nexport class Toast extends React.Component<ToastProps, ToastState> {\n public static __KONTUR_REACT_UI__ = 'Toast';\n private setRootNode!: TSetRootNode;\n\n public static push(notification: string, action?: Nullable<Action>, showTime?: number) {\n ToastStatic.push(notification, action, showTime);\n }\n\n public static close() {\n ToastStatic.close();\n }\n\n public _toast: Nullable<ToastView>;\n private _timeout: SafeTimer;\n private rootRef = React.createRef<HTMLElement>();\n\n constructor(props: ToastProps) {\n super(props);\n this.state = {\n notification: null,\n action: null,\n id: 0,\n showTime: null,\n };\n }\n\n public componentWillUnmount() {\n this._clearTimer();\n }\n\n public render() {\n return (\n <RenderContainer>\n <TransitionGroup>{this._renderToast()}</TransitionGroup>\n </RenderContainer>\n );\n }\n\n /**\n * Показывает тост с `notification` в качестве сообщения.\n * Тост автоматически скрывается через 3 или 7 секунд,\n * в зависимости от наличия у него кнопки `action`.\n * Время показа можно задать вручную, передав `showTime`.\n *\n * @public\n * @param {string} notification\n * @param {Action} action `action` опциональный параметр формата `{ label: string, handler: function }`\n * добавляет кнопку в виде ссылки при клике на которую вызывается переданный handler\n * @param {number} showTime Время существования Toast в миллисекундах\n */\n public push(notification: string, action?: Nullable<Action>, showTime?: number) {\n if (this.state.notification) {\n this.close();\n }\n\n safelyCall(this.props.onPush, notification, action);\n\n this.setState(({ id }) => ({ notification, action, id: id + 1, showTime }), this._setTimer);\n }\n\n /**\n * @public\n */\n public close = () => {\n safelyCall(this.props.onClose, this.state.notification, this.state.action);\n this.setState({ notification: null, action: null });\n };\n\n private _renderToast() {\n const { notification, action, id } = this.state;\n\n if (!notification) {\n return null;\n }\n\n const toastProps: ToastViewProps = {\n onMouseEnter: this._clearTimer,\n onMouseLeave: this._setTimer,\n onClose: this.close,\n children: notification,\n 'aria-label': this.props['aria-label'],\n action,\n };\n\n return (\n <CSSTransition\n key={id}\n classNames={{\n enter: styles.enter(),\n enterActive: styles.enterActive(),\n exit: styles.exit(),\n exitActive: styles.exitActive(),\n }}\n timeout={{\n enter: 200,\n exit: 150,\n }}\n enter={!isTestEnv}\n exit={!isTestEnv}\n nodeRef={this.rootRef}\n >\n <CommonWrapper rootNodeRef={this.setRootRef} {...this.props}>\n <ToastView ref={this._refToast} {...toastProps} />\n </CommonWrapper>\n </CSSTransition>\n );\n }\n\n private setRootRef = (element: Nullable<Element>) => {\n this.setRootNode(element);\n // @ts-expect-error: See: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31065.\n this.rootRef.current = element;\n };\n\n private _clearTimer = () => {\n if (this._timeout) {\n globalObject.clearTimeout(this._timeout);\n this._timeout = null;\n }\n };\n\n private _setTimer = () => {\n this._clearTimer();\n\n let showTime = this.state.action ? 7000 : 3000;\n showTime = this.state.showTime ?? showTime;\n this._timeout = globalObject.setTimeout(this.close, showTime);\n };\n\n private _refToast = (element: ToastView) => {\n this._toast = element;\n };\n}\n\nfunction safelyCall(fn: Nullable<(a?: any) => any>, ...args: any[]) {\n if (fn) {\n fn(...args);\n }\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["Toast.tsx"],"names":["ToastDataTids","toastStatic","toastView","action","close","Toast","rootNode","push","notification","showTime","ToastStatic","props","rootRef","React","createRef","safelyCall","onClose","state","setState","setRootRef","element","setRootNode","current","_clearTimer","_timeout","globalObject","clearTimeout","_setTimer","setTimeout","_refToast","_toast","id","componentWillUnmount","render","theme","ThemeFactory","create","_renderToast","onPush","toastProps","onMouseEnter","onMouseLeave","children","enter","styles","enterActive","exit","exitActive","isTestEnv","Component","__KONTUR_REACT_UI__","fn","args"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } from 'react';\nimport { CSSTransition, TransitionGroup } from 'react-transition-group';\nimport { globalObject, SafeTimer } from '@skbkontur/global-object';\n\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme, ThemeIn } from '../../lib/theming/Theme';\nimport { RenderContainer } from '../../internal/RenderContainer';\nimport { Nullable } from '../../typings/utility-types';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './Toast.styles';\nimport { ToastView, ToastViewProps } from './ToastView';\nimport { ToastStatic } from './ToastStatic';\n\nexport interface Action {\n label: string;\n handler: () => void;\n 'aria-label'?: string;\n}\n\nexport interface ToastState {\n notification: Nullable<string>;\n action: Nullable<Action>;\n id: number;\n showTime: Nullable<number>;\n}\n\nexport interface ToastProps extends Pick<AriaAttributes, 'aria-label'>, CommonProps {\n onPush?: (notification: string, action?: Action) => void;\n onClose?: (notification: string, action?: Action) => void;\n /**\n * Обычный объект с переменными темы.\n * Он будет объединён с темой из контекста.\n */\n theme?: ThemeIn;\n}\n\nexport const ToastDataTids = {\n toastStatic: 'StaticToast',\n toastView: 'ToastView__root',\n action: 'ToastView__action',\n close: 'ToastView__close',\n} as const;\n\n/**\n * Показывает уведомления.\n *\n * Доступен статический метод: `Toast.push(notification, action?, showTime?)`.\n * Однако, при его использовании не работает кастомизация, они не поддерживаются в `React@18`, а также могут быть проблемы с перекрытием уведомления другими элементами страницы.\n *\n * Для статических тостов <u>рекомендуется</u> использовать компонент [SingleToast](https://tech.skbkontur.ru/react-ui/#/Components/SingleToast) - в нём исправлены эти проблемы.\n *\n */\n@rootNode\nexport class Toast extends React.Component<ToastProps, ToastState> {\n public static __KONTUR_REACT_UI__ = 'Toast';\n private setRootNode!: TSetRootNode;\n private theme!: Theme;\n\n public static push(notification: string, action?: Nullable<Action>, showTime?: number) {\n ToastStatic.push(notification, action, showTime);\n }\n\n public static close() {\n ToastStatic.close();\n }\n\n public _toast: Nullable<ToastView>;\n private _timeout: SafeTimer;\n private rootRef = React.createRef<HTMLElement>();\n\n constructor(props: ToastProps) {\n super(props);\n this.state = {\n notification: null,\n action: null,\n id: 0,\n showTime: null,\n };\n }\n\n public componentWillUnmount() {\n this._clearTimer();\n }\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = this.props.theme ? ThemeFactory.create(this.props.theme as Theme, theme) : theme;\n return (\n <ThemeContext.Provider value={this.theme}>\n <RenderContainer>\n <TransitionGroup>{this._renderToast()}</TransitionGroup>\n </RenderContainer>\n </ThemeContext.Provider>\n );\n }}\n </ThemeContext.Consumer>\n );\n }\n\n /**\n * Показывает тост с `notification` в качестве сообщения.\n * Тост автоматически скрывается через 3 или 7 секунд,\n * в зависимости от наличия у него кнопки `action`.\n * Время показа можно задать вручную, передав `showTime`.\n *\n * @public\n * @param {string} notification\n * @param {Action} action `action` опциональный параметр формата `{ label: string, handler: function }`\n * добавляет кнопку в виде ссылки при клике на которую вызывается переданный handler\n * @param {number} showTime Время существования Toast в миллисекундах\n */\n public push(notification: string, action?: Nullable<Action>, showTime?: number) {\n if (this.state.notification) {\n this.close();\n }\n\n safelyCall(this.props.onPush, notification, action);\n\n this.setState(({ id }) => ({ notification, action, id: id + 1, showTime }), this._setTimer);\n }\n\n /**\n * @public\n */\n public close = () => {\n safelyCall(this.props.onClose, this.state.notification, this.state.action);\n this.setState({ notification: null, action: null });\n };\n\n private _renderToast() {\n const { notification, action, id } = this.state;\n\n if (!notification) {\n return null;\n }\n\n const toastProps: ToastViewProps = {\n onMouseEnter: this._clearTimer,\n onMouseLeave: this._setTimer,\n onClose: this.close,\n children: notification,\n 'aria-label': this.props['aria-label'],\n action,\n };\n\n return (\n <CSSTransition\n key={id}\n classNames={{\n enter: styles.enter(),\n enterActive: styles.enterActive(),\n exit: styles.exit(),\n exitActive: styles.exitActive(),\n }}\n timeout={{\n enter: 200,\n exit: 150,\n }}\n enter={!isTestEnv}\n exit={!isTestEnv}\n nodeRef={this.rootRef}\n >\n <CommonWrapper rootNodeRef={this.setRootRef} {...this.props}>\n <ToastView ref={this._refToast} {...toastProps} />\n </CommonWrapper>\n </CSSTransition>\n );\n }\n\n private setRootRef = (element: Nullable<Element>) => {\n this.setRootNode(element);\n // @ts-expect-error: See: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31065.\n this.rootRef.current = element;\n };\n\n private _clearTimer = () => {\n if (this._timeout) {\n globalObject.clearTimeout(this._timeout);\n this._timeout = null;\n }\n };\n\n private _setTimer = () => {\n this._clearTimer();\n\n let showTime = this.state.action ? 7000 : 3000;\n showTime = this.state.showTime ?? showTime;\n this._timeout = globalObject.setTimeout(this.close, showTime);\n };\n\n private _refToast = (element: ToastView) => {\n this._toast = element;\n };\n}\n\nfunction safelyCall(fn: Nullable<(a?: any) => any>, ...args: any[]) {\n if (fn) {\n fn(...args);\n }\n}\n"]}
|
|
@@ -67,108 +67,3 @@ class Toaster extends React.Component {
|
|
|
67
67
|
|
|
68
68
|
<Toaster />;
|
|
69
69
|
```
|
|
70
|
-
|
|
71
|
-
### SuperToast
|
|
72
|
-
|
|
73
|
-
Вы можете объединить удобство статических методов и кастамизируемость классического способа через `ref`.
|
|
74
|
-
Для этого можно добавить обёртку, которая позволяет Toast работать по примеру GlobalLoader.
|
|
75
|
-
|
|
76
|
-
Т.е. кастомный Toast можно добавить в единственном месте в проекте, а статические методы будут всегда использовать последний отрендеренный экземпляр Toast:
|
|
77
|
-
|
|
78
|
-
Также в обёртке можно изменить логику появления всплывашки, по рекомендации Гайдов:
|
|
79
|
-
https://guides.kontur.ru/components/toast/#08
|
|
80
|
-
```static
|
|
81
|
-
«Всегда показывается только 1 тост. Перед появлением следующего тоста, текущий скрывается, даже если время его показа еще не истекло»
|
|
82
|
-
```
|
|
83
|
-
|
|
84
|
-
Для этого немного изменим метод `SuperToast.close` с помощью специального метода `ReactDOM.flushSync`.
|
|
85
|
-
|
|
86
|
-
Итоговый вариант:
|
|
87
|
-
```js static
|
|
88
|
-
const SuperToast = (props) => <Toast ref={SuperToast.ref} {...props} />;
|
|
89
|
-
SuperToast.ref = React.createRef();
|
|
90
|
-
SuperToast.push = (...args) => {
|
|
91
|
-
SuperToast.close();
|
|
92
|
-
SuperToast.ref.current && SuperToast.ref.current.push(...args);
|
|
93
|
-
};
|
|
94
|
-
SuperToast.close = () => {
|
|
95
|
-
ReactDOM.flushSync(() => {
|
|
96
|
-
SuperToast.ref.current && SuperToast.ref.current.close();
|
|
97
|
-
});
|
|
98
|
-
};
|
|
99
|
-
|
|
100
|
-
```
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
Версия на typescript:
|
|
104
|
-
```typescript static
|
|
105
|
-
class SuperToast extends React.Component<ToastProps> {
|
|
106
|
-
public static ref = React.createRef<Toast>();
|
|
107
|
-
public static push: typeof Toast.push = (...args) => {
|
|
108
|
-
SuperToast.close();
|
|
109
|
-
SuperToast.ref.current?.push(...args);
|
|
110
|
-
};
|
|
111
|
-
public static close: typeof Toast.close = () => {
|
|
112
|
-
ReactDOM.flushSync(() => SuperToast.ref.current?.close());
|
|
113
|
-
};
|
|
114
|
-
render = () => {
|
|
115
|
-
return <Toast ref={SuperToast.ref} {...this.props} />;
|
|
116
|
-
};
|
|
117
|
-
}
|
|
118
|
-
```
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
```jsx harmony
|
|
122
|
-
import { Button, Toast, ThemeContext, ThemeFactory, THEME_2022 } from '@skbkontur/react-ui';
|
|
123
|
-
import ReactDOM from 'react-dom';
|
|
124
|
-
|
|
125
|
-
const SuperToast = (props) => <Toast ref={SuperToast.ref} {...props} />;
|
|
126
|
-
SuperToast.ref = React.createRef();
|
|
127
|
-
SuperToast.push = (...args) => {
|
|
128
|
-
SuperToast.close();
|
|
129
|
-
SuperToast.ref.current && SuperToast.ref.current.push(...args);
|
|
130
|
-
};
|
|
131
|
-
SuperToast.close = () => {
|
|
132
|
-
ReactDOM.flushSync(() => {
|
|
133
|
-
SuperToast.ref.current && SuperToast.ref.current.close();
|
|
134
|
-
});
|
|
135
|
-
};
|
|
136
|
-
|
|
137
|
-
const RedToast = () => (
|
|
138
|
-
<ThemeContext.Consumer>
|
|
139
|
-
{(theme) => {
|
|
140
|
-
return <ThemeContext.Provider
|
|
141
|
-
value={ThemeFactory.create(
|
|
142
|
-
{
|
|
143
|
-
toastBg: "rgba(210, 15, 0, 0.76)",
|
|
144
|
-
toastLinkBgActive: "rgba(210, 15, 0, 0.76)"
|
|
145
|
-
},
|
|
146
|
-
theme
|
|
147
|
-
)}
|
|
148
|
-
>
|
|
149
|
-
<SuperToast />
|
|
150
|
-
</ThemeContext.Provider>
|
|
151
|
-
}}
|
|
152
|
-
</ThemeContext.Consumer>
|
|
153
|
-
);
|
|
154
|
-
|
|
155
|
-
const rand = () => "Пример красного тоста №" + Math.round(Math.random() * 100).toString();
|
|
156
|
-
|
|
157
|
-
const push = () => {
|
|
158
|
-
SuperToast.push(rand(), {
|
|
159
|
-
label: "Cancel",
|
|
160
|
-
handler: () => SuperToast.push("Canceled")
|
|
161
|
-
});
|
|
162
|
-
};
|
|
163
|
-
|
|
164
|
-
<div>
|
|
165
|
-
<RedToast />
|
|
166
|
-
<span />
|
|
167
|
-
<span />
|
|
168
|
-
<span />
|
|
169
|
-
<Button onClick={push}>
|
|
170
|
-
Show super red toast
|
|
171
|
-
</Button>
|
|
172
|
-
</div>
|
|
173
|
-
;
|
|
174
|
-
```
|
package/cjs/index.d.ts
CHANGED
|
@@ -37,6 +37,7 @@ export * from './components/Switcher';
|
|
|
37
37
|
export * from './components/Tabs';
|
|
38
38
|
export * from './components/Textarea';
|
|
39
39
|
export * from './components/Toast';
|
|
40
|
+
export * from './components/SingleToast';
|
|
40
41
|
export * from './components/Toggle';
|
|
41
42
|
export * from './components/Token';
|
|
42
43
|
export * from './components/TokenInput';
|
package/cjs/index.js
CHANGED
|
@@ -37,6 +37,7 @@ var _Switcher = require("./components/Switcher");Object.keys(_Switcher).forEach(
|
|
|
37
37
|
var _Tabs = require("./components/Tabs");Object.keys(_Tabs).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;if (key in exports && exports[key] === _Tabs[key]) return;exports[key] = _Tabs[key];});
|
|
38
38
|
var _Textarea = require("./components/Textarea");Object.keys(_Textarea).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;if (key in exports && exports[key] === _Textarea[key]) return;exports[key] = _Textarea[key];});
|
|
39
39
|
var _Toast = require("./components/Toast");Object.keys(_Toast).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;if (key in exports && exports[key] === _Toast[key]) return;exports[key] = _Toast[key];});
|
|
40
|
+
var _SingleToast = require("./components/SingleToast");Object.keys(_SingleToast).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;if (key in exports && exports[key] === _SingleToast[key]) return;exports[key] = _SingleToast[key];});
|
|
40
41
|
var _Toggle = require("./components/Toggle");Object.keys(_Toggle).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;if (key in exports && exports[key] === _Toggle[key]) return;exports[key] = _Toggle[key];});
|
|
41
42
|
var _Token = require("./components/Token");Object.keys(_Token).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;if (key in exports && exports[key] === _Token[key]) return;exports[key] = _Token[key];});
|
|
42
43
|
var _TokenInput = require("./components/TokenInput");Object.keys(_TokenInput).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;if (key in exports && exports[key] === _TokenInput[key]) return;exports[key] = _TokenInput[key];});
|
package/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"names":[],"mappings":"0KAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,8S","sourcesContent":["export * from './components/Autocomplete';\nexport * from './components/Button';\nexport * from './components/Calendar';\nexport * from './components/Center';\nexport * from './components/Checkbox';\nexport * from './components/ComboBox';\nexport * from './components/CurrencyInput';\nexport * from './components/CurrencyLabel';\nexport * from './components/DateInput';\nexport * from './components/DatePicker';\nexport * from './components/Dropdown';\nexport * from './components/DropdownMenu';\nexport * from './components/FileUploader';\nexport * from './components/FxInput';\nexport * from './components/Gapped';\nexport * from './components/GlobalLoader';\nexport * from './components/Group';\nexport * from './components/Hint';\nexport * from './components/Input';\nexport * from './components/Kebab';\nexport * from './components/Link';\nexport * from './components/Loader';\nexport * from './components/MenuHeader';\nexport * from './components/MenuItem';\nexport * from './components/MenuSeparator';\nexport * from './components/Modal';\nexport * from './components/Paging';\nexport * from './components/PasswordInput';\nexport * from './components/Radio';\nexport * from './components/RadioGroup';\nexport * from './components/ScrollContainer';\nexport * from './components/Select';\nexport * from './components/SidePage';\nexport * from './components/Spinner';\nexport * from './components/Sticky';\nexport * from './components/Switcher';\nexport * from './components/Tabs';\nexport * from './components/Textarea';\nexport * from './components/Toast';\nexport * from './components/Toggle';\nexport * from './components/Token';\nexport * from './components/TokenInput';\nexport * from './components/Tooltip';\nexport * from './components/TooltipMenu';\nexport * from './components/ResponsiveLayout';\nexport * from './components/MiniModal';\nexport * from './lib/locale';\nexport * from './lib/theming/ThemeContext';\nexport * from './lib/theming/ThemeFactory';\nexport * from './lib/theming/themes/DefaultTheme';\nexport * from './lib/theming/themes/DarkTheme';\nexport * from './lib/theming/themes/DefaultTheme8pxOld';\nexport * from './lib/theming/themes/FlatTheme8pxOld';\nexport * from './lib/theming/themes/Theme2022';\nexport * from './lib/theming/themes/Theme2022Dark';\nexport * from './lib/types/props';\nexport * from './internal/Popup/types';\nexport * as ColorFunctions from './lib/styles/ColorFunctions';\nexport * as DimensionFunctions from './lib/styles/DimensionFunctions';\n"]}
|
|
1
|
+
{"version":3,"sources":["index.ts"],"names":[],"mappings":"0KAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,8S","sourcesContent":["export * from './components/Autocomplete';\nexport * from './components/Button';\nexport * from './components/Calendar';\nexport * from './components/Center';\nexport * from './components/Checkbox';\nexport * from './components/ComboBox';\nexport * from './components/CurrencyInput';\nexport * from './components/CurrencyLabel';\nexport * from './components/DateInput';\nexport * from './components/DatePicker';\nexport * from './components/Dropdown';\nexport * from './components/DropdownMenu';\nexport * from './components/FileUploader';\nexport * from './components/FxInput';\nexport * from './components/Gapped';\nexport * from './components/GlobalLoader';\nexport * from './components/Group';\nexport * from './components/Hint';\nexport * from './components/Input';\nexport * from './components/Kebab';\nexport * from './components/Link';\nexport * from './components/Loader';\nexport * from './components/MenuHeader';\nexport * from './components/MenuItem';\nexport * from './components/MenuSeparator';\nexport * from './components/Modal';\nexport * from './components/Paging';\nexport * from './components/PasswordInput';\nexport * from './components/Radio';\nexport * from './components/RadioGroup';\nexport * from './components/ScrollContainer';\nexport * from './components/Select';\nexport * from './components/SidePage';\nexport * from './components/Spinner';\nexport * from './components/Sticky';\nexport * from './components/Switcher';\nexport * from './components/Tabs';\nexport * from './components/Textarea';\nexport * from './components/Toast';\nexport * from './components/SingleToast';\nexport * from './components/Toggle';\nexport * from './components/Token';\nexport * from './components/TokenInput';\nexport * from './components/Tooltip';\nexport * from './components/TooltipMenu';\nexport * from './components/ResponsiveLayout';\nexport * from './components/MiniModal';\nexport * from './lib/locale';\nexport * from './lib/theming/ThemeContext';\nexport * from './lib/theming/ThemeFactory';\nexport * from './lib/theming/themes/DefaultTheme';\nexport * from './lib/theming/themes/DarkTheme';\nexport * from './lib/theming/themes/DefaultTheme8pxOld';\nexport * from './lib/theming/themes/FlatTheme8pxOld';\nexport * from './lib/theming/themes/Theme2022';\nexport * from './lib/theming/themes/Theme2022Dark';\nexport * from './lib/types/props';\nexport * from './internal/Popup/types';\nexport * as ColorFunctions from './lib/styles/ColorFunctions';\nexport * as DimensionFunctions from './lib/styles/DimensionFunctions';\n"]}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
+
import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import ReactDOM from 'react-dom';
|
|
5
|
+
import { Toast } from "../../Toast/Toast";
|
|
6
|
+
/**
|
|
7
|
+
* Позволяет вызывать тосты с помощью статических методов. В отличие от статических методов из компонента `<Toast>` - их можно кастомизировать и они работают с `React@18`.
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
export var SingleToast = /*#__PURE__*/function (_React$Component) {
|
|
11
|
+
_inheritsLoose(SingleToast, _React$Component);
|
|
12
|
+
|
|
13
|
+
function SingleToast() {
|
|
14
|
+
var _this;
|
|
15
|
+
|
|
16
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
17
|
+
args[_key] = arguments[_key];
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
|
|
21
|
+
|
|
22
|
+
_this.render = function () {
|
|
23
|
+
return /*#__PURE__*/React.createElement(Toast, _extends({
|
|
24
|
+
ref: SingleToast.ref
|
|
25
|
+
}, _this.props));
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
return _this;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
return SingleToast;
|
|
32
|
+
}(React.Component);
|
|
33
|
+
SingleToast.ref = /*#__PURE__*/React.createRef();
|
|
34
|
+
|
|
35
|
+
SingleToast.push = function () {
|
|
36
|
+
var _SingleToast$ref$curr;
|
|
37
|
+
|
|
38
|
+
SingleToast.close();
|
|
39
|
+
|
|
40
|
+
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
|
|
41
|
+
args[_key2] = arguments[_key2];
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
(_SingleToast$ref$curr = SingleToast.ref.current) == null ? void 0 : _SingleToast$ref$curr.push.apply(_SingleToast$ref$curr, args);
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
SingleToast.close = function () {
|
|
48
|
+
ReactDOM.flushSync(function () {
|
|
49
|
+
var _SingleToast$ref$curr2;
|
|
50
|
+
|
|
51
|
+
return (_SingleToast$ref$curr2 = SingleToast.ref.current) == null ? void 0 : _SingleToast$ref$curr2.close();
|
|
52
|
+
});
|
|
53
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["SingleToast.tsx"],"names":["React","ReactDOM","Toast","SingleToast","render","ref","props","Component","createRef","push","close","args","current","flushSync"],"mappings":"gIAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,QAAP,MAAqB,WAArB;;AAEA,SAASC,KAAT,QAAkC,gBAAlC;;AAEA;AACA;AACA;AACA,WAAaC,WAAb;;;;;;;;;AASEC,IAAAA,MATF,GASW,YAAM;AACb,0BAAO,oBAAC,KAAD,aAAO,GAAG,EAAED,WAAW,CAACE,GAAxB,IAAiC,MAAKC,KAAtC,EAAP;AACD,KAXH,oCAAiCN,KAAK,CAACO,SAAvC,EAAaJ,W,CACGE,G,gBAAML,KAAK,CAACQ,SAAN,E,CADTL,W,CAEGM,I,GAA0B,YAAa,2BACnDN,WAAW,CAACO,KAAZ,GADmD,mCAATC,IAAS,yDAATA,IAAS,4BAEnD,yBAAAR,WAAW,CAACE,GAAZ,CAAgBO,OAAhB,2CAAyBH,IAAzB,8BAAiCE,IAAjC,EACD,C,CALUR,W,CAMGO,K,GAA4B,YAAM,CAC9CT,QAAQ,CAACY,SAAT,CAAmB,yEAAMV,WAAW,CAACE,GAAZ,CAAgBO,OAAtB,qBAAM,uBAAyBF,KAAzB,EAAN,EAAnB,EACD,C","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { Toast, ToastProps } from '../Toast/Toast';\n\n/**\n * Позволяет вызывать тосты с помощью статических методов. В отличие от статических методов из компонента `<Toast>` - их можно кастомизировать и они работают с `React@18`.\n */\nexport class SingleToast extends React.Component<ToastProps> {\n public static ref = React.createRef<Toast>();\n public static push: typeof Toast.push = (...args) => {\n SingleToast.close();\n SingleToast.ref.current?.push(...args);\n };\n public static close: typeof Toast.close = () => {\n ReactDOM.flushSync(() => SingleToast.ref.current?.close());\n };\n render = () => {\n return <Toast ref={SingleToast.ref} {...this.props} />;\n };\n}\n"]}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Toast, ToastProps } from '../Toast/Toast';
|
|
3
|
+
/**
|
|
4
|
+
* Позволяет вызывать тосты с помощью статических методов. В отличие от статических методов из компонента `<Toast>` - их можно кастомизировать и они работают с `React@18`.
|
|
5
|
+
*/
|
|
6
|
+
export declare class SingleToast extends React.Component<ToastProps> {
|
|
7
|
+
static ref: React.RefObject<Toast>;
|
|
8
|
+
static push: typeof Toast.push;
|
|
9
|
+
static close: typeof Toast.close;
|
|
10
|
+
render: () => JSX.Element;
|
|
11
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
`<SingleToast>` можно добавить в единственном месте в проекте, а статические методы будут всегда использовать последний отрендеренный экземпляр `<Toast>`.
|
|
2
|
+
|
|
3
|
+
_На внешний вид этого примера влияет следующий пример_
|
|
4
|
+
|
|
5
|
+
```jsx harmony
|
|
6
|
+
import { Button, SingleToast } from '@skbkontur/react-ui';
|
|
7
|
+
|
|
8
|
+
<div>
|
|
9
|
+
<SingleToast />
|
|
10
|
+
<Button onClick={() => SingleToast.push('Статический тост')}>
|
|
11
|
+
Показать статический тост
|
|
12
|
+
</Button>
|
|
13
|
+
</div>
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
`<SingleToast>` можно кастомизировать с помощью переменных темы для `toast`.
|
|
17
|
+
```jsx harmony
|
|
18
|
+
import { Button, SingleToast, ThemeContext, ThemeFactory, THEME_2022 } from '@skbkontur/react-ui';
|
|
19
|
+
|
|
20
|
+
const rand = () => "Пример жёлтого тоста № " + Math.round(Math.random() * 100).toString();
|
|
21
|
+
|
|
22
|
+
const pushToast = () => {
|
|
23
|
+
SingleToast.push(rand(), {
|
|
24
|
+
label: "Cancel",
|
|
25
|
+
handler: () => SingleToast.push("Canceled")
|
|
26
|
+
});
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
<div>
|
|
30
|
+
<SingleToast theme={{ toastBg: '#f1c40f' }} />
|
|
31
|
+
<Button onClick={pushToast}>
|
|
32
|
+
Показать тост с жёлтым фоном
|
|
33
|
+
</Button>
|
|
34
|
+
</div>
|
|
35
|
+
```
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "../SingleToast";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAd","sourcesContent":["export * from './SingleToast';\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './SingleToast';
|
|
@@ -6,6 +6,8 @@ var _class, _class2, _temp;
|
|
|
6
6
|
import React from 'react';
|
|
7
7
|
import { CSSTransition, TransitionGroup } from 'react-transition-group';
|
|
8
8
|
import { globalObject } from '@skbkontur/global-object';
|
|
9
|
+
import { ThemeFactory } from "../../../lib/theming/ThemeFactory";
|
|
10
|
+
import { ThemeContext } from "../../../lib/theming/ThemeContext";
|
|
9
11
|
import { RenderContainer } from "../../../internal/RenderContainer";
|
|
10
12
|
import { CommonWrapper } from "../../../internal/CommonWrapper";
|
|
11
13
|
import { isTestEnv } from "../../../lib/currentEnvironment";
|
|
@@ -23,10 +25,10 @@ export var ToastDataTids = {
|
|
|
23
25
|
* Показывает уведомления.
|
|
24
26
|
*
|
|
25
27
|
* Доступен статический метод: `Toast.push(notification, action?, showTime?)`.
|
|
26
|
-
* Однако, при его использовании не работает
|
|
27
|
-
*
|
|
28
|
+
* Однако, при его использовании не работает кастомизация, они не поддерживаются в `React@18`, а также могут быть проблемы с перекрытием уведомления другими элементами страницы.
|
|
29
|
+
*
|
|
30
|
+
* Для статических тостов <u>рекомендуется</u> использовать компонент [SingleToast](https://tech.skbkontur.ru/react-ui/#/Components/SingleToast) - в нём исправлены эти проблемы.
|
|
28
31
|
*
|
|
29
|
-
* Рекомендуется использовать Toast через `ref` (см. примеры).
|
|
30
32
|
*/
|
|
31
33
|
|
|
32
34
|
export var Toast = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
|
|
@@ -99,7 +101,14 @@ export var Toast = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
|
|
|
99
101
|
};
|
|
100
102
|
|
|
101
103
|
_proto.render = function render() {
|
|
102
|
-
|
|
104
|
+
var _this2 = this;
|
|
105
|
+
|
|
106
|
+
return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
|
|
107
|
+
_this2.theme = _this2.props.theme ? ThemeFactory.create(_this2.props.theme, theme) : theme;
|
|
108
|
+
return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
|
|
109
|
+
value: _this2.theme
|
|
110
|
+
}, /*#__PURE__*/React.createElement(RenderContainer, null, /*#__PURE__*/React.createElement(TransitionGroup, null, _this2._renderToast())));
|
|
111
|
+
});
|
|
103
112
|
}
|
|
104
113
|
/**
|
|
105
114
|
* Показывает тост с `notification` в качестве сообщения.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Toast.tsx"],"names":["React","CSSTransition","TransitionGroup","globalObject","RenderContainer","CommonWrapper","isTestEnv","rootNode","styles","ToastView","ToastStatic","ToastDataTids","toastStatic","toastView","action","close","Toast","push","notification","showTime","props","rootRef","createRef","safelyCall","onClose","state","setState","setRootRef","element","setRootNode","current","_clearTimer","_timeout","clearTimeout","_setTimer","setTimeout","_refToast","_toast","id","componentWillUnmount","render","_renderToast","onPush","toastProps","onMouseEnter","onMouseLeave","children","enter","enterActive","exit","exitActive","Component","__KONTUR_REACT_UI__","fn","args"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } from 'react';\nimport { CSSTransition, TransitionGroup } from 'react-transition-group';\nimport { globalObject, SafeTimer } from '@skbkontur/global-object';\n\nimport { RenderContainer } from '../../internal/RenderContainer';\nimport { Nullable } from '../../typings/utility-types';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './Toast.styles';\nimport { ToastView, ToastViewProps } from './ToastView';\nimport { ToastStatic } from './ToastStatic';\n\nexport interface Action {\n label: string;\n handler: () => void;\n 'aria-label'?: string;\n}\n\nexport interface ToastState {\n notification: Nullable<string>;\n action: Nullable<Action>;\n id: number;\n showTime: Nullable<number>;\n}\n\nexport interface ToastProps extends Pick<AriaAttributes, 'aria-label'>, CommonProps {\n onPush?: (notification: string, action?: Action) => void;\n onClose?: (notification: string, action?: Action) => void;\n}\n\nexport const ToastDataTids = {\n toastStatic: 'StaticToast',\n toastView: 'ToastView__root',\n action: 'ToastView__action',\n close: 'ToastView__close',\n} as const;\n\n/**\n * Показывает уведомления.\n *\n * Доступен статический метод: `Toast.push(notification, action?, showTime?)`.\n * Однако, при его использовании не работает кастомизация и могут быть проблемы\n * с перекрытием уведомления другими элементами страницы.\n *\n * Рекомендуется использовать Toast через `ref` (см. примеры).\n */\n@rootNode\nexport class Toast extends React.Component<ToastProps, ToastState> {\n public static __KONTUR_REACT_UI__ = 'Toast';\n private setRootNode!: TSetRootNode;\n\n public static push(notification: string, action?: Nullable<Action>, showTime?: number) {\n ToastStatic.push(notification, action, showTime);\n }\n\n public static close() {\n ToastStatic.close();\n }\n\n public _toast: Nullable<ToastView>;\n private _timeout: SafeTimer;\n private rootRef = React.createRef<HTMLElement>();\n\n constructor(props: ToastProps) {\n super(props);\n this.state = {\n notification: null,\n action: null,\n id: 0,\n showTime: null,\n };\n }\n\n public componentWillUnmount() {\n this._clearTimer();\n }\n\n public render() {\n return (\n <RenderContainer>\n <TransitionGroup>{this._renderToast()}</TransitionGroup>\n </RenderContainer>\n );\n }\n\n /**\n * Показывает тост с `notification` в качестве сообщения.\n * Тост автоматически скрывается через 3 или 7 секунд,\n * в зависимости от наличия у него кнопки `action`.\n * Время показа можно задать вручную, передав `showTime`.\n *\n * @public\n * @param {string} notification\n * @param {Action} action `action` опциональный параметр формата `{ label: string, handler: function }`\n * добавляет кнопку в виде ссылки при клике на которую вызывается переданный handler\n * @param {number} showTime Время существования Toast в миллисекундах\n */\n public push(notification: string, action?: Nullable<Action>, showTime?: number) {\n if (this.state.notification) {\n this.close();\n }\n\n safelyCall(this.props.onPush, notification, action);\n\n this.setState(({ id }) => ({ notification, action, id: id + 1, showTime }), this._setTimer);\n }\n\n /**\n * @public\n */\n public close = () => {\n safelyCall(this.props.onClose, this.state.notification, this.state.action);\n this.setState({ notification: null, action: null });\n };\n\n private _renderToast() {\n const { notification, action, id } = this.state;\n\n if (!notification) {\n return null;\n }\n\n const toastProps: ToastViewProps = {\n onMouseEnter: this._clearTimer,\n onMouseLeave: this._setTimer,\n onClose: this.close,\n children: notification,\n 'aria-label': this.props['aria-label'],\n action,\n };\n\n return (\n <CSSTransition\n key={id}\n classNames={{\n enter: styles.enter(),\n enterActive: styles.enterActive(),\n exit: styles.exit(),\n exitActive: styles.exitActive(),\n }}\n timeout={{\n enter: 200,\n exit: 150,\n }}\n enter={!isTestEnv}\n exit={!isTestEnv}\n nodeRef={this.rootRef}\n >\n <CommonWrapper rootNodeRef={this.setRootRef} {...this.props}>\n <ToastView ref={this._refToast} {...toastProps} />\n </CommonWrapper>\n </CSSTransition>\n );\n }\n\n private setRootRef = (element: Nullable<Element>) => {\n this.setRootNode(element);\n // @ts-expect-error: See: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31065.\n this.rootRef.current = element;\n };\n\n private _clearTimer = () => {\n if (this._timeout) {\n globalObject.clearTimeout(this._timeout);\n this._timeout = null;\n }\n };\n\n private _setTimer = () => {\n this._clearTimer();\n\n let showTime = this.state.action ? 7000 : 3000;\n showTime = this.state.showTime ?? showTime;\n this._timeout = globalObject.setTimeout(this.close, showTime);\n };\n\n private _refToast = (element: ToastView) => {\n this._toast = element;\n };\n}\n\nfunction safelyCall(fn: Nullable<(a?: any) => any>, ...args: any[]) {\n if (fn) {\n fn(...args);\n }\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["Toast.tsx"],"names":["React","CSSTransition","TransitionGroup","globalObject","ThemeFactory","ThemeContext","RenderContainer","CommonWrapper","isTestEnv","rootNode","styles","ToastView","ToastStatic","ToastDataTids","toastStatic","toastView","action","close","Toast","push","notification","showTime","props","rootRef","createRef","safelyCall","onClose","state","setState","setRootRef","element","setRootNode","current","_clearTimer","_timeout","clearTimeout","_setTimer","setTimeout","_refToast","_toast","id","componentWillUnmount","render","theme","create","_renderToast","onPush","toastProps","onMouseEnter","onMouseLeave","children","enter","enterActive","exit","exitActive","Component","__KONTUR_REACT_UI__","fn","args"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } from 'react';\nimport { CSSTransition, TransitionGroup } from 'react-transition-group';\nimport { globalObject, SafeTimer } from '@skbkontur/global-object';\n\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme, ThemeIn } from '../../lib/theming/Theme';\nimport { RenderContainer } from '../../internal/RenderContainer';\nimport { Nullable } from '../../typings/utility-types';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './Toast.styles';\nimport { ToastView, ToastViewProps } from './ToastView';\nimport { ToastStatic } from './ToastStatic';\n\nexport interface Action {\n label: string;\n handler: () => void;\n 'aria-label'?: string;\n}\n\nexport interface ToastState {\n notification: Nullable<string>;\n action: Nullable<Action>;\n id: number;\n showTime: Nullable<number>;\n}\n\nexport interface ToastProps extends Pick<AriaAttributes, 'aria-label'>, CommonProps {\n onPush?: (notification: string, action?: Action) => void;\n onClose?: (notification: string, action?: Action) => void;\n /**\n * Обычный объект с переменными темы.\n * Он будет объединён с темой из контекста.\n */\n theme?: ThemeIn;\n}\n\nexport const ToastDataTids = {\n toastStatic: 'StaticToast',\n toastView: 'ToastView__root',\n action: 'ToastView__action',\n close: 'ToastView__close',\n} as const;\n\n/**\n * Показывает уведомления.\n *\n * Доступен статический метод: `Toast.push(notification, action?, showTime?)`.\n * Однако, при его использовании не работает кастомизация, они не поддерживаются в `React@18`, а также могут быть проблемы с перекрытием уведомления другими элементами страницы.\n *\n * Для статических тостов <u>рекомендуется</u> использовать компонент [SingleToast](https://tech.skbkontur.ru/react-ui/#/Components/SingleToast) - в нём исправлены эти проблемы.\n *\n */\n@rootNode\nexport class Toast extends React.Component<ToastProps, ToastState> {\n public static __KONTUR_REACT_UI__ = 'Toast';\n private setRootNode!: TSetRootNode;\n private theme!: Theme;\n\n public static push(notification: string, action?: Nullable<Action>, showTime?: number) {\n ToastStatic.push(notification, action, showTime);\n }\n\n public static close() {\n ToastStatic.close();\n }\n\n public _toast: Nullable<ToastView>;\n private _timeout: SafeTimer;\n private rootRef = React.createRef<HTMLElement>();\n\n constructor(props: ToastProps) {\n super(props);\n this.state = {\n notification: null,\n action: null,\n id: 0,\n showTime: null,\n };\n }\n\n public componentWillUnmount() {\n this._clearTimer();\n }\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = this.props.theme ? ThemeFactory.create(this.props.theme as Theme, theme) : theme;\n return (\n <ThemeContext.Provider value={this.theme}>\n <RenderContainer>\n <TransitionGroup>{this._renderToast()}</TransitionGroup>\n </RenderContainer>\n </ThemeContext.Provider>\n );\n }}\n </ThemeContext.Consumer>\n );\n }\n\n /**\n * Показывает тост с `notification` в качестве сообщения.\n * Тост автоматически скрывается через 3 или 7 секунд,\n * в зависимости от наличия у него кнопки `action`.\n * Время показа можно задать вручную, передав `showTime`.\n *\n * @public\n * @param {string} notification\n * @param {Action} action `action` опциональный параметр формата `{ label: string, handler: function }`\n * добавляет кнопку в виде ссылки при клике на которую вызывается переданный handler\n * @param {number} showTime Время существования Toast в миллисекундах\n */\n public push(notification: string, action?: Nullable<Action>, showTime?: number) {\n if (this.state.notification) {\n this.close();\n }\n\n safelyCall(this.props.onPush, notification, action);\n\n this.setState(({ id }) => ({ notification, action, id: id + 1, showTime }), this._setTimer);\n }\n\n /**\n * @public\n */\n public close = () => {\n safelyCall(this.props.onClose, this.state.notification, this.state.action);\n this.setState({ notification: null, action: null });\n };\n\n private _renderToast() {\n const { notification, action, id } = this.state;\n\n if (!notification) {\n return null;\n }\n\n const toastProps: ToastViewProps = {\n onMouseEnter: this._clearTimer,\n onMouseLeave: this._setTimer,\n onClose: this.close,\n children: notification,\n 'aria-label': this.props['aria-label'],\n action,\n };\n\n return (\n <CSSTransition\n key={id}\n classNames={{\n enter: styles.enter(),\n enterActive: styles.enterActive(),\n exit: styles.exit(),\n exitActive: styles.exitActive(),\n }}\n timeout={{\n enter: 200,\n exit: 150,\n }}\n enter={!isTestEnv}\n exit={!isTestEnv}\n nodeRef={this.rootRef}\n >\n <CommonWrapper rootNodeRef={this.setRootRef} {...this.props}>\n <ToastView ref={this._refToast} {...toastProps} />\n </CommonWrapper>\n </CSSTransition>\n );\n }\n\n private setRootRef = (element: Nullable<Element>) => {\n this.setRootNode(element);\n // @ts-expect-error: See: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31065.\n this.rootRef.current = element;\n };\n\n private _clearTimer = () => {\n if (this._timeout) {\n globalObject.clearTimeout(this._timeout);\n this._timeout = null;\n }\n };\n\n private _setTimer = () => {\n this._clearTimer();\n\n let showTime = this.state.action ? 7000 : 3000;\n showTime = this.state.showTime ?? showTime;\n this._timeout = globalObject.setTimeout(this.close, showTime);\n };\n\n private _refToast = (element: ToastView) => {\n this._toast = element;\n };\n}\n\nfunction safelyCall(fn: Nullable<(a?: any) => any>, ...args: any[]) {\n if (fn) {\n fn(...args);\n }\n}\n"]}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React, { AriaAttributes } from 'react';
|
|
2
|
+
import { ThemeIn } from '../../lib/theming/Theme';
|
|
2
3
|
import { Nullable } from '../../typings/utility-types';
|
|
3
4
|
import { CommonProps } from '../../internal/CommonWrapper';
|
|
4
5
|
import { ToastView } from './ToastView';
|
|
@@ -16,6 +17,11 @@ export interface ToastState {
|
|
|
16
17
|
export interface ToastProps extends Pick<AriaAttributes, 'aria-label'>, CommonProps {
|
|
17
18
|
onPush?: (notification: string, action?: Action) => void;
|
|
18
19
|
onClose?: (notification: string, action?: Action) => void;
|
|
20
|
+
/**
|
|
21
|
+
* Обычный объект с переменными темы.
|
|
22
|
+
* Он будет объединён с темой из контекста.
|
|
23
|
+
*/
|
|
24
|
+
theme?: ThemeIn;
|
|
19
25
|
}
|
|
20
26
|
export declare const ToastDataTids: {
|
|
21
27
|
readonly toastStatic: "StaticToast";
|
|
@@ -27,14 +33,15 @@ export declare const ToastDataTids: {
|
|
|
27
33
|
* Показывает уведомления.
|
|
28
34
|
*
|
|
29
35
|
* Доступен статический метод: `Toast.push(notification, action?, showTime?)`.
|
|
30
|
-
* Однако, при его использовании не работает
|
|
31
|
-
*
|
|
36
|
+
* Однако, при его использовании не работает кастомизация, они не поддерживаются в `React@18`, а также могут быть проблемы с перекрытием уведомления другими элементами страницы.
|
|
37
|
+
*
|
|
38
|
+
* Для статических тостов <u>рекомендуется</u> использовать компонент [SingleToast](https://tech.skbkontur.ru/react-ui/#/Components/SingleToast) - в нём исправлены эти проблемы.
|
|
32
39
|
*
|
|
33
|
-
* Рекомендуется использовать Toast через `ref` (см. примеры).
|
|
34
40
|
*/
|
|
35
41
|
export declare class Toast extends React.Component<ToastProps, ToastState> {
|
|
36
42
|
static __KONTUR_REACT_UI__: string;
|
|
37
43
|
private setRootNode;
|
|
44
|
+
private theme;
|
|
38
45
|
static push(notification: string, action?: Nullable<Action>, showTime?: number): void;
|
|
39
46
|
static close(): void;
|
|
40
47
|
_toast: Nullable<ToastView>;
|
|
@@ -67,108 +67,3 @@ class Toaster extends React.Component {
|
|
|
67
67
|
|
|
68
68
|
<Toaster />;
|
|
69
69
|
```
|
|
70
|
-
|
|
71
|
-
### SuperToast
|
|
72
|
-
|
|
73
|
-
Вы можете объединить удобство статических методов и кастамизируемость классического способа через `ref`.
|
|
74
|
-
Для этого можно добавить обёртку, которая позволяет Toast работать по примеру GlobalLoader.
|
|
75
|
-
|
|
76
|
-
Т.е. кастомный Toast можно добавить в единственном месте в проекте, а статические методы будут всегда использовать последний отрендеренный экземпляр Toast:
|
|
77
|
-
|
|
78
|
-
Также в обёртке можно изменить логику появления всплывашки, по рекомендации Гайдов:
|
|
79
|
-
https://guides.kontur.ru/components/toast/#08
|
|
80
|
-
```static
|
|
81
|
-
«Всегда показывается только 1 тост. Перед появлением следующего тоста, текущий скрывается, даже если время его показа еще не истекло»
|
|
82
|
-
```
|
|
83
|
-
|
|
84
|
-
Для этого немного изменим метод `SuperToast.close` с помощью специального метода `ReactDOM.flushSync`.
|
|
85
|
-
|
|
86
|
-
Итоговый вариант:
|
|
87
|
-
```js static
|
|
88
|
-
const SuperToast = (props) => <Toast ref={SuperToast.ref} {...props} />;
|
|
89
|
-
SuperToast.ref = React.createRef();
|
|
90
|
-
SuperToast.push = (...args) => {
|
|
91
|
-
SuperToast.close();
|
|
92
|
-
SuperToast.ref.current && SuperToast.ref.current.push(...args);
|
|
93
|
-
};
|
|
94
|
-
SuperToast.close = () => {
|
|
95
|
-
ReactDOM.flushSync(() => {
|
|
96
|
-
SuperToast.ref.current && SuperToast.ref.current.close();
|
|
97
|
-
});
|
|
98
|
-
};
|
|
99
|
-
|
|
100
|
-
```
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
Версия на typescript:
|
|
104
|
-
```typescript static
|
|
105
|
-
class SuperToast extends React.Component<ToastProps> {
|
|
106
|
-
public static ref = React.createRef<Toast>();
|
|
107
|
-
public static push: typeof Toast.push = (...args) => {
|
|
108
|
-
SuperToast.close();
|
|
109
|
-
SuperToast.ref.current?.push(...args);
|
|
110
|
-
};
|
|
111
|
-
public static close: typeof Toast.close = () => {
|
|
112
|
-
ReactDOM.flushSync(() => SuperToast.ref.current?.close());
|
|
113
|
-
};
|
|
114
|
-
render = () => {
|
|
115
|
-
return <Toast ref={SuperToast.ref} {...this.props} />;
|
|
116
|
-
};
|
|
117
|
-
}
|
|
118
|
-
```
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
```jsx harmony
|
|
122
|
-
import { Button, Toast, ThemeContext, ThemeFactory, THEME_2022 } from '@skbkontur/react-ui';
|
|
123
|
-
import ReactDOM from 'react-dom';
|
|
124
|
-
|
|
125
|
-
const SuperToast = (props) => <Toast ref={SuperToast.ref} {...props} />;
|
|
126
|
-
SuperToast.ref = React.createRef();
|
|
127
|
-
SuperToast.push = (...args) => {
|
|
128
|
-
SuperToast.close();
|
|
129
|
-
SuperToast.ref.current && SuperToast.ref.current.push(...args);
|
|
130
|
-
};
|
|
131
|
-
SuperToast.close = () => {
|
|
132
|
-
ReactDOM.flushSync(() => {
|
|
133
|
-
SuperToast.ref.current && SuperToast.ref.current.close();
|
|
134
|
-
});
|
|
135
|
-
};
|
|
136
|
-
|
|
137
|
-
const RedToast = () => (
|
|
138
|
-
<ThemeContext.Consumer>
|
|
139
|
-
{(theme) => {
|
|
140
|
-
return <ThemeContext.Provider
|
|
141
|
-
value={ThemeFactory.create(
|
|
142
|
-
{
|
|
143
|
-
toastBg: "rgba(210, 15, 0, 0.76)",
|
|
144
|
-
toastLinkBgActive: "rgba(210, 15, 0, 0.76)"
|
|
145
|
-
},
|
|
146
|
-
theme
|
|
147
|
-
)}
|
|
148
|
-
>
|
|
149
|
-
<SuperToast />
|
|
150
|
-
</ThemeContext.Provider>
|
|
151
|
-
}}
|
|
152
|
-
</ThemeContext.Consumer>
|
|
153
|
-
);
|
|
154
|
-
|
|
155
|
-
const rand = () => "Пример красного тоста №" + Math.round(Math.random() * 100).toString();
|
|
156
|
-
|
|
157
|
-
const push = () => {
|
|
158
|
-
SuperToast.push(rand(), {
|
|
159
|
-
label: "Cancel",
|
|
160
|
-
handler: () => SuperToast.push("Canceled")
|
|
161
|
-
});
|
|
162
|
-
};
|
|
163
|
-
|
|
164
|
-
<div>
|
|
165
|
-
<RedToast />
|
|
166
|
-
<span />
|
|
167
|
-
<span />
|
|
168
|
-
<span />
|
|
169
|
-
<Button onClick={push}>
|
|
170
|
-
Show super red toast
|
|
171
|
-
</Button>
|
|
172
|
-
</div>
|
|
173
|
-
;
|
|
174
|
-
```
|
package/index.d.ts
CHANGED
|
@@ -37,6 +37,7 @@ export * from './components/Switcher';
|
|
|
37
37
|
export * from './components/Tabs';
|
|
38
38
|
export * from './components/Textarea';
|
|
39
39
|
export * from './components/Toast';
|
|
40
|
+
export * from './components/SingleToast';
|
|
40
41
|
export * from './components/Toggle';
|
|
41
42
|
export * from './components/Token';
|
|
42
43
|
export * from './components/TokenInput';
|
package/index.js
CHANGED
|
@@ -37,6 +37,7 @@ export * from './components/Switcher';
|
|
|
37
37
|
export * from './components/Tabs';
|
|
38
38
|
export * from './components/Textarea';
|
|
39
39
|
export * from './components/Toast';
|
|
40
|
+
export * from './components/SingleToast';
|
|
40
41
|
export * from './components/Toggle';
|
|
41
42
|
export * from './components/Token';
|
|
42
43
|
export * from './components/TokenInput';
|
package/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"names":["ColorFunctions","DimensionFunctions"],"mappings":"AAAA,cAAc,2BAAd;AACA,cAAc,qBAAd;AACA,cAAc,uBAAd;AACA,cAAc,qBAAd;AACA,cAAc,uBAAd;AACA,cAAc,uBAAd;AACA,cAAc,4BAAd;AACA,cAAc,4BAAd;AACA,cAAc,wBAAd;AACA,cAAc,yBAAd;AACA,cAAc,uBAAd;AACA,cAAc,2BAAd;AACA,cAAc,2BAAd;AACA,cAAc,sBAAd;AACA,cAAc,qBAAd;AACA,cAAc,2BAAd;AACA,cAAc,oBAAd;AACA,cAAc,mBAAd;AACA,cAAc,oBAAd;AACA,cAAc,oBAAd;AACA,cAAc,mBAAd;AACA,cAAc,qBAAd;AACA,cAAc,yBAAd;AACA,cAAc,uBAAd;AACA,cAAc,4BAAd;AACA,cAAc,oBAAd;AACA,cAAc,qBAAd;AACA,cAAc,4BAAd;AACA,cAAc,oBAAd;AACA,cAAc,yBAAd;AACA,cAAc,8BAAd;AACA,cAAc,qBAAd;AACA,cAAc,uBAAd;AACA,cAAc,sBAAd;AACA,cAAc,qBAAd;AACA,cAAc,uBAAd;AACA,cAAc,mBAAd;AACA,cAAc,uBAAd;AACA,cAAc,oBAAd;AACA,cAAc,qBAAd;AACA,cAAc,oBAAd;AACA,cAAc,yBAAd;AACA,cAAc,sBAAd;AACA,cAAc,0BAAd;AACA,cAAc,+BAAd;AACA,cAAc,wBAAd;AACA,cAAc,cAAd;AACA,cAAc,4BAAd;AACA,cAAc,4BAAd;AACA,cAAc,mCAAd;AACA,cAAc,gCAAd;AACA,cAAc,yCAAd;AACA,cAAc,sCAAd;AACA,cAAc,gCAAd;AACA,cAAc,oCAAd;AACA,cAAc,mBAAd;AACA,cAAc,wBAAd,C;AACgC,6B,6BAApBA,c;AACwB,iC,iCAAxBC,kB","sourcesContent":["export * from './components/Autocomplete';\nexport * from './components/Button';\nexport * from './components/Calendar';\nexport * from './components/Center';\nexport * from './components/Checkbox';\nexport * from './components/ComboBox';\nexport * from './components/CurrencyInput';\nexport * from './components/CurrencyLabel';\nexport * from './components/DateInput';\nexport * from './components/DatePicker';\nexport * from './components/Dropdown';\nexport * from './components/DropdownMenu';\nexport * from './components/FileUploader';\nexport * from './components/FxInput';\nexport * from './components/Gapped';\nexport * from './components/GlobalLoader';\nexport * from './components/Group';\nexport * from './components/Hint';\nexport * from './components/Input';\nexport * from './components/Kebab';\nexport * from './components/Link';\nexport * from './components/Loader';\nexport * from './components/MenuHeader';\nexport * from './components/MenuItem';\nexport * from './components/MenuSeparator';\nexport * from './components/Modal';\nexport * from './components/Paging';\nexport * from './components/PasswordInput';\nexport * from './components/Radio';\nexport * from './components/RadioGroup';\nexport * from './components/ScrollContainer';\nexport * from './components/Select';\nexport * from './components/SidePage';\nexport * from './components/Spinner';\nexport * from './components/Sticky';\nexport * from './components/Switcher';\nexport * from './components/Tabs';\nexport * from './components/Textarea';\nexport * from './components/Toast';\nexport * from './components/Toggle';\nexport * from './components/Token';\nexport * from './components/TokenInput';\nexport * from './components/Tooltip';\nexport * from './components/TooltipMenu';\nexport * from './components/ResponsiveLayout';\nexport * from './components/MiniModal';\nexport * from './lib/locale';\nexport * from './lib/theming/ThemeContext';\nexport * from './lib/theming/ThemeFactory';\nexport * from './lib/theming/themes/DefaultTheme';\nexport * from './lib/theming/themes/DarkTheme';\nexport * from './lib/theming/themes/DefaultTheme8pxOld';\nexport * from './lib/theming/themes/FlatTheme8pxOld';\nexport * from './lib/theming/themes/Theme2022';\nexport * from './lib/theming/themes/Theme2022Dark';\nexport * from './lib/types/props';\nexport * from './internal/Popup/types';\nexport * as ColorFunctions from './lib/styles/ColorFunctions';\nexport * as DimensionFunctions from './lib/styles/DimensionFunctions';\n"]}
|
|
1
|
+
{"version":3,"sources":["index.ts"],"names":["ColorFunctions","DimensionFunctions"],"mappings":"AAAA,cAAc,2BAAd;AACA,cAAc,qBAAd;AACA,cAAc,uBAAd;AACA,cAAc,qBAAd;AACA,cAAc,uBAAd;AACA,cAAc,uBAAd;AACA,cAAc,4BAAd;AACA,cAAc,4BAAd;AACA,cAAc,wBAAd;AACA,cAAc,yBAAd;AACA,cAAc,uBAAd;AACA,cAAc,2BAAd;AACA,cAAc,2BAAd;AACA,cAAc,sBAAd;AACA,cAAc,qBAAd;AACA,cAAc,2BAAd;AACA,cAAc,oBAAd;AACA,cAAc,mBAAd;AACA,cAAc,oBAAd;AACA,cAAc,oBAAd;AACA,cAAc,mBAAd;AACA,cAAc,qBAAd;AACA,cAAc,yBAAd;AACA,cAAc,uBAAd;AACA,cAAc,4BAAd;AACA,cAAc,oBAAd;AACA,cAAc,qBAAd;AACA,cAAc,4BAAd;AACA,cAAc,oBAAd;AACA,cAAc,yBAAd;AACA,cAAc,8BAAd;AACA,cAAc,qBAAd;AACA,cAAc,uBAAd;AACA,cAAc,sBAAd;AACA,cAAc,qBAAd;AACA,cAAc,uBAAd;AACA,cAAc,mBAAd;AACA,cAAc,uBAAd;AACA,cAAc,oBAAd;AACA,cAAc,0BAAd;AACA,cAAc,qBAAd;AACA,cAAc,oBAAd;AACA,cAAc,yBAAd;AACA,cAAc,sBAAd;AACA,cAAc,0BAAd;AACA,cAAc,+BAAd;AACA,cAAc,wBAAd;AACA,cAAc,cAAd;AACA,cAAc,4BAAd;AACA,cAAc,4BAAd;AACA,cAAc,mCAAd;AACA,cAAc,gCAAd;AACA,cAAc,yCAAd;AACA,cAAc,sCAAd;AACA,cAAc,gCAAd;AACA,cAAc,oCAAd;AACA,cAAc,mBAAd;AACA,cAAc,wBAAd,C;AACgC,6B,6BAApBA,c;AACwB,iC,iCAAxBC,kB","sourcesContent":["export * from './components/Autocomplete';\nexport * from './components/Button';\nexport * from './components/Calendar';\nexport * from './components/Center';\nexport * from './components/Checkbox';\nexport * from './components/ComboBox';\nexport * from './components/CurrencyInput';\nexport * from './components/CurrencyLabel';\nexport * from './components/DateInput';\nexport * from './components/DatePicker';\nexport * from './components/Dropdown';\nexport * from './components/DropdownMenu';\nexport * from './components/FileUploader';\nexport * from './components/FxInput';\nexport * from './components/Gapped';\nexport * from './components/GlobalLoader';\nexport * from './components/Group';\nexport * from './components/Hint';\nexport * from './components/Input';\nexport * from './components/Kebab';\nexport * from './components/Link';\nexport * from './components/Loader';\nexport * from './components/MenuHeader';\nexport * from './components/MenuItem';\nexport * from './components/MenuSeparator';\nexport * from './components/Modal';\nexport * from './components/Paging';\nexport * from './components/PasswordInput';\nexport * from './components/Radio';\nexport * from './components/RadioGroup';\nexport * from './components/ScrollContainer';\nexport * from './components/Select';\nexport * from './components/SidePage';\nexport * from './components/Spinner';\nexport * from './components/Sticky';\nexport * from './components/Switcher';\nexport * from './components/Tabs';\nexport * from './components/Textarea';\nexport * from './components/Toast';\nexport * from './components/SingleToast';\nexport * from './components/Toggle';\nexport * from './components/Token';\nexport * from './components/TokenInput';\nexport * from './components/Tooltip';\nexport * from './components/TooltipMenu';\nexport * from './components/ResponsiveLayout';\nexport * from './components/MiniModal';\nexport * from './lib/locale';\nexport * from './lib/theming/ThemeContext';\nexport * from './lib/theming/ThemeFactory';\nexport * from './lib/theming/themes/DefaultTheme';\nexport * from './lib/theming/themes/DarkTheme';\nexport * from './lib/theming/themes/DefaultTheme8pxOld';\nexport * from './lib/theming/themes/FlatTheme8pxOld';\nexport * from './lib/theming/themes/Theme2022';\nexport * from './lib/theming/themes/Theme2022Dark';\nexport * from './lib/types/props';\nexport * from './internal/Popup/types';\nexport * as ColorFunctions from './lib/styles/ColorFunctions';\nexport * as DimensionFunctions from './lib/styles/DimensionFunctions';\n"]}
|
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skbkontur/react-ui",
|
|
3
|
-
"version": "4.18.0
|
|
3
|
+
"version": "4.18.0",
|
|
4
4
|
"description": "UI Components",
|
|
5
5
|
"main": "cjs/index.js",
|
|
6
6
|
"module": "index.js",
|
|
7
7
|
"sideEffects": false,
|
|
8
|
-
"homepage": "https://tech.skbkontur.ru/react-ui/4.18.0
|
|
8
|
+
"homepage": "https://tech.skbkontur.ru/react-ui/4.18.0/",
|
|
9
9
|
"repository": {
|
|
10
10
|
"type": "git",
|
|
11
11
|
"url": "git@github.com:skbkontur/retail-ui.git"
|
|
@@ -153,6 +153,6 @@
|
|
|
153
153
|
"react-dom": ">=16.9"
|
|
154
154
|
},
|
|
155
155
|
"publishConfig": {
|
|
156
|
-
"tag": "
|
|
156
|
+
"tag": "latest"
|
|
157
157
|
}
|
|
158
158
|
}
|