@os-design/core 1.0.236 → 1.0.237
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/Avatar/index.js
CHANGED
|
@@ -14,7 +14,7 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
14
14
|
var _Image = _interopRequireDefault(require("../Image"));
|
|
15
15
|
var _nameToInitials = _interopRequireDefault(require("./utils/nameToInitials"));
|
|
16
16
|
var _strToHue = _interopRequireDefault(require("./utils/strToHue"));
|
|
17
|
-
var _excluded = ["firstName", "lastName", "image", "imageProps", "online", "size"];
|
|
17
|
+
var _excluded = ["firstName", "lastName", "image", "imageProps", "online", "size", "children"];
|
|
18
18
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
|
|
19
19
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
20
20
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
@@ -29,7 +29,7 @@ var AvatarContainer = (0, _styled["default"])('div', (0, _utils.omitEmotionProps
|
|
|
29
29
|
}, function (p) {
|
|
30
30
|
return (0, _theming.clr)(p.bgColor);
|
|
31
31
|
}, _styles.sizeStyles);
|
|
32
|
-
var
|
|
32
|
+
var IconContainer = _styled["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n font-size: 0.6em;\n line-height: 0.6;\n"])));
|
|
33
33
|
var Initials = _styled["default"].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n font-size: 0.35em;\n"])));
|
|
34
34
|
var INNER_SIZE = 0.25;
|
|
35
35
|
var OUTER_SIZE = INNER_SIZE * 1.2;
|
|
@@ -52,6 +52,7 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
52
52
|
online = _ref$online === void 0 ? false : _ref$online,
|
|
53
53
|
_ref$size = _ref.size,
|
|
54
54
|
size = _ref$size === void 0 ? '2em' : _ref$size,
|
|
55
|
+
children = _ref.children,
|
|
55
56
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
56
57
|
var _useTheme = (0, _theming.useTheme)(),
|
|
57
58
|
theme = _useTheme.theme;
|
|
@@ -82,7 +83,7 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
82
83
|
if (initials) return /*#__PURE__*/_react["default"].createElement(Initials, null, initials);
|
|
83
84
|
|
|
84
85
|
// Otherwise render the user icon
|
|
85
|
-
return /*#__PURE__*/_react["default"].createElement(
|
|
86
|
+
return /*#__PURE__*/_react["default"].createElement(IconContainer, null, /*#__PURE__*/_react["default"].createElement(_icons.User, null));
|
|
86
87
|
}, [image, imageProps, firstName, lastName]);
|
|
87
88
|
return /*#__PURE__*/_react["default"].createElement(Container, {
|
|
88
89
|
size: size
|
|
@@ -92,7 +93,7 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
92
93
|
"aria-label": fullName || 'User'
|
|
93
94
|
}, rest, {
|
|
94
95
|
ref: ref
|
|
95
|
-
}), renderChildren()), online && /*#__PURE__*/_react["default"].createElement(Online, null));
|
|
96
|
+
}), children ? /*#__PURE__*/_react["default"].createElement(IconContainer, null, children) : renderChildren()), online && /*#__PURE__*/_react["default"].createElement(Online, null));
|
|
96
97
|
});
|
|
97
98
|
Avatar.displayName = 'Avatar';
|
|
98
99
|
var _default = exports["default"] = Avatar;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["_styled","_interopRequireDefault","require","_icons","_styles","_theming","_utils","_react","_interopRequireWildcard","_Image","_nameToInitials","_strToHue","_excluded","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","obj","_extends","assign","bind","target","arguments","length","source","key","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","_taggedTemplateLiteral","strings","raw","slice","freeze","defineProperties","value","Container","styled","omitEmotionProps","sizeStyles","AvatarContainer","p","theme","borderRadius","clr","bgColor","UserIcon","User","Initials","div","INNER_SIZE","OUTER_SIZE","Online","span","avatarOnlineColorScoop","avatarOnlineColorBg","Avatar","forwardRef","_ref","ref","firstName","lastName","image","_ref$imageProps","imageProps","_ref$online","online","_ref$size","size","rest","_useTheme","useTheme","useMemo","parts","push","strToHue","join","avatarDefaultColorBg","fullName","filter","undefined","renderChildren","useCallback","createElement","url","cropped","initials","nameToInitials","role","displayName","_default","exports"],"sources":["../../../src/Avatar/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { User } from '@os-design/icons';\nimport { WithSize, sizeStyles } from '@os-design/styles';\nimport { Color, clr, useTheme } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef, useCallback, useMemo } from 'react';\nimport Image, { ImageProps } from '../Image';\nimport nameToInitials from './utils/nameToInitials';\nimport strToHue from './utils/strToHue';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface AvatarProps extends JsxDivProps, WithSize {\n /**\n * Used to render the first letter if the image URL is not specified.\n * @default undefined\n */\n firstName?: string;\n /**\n * Used to render the second letter if the image URL is not specified.\n * @default undefined\n */\n lastName?: string;\n /**\n * The URL of the image.\n * @default undefined\n */\n image?: string;\n /**\n * The props of the image.\n * @default undefined\n */\n imageProps?: Omit<ImageProps, 'url'>;\n /**\n * Whether the user is online.\n * @default false\n */\n online?: boolean;\n}\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n position: relative;\n width: 1em;\n height: 1em;\n min-width: 1em;\n min-height: 1em;\n ${sizeStyles};\n`;\n\ninterface AvatarContainerProps {\n bgColor: Color;\n}\n\nconst AvatarContainer = styled(\n 'div',\n omitEmotionProps('bgColor')\n)<AvatarContainerProps>`\n width: 100%;\n height: 100%;\n border-radius: ${(p) => p.theme.borderRadius}em;\n\n font-weight: 500;\n line-height: 1;\n\n color: hsl(0, 0%, 100%);\n background-color: ${(p) => clr(p.bgColor)};\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n white-space: nowrap; // To disable multiline text\n overflow: hidden; // To trim the image corners\n\n ${sizeStyles};\n`;\n\nconst UserIcon = styled(User)`\n font-size: 0.6em;\n`;\n\nconst Initials = styled.div`\n font-size: 0.35em;\n`;\n\nconst INNER_SIZE = 0.25;\nconst OUTER_SIZE = INNER_SIZE * 1.2;\n\nconst Online = styled.span`\n position: absolute;\n right: -0.05em;\n bottom: -0.05em;\n width: ${OUTER_SIZE}em;\n height: ${OUTER_SIZE}em;\n border-radius: 50%;\n background-color: ${(p) => clr(p.theme.avatarOnlineColorScoop)};\n\n &::before {\n content: '';\n position: absolute;\n left: ${(OUTER_SIZE - INNER_SIZE) / 2}em;\n bottom: ${(OUTER_SIZE - INNER_SIZE) / 2}em;\n width: ${INNER_SIZE}em;\n height: ${INNER_SIZE}em;\n border-radius: 50%;\n background-color: ${(p) => clr(p.theme.avatarOnlineColorBg)};\n }\n`;\n\n/**\n * Avatar can be used to represent people.\n */\nconst Avatar = forwardRef<HTMLDivElement, AvatarProps>(\n (\n {\n firstName,\n lastName,\n image,\n imageProps = {},\n online = false,\n size = '2em',\n ...rest\n },\n ref\n ) => {\n const { theme } = useTheme();\n\n const bgColor = useMemo<Color>(() => {\n const parts: string[] = [];\n if (firstName) parts.push(firstName);\n if (lastName) parts.push(lastName);\n if (parts.length > 0) return [strToHue(parts.join(' ')), 30, 60];\n return theme.avatarDefaultColorBg;\n }, [firstName, lastName, theme.avatarDefaultColorBg]);\n\n const fullName = useMemo(\n () => [firstName, lastName].filter((i) => i).join(' ') || undefined,\n [firstName, lastName]\n );\n\n const renderChildren = useCallback(() => {\n // Render the image if the image property was specified\n if (image) return <Image url={image} cropped {...imageProps} />;\n\n // Render the initials of the name if either firstName or lastName was specified\n const initials = nameToInitials({ firstName, lastName });\n if (initials) return <Initials>{initials}</Initials>;\n\n // Otherwise render the user icon\n return <UserIcon />;\n }, [image, imageProps, firstName, lastName]);\n\n return (\n <Container size={size}>\n <AvatarContainer\n bgColor={bgColor}\n role='img'\n aria-label={fullName || 'User'}\n {...rest}\n ref={ref}\n >\n {renderChildren()}\n </AvatarContainer>\n {online && <Online />}\n </Container>\n );\n }\n);\n\nAvatar.displayName = 'Avatar';\n\nexport default Avatar;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["_styled","_interopRequireDefault","require","_icons","_styles","_theming","_utils","_react","_interopRequireWildcard","_Image","_nameToInitials","_strToHue","_excluded","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","obj","_extends","assign","bind","target","arguments","length","source","key","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","_taggedTemplateLiteral","strings","raw","slice","freeze","defineProperties","value","Container","styled","omitEmotionProps","sizeStyles","AvatarContainer","p","theme","borderRadius","clr","bgColor","IconContainer","div","Initials","INNER_SIZE","OUTER_SIZE","Online","span","avatarOnlineColorScoop","avatarOnlineColorBg","Avatar","forwardRef","_ref","ref","firstName","lastName","image","_ref$imageProps","imageProps","_ref$online","online","_ref$size","size","children","rest","_useTheme","useTheme","useMemo","parts","push","strToHue","join","avatarDefaultColorBg","fullName","filter","undefined","renderChildren","useCallback","createElement","url","cropped","initials","nameToInitials","User","role","displayName","_default","exports"],"sources":["../../../src/Avatar/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { User } from '@os-design/icons';\nimport { WithSize, sizeStyles } from '@os-design/styles';\nimport { Color, clr, useTheme } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef, useCallback, useMemo } from 'react';\nimport Image, { ImageProps } from '../Image';\nimport nameToInitials from './utils/nameToInitials';\nimport strToHue from './utils/strToHue';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface AvatarProps extends JsxDivProps, WithSize {\n /**\n * Used to render the first letter if the image URL is not specified.\n * @default undefined\n */\n firstName?: string;\n /**\n * Used to render the second letter if the image URL is not specified.\n * @default undefined\n */\n lastName?: string;\n /**\n * The URL of the image.\n * @default undefined\n */\n image?: string;\n /**\n * The props of the image.\n * @default undefined\n */\n imageProps?: Omit<ImageProps, 'url'>;\n /**\n * Whether the user is online.\n * @default false\n */\n online?: boolean;\n}\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n position: relative;\n width: 1em;\n height: 1em;\n min-width: 1em;\n min-height: 1em;\n ${sizeStyles};\n`;\n\ninterface AvatarContainerProps {\n bgColor: Color;\n}\n\nconst AvatarContainer = styled(\n 'div',\n omitEmotionProps('bgColor')\n)<AvatarContainerProps>`\n width: 100%;\n height: 100%;\n border-radius: ${(p) => p.theme.borderRadius}em;\n\n font-weight: 500;\n line-height: 1;\n\n color: hsl(0, 0%, 100%);\n background-color: ${(p) => clr(p.bgColor)};\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n white-space: nowrap; // To disable multiline text\n overflow: hidden; // To trim the image corners\n\n ${sizeStyles};\n`;\n\nconst IconContainer = styled.div`\n font-size: 0.6em;\n line-height: 0.6;\n`;\n\nconst Initials = styled.div`\n font-size: 0.35em;\n`;\n\nconst INNER_SIZE = 0.25;\nconst OUTER_SIZE = INNER_SIZE * 1.2;\n\nconst Online = styled.span`\n position: absolute;\n right: -0.05em;\n bottom: -0.05em;\n width: ${OUTER_SIZE}em;\n height: ${OUTER_SIZE}em;\n border-radius: 50%;\n background-color: ${(p) => clr(p.theme.avatarOnlineColorScoop)};\n\n &::before {\n content: '';\n position: absolute;\n left: ${(OUTER_SIZE - INNER_SIZE) / 2}em;\n bottom: ${(OUTER_SIZE - INNER_SIZE) / 2}em;\n width: ${INNER_SIZE}em;\n height: ${INNER_SIZE}em;\n border-radius: 50%;\n background-color: ${(p) => clr(p.theme.avatarOnlineColorBg)};\n }\n`;\n\n/**\n * Avatar can be used to represent people.\n */\nconst Avatar = forwardRef<HTMLDivElement, AvatarProps>(\n (\n {\n firstName,\n lastName,\n image,\n imageProps = {},\n online = false,\n size = '2em',\n children,\n ...rest\n },\n ref\n ) => {\n const { theme } = useTheme();\n\n const bgColor = useMemo<Color>(() => {\n const parts: string[] = [];\n if (firstName) parts.push(firstName);\n if (lastName) parts.push(lastName);\n if (parts.length > 0) return [strToHue(parts.join(' ')), 30, 60];\n return theme.avatarDefaultColorBg;\n }, [firstName, lastName, theme.avatarDefaultColorBg]);\n\n const fullName = useMemo(\n () => [firstName, lastName].filter((i) => i).join(' ') || undefined,\n [firstName, lastName]\n );\n\n const renderChildren = useCallback(() => {\n // Render the image if the image property was specified\n if (image) return <Image url={image} cropped {...imageProps} />;\n\n // Render the initials of the name if either firstName or lastName was specified\n const initials = nameToInitials({ firstName, lastName });\n if (initials) return <Initials>{initials}</Initials>;\n\n // Otherwise render the user icon\n return (\n <IconContainer>\n <User />\n </IconContainer>\n );\n }, [image, imageProps, firstName, lastName]);\n\n return (\n <Container size={size}>\n <AvatarContainer\n bgColor={bgColor}\n role='img'\n aria-label={fullName || 'User'}\n {...rest}\n ref={ref}\n >\n {children ? (\n <IconContainer>{children}</IconContainer>\n ) : (\n renderChildren()\n )}\n </AvatarContainer>\n {online && <Online />}\n </Container>\n );\n }\n);\n\nAvatar.displayName = 'Avatar';\n\nexport default Avatar;\n"],"mappings":"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"}
|
package/dist/esm/Avatar/index.js
CHANGED
|
@@ -36,8 +36,9 @@ const AvatarContainer = styled('div', omitEmotionProps('bgColor'))`
|
|
|
36
36
|
|
|
37
37
|
${sizeStyles};
|
|
38
38
|
`;
|
|
39
|
-
const
|
|
39
|
+
const IconContainer = styled.div`
|
|
40
40
|
font-size: 0.6em;
|
|
41
|
+
line-height: 0.6;
|
|
41
42
|
`;
|
|
42
43
|
const Initials = styled.div`
|
|
43
44
|
font-size: 0.35em;
|
|
@@ -75,6 +76,7 @@ const Avatar = /*#__PURE__*/forwardRef(({
|
|
|
75
76
|
imageProps = {},
|
|
76
77
|
online = false,
|
|
77
78
|
size = '2em',
|
|
79
|
+
children,
|
|
78
80
|
...rest
|
|
79
81
|
}, ref) => {
|
|
80
82
|
const {
|
|
@@ -103,7 +105,7 @@ const Avatar = /*#__PURE__*/forwardRef(({
|
|
|
103
105
|
if (initials) return /*#__PURE__*/React.createElement(Initials, null, initials);
|
|
104
106
|
|
|
105
107
|
// Otherwise render the user icon
|
|
106
|
-
return /*#__PURE__*/React.createElement(
|
|
108
|
+
return /*#__PURE__*/React.createElement(IconContainer, null, /*#__PURE__*/React.createElement(User, null));
|
|
107
109
|
}, [image, imageProps, firstName, lastName]);
|
|
108
110
|
return /*#__PURE__*/React.createElement(Container, {
|
|
109
111
|
size: size
|
|
@@ -113,7 +115,7 @@ const Avatar = /*#__PURE__*/forwardRef(({
|
|
|
113
115
|
"aria-label": fullName || 'User'
|
|
114
116
|
}, rest, {
|
|
115
117
|
ref: ref
|
|
116
|
-
}), renderChildren()), online && /*#__PURE__*/React.createElement(Online, null));
|
|
118
|
+
}), children ? /*#__PURE__*/React.createElement(IconContainer, null, children) : renderChildren()), online && /*#__PURE__*/React.createElement(Online, null));
|
|
117
119
|
});
|
|
118
120
|
Avatar.displayName = 'Avatar';
|
|
119
121
|
export default Avatar;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["styled","User","sizeStyles","clr","useTheme","omitEmotionProps","React","forwardRef","useCallback","useMemo","Image","nameToInitials","strToHue","Container","AvatarContainer","p","theme","borderRadius","bgColor","
|
|
1
|
+
{"version":3,"file":"index.js","names":["styled","User","sizeStyles","clr","useTheme","omitEmotionProps","React","forwardRef","useCallback","useMemo","Image","nameToInitials","strToHue","Container","AvatarContainer","p","theme","borderRadius","bgColor","IconContainer","div","Initials","INNER_SIZE","OUTER_SIZE","Online","span","avatarOnlineColorScoop","avatarOnlineColorBg","Avatar","firstName","lastName","image","imageProps","online","size","children","rest","ref","parts","push","length","join","avatarDefaultColorBg","fullName","filter","i","undefined","renderChildren","createElement","_extends","url","cropped","initials","role","displayName"],"sources":["../../../src/Avatar/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { User } from '@os-design/icons';\nimport { WithSize, sizeStyles } from '@os-design/styles';\nimport { Color, clr, useTheme } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef, useCallback, useMemo } from 'react';\nimport Image, { ImageProps } from '../Image';\nimport nameToInitials from './utils/nameToInitials';\nimport strToHue from './utils/strToHue';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface AvatarProps extends JsxDivProps, WithSize {\n /**\n * Used to render the first letter if the image URL is not specified.\n * @default undefined\n */\n firstName?: string;\n /**\n * Used to render the second letter if the image URL is not specified.\n * @default undefined\n */\n lastName?: string;\n /**\n * The URL of the image.\n * @default undefined\n */\n image?: string;\n /**\n * The props of the image.\n * @default undefined\n */\n imageProps?: Omit<ImageProps, 'url'>;\n /**\n * Whether the user is online.\n * @default false\n */\n online?: boolean;\n}\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n position: relative;\n width: 1em;\n height: 1em;\n min-width: 1em;\n min-height: 1em;\n ${sizeStyles};\n`;\n\ninterface AvatarContainerProps {\n bgColor: Color;\n}\n\nconst AvatarContainer = styled(\n 'div',\n omitEmotionProps('bgColor')\n)<AvatarContainerProps>`\n width: 100%;\n height: 100%;\n border-radius: ${(p) => p.theme.borderRadius}em;\n\n font-weight: 500;\n line-height: 1;\n\n color: hsl(0, 0%, 100%);\n background-color: ${(p) => clr(p.bgColor)};\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n white-space: nowrap; // To disable multiline text\n overflow: hidden; // To trim the image corners\n\n ${sizeStyles};\n`;\n\nconst IconContainer = styled.div`\n font-size: 0.6em;\n line-height: 0.6;\n`;\n\nconst Initials = styled.div`\n font-size: 0.35em;\n`;\n\nconst INNER_SIZE = 0.25;\nconst OUTER_SIZE = INNER_SIZE * 1.2;\n\nconst Online = styled.span`\n position: absolute;\n right: -0.05em;\n bottom: -0.05em;\n width: ${OUTER_SIZE}em;\n height: ${OUTER_SIZE}em;\n border-radius: 50%;\n background-color: ${(p) => clr(p.theme.avatarOnlineColorScoop)};\n\n &::before {\n content: '';\n position: absolute;\n left: ${(OUTER_SIZE - INNER_SIZE) / 2}em;\n bottom: ${(OUTER_SIZE - INNER_SIZE) / 2}em;\n width: ${INNER_SIZE}em;\n height: ${INNER_SIZE}em;\n border-radius: 50%;\n background-color: ${(p) => clr(p.theme.avatarOnlineColorBg)};\n }\n`;\n\n/**\n * Avatar can be used to represent people.\n */\nconst Avatar = forwardRef<HTMLDivElement, AvatarProps>(\n (\n {\n firstName,\n lastName,\n image,\n imageProps = {},\n online = false,\n size = '2em',\n children,\n ...rest\n },\n ref\n ) => {\n const { theme } = useTheme();\n\n const bgColor = useMemo<Color>(() => {\n const parts: string[] = [];\n if (firstName) parts.push(firstName);\n if (lastName) parts.push(lastName);\n if (parts.length > 0) return [strToHue(parts.join(' ')), 30, 60];\n return theme.avatarDefaultColorBg;\n }, [firstName, lastName, theme.avatarDefaultColorBg]);\n\n const fullName = useMemo(\n () => [firstName, lastName].filter((i) => i).join(' ') || undefined,\n [firstName, lastName]\n );\n\n const renderChildren = useCallback(() => {\n // Render the image if the image property was specified\n if (image) return <Image url={image} cropped {...imageProps} />;\n\n // Render the initials of the name if either firstName or lastName was specified\n const initials = nameToInitials({ firstName, lastName });\n if (initials) return <Initials>{initials}</Initials>;\n\n // Otherwise render the user icon\n return (\n <IconContainer>\n <User />\n </IconContainer>\n );\n }, [image, imageProps, firstName, lastName]);\n\n return (\n <Container size={size}>\n <AvatarContainer\n bgColor={bgColor}\n role='img'\n aria-label={fullName || 'User'}\n {...rest}\n ref={ref}\n >\n {children ? (\n <IconContainer>{children}</IconContainer>\n ) : (\n renderChildren()\n )}\n </AvatarContainer>\n {online && <Online />}\n </Container>\n );\n }\n);\n\nAvatar.displayName = 'Avatar';\n\nexport default Avatar;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Avatar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAc,MAAM,mBAAmB,CAAC;AAGzD,OAAO,KAA2C,MAAM,OAAO,CAAC;AAChE,OAAc,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAI7C,KAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,MAAM,WAAW,WAAY,SAAQ,WAAW,EAAE,QAAQ;IAKxD,SAAS,CAAC,EAAE,MAAM,CAAC;IAKnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAKlB,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,UAAU,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC;IAKrC,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Avatar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAc,MAAM,mBAAmB,CAAC;AAGzD,OAAO,KAA2C,MAAM,OAAO,CAAC;AAChE,OAAc,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAI7C,KAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,MAAM,WAAW,WAAY,SAAQ,WAAW,EAAE,QAAQ;IAKxD,SAAS,CAAC,EAAE,MAAM,CAAC;IAKnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAKlB,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,UAAU,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC;IAKrC,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AA2ED,QAAA,MAAM,MAAM,oFAgEX,CAAC;AAIF,eAAe,MAAM,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@os-design/core",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.237",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"repository": "git@gitlab.com:os-team/libs/os-design.git",
|
|
6
6
|
"main": "dist/cjs/index.js",
|
|
@@ -59,5 +59,5 @@
|
|
|
59
59
|
"react": ">=18",
|
|
60
60
|
"react-dom": ">=18"
|
|
61
61
|
},
|
|
62
|
-
"gitHead": "
|
|
62
|
+
"gitHead": "9724a7c0e9e501d993bb185b6894d6a2c3cf4ad8"
|
|
63
63
|
}
|
package/src/Avatar/index.tsx
CHANGED
|
@@ -74,8 +74,9 @@ const AvatarContainer = styled(
|
|
|
74
74
|
${sizeStyles};
|
|
75
75
|
`;
|
|
76
76
|
|
|
77
|
-
const
|
|
77
|
+
const IconContainer = styled.div`
|
|
78
78
|
font-size: 0.6em;
|
|
79
|
+
line-height: 0.6;
|
|
79
80
|
`;
|
|
80
81
|
|
|
81
82
|
const Initials = styled.div`
|
|
@@ -118,6 +119,7 @@ const Avatar = forwardRef<HTMLDivElement, AvatarProps>(
|
|
|
118
119
|
imageProps = {},
|
|
119
120
|
online = false,
|
|
120
121
|
size = '2em',
|
|
122
|
+
children,
|
|
121
123
|
...rest
|
|
122
124
|
},
|
|
123
125
|
ref
|
|
@@ -146,7 +148,11 @@ const Avatar = forwardRef<HTMLDivElement, AvatarProps>(
|
|
|
146
148
|
if (initials) return <Initials>{initials}</Initials>;
|
|
147
149
|
|
|
148
150
|
// Otherwise render the user icon
|
|
149
|
-
return
|
|
151
|
+
return (
|
|
152
|
+
<IconContainer>
|
|
153
|
+
<User />
|
|
154
|
+
</IconContainer>
|
|
155
|
+
);
|
|
150
156
|
}, [image, imageProps, firstName, lastName]);
|
|
151
157
|
|
|
152
158
|
return (
|
|
@@ -158,7 +164,11 @@ const Avatar = forwardRef<HTMLDivElement, AvatarProps>(
|
|
|
158
164
|
{...rest}
|
|
159
165
|
ref={ref}
|
|
160
166
|
>
|
|
161
|
-
{
|
|
167
|
+
{children ? (
|
|
168
|
+
<IconContainer>{children}</IconContainer>
|
|
169
|
+
) : (
|
|
170
|
+
renderChildren()
|
|
171
|
+
)}
|
|
162
172
|
</AvatarContainer>
|
|
163
173
|
{online && <Online />}
|
|
164
174
|
</Container>
|