@synerise/ds-avatar 0.17.28 → 0.18.1
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 +19 -0
- package/dist/Avatar.d.ts +1 -1
- package/dist/Avatar.js +8 -12
- package/dist/Avatar.types.d.ts +11 -7
- package/dist/ObjectAvatar/ObjectAvatar.d.ts +1 -1
- package/dist/modules.d.js +1 -1
- package/dist/style/index.css +1 -1
- package/dist/utils.d.ts +3 -3
- package/dist/utils.js +6 -10
- package/package.json +11 -11
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,25 @@
|
|
|
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
|
+
## [0.18.1](https://github.com/synerise/synerise-design/compare/@synerise/ds-avatar@0.18.0...@synerise/ds-avatar@0.18.1) (2025-02-07)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @synerise/ds-avatar
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
# [0.18.0](https://github.com/synerise/synerise-design/compare/@synerise/ds-avatar@0.17.28...@synerise/ds-avatar@0.18.0) (2025-01-29)
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
### Features
|
|
18
|
+
|
|
19
|
+
* antd@4.24 react@18 ([d97a667](https://github.com/synerise/synerise-design/commit/d97a667b1f33aed3177e1851de3b6f60be2d46a6))
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
6
25
|
## [0.17.28](https://github.com/synerise/synerise-design/compare/@synerise/ds-avatar@0.17.27...@synerise/ds-avatar@0.17.28) (2025-01-21)
|
|
7
26
|
|
|
8
27
|
**Note:** Version bump only for package @synerise/ds-avatar
|
package/dist/Avatar.d.ts
CHANGED
|
@@ -9,5 +9,5 @@ export declare const ICON_SIZES: {
|
|
|
9
9
|
large: number;
|
|
10
10
|
extraLarge: number;
|
|
11
11
|
};
|
|
12
|
-
declare const Avatar: React.
|
|
12
|
+
declare const Avatar: ({ backgroundColor, backgroundColorHue, children, disabled, hasStatus, iconComponent, iconScale, tooltip, size, src, ...antdProps }: AvatarProps) => React.JSX.Element;
|
|
13
13
|
export default Avatar;
|
package/dist/Avatar.js
CHANGED
|
@@ -1,13 +1,8 @@
|
|
|
1
|
-
var _excluded = ["backgroundColor", "backgroundColorHue", "children", "disabled", "hasStatus", "iconComponent", "iconScale", "tooltip", "size"],
|
|
1
|
+
var _excluded = ["backgroundColor", "backgroundColorHue", "children", "disabled", "hasStatus", "iconComponent", "iconScale", "tooltip", "size", "src"],
|
|
2
2
|
_excluded2 = ["type"];
|
|
3
3
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
4
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
5
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
6
|
-
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
7
|
-
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
|
|
8
|
-
function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
9
4
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
10
|
-
import React from 'react';
|
|
5
|
+
import React, { cloneElement } from 'react';
|
|
11
6
|
import Tooltip from '@synerise/ds-tooltip';
|
|
12
7
|
import '@synerise/ds-core/dist/js/style';
|
|
13
8
|
import { isIconComponent, getTooltipProps } from './utils';
|
|
@@ -21,7 +16,6 @@ export var ICON_SIZES = {
|
|
|
21
16
|
extraLarge: 42
|
|
22
17
|
};
|
|
23
18
|
var Avatar = function Avatar(_ref) {
|
|
24
|
-
var _iconElement;
|
|
25
19
|
var backgroundColor = _ref.backgroundColor,
|
|
26
20
|
_ref$backgroundColorH = _ref.backgroundColorHue,
|
|
27
21
|
backgroundColorHue = _ref$backgroundColorH === void 0 ? '500' : _ref$backgroundColorH,
|
|
@@ -37,18 +31,19 @@ var Avatar = function Avatar(_ref) {
|
|
|
37
31
|
tooltip = _ref$tooltip === void 0 ? {} : _ref$tooltip,
|
|
38
32
|
_ref$size = _ref.size,
|
|
39
33
|
size = _ref$size === void 0 ? DEFAULT_SIZE : _ref$size,
|
|
34
|
+
src = _ref.src,
|
|
40
35
|
antdProps = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
41
|
-
var sizes =
|
|
36
|
+
var sizes = _extends({}, ICON_SIZES);
|
|
42
37
|
var iconElement = iconComponent;
|
|
43
38
|
|
|
44
39
|
// Enforce icon to be scaled
|
|
45
|
-
if (isIconComponent(
|
|
40
|
+
if (isIconComponent(iconComponent) && iconScale) {
|
|
46
41
|
var _iconElement$props$co;
|
|
47
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$/)) {
|
|
48
43
|
sizes.small = 24;
|
|
49
44
|
}
|
|
50
45
|
var iconSize = sizes[size] || sizes[DEFAULT_SIZE];
|
|
51
|
-
iconElement =
|
|
46
|
+
iconElement = cloneElement(iconElement, {
|
|
52
47
|
size: iconSize
|
|
53
48
|
});
|
|
54
49
|
}
|
|
@@ -69,7 +64,8 @@ var Avatar = function Avatar(_ref) {
|
|
|
69
64
|
backgroundColor: backgroundColor,
|
|
70
65
|
backgroundColorHue: backgroundColorHue,
|
|
71
66
|
disabled: disabled,
|
|
72
|
-
size: size
|
|
67
|
+
size: size,
|
|
68
|
+
src: src !== '' ? src : undefined
|
|
73
69
|
}, antdProps), iconElement || children));
|
|
74
70
|
};
|
|
75
71
|
export default Avatar;
|
package/dist/Avatar.types.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import type { ReactNode, MouseEvent as ReactMouseEvent } from 'react';
|
|
2
2
|
import type { BadgeStatus } from '@synerise/ds-badge';
|
|
3
3
|
import { AvatarProps as AntAvatarProps } from 'antd/lib/avatar';
|
|
4
4
|
import { TooltipProps } from '@synerise/ds-tooltip/dist/Tooltip.types';
|
|
@@ -6,10 +6,11 @@ export type Color = 'red' | 'green' | 'grey' | 'yellow' | 'blue' | 'pink' | 'mar
|
|
|
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;
|
|
8
8
|
export type TooltipObject = TooltipProps & {
|
|
9
|
-
name?:
|
|
10
|
-
email?:
|
|
9
|
+
name?: ReactNode;
|
|
10
|
+
email?: ReactNode;
|
|
11
11
|
};
|
|
12
|
-
export
|
|
12
|
+
export type AvatarProps = Omit<AntAvatarProps, 'size' | 'icon' | 'src'> & {
|
|
13
|
+
src?: string;
|
|
13
14
|
/**
|
|
14
15
|
* Aligns a badge with the avatar
|
|
15
16
|
*/
|
|
@@ -21,7 +22,7 @@ export interface AvatarProps extends Omit<AntAvatarProps, 'size' | 'icon'> {
|
|
|
21
22
|
/**
|
|
22
23
|
* Provides a custom component as a child. If both are provided, the prop icon has a greater priority
|
|
23
24
|
*/
|
|
24
|
-
iconComponent?:
|
|
25
|
+
iconComponent?: ReactNode;
|
|
25
26
|
/**
|
|
26
27
|
* Auto scale icons for sizes
|
|
27
28
|
* @default true
|
|
@@ -43,13 +44,14 @@ export interface AvatarProps extends Omit<AntAvatarProps, 'size' | 'icon'> {
|
|
|
43
44
|
* Text on a tooltip
|
|
44
45
|
*/
|
|
45
46
|
tooltip?: TooltipObject | boolean;
|
|
46
|
-
|
|
47
|
+
children?: ReactNode;
|
|
48
|
+
};
|
|
47
49
|
type DefinedAvatarProps = Pick<AvatarProps, 'style' | 'disabled' | 'iconComponent' | 'size' | 'src'> & {
|
|
48
50
|
backgroundColor?: 'auto' | Color | string;
|
|
49
51
|
badgeStatus?: BadgeStatus;
|
|
50
52
|
text?: string;
|
|
51
53
|
tooltip?: TooltipObject | boolean;
|
|
52
|
-
onClick?: (event
|
|
54
|
+
onClick?: (event?: ReactMouseEvent<HTMLElement, MouseEvent>) => void;
|
|
53
55
|
};
|
|
54
56
|
export type ObjectAvatar = {
|
|
55
57
|
name?: string | null;
|
|
@@ -60,6 +62,7 @@ export type ObjectAvatar = {
|
|
|
60
62
|
export type ObjectAvatarProps = DefinedAvatarProps & {
|
|
61
63
|
object?: ObjectAvatar;
|
|
62
64
|
color?: Color;
|
|
65
|
+
children?: ReactNode;
|
|
63
66
|
};
|
|
64
67
|
export type UserAvatar = {
|
|
65
68
|
firstName?: string | null;
|
|
@@ -69,5 +72,6 @@ export type UserAvatar = {
|
|
|
69
72
|
};
|
|
70
73
|
export type UserAvatarProps = DefinedAvatarProps & {
|
|
71
74
|
user?: UserAvatar;
|
|
75
|
+
children?: ReactNode;
|
|
72
76
|
};
|
|
73
77
|
export {};
|
|
@@ -2,5 +2,5 @@ import React from 'react';
|
|
|
2
2
|
import { ObjectAvatarProps } from '../Avatar.types';
|
|
3
3
|
export declare const DEFAULT_COLOR_HUE = "600";
|
|
4
4
|
export declare const DEFAULT_COLOR = "grey";
|
|
5
|
-
declare const ObjectAvatar: React.
|
|
5
|
+
declare const ObjectAvatar: ({ backgroundColor, badgeStatus, iconComponent, color, object, size, src, tooltip, text, children, disabled, style, ...restProps }: ObjectAvatarProps) => React.JSX.Element;
|
|
6
6
|
export default ObjectAvatar;
|
package/dist/modules.d.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import '@testing-library/jest-dom
|
|
1
|
+
import '@testing-library/jest-dom';
|
package/dist/style/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.ant-
|
|
1
|
+
.ant-avatar{box-sizing:border-box;margin:0;padding:0;color:#6a7580;font-size:13px;font-variant:tabular-nums;line-height:1.38;list-style:none;font-feature-settings:'tnum';position:relative;display:inline-block;overflow:hidden;color:#fff;white-space:nowrap;text-align:center;vertical-align:middle;background:#ccc;width:32px;height:32px;line-height:32px;border-radius:50%}.ant-avatar-image{background:0 0}.ant-avatar .ant-image-img{display:block}.ant-avatar-string{position:absolute;left:50%;transform-origin:0 center}.ant-avatar.ant-avatar-icon{font-size:18px}.ant-avatar.ant-avatar-icon>.anticon{margin:0}.ant-avatar-lg{width:40px;height:40px;line-height:40px;border-radius:50%}.ant-avatar-lg-string{position:absolute;left:50%;transform-origin:0 center}.ant-avatar-lg.ant-avatar-icon{font-size:24px}.ant-avatar-lg.ant-avatar-icon>.anticon{margin:0}.ant-avatar-sm{width:24px;height:24px;line-height:24px;border-radius:50%}.ant-avatar-sm-string{position:absolute;left:50%;transform-origin:0 center}.ant-avatar-sm.ant-avatar-icon{font-size:14px}.ant-avatar-sm.ant-avatar-icon>.anticon{margin:0}.ant-avatar-square{border-radius:3px}.ant-avatar>img{display:block;width:100%;height:100%;object-fit:cover}.ant-avatar-group{display:inline-flex}.ant-avatar-group .ant-avatar{border:1px solid #fff}.ant-avatar-group .ant-avatar:not(:first-child){margin-left:-8px}.ant-avatar-group-popover .ant-avatar+.ant-avatar{margin-left:3px}.ant-avatar-group-rtl .ant-avatar:not(:first-child){margin-right:-8px;margin-left:0}.ant-avatar-group-popover.ant-popover-rtl .ant-avatar+.ant-avatar{margin-right:3px;margin-left:0}
|
package/dist/utils.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { ReactElement, ReactNode } from 'react';
|
|
2
2
|
import { Color, ColorHue, UserAvatar, AvatarProps, TooltipObject } from './Avatar.types';
|
|
3
3
|
export declare function getUserText(user: UserAvatar, src?: string | null, text?: string | null): string | null;
|
|
4
|
-
export declare function isIconComponent(component:
|
|
4
|
+
export declare function isIconComponent(component: ReactNode | undefined): boolean;
|
|
5
5
|
export declare function getObjectName(name?: string | null, text?: string): string | null;
|
|
6
|
-
export declare function addIconColor(iconComponent:
|
|
6
|
+
export declare function addIconColor(iconComponent: ReactNode, color: string): ReactElement;
|
|
7
7
|
export declare function getColorByText(text: string | null, backgroundColor?: 'auto' | Color | string): [Color, ColorHue];
|
|
8
8
|
export declare function getTooltipProps(tooltip: AvatarProps['tooltip']): TooltipObject;
|
package/dist/utils.js
CHANGED
|
@@ -1,9 +1,5 @@
|
|
|
1
|
-
function
|
|
2
|
-
|
|
3
|
-
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
4
|
-
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
|
|
5
|
-
function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
6
|
-
import React from 'react';
|
|
1
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
+
import { cloneElement } from 'react';
|
|
7
3
|
import Icon from '@synerise/ds-icon';
|
|
8
4
|
import selectColorByLetter from '@synerise/ds-utils/dist/selectColorByLetter/selectColorByLetter';
|
|
9
5
|
function getFirstLetter(from) {
|
|
@@ -48,7 +44,7 @@ export function addIconColor(iconComponent, color) {
|
|
|
48
44
|
var _iconElement;
|
|
49
45
|
var iconElement = iconComponent;
|
|
50
46
|
if (iconElement && !((_iconElement = iconElement) != null && (_iconElement = _iconElement.props) != null && _iconElement.color)) {
|
|
51
|
-
iconElement =
|
|
47
|
+
iconElement = cloneElement(iconElement, {
|
|
52
48
|
color: color
|
|
53
49
|
});
|
|
54
50
|
}
|
|
@@ -63,17 +59,17 @@ export function getColorByText(text, backgroundColor) {
|
|
|
63
59
|
return [color, hue];
|
|
64
60
|
}
|
|
65
61
|
export function getTooltipProps(tooltip) {
|
|
66
|
-
var tooltipProps = typeof tooltip === 'object' ?
|
|
62
|
+
var tooltipProps = typeof tooltip === 'object' ? _extends({}, tooltip, {
|
|
67
63
|
title: tooltip.title || tooltip.name,
|
|
68
64
|
description: tooltip.description || tooltip.email
|
|
69
65
|
}) : {};
|
|
70
66
|
var tooltipType = ['title', 'description', 'status'].reduce(function (prev, next) {
|
|
71
67
|
return tooltipProps[next] ? prev + 1 : prev;
|
|
72
68
|
}, 0) === 1 ? 'default' : 'avatar';
|
|
73
|
-
var finalTooltipProps = tooltipType === 'default' ?
|
|
69
|
+
var finalTooltipProps = tooltipType === 'default' ? _extends({}, tooltipProps, {
|
|
74
70
|
title: tooltipProps.title || tooltipProps.description || tooltipProps.status,
|
|
75
71
|
type: 'default'
|
|
76
|
-
}) :
|
|
72
|
+
}) : _extends({}, tooltipProps, {
|
|
77
73
|
type: 'avatar'
|
|
78
74
|
});
|
|
79
75
|
return finalTooltipProps;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-avatar",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.18.1",
|
|
4
4
|
"description": "Avatar UI Component for the Synerise Design System",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"repository": "synerise/synerise-design",
|
|
@@ -34,18 +34,18 @@
|
|
|
34
34
|
],
|
|
35
35
|
"types": "dist/index.d.ts",
|
|
36
36
|
"dependencies": {
|
|
37
|
-
"@synerise/ds-badge": "^0.
|
|
38
|
-
"@synerise/ds-icon": "^0.
|
|
39
|
-
"@synerise/ds-status": "^0.
|
|
40
|
-
"@synerise/ds-tooltip": "^0.
|
|
41
|
-
"@synerise/ds-typography": "^0.
|
|
42
|
-
"@synerise/ds-utils": "^0.
|
|
37
|
+
"@synerise/ds-badge": "^0.9.0",
|
|
38
|
+
"@synerise/ds-icon": "^0.71.0",
|
|
39
|
+
"@synerise/ds-status": "^0.8.1",
|
|
40
|
+
"@synerise/ds-tooltip": "^0.15.0",
|
|
41
|
+
"@synerise/ds-typography": "^0.17.0",
|
|
42
|
+
"@synerise/ds-utils": "^0.32.0"
|
|
43
43
|
},
|
|
44
44
|
"peerDependencies": {
|
|
45
45
|
"@synerise/ds-core": "*",
|
|
46
|
-
"antd": "4.
|
|
47
|
-
"react": ">=16.9.0 <=
|
|
48
|
-
"styled-components": "5.
|
|
46
|
+
"antd": "4.24.16",
|
|
47
|
+
"react": ">=16.9.0 <= 18.3.1",
|
|
48
|
+
"styled-components": "^5.3.3"
|
|
49
49
|
},
|
|
50
|
-
"gitHead": "
|
|
50
|
+
"gitHead": "9aaa7260a474fb987a6dad183ce6e609ddc965d2"
|
|
51
51
|
}
|