@synerise/ds-avatar 1.3.4 → 1.3.6
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 +8 -0
- package/dist/Avatar.d.ts +2 -4
- package/dist/Avatar.js +38 -56
- package/dist/Avatar.styles.d.ts +7 -7
- package/dist/Avatar.styles.js +42 -67
- package/dist/Avatar.types.d.ts +4 -4
- package/dist/Avatar.types.js +1 -1
- package/dist/DefaultAvatarIcon.d.ts +1 -1
- package/dist/DefaultAvatarIcon.js +15 -19
- package/dist/ObjectAvatar/ObjectAvatar.d.ts +2 -2
- package/dist/ObjectAvatar/ObjectAvatar.js +47 -69
- package/dist/ObjectAvatar/index.js +4 -1
- package/dist/UserAvatar/UserAvatar.d.ts +2 -2
- package/dist/UserAvatar/UserAvatar.js +60 -80
- package/dist/UserAvatar/index.js +4 -1
- package/dist/assets/style/index-tn0RQdqM.css +0 -0
- package/dist/defaultAvatars/Icon0001.d.ts +1 -1
- package/dist/defaultAvatars/Icon0001.js +23 -80
- package/dist/defaultAvatars/Icon0003.d.ts +1 -1
- package/dist/defaultAvatars/Icon0003.js +14 -52
- package/dist/defaultAvatars/Icon0004.d.ts +1 -1
- package/dist/defaultAvatars/Icon0004.js +14 -52
- package/dist/defaultAvatars/Icon0007.d.ts +1 -1
- package/dist/defaultAvatars/Icon0007.js +24 -88
- package/dist/defaultAvatars/Icon0011.d.ts +1 -1
- package/dist/defaultAvatars/Icon0011.js +11 -39
- package/dist/defaultAvatars/Icon0012.d.ts +1 -1
- package/dist/defaultAvatars/Icon0012.js +17 -64
- package/dist/defaultAvatars/Icon0014.d.ts +1 -1
- package/dist/defaultAvatars/Icon0014.js +11 -39
- package/dist/defaultAvatars/Icon0015.d.ts +1 -1
- package/dist/defaultAvatars/Icon0015.js +14 -52
- package/dist/defaultAvatars/Icon0022.d.ts +1 -1
- package/dist/defaultAvatars/Icon0022.js +16 -66
- package/dist/defaultAvatars/Icon0024.d.ts +1 -1
- package/dist/defaultAvatars/Icon0024.js +11 -39
- package/dist/defaultAvatars/Icon0025.d.ts +1 -1
- package/dist/defaultAvatars/Icon0025.js +11 -39
- package/dist/defaultAvatars/Icon0027.d.ts +1 -1
- package/dist/defaultAvatars/Icon0027.js +23 -80
- package/dist/defaultAvatars/Icon0029.d.ts +1 -1
- package/dist/defaultAvatars/Icon0029.js +24 -88
- package/dist/defaultAvatars/Icon0030.d.ts +1 -1
- package/dist/defaultAvatars/Icon0030.js +24 -88
- package/dist/defaultAvatars/Icon0031.d.ts +1 -1
- package/dist/defaultAvatars/Icon0031.js +30 -111
- package/dist/defaultAvatars/Icon0032.d.ts +1 -1
- package/dist/defaultAvatars/Icon0032.js +11 -39
- package/dist/defaultAvatars/Icon0033.d.ts +1 -1
- package/dist/defaultAvatars/Icon0033.js +16 -66
- package/dist/defaultAvatars/Icon0038.d.ts +1 -1
- package/dist/defaultAvatars/Icon0038.js +20 -83
- package/dist/defaultAvatars/Icon0039.d.ts +1 -1
- package/dist/defaultAvatars/Icon0039.js +14 -52
- package/dist/defaultAvatars/Icon0040.d.ts +1 -1
- package/dist/defaultAvatars/Icon0040.js +23 -80
- package/dist/defaultAvatars/Icon0041.d.ts +1 -1
- package/dist/defaultAvatars/Icon0041.js +24 -88
- package/dist/defaultAvatars/Icon0042.d.ts +1 -1
- package/dist/defaultAvatars/Icon0042.js +14 -52
- package/dist/defaultAvatars/Icon0043.d.ts +1 -1
- package/dist/defaultAvatars/Icon0043.js +14 -52
- package/dist/defaultAvatars/Icon0044.d.ts +1 -1
- package/dist/defaultAvatars/Icon0044.js +20 -83
- package/dist/defaultAvatars/Icon0048.d.ts +1 -1
- package/dist/defaultAvatars/Icon0048.js +20 -83
- package/dist/defaultAvatars/Icon0049.d.ts +1 -1
- package/dist/defaultAvatars/Icon0049.js +14 -52
- package/dist/defaultAvatars/Icon0050.d.ts +1 -1
- package/dist/defaultAvatars/Icon0050.js +17 -64
- package/dist/defaultAvatars/Icon0051.d.ts +1 -1
- package/dist/defaultAvatars/Icon0051.js +24 -88
- package/dist/defaultAvatars/Icon0053.d.ts +1 -1
- package/dist/defaultAvatars/Icon0053.js +20 -83
- package/dist/defaultAvatars/Icon0054.d.ts +1 -1
- package/dist/defaultAvatars/Icon0054.js +20 -83
- package/dist/defaultAvatars/Icon0055.d.ts +1 -1
- package/dist/defaultAvatars/Icon0055.js +17 -64
- package/dist/defaultAvatars/Icon0056.d.ts +1 -1
- package/dist/defaultAvatars/Icon0056.js +14 -52
- package/dist/defaultAvatars/Icon0058.d.ts +1 -1
- package/dist/defaultAvatars/Icon0058.js +20 -83
- package/dist/defaultAvatars/Icon0060.d.ts +1 -1
- package/dist/defaultAvatars/Icon0060.js +24 -88
- package/dist/defaultAvatars/Icon0061.d.ts +1 -1
- package/dist/defaultAvatars/Icon0061.js +16 -66
- package/dist/defaultAvatars/Icon0066.d.ts +1 -1
- package/dist/defaultAvatars/Icon0066.js +14 -52
- package/dist/defaultAvatars/Icon0067.d.ts +1 -1
- package/dist/defaultAvatars/Icon0067.js +14 -52
- package/dist/defaultAvatars/Icon0070.d.ts +1 -1
- package/dist/defaultAvatars/Icon0070.js +16 -66
- package/dist/defaultAvatars/Icon0071.d.ts +1 -1
- package/dist/defaultAvatars/Icon0071.js +24 -88
- package/dist/defaultAvatars/Icon0073.d.ts +1 -1
- package/dist/defaultAvatars/Icon0073.js +23 -80
- package/dist/defaultAvatars/Icon0074.d.ts +1 -1
- package/dist/defaultAvatars/Icon0074.js +11 -39
- package/dist/defaultAvatars/Icon0075.d.ts +1 -1
- package/dist/defaultAvatars/Icon0075.js +24 -88
- package/dist/defaultAvatars/Icon0076.d.ts +1 -1
- package/dist/defaultAvatars/Icon0076.js +14 -52
- package/dist/defaultAvatars/Icon0077.d.ts +1 -1
- package/dist/defaultAvatars/Icon0077.js +16 -66
- package/dist/defaultAvatars/Icon0078.d.ts +1 -1
- package/dist/defaultAvatars/Icon0078.js +16 -66
- package/dist/defaultAvatars/Icon0079.d.ts +1 -1
- package/dist/defaultAvatars/Icon0079.js +20 -83
- package/dist/defaultAvatars/Icon0082.d.ts +1 -1
- package/dist/defaultAvatars/Icon0082.js +20 -83
- package/dist/defaultAvatars/Icon0083.d.ts +1 -1
- package/dist/defaultAvatars/Icon0083.js +23 -80
- package/dist/defaultAvatars/Icon0084.d.ts +1 -1
- package/dist/defaultAvatars/Icon0084.js +16 -66
- package/dist/defaultAvatars/Icon0088.d.ts +1 -1
- package/dist/defaultAvatars/Icon0088.js +11 -39
- package/dist/defaultAvatars/Icon0089.d.ts +1 -1
- package/dist/defaultAvatars/Icon0089.js +20 -83
- package/dist/defaultAvatars/Icon0090.d.ts +1 -1
- package/dist/defaultAvatars/Icon0090.js +23 -80
- package/dist/defaultAvatars/Icon0091.d.ts +1 -1
- package/dist/defaultAvatars/Icon0091.js +20 -83
- package/dist/defaultAvatars/Icon0092.d.ts +1 -1
- package/dist/defaultAvatars/Icon0092.js +23 -80
- package/dist/defaultAvatars/Icon0095.d.ts +1 -1
- package/dist/defaultAvatars/Icon0095.js +24 -88
- package/dist/defaultAvatars/Icon0098.d.ts +1 -1
- package/dist/defaultAvatars/Icon0098.js +17 -64
- package/dist/defaultAvatars/Icon0100.d.ts +1 -1
- package/dist/defaultAvatars/Icon0100.js +20 -83
- package/dist/defaultAvatars/Icon0101.d.ts +1 -1
- package/dist/defaultAvatars/Icon0101.js +24 -88
- package/dist/defaultAvatars/Icon0102.d.ts +1 -1
- package/dist/defaultAvatars/Icon0102.js +17 -64
- package/dist/defaultAvatars/Icon0103.d.ts +1 -1
- package/dist/defaultAvatars/Icon0103.js +11 -39
- package/dist/defaultAvatars/Icon0105.d.ts +1 -1
- package/dist/defaultAvatars/Icon0105.js +17 -64
- package/dist/defaultAvatars/Icon0106.d.ts +1 -1
- package/dist/defaultAvatars/Icon0106.js +20 -83
- package/dist/defaultAvatars/Icon0107.d.ts +1 -1
- package/dist/defaultAvatars/Icon0107.js +17 -64
- package/dist/defaultAvatars/Icon0108.d.ts +1 -1
- package/dist/defaultAvatars/Icon0108.js +16 -66
- package/dist/defaultAvatars/Icon0109.d.ts +1 -1
- package/dist/defaultAvatars/Icon0109.js +17 -64
- package/dist/defaultAvatars/Icon0110.d.ts +1 -1
- package/dist/defaultAvatars/Icon0110.js +24 -88
- package/dist/defaultAvatars/Icon0111.d.ts +1 -1
- package/dist/defaultAvatars/Icon0111.js +11 -39
- package/dist/defaultAvatars/Icon0112.d.ts +1 -1
- package/dist/defaultAvatars/Icon0112.js +24 -88
- package/dist/defaultAvatars/Icon0114.d.ts +1 -1
- package/dist/defaultAvatars/Icon0114.js +30 -111
- package/dist/defaultAvatars/Icon0115.d.ts +1 -1
- package/dist/defaultAvatars/Icon0115.js +23 -80
- package/dist/defaultAvatars/Icon0116.d.ts +1 -1
- package/dist/defaultAvatars/Icon0116.js +11 -39
- package/dist/defaultAvatars/Icon0118.d.ts +1 -1
- package/dist/defaultAvatars/Icon0118.js +24 -88
- package/dist/defaultAvatars/Icon0119.d.ts +1 -1
- package/dist/defaultAvatars/Icon0119.js +14 -52
- package/dist/defaultAvatars/Icon0120.d.ts +1 -1
- package/dist/defaultAvatars/Icon0120.js +20 -83
- package/dist/defaultAvatars/Icon0122.d.ts +1 -1
- package/dist/defaultAvatars/Icon0122.js +11 -39
- package/dist/defaultAvatars/Icon0123.d.ts +1 -1
- package/dist/defaultAvatars/Icon0123.js +17 -64
- package/dist/defaultAvatars/Icon0124.d.ts +1 -1
- package/dist/defaultAvatars/Icon0124.js +11 -39
- package/dist/defaultAvatars/Icon0125.d.ts +1 -1
- package/dist/defaultAvatars/Icon0125.js +16 -66
- package/dist/defaultAvatars/Icon0126.d.ts +1 -1
- package/dist/defaultAvatars/Icon0126.js +17 -64
- package/dist/defaultAvatars/Icon0127.d.ts +1 -1
- package/dist/defaultAvatars/Icon0127.js +20 -83
- package/dist/defaultAvatars/Icon0128.d.ts +1 -1
- package/dist/defaultAvatars/Icon0128.js +16 -66
- package/dist/defaultAvatars/Icon0129.d.ts +1 -1
- package/dist/defaultAvatars/Icon0129.js +14 -52
- package/dist/defaultAvatars/Icon0130.d.ts +1 -1
- package/dist/defaultAvatars/Icon0130.js +20 -83
- package/dist/defaultAvatars/Icon0132.d.ts +1 -1
- package/dist/defaultAvatars/Icon0132.js +20 -83
- package/dist/defaultAvatars/Icon0133.d.ts +1 -1
- package/dist/defaultAvatars/Icon0133.js +11 -39
- package/dist/defaultAvatars/Icon0134.d.ts +1 -1
- package/dist/defaultAvatars/Icon0134.js +14 -52
- package/dist/defaultAvatars/Icon0137.d.ts +1 -1
- package/dist/defaultAvatars/Icon0137.js +14 -52
- package/dist/defaultAvatars/Icon0138.d.ts +1 -1
- package/dist/defaultAvatars/Icon0138.js +14 -52
- package/dist/defaultAvatars/Icon0139.d.ts +1 -1
- package/dist/defaultAvatars/Icon0139.js +17 -64
- package/dist/defaultAvatars/Icon0140.d.ts +1 -1
- package/dist/defaultAvatars/Icon0140.js +20 -83
- package/dist/defaultAvatars/Icon0141.d.ts +1 -1
- package/dist/defaultAvatars/Icon0141.js +11 -39
- package/dist/defaultAvatars/Icon0142.d.ts +1 -1
- package/dist/defaultAvatars/Icon0142.js +11 -39
- package/dist/defaultAvatars/Icon0143.d.ts +1 -1
- package/dist/defaultAvatars/Icon0143.js +23 -80
- package/dist/defaultAvatars/Icon0144.d.ts +1 -1
- package/dist/defaultAvatars/Icon0144.js +20 -83
- package/dist/defaultAvatars/Icon0145.d.ts +1 -1
- package/dist/defaultAvatars/Icon0145.js +30 -111
- package/dist/defaultAvatars/Icon0146.d.ts +1 -1
- package/dist/defaultAvatars/Icon0146.js +17 -64
- package/dist/defaultAvatars/Icon0147.d.ts +1 -1
- package/dist/defaultAvatars/Icon0147.js +20 -83
- package/dist/defaultAvatars/Icon0148.d.ts +1 -1
- package/dist/defaultAvatars/Icon0148.js +14 -52
- package/dist/defaultAvatars/Icon0149.d.ts +1 -1
- package/dist/defaultAvatars/Icon0149.js +11 -39
- package/dist/defaultAvatars/Icon015.d.ts +1 -1
- package/dist/defaultAvatars/Icon015.js +16 -66
- package/dist/defaultAvatars/index.d.ts +39 -39
- package/dist/defaultAvatars/index.js +206 -203
- package/dist/index.js +12 -4
- package/dist/modules.d.js +1 -1
- package/dist/modules.d.ts +0 -0
- package/dist/utils.d.ts +3 -2
- package/dist/utils.js +62 -59
- package/package.json +10 -10
- package/dist/Avatar.spec.d.ts +0 -1
- package/dist/ObjectAvatar/ObjectAvatar.spec.d.ts +0 -1
- package/dist/UserAvatar/UserAvatar.spec.d.ts +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,14 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [1.3.6](https://github.com/synerise/synerise-design/compare/@synerise/ds-avatar@1.3.5...@synerise/ds-avatar@1.3.6) (2026-04-01)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @synerise/ds-avatar
|
|
9
|
+
|
|
10
|
+
## [1.3.5](https://github.com/synerise/synerise-design/compare/@synerise/ds-avatar@1.3.4...@synerise/ds-avatar@1.3.5) (2026-03-24)
|
|
11
|
+
|
|
12
|
+
**Note:** Version bump only for package @synerise/ds-avatar
|
|
13
|
+
|
|
6
14
|
## [1.3.4](https://github.com/synerise/synerise-design/compare/@synerise/ds-avatar@1.3.3...@synerise/ds-avatar@1.3.4) (2026-03-20)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @synerise/ds-avatar
|
package/dist/Avatar.d.ts
CHANGED
|
@@ -1,7 +1,5 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import '
|
|
3
|
-
import { type AvatarProps } from './Avatar.types';
|
|
4
|
-
import './style/index.less';
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { AvatarProps } from './Avatar.types';
|
|
5
3
|
export declare const DEFAULT_SIZE = "medium";
|
|
6
4
|
export declare const ICON_SIZES: {
|
|
7
5
|
small: number;
|
package/dist/Avatar.js
CHANGED
|
@@ -1,69 +1,51 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
import
|
|
6
|
-
import '@synerise/ds-core/dist/js/style';
|
|
7
|
-
import Tooltip from '@synerise/ds-tooltip';
|
|
8
|
-
import * as S from './Avatar.styles';
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { cloneElement } from "react";
|
|
3
|
+
import Tooltip from "@synerise/ds-tooltip";
|
|
4
|
+
import { AntdAvatar } from "./Avatar.styles.js";
|
|
5
|
+
import { isIconComponent, isSmallIconVariant, getTooltipProps } from "./utils.js";
|
|
9
6
|
import "./style/index.css";
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
export var ICON_SIZES = {
|
|
7
|
+
const DEFAULT_SIZE = "medium";
|
|
8
|
+
const ICON_SIZES = {
|
|
13
9
|
small: 16,
|
|
14
10
|
medium: 24,
|
|
15
11
|
large: 30,
|
|
16
12
|
extraLarge: 42
|
|
17
13
|
};
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
antdProps = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
36
|
-
var sizes = _extends({}, ICON_SIZES);
|
|
37
|
-
var iconElement = iconComponent;
|
|
38
|
-
|
|
39
|
-
// Enforce icon to be scaled
|
|
14
|
+
const Avatar = ({
|
|
15
|
+
backgroundColor,
|
|
16
|
+
backgroundColorHue = "500",
|
|
17
|
+
children,
|
|
18
|
+
disabled = false,
|
|
19
|
+
hasStatus = false,
|
|
20
|
+
iconComponent,
|
|
21
|
+
iconScale = true,
|
|
22
|
+
tooltip = false,
|
|
23
|
+
size = DEFAULT_SIZE,
|
|
24
|
+
src,
|
|
25
|
+
...antdProps
|
|
26
|
+
}) => {
|
|
27
|
+
const sizes = {
|
|
28
|
+
...ICON_SIZES
|
|
29
|
+
};
|
|
30
|
+
let iconElement = iconComponent;
|
|
40
31
|
if (isIconComponent(iconComponent) && iconScale) {
|
|
41
|
-
|
|
42
|
-
if ((_iconElement$props$co = iconElement.props.component) != null && (_iconElement$props$co = _iconElement$props$co.type) != null && (_iconElement$props$co = _iconElement$props$co.name) != null && _iconElement$props$co.match(/S$/)) {
|
|
32
|
+
if (isSmallIconVariant(iconElement)) {
|
|
43
33
|
sizes.small = 24;
|
|
44
34
|
}
|
|
45
|
-
|
|
46
|
-
iconElement =
|
|
35
|
+
const iconSize = sizes[size] || sizes[DEFAULT_SIZE];
|
|
36
|
+
iconElement = cloneElement(iconElement, {
|
|
47
37
|
size: iconSize
|
|
48
38
|
});
|
|
49
39
|
}
|
|
50
|
-
|
|
51
|
-
type
|
|
52
|
-
tooltipProps
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
});
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
hasTooltip: !!hasTooltip,
|
|
62
|
-
backgroundColor: backgroundColor,
|
|
63
|
-
backgroundColorHue: backgroundColorHue,
|
|
64
|
-
disabled: disabled,
|
|
65
|
-
size: size,
|
|
66
|
-
src: src !== '' ? src : undefined
|
|
67
|
-
}, antdProps), iconElement || children));
|
|
40
|
+
const {
|
|
41
|
+
type,
|
|
42
|
+
...tooltipProps
|
|
43
|
+
} = getTooltipProps(tooltip);
|
|
44
|
+
const hasTooltip = Object.keys(tooltipProps).length && !!Object.values(tooltipProps).reduce((prev, next) => next || prev);
|
|
45
|
+
return /* @__PURE__ */ jsx(Tooltip, { type, ...tooltipProps, children: /* @__PURE__ */ jsx(AntdAvatar, { className: "ds-avatar", hasStatus, hasTooltip: !!hasTooltip, backgroundColor, backgroundColorHue, disabled, size, src: src !== "" ? src : void 0, ...antdProps, children: iconElement || children }) });
|
|
46
|
+
};
|
|
47
|
+
export {
|
|
48
|
+
DEFAULT_SIZE,
|
|
49
|
+
ICON_SIZES,
|
|
50
|
+
Avatar as default
|
|
68
51
|
};
|
|
69
|
-
export default Avatar;
|
package/dist/Avatar.styles.d.ts
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
export declare const TooltipGroup: import(
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export declare const TooltipGroup: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
3
3
|
type ExtraAvatarProps = {
|
|
4
4
|
hasTooltip?: boolean;
|
|
5
5
|
};
|
|
6
|
-
export declare const AntdAvatar: import(
|
|
6
|
+
export declare const AntdAvatar: import('styled-components').StyledComponent<React.ForwardRefExoticComponent<Omit<import('antd/lib/avatar').AvatarProps, "icon" | "size" | "src"> & {
|
|
7
7
|
src?: string;
|
|
8
8
|
hasStatus?: boolean;
|
|
9
|
-
size?: import(
|
|
9
|
+
size?: import('./Avatar.types').Size;
|
|
10
10
|
iconComponent?: React.ReactNode;
|
|
11
11
|
iconScale?: boolean;
|
|
12
|
-
backgroundColor?: import(
|
|
13
|
-
backgroundColorHue?: import(
|
|
12
|
+
backgroundColor?: import('./Avatar.types').Color | string;
|
|
13
|
+
backgroundColorHue?: import('./Avatar.types').ColorHue;
|
|
14
14
|
disabled?: boolean;
|
|
15
|
-
tooltip?: import(
|
|
15
|
+
tooltip?: import('./Avatar.types').TooltipObject | boolean;
|
|
16
16
|
children?: React.ReactNode;
|
|
17
17
|
} & ExtraAvatarProps & React.RefAttributes<HTMLButtonElement>>, any, ExtraAvatarProps, never>;
|
|
18
18
|
export {};
|
package/dist/Avatar.styles.js
CHANGED
|
@@ -1,81 +1,56 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
|
|
7
|
-
import { macro } from '@synerise/ds-typography';
|
|
8
|
-
export var TooltipGroup = styled.div.withConfig({
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import Avatar from "antd/lib/avatar";
|
|
3
|
+
import { forwardRef } from "react";
|
|
4
|
+
import styled, { css } from "styled-components";
|
|
5
|
+
import { macro } from "@synerise/ds-typography";
|
|
6
|
+
const TooltipGroup = /* @__PURE__ */ styled.div.withConfig({
|
|
9
7
|
displayName: "Avatarstyles__TooltipGroup",
|
|
10
8
|
componentId: "sc-xcn5o4-0"
|
|
11
9
|
})(["margin:13px 8px;font-size:11px;line-height:1.45;text-align:center;p{margin:0;font-weight:normal;&:first-child{font-weight:500;}}"]);
|
|
12
|
-
|
|
13
|
-
|
|
10
|
+
const applyBgColors = (props) => css(["background:", ";"], props.theme.palette[`${props.backgroundColor}-${props.backgroundColorHue ? props.backgroundColorHue : "400"}`]);
|
|
11
|
+
const applyDisabledStyles = (props) => props.disabled && css(["opacity:0.4;pointer-events:none;"]);
|
|
12
|
+
const BADGE_POSITION = {
|
|
13
|
+
circlesmall: "2px",
|
|
14
|
+
circlemedium: "5px",
|
|
15
|
+
circlelarge: "12px",
|
|
16
|
+
circleextraLarge: "17px",
|
|
17
|
+
squaresmall: "3px",
|
|
18
|
+
squaremedium: "3px",
|
|
19
|
+
squarelarge: "3px",
|
|
20
|
+
squareextraLarge: "3px"
|
|
14
21
|
};
|
|
15
|
-
|
|
16
|
-
return props.disabled && css(["opacity:0.4;pointer-events:none;"]);
|
|
17
|
-
};
|
|
18
|
-
var BADGE_POSITION = {
|
|
19
|
-
circlesmall: '2px',
|
|
20
|
-
circlemedium: '5px',
|
|
21
|
-
circlelarge: '12px',
|
|
22
|
-
circleextraLarge: '17px',
|
|
23
|
-
squaresmall: '3px',
|
|
24
|
-
squaremedium: '3px',
|
|
25
|
-
squarelarge: '3px',
|
|
26
|
-
squareextraLarge: '3px'
|
|
27
|
-
};
|
|
28
|
-
var MACRO_MAPPING = {
|
|
22
|
+
const MACRO_MAPPING = {
|
|
29
23
|
small: macro.xsAvatar,
|
|
30
24
|
medium: macro.small,
|
|
31
25
|
large: macro.small,
|
|
32
26
|
extraLarge: macro.xlAvatar
|
|
33
27
|
};
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
shape =
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
return css(["top:", ";right:", ";"], BADGE_POSITION[badgeKey] ||
|
|
28
|
+
const applyBadgePosition = (props) => {
|
|
29
|
+
const {
|
|
30
|
+
shape = "circle",
|
|
31
|
+
size = "medium"
|
|
32
|
+
} = props;
|
|
33
|
+
const badgeKey = `${shape}${size}`;
|
|
34
|
+
return css(["top:", ";right:", ";"], BADGE_POSITION[badgeKey] || "0", BADGE_POSITION[badgeKey] || "0");
|
|
41
35
|
};
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
size =
|
|
36
|
+
const applyFontSize = (props) => {
|
|
37
|
+
const {
|
|
38
|
+
size = "medium"
|
|
39
|
+
} = props;
|
|
45
40
|
return css(["", ";"], MACRO_MAPPING[size]);
|
|
46
41
|
};
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
ref: ref,
|
|
56
|
-
size: size === 'medium' || size === 'extraLarge' ? 'default' : size
|
|
57
|
-
}, rest));
|
|
58
|
-
})).withConfig({
|
|
42
|
+
const AntdAvatar = /* @__PURE__ */ styled(forwardRef(({
|
|
43
|
+
backgroundColorHue,
|
|
44
|
+
backgroundColor,
|
|
45
|
+
hasStatus,
|
|
46
|
+
hasTooltip,
|
|
47
|
+
size,
|
|
48
|
+
...rest
|
|
49
|
+
}, ref) => /* @__PURE__ */ jsx(Avatar, { ref, size: size === "medium" || size === "extraLarge" ? "default" : size, ...rest }))).withConfig({
|
|
59
50
|
displayName: "Avatarstyles__AntdAvatar",
|
|
60
51
|
componentId: "sc-xcn5o4-1"
|
|
61
|
-
})(["&&{", ";", ";transition:background 0.3s ease;user-select:none;min-width:24px;span{color:", " !important;}&.ant-avatar-square{border-radius:8px;}.ant-avatar-string{width:100%;height:100%;left:0;position:relative;font-size:11px;transform:none !important;", ";", ";user-select:none;pointer-events:none;& > div{max-width:100%;max-height:100%;svg{width:100%;height:100%;}}}&::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000;opacity:0;border-radius:inherit;}", ";", " & ~ .ant-badge-dot{display:none;}", ";", ";", ";", ";}"],
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
}
|
|
66
|
-
return props.theme.palette.white;
|
|
67
|
-
}, function (props) {
|
|
68
|
-
return applyFontSize(props);
|
|
69
|
-
}, macro.flexCentered, function (props) {
|
|
70
|
-
return (props.onClick || props.hasTooltip) && css(["&:hover{&::before{opacity:0.05;}}"]);
|
|
71
|
-
}, function (props) {
|
|
72
|
-
return props.onClick ? css(["cursor:pointer;&:active{&::before{opacity:0.1;}}"]) : false;
|
|
73
|
-
}, function (props) {
|
|
74
|
-
return props.hasStatus && css(["& ~ .ant-badge-dot{display:flex;border:2px solid ", ";box-sizing:border-box;width:10px;height:10px;box-shadow:none;", ";}"], props.theme.palette.white, applyBadgePosition(props));
|
|
75
|
-
}, function (props) {
|
|
76
|
-
return props.size === 'medium' && css(["width:40px;min-width:40px;height:40px;.ant-avatar-string{line-height:40px;}"]);
|
|
77
|
-
}, function (props) {
|
|
78
|
-
return props.size === 'large' && css(["width:84px;min-width:84px;height:84px;.ant-avatar-string{line-height:84px;font-size:18px;}"]);
|
|
79
|
-
}, function (props) {
|
|
80
|
-
return props.size === 'extraLarge' && css(["width:120px;min-width:120px;height:120px;font-size:22px;.ant-avatar-string{line-height:120px;", ";}"], macro.xlAvatar);
|
|
81
|
-
});
|
|
52
|
+
})(["&&{", ";", ";transition:background 0.3s ease;user-select:none;min-width:24px;span{color:", " !important;}&.ant-avatar-square{border-radius:8px;}.ant-avatar-string{width:100%;height:100%;left:0;position:relative;font-size:11px;transform:none !important;", ";", ";user-select:none;pointer-events:none;& > div{max-width:100%;max-height:100%;svg{width:100%;height:100%;}}}&::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000;opacity:0;border-radius:inherit;}", ";", " & ~ .ant-badge-dot{display:none;}", ";", ";", ";", ";}"], (props) => applyBgColors(props), (props) => applyDisabledStyles(props), (props) => props.theme.palette.white, (props) => applyFontSize(props), macro.flexCentered, (props) => (props.onClick || props.hasTooltip) && css(["&:hover{&::before{opacity:0.05;}}"]), (props) => props.onClick ? css(["cursor:pointer;&:active{&::before{opacity:0.1;}}"]) : false, (props) => props.hasStatus && css(["& ~ .ant-badge-dot{display:flex;border:2px solid ", ";box-sizing:border-box;width:10px;height:10px;box-shadow:none;", ";}"], props.theme.palette.white, applyBadgePosition(props)), (props) => props.size === "medium" && css(["width:40px;min-width:40px;height:40px;.ant-avatar-string{line-height:40px;}"]), (props) => props.size === "large" && css(["width:84px;min-width:84px;height:84px;.ant-avatar-string{line-height:84px;font-size:18px;}"]), (props) => props.size === "extraLarge" && css(["width:120px;min-width:120px;height:120px;font-size:22px;.ant-avatar-string{line-height:120px;", ";}"], macro.xlAvatar));
|
|
53
|
+
export {
|
|
54
|
+
AntdAvatar,
|
|
55
|
+
TooltipGroup
|
|
56
|
+
};
|
package/dist/Avatar.types.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import {
|
|
1
|
+
import { AvatarProps as AntAvatarProps } from 'antd/lib/avatar';
|
|
2
|
+
import { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
|
|
3
|
+
import { BadgeStatus } from '@synerise/ds-badge';
|
|
4
|
+
import { TooltipProps } from '@synerise/ds-tooltip';
|
|
5
5
|
export type Color = 'red' | 'green' | 'grey' | 'yellow' | 'blue' | 'pink' | 'mars' | 'orange' | 'fern' | 'cyan' | 'purple' | 'violet';
|
|
6
6
|
export type ColorHue = '900' | '800' | '700' | '600' | '500' | '400' | '300' | '200' | '100' | '050';
|
|
7
7
|
export type Size = 'small' | 'medium' | 'large' | 'extraLarge' | undefined;
|
package/dist/Avatar.types.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
|
|
@@ -1,23 +1,19 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { DEFAULT_AVATARS, TOTAL_DEFAULT_AVATARS } from
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
}
|
|
10
|
-
var safeIndex = (index % total + total) % total;
|
|
11
|
-
var SvgComponent = DEFAULT_AVATARS[safeIndex];
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { DEFAULT_AVATARS, TOTAL_DEFAULT_AVATARS } from "./defaultAvatars/index.js";
|
|
3
|
+
const DefaultAvatarIcon = ({
|
|
4
|
+
index
|
|
5
|
+
}) => {
|
|
6
|
+
const total = TOTAL_DEFAULT_AVATARS;
|
|
7
|
+
const safeIndex = (index % total + total) % total;
|
|
8
|
+
const SvgComponent = DEFAULT_AVATARS[safeIndex];
|
|
12
9
|
if (!SvgComponent) {
|
|
13
10
|
return null;
|
|
14
11
|
}
|
|
15
|
-
return
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
12
|
+
return /* @__PURE__ */ jsx(SvgComponent, { width: "100%", height: "100%", style: {
|
|
13
|
+
display: "block"
|
|
14
|
+
} });
|
|
15
|
+
};
|
|
16
|
+
export {
|
|
17
|
+
TOTAL_DEFAULT_AVATARS,
|
|
18
|
+
DefaultAvatarIcon as default
|
|
22
19
|
};
|
|
23
|
-
export default DefaultAvatarIcon;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import {
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { ObjectAvatarProps } from '../Avatar.types';
|
|
3
3
|
export declare const DEFAULT_COLOR_HUE = "600";
|
|
4
4
|
export declare const DEFAULT_COLOR = "grey";
|
|
5
5
|
declare const ObjectAvatar: ({ backgroundColor, badgeStatus, iconComponent, color, object, size, src, tooltip, text, children, disabled, style, ...restProps }: ObjectAvatarProps) => React.JSX.Element;
|
|
@@ -1,71 +1,49 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
title: objectName || '',
|
|
36
|
-
description: objectDescription || '',
|
|
37
|
-
status: objectStatus ? /*#__PURE__*/React.createElement(Status, {
|
|
38
|
-
label: objectStatus,
|
|
39
|
-
type: "disabled"
|
|
40
|
-
}) : ''
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import Badge from "@synerise/ds-badge";
|
|
3
|
+
import { theme } from "@synerise/ds-core";
|
|
4
|
+
import Icon, { MailM } from "@synerise/ds-icon";
|
|
5
|
+
import Status from "@synerise/ds-status";
|
|
6
|
+
import Avatar from "../Avatar.js";
|
|
7
|
+
import { getObjectName, getColorByText, addIconColor } from "../utils.js";
|
|
8
|
+
const DEFAULT_COLOR_HUE = "600";
|
|
9
|
+
const DEFAULT_COLOR = "grey";
|
|
10
|
+
const ObjectAvatar = ({
|
|
11
|
+
backgroundColor,
|
|
12
|
+
badgeStatus,
|
|
13
|
+
iconComponent,
|
|
14
|
+
color = "grey",
|
|
15
|
+
object = {},
|
|
16
|
+
size,
|
|
17
|
+
src,
|
|
18
|
+
tooltip,
|
|
19
|
+
text,
|
|
20
|
+
children,
|
|
21
|
+
disabled,
|
|
22
|
+
style,
|
|
23
|
+
...restProps
|
|
24
|
+
}) => {
|
|
25
|
+
const {
|
|
26
|
+
name: objectName,
|
|
27
|
+
description: objectDescription,
|
|
28
|
+
status: objectStatus,
|
|
29
|
+
avatar
|
|
30
|
+
} = object || {};
|
|
31
|
+
const defaultTooltip = {
|
|
32
|
+
title: objectName || "",
|
|
33
|
+
description: objectDescription || "",
|
|
34
|
+
status: objectStatus ? /* @__PURE__ */ jsx(Status, { label: objectStatus, type: "disabled" }) : ""
|
|
41
35
|
};
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
shape: "square",
|
|
56
|
-
backgroundColor: avatarBackgroundColor,
|
|
57
|
-
backgroundColorHue: avatarBackgroundHue,
|
|
58
|
-
size: size,
|
|
59
|
-
hasStatus: disabled === true ? false : !!badgeStatus,
|
|
60
|
-
src: avatar || src,
|
|
61
|
-
tooltip: avatarTooltip,
|
|
62
|
-
disabled: disabled,
|
|
63
|
-
style: badgeStatus ? {} : style
|
|
64
|
-
}, restProps), children || avatarText);
|
|
65
|
-
return badgeStatus ? /*#__PURE__*/React.createElement("span", {
|
|
66
|
-
style: style
|
|
67
|
-
}, /*#__PURE__*/React.createElement(Badge, {
|
|
68
|
-
status: badgeStatus
|
|
69
|
-
}, avatarRender)) : avatarRender;
|
|
36
|
+
const avatarText = getObjectName(objectName, text);
|
|
37
|
+
const [avatarBackgroundColor, avatarBackgroundHue] = getColorByText(avatarText, backgroundColor);
|
|
38
|
+
const iconColor = theme.palette[`${color || DEFAULT_COLOR}-${DEFAULT_COLOR_HUE}`];
|
|
39
|
+
const avatarTooltip = tooltip === void 0 && (defaultTooltip.title || defaultTooltip.description) ? defaultTooltip : tooltip;
|
|
40
|
+
const iconElement = addIconColor(iconComponent, iconColor);
|
|
41
|
+
const icon = !avatarText ? iconElement || /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(MailM, {}), color: iconColor }) : null;
|
|
42
|
+
const avatarRender = /* @__PURE__ */ jsx(Avatar, { iconComponent: icon, shape: "square", backgroundColor: avatarBackgroundColor, backgroundColorHue: avatarBackgroundHue, size, hasStatus: disabled === true ? false : !!badgeStatus, src: avatar || src, tooltip: avatarTooltip, disabled, style: badgeStatus ? {} : style, ...restProps, children: children || avatarText });
|
|
43
|
+
return badgeStatus ? /* @__PURE__ */ jsx("span", { style, children: /* @__PURE__ */ jsx(Badge, { status: badgeStatus, children: avatarRender }) }) : avatarRender;
|
|
44
|
+
};
|
|
45
|
+
export {
|
|
46
|
+
DEFAULT_COLOR,
|
|
47
|
+
DEFAULT_COLOR_HUE,
|
|
48
|
+
ObjectAvatar as default
|
|
70
49
|
};
|
|
71
|
-
export default ObjectAvatar;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import {
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { UserAvatarProps } from '../Avatar.types';
|
|
3
3
|
export declare const DEFAULT_COLOR = "grey";
|
|
4
4
|
export declare const DEFAULT_COLOR_HUE = "500";
|
|
5
5
|
declare const UserAvatar: React.FC<UserAvatarProps>;
|