@vchasno/ui-kit 0.3.16 → 0.3.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/dist/Datepicker/types/components/Alert/Alert.d.ts +6 -3
- package/dist/Menu/types/components/Alert/Alert.d.ts +6 -3
- package/dist/ProjectsPopover/types/components/Alert/Alert.d.ts +6 -3
- package/dist/Select/types/components/Alert/Alert.d.ts +6 -3
- package/dist/SelectCreatable/types/components/Alert/Alert.d.ts +6 -3
- package/dist/Snackbar/index.cjs.js +1 -1
- package/dist/Snackbar/index.js +1 -1
- package/dist/Snackbar/types/components/Alert/Alert.d.ts +6 -3
- package/dist/css/_theme.css +9 -7
- package/dist/index.d.ts +6 -3
- package/dist/index.js +26 -21
- package/dist/index.js.map +1 -1
- package/dist/types/components/Alert/Alert.d.ts +6 -3
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import './Alert.global.css';
|
|
3
|
-
type AlertType = 'error' | 'warning' | 'success' | 'info';
|
|
4
|
-
type IconType = 'info' | 'cross' | 'error' | 'warning' | 'success';
|
|
3
|
+
type AlertType = 'error' | 'warning' | 'success' | 'info' | 'config';
|
|
4
|
+
type IconType = 'info' | 'cross' | 'error' | 'warning' | 'success' | 'config';
|
|
5
5
|
export interface AlertProps {
|
|
6
6
|
type?: AlertType;
|
|
7
|
-
icon?: IconType
|
|
7
|
+
icon?: IconType;
|
|
8
|
+
customIcon?: React.ReactNode;
|
|
9
|
+
hideIcon?: boolean;
|
|
10
|
+
scrollIntoView?: boolean;
|
|
8
11
|
leftBorder?: boolean;
|
|
9
12
|
className?: string;
|
|
10
13
|
onClose?: VoidFunction;
|
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import './Alert.global.css';
|
|
3
|
-
type AlertType = 'error' | 'warning' | 'success' | 'info';
|
|
4
|
-
type IconType = 'info' | 'cross' | 'error' | 'warning' | 'success';
|
|
3
|
+
type AlertType = 'error' | 'warning' | 'success' | 'info' | 'config';
|
|
4
|
+
type IconType = 'info' | 'cross' | 'error' | 'warning' | 'success' | 'config';
|
|
5
5
|
export interface AlertProps {
|
|
6
6
|
type?: AlertType;
|
|
7
|
-
icon?: IconType
|
|
7
|
+
icon?: IconType;
|
|
8
|
+
customIcon?: React.ReactNode;
|
|
9
|
+
hideIcon?: boolean;
|
|
10
|
+
scrollIntoView?: boolean;
|
|
8
11
|
leftBorder?: boolean;
|
|
9
12
|
className?: string;
|
|
10
13
|
onClose?: VoidFunction;
|
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import './Alert.global.css';
|
|
3
|
-
type AlertType = 'error' | 'warning' | 'success' | 'info';
|
|
4
|
-
type IconType = 'info' | 'cross' | 'error' | 'warning' | 'success';
|
|
3
|
+
type AlertType = 'error' | 'warning' | 'success' | 'info' | 'config';
|
|
4
|
+
type IconType = 'info' | 'cross' | 'error' | 'warning' | 'success' | 'config';
|
|
5
5
|
export interface AlertProps {
|
|
6
6
|
type?: AlertType;
|
|
7
|
-
icon?: IconType
|
|
7
|
+
icon?: IconType;
|
|
8
|
+
customIcon?: React.ReactNode;
|
|
9
|
+
hideIcon?: boolean;
|
|
10
|
+
scrollIntoView?: boolean;
|
|
8
11
|
leftBorder?: boolean;
|
|
9
12
|
className?: string;
|
|
10
13
|
onClose?: VoidFunction;
|
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import './Alert.global.css';
|
|
3
|
-
type AlertType = 'error' | 'warning' | 'success' | 'info';
|
|
4
|
-
type IconType = 'info' | 'cross' | 'error' | 'warning' | 'success';
|
|
3
|
+
type AlertType = 'error' | 'warning' | 'success' | 'info' | 'config';
|
|
4
|
+
type IconType = 'info' | 'cross' | 'error' | 'warning' | 'success' | 'config';
|
|
5
5
|
export interface AlertProps {
|
|
6
6
|
type?: AlertType;
|
|
7
|
-
icon?: IconType
|
|
7
|
+
icon?: IconType;
|
|
8
|
+
customIcon?: React.ReactNode;
|
|
9
|
+
hideIcon?: boolean;
|
|
10
|
+
scrollIntoView?: boolean;
|
|
8
11
|
leftBorder?: boolean;
|
|
9
12
|
className?: string;
|
|
10
13
|
onClose?: VoidFunction;
|
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import './Alert.global.css';
|
|
3
|
-
type AlertType = 'error' | 'warning' | 'success' | 'info';
|
|
4
|
-
type IconType = 'info' | 'cross' | 'error' | 'warning' | 'success';
|
|
3
|
+
type AlertType = 'error' | 'warning' | 'success' | 'info' | 'config';
|
|
4
|
+
type IconType = 'info' | 'cross' | 'error' | 'warning' | 'success' | 'config';
|
|
5
5
|
export interface AlertProps {
|
|
6
6
|
type?: AlertType;
|
|
7
|
-
icon?: IconType
|
|
7
|
+
icon?: IconType;
|
|
8
|
+
customIcon?: React.ReactNode;
|
|
9
|
+
hideIcon?: boolean;
|
|
10
|
+
scrollIntoView?: boolean;
|
|
8
11
|
leftBorder?: boolean;
|
|
9
12
|
className?: string;
|
|
10
13
|
onClose?: VoidFunction;
|
|
@@ -483,7 +483,7 @@ var TextAreaInput = React$1.forwardRef(function (_a, ref) {
|
|
|
483
483
|
});
|
|
484
484
|
TextAreaInput.displayName = 'TextAreaInput';
|
|
485
485
|
|
|
486
|
-
var css_248z$b = ".vchasno-ui-alert {\n display: inline-flex;\n min-height: 40px;\n box-sizing: border-box;\n align-items: center;\n padding:
|
|
486
|
+
var css_248z$b = ".vchasno-ui-alert {\n display: inline-flex;\n min-height: 40px;\n box-sizing: border-box;\n flex-shrink: 0;\n align-items: center;\n padding: 12px 16px;\n border-radius: 4px;\n border-left: 3px solid transparent;\n font-size: 14px;\n gap: 12px;\n line-height: 20px;\n}\n\n.vchasno-ui-alert strong,\n.vchasno-ui-alert b {\n font-weight: 700;\n}\n\n.vchasno-ui-alert.--wide {\n width: 100%;\n}\n\n.vchasno-ui-alert.--left-border {\n border-left-width: 4px;\n}\n\n.vchasno-ui-alert__icon-wrapper,\n.vchasno-ui-alert__close-icon {\n display: flex;\n width: 20px;\n height: 20px;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n font-size: 20px;\n line-height: 20px;\n}\n\n.vchasno-ui-alert.--info {\n border-color: var(--vchasno-ui-alert-info-color, #006be9);\n background-color: var(--vchasno-ui-alert-info-bg, #ecf4ff);\n}\n\n.vchasno-ui-alert.--warning {\n border-color: var(--vchasno-ui-alert-warning-color, #ffb200);\n background-color: var(--vchasno-ui-alert-warning-bg, #fff2d6);\n}\n\n.vchasno-ui-alert.--error {\n border-color: var(--vchasno-ui-alert-error-color, #e73434);\n background-color: var(--vchasno-ui-alert-error-bg, #ffeded);\n}\n\n.vchasno-ui-alert.--success {\n border-color: var(--vchasno-ui-alert-success-color, #00b700);\n background-color: var(--vchasno-ui-alert-success-bg, #e7f3d9);\n}\n\n.vchasno-ui-alert.--config {\n border-color: var(--vchasno-ui-alert-config-color, #006be9);\n background-color: var(--vchasno-ui-alert-config-bg, #f3f6f8);\n}\n\n.vchasno-ui-alert__close-icon {\n width: 30px;\n height: 30px;\n border-radius: 4px;\n transition: background-color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-alert__close-icon:hover {\n background-color: rgb(255 255 255 / 50%);\n cursor: pointer;\n}\n\n.vchasno-ui-alert.--close {\n display: none;\n}\n";
|
|
487
487
|
styleInject(css_248z$b);
|
|
488
488
|
|
|
489
489
|
var css_248z$a = ".vchasno-ui-switch {\n display: inline-flex;\n align-content: center;\n cursor: pointer;\n line-height: 20px;\n}\n\n.vchasno-ui-switch--bg {\n position: relative;\n z-index: 0;\n display: inline-flex;\n width: 36px;\n height: 20px;\n box-sizing: border-box;\n flex-shrink: 0;\n border-radius: 100px;\n background: var(--vchasno-ui-switch-color-bg);\n box-shadow: inset 0 2px 0 rgb(57 96 131 / 20%);\n transition: background-color 0.3s;\n}\n\n.vchasno-ui-switch__active .vchasno-ui-switch--bg {\n background: var(--vchasno-ui-switch-active-color-bg);\n box-shadow: inset 0 2px 0 rgb(57 96 131 / 20%);\n}\n\n.vchasno-ui-switch__disabled {\n cursor: default;\n opacity: 0.7;\n}\n\n.vchasno-ui-switch--circle {\n position: absolute;\n top: 0;\n left: 0;\n display: flex;\n width: 16px;\n height: 16px;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n background-color: var(--vchasno-ui-switch-circle-color);\n transform: translate(2px, 2px);\n transition: transform 0.3s;\n}\n\n.vchasno-ui-switch--bg > input:checked + .vchasno-ui-switch--circle {\n transform: translate(18px, 2px);\n}\n\n.vchasno-ui-spinner {\n color: var(--vchasno-ui-switch-spinner-color);\n}\n\n.vchasno-ui-switch--label {\n margin-left: 12px;\n color: var(--vchasno-ui-input-font-color);\n font-size: var(--vchasno-ui-input-font-size);\n line-height: 20px;\n user-select: none;\n}\n";
|
package/dist/Snackbar/index.js
CHANGED
|
@@ -461,7 +461,7 @@ var TextAreaInput = React__default.forwardRef(function (_a, ref) {
|
|
|
461
461
|
});
|
|
462
462
|
TextAreaInput.displayName = 'TextAreaInput';
|
|
463
463
|
|
|
464
|
-
var css_248z$b = ".vchasno-ui-alert {\n display: inline-flex;\n min-height: 40px;\n box-sizing: border-box;\n align-items: center;\n padding:
|
|
464
|
+
var css_248z$b = ".vchasno-ui-alert {\n display: inline-flex;\n min-height: 40px;\n box-sizing: border-box;\n flex-shrink: 0;\n align-items: center;\n padding: 12px 16px;\n border-radius: 4px;\n border-left: 3px solid transparent;\n font-size: 14px;\n gap: 12px;\n line-height: 20px;\n}\n\n.vchasno-ui-alert strong,\n.vchasno-ui-alert b {\n font-weight: 700;\n}\n\n.vchasno-ui-alert.--wide {\n width: 100%;\n}\n\n.vchasno-ui-alert.--left-border {\n border-left-width: 4px;\n}\n\n.vchasno-ui-alert__icon-wrapper,\n.vchasno-ui-alert__close-icon {\n display: flex;\n width: 20px;\n height: 20px;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n font-size: 20px;\n line-height: 20px;\n}\n\n.vchasno-ui-alert.--info {\n border-color: var(--vchasno-ui-alert-info-color, #006be9);\n background-color: var(--vchasno-ui-alert-info-bg, #ecf4ff);\n}\n\n.vchasno-ui-alert.--warning {\n border-color: var(--vchasno-ui-alert-warning-color, #ffb200);\n background-color: var(--vchasno-ui-alert-warning-bg, #fff2d6);\n}\n\n.vchasno-ui-alert.--error {\n border-color: var(--vchasno-ui-alert-error-color, #e73434);\n background-color: var(--vchasno-ui-alert-error-bg, #ffeded);\n}\n\n.vchasno-ui-alert.--success {\n border-color: var(--vchasno-ui-alert-success-color, #00b700);\n background-color: var(--vchasno-ui-alert-success-bg, #e7f3d9);\n}\n\n.vchasno-ui-alert.--config {\n border-color: var(--vchasno-ui-alert-config-color, #006be9);\n background-color: var(--vchasno-ui-alert-config-bg, #f3f6f8);\n}\n\n.vchasno-ui-alert__close-icon {\n width: 30px;\n height: 30px;\n border-radius: 4px;\n transition: background-color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-alert__close-icon:hover {\n background-color: rgb(255 255 255 / 50%);\n cursor: pointer;\n}\n\n.vchasno-ui-alert.--close {\n display: none;\n}\n";
|
|
465
465
|
styleInject(css_248z$b);
|
|
466
466
|
|
|
467
467
|
var css_248z$a = ".vchasno-ui-switch {\n display: inline-flex;\n align-content: center;\n cursor: pointer;\n line-height: 20px;\n}\n\n.vchasno-ui-switch--bg {\n position: relative;\n z-index: 0;\n display: inline-flex;\n width: 36px;\n height: 20px;\n box-sizing: border-box;\n flex-shrink: 0;\n border-radius: 100px;\n background: var(--vchasno-ui-switch-color-bg);\n box-shadow: inset 0 2px 0 rgb(57 96 131 / 20%);\n transition: background-color 0.3s;\n}\n\n.vchasno-ui-switch__active .vchasno-ui-switch--bg {\n background: var(--vchasno-ui-switch-active-color-bg);\n box-shadow: inset 0 2px 0 rgb(57 96 131 / 20%);\n}\n\n.vchasno-ui-switch__disabled {\n cursor: default;\n opacity: 0.7;\n}\n\n.vchasno-ui-switch--circle {\n position: absolute;\n top: 0;\n left: 0;\n display: flex;\n width: 16px;\n height: 16px;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n background-color: var(--vchasno-ui-switch-circle-color);\n transform: translate(2px, 2px);\n transition: transform 0.3s;\n}\n\n.vchasno-ui-switch--bg > input:checked + .vchasno-ui-switch--circle {\n transform: translate(18px, 2px);\n}\n\n.vchasno-ui-spinner {\n color: var(--vchasno-ui-switch-spinner-color);\n}\n\n.vchasno-ui-switch--label {\n margin-left: 12px;\n color: var(--vchasno-ui-input-font-color);\n font-size: var(--vchasno-ui-input-font-size);\n line-height: 20px;\n user-select: none;\n}\n";
|
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import './Alert.global.css';
|
|
3
|
-
type AlertType = 'error' | 'warning' | 'success' | 'info';
|
|
4
|
-
type IconType = 'info' | 'cross' | 'error' | 'warning' | 'success';
|
|
3
|
+
type AlertType = 'error' | 'warning' | 'success' | 'info' | 'config';
|
|
4
|
+
type IconType = 'info' | 'cross' | 'error' | 'warning' | 'success' | 'config';
|
|
5
5
|
export interface AlertProps {
|
|
6
6
|
type?: AlertType;
|
|
7
|
-
icon?: IconType
|
|
7
|
+
icon?: IconType;
|
|
8
|
+
customIcon?: React.ReactNode;
|
|
9
|
+
hideIcon?: boolean;
|
|
10
|
+
scrollIntoView?: boolean;
|
|
8
11
|
leftBorder?: boolean;
|
|
9
12
|
className?: string;
|
|
10
13
|
onClose?: VoidFunction;
|
package/dist/css/_theme.css
CHANGED
|
@@ -47,14 +47,16 @@
|
|
|
47
47
|
--vchasno-ui-text-success-color: #1cb800;
|
|
48
48
|
--vchasno-ui-text-warning-color: #ffb200;
|
|
49
49
|
--vchasno-ui-text-error-color: #ff5937;
|
|
50
|
-
--vchasno-ui-alert-info-color: #
|
|
51
|
-
--vchasno-ui-alert-info-bg: #
|
|
50
|
+
--vchasno-ui-alert-info-color: #006be9;
|
|
51
|
+
--vchasno-ui-alert-info-bg: #ecf4ff;
|
|
52
52
|
--vchasno-ui-alert-warning-color: #ffb200;
|
|
53
|
-
--vchasno-ui-alert-warning-bg:
|
|
54
|
-
--vchasno-ui-alert-error-color: #
|
|
55
|
-
--vchasno-ui-alert-error-bg:
|
|
56
|
-
--vchasno-ui-alert-success-color: #
|
|
57
|
-
--vchasno-ui-alert-success-bg:
|
|
53
|
+
--vchasno-ui-alert-warning-bg: #fff2d6;
|
|
54
|
+
--vchasno-ui-alert-error-color: #e73434;
|
|
55
|
+
--vchasno-ui-alert-error-bg: #ffeded;
|
|
56
|
+
--vchasno-ui-alert-success-color: #00b700;
|
|
57
|
+
--vchasno-ui-alert-success-bg: #e7f3d9;
|
|
58
|
+
--vchasno-ui-alert-config-color: #006be9;
|
|
59
|
+
--vchasno-ui-alert-config-bg: #f3f6f8;
|
|
58
60
|
--vchasno-ui-tabs-active-color: #087dc1;
|
|
59
61
|
--vchasno-ui-pagination-border-color: #6b5fff;
|
|
60
62
|
--vchasno-ui-pagination-hover-bg-color: rgb(0 0 0 / 10%);
|
package/dist/index.d.ts
CHANGED
|
@@ -131,11 +131,14 @@ interface TextAreaInputProps extends TextareaAutosizeProps, Omit<InputProps, 'ch
|
|
|
131
131
|
}
|
|
132
132
|
declare const TextAreaInput: React.ForwardRefExoticComponent<TextAreaInputProps & React.RefAttributes<HTMLTextAreaElement>>;
|
|
133
133
|
|
|
134
|
-
type AlertType = 'error' | 'warning' | 'success' | 'info';
|
|
135
|
-
type IconType = 'info' | 'cross' | 'error' | 'warning' | 'success';
|
|
134
|
+
type AlertType = 'error' | 'warning' | 'success' | 'info' | 'config';
|
|
135
|
+
type IconType = 'info' | 'cross' | 'error' | 'warning' | 'success' | 'config';
|
|
136
136
|
interface AlertProps {
|
|
137
137
|
type?: AlertType;
|
|
138
|
-
icon?: IconType
|
|
138
|
+
icon?: IconType;
|
|
139
|
+
customIcon?: React.ReactNode;
|
|
140
|
+
hideIcon?: boolean;
|
|
141
|
+
scrollIntoView?: boolean;
|
|
139
142
|
leftBorder?: boolean;
|
|
140
143
|
className?: string;
|
|
141
144
|
onClose?: VoidFunction;
|
package/dist/index.js
CHANGED
|
@@ -562,40 +562,45 @@ var TextAreaInput = React$1.forwardRef(function (_a, ref) {
|
|
|
562
562
|
});
|
|
563
563
|
TextAreaInput.displayName = 'TextAreaInput';
|
|
564
564
|
|
|
565
|
-
var css_248z$9 = ".vchasno-ui-alert {\n display: inline-flex;\n min-height: 40px;\n box-sizing: border-box;\n align-items: center;\n padding:
|
|
565
|
+
var css_248z$9 = ".vchasno-ui-alert {\n display: inline-flex;\n min-height: 40px;\n box-sizing: border-box;\n flex-shrink: 0;\n align-items: center;\n padding: 12px 16px;\n border-radius: 4px;\n border-left: 3px solid transparent;\n font-size: 14px;\n gap: 12px;\n line-height: 20px;\n}\n\n.vchasno-ui-alert strong,\n.vchasno-ui-alert b {\n font-weight: 700;\n}\n\n.vchasno-ui-alert.--wide {\n width: 100%;\n}\n\n.vchasno-ui-alert.--left-border {\n border-left-width: 4px;\n}\n\n.vchasno-ui-alert__icon-wrapper,\n.vchasno-ui-alert__close-icon {\n display: flex;\n width: 20px;\n height: 20px;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n font-size: 20px;\n line-height: 20px;\n}\n\n.vchasno-ui-alert.--info {\n border-color: var(--vchasno-ui-alert-info-color, #006be9);\n background-color: var(--vchasno-ui-alert-info-bg, #ecf4ff);\n}\n\n.vchasno-ui-alert.--warning {\n border-color: var(--vchasno-ui-alert-warning-color, #ffb200);\n background-color: var(--vchasno-ui-alert-warning-bg, #fff2d6);\n}\n\n.vchasno-ui-alert.--error {\n border-color: var(--vchasno-ui-alert-error-color, #e73434);\n background-color: var(--vchasno-ui-alert-error-bg, #ffeded);\n}\n\n.vchasno-ui-alert.--success {\n border-color: var(--vchasno-ui-alert-success-color, #00b700);\n background-color: var(--vchasno-ui-alert-success-bg, #e7f3d9);\n}\n\n.vchasno-ui-alert.--config {\n border-color: var(--vchasno-ui-alert-config-color, #006be9);\n background-color: var(--vchasno-ui-alert-config-bg, #f3f6f8);\n}\n\n.vchasno-ui-alert__close-icon {\n width: 30px;\n height: 30px;\n border-radius: 4px;\n transition: background-color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-alert__close-icon:hover {\n background-color: rgb(255 255 255 / 50%);\n cursor: pointer;\n}\n\n.vchasno-ui-alert.--close {\n display: none;\n}\n";
|
|
566
566
|
styleInject(css_248z$9);
|
|
567
567
|
|
|
568
568
|
var iconMap = {
|
|
569
|
-
info: function () { return
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
warning: function () { return (React$1.createElement("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
576
|
-
React$1.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15 7.5C15 11.6421 11.6421 15 7.5 15C3.35786 15 0 11.6421 0 7.5C0 3.35786 3.35786 0 7.5 0C11.6421 0 15 3.35786 15 7.5ZM6.5625 8.125C6.5625 8.64277 6.98223 9.0625 7.5 9.0625C8.01777 9.0625 8.4375 8.64277 8.4375 8.125V3.75C8.4375 3.23223 8.01777 2.8125 7.5 2.8125C6.98223 2.8125 6.5625 3.23223 6.5625 3.75V8.125ZM6.5625 11.25C6.5625 11.7678 6.98223 12.1875 7.5 12.1875C8.01777 12.1875 8.4375 11.7678 8.4375 11.25C8.4375 10.7322 8.01777 10.3125 7.5 10.3125C6.98223 10.3125 6.5625 10.7322 6.5625 11.25Z", fill: "currentColor" }))); },
|
|
577
|
-
success: function () { return (React$1.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
578
|
-
React$1.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8 15.5C12.1421 15.5 15.5 12.1421 15.5 8C15.5 3.85786 12.1421 0.5 8 0.5C3.85786 0.5 0.5 3.85786 0.5 8C0.5 12.1421 3.85786 15.5 8 15.5ZM10.427 5.39255C10.7106 5.0916 11.2362 5.14816 11.5278 5.39255C11.8534 5.66547 11.7932 6.11611 11.5278 6.39768L7.56268 10.6053C7.30802 10.8756 6.71524 10.8875 6.46185 10.6053L4.46953 8.38686C4.19295 8.07889 4.16113 7.68848 4.46953 7.38172C4.73477 7.1179 5.31108 7.09302 5.57035 7.38172L7.02551 9.00207L10.427 5.39255Z", fill: "currentColor" }))); },
|
|
569
|
+
info: function () { return React$1.createElement(React$1.Fragment, null, "\uD83E\uDD14"); },
|
|
570
|
+
cross: function () { return React$1.createElement(React$1.Fragment, null, "\u274C"); },
|
|
571
|
+
error: function () { return React$1.createElement(React$1.Fragment, null, "\u2757\uFE0F"); },
|
|
572
|
+
warning: function () { return React$1.createElement(React$1.Fragment, null, "\u26A0\uFE0F"); },
|
|
573
|
+
success: function () { return React$1.createElement(React$1.Fragment, null, "\u2705"); },
|
|
574
|
+
config: function () { return React$1.createElement(React$1.Fragment, null, "\u2699\uFE0F"); },
|
|
579
575
|
};
|
|
580
576
|
var Alert = function (_a) {
|
|
581
|
-
var _b = _a.type, type = _b === void 0 ? 'info' : _b, _c = _a.leftBorder, leftBorder = _c === void 0 ? true : _c, icon = _a.icon, className = _a.className, children = _a.children, onClose = _a.onClose, wide = _a.wide,
|
|
577
|
+
var _b = _a.type, type = _b === void 0 ? 'info' : _b, _c = _a.leftBorder, leftBorder = _c === void 0 ? true : _c, _d = _a.hideIcon, hideIcon = _d === void 0 ? false : _d, _e = _a.scrollIntoView, scrollIntoView = _e === void 0 ? false : _e, icon = _a.icon, className = _a.className, children = _a.children, onClose = _a.onClose, wide = _a.wide, _f = _a.close, close = _f === void 0 ? false : _f, customIcon = _a.customIcon;
|
|
582
578
|
var iconNode = null;
|
|
583
|
-
if (
|
|
584
|
-
|
|
579
|
+
if (customIcon) {
|
|
580
|
+
iconNode = React$1.createElement("span", { className: "vchasno-ui-alert__icon-wrapper" }, customIcon);
|
|
581
|
+
}
|
|
582
|
+
else {
|
|
583
|
+
var Icon = iconMap[icon || type];
|
|
585
584
|
iconNode = (React$1.createElement("span", { className: "vchasno-ui-alert__icon-wrapper" },
|
|
586
585
|
React$1.createElement(Icon, null)));
|
|
587
586
|
}
|
|
588
|
-
else if (icon) {
|
|
589
|
-
iconNode = React$1.createElement("span", { className: "vchasno-ui-alert__icon-wrapper" }, icon);
|
|
590
|
-
}
|
|
591
587
|
var closeNode = null;
|
|
592
588
|
if (typeof onClose === 'function') {
|
|
593
|
-
var CrossSvg = iconMap.cross;
|
|
594
589
|
closeNode = (React$1.createElement("span", { className: "vchasno-ui-alert__close-icon", onClick: onClose },
|
|
595
|
-
React$1.createElement(
|
|
590
|
+
React$1.createElement("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
591
|
+
React$1.createElement("path", { d: "M6.4 5L9.7 1.7C10.1 1.3 10.1 0.7 9.7 0.3C9.3 -0.1 8.7 -0.1 8.3 0.3L5 3.6L1.7 0.3C1.3 -0.1 0.7 -0.1 0.3 0.3C-0.1 0.7 -0.1 1.3 0.3 1.7L3.6 5L0.3 8.3C-0.1 8.7 -0.1 9.3 0.3 9.7C0.5 9.9 0.7 10 1 10C1.3 10 1.5 9.9 1.7 9.7L5 6.4L8.3 9.7C8.5 9.9 8.7 10 9 10C9.3 10 9.5 9.9 9.7 9.7C10.1 9.3 10.1 8.7 9.7 8.3L6.4 5Z", fill: "currentColor" }))));
|
|
596
592
|
}
|
|
597
|
-
|
|
598
|
-
|
|
593
|
+
var rootRef = React$1.useRef(null);
|
|
594
|
+
React$1.useEffect(function () {
|
|
595
|
+
if (scrollIntoView && rootRef.current) {
|
|
596
|
+
rootRef.current.scrollIntoView({
|
|
597
|
+
behavior: 'smooth',
|
|
598
|
+
block: 'center',
|
|
599
|
+
});
|
|
600
|
+
}
|
|
601
|
+
}, [scrollIntoView]);
|
|
602
|
+
return (React$1.createElement("span", { ref: rootRef, className: cn('vchasno-ui-alert', "--".concat(type), { '--close': close }, { '--wide': wide }, { '--left-border': leftBorder }, className) },
|
|
603
|
+
!hideIcon && iconNode,
|
|
599
604
|
React$1.createElement("div", null, children),
|
|
600
605
|
closeNode));
|
|
601
606
|
};
|