@salutejs/plasma-new-hope 0.249.0-canary.1719.13031725630.0 → 0.249.0-canary.1720.13031638569.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 +57 -36
- package/cjs/components/DatePicker/RangeDate/RangeDate.js.map +1 -1
- package/cjs/components/DatePicker/SingleDate/SingleDate.js +31 -16
- 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 +57 -36
- package/emotion/cjs/components/DatePicker/SingleDate/SingleDate.js +31 -16
- 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 +59 -38
- package/emotion/es/components/DatePicker/SingleDate/SingleDate.js +33 -18
- 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 +59 -38
- package/es/components/DatePicker/RangeDate/RangeDate.js.map +1 -1
- package/es/components/DatePicker/SingleDate/SingleDate.js +33 -18
- 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 +57 -36
- package/styled-components/cjs/components/DatePicker/SingleDate/SingleDate.js +31 -16
- 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 +59 -38
- package/styled-components/es/components/DatePicker/SingleDate/SingleDate.js +33 -18
- 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
@@ -17,7 +17,7 @@ var _base2 = /*#__PURE__*/require("./variations/_view/base");
|
|
17
17
|
var _base3 = /*#__PURE__*/require("./variations/_disabled/base");
|
18
18
|
var _base4 = /*#__PURE__*/require("./variations/_readonly/base");
|
19
19
|
var _SingleDate = /*#__PURE__*/require("./SingleDate.styles");
|
20
|
-
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"];
|
20
|
+
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"];
|
21
21
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
22
22
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
23
23
|
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); }
|
@@ -34,6 +34,7 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
|
|
34
34
|
var className = _ref.className,
|
35
35
|
_ref$opened = _ref.opened,
|
36
36
|
opened = _ref$opened === void 0 ? false : _ref$opened,
|
37
|
+
value = _ref.value,
|
37
38
|
label = _ref.label,
|
38
39
|
_ref$labelPlacement = _ref.labelPlacement,
|
39
40
|
labelPlacement = _ref$labelPlacement === void 0 ? 'outer' : _ref$labelPlacement,
|
@@ -102,12 +103,12 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
|
|
102
103
|
_useState2 = _slicedToArray(_useState, 2),
|
103
104
|
isInnerOpen = _useState2[0],
|
104
105
|
setIsInnerOpen = _useState2[1];
|
105
|
-
var _useState3 = (0, _react.useState)((0, _dateHelper.formatCalendarValue)(defaultDate, format, lang)),
|
106
|
+
var _useState3 = (0, _react.useState)((0, _dateHelper.formatCalendarValue)(value || defaultDate, format, lang)),
|
106
107
|
_useState4 = _slicedToArray(_useState3, 2),
|
107
108
|
calendarValue = _useState4[0],
|
108
109
|
setCalendarValue = _useState4[1];
|
109
110
|
var _useState5 = (0, _react.useState)((0, _dateHelper.formatInputValue)({
|
110
|
-
value: defaultDate,
|
111
|
+
value: value || defaultDate,
|
111
112
|
format: format,
|
112
113
|
lang: lang
|
113
114
|
})),
|
@@ -138,6 +139,12 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
|
|
138
139
|
datePickerSuccessClass = _useDatePicker.datePickerSuccessClass,
|
139
140
|
handleChangeValue = _useDatePicker.handleChangeValue,
|
140
141
|
handleCommitDate = _useDatePicker.handleCommitDate;
|
142
|
+
var handleBlur = function handleBlur(event, date) {
|
143
|
+
if (onBlur) {
|
144
|
+
onBlur(event);
|
145
|
+
}
|
146
|
+
handleCommitDate(date, true, false);
|
147
|
+
};
|
141
148
|
var handleToggle = function handleToggle(opened, event) {
|
142
149
|
if (disabled || readOnly) {
|
143
150
|
return;
|
@@ -176,7 +183,9 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
|
|
176
183
|
return handleCommitDate(date, true, false);
|
177
184
|
},
|
178
185
|
onFocus: onFocus,
|
179
|
-
onBlur: onBlur
|
186
|
+
onBlur: function onBlur(event) {
|
187
|
+
return handleBlur(event, inputValue);
|
188
|
+
},
|
180
189
|
onKeyDown: onKeyDown,
|
181
190
|
required: required,
|
182
191
|
requiredPlacement: requiredPlacement,
|
@@ -189,22 +198,28 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
|
|
189
198
|
return prevOpen !== opened && opened;
|
190
199
|
});
|
191
200
|
}, [opened]);
|
192
|
-
(0, _react.
|
193
|
-
setCalendarValue((0, _dateHelper.formatCalendarValue)(defaultDate, format, lang));
|
194
|
-
setInputValue((0, _dateHelper.formatInputValue)({
|
195
|
-
value: defaultDate,
|
196
|
-
format: format,
|
197
|
-
lang: lang
|
198
|
-
}));
|
199
|
-
}, [defaultDate]);
|
200
|
-
(0, _react.useEffect)(function () {
|
201
|
-
setCalendarValue((0, _dateHelper.formatCalendarValue)(defaultDate, format, lang));
|
201
|
+
(0, _react.useLayoutEffect)(function () {
|
202
202
|
setInputValue((0, _dateHelper.formatInputValue)({
|
203
|
-
value: defaultDate,
|
203
|
+
value: value || defaultDate,
|
204
204
|
format: format,
|
205
205
|
lang: lang
|
206
206
|
}));
|
207
|
-
|
207
|
+
if (!format) {
|
208
|
+
setCalendarValue((0, _dateHelper.formatCalendarValue)(value || defaultDate, undefined, lang));
|
209
|
+
return;
|
210
|
+
}
|
211
|
+
var _validateDateWithFull = (0, _dateHelper.validateDateWithFullMonth)({
|
212
|
+
currentValue: inputValue,
|
213
|
+
format: format,
|
214
|
+
lang: lang
|
215
|
+
}),
|
216
|
+
hasMonthFullName = _validateDateWithFull.hasMonthFullName,
|
217
|
+
isValidMonth = _validateDateWithFull.isValidMonth,
|
218
|
+
isLengthEqual = _validateDateWithFull.isLengthEqual;
|
219
|
+
if (!hasMonthFullName && (inputValue === null || inputValue === void 0 ? void 0 : inputValue.length) === (format === null || format === void 0 ? void 0 : format.length) || isValidMonth && isLengthEqual) {
|
220
|
+
setCalendarValue((0, _dateHelper.formatCalendarValue)(inputValue, format, lang));
|
221
|
+
}
|
222
|
+
}, [value, defaultDate, format, lang]);
|
208
223
|
return /*#__PURE__*/_react["default"].createElement(Root, _extends({
|
209
224
|
view: view,
|
210
225
|
size: size,
|
@@ -15,7 +15,7 @@ var _base2 = /*#__PURE__*/require("./variations/_size/base");
|
|
15
15
|
var _base3 = /*#__PURE__*/require("./variations/_pilled/base");
|
16
16
|
var _base4 = /*#__PURE__*/require("./variations/_closeIconType/base");
|
17
17
|
var _Toast2 = /*#__PURE__*/require("./Toast.styles");
|
18
|
-
var _excluded = ["role", "width", "text", "hasClose", "contentLeft", "view", "size", "pilled", "className", "style", "closeIconType", "onCloseButtonClick"
|
18
|
+
var _excluded = ["role", "width", "text", "hasClose", "contentLeft", "view", "size", "pilled", "className", "style", "closeIconType", "onCloseButtonClick"];
|
19
19
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
20
20
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
21
21
|
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); }
|
@@ -42,7 +42,6 @@ var toastRoot = exports.toastRoot = function toastRoot(Root) {
|
|
42
42
|
style = props.style,
|
43
43
|
closeIconType = props.closeIconType,
|
44
44
|
onCloseButtonClick = props.onCloseButtonClick,
|
45
|
-
textColor = props.textColor,
|
46
45
|
rest = _objectWithoutProperties(props, _excluded);
|
47
46
|
var pilledClass = pilled ? _Toast.classes.toastPilled : undefined;
|
48
47
|
var fixedWidth = !Number.isNaN(Number(width)) ? "".concat(width, "%") : width;
|
@@ -66,9 +65,7 @@ var toastRoot = exports.toastRoot = function toastRoot(Root) {
|
|
66
65
|
role: role,
|
67
66
|
"aria-live": ariaLive,
|
68
67
|
"aria-atomic": ariaAtomic
|
69
|
-
}, rest), contentLeft && /*#__PURE__*/_react["default"].createElement(_Toast2.StyledContentLeft, null, contentLeft), /*#__PURE__*/_react["default"].createElement(_Toast2.StyledContent, {
|
70
|
-
textColor: textColor
|
71
|
-
}, text), hasClose && /*#__PURE__*/_react["default"].createElement(_Toast2.CloseIconWrapper, {
|
68
|
+
}, rest), contentLeft && /*#__PURE__*/_react["default"].createElement(_Toast2.StyledContentLeft, null, contentLeft), /*#__PURE__*/_react["default"].createElement(_Toast2.StyledContent, null, text), hasClose && /*#__PURE__*/_react["default"].createElement(_Toast2.CloseIconWrapper, {
|
72
69
|
view: "clear",
|
73
70
|
size: "s",
|
74
71
|
onClick: onCloseButtonClick,
|
@@ -42,10 +42,7 @@ var StyledOverlay = exports.StyledOverlay = /*#__PURE__*/(0, _styledComponents["
|
|
42
42
|
})(["&&.", "{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(_Toast.classes.toastFadeShowed), /*#__PURE__*/String(_Toast.classes.toastFadeHidden));
|
43
43
|
var StyledContentLeft = exports.StyledContentLeft = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
44
44
|
componentId: "plasma-new-hope__sc-19l9ekl-3"
|
45
|
-
})(["display:flex;--plasma_private-content-
|
45
|
+
})(["display:flex;--plasma_private-left-content-margin:var(", ");margin:var(--plasma_private-left-content-margin);"], _Toast.tokens.leftContentMargin);
|
46
46
|
var StyledContent = exports.StyledContent = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
47
47
|
componentId: "plasma-new-hope__sc-19l9ekl-4"
|
48
|
-
})(["
|
49
|
-
var textColor = _ref5.textColor;
|
50
|
-
return textColor || 'currentColor';
|
51
|
-
});
|
48
|
+
})([""]);
|
@@ -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
|
```
|
@@ -25,8 +25,7 @@ var tokens = exports.tokens = {
|
|
25
25
|
letterSpacing: '--plasma-toast-letter-spacing',
|
26
26
|
lineHeight: '--plasma-toast-lineheight',
|
27
27
|
pilledBorderRadius: '--plasma-toast-pilled-border-radius',
|
28
|
-
|
29
|
-
contentLeftColor: '--plasma-toast-content-left-color',
|
28
|
+
leftContentMargin: '--plasma-toast-left-content-margin',
|
30
29
|
closeIconMargin: '--plasma-toast-close-icon-margin',
|
31
30
|
closeIconColor: '--plasma-toast-close-icon-color',
|
32
31
|
closeIconColorOnHover: '--plasma-toast-close-icon-color-on-hover',
|
@@ -126,9 +126,6 @@ var ToastProviderHoc = exports.ToastProviderHoc = function ToastProviderHoc(Toas
|
|
126
126
|
size = _getShowToastCallSign.size,
|
127
127
|
view = _getShowToastCallSign.view,
|
128
128
|
width = _getShowToastCallSign.width,
|
129
|
-
_getShowToastCallSign4 = _getShowToastCallSign.closeIconType,
|
130
|
-
closeIconType = _getShowToastCallSign4 === void 0 ? _utils.DEFAULT_CLOSE_ICON_TYPE : _getShowToastCallSign4,
|
131
|
-
textColor = _getShowToastCallSign.textColor,
|
132
129
|
onHide = _getShowToastCallSign.onHide,
|
133
130
|
onShow = _getShowToastCallSign.onShow;
|
134
131
|
setToastProps({
|
@@ -142,9 +139,7 @@ var ToastProviderHoc = exports.ToastProviderHoc = function ToastProviderHoc(Toas
|
|
142
139
|
pilled: pilled,
|
143
140
|
hasClose: hasClose,
|
144
141
|
size: size,
|
145
|
-
view: view
|
146
|
-
closeIconType: closeIconType,
|
147
|
-
textColor: textColor
|
142
|
+
view: view
|
148
143
|
});
|
149
144
|
setToastInfo({
|
150
145
|
timeout: timeout,
|
@@ -3,12 +3,11 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
exports.gradients = exports.TOAST_Z_INDEX = exports.TIMER_DELAY = exports.FADE_Z_INDEX = exports.DEFAULT_POSITION = exports.DEFAULT_FADE = exports.
|
6
|
+
exports.gradients = exports.TOAST_Z_INDEX = exports.TIMER_DELAY = exports.FADE_Z_INDEX = exports.DEFAULT_POSITION = exports.DEFAULT_FADE = exports.Button = void 0;
|
7
7
|
var _Button = /*#__PURE__*/require("../Button");
|
8
8
|
var _engines = /*#__PURE__*/require("../../engines");
|
9
9
|
var DEFAULT_FADE = exports.DEFAULT_FADE = true;
|
10
10
|
var DEFAULT_POSITION = exports.DEFAULT_POSITION = 'bottom';
|
11
|
-
var DEFAULT_CLOSE_ICON_TYPE = exports.DEFAULT_CLOSE_ICON_TYPE = 'default';
|
12
11
|
var TIMER_DELAY = exports.TIMER_DELAY = 300;
|
13
12
|
var FADE_Z_INDEX = exports.FADE_Z_INDEX = '9900';
|
14
13
|
var TOAST_Z_INDEX = exports.TOAST_Z_INDEX = '9901';
|
@@ -6,4 +6,4 @@ Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
exports.base = void 0;
|
7
7
|
var _styledComponents = /*#__PURE__*/require("styled-components");
|
8
8
|
var _Toast = /*#__PURE__*/require("../../Toast.tokens");
|
9
|
-
var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&.", "{--plasma_private-content-
|
9
|
+
var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&.", "{--plasma_private-left-content-margin:var(", ");--plasma_private-close-icon-margin:var(", ");border-radius:var(", ");}"], /*#__PURE__*/String(_Toast.classes.toastPilled), _Toast.tokens.leftContentMargin, _Toast.tokens.closeIconMargin, _Toast.tokens.pilledBorderRadius);
|
@@ -15,24 +15,14 @@ var config = exports.config = {
|
|
15
15
|
variations: {
|
16
16
|
view: {
|
17
17
|
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-solid-card-brightness);", ":var(--text-secondary);", ":var(--text-secondary);"], _Toast.toastTokens.color, _Toast.toastTokens.background, _Toast.toastTokens.closeIconColor, _Toast.toastTokens.closeIconColorOnHover),
|
18
|
-
positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-solid-card-brightness);", ":var(--text-positive);", ":var(--text-secondary);", ":var(--text-secondary);"], _Toast.toastTokens.color, _Toast.toastTokens.background, _Toast.toastTokens.contentLeftColor, _Toast.toastTokens.closeIconColor, _Toast.toastTokens.closeIconColorOnHover),
|
19
|
-
negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-solid-card-brightness);", ":var(--text-negative);", ":var(--text-secondary);", ":var(--text-secondary);"], _Toast.toastTokens.color, _Toast.toastTokens.background, _Toast.toastTokens.contentLeftColor, _Toast.toastTokens.closeIconColor, _Toast.toastTokens.closeIconColorOnHover),
|
20
|
-
/**
|
21
|
-
* @deprecated
|
22
|
-
* светлый и темный фон регулировать через `view` компонента `ViewContainer`
|
23
|
-
*/
|
24
18
|
dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-surface-solid-primary-brightness);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary);"], _Toast.toastTokens.color, _Toast.toastTokens.background, _Toast.toastTokens.closeIconColor, _Toast.toastTokens.closeIconColorOnHover),
|
25
|
-
/**
|
26
|
-
* @deprecated
|
27
|
-
* светлый и темный фон регулировать через `view` компонента `ViewContainer`
|
28
|
-
*/
|
29
19
|
light: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-light-surface-solid-primary-brightness);", ":var(--on-light-text-secondary);", ":var(--on-light-text-secondary);"], _Toast.toastTokens.color, _Toast.toastTokens.background, _Toast.toastTokens.closeIconColor, _Toast.toastTokens.closeIconColorOnHover)
|
30
20
|
},
|
31
21
|
size: {
|
32
|
-
m: /*#__PURE__*/(0, _styledComponents.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;"], _Toast.toastTokens.borderRadius, _Toast.toastTokens.maxWidth, _Toast.toastTokens.padding, _Toast.toastTokens.fontFamily, _Toast.toastTokens.fontSize, _Toast.toastTokens.fontStyle, _Toast.toastTokens.fontWeight, _Toast.toastTokens.letterSpacing, _Toast.toastTokens.lineHeight, _Toast.toastTokens.
|
22
|
+
m: /*#__PURE__*/(0, _styledComponents.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;"], _Toast.toastTokens.borderRadius, _Toast.toastTokens.maxWidth, _Toast.toastTokens.padding, _Toast.toastTokens.fontFamily, _Toast.toastTokens.fontSize, _Toast.toastTokens.fontStyle, _Toast.toastTokens.fontWeight, _Toast.toastTokens.letterSpacing, _Toast.toastTokens.lineHeight, _Toast.toastTokens.leftContentMargin, _Toast.toastTokens.closeIconMargin)
|
33
23
|
},
|
34
24
|
pilled: {
|
35
|
-
"true": /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;", ":-0.0625rem 0.375rem -0.0625rem -0.25rem;", ":-0.0625rem -0.25rem -0.0625rem 0.375rem;"], _Toast.toastTokens.pilledBorderRadius, _Toast.toastTokens.
|
25
|
+
"true": /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;", ":-0.0625rem 0.375rem -0.0625rem -0.25rem;", ":-0.0625rem -0.25rem -0.0625rem 0.375rem;"], _Toast.toastTokens.pilledBorderRadius, _Toast.toastTokens.leftContentMargin, _Toast.toastTokens.closeIconMargin)
|
36
26
|
},
|
37
27
|
closeIconType: {
|
38
28
|
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":1rem;", ":1.5rem;"], _Toast.toastTokens.closeIconButtonSize, _Toast.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
|
});
|
@@ -15,24 +15,14 @@ var config = exports.config = {
|
|
15
15
|
variations: {
|
16
16
|
view: {
|
17
17
|
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-solid-card-brightness);", ":var(--text-secondary);", ":var(--text-secondary);"], _Toast.toastTokens.color, _Toast.toastTokens.background, _Toast.toastTokens.closeIconColor, _Toast.toastTokens.closeIconColorOnHover),
|
18
|
-
positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-solid-card-brightness);", ":var(--text-positive);", ":var(--text-secondary);", ":var(--text-secondary);"], _Toast.toastTokens.color, _Toast.toastTokens.background, _Toast.toastTokens.contentLeftColor, _Toast.toastTokens.closeIconColor, _Toast.toastTokens.closeIconColorOnHover),
|
19
|
-
negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-solid-card-brightness);", ":var(--text-negative);", ":var(--text-secondary);", ":var(--text-secondary);"], _Toast.toastTokens.color, _Toast.toastTokens.background, _Toast.toastTokens.contentLeftColor, _Toast.toastTokens.closeIconColor, _Toast.toastTokens.closeIconColorOnHover),
|
20
|
-
/**
|
21
|
-
* @deprecated
|
22
|
-
* светлый и темный фон регулировать через `view` компонента `ViewContainer`
|
23
|
-
*/
|
24
18
|
dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-surface-solid-primary-brightness);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary);"], _Toast.toastTokens.color, _Toast.toastTokens.background, _Toast.toastTokens.closeIconColor, _Toast.toastTokens.closeIconColorOnHover),
|
25
|
-
/**
|
26
|
-
* @deprecated
|
27
|
-
* светлый и темный фон регулировать через `view` компонента `ViewContainer`
|
28
|
-
*/
|
29
19
|
light: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-light-surface-solid-primary-brightness);", ":var(--on-light-text-secondary);", ":var(--on-light-text-secondary);"], _Toast.toastTokens.color, _Toast.toastTokens.background, _Toast.toastTokens.closeIconColor, _Toast.toastTokens.closeIconColorOnHover)
|
30
20
|
},
|
31
21
|
size: {
|
32
|
-
m: /*#__PURE__*/(0, _styledComponents.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;"], _Toast.toastTokens.borderRadius, _Toast.toastTokens.maxWidth, _Toast.toastTokens.padding, _Toast.toastTokens.fontFamily, _Toast.toastTokens.fontSize, _Toast.toastTokens.fontStyle, _Toast.toastTokens.fontWeight, _Toast.toastTokens.letterSpacing, _Toast.toastTokens.lineHeight, _Toast.toastTokens.
|
22
|
+
m: /*#__PURE__*/(0, _styledComponents.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;"], _Toast.toastTokens.borderRadius, _Toast.toastTokens.maxWidth, _Toast.toastTokens.padding, _Toast.toastTokens.fontFamily, _Toast.toastTokens.fontSize, _Toast.toastTokens.fontStyle, _Toast.toastTokens.fontWeight, _Toast.toastTokens.letterSpacing, _Toast.toastTokens.lineHeight, _Toast.toastTokens.leftContentMargin, _Toast.toastTokens.closeIconMargin)
|
33
23
|
},
|
34
24
|
pilled: {
|
35
|
-
"true": /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;", ":-0.0625rem 0.375rem -0.0625rem -0.25rem;", ":-0.0625rem -0.25rem -0.0625rem 0.375rem;"], _Toast.toastTokens.pilledBorderRadius, _Toast.toastTokens.
|
25
|
+
"true": /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;", ":-0.0625rem 0.375rem -0.0625rem -0.25rem;", ":-0.0625rem -0.25rem -0.0625rem 0.375rem;"], _Toast.toastTokens.pilledBorderRadius, _Toast.toastTokens.leftContentMargin, _Toast.toastTokens.closeIconMargin)
|
36
26
|
},
|
37
27
|
closeIconType: {
|
38
28
|
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":1rem;", ":1.5rem;"], _Toast.toastTokens.closeIconButtonSize, _Toast.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
|
});
|
@@ -136,6 +136,14 @@ export var calendarBaseRoot = function calendarBaseRoot(Root) {
|
|
136
136
|
});
|
137
137
|
setPrevValue(value);
|
138
138
|
}
|
139
|
+
if (!value) {
|
140
|
+
dispatch({
|
141
|
+
type: ActionType.UPDATE_DATE,
|
142
|
+
payload: {
|
143
|
+
value: min || new Date()
|
144
|
+
}
|
145
|
+
});
|
146
|
+
}
|
139
147
|
}, [value, prevValue]);
|
140
148
|
return /*#__PURE__*/React.createElement(Root, _extends({
|
141
149
|
ref: outerRootRef,
|
@@ -190,6 +190,14 @@ export var calendarDoubleRoot = function calendarDoubleRoot(Root) {
|
|
190
190
|
}
|
191
191
|
setPrevValue(value);
|
192
192
|
}
|
193
|
+
if (!value) {
|
194
|
+
dispatch({
|
195
|
+
type: ActionType.UPDATE_DATE,
|
196
|
+
payload: {
|
197
|
+
value: min || new Date()
|
198
|
+
}
|
199
|
+
});
|
200
|
+
}
|
193
201
|
}, [value, prevValue]);
|
194
202
|
useEffect(function () {
|
195
203
|
setFirstDate(date);
|