@sima-land/ui-nucleons 45.0.0-alpha.6 → 45.0.0-alpha.8
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/autocomplete/autocomplete.js +8 -8
- package/autocomplete/autocomplete.js.map +1 -1
- package/avatar/avatar.d.ts +8 -0
- package/avatar/avatar.js +26 -0
- package/avatar/avatar.js.map +1 -0
- package/avatar/avatar.module.scss +17 -42
- package/avatar/index.d.ts +3 -30
- package/avatar/index.js +8 -41
- package/avatar/index.js.map +1 -1
- package/avatar/types.d.ts +19 -0
- package/avatar/types.js +3 -0
- package/avatar/types.js.map +1 -0
- package/avatar/utils.d.ts +28 -4
- package/avatar/utils.js +76 -13
- package/avatar/utils.js.map +1 -1
- package/avatar/utils.module.scss +9 -0
- package/button/button-util.scss +46 -0
- package/button/button.module.scss +17 -26
- package/button/index.d.ts +12 -2
- package/button/index.js +1 -1
- package/button/index.js.map +1 -1
- package/chips/chips-item.d.ts +15 -0
- package/chips/{item.js → chips-item.js} +7 -5
- package/chips/chips-item.js.map +1 -0
- package/chips/chips-item.module.scss +67 -0
- package/chips/chips.d.ts +17 -0
- package/chips/chips.js +25 -0
- package/chips/chips.js.map +1 -0
- package/chips/chips.module.scss +1 -69
- package/chips/index.d.ts +2 -16
- package/chips/index.js +5 -18
- package/chips/index.js.map +1 -1
- package/colors/index.d.ts +6 -4
- package/colors/index.js +6 -3
- package/colors/index.js.map +1 -1
- package/colors.scss +2 -0
- package/dropdown/utils.d.ts +1 -1
- package/expandable/expandable-group.module.scss +1 -5
- package/expandable/index.d.ts +4 -34
- package/expandable/index.js +80 -30
- package/expandable/index.js.map +1 -1
- package/expandable/types.d.ts +39 -0
- package/expandable/types.js +3 -0
- package/expandable/types.js.map +1 -0
- package/expandable/utils.d.ts +22 -23
- package/expandable/utils.js +65 -80
- package/expandable/utils.js.map +1 -1
- package/file-icon/file-icon.module.scss +42 -0
- package/file-icon/index.d.ts +10 -3
- package/file-icon/index.js +10 -16
- package/file-icon/index.js.map +1 -1
- package/link/index.d.ts +2 -2
- package/link/index.js.map +1 -1
- package/modal/index.d.ts +1 -1
- package/package.json +14 -17
- package/pagination/pagination-item.js +1 -1
- package/pagination/pagination-item.js.map +1 -1
- package/pagination/pagination.js +1 -1
- package/pagination/pagination.js.map +1 -1
- package/popup/utils.d.ts +1 -1
- package/side-page/index.js +1 -1
- package/side-page/index.js.map +1 -1
- package/styling/colors.d.ts +5 -5
- package/tabs/index.d.ts +24 -10
- package/tabs/index.js +8 -4
- package/tabs/index.js.map +1 -1
- package/textarea/index.js +1 -1
- package/toggle/toggle.module.scss +4 -4
- package/top-bar/top-bar.module.scss +1 -1
- package/upload-area/index.d.ts +2 -1
- package/upload-area/index.js +3 -1
- package/upload-area/index.js.map +1 -1
- package/upload-area/types.d.ts +10 -8
- package/upload-area/upload-area-util.scss +2 -0
- package/upload-area/upload-area.d.ts +1 -1
- package/upload-area/upload-area.js +6 -19
- package/upload-area/upload-area.js.map +1 -1
- package/upload-area/upload-area.module.scss +4 -1
- package/upload-area/utils.d.ts +7 -0
- package/upload-area/utils.js +20 -1
- package/upload-area/utils.js.map +1 -1
- package/avatar/user.d.ts +0 -10
- package/avatar/user.js +0 -41
- package/avatar/user.js.map +0 -1
- package/chips/item.d.ts +0 -15
- package/chips/item.js.map +0 -1
|
@@ -111,14 +111,14 @@ autoComplete, autoFocus, defaultValue, disabled, id, name, onBlur, onChange, onF
|
|
|
111
111
|
setNeedMenu(true);
|
|
112
112
|
setActiveIndex(-1);
|
|
113
113
|
setCurrentValue(e.target.value);
|
|
114
|
-
},
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
baseInputProps: {
|
|
114
|
+
}, blockProps: {
|
|
115
|
+
...restProps.blockProps,
|
|
116
|
+
onMouseDown: event => {
|
|
117
|
+
var _a, _b;
|
|
118
|
+
!disabled && setNeedMenu(a => !a);
|
|
119
|
+
(_b = (_a = restProps.blockProps) === null || _a === void 0 ? void 0 : _a.onMouseDown) === null || _b === void 0 ? void 0 : _b.call(_a, event);
|
|
120
|
+
},
|
|
121
|
+
}, baseInputProps: {
|
|
122
122
|
...baseInputProps,
|
|
123
123
|
onKeyDown: handleKeyDown,
|
|
124
124
|
}, adornmentEnd: typeof adornmentEnd === 'function' ? adornmentEnd({ menuShown }) : adornmentEnd }), (0, jsx_runtime_1.jsx)(react_2.FloatingPortal, { id: '', children: menuShown && ((0, jsx_runtime_1.jsxs)(dropdown_1.Dropdown, { ref: refs.setFloating, ...dropdownProps, style: { ...dropdownProps === null || dropdownProps === void 0 ? void 0 : dropdownProps.style, ...floatingStyle }, children: [!loading &&
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"autocomplete.js","sourceRoot":"","sources":["../../src/autocomplete/autocomplete.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"autocomplete.js","sourceRoot":"","sources":["../../src/autocomplete/autocomplete.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { AvatarProps } from '.';
|
|
3
|
+
/**
|
|
4
|
+
* Компонент аватара.
|
|
5
|
+
* @param props Свойства компонента.
|
|
6
|
+
* @return Элемент.
|
|
7
|
+
*/
|
|
8
|
+
export declare function Avatar({ src, className, style, children, 'data-testid': testId, }: AvatarProps): JSX.Element;
|
package/avatar/avatar.js
ADDED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.Avatar = void 0;
|
|
7
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
8
|
+
const react_1 = require("react");
|
|
9
|
+
const bind_1 = __importDefault(require("classnames/bind"));
|
|
10
|
+
const avatar_module_scss_1 = __importDefault(require("./avatar.module.scss"));
|
|
11
|
+
const cx = bind_1.default.bind(avatar_module_scss_1.default);
|
|
12
|
+
/**
|
|
13
|
+
* Компонент аватара.
|
|
14
|
+
* @param props Свойства компонента.
|
|
15
|
+
* @return Элемент.
|
|
16
|
+
*/
|
|
17
|
+
function Avatar({ src, className, style, children, 'data-testid': testId = 'avatar', }) {
|
|
18
|
+
const [needImage, toggleNeedImage] = (0, react_1.useState)(() => Boolean(src));
|
|
19
|
+
(0, react_1.useEffect)(() => {
|
|
20
|
+
toggleNeedImage(Boolean(src));
|
|
21
|
+
}, [src]);
|
|
22
|
+
const rootClassName = cx('root', needImage && 'image-overlay', className);
|
|
23
|
+
return ((0, jsx_runtime_1.jsxs)("span", { className: rootClassName, style: style, "data-testid": testId, children: [needImage && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("img", { src: src, alt: '', className: cx('image'), onError: () => toggleNeedImage(false) }) })), !needImage && (0, jsx_runtime_1.jsx)("span", { className: cx('content'), children: children })] }));
|
|
24
|
+
}
|
|
25
|
+
exports.Avatar = Avatar;
|
|
26
|
+
//# sourceMappingURL=avatar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../src/avatar/avatar.tsx"],"names":[],"mappings":";;;;;;;AAAA,iCAA4C;AAC5C,2DAAyC;AACzC,8EAA0C;AAG1C,MAAM,EAAE,GAAG,cAAU,CAAC,IAAI,CAAC,4BAAM,CAAC,CAAC;AAEnC;;;;GAIG;AACH,SAAgB,MAAM,CAAC,EACrB,GAAG,EACH,SAAS,EACT,KAAK,EACL,QAAQ,EACR,aAAa,EAAE,MAAM,GAAG,QAAQ,GACpB;IACZ,MAAM,CAAC,SAAS,EAAE,eAAe,CAAC,GAAG,IAAA,gBAAQ,EAAC,GAAG,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC;IAElE,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,eAAe,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC;IAChC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEV,MAAM,aAAa,GAAG,EAAE,CAAC,MAAM,EAAE,SAAS,IAAI,eAAe,EAAE,SAAS,CAAC,CAAC;IAE1E,OAAO,CACL,kCAAM,SAAS,EAAE,aAAa,EAAE,KAAK,EAAE,KAAK,iBAAe,MAAM,aAE9D,SAAS,IAAI,CACZ,2DACE,gCAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAC,EAAE,EAAC,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,KAAK,CAAC,GAAI,GACtF,CACJ,EAGA,CAAC,SAAS,IAAI,iCAAM,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,YAAG,QAAQ,GAAQ,IAC3D,CACR,CAAC;AACJ,CAAC;AA5BD,wBA4BC"}
|
|
@@ -1,16 +1,4 @@
|
|
|
1
|
-
@use '
|
|
2
|
-
|
|
3
|
-
$sizes: 40, 48, 56, 64, 72, 80, 104;
|
|
4
|
-
|
|
5
|
-
$textSizes: (
|
|
6
|
-
40: 12,
|
|
7
|
-
48: 16,
|
|
8
|
-
56: 16,
|
|
9
|
-
64: 16,
|
|
10
|
-
72: 16,
|
|
11
|
-
80: 16,
|
|
12
|
-
104: 24,
|
|
13
|
-
);
|
|
1
|
+
@use '../colors';
|
|
14
2
|
|
|
15
3
|
@mixin layer {
|
|
16
4
|
position: absolute;
|
|
@@ -29,49 +17,36 @@ $textSizes: (
|
|
|
29
17
|
flex-shrink: 0;
|
|
30
18
|
border-radius: 50%;
|
|
31
19
|
overflow: hidden;
|
|
20
|
+
width: var(--avatar-size, 72px);
|
|
21
|
+
height: var(--avatar-size, 72px);
|
|
22
|
+
color: var(--avatar-text-color, #{colors.$basic-gray87});
|
|
32
23
|
&::before {
|
|
33
24
|
@include layer;
|
|
34
25
|
content: '';
|
|
35
26
|
display: block;
|
|
36
|
-
background: var(--avatar-color,
|
|
27
|
+
background: var(--avatar-color, #{colors.$basic-gray4});
|
|
37
28
|
opacity: var(--avatar-color-opacity, 1);
|
|
38
29
|
}
|
|
30
|
+
&.image-overlay::after {
|
|
31
|
+
@include layer;
|
|
32
|
+
content: '';
|
|
33
|
+
pointer-events: none;
|
|
34
|
+
background: #000;
|
|
35
|
+
opacity: 0.04;
|
|
36
|
+
}
|
|
39
37
|
}
|
|
40
38
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
height: #{$size}px;
|
|
45
|
-
.monogram {
|
|
46
|
-
font-size: #{map.get($textSizes, $size)}px;
|
|
47
|
-
}
|
|
48
|
-
}
|
|
39
|
+
.image {
|
|
40
|
+
@include layer;
|
|
41
|
+
object-fit: cover;
|
|
49
42
|
}
|
|
50
43
|
|
|
51
|
-
.
|
|
44
|
+
.content {
|
|
45
|
+
font-size: var(--avatar-font-size, calc(var(--avatar-size, 72px) / 3));
|
|
52
46
|
position: relative;
|
|
53
|
-
padding: 0 8px;
|
|
54
47
|
font-weight: 600;
|
|
55
48
|
white-space: nowrap;
|
|
56
|
-
overflow: hidden;
|
|
57
|
-
text-overflow: ellipsis;
|
|
58
49
|
|
|
59
50
|
// ВАЖНО: чтобы например обертка в виде ссылки не накидывала text-decoration: underline
|
|
60
51
|
text-decoration: none;
|
|
61
52
|
}
|
|
62
|
-
|
|
63
|
-
.icon {
|
|
64
|
-
position: relative;
|
|
65
|
-
fill: currentColor;
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
.layer {
|
|
69
|
-
@include layer;
|
|
70
|
-
&.image {
|
|
71
|
-
object-fit: cover;
|
|
72
|
-
}
|
|
73
|
-
&.image-overlay {
|
|
74
|
-
background: #000;
|
|
75
|
-
opacity: 0.04;
|
|
76
|
-
}
|
|
77
|
-
}
|
package/avatar/index.d.ts
CHANGED
|
@@ -1,30 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
export
|
|
4
|
-
/** Цвет аватара без картинки. */
|
|
5
|
-
bgColor?: Token;
|
|
6
|
-
/** Цвет аватара без картинки. */
|
|
7
|
-
bgOpacity?: number;
|
|
8
|
-
/** Класс. */
|
|
9
|
-
className?: string;
|
|
10
|
-
/** Ссылка на картинку. */
|
|
11
|
-
imageUrl?: string;
|
|
12
|
-
/** Монограмма без картинки. */
|
|
13
|
-
monogram?: string;
|
|
14
|
-
/** Размер аватара. */
|
|
15
|
-
size?: number;
|
|
16
|
-
/** Стиль элементов rect/image, формирующего маску "super ellipse". */
|
|
17
|
-
style?: CSSProperties;
|
|
18
|
-
/** Цвет текста без картинки. */
|
|
19
|
-
textColor?: Token;
|
|
20
|
-
/** Текст без картинки. */
|
|
21
|
-
title?: string;
|
|
22
|
-
/** Идентификатор для систем автоматизированного тестирования. */
|
|
23
|
-
'data-testid'?: string;
|
|
24
|
-
}
|
|
25
|
-
/**
|
|
26
|
-
* Компонент аватара.
|
|
27
|
-
* @param props Свойства компонента.
|
|
28
|
-
* @return Элемент.
|
|
29
|
-
*/
|
|
30
|
-
export declare function Avatar({ size: sizeProp, imageUrl, bgColor, bgOpacity, textColor, title, monogram, className, style, 'data-testid': testId, }: AvatarProps): JSX.Element;
|
|
1
|
+
export type { AvatarProps, AvatarStyle } from './types';
|
|
2
|
+
export { Avatar } from './avatar';
|
|
3
|
+
export { getNameInitials, getAvatarIconProps, getUserAvatarProps, getUserAvatarColor, } from './utils';
|
package/avatar/index.js
CHANGED
|
@@ -1,44 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.Avatar = void 0;
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
const avatar_module_scss_1 = __importDefault(require("./avatar.module.scss"));
|
|
15
|
-
const SIZES = [40, 48, 56, 64, 72, 80, 104];
|
|
16
|
-
const ICON_SIZES = {
|
|
17
|
-
40: 16,
|
|
18
|
-
48: 24,
|
|
19
|
-
56: 24,
|
|
20
|
-
64: 24,
|
|
21
|
-
72: 24,
|
|
22
|
-
80: 24,
|
|
23
|
-
104: 24,
|
|
24
|
-
};
|
|
25
|
-
const cx = bind_1.default.bind(avatar_module_scss_1.default);
|
|
26
|
-
/**
|
|
27
|
-
* Компонент аватара.
|
|
28
|
-
* @param props Свойства компонента.
|
|
29
|
-
* @return Элемент.
|
|
30
|
-
*/
|
|
31
|
-
function Avatar({ size: sizeProp = 72, imageUrl, bgColor = 'basic-gray4', bgOpacity = 1, textColor = 'basic-gray87', title, monogram = (0, utils_1.getMonogram)(title), className, style, 'data-testid': testId = 'avatar', }) {
|
|
32
|
-
const [needImage, toggleImage] = (0, react_1.useState)(() => Boolean(imageUrl));
|
|
33
|
-
(0, react_1.useEffect)(() => {
|
|
34
|
-
toggleImage(Boolean(imageUrl));
|
|
35
|
-
}, [imageUrl]);
|
|
36
|
-
const size = SIZES.includes(sizeProp) ? sizeProp : 72;
|
|
37
|
-
return ((0, jsx_runtime_1.jsxs)("div", { "data-testid": testId, className: cx('root', `size-${size}`, (0, colors_2.color)(textColor), className), style: {
|
|
38
|
-
...style,
|
|
39
|
-
'--avatar-color': !needImage ? colors_1.COLORS.get(bgColor) : undefined,
|
|
40
|
-
'--avatar-color-opacity': bgOpacity,
|
|
41
|
-
}, children: [!needImage && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: monogram ? ((0, jsx_runtime_1.jsx)("span", { className: cx('monogram'), children: monogram.slice(0, 2).toUpperCase() })) : ((0, jsx_runtime_1.jsx)(Person_1.default, { fill: colors_1.COLORS.get(textColor), width: ICON_SIZES[size], height: ICON_SIZES[size], className: cx('icon') })) })), needImage && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("img", { src: imageUrl, alt: '', className: cx('layer', 'image'), onError: () => toggleImage(false) }), (0, jsx_runtime_1.jsx)("div", { className: cx('layer', 'image-overlay') })] }))] }));
|
|
42
|
-
}
|
|
43
|
-
exports.Avatar = Avatar;
|
|
3
|
+
exports.getUserAvatarColor = exports.getUserAvatarProps = exports.getAvatarIconProps = exports.getNameInitials = exports.Avatar = void 0;
|
|
4
|
+
var avatar_1 = require("./avatar");
|
|
5
|
+
Object.defineProperty(exports, "Avatar", { enumerable: true, get: function () { return avatar_1.Avatar; } });
|
|
6
|
+
var utils_1 = require("./utils");
|
|
7
|
+
Object.defineProperty(exports, "getNameInitials", { enumerable: true, get: function () { return utils_1.getNameInitials; } });
|
|
8
|
+
Object.defineProperty(exports, "getAvatarIconProps", { enumerable: true, get: function () { return utils_1.getAvatarIconProps; } });
|
|
9
|
+
Object.defineProperty(exports, "getUserAvatarProps", { enumerable: true, get: function () { return utils_1.getUserAvatarProps; } });
|
|
10
|
+
Object.defineProperty(exports, "getUserAvatarColor", { enumerable: true, get: function () { return utils_1.getUserAvatarColor; } });
|
|
44
11
|
//# sourceMappingURL=index.js.map
|
package/avatar/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/avatar/index.
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/avatar/index.ts"],"names":[],"mappings":";;;AACA,mCAAkC;AAAzB,gGAAA,MAAM,OAAA;AACf,iCAKiB;AAJf,wGAAA,eAAe,OAAA;AACf,2GAAA,kBAAkB,OAAA;AAClB,2GAAA,kBAAkB,OAAA;AAClB,2GAAA,kBAAkB,OAAA"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import type { CSSProperties, ReactNode } from 'react';
|
|
2
|
+
import type { WithTestId } from '../types';
|
|
3
|
+
export interface AvatarStyle extends CSSProperties {
|
|
4
|
+
'--avatar-size'?: string;
|
|
5
|
+
'--avatar-color'?: string;
|
|
6
|
+
'--avatar-color-opacity'?: number | string;
|
|
7
|
+
'--avatar-text-color'?: string;
|
|
8
|
+
'--avatar-font-size'?: string;
|
|
9
|
+
}
|
|
10
|
+
export interface AvatarProps extends WithTestId {
|
|
11
|
+
/** Класс. */
|
|
12
|
+
className?: string;
|
|
13
|
+
/** Изображение. */
|
|
14
|
+
src?: string;
|
|
15
|
+
/** Стили. */
|
|
16
|
+
style?: AvatarStyle;
|
|
17
|
+
/** Содержимое. */
|
|
18
|
+
children?: ReactNode;
|
|
19
|
+
}
|
package/avatar/types.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/avatar/types.ts"],"names":[],"mappings":""}
|
package/avatar/utils.d.ts
CHANGED
|
@@ -1,6 +1,30 @@
|
|
|
1
|
+
import type { SVGAttributes } from 'react';
|
|
2
|
+
import type { AvatarProps } from './types';
|
|
1
3
|
/**
|
|
2
|
-
*
|
|
3
|
-
* @param
|
|
4
|
-
* @
|
|
4
|
+
* Возвращает свойства для аватара пользователя.
|
|
5
|
+
* @param payload Данные пользователя.
|
|
6
|
+
* @param customProps Дополнительные свойства аватара.
|
|
7
|
+
* @return Свойства.
|
|
5
8
|
*/
|
|
6
|
-
export declare function
|
|
9
|
+
export declare function getUserAvatarProps({ id, name, image, }: {
|
|
10
|
+
id?: number;
|
|
11
|
+
name?: string;
|
|
12
|
+
image?: string;
|
|
13
|
+
}, customProps?: AvatarProps): AvatarProps;
|
|
14
|
+
/**
|
|
15
|
+
* Возвращает цвет аватара текущего пользователя.
|
|
16
|
+
* @param identity Срока, идентифицирующая пользователя.
|
|
17
|
+
* @return Цвет.
|
|
18
|
+
*/
|
|
19
|
+
export declare function getUserAvatarColor(identity: string): string;
|
|
20
|
+
/**
|
|
21
|
+
* Формирует инициалы имени.
|
|
22
|
+
* @param value Строка.
|
|
23
|
+
* @return Инициалы.
|
|
24
|
+
*/
|
|
25
|
+
export declare function getNameInitials(value: any): string;
|
|
26
|
+
/**
|
|
27
|
+
* Возвращает свойства для иконки внутри аватара.
|
|
28
|
+
* @return Свойства.
|
|
29
|
+
*/
|
|
30
|
+
export declare function getAvatarIconProps(): SVGAttributes<SVGSVGElement>;
|
package/avatar/utils.js
CHANGED
|
@@ -1,22 +1,85 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
2
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.
|
|
6
|
+
exports.getAvatarIconProps = exports.getNameInitials = exports.getUserAvatarColor = exports.getUserAvatarProps = void 0;
|
|
7
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
8
|
+
const Person_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/Person"));
|
|
9
|
+
const classnames_1 = __importDefault(require("classnames"));
|
|
10
|
+
const utils_module_scss_1 = __importDefault(require("./utils.module.scss"));
|
|
11
|
+
const USER_AVATAR_COLOR_TOKENS = [
|
|
12
|
+
'#eb8585',
|
|
13
|
+
'#fda09b',
|
|
14
|
+
'#f49bb1',
|
|
15
|
+
'#ffd785',
|
|
16
|
+
'#ffbb85',
|
|
17
|
+
'#89d7c7',
|
|
18
|
+
'#85e5ac',
|
|
19
|
+
'#b5ef90',
|
|
20
|
+
'#93c4ee',
|
|
21
|
+
'#85caf5',
|
|
22
|
+
'#85ddea',
|
|
23
|
+
'#b3c1c7',
|
|
24
|
+
'#dc9bd5',
|
|
25
|
+
'#b4a8f0',
|
|
26
|
+
'#c999e9',
|
|
27
|
+
];
|
|
4
28
|
/**
|
|
5
|
-
*
|
|
6
|
-
* @param
|
|
7
|
-
* @
|
|
29
|
+
* Возвращает свойства для аватара пользователя.
|
|
30
|
+
* @param payload Данные пользователя.
|
|
31
|
+
* @param customProps Дополнительные свойства аватара.
|
|
32
|
+
* @return Свойства.
|
|
8
33
|
*/
|
|
9
|
-
function
|
|
34
|
+
function getUserAvatarProps({ id, name, image, }, customProps) {
|
|
35
|
+
return {
|
|
36
|
+
src: image,
|
|
37
|
+
children: getNameInitials(name) || (0, jsx_runtime_1.jsx)(Person_1.default, { ...getAvatarIconProps() }),
|
|
38
|
+
...customProps,
|
|
39
|
+
className: (0, classnames_1.default)(utils_module_scss_1.default.user, customProps === null || customProps === void 0 ? void 0 : customProps.className),
|
|
40
|
+
style: {
|
|
41
|
+
'--avatar-color': id ? getUserAvatarColor(`${id}`) : undefined,
|
|
42
|
+
...customProps === null || customProps === void 0 ? void 0 : customProps.style,
|
|
43
|
+
},
|
|
44
|
+
};
|
|
45
|
+
}
|
|
46
|
+
exports.getUserAvatarProps = getUserAvatarProps;
|
|
47
|
+
/**
|
|
48
|
+
* Возвращает цвет аватара текущего пользователя.
|
|
49
|
+
* @param identity Срока, идентифицирующая пользователя.
|
|
50
|
+
* @return Цвет.
|
|
51
|
+
*/
|
|
52
|
+
function getUserAvatarColor(identity) {
|
|
53
|
+
let total = 0;
|
|
54
|
+
for (let i = 0; i < identity.length; i++) {
|
|
55
|
+
total += identity.charCodeAt(i);
|
|
56
|
+
}
|
|
57
|
+
const list = USER_AVATAR_COLOR_TOKENS;
|
|
58
|
+
const hash = total % list.length;
|
|
59
|
+
return list[hash];
|
|
60
|
+
}
|
|
61
|
+
exports.getUserAvatarColor = getUserAvatarColor;
|
|
62
|
+
/**
|
|
63
|
+
* Формирует инициалы имени.
|
|
64
|
+
* @param value Строка.
|
|
65
|
+
* @return Инициалы.
|
|
66
|
+
*/
|
|
67
|
+
function getNameInitials(value) {
|
|
68
|
+
var _a;
|
|
10
69
|
if (typeof value === 'string') {
|
|
11
|
-
return value
|
|
12
|
-
.split(/\s+/g)
|
|
13
|
-
.slice(0, 2)
|
|
14
|
-
.map(s => s[0])
|
|
15
|
-
.reverse()
|
|
16
|
-
.join('')
|
|
17
|
-
.toUpperCase();
|
|
70
|
+
return ((_a = value[0]) !== null && _a !== void 0 ? _a : '').toUpperCase();
|
|
18
71
|
}
|
|
19
72
|
return '';
|
|
20
73
|
}
|
|
21
|
-
exports.
|
|
74
|
+
exports.getNameInitials = getNameInitials;
|
|
75
|
+
/**
|
|
76
|
+
* Возвращает свойства для иконки внутри аватара.
|
|
77
|
+
* @return Свойства.
|
|
78
|
+
*/
|
|
79
|
+
function getAvatarIconProps() {
|
|
80
|
+
return {
|
|
81
|
+
className: utils_module_scss_1.default.icon,
|
|
82
|
+
};
|
|
83
|
+
}
|
|
84
|
+
exports.getAvatarIconProps = getAvatarIconProps;
|
|
22
85
|
//# sourceMappingURL=utils.js.map
|
package/avatar/utils.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/avatar/utils.
|
|
1
|
+
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/avatar/utils.tsx"],"names":[],"mappings":";;;;;;;AAEA,6FAAwE;AACxE,4DAAoC;AACpC,4EAAyC;AAEzC,MAAM,wBAAwB,GAA0B;IACtD,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;CACV,CAAC;AAEF;;;;;GAKG;AACH,SAAgB,kBAAkB,CAChC,EACE,EAAE,EACF,IAAI,EACJ,KAAK,GAKN,EACD,WAAyB;IAEzB,OAAO;QACL,GAAG,EAAE,KAAK;QACV,QAAQ,EAAE,eAAe,CAAC,IAAI,CAAC,IAAI,uBAAC,gBAAS,OAAK,kBAAkB,EAAE,GAAI;QAC1E,GAAG,WAAW;QACd,SAAS,EAAE,IAAA,oBAAU,EAAC,2BAAM,CAAC,IAAI,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,SAAS,CAAC;QAC1D,KAAK,EAAE;YACL,gBAAgB,EAAE,EAAE,CAAC,CAAC,CAAC,kBAAkB,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS;YAC9D,GAAG,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,KAAK;SACtB;KACF,CAAC;AACJ,CAAC;AAtBD,gDAsBC;AAED;;;;GAIG;AACH,SAAgB,kBAAkB,CAAC,QAAgB;IACjD,IAAI,KAAK,GAAG,CAAC,CAAC;IAEd,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QACxC,KAAK,IAAI,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;KACjC;IAED,MAAM,IAAI,GAAG,wBAAwB,CAAC;IACtC,MAAM,IAAI,GAAG,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC;IAEjC,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC;AACpB,CAAC;AAXD,gDAWC;AAED;;;;GAIG;AACH,SAAgB,eAAe,CAAC,KAAU;;IACxC,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;QAC7B,OAAO,CAAC,MAAA,KAAK,CAAC,CAAC,CAAC,mCAAI,EAAE,CAAC,CAAC,WAAW,EAAE,CAAC;KACvC;IAED,OAAO,EAAE,CAAC;AACZ,CAAC;AAND,0CAMC;AAED;;;GAGG;AACH,SAAgB,kBAAkB;IAChC,OAAO;QACL,SAAS,EAAE,2BAAM,CAAC,IAAI;KACvB,CAAC;AACJ,CAAC;AAJD,gDAIC"}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
@use '../colors';
|
|
2
|
+
|
|
3
|
+
@mixin size-xs {
|
|
4
|
+
--button-min-size: 32px;
|
|
5
|
+
--button-font-size: 14px;
|
|
6
|
+
--button-line-height: 20px;
|
|
7
|
+
--button-gutter: 12px;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
@mixin size-s {
|
|
11
|
+
--button-min-size: 40px;
|
|
12
|
+
--button-font-size: 16px;
|
|
13
|
+
--button-line-height: 24px;
|
|
14
|
+
--button-gutter: 20px;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
@mixin size-m {
|
|
18
|
+
--button-min-size: 48px;
|
|
19
|
+
--button-font-size: 16px;
|
|
20
|
+
--button-line-height: 24px;
|
|
21
|
+
--button-gutter: 24px;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
@mixin color-primary {
|
|
25
|
+
--button-color: #fff;
|
|
26
|
+
--button-background: #{colors.$basic-blue};
|
|
27
|
+
--button-hover-background: #{colors.$additional-unlit-blue};
|
|
28
|
+
--button-disabled-color: #{colors.$basic-gray24};
|
|
29
|
+
--button-disabled-background: #{colors.$basic-gray8};
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
@mixin color-secondary {
|
|
33
|
+
--button-color: #{colors.$basic-gray87};
|
|
34
|
+
--button-background: #{colors.$basic-gray8};
|
|
35
|
+
--button-hover-background: #{colors.$basic-gray12};
|
|
36
|
+
--button-disabled-color: #{colors.$basic-gray24};
|
|
37
|
+
--button-disabled-background: #{colors.$basic-gray8};
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
@mixin color-success {
|
|
41
|
+
--button-color: #fff;
|
|
42
|
+
--button-background: #{colors.$additional-teal};
|
|
43
|
+
--button-hover-background: #{colors.$additional-dark-teal};
|
|
44
|
+
--button-disabled-color: #{colors.$basic-gray24};
|
|
45
|
+
--button-disabled-background: #{colors.$basic-gray8};
|
|
46
|
+
}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
@use '../colors';
|
|
2
|
+
@use './button-util';
|
|
2
3
|
|
|
3
4
|
.root {
|
|
4
5
|
position: relative;
|
|
@@ -31,8 +32,8 @@
|
|
|
31
32
|
&:disabled,
|
|
32
33
|
&.disabled {
|
|
33
34
|
pointer-events: none;
|
|
34
|
-
color:
|
|
35
|
-
background
|
|
35
|
+
color: var(--button-disabled-color, var(--button-color));
|
|
36
|
+
background: var(--button-disabled-background, var(--button-background));
|
|
36
37
|
}
|
|
37
38
|
&.loading {
|
|
38
39
|
color: transparent;
|
|
@@ -41,28 +42,24 @@
|
|
|
41
42
|
pointer-events: 0;
|
|
42
43
|
}
|
|
43
44
|
}
|
|
45
|
+
&:not(:disabled):hover {
|
|
46
|
+
cursor: pointer;
|
|
47
|
+
color: var(--button-hover-color, var(--button-color));
|
|
48
|
+
background: var(--button-hover-background, var(--button-background));
|
|
49
|
+
}
|
|
44
50
|
}
|
|
45
51
|
|
|
46
52
|
// sizes
|
|
47
53
|
.size-xs {
|
|
48
|
-
|
|
49
|
-
--button-font-size: 14px;
|
|
50
|
-
--button-line-height: 20px;
|
|
51
|
-
--button-gutter: 12px;
|
|
54
|
+
@include button-util.size-xs;
|
|
52
55
|
}
|
|
53
56
|
|
|
54
57
|
.size-s {
|
|
55
|
-
|
|
56
|
-
--button-font-size: 16px;
|
|
57
|
-
--button-line-height: 24px;
|
|
58
|
-
--button-gutter: 20px;
|
|
58
|
+
@include button-util.size-s;
|
|
59
59
|
}
|
|
60
60
|
|
|
61
61
|
.size-m {
|
|
62
|
-
|
|
63
|
-
--button-font-size: 16px;
|
|
64
|
-
--button-line-height: 24px;
|
|
65
|
-
--button-gutter: 24px;
|
|
62
|
+
@include button-util.size-m;
|
|
66
63
|
}
|
|
67
64
|
|
|
68
65
|
// content
|
|
@@ -82,21 +79,15 @@
|
|
|
82
79
|
|
|
83
80
|
// view variants
|
|
84
81
|
.view-primary {
|
|
85
|
-
|
|
86
|
-
--button-color: #fff;
|
|
87
|
-
&:hover:not(:disabled) {
|
|
88
|
-
cursor: pointer;
|
|
89
|
-
--button-background: #1b74c1;
|
|
90
|
-
}
|
|
82
|
+
@include button-util.color-primary;
|
|
91
83
|
}
|
|
92
84
|
|
|
93
85
|
.view-secondary {
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
}
|
|
86
|
+
@include button-util.color-secondary;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.view-success {
|
|
90
|
+
@include button-util.color-success;
|
|
100
91
|
}
|
|
101
92
|
|
|
102
93
|
// icons
|
package/button/index.d.ts
CHANGED
|
@@ -1,8 +1,16 @@
|
|
|
1
|
-
import { AnchorHTMLAttributes, ButtonHTMLAttributes, ComponentType, HTMLAttributes, SVGAttributes } from 'react';
|
|
1
|
+
import { AnchorHTMLAttributes, ButtonHTMLAttributes, ComponentType, CSSProperties, HTMLAttributes, SVGAttributes } from 'react';
|
|
2
2
|
export type ButtonSize = 'xs' | 's' | 'm';
|
|
3
|
-
export type ButtonViewType = 'primary' | 'secondary';
|
|
3
|
+
export type ButtonViewType = 'primary' | 'secondary' | 'success' | 'unset';
|
|
4
4
|
export type ButtonAppearance = 'button' | 'link' | 'container';
|
|
5
5
|
export type ButtonIconPosition = 'start' | 'end';
|
|
6
|
+
export interface ButtonStyle extends CSSProperties {
|
|
7
|
+
'--button-color'?: string;
|
|
8
|
+
'--button-background'?: string;
|
|
9
|
+
'--button-hover-color'?: string;
|
|
10
|
+
'--button-hover-background'?: string;
|
|
11
|
+
'--button-disabled-color'?: string;
|
|
12
|
+
'--button-disabled-background'?: string;
|
|
13
|
+
}
|
|
6
14
|
interface CommonProps<T extends ButtonAppearance = ButtonAppearance> {
|
|
7
15
|
/** Определяет внешний вид кнопки. */
|
|
8
16
|
viewType?: ButtonViewType;
|
|
@@ -20,6 +28,8 @@ interface CommonProps<T extends ButtonAppearance = ButtonAppearance> {
|
|
|
20
28
|
disabled?: boolean;
|
|
21
29
|
/** Идентификатор для систем автоматизированного тестирования. */
|
|
22
30
|
'data-testid'?: string;
|
|
31
|
+
/** Стили. */
|
|
32
|
+
style?: ButtonStyle;
|
|
23
33
|
}
|
|
24
34
|
type AsButtonProps = CommonProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof CommonProps> & {
|
|
25
35
|
appearance?: 'button';
|
package/button/index.js
CHANGED
|
@@ -18,7 +18,7 @@ const cx = bind_1.default.bind(button_module_scss_1.default);
|
|
|
18
18
|
exports.Button = (0, react_1.forwardRef)(function Button({ viewType = 'primary', icon: Icon, iconPosition = 'start', size = 'm', loading, disabled, className, children, 'data-testid': testId = 'button', ...restProps }, ref) {
|
|
19
19
|
const hasIcon = Boolean(Icon);
|
|
20
20
|
const hasText = Boolean(children);
|
|
21
|
-
const rootClassName = cx('root', `size-${size}`, `view-${viewType}`, loading && 'loading', disabled && 'disabled', hasIcon && !hasText && 'icon-only', hasText && hasIcon && iconPosition === 'start' && 'icon-start', hasText && hasIcon && iconPosition === 'end' && 'icon-end', className);
|
|
21
|
+
const rootClassName = cx('root', `size-${size}`, viewType !== 'unset' && `view-${viewType}`, loading && 'loading', disabled && 'disabled', hasIcon && !hasText && 'icon-only', hasText && hasIcon && iconPosition === 'start' && 'icon-start', hasText && hasIcon && iconPosition === 'end' && 'icon-end', className);
|
|
22
22
|
const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [Icon && iconPosition === 'start' && (0, jsx_runtime_1.jsx)(Icon, { className: cx('icon') }), children, Icon && iconPosition === 'end' && (0, jsx_runtime_1.jsx)(Icon, { className: cx('icon') }), loading && ((0, jsx_runtime_1.jsx)(spinner_1.SpinnerSVG, { size: 's', color: disabled || viewType === 'secondary' ? 'basic-gray38' : 'basic-white', className: cx('spinner') }))] }));
|
|
23
23
|
let result = null;
|
|
24
24
|
if (restProps.appearance === 'container') {
|
package/button/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/button/index.tsx"],"names":[],"mappings":";;;;;;;AAAA,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/button/index.tsx"],"names":[],"mappings":";;;;;;;AAAA,iCASe;AACf,wCAAwC;AACxC,2DAAyC;AACzC,8EAA0C;AA4D1C,MAAM,EAAE,GAAG,cAAU,CAAC,IAAI,CAAC,4BAAM,CAAC,CAAC;AAEnC;;;;GAIG;AACU,QAAA,MAAM,GAAG,IAAA,kBAAU,EAAmB,SAAS,MAAM,CAChE,EACE,QAAQ,GAAG,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,YAAY,GAAG,OAAO,EACtB,IAAI,GAAG,GAAG,EACV,OAAO,EACP,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,aAAa,EAAE,MAAM,GAAG,QAAQ,EAChC,GAAG,SAAS,EACb,EACD,GAAG;IAEH,MAAM,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9B,MAAM,OAAO,GAAG,OAAO,CAAC,QAAQ,CAAC,CAAC;IAElC,MAAM,aAAa,GAAG,EAAE,CACtB,MAAM,EACN,QAAQ,IAAI,EAAE,EACd,QAAQ,KAAK,OAAO,IAAI,QAAQ,QAAQ,EAAE,EAC1C,OAAO,IAAI,SAAS,EACpB,QAAQ,IAAI,UAAU,EACtB,OAAO,IAAI,CAAC,OAAO,IAAI,WAAW,EAClC,OAAO,IAAI,OAAO,IAAI,YAAY,KAAK,OAAO,IAAI,YAAY,EAC9D,OAAO,IAAI,OAAO,IAAI,YAAY,KAAK,KAAK,IAAI,UAAU,EAC1D,SAAS,CACV,CAAC;IAEF,MAAM,OAAO,GAAG,CACd,6DAEG,IAAI,IAAI,YAAY,KAAK,OAAO,IAAI,uBAAC,IAAI,IAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,GAAI,EACnE,QAAQ,EACR,IAAI,IAAI,YAAY,KAAK,KAAK,IAAI,uBAAC,IAAI,IAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,GAAI,EAEjE,OAAO,IAAI,CACV,uBAAC,oBAAU,IACT,IAAI,EAAC,GAAG,EACR,KAAK,EAAE,QAAQ,IAAI,QAAQ,KAAK,WAAW,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,aAAa,EAC5E,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,GACxB,CACH,IACA,CACJ,CAAC;IAEF,IAAI,MAAM,GAAwB,IAAI,CAAC;IAEvC,IAAI,SAAS,CAAC,UAAU,KAAK,WAAW,EAAE;QACxC,MAAM,GAAG,CACP,mCAAS,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,aAAa,EAAE,IAAI,EAAC,QAAQ,iBAAc,MAAM,YACtF,OAAO,GACJ,CACP,CAAC;KACH;SAAM,IAAI,SAAS,CAAC,UAAU,KAAK,MAAM,EAAE;QAC1C,MAAM,GAAG,CACP,iCAAO,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,aAAa,iBAAe,MAAM,YACtE,OAAO,GACN,CACL,CAAC;KACH;SAAM;QACL,MAAM,GAAG,CACP,sCACM,SAAS,EACb,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,aAAa,EACxB,QAAQ,EAAE,QAAQ,iBACL,MAAM,YAElB,OAAO,GACD,CACV,CAAC;KACH;IAED,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC,CAAC"}
|