@itcase/ui 1.4.1 → 1.4.2
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/dist/cjs/components/Avatar.js +2 -2
- package/dist/cjs/context/Notifications.js +2 -2
- package/dist/components/Avatar.js +2 -2
- package/dist/context/Notifications.js +2 -2
- package/dist/css/components/Avatar/Avatar.css +2 -2
- package/dist/types/context/Notifications.d.ts +4 -3
- package/package.json +1 -1
|
@@ -34,7 +34,7 @@ var avatarConfig = {
|
|
|
34
34
|
},
|
|
35
35
|
};
|
|
36
36
|
function Avatar(props) {
|
|
37
|
-
var className = props.className, type = props.type, appearance = props.appearance,
|
|
37
|
+
var className = props.className, type = props.type, appearance = props.appearance, _a = props.size, size = _a === void 0 ? '96' : _a, Dot = props.Dot, _b = props.firstName, firstName = _b === void 0 ? '' : _b, icon = props.icon, mode = props.mode, _c = props.secondName, secondName = _c === void 0 ? '' : _c, src = props.src, before = props.before, after = props.after, onClick = props.onClick;
|
|
38
38
|
var avatarChars = React.useMemo(function () {
|
|
39
39
|
var firstChar = ((firstName === null || firstName === void 0 ? void 0 : firstName[0]) || '').toUpperCase();
|
|
40
40
|
var secondChar = ((secondName === null || secondName === void 0 ? void 0 : secondName[0]) || '').toUpperCase();
|
|
@@ -46,7 +46,7 @@ function Avatar(props) {
|
|
|
46
46
|
}, {});
|
|
47
47
|
var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
|
|
48
48
|
var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, _d = propsGenerator.textColor, textColor = _d === void 0 ? 'surfaceTextTertiary' : _d, _e = propsGenerator.textSize, textSize = _e === void 0 ? 'l' : _e, _f = propsGenerator.textWeight, textWeight = _f === void 0 ? '600' : _f, iconFill = propsGenerator.iconFill, iconFillHover = propsGenerator.iconFillHover, iconFillSize = propsGenerator.iconFillSize, iconItemFill = propsGenerator.iconItemFill, iconShape = propsGenerator.iconShape, iconSize = propsGenerator.iconSize, iconSrc = propsGenerator.iconSrc, shapeClass = propsGenerator.shapeClass;
|
|
49
|
-
return (jsxRuntime.jsx("div", { className: clsx(className, 'avatar', shapeClass && "avatar_shape_".concat(shapeClass), mode && "avatar_mode_".concat(mode), size && "avatar_size_".concat(size), type && "avatar_type_".concat(type), Dot && 'avatar_status', onClick && 'cursor_type_pointer'), onClick: onClick, children: jsxRuntime.jsxs("div", { className: clsx('avatar__wrapper', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass)), children: [before, src ? (jsxRuntime.jsx(Image.Image, { className: "avatar__image", shape: "geometric", src: src })) : (jsxRuntime.jsx(Text.Text, { className: "avatar__name", textColor: textColor, textWeight: textWeight,
|
|
49
|
+
return (jsxRuntime.jsx("div", { className: clsx(className, 'avatar', shapeClass && "avatar_shape_".concat(shapeClass), mode && "avatar_mode_".concat(mode), size && "avatar_size_".concat(size), type && "avatar_type_".concat(type), Dot && 'avatar_status', onClick && 'cursor_type_pointer'), onClick: onClick, children: jsxRuntime.jsxs("div", { className: clsx('avatar__wrapper', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass)), children: [before, src ? (jsxRuntime.jsx(Image.Image, { className: "avatar__image", shape: "geometric", src: src })) : (jsxRuntime.jsx(Text.Text, { className: "avatar__name", size: textSize, textColor: textColor, textWeight: textWeight, children: avatarChars })), (icon || iconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "avatar__icon", fill: iconFill, fillHover: iconFillHover, fillSize: iconFillSize, iconFill: iconItemFill, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon })), Dot, after] }) }));
|
|
50
50
|
}
|
|
51
51
|
|
|
52
52
|
exports.Avatar = Avatar;
|
|
@@ -15,8 +15,8 @@ var STATUSES = {
|
|
|
15
15
|
};
|
|
16
16
|
var NotificationsContext = React.createContext([]);
|
|
17
17
|
var NotificationsAPIContext = React.createContext({
|
|
18
|
-
hideNotifications: function () { },
|
|
19
|
-
showNotification: function () { },
|
|
18
|
+
hideNotifications: function (targetId) { },
|
|
19
|
+
showNotification: function (notification, onClose) { },
|
|
20
20
|
notificationStatuses: STATUSES,
|
|
21
21
|
});
|
|
22
22
|
function NotificationsProvider(props) {
|
|
@@ -32,7 +32,7 @@ var avatarConfig = {
|
|
|
32
32
|
},
|
|
33
33
|
};
|
|
34
34
|
function Avatar(props) {
|
|
35
|
-
var className = props.className, type = props.type, appearance = props.appearance,
|
|
35
|
+
var className = props.className, type = props.type, appearance = props.appearance, _a = props.size, size = _a === void 0 ? '96' : _a, Dot = props.Dot, _b = props.firstName, firstName = _b === void 0 ? '' : _b, icon = props.icon, mode = props.mode, _c = props.secondName, secondName = _c === void 0 ? '' : _c, src = props.src, before = props.before, after = props.after, onClick = props.onClick;
|
|
36
36
|
var avatarChars = useMemo(function () {
|
|
37
37
|
var firstChar = ((firstName === null || firstName === void 0 ? void 0 : firstName[0]) || '').toUpperCase();
|
|
38
38
|
var secondChar = ((secondName === null || secondName === void 0 ? void 0 : secondName[0]) || '').toUpperCase();
|
|
@@ -44,7 +44,7 @@ function Avatar(props) {
|
|
|
44
44
|
}, {});
|
|
45
45
|
var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
46
46
|
var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, _d = propsGenerator.textColor, textColor = _d === void 0 ? 'surfaceTextTertiary' : _d, _e = propsGenerator.textSize, textSize = _e === void 0 ? 'l' : _e, _f = propsGenerator.textWeight, textWeight = _f === void 0 ? '600' : _f, iconFill = propsGenerator.iconFill, iconFillHover = propsGenerator.iconFillHover, iconFillSize = propsGenerator.iconFillSize, iconItemFill = propsGenerator.iconItemFill, iconShape = propsGenerator.iconShape, iconSize = propsGenerator.iconSize, iconSrc = propsGenerator.iconSrc, shapeClass = propsGenerator.shapeClass;
|
|
47
|
-
return (jsx("div", { className: clsx(className, 'avatar', shapeClass && "avatar_shape_".concat(shapeClass), mode && "avatar_mode_".concat(mode), size && "avatar_size_".concat(size), type && "avatar_type_".concat(type), Dot && 'avatar_status', onClick && 'cursor_type_pointer'), onClick: onClick, children: jsxs("div", { className: clsx('avatar__wrapper', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass)), children: [before, src ? (jsx(Image, { className: "avatar__image", shape: "geometric", src: src })) : (jsx(Text, { className: "avatar__name", textColor: textColor, textWeight: textWeight,
|
|
47
|
+
return (jsx("div", { className: clsx(className, 'avatar', shapeClass && "avatar_shape_".concat(shapeClass), mode && "avatar_mode_".concat(mode), size && "avatar_size_".concat(size), type && "avatar_type_".concat(type), Dot && 'avatar_status', onClick && 'cursor_type_pointer'), onClick: onClick, children: jsxs("div", { className: clsx('avatar__wrapper', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass)), children: [before, src ? (jsx(Image, { className: "avatar__image", shape: "geometric", src: src })) : (jsx(Text, { className: "avatar__name", size: textSize, textColor: textColor, textWeight: textWeight, children: avatarChars })), (icon || iconSrc) && (jsx(Icon, { className: "avatar__icon", fill: iconFill, fillHover: iconFillHover, fillSize: iconFillSize, iconFill: iconItemFill, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon })), Dot, after] }) }));
|
|
48
48
|
}
|
|
49
49
|
|
|
50
50
|
export { Avatar, avatarAppearance, avatarConfig };
|
|
@@ -13,8 +13,8 @@ var STATUSES = {
|
|
|
13
13
|
};
|
|
14
14
|
var NotificationsContext = createContext([]);
|
|
15
15
|
var NotificationsAPIContext = createContext({
|
|
16
|
-
hideNotifications: function () { },
|
|
17
|
-
showNotification: function () { },
|
|
16
|
+
hideNotifications: function (targetId) { },
|
|
17
|
+
showNotification: function (notification, onClose) { },
|
|
18
18
|
notificationStatuses: STATUSES,
|
|
19
19
|
});
|
|
20
20
|
function NotificationsProvider(props) {
|
|
@@ -73,8 +73,8 @@
|
|
|
73
73
|
}
|
|
74
74
|
.avatar {
|
|
75
75
|
&_size {
|
|
76
|
-
@each $size in 14, 16, 20, 24, 32, 40, 48, 56, 60, 64, 72, 80, 96, 112,
|
|
77
|
-
|
|
76
|
+
@each $size in 14, 16, 20, 24, 32, 40, 48, 56, 60, 64, 72, 80, 96, 112, 144,
|
|
77
|
+
240 {
|
|
78
78
|
&_$(size) {
|
|
79
79
|
^^&__wrapper {
|
|
80
80
|
width: $(size) px;
|
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
import type
|
|
1
|
+
import { type tId } from '@itcase/common';
|
|
2
|
+
import type { iCreatedNotification, iNotificationsProviderProps } from './Notifications.interface';
|
|
2
3
|
declare function NotificationsProvider(props: iNotificationsProviderProps): import("react/jsx-runtime").JSX.Element;
|
|
3
4
|
declare function useNotifications(): never[];
|
|
4
5
|
declare function useNotificationsAPI(): {
|
|
5
|
-
hideNotifications: () => void;
|
|
6
|
-
showNotification: () => void;
|
|
6
|
+
hideNotifications: (targetId: tId) => void;
|
|
7
|
+
showNotification: (notification: string | iCreatedNotification, onClose?: () => void) => void;
|
|
7
8
|
notificationStatuses: {
|
|
8
9
|
error: string;
|
|
9
10
|
info: string;
|