@salutejs/plasma-new-hope 0.249.0-canary.1719.13031725630.0 → 0.249.0-canary.1720.13005615941.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/cjs/components/Calendar/CalendarBase/CalendarBase.js +8 -0
- package/cjs/components/Calendar/CalendarBase/CalendarBase.js.map +1 -1
- package/cjs/components/Calendar/CalendarDouble/CalendarDouble.js +8 -0
- package/cjs/components/Calendar/CalendarDouble/CalendarDouble.js.map +1 -1
- package/cjs/components/DatePicker/RangeDate/RangeDate.js +28 -37
- package/cjs/components/DatePicker/RangeDate/RangeDate.js.map +1 -1
- package/cjs/components/DatePicker/SingleDate/SingleDate.js +8 -15
- package/cjs/components/DatePicker/SingleDate/SingleDate.js.map +1 -1
- package/cjs/components/Toast/Toast.css +7 -7
- package/cjs/components/Toast/Toast.js +2 -5
- package/cjs/components/Toast/Toast.js.map +1 -1
- package/cjs/components/Toast/Toast.styles.js +2 -11
- package/cjs/components/Toast/Toast.styles.js.map +1 -1
- package/cjs/components/Toast/{Toast.styles_1kasmzh.css → Toast.styles_1nei944.css} +2 -2
- package/cjs/components/Toast/Toast.tokens.js +1 -2
- package/cjs/components/Toast/Toast.tokens.js.map +1 -1
- package/cjs/components/Toast/ToastController.css +6 -6
- package/cjs/components/Toast/ToastProvider/ToastProvider.js +1 -6
- package/cjs/components/Toast/ToastProvider/ToastProvider.js.map +1 -1
- package/cjs/components/Toast/utils.js +0 -2
- package/cjs/components/Toast/utils.js.map +1 -1
- package/cjs/components/Toast/variations/_pilled/base.js +1 -1
- package/cjs/components/Toast/variations/_pilled/base.js.map +1 -1
- package/cjs/components/Toast/variations/_pilled/base_199qghc.css +1 -0
- package/cjs/index.css +8 -8
- package/emotion/cjs/components/Calendar/CalendarBase/CalendarBase.js +8 -0
- package/emotion/cjs/components/Calendar/CalendarDouble/CalendarDouble.js +8 -0
- package/emotion/cjs/components/DatePicker/RangeDate/RangeDate.js +28 -37
- package/emotion/cjs/components/DatePicker/SingleDate/SingleDate.js +8 -15
- package/emotion/cjs/components/Toast/Toast.js +2 -5
- package/emotion/cjs/components/Toast/Toast.styles.js +6 -9
- package/emotion/cjs/components/Toast/Toast.template-doc.mdx +5 -22
- package/emotion/cjs/components/Toast/Toast.tokens.js +1 -2
- package/emotion/cjs/components/Toast/ToastProvider/ToastProvider.js +1 -6
- package/emotion/cjs/components/Toast/utils.js +1 -2
- package/emotion/cjs/components/Toast/variations/_pilled/base.js +1 -1
- package/emotion/cjs/examples/plasma_b2c/components/Toast/Toast.config.js +7 -17
- package/emotion/cjs/examples/plasma_b2c/components/Toast/Toast.stories.tsx +14 -31
- package/emotion/cjs/examples/plasma_web/components/Toast/Toast.config.js +7 -17
- package/emotion/cjs/examples/plasma_web/components/Toast/Toast.stories.tsx +14 -31
- package/emotion/es/components/Calendar/CalendarBase/CalendarBase.js +8 -0
- package/emotion/es/components/Calendar/CalendarDouble/CalendarDouble.js +8 -0
- package/emotion/es/components/DatePicker/RangeDate/RangeDate.js +29 -38
- package/emotion/es/components/DatePicker/SingleDate/SingleDate.js +9 -16
- package/emotion/es/components/Toast/Toast.js +2 -5
- package/emotion/es/components/Toast/Toast.styles.js +6 -9
- package/emotion/es/components/Toast/Toast.template-doc.mdx +5 -22
- package/emotion/es/components/Toast/Toast.tokens.js +1 -2
- package/emotion/es/components/Toast/ToastProvider/ToastProvider.js +2 -7
- package/emotion/es/components/Toast/utils.js +0 -1
- package/emotion/es/components/Toast/variations/_pilled/base.js +1 -1
- package/emotion/es/examples/plasma_b2c/components/Toast/Toast.config.js +7 -17
- package/emotion/es/examples/plasma_b2c/components/Toast/Toast.stories.tsx +14 -31
- package/emotion/es/examples/plasma_web/components/Toast/Toast.config.js +7 -17
- package/emotion/es/examples/plasma_web/components/Toast/Toast.stories.tsx +14 -31
- package/es/components/Calendar/CalendarBase/CalendarBase.js +8 -0
- package/es/components/Calendar/CalendarBase/CalendarBase.js.map +1 -1
- package/es/components/Calendar/CalendarDouble/CalendarDouble.js +8 -0
- package/es/components/Calendar/CalendarDouble/CalendarDouble.js.map +1 -1
- package/es/components/DatePicker/RangeDate/RangeDate.js +29 -38
- package/es/components/DatePicker/RangeDate/RangeDate.js.map +1 -1
- package/es/components/DatePicker/SingleDate/SingleDate.js +9 -16
- package/es/components/DatePicker/SingleDate/SingleDate.js.map +1 -1
- package/es/components/Toast/Toast.css +7 -7
- package/es/components/Toast/Toast.js +2 -5
- package/es/components/Toast/Toast.js.map +1 -1
- package/es/components/Toast/Toast.styles.js +2 -11
- package/es/components/Toast/Toast.styles.js.map +1 -1
- package/es/components/Toast/{Toast.styles_1kasmzh.css → Toast.styles_1nei944.css} +2 -2
- package/es/components/Toast/Toast.tokens.js +1 -2
- package/es/components/Toast/Toast.tokens.js.map +1 -1
- package/es/components/Toast/ToastController.css +6 -6
- package/es/components/Toast/ToastProvider/ToastProvider.js +2 -7
- package/es/components/Toast/ToastProvider/ToastProvider.js.map +1 -1
- package/es/components/Toast/utils.js +1 -2
- package/es/components/Toast/utils.js.map +1 -1
- package/es/components/Toast/variations/_pilled/base.js +1 -1
- package/es/components/Toast/variations/_pilled/base.js.map +1 -1
- package/es/components/Toast/variations/_pilled/base_199qghc.css +1 -0
- package/es/index.css +8 -8
- package/package.json +2 -2
- package/styled-components/cjs/components/Calendar/CalendarBase/CalendarBase.js +8 -0
- package/styled-components/cjs/components/Calendar/CalendarDouble/CalendarDouble.js +8 -0
- package/styled-components/cjs/components/DatePicker/RangeDate/RangeDate.js +28 -37
- package/styled-components/cjs/components/DatePicker/SingleDate/SingleDate.js +8 -15
- package/styled-components/cjs/components/Toast/Toast.js +2 -5
- package/styled-components/cjs/components/Toast/Toast.styles.js +2 -5
- package/styled-components/cjs/components/Toast/Toast.template-doc.mdx +5 -22
- package/styled-components/cjs/components/Toast/Toast.tokens.js +1 -2
- package/styled-components/cjs/components/Toast/ToastProvider/ToastProvider.js +1 -6
- package/styled-components/cjs/components/Toast/utils.js +1 -2
- package/styled-components/cjs/components/Toast/variations/_pilled/base.js +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Toast/Toast.config.js +2 -12
- package/styled-components/cjs/examples/plasma_b2c/components/Toast/Toast.stories.tsx +14 -31
- package/styled-components/cjs/examples/plasma_web/components/Toast/Toast.config.js +2 -12
- package/styled-components/cjs/examples/plasma_web/components/Toast/Toast.stories.tsx +14 -31
- package/styled-components/es/components/Calendar/CalendarBase/CalendarBase.js +8 -0
- package/styled-components/es/components/Calendar/CalendarDouble/CalendarDouble.js +8 -0
- package/styled-components/es/components/DatePicker/RangeDate/RangeDate.js +29 -38
- package/styled-components/es/components/DatePicker/SingleDate/SingleDate.js +9 -16
- package/styled-components/es/components/Toast/Toast.js +2 -5
- package/styled-components/es/components/Toast/Toast.styles.js +2 -5
- package/styled-components/es/components/Toast/Toast.template-doc.mdx +5 -22
- package/styled-components/es/components/Toast/Toast.tokens.js +1 -2
- package/styled-components/es/components/Toast/ToastProvider/ToastProvider.js +2 -7
- package/styled-components/es/components/Toast/utils.js +0 -1
- package/styled-components/es/components/Toast/variations/_pilled/base.js +1 -1
- package/styled-components/es/examples/plasma_b2c/components/Toast/Toast.config.js +2 -12
- package/styled-components/es/examples/plasma_b2c/components/Toast/Toast.stories.tsx +14 -31
- package/styled-components/es/examples/plasma_web/components/Toast/Toast.config.js +2 -12
- package/styled-components/es/examples/plasma_web/components/Toast/Toast.stories.tsx +14 -31
- package/types/components/Calendar/CalendarBase/CalendarBase.d.ts.map +1 -1
- package/types/components/Calendar/CalendarDouble/CalendarDouble.d.ts.map +1 -1
- package/types/components/DatePicker/RangeDate/RangeDate.d.ts +2 -0
- package/types/components/DatePicker/RangeDate/RangeDate.d.ts.map +1 -1
- package/types/components/DatePicker/RangeDate/RangeDate.types.d.ts +4 -0
- package/types/components/DatePicker/RangeDate/RangeDate.types.d.ts.map +1 -1
- package/types/components/DatePicker/SingleDate/SingleDate.d.ts +2 -0
- package/types/components/DatePicker/SingleDate/SingleDate.d.ts.map +1 -1
- package/types/components/DatePicker/SingleDate/SingleDate.types.d.ts +4 -0
- package/types/components/DatePicker/SingleDate/SingleDate.types.d.ts.map +1 -1
- package/types/components/Toast/Toast.styles.d.ts +1 -3
- package/types/components/Toast/Toast.styles.d.ts.map +1 -1
- package/types/components/Toast/Toast.tokens.d.ts +1 -2
- package/types/components/Toast/Toast.tokens.d.ts.map +1 -1
- package/types/components/Toast/Toast.types.d.ts +0 -8
- package/types/components/Toast/Toast.types.d.ts.map +1 -1
- package/types/components/Toast/ToastProvider/ToastProvider.d.ts.map +1 -1
- package/types/components/Toast/utils.d.ts +0 -1
- package/types/components/Toast/utils.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/DatePicker/DatePicker.d.ts +2 -0
- package/types/examples/plasma_b2c/components/DatePicker/DatePicker.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Toast/Toast.config.d.ts +0 -10
- package/types/examples/plasma_b2c/components/Toast/Toast.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Toast/Toast.d.ts +0 -2
- package/types/examples/plasma_b2c/components/Toast/Toast.d.ts.map +1 -1
- package/types/examples/plasma_web/components/DatePicker/DatePicker.d.ts +2 -0
- package/types/examples/plasma_web/components/DatePicker/DatePicker.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Toast/Toast.config.d.ts +0 -10
- package/types/examples/plasma_web/components/Toast/Toast.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Toast/Toast.d.ts +0 -2
- package/types/examples/plasma_web/components/Toast/Toast.d.ts.map +1 -1
- package/cjs/components/Toast/variations/_pilled/base_13i59v3.css +0 -1
- package/es/components/Toast/variations/_pilled/base_13i59v3.css +0 -1
@@ -1,4 +1,4 @@
|
|
1
|
-
var _excluded = ["className", "opened", "label", "labelPlacement", "keepPlaceholder", "required", "requiredPlacement", "placeholder", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "view", "size", "readOnly", "disabled", "name", "defaultDate", "valueError", "valueSuccess", "format", "lang", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "frame", "usePortal", "placement", "closeOnOverlayClick", "closeOnEsc", "offset", "onChangeValue", "onCommitDate", "onToggle", "onFocus", "onBlur", "onChange"];
|
1
|
+
var _excluded = ["className", "opened", "value", "label", "labelPlacement", "keepPlaceholder", "required", "requiredPlacement", "placeholder", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "view", "size", "readOnly", "disabled", "name", "defaultDate", "valueError", "valueSuccess", "format", "lang", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "frame", "usePortal", "placement", "closeOnOverlayClick", "closeOnEsc", "offset", "onChangeValue", "onCommitDate", "onToggle", "onFocus", "onBlur", "onChange"];
|
2
2
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
3
3
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
4
4
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
@@ -8,7 +8,7 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
|
|
8
8
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
9
9
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
10
10
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
11
|
-
import React, { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
|
11
|
+
import React, { forwardRef, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
|
12
12
|
import { cx, getPlacements, noop } from '../../../utils';
|
13
13
|
import { formatCalendarValue, formatInputValue, getDateFormatDelimiter } from '../utils/dateHelper';
|
14
14
|
import { useDatePicker } from '../hooks/useDatePicker';
|
@@ -25,6 +25,7 @@ export var datePickerRoot = function datePickerRoot(Root) {
|
|
25
25
|
var className = _ref.className,
|
26
26
|
_ref$opened = _ref.opened,
|
27
27
|
opened = _ref$opened === void 0 ? false : _ref$opened,
|
28
|
+
value = _ref.value,
|
28
29
|
label = _ref.label,
|
29
30
|
_ref$labelPlacement = _ref.labelPlacement,
|
30
31
|
labelPlacement = _ref$labelPlacement === void 0 ? 'outer' : _ref$labelPlacement,
|
@@ -93,12 +94,12 @@ export var datePickerRoot = function datePickerRoot(Root) {
|
|
93
94
|
_useState2 = _slicedToArray(_useState, 2),
|
94
95
|
isInnerOpen = _useState2[0],
|
95
96
|
setIsInnerOpen = _useState2[1];
|
96
|
-
var _useState3 = useState(formatCalendarValue(defaultDate, format, lang)),
|
97
|
+
var _useState3 = useState(formatCalendarValue(value || defaultDate, format, lang)),
|
97
98
|
_useState4 = _slicedToArray(_useState3, 2),
|
98
99
|
calendarValue = _useState4[0],
|
99
100
|
setCalendarValue = _useState4[1];
|
100
101
|
var _useState5 = useState(formatInputValue({
|
101
|
-
value: defaultDate,
|
102
|
+
value: value || defaultDate,
|
102
103
|
format: format,
|
103
104
|
lang: lang
|
104
105
|
})),
|
@@ -180,22 +181,14 @@ export var datePickerRoot = function datePickerRoot(Root) {
|
|
180
181
|
return prevOpen !== opened && opened;
|
181
182
|
});
|
182
183
|
}, [opened]);
|
183
|
-
|
184
|
-
setCalendarValue(formatCalendarValue(defaultDate, format, lang));
|
185
|
-
setInputValue(formatInputValue({
|
186
|
-
value: defaultDate,
|
187
|
-
format: format,
|
188
|
-
lang: lang
|
189
|
-
}));
|
190
|
-
}, [defaultDate]);
|
191
|
-
useEffect(function () {
|
192
|
-
setCalendarValue(formatCalendarValue(defaultDate, format, lang));
|
184
|
+
useLayoutEffect(function () {
|
185
|
+
setCalendarValue(formatCalendarValue(value || defaultDate, format, lang));
|
193
186
|
setInputValue(formatInputValue({
|
194
|
-
value: defaultDate,
|
187
|
+
value: value || defaultDate,
|
195
188
|
format: format,
|
196
189
|
lang: lang
|
197
190
|
}));
|
198
|
-
}, [format, lang]);
|
191
|
+
}, [value, defaultDate, format, lang]);
|
199
192
|
return /*#__PURE__*/React.createElement(Root, _extends({
|
200
193
|
view: view,
|
201
194
|
size: size,
|
@@ -1,5 +1,5 @@
|
|
1
1
|
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
2
|
-
var _excluded = ["role", "width", "text", "hasClose", "contentLeft", "view", "size", "pilled", "className", "style", "closeIconType", "onCloseButtonClick"
|
2
|
+
var _excluded = ["role", "width", "text", "hasClose", "contentLeft", "view", "size", "pilled", "className", "style", "closeIconType", "onCloseButtonClick"];
|
3
3
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
4
4
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
5
5
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
@@ -35,7 +35,6 @@ export var toastRoot = function toastRoot(Root) {
|
|
35
35
|
style = props.style,
|
36
36
|
closeIconType = props.closeIconType,
|
37
37
|
onCloseButtonClick = props.onCloseButtonClick,
|
38
|
-
textColor = props.textColor,
|
39
38
|
rest = _objectWithoutProperties(props, _excluded);
|
40
39
|
var pilledClass = pilled ? classes.toastPilled : undefined;
|
41
40
|
var fixedWidth = !Number.isNaN(Number(width)) ? "".concat(width, "%") : width;
|
@@ -59,9 +58,7 @@ export var toastRoot = function toastRoot(Root) {
|
|
59
58
|
role: role,
|
60
59
|
"aria-live": ariaLive,
|
61
60
|
"aria-atomic": ariaAtomic
|
62
|
-
}, rest), contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft), /*#__PURE__*/React.createElement(StyledContent, {
|
63
|
-
textColor: textColor
|
64
|
-
}, text), hasClose && /*#__PURE__*/React.createElement(CloseIconWrapper, {
|
61
|
+
}, rest), contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft), /*#__PURE__*/React.createElement(StyledContent, null, text), hasClose && /*#__PURE__*/React.createElement(CloseIconWrapper, {
|
65
62
|
view: "clear",
|
66
63
|
size: "s",
|
67
64
|
onClick: onCloseButtonClick,
|
@@ -34,10 +34,7 @@ export var StyledOverlay = /*#__PURE__*/styled(Overlay).withConfig({
|
|
34
34
|
})(["&&.", "{animation:0.3s showFadeAnimation ease-out forwards;}&&.", "{animation:0.3s hideFadeAnimation ease-out forwards;}@keyframes showFadeAnimation{0%{opacity:0;}100%{opacity:1;}}@keyframes hideFadeAnimation{0%{opacity:1;}100%{opacity:0;}}"], /*#__PURE__*/String(classes.toastFadeShowed), /*#__PURE__*/String(classes.toastFadeHidden));
|
35
35
|
export var StyledContentLeft = /*#__PURE__*/styled.div.withConfig({
|
36
36
|
componentId: "plasma-new-hope__sc-19l9ekl-3"
|
37
|
-
})(["display:flex;--plasma_private-content-
|
37
|
+
})(["display:flex;--plasma_private-left-content-margin:var(", ");margin:var(--plasma_private-left-content-margin);"], tokens.leftContentMargin);
|
38
38
|
export var StyledContent = /*#__PURE__*/styled.div.withConfig({
|
39
39
|
componentId: "plasma-new-hope__sc-19l9ekl-4"
|
40
|
-
})(["
|
41
|
-
var textColor = _ref5.textColor;
|
42
|
-
return textColor || 'currentColor';
|
43
|
-
});
|
40
|
+
})([""]);
|
@@ -104,10 +104,6 @@ export interface ShowToastArgs {
|
|
104
104
|
* Время отображения подсказки. Если не передать значение, подсказка будет отображаться пока ее не закроют.
|
105
105
|
*/
|
106
106
|
timeout?: number;
|
107
|
-
/**
|
108
|
-
* Цвет текста (по умолчанию берётся цвет из view)
|
109
|
-
*/
|
110
|
-
textColor?: string;
|
111
107
|
/**
|
112
108
|
* callback срабатывающий в момент события hideToast
|
113
109
|
*/
|
@@ -121,11 +117,9 @@ export interface ShowToastArgs {
|
|
121
117
|
|
122
118
|
## Пример использования
|
123
119
|
|
124
|
-
Для изменения цветовой темы компонента `Toast` используйте свойство `view` компонента `ViewContainer`.
|
125
|
-
|
126
120
|
```jsx live
|
127
121
|
import React from 'react'
|
128
|
-
import { useToast, ToastProvider, Button
|
122
|
+
import { useToast, ToastProvider, Button } from '@salutejs/{{ package }}'
|
129
123
|
|
130
124
|
export function App() {
|
131
125
|
|
@@ -136,13 +130,12 @@ export function App() {
|
|
136
130
|
const onHide = () => {}
|
137
131
|
const toastData = {
|
138
132
|
text: 'Подсказка вызванная showToast',
|
139
|
-
textColor: 'cyan',
|
140
133
|
position: 'bottom',
|
141
134
|
role: 'status',
|
142
135
|
hasClose: true,
|
143
136
|
fade: false,
|
144
137
|
size: 'm',
|
145
|
-
view: '
|
138
|
+
view: 'dark',
|
146
139
|
timeout: 3000,
|
147
140
|
onShow,
|
148
141
|
onHide
|
@@ -152,19 +145,9 @@ export function App() {
|
|
152
145
|
}
|
153
146
|
|
154
147
|
return (
|
155
|
-
<
|
156
|
-
<
|
157
|
-
|
158
|
-
<ToastExample />
|
159
|
-
</ToastProvider>
|
160
|
-
</ViewContainer>
|
161
|
-
|
162
|
-
<ViewContainer view="onDark">
|
163
|
-
<ToastProvider>
|
164
|
-
<ToastExample />
|
165
|
-
</ToastProvider>
|
166
|
-
</ViewContainer>
|
167
|
-
</div>
|
148
|
+
<ToastProvider>
|
149
|
+
<ToastExample />
|
150
|
+
</ToastProvider>
|
168
151
|
)
|
169
152
|
}
|
170
153
|
```
|
@@ -19,8 +19,7 @@ export var tokens = {
|
|
19
19
|
letterSpacing: '--plasma-toast-letter-spacing',
|
20
20
|
lineHeight: '--plasma-toast-lineheight',
|
21
21
|
pilledBorderRadius: '--plasma-toast-pilled-border-radius',
|
22
|
-
|
23
|
-
contentLeftColor: '--plasma-toast-content-left-color',
|
22
|
+
leftContentMargin: '--plasma-toast-left-content-margin',
|
24
23
|
closeIconMargin: '--plasma-toast-close-icon-margin',
|
25
24
|
closeIconColor: '--plasma-toast-close-icon-color',
|
26
25
|
closeIconColorOnHover: '--plasma-toast-close-icon-color-on-hover',
|
@@ -6,7 +6,7 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
|
|
6
6
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
7
7
|
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
8
8
|
import React, { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react';
|
9
|
-
import {
|
9
|
+
import { DEFAULT_FADE, DEFAULT_POSITION, TIMER_DELAY } from '../utils';
|
10
10
|
export var ToastContext = /*#__PURE__*/createContext(null);
|
11
11
|
export var useToastInner = function useToastInner() {
|
12
12
|
var context = useContext(ToastContext);
|
@@ -118,9 +118,6 @@ export var ToastProviderHoc = function ToastProviderHoc(ToastComponent) {
|
|
118
118
|
size = _getShowToastCallSign.size,
|
119
119
|
view = _getShowToastCallSign.view,
|
120
120
|
width = _getShowToastCallSign.width,
|
121
|
-
_getShowToastCallSign4 = _getShowToastCallSign.closeIconType,
|
122
|
-
closeIconType = _getShowToastCallSign4 === void 0 ? DEFAULT_CLOSE_ICON_TYPE : _getShowToastCallSign4,
|
123
|
-
textColor = _getShowToastCallSign.textColor,
|
124
121
|
onHide = _getShowToastCallSign.onHide,
|
125
122
|
onShow = _getShowToastCallSign.onShow;
|
126
123
|
setToastProps({
|
@@ -134,9 +131,7 @@ export var ToastProviderHoc = function ToastProviderHoc(ToastComponent) {
|
|
134
131
|
pilled: pilled,
|
135
132
|
hasClose: hasClose,
|
136
133
|
size: size,
|
137
|
-
view: view
|
138
|
-
closeIconType: closeIconType,
|
139
|
-
textColor: textColor
|
134
|
+
view: view
|
140
135
|
});
|
141
136
|
setToastInfo({
|
142
137
|
timeout: timeout,
|
@@ -2,7 +2,6 @@ import { buttonConfig } from '../Button';
|
|
2
2
|
import { component, mergeConfig } from '../../engines';
|
3
3
|
export var DEFAULT_FADE = true;
|
4
4
|
export var DEFAULT_POSITION = 'bottom';
|
5
|
-
export var DEFAULT_CLOSE_ICON_TYPE = 'default';
|
6
5
|
export var TIMER_DELAY = 300;
|
7
6
|
export var FADE_Z_INDEX = '9900';
|
8
7
|
export var TOAST_Z_INDEX = '9901';
|
@@ -1,3 +1,3 @@
|
|
1
1
|
import { css } from 'styled-components';
|
2
2
|
import { classes, tokens } from '../../Toast.tokens';
|
3
|
-
export var base = /*#__PURE__*/css(["&.", "{--plasma_private-content-
|
3
|
+
export var base = /*#__PURE__*/css(["&.", "{--plasma_private-left-content-margin:var(", ");--plasma_private-close-icon-margin:var(", ");border-radius:var(", ");}"], /*#__PURE__*/String(classes.toastPilled), tokens.leftContentMargin, tokens.closeIconMargin, tokens.pilledBorderRadius);
|
@@ -9,24 +9,14 @@ export var config = {
|
|
9
9
|
variations: {
|
10
10
|
view: {
|
11
11
|
"default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-solid-card-brightness);", ":var(--text-secondary);", ":var(--text-secondary);"], toastTokens.color, toastTokens.background, toastTokens.closeIconColor, toastTokens.closeIconColorOnHover),
|
12
|
-
positive: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-solid-card-brightness);", ":var(--text-positive);", ":var(--text-secondary);", ":var(--text-secondary);"], toastTokens.color, toastTokens.background, toastTokens.contentLeftColor, toastTokens.closeIconColor, toastTokens.closeIconColorOnHover),
|
13
|
-
negative: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-solid-card-brightness);", ":var(--text-negative);", ":var(--text-secondary);", ":var(--text-secondary);"], toastTokens.color, toastTokens.background, toastTokens.contentLeftColor, toastTokens.closeIconColor, toastTokens.closeIconColorOnHover),
|
14
|
-
/**
|
15
|
-
* @deprecated
|
16
|
-
* светлый и темный фон регулировать через `view` компонента `ViewContainer`
|
17
|
-
*/
|
18
12
|
dark: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-surface-solid-primary-brightness);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary);"], toastTokens.color, toastTokens.background, toastTokens.closeIconColor, toastTokens.closeIconColorOnHover),
|
19
|
-
/**
|
20
|
-
* @deprecated
|
21
|
-
* светлый и темный фон регулировать через `view` компонента `ViewContainer`
|
22
|
-
*/
|
23
13
|
light: /*#__PURE__*/css(["", ":var(--on-light-text-primary);", ":var(--on-light-surface-solid-primary-brightness);", ":var(--on-light-text-secondary);", ":var(--on-light-text-secondary);"], toastTokens.color, toastTokens.background, toastTokens.closeIconColor, toastTokens.closeIconColorOnHover)
|
24
14
|
},
|
25
15
|
size: {
|
26
|
-
m: /*#__PURE__*/css(["", ":0.75rem;", ":calc(100vw - 5rem);", ":0.5625rem 0.75rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.0625rem 0.375rem -0.0625rem -0.125rem;", ":-0.0625rem -0.25rem -0.0625rem 0.5rem;"], toastTokens.borderRadius, toastTokens.maxWidth, toastTokens.padding, toastTokens.fontFamily, toastTokens.fontSize, toastTokens.fontStyle, toastTokens.fontWeight, toastTokens.letterSpacing, toastTokens.lineHeight, toastTokens.
|
16
|
+
m: /*#__PURE__*/css(["", ":0.75rem;", ":calc(100vw - 5rem);", ":0.5625rem 0.75rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.0625rem 0.375rem -0.0625rem -0.125rem;", ":-0.0625rem -0.25rem -0.0625rem 0.5rem;"], toastTokens.borderRadius, toastTokens.maxWidth, toastTokens.padding, toastTokens.fontFamily, toastTokens.fontSize, toastTokens.fontStyle, toastTokens.fontWeight, toastTokens.letterSpacing, toastTokens.lineHeight, toastTokens.leftContentMargin, toastTokens.closeIconMargin)
|
27
17
|
},
|
28
18
|
pilled: {
|
29
|
-
"true": /*#__PURE__*/css(["", ":1.5rem;", ":-0.0625rem 0.375rem -0.0625rem -0.25rem;", ":-0.0625rem -0.25rem -0.0625rem 0.375rem;"], toastTokens.pilledBorderRadius, toastTokens.
|
19
|
+
"true": /*#__PURE__*/css(["", ":1.5rem;", ":-0.0625rem 0.375rem -0.0625rem -0.25rem;", ":-0.0625rem -0.25rem -0.0625rem 0.375rem;"], toastTokens.pilledBorderRadius, toastTokens.leftContentMargin, toastTokens.closeIconMargin)
|
30
20
|
},
|
31
21
|
closeIconType: {
|
32
22
|
"default": /*#__PURE__*/css(["", ":1rem;", ":1.5rem;"], toastTokens.closeIconButtonSize, toastTokens.closeIconSize),
|
@@ -4,39 +4,21 @@ import { action } from '@storybook/addon-actions';
|
|
4
4
|
import styled from 'styled-components';
|
5
5
|
import { disableProps } from '@salutejs/plasma-sb-utils';
|
6
6
|
|
7
|
-
import {
|
7
|
+
import { toastConfig } from '../../../../components/Toast';
|
8
|
+
import { mergeConfig } from '../../../../engines';
|
9
|
+
import { WithTheme, argTypesFromConfig } from '../../../_helpers';
|
8
10
|
import { Button } from '../Button/Button';
|
9
11
|
import { PopupProvider } from '../Popup/Popup';
|
10
12
|
import { addNotification } from '../../../../../src/components/Notification';
|
11
13
|
import { NotificationsProvider } from '../Notification/Notification';
|
12
14
|
import { Modal } from '../Modal/Modal';
|
13
15
|
|
16
|
+
import { config } from './Toast.config';
|
14
17
|
import { Toast, ToastController, ToastProvider, useToast } from './Toast';
|
15
18
|
|
16
|
-
const views = ['default', 'positive', 'negative'];
|
17
|
-
const closeIconTypes = ['default', 'thin'];
|
18
|
-
|
19
19
|
const meta: Meta<typeof ToastController> = {
|
20
20
|
title: 'b2c/Overlay/Toast',
|
21
21
|
decorators: [WithTheme],
|
22
|
-
argTypes: {
|
23
|
-
view: {
|
24
|
-
options: views,
|
25
|
-
control: {
|
26
|
-
type: 'select',
|
27
|
-
},
|
28
|
-
},
|
29
|
-
closeIconType: {
|
30
|
-
options: closeIconTypes,
|
31
|
-
control: {
|
32
|
-
type: 'select',
|
33
|
-
},
|
34
|
-
},
|
35
|
-
textColor: {
|
36
|
-
control: 'color',
|
37
|
-
},
|
38
|
-
...disableProps(['size']),
|
39
|
-
},
|
40
22
|
};
|
41
23
|
|
42
24
|
export default meta;
|
@@ -67,6 +49,7 @@ const StyledWrapper = styled.div`
|
|
67
49
|
`;
|
68
50
|
|
69
51
|
const ToastContainer = styled.div`
|
52
|
+
position: fixed;
|
70
53
|
transform: translateX(50%);
|
71
54
|
`;
|
72
55
|
|
@@ -78,7 +61,6 @@ const Container = styled.div`
|
|
78
61
|
export const ToastComponent: StoryComponent = {
|
79
62
|
args: {
|
80
63
|
text: 'Текст всплывающего уведомления',
|
81
|
-
textColor: undefined,
|
82
64
|
view: 'default',
|
83
65
|
closeIconType: 'default',
|
84
66
|
size: 'm',
|
@@ -86,6 +68,14 @@ export const ToastComponent: StoryComponent = {
|
|
86
68
|
enableContentLeft: true,
|
87
69
|
pilled: false,
|
88
70
|
},
|
71
|
+
argTypes: {
|
72
|
+
closeIconType: {
|
73
|
+
options: ['default', 'thin'],
|
74
|
+
control: {
|
75
|
+
type: 'select',
|
76
|
+
},
|
77
|
+
},
|
78
|
+
},
|
89
79
|
render: ({ enableContentLeft, ...args }) => (
|
90
80
|
<ToastContainer>
|
91
81
|
<Toast contentLeft={enableContentLeft && <BellIcon width="1rem" height="1rem" />} {...args} />
|
@@ -104,8 +94,6 @@ const StoryLiveDemo = ({
|
|
104
94
|
size,
|
105
95
|
hasClose,
|
106
96
|
enableContentLeft,
|
107
|
-
closeIconType,
|
108
|
-
textColor,
|
109
97
|
}: StoryProps) => {
|
110
98
|
const { showToast, hideToast } = useToast();
|
111
99
|
const contentLeft = enableContentLeft && <BellIcon width="1rem" height="1rem" />;
|
@@ -126,8 +114,6 @@ const StoryLiveDemo = ({
|
|
126
114
|
view,
|
127
115
|
size,
|
128
116
|
hasClose,
|
129
|
-
closeIconType,
|
130
|
-
textColor,
|
131
117
|
onHide: action('onHide'),
|
132
118
|
onShow: action('onShow'),
|
133
119
|
});
|
@@ -155,6 +141,7 @@ export const LiveDemo: Story = {
|
|
155
141
|
type: 'inline-radio',
|
156
142
|
},
|
157
143
|
},
|
144
|
+
...argTypesFromConfig(mergeConfig(toastConfig, config)),
|
158
145
|
...disableProps(['role', 'onShow', 'onHide', 'contentLeft']),
|
159
146
|
},
|
160
147
|
parameters: {
|
@@ -180,8 +167,6 @@ const StoryComplex = ({
|
|
180
167
|
size,
|
181
168
|
hasClose,
|
182
169
|
enableContentLeft,
|
183
|
-
closeIconType,
|
184
|
-
textColor,
|
185
170
|
}: StoryProps) => {
|
186
171
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
187
172
|
|
@@ -200,8 +185,6 @@ const StoryComplex = ({
|
|
200
185
|
view,
|
201
186
|
size,
|
202
187
|
hasClose,
|
203
|
-
closeIconType,
|
204
|
-
textColor,
|
205
188
|
onHide: action('onHide'),
|
206
189
|
onShow: action('onShow'),
|
207
190
|
});
|
@@ -9,24 +9,14 @@ export var config = {
|
|
9
9
|
variations: {
|
10
10
|
view: {
|
11
11
|
"default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-solid-card-brightness);", ":var(--text-secondary);", ":var(--text-secondary);"], toastTokens.color, toastTokens.background, toastTokens.closeIconColor, toastTokens.closeIconColorOnHover),
|
12
|
-
positive: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-solid-card-brightness);", ":var(--text-positive);", ":var(--text-secondary);", ":var(--text-secondary);"], toastTokens.color, toastTokens.background, toastTokens.contentLeftColor, toastTokens.closeIconColor, toastTokens.closeIconColorOnHover),
|
13
|
-
negative: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-solid-card-brightness);", ":var(--text-negative);", ":var(--text-secondary);", ":var(--text-secondary);"], toastTokens.color, toastTokens.background, toastTokens.contentLeftColor, toastTokens.closeIconColor, toastTokens.closeIconColorOnHover),
|
14
|
-
/**
|
15
|
-
* @deprecated
|
16
|
-
* светлый и темный фон регулировать через `view` компонента `ViewContainer`
|
17
|
-
*/
|
18
12
|
dark: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-surface-solid-primary-brightness);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary);"], toastTokens.color, toastTokens.background, toastTokens.closeIconColor, toastTokens.closeIconColorOnHover),
|
19
|
-
/**
|
20
|
-
* @deprecated
|
21
|
-
* светлый и темный фон регулировать через `view` компонента `ViewContainer`
|
22
|
-
*/
|
23
13
|
light: /*#__PURE__*/css(["", ":var(--on-light-text-primary);", ":var(--on-light-surface-solid-primary-brightness);", ":var(--on-light-text-secondary);", ":var(--on-light-text-secondary);"], toastTokens.color, toastTokens.background, toastTokens.closeIconColor, toastTokens.closeIconColorOnHover)
|
24
14
|
},
|
25
15
|
size: {
|
26
|
-
m: /*#__PURE__*/css(["", ":0.75rem;", ":calc(100vw - 5rem);", ":0.5625rem 0.75rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.0625rem 0.375rem -0.0625rem -0.125rem;", ":-0.0625rem -0.25rem -0.0625rem 0.5rem;"], toastTokens.borderRadius, toastTokens.maxWidth, toastTokens.padding, toastTokens.fontFamily, toastTokens.fontSize, toastTokens.fontStyle, toastTokens.fontWeight, toastTokens.letterSpacing, toastTokens.lineHeight, toastTokens.
|
16
|
+
m: /*#__PURE__*/css(["", ":0.75rem;", ":calc(100vw - 5rem);", ":0.5625rem 0.75rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.0625rem 0.375rem -0.0625rem -0.125rem;", ":-0.0625rem -0.25rem -0.0625rem 0.5rem;"], toastTokens.borderRadius, toastTokens.maxWidth, toastTokens.padding, toastTokens.fontFamily, toastTokens.fontSize, toastTokens.fontStyle, toastTokens.fontWeight, toastTokens.letterSpacing, toastTokens.lineHeight, toastTokens.leftContentMargin, toastTokens.closeIconMargin)
|
27
17
|
},
|
28
18
|
pilled: {
|
29
|
-
"true": /*#__PURE__*/css(["", ":1.5rem;", ":-0.0625rem 0.375rem -0.0625rem -0.25rem;", ":-0.0625rem -0.25rem -0.0625rem 0.375rem;"], toastTokens.pilledBorderRadius, toastTokens.
|
19
|
+
"true": /*#__PURE__*/css(["", ":1.5rem;", ":-0.0625rem 0.375rem -0.0625rem -0.25rem;", ":-0.0625rem -0.25rem -0.0625rem 0.375rem;"], toastTokens.pilledBorderRadius, toastTokens.leftContentMargin, toastTokens.closeIconMargin)
|
30
20
|
},
|
31
21
|
closeIconType: {
|
32
22
|
"default": /*#__PURE__*/css(["", ":1rem;", ":1.5rem;"], toastTokens.closeIconButtonSize, toastTokens.closeIconSize),
|
@@ -4,39 +4,21 @@ import { action } from '@storybook/addon-actions';
|
|
4
4
|
import styled from 'styled-components';
|
5
5
|
import { disableProps } from '@salutejs/plasma-sb-utils';
|
6
6
|
|
7
|
-
import {
|
7
|
+
import { toastConfig } from '../../../../components/Toast';
|
8
|
+
import { mergeConfig } from '../../../../engines';
|
9
|
+
import { WithTheme, argTypesFromConfig } from '../../../_helpers';
|
8
10
|
import { Button } from '../Button/Button';
|
9
11
|
import { PopupProvider } from '../Popup/Popup';
|
10
12
|
import { addNotification } from '../../../../../src/components/Notification';
|
11
13
|
import { NotificationsProvider } from '../Notification/Notification';
|
12
14
|
import { Modal } from '../Modal/Modal';
|
13
15
|
|
16
|
+
import { config } from './Toast.config';
|
14
17
|
import { Toast, ToastController, ToastProvider, useToast } from './Toast';
|
15
18
|
|
16
|
-
const views = ['default', 'positive', 'negative'];
|
17
|
-
const closeIconTypes = ['default', 'thin'];
|
18
|
-
|
19
19
|
const meta: Meta<typeof ToastController> = {
|
20
20
|
title: 'web/Overlay/Toast',
|
21
21
|
decorators: [WithTheme],
|
22
|
-
argTypes: {
|
23
|
-
view: {
|
24
|
-
options: views,
|
25
|
-
control: {
|
26
|
-
type: 'select',
|
27
|
-
},
|
28
|
-
},
|
29
|
-
closeIconType: {
|
30
|
-
options: closeIconTypes,
|
31
|
-
control: {
|
32
|
-
type: 'select',
|
33
|
-
},
|
34
|
-
},
|
35
|
-
textColor: {
|
36
|
-
control: 'color',
|
37
|
-
},
|
38
|
-
...disableProps(['size']),
|
39
|
-
},
|
40
22
|
};
|
41
23
|
|
42
24
|
export default meta;
|
@@ -67,6 +49,7 @@ const StyledWrapper = styled.div`
|
|
67
49
|
`;
|
68
50
|
|
69
51
|
const ToastContainer = styled.div`
|
52
|
+
position: fixed;
|
70
53
|
transform: translateX(50%);
|
71
54
|
`;
|
72
55
|
|
@@ -78,7 +61,6 @@ const Container = styled.div`
|
|
78
61
|
export const ToastComponent: StoryComponent = {
|
79
62
|
args: {
|
80
63
|
text: 'Текст всплывающего уведомления',
|
81
|
-
textColor: undefined,
|
82
64
|
view: 'default',
|
83
65
|
closeIconType: 'default',
|
84
66
|
size: 'm',
|
@@ -86,6 +68,14 @@ export const ToastComponent: StoryComponent = {
|
|
86
68
|
enableContentLeft: true,
|
87
69
|
pilled: false,
|
88
70
|
},
|
71
|
+
argTypes: {
|
72
|
+
closeIconType: {
|
73
|
+
options: ['default', 'thin'],
|
74
|
+
control: {
|
75
|
+
type: 'select',
|
76
|
+
},
|
77
|
+
},
|
78
|
+
},
|
89
79
|
render: ({ enableContentLeft, ...args }) => (
|
90
80
|
<ToastContainer>
|
91
81
|
<Toast contentLeft={enableContentLeft && <BellIcon width="1rem" height="1rem" />} {...args} />
|
@@ -104,8 +94,6 @@ const StoryLiveDemo = ({
|
|
104
94
|
size,
|
105
95
|
hasClose,
|
106
96
|
enableContentLeft,
|
107
|
-
closeIconType,
|
108
|
-
textColor,
|
109
97
|
}: StoryProps) => {
|
110
98
|
const { showToast, hideToast } = useToast();
|
111
99
|
const contentLeft = enableContentLeft && <BellIcon width="1rem" height="1rem" />;
|
@@ -126,8 +114,6 @@ const StoryLiveDemo = ({
|
|
126
114
|
view,
|
127
115
|
size,
|
128
116
|
hasClose,
|
129
|
-
closeIconType,
|
130
|
-
textColor,
|
131
117
|
onHide: action('onHide'),
|
132
118
|
onShow: action('onShow'),
|
133
119
|
});
|
@@ -155,6 +141,7 @@ export const LiveDemo: Story = {
|
|
155
141
|
type: 'inline-radio',
|
156
142
|
},
|
157
143
|
},
|
144
|
+
...argTypesFromConfig(mergeConfig(toastConfig, config)),
|
158
145
|
...disableProps(['role', 'onShow', 'onHide', 'contentLeft']),
|
159
146
|
},
|
160
147
|
parameters: {
|
@@ -180,8 +167,6 @@ const StoryComplex = ({
|
|
180
167
|
size,
|
181
168
|
hasClose,
|
182
169
|
enableContentLeft,
|
183
|
-
closeIconType,
|
184
|
-
textColor,
|
185
170
|
}: StoryProps) => {
|
186
171
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
187
172
|
|
@@ -200,8 +185,6 @@ const StoryComplex = ({
|
|
200
185
|
view,
|
201
186
|
size,
|
202
187
|
hasClose,
|
203
|
-
closeIconType,
|
204
|
-
textColor,
|
205
188
|
onHide: action('onHide'),
|
206
189
|
onShow: action('onShow'),
|
207
190
|
});
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"CalendarBase.d.ts","sourceRoot":"","sources":["../../../../src/components/Calendar/CalendarBase/CalendarBase.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAMV,cAAc,EAGjB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,QAAQ,EAAE,mBAAmB,EAAc,MAAM,mBAAmB,CAAC;AAMnF,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAM7C,oBAAY,iBAAiB,GAAG,QAAQ,GAAG,mBAAmB,CAAC;AAE/D;;GAEG;AACH,eAAO,MAAM,gBAAgB,SAAU,UAAU,cAAc,EAAE,eAAe,cAAc,CAAC,CAAC,
|
1
|
+
{"version":3,"file":"CalendarBase.d.ts","sourceRoot":"","sources":["../../../../src/components/Calendar/CalendarBase/CalendarBase.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAMV,cAAc,EAGjB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,QAAQ,EAAE,mBAAmB,EAAc,MAAM,mBAAmB,CAAC;AAMnF,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAM7C,oBAAY,iBAAiB,GAAG,QAAQ,GAAG,mBAAmB,CAAC;AAE/D;;GAEG;AACH,eAAO,MAAM,gBAAgB,SAAU,UAAU,cAAc,EAAE,eAAe,cAAc,CAAC,CAAC,0GA0M3F,CAAC;AAEN,eAAO,MAAM,kBAAkB;;;mBA5MQ,UAAU,cAAc,EAAE,eAAe,cAAc,CAAC,CAAC;;;;;;;;;;;;;;CA6N/F,CAAC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"CalendarDouble.d.ts","sourceRoot":"","sources":["../../../../src/components/Calendar/CalendarDouble/CalendarDouble.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAKV,cAAc,EAIjB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,QAAQ,EAAE,mBAAmB,EAAc,MAAM,mBAAmB,CAAC;AAInF,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAQnD,oBAAY,mBAAmB,GAAG,QAAQ,GAAG,mBAAmB,CAAC;AAEjE;;GAEG;AACH,eAAO,MAAM,kBAAkB,SAAU,UAAU,cAAc,EAAE,eAAe,cAAc,CAAC,CAAC,
|
1
|
+
{"version":3,"file":"CalendarDouble.d.ts","sourceRoot":"","sources":["../../../../src/components/Calendar/CalendarDouble/CalendarDouble.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAKV,cAAc,EAIjB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,QAAQ,EAAE,mBAAmB,EAAc,MAAM,mBAAmB,CAAC;AAInF,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAQnD,oBAAY,mBAAmB,GAAG,QAAQ,GAAG,mBAAmB,CAAC;AAEjE;;GAEG;AACH,eAAO,MAAM,kBAAkB,SAAU,UAAU,cAAc,EAAE,eAAe,cAAc,CAAC,CAAC,0GAqV7F,CAAC;AAEN,eAAO,MAAM,oBAAoB;;;mBAvVQ,UAAU,cAAc,EAAE,eAAe,cAAc,CAAC,CAAC;;;;;;;;;;;CAqWjG,CAAC"}
|
@@ -5,6 +5,7 @@ import type { DatePickerRangeProps } from './RangeDate.types';
|
|
5
5
|
export declare const datePickerRangeRoot: (Root: RootProps<HTMLDivElement, Omit<DatePickerRangeProps, 'opened' | 'defaultValue' | 'onChangeValue'>>) => React.ForwardRefExoticComponent<import("../DatePickerBase.types").DatePickerVariationProps & {
|
6
6
|
requiredPlacement?: "left" | "right" | undefined;
|
7
7
|
required?: boolean | undefined;
|
8
|
+
value?: [Date | null | undefined, Date | null | undefined] | undefined;
|
8
9
|
defaultFirstDate?: Date | undefined;
|
9
10
|
defaultSecondDate?: Date | undefined;
|
10
11
|
name?: string | undefined;
|
@@ -61,6 +62,7 @@ export declare const datePickerRangeConfig: {
|
|
61
62
|
layout: (Root: RootProps<HTMLDivElement, Omit<DatePickerRangeProps, 'opened' | 'defaultValue' | 'onChangeValue'>>) => React.ForwardRefExoticComponent<import("../DatePickerBase.types").DatePickerVariationProps & {
|
62
63
|
requiredPlacement?: "left" | "right" | undefined;
|
63
64
|
required?: boolean | undefined;
|
65
|
+
value?: [Date | null | undefined, Date | null | undefined] | undefined;
|
64
66
|
defaultFirstDate?: Date | undefined;
|
65
67
|
defaultSecondDate?: Date | undefined;
|
66
68
|
name?: string | undefined;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"RangeDate.d.ts","sourceRoot":"","sources":["../../../../src/components/DatePicker/RangeDate/RangeDate.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
1
|
+
{"version":3,"file":"RangeDate.d.ts","sourceRoot":"","sources":["../../../../src/components/DatePicker/RangeDate/RangeDate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2F,MAAM,OAAO,CAAC;AAWhH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAIlD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAO9D,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAQ9D,eAAO,MAAM,mBAAmB,SACtB,UAAU,cAAc,EAAE,KAAK,oBAAoB,EAAE,QAAQ,GAAG,cAAc,GAAG,eAAe,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+EAidvG,CAAC;AAEN,eAAO,MAAM,qBAAqB;;;mBAndxB,UAAU,cAAc,EAAE,KAAK,oBAAoB,EAAE,QAAQ,GAAG,cAAc,GAAG,eAAe,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4e3G,CAAC"}
|
@@ -19,6 +19,10 @@ export declare type DatePickerRangeFieldProps = {
|
|
19
19
|
* Флаг обязательности поля
|
20
20
|
*/
|
21
21
|
required?: boolean;
|
22
|
+
/**
|
23
|
+
* Выбранные значения.
|
24
|
+
*/
|
25
|
+
value?: [Date | null | undefined, Date | null | undefined];
|
22
26
|
/**
|
23
27
|
* Значение по умолчанию для первого поля.
|
24
28
|
*/
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"RangeDate.types.d.ts","sourceRoot":"","sources":["../../../../src/components/DatePicker/RangeDate/RangeDate.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEzD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,KAAK,EAAE,uBAAuB,EAAE,wBAAwB,EAAE,MAAM,yBAAyB,CAAC;AACjG,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAC7E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AAE9D,oBAAY,6BAA6B,GAAG,KAAK,GAAG,QAAQ,CAAC;AAC7D,oBAAY,iCAAiC,GAAG,WAAW,GAAG,SAAS,GAAG,cAAc,GAAG,YAAY,CAAC;AACxG,oBAAY,wBAAwB,GAAG,6BAA6B,GAAG,iCAAiC,CAAC;AAEzG,oBAAY,sBAAsB,GAAG,CAAC,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,GAAG,IAAI,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;AAC3G,oBAAY,sBAAsB,GAAG,CACjC,KAAK,EAAE,IAAI,GAAG,MAAM,EACpB,KAAK,CAAC,EAAE,OAAO,EACf,OAAO,CAAC,EAAE,OAAO,EACjB,QAAQ,CAAC,EAAE,QAAQ,KAClB,IAAI,CAAC;AAEV,aAAK,cAAc,GAAG,IAAI,CACtB,eAAe,EACb,YAAY,GACZ,aAAa,GACb,oBAAoB,GACpB,qBAAqB,GACrB,oBAAoB,GACpB,qBAAqB,CAC1B,CAAC;AAEF,oBAAY,yBAAyB,GAAG;IACpC;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACrC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,gBAAgB,CAAC,EAAE,IAAI,CAAC;IACxB;;OAEG;IACH,iBAAiB,CAAC,EAAE,IAAI,CAAC;IACzB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,kBAAkB,CAAC,EAAE,sBAAsB,CAAC;IAC5C;;OAEG;IACH,mBAAmB,CAAC,EAAE,sBAAsB,CAAC;IAC7C;;OAEG;IACH,iBAAiB,CAAC,EAAE,sBAAsB,CAAC;IAC3C;;OAEG;IACH,kBAAkB,CAAC,EAAE,sBAAsB,CAAC;IAC5C;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,MAAM,EAAE;YAAE,KAAK,CAAC,EAAE,MAAM,CAAC;YAAC,IAAI,CAAC,EAAE,MAAM,CAAA;SAAE,CAAA;KAAE,KAAK,IAAI,CAAC;CAC7E,GAAG,cAAc,CAAC;AAEnB,oBAAY,4BAA4B,GAAG,IAAI,CAAC,sBAAsB,EAAE,WAAW,CAAC,GAAG;IACnF;;;;OAIG;IACH,SAAS,CAAC,EAAE,wBAAwB,GAAG,KAAK,CAAC,6BAA6B,CAAC,CAAC;IAC5E;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAClC,CAAC;AAEF,oBAAY,oBAAoB,GAAG,wBAAwB,GACvD,yBAAyB,GACzB,uBAAuB,GACvB,4BAA4B,GAC5B,cAAc,CAAC,cAAc,CAAC,CAAC"}
|
1
|
+
{"version":3,"file":"RangeDate.types.d.ts","sourceRoot":"","sources":["../../../../src/components/DatePicker/RangeDate/RangeDate.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEzD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,KAAK,EAAE,uBAAuB,EAAE,wBAAwB,EAAE,MAAM,yBAAyB,CAAC;AACjG,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAC7E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AAE9D,oBAAY,6BAA6B,GAAG,KAAK,GAAG,QAAQ,CAAC;AAC7D,oBAAY,iCAAiC,GAAG,WAAW,GAAG,SAAS,GAAG,cAAc,GAAG,YAAY,CAAC;AACxG,oBAAY,wBAAwB,GAAG,6BAA6B,GAAG,iCAAiC,CAAC;AAEzG,oBAAY,sBAAsB,GAAG,CAAC,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,GAAG,IAAI,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;AAC3G,oBAAY,sBAAsB,GAAG,CACjC,KAAK,EAAE,IAAI,GAAG,MAAM,EACpB,KAAK,CAAC,EAAE,OAAO,EACf,OAAO,CAAC,EAAE,OAAO,EACjB,QAAQ,CAAC,EAAE,QAAQ,KAClB,IAAI,CAAC;AAEV,aAAK,cAAc,GAAG,IAAI,CACtB,eAAe,EACb,YAAY,GACZ,aAAa,GACb,oBAAoB,GACpB,qBAAqB,GACrB,oBAAoB,GACpB,qBAAqB,CAC1B,CAAC;AAEF,oBAAY,yBAAyB,GAAG;IACpC;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACrC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,CAAC,IAAI,GAAG,IAAI,GAAG,SAAS,EAAE,IAAI,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IAC3D;;OAEG;IACH,gBAAgB,CAAC,EAAE,IAAI,CAAC;IACxB;;OAEG;IACH,iBAAiB,CAAC,EAAE,IAAI,CAAC;IACzB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,kBAAkB,CAAC,EAAE,sBAAsB,CAAC;IAC5C;;OAEG;IACH,mBAAmB,CAAC,EAAE,sBAAsB,CAAC;IAC7C;;OAEG;IACH,iBAAiB,CAAC,EAAE,sBAAsB,CAAC;IAC3C;;OAEG;IACH,kBAAkB,CAAC,EAAE,sBAAsB,CAAC;IAC5C;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,MAAM,EAAE;YAAE,KAAK,CAAC,EAAE,MAAM,CAAC;YAAC,IAAI,CAAC,EAAE,MAAM,CAAA;SAAE,CAAA;KAAE,KAAK,IAAI,CAAC;CAC7E,GAAG,cAAc,CAAC;AAEnB,oBAAY,4BAA4B,GAAG,IAAI,CAAC,sBAAsB,EAAE,WAAW,CAAC,GAAG;IACnF;;;;OAIG;IACH,SAAS,CAAC,EAAE,wBAAwB,GAAG,KAAK,CAAC,6BAA6B,CAAC,CAAC;IAC5E;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAClC,CAAC;AAEF,oBAAY,oBAAoB,GAAG,wBAAwB,GACvD,yBAAyB,GACzB,uBAAuB,GACvB,4BAA4B,GAC5B,cAAc,CAAC,cAAc,CAAC,CAAC"}
|
@@ -4,6 +4,7 @@ import type { DatePickerProps } from './SingleDate.types';
|
|
4
4
|
export declare const datePickerRoot: (Root: RootProps<HTMLDivElement, Omit<DatePickerProps, 'opened' | 'defaultValue' | 'onChangeValue'>>) => React.ForwardRefExoticComponent<import("../DatePickerBase.types").DatePickerVariationProps & {
|
5
5
|
requiredPlacement?: "left" | "right" | undefined;
|
6
6
|
required?: boolean | undefined;
|
7
|
+
value?: Date | null | undefined;
|
7
8
|
defaultDate?: Date | undefined;
|
8
9
|
placeholder?: string | undefined;
|
9
10
|
name?: string | undefined;
|
@@ -29,6 +30,7 @@ export declare const datePickerConfig: {
|
|
29
30
|
layout: (Root: RootProps<HTMLDivElement, Omit<DatePickerProps, 'opened' | 'defaultValue' | 'onChangeValue'>>) => React.ForwardRefExoticComponent<import("../DatePickerBase.types").DatePickerVariationProps & {
|
30
31
|
requiredPlacement?: "left" | "right" | undefined;
|
31
32
|
required?: boolean | undefined;
|
33
|
+
value?: Date | null | undefined;
|
32
34
|
defaultDate?: Date | undefined;
|
33
35
|
placeholder?: string | undefined;
|
34
36
|
name?: string | undefined;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"SingleDate.d.ts","sourceRoot":"","sources":["../../../../src/components/DatePicker/SingleDate/SingleDate.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
1
|
+
{"version":3,"file":"SingleDate.d.ts","sourceRoot":"","sources":["../../../../src/components/DatePicker/SingleDate/SingleDate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgG,MAAM,OAAO,CAAC;AAGrH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAQlD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAO1D,eAAO,MAAM,cAAc,SACjB,UAAU,cAAc,EAAE,KAAK,eAAe,EAAE,QAAQ,GAAG,cAAc,GAAG,eAAe,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;gRA8NlG,CAAC;AAEN,eAAO,MAAM,gBAAgB;;;mBAhOnB,UAAU,cAAc,EAAE,KAAK,eAAe,EAAE,QAAQ,GAAG,cAAc,GAAG,eAAe,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyPtG,CAAC"}
|