superdesk-ui-framework 3.0.23 → 3.0.27

package/react/components/avatar/avatar-group.js

@@ -59,6 +59,8 @@ var avatar_1 = require("./avatar");
 var avatar_wrapper_1 = require("./avatar-wrapper");
 var avatar_number_1 = require("./avatar-number");
 var avatar_placeholder_1 = require("./avatar-placeholder");
+var Spacer_1 = require("../Spacer");
+var WithPopover_1 = require("../WithPopover");
 function isAvatar(item) {
     return item['kind'] == null;
 }
@@ -69,7 +71,8 @@ var AvatarGroup = /** @class */ (function (_super) {
     }
     AvatarGroup.prototype.render = function () {
         var _this = this;
-        var _a = this.props, size = _a.size, items = _a.items;
+        var _a;
+        var _b = this.props, size = _b.size, items = _b.items;
         var someIconsHaveExtraElements = items.filter(isAvatar).some(function (_a) {
             var icon = _a.icon, administratorIndicator = _a.administratorIndicator;
             return icon != null || administratorIndicator != null;
@@ -87,7 +90,31 @@ var AvatarGroup = /** @class */ (function (_super) {
             }
         })();
         var itemsOverLimit = items.length - max;
-        return (React.createElement("div", { className: (0, classnames_1.default)('sd-avatar-group', 'sd-avatar-group--stacked', "sd-avatar-group--stacked--gap-".concat(gap)), role: 'group' },
+        var PlusButtonWrapper = function (_a) {
+            var children = _a.children, onToggle = _a.onToggle;
+            if (_this.props.onClick == null) {
+                return (React.createElement("button", { style: { padding: 0 }, onClick: function (event) {
+                        if (_this.props.onClick == null) {
+                            onToggle(event.target);
+                        }
+                    } }, children));
+            }
+            else {
+                return React.createElement(React.Fragment, null, children);
+            }
+        };
+        var someHaveDisplayName = this.props.items.some(function (item) { return isAvatar(item) && item.displayName.length > 0; });
+        return (React.createElement(WithPopover_1.WithPopover, { zIndex: (_a = this.props.zIndex) !== null && _a !== void 0 ? _a : 101, placement: 'bottom-end', component: function () { return (React.createElement("div", { className: "avatar-popup" }, _this.props.items.map(function (item, index) {
+                return (someHaveDisplayName
+                    ? React.createElement(Spacer_1.Spacer, { h: true, alignItems: 'center', gap: '16', noGrow: true, key: index },
+                        isAvatar(item)
+                            && item.displayName,
+                        isAvatar(item)
+                            ? (React.createElement(avatar_1.Avatar, { size: 'small', imageUrl: item.imageUrl, initials: item.initials, displayName: item.displayName, icon: item.icon }))
+                            : (React.createElement(avatar_placeholder_1.AvatarPlaceholder, { kind: 'plus-button', size: 'small', icon: item.icon, onClick: item.onClick })))
+                    : React.createElement("div", null,
+                        React.createElement(avatar_placeholder_1.AvatarPlaceholder, { kind: 'plus-button', size: 'small', icon: item.icon, onClick: isAvatar(item) ? undefined : item.onClick, key: index })));
+            }))); } }, function (onToggle) { return (React.createElement("div", { className: (0, classnames_1.default)('sd-avatar-group', 'sd-avatar-group--stacked', "sd-avatar-group--stacked--gap-".concat(gap)), role: 'group', onClick: _this.props.onClick },
             items.slice(0, max).map(function (item, index) {
                 if (isAvatar(item)) {
                     return (React.createElement(avatar_1.Avatar, __assign({}, item, { key: index, size: size })));
@@ -96,8 +123,9 @@ var AvatarGroup = /** @class */ (function (_super) {
                     return (React.createElement(avatar_placeholder_1.AvatarPlaceholder, __assign({}, item, { key: index, size: _this.props.size })));
                 }
             }),
-            itemsOverLimit > 0 && (React.createElement(avatar_wrapper_1.AvatarWrapper, { size: size, isEmpty: false },
-                React.createElement(avatar_number_1.AvatarContentNumber, { number: "".concat(itemsOverLimit) })))));
+            itemsOverLimit > 0 && (React.createElement(PlusButtonWrapper, { onToggle: onToggle },
+                React.createElement(avatar_wrapper_1.AvatarWrapper, { size: size, isEmpty: false },
+                    React.createElement(avatar_number_1.AvatarContentNumber, { number: "".concat(itemsOverLimit) })))))); }));
     };
     return AvatarGroup;
 }(React.PureComponent));

package/react/components/avatar/avatar.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 export interface IPropsAvatar {
     imageUrl: string | null;
-    tooltip: string | null;
+    displayName: string;
     /** 3 letters max */
     initials: string | null;
     size: 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large';

package/react/components/avatar/avatar.js

@@ -49,10 +49,10 @@ var Avatar = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     Avatar.prototype.render = function () {
-        var _a = this.props, imageUrl = _a.imageUrl, initials = _a.initials, size = _a.size, statusIndicator = _a.statusIndicator, administratorIndicator = _a.administratorIndicator, icon = _a.icon, tooltip = _a.tooltip;
+        var _a = this.props, imageUrl = _a.imageUrl, initials = _a.initials, size = _a.size, statusIndicator = _a.statusIndicator, administratorIndicator = _a.administratorIndicator, icon = _a.icon, displayName = _a.displayName;
         return (React.createElement(avatar_wrapper_1.AvatarWrapper, { size: size, statusIndicator: statusIndicator ? { status: statusIndicator, tooltipText: '' } : undefined, administratorIndicator: administratorIndicator ? { enabled: true, tooltipText: '' } : undefined, icon: icon, isEmpty: false }, imageUrl != null || initials == null
-            ? (React.createElement(avatar_image_1.AvatarContentImage, { imageUrl: imageUrl, tooltipText: tooltip !== null && tooltip !== void 0 ? tooltip : undefined }))
-            : (React.createElement(avatar_text_1.AvatarContentText, { text: initials, tooltipText: tooltip !== null && tooltip !== void 0 ? tooltip : undefined }))));
+            ? (React.createElement(avatar_image_1.AvatarContentImage, { imageUrl: imageUrl, tooltipText: displayName }))
+            : (React.createElement(avatar_text_1.AvatarContentText, { text: initials, tooltipText: displayName }))));
     };
     return Avatar;
 }(React.PureComponent));