superdesk-ui-framework 3.0.52 → 3.0.54

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "superdesk-ui-framework",
-  "version": "3.0.52",
+  "version": "3.0.54",
   "license": "AGPL-3.0",
   "repository": {
     "type": "git",

package/react/components/SelectWithTemplate.d.ts

@@ -10,6 +10,9 @@ interface IProps<T> extends IInputWrapper {
     itemTemplate: React.ComponentType<{
         option: T | null;
     }>;
+    valueTemplate?: React.ComponentType<{
+        option: T | null;
+    }>;
     noResultsFoundMessage: string;
     filterPlaceholder?: string;
     autoFocus?: boolean;

package/react/components/SelectWithTemplate.js

@@ -75,6 +75,7 @@ var SelectWithTemplate = /** @class */ (function (_super) {
         var _this = this;
         var _a;
         var ItemTemplate = this.props.itemTemplate;
+        var ValueTemplate = this.props.valueTemplate;
         var _b = this.state, loading = _b.loading, options = _b.options;
         var _c = this.props, value = _c.value, onChange = _c.onChange, getLabel = _c.getLabel, disabled = _c.disabled, required = _c.required, zIndex = _c.zIndex, autoFocus = _c.autoFocus, areEqual = _c.areEqual, getItems = _c.getItems, emptyFilterMessage = _c.noResultsFoundMessage, filterPlaceholder = _c.filterPlaceholder, width = _c.width;
         // Using another data structure so it is possible to have getLabel function
@@ -98,7 +99,12 @@ var SelectWithTemplate = /** @class */ (function (_super) {
         return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, invalid: this.state.invalid, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex },
             React.createElement(dropdown_1.Dropdown, { inputId: this.htmlId, ariaLabelledBy: this.htmlId + 'label', value: valueInternal, options: optionsInternal, onChange: function (e) {
                     onChange(e.value == null ? null : e.value.original);
-                }, placeholder: fakePlaceholderWithNonBreakingSpace, filterPlaceholder: filterPlaceholder, filter: true, filterBy: labelKey, showClear: !required, emptyFilterMessage: emptyFilterMessage, valueTemplate: function (option) { return React.createElement(ItemTemplate, { option: option == null ? null : option.original }); }, itemTemplate: function (option) { return React.createElement(ItemTemplate, { option: option.original }); }, disabled: disabled, required: required, autoFocus: autoFocus, appendTo: document.body, loading: loading, onFilterInputChange: function (searchString) {
+                }, placeholder: fakePlaceholderWithNonBreakingSpace, filterPlaceholder: filterPlaceholder, filter: true, filterBy: labelKey, showClear: !required, emptyFilterMessage: emptyFilterMessage, itemTemplate: function (option) { var _a; return React.createElement(ItemTemplate, { option: (_a = option === null || option === void 0 ? void 0 : option.original) !== null && _a !== void 0 ? _a : null }); }, valueTemplate: function (option) {
+                    var _a, _b;
+                    return ValueTemplate != null
+                        ? (React.createElement(ValueTemplate, { option: (_a = option === null || option === void 0 ? void 0 : option.original) !== null && _a !== void 0 ? _a : null }))
+                        : (React.createElement(ItemTemplate, { option: (_b = option === null || option === void 0 ? void 0 : option.original) !== null && _b !== void 0 ? _b : null }));
+                }, disabled: disabled, required: required, autoFocus: autoFocus, appendTo: document.body, loading: loading, onFilterInputChange: function (searchString) {
                     _this.setState({ loading: true });
                     getItems(searchString).then(function (_options) {
                         _this.setState({ options: _options, loading: false });

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

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { IPropsBase } from './interfaces';
 interface IPropsImageAvatar extends IPropsBase {
     imageUrl?: string | null;
+    onClick?(): void;
 }
 export declare class AvatarContentImage extends React.PureComponent<IPropsImageAvatar> {
     render(): JSX.Element;

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

@@ -14,6 +14,17 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -46,15 +57,20 @@ var AvatarContentImage = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     AvatarContentImage.prototype.render = function () {
-        if (this.props.imageUrl == null) {
-            return (React.createElement("span", { className: "sd-avatar-content sd-avatar-content--dummy-img", title: this.props.tooltipText },
+        var _a = this.props, imageUrl = _a.imageUrl, tooltipText = _a.tooltipText, onClick = _a.onClick;
+        var maybeButtonProps = onClick == null ? {} : {
+            role: 'button',
+            onClick: function () { return onClick(); },
+        };
+        if (imageUrl == null) {
+            return (React.createElement("span", __assign({}, maybeButtonProps, { className: "sd-avatar-content sd-avatar-content--dummy-img", title: tooltipText }),
                 React.createElement("svg", { width: "200", height: "200", viewBox: "0 0 200 200", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-                    React.createElement("circle", { cx: "100", cy: "100", r: "100", fill: "white", "fill-opacity": "0.01" }),
-                    React.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M40 153V145.384C40 141.557 41.16 137.981 43.16 135C49.14 126.057 66.24 119.711 77.14 118C82.74 117.115 90.16 116.538 100 116.538C109.84 116.538 117.26 117.115 122.86 118C133.76 119.711 150.86 126.057 156.84 135C158.84 137.981 160 141.557 160 145.384V153C150 165 130 180 100 180C70 180 50 165 40 153ZM100 30C122.08 30 140 47.2307 140 68.4614C140 89.6922 122.08 106.923 100 106.923C77.92 106.923 60 89.6922 60 68.4614C60 47.2307 77.92 30 100 30Z", fill: "var(--sd-colour-avatar-dummy)", "fill-opacity": "1" }))));
+                    React.createElement("circle", { cx: "100", cy: "100", r: "100", fill: "white", fillOpacity: "0.01" }),
+                    React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M40 153V145.384C40 141.557 41.16 137.981 43.16 135C49.14 126.057 66.24 119.711 77.14 118C82.74 117.115 90.16 116.538 100 116.538C109.84 116.538 117.26 117.115 122.86 118C133.76 119.711 150.86 126.057 156.84 135C158.84 137.981 160 141.557 160 145.384V153C150 165 130 180 100 180C70 180 50 165 40 153ZM100 30C122.08 30 140 47.2307 140 68.4614C140 89.6922 122.08 106.923 100 106.923C77.92 106.923 60 89.6922 60 68.4614C60 47.2307 77.92 30 100 30Z", fill: "var(--sd-colour-avatar-dummy)", fillOpacity: "1" }))));
         }
         else {
-            return (React.createElement("span", { className: "sd-avatar-content", title: this.props.tooltipText },
-                React.createElement("img", { src: this.props.imageUrl })));
+            return (React.createElement("span", __assign({}, maybeButtonProps, { className: "sd-avatar-content", title: tooltipText }),
+                React.createElement("img", { src: imageUrl })));
         }
     };
     return AvatarContentImage;

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 export interface IPropsAvatarPlaceholder {
-    kind: 'plus-button';
+    kind: 'plus-button' | 'user-icon';
     tooltip?: string | null;
     size: 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large';
     icon?: {

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

@@ -42,15 +42,25 @@ exports.AvatarPlaceholder = void 0;
 var React = __importStar(require("react"));
 var avatar_wrapper_1 = require("./avatar-wrapper");
 var avatar_action_add_1 = require("./avatar-action-add");
+var avatar_image_1 = require("./avatar-image");
 var AvatarPlaceholder = /** @class */ (function (_super) {
     __extends(AvatarPlaceholder, _super);
     function AvatarPlaceholder() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     AvatarPlaceholder.prototype.render = function () {
-        var _a = this.props, size = _a.size, tooltip = _a.tooltip, icon = _a.icon;
-        return (React.createElement(avatar_wrapper_1.AvatarWrapper, { size: size, isEmpty: false, icon: icon },
-            React.createElement(avatar_action_add_1.AvatarContentAdd, { tooltipText: tooltip !== null && tooltip !== void 0 ? tooltip : undefined, onClick: this.props.onClick })));
+        var _a = this.props, size = _a.size, tooltip = _a.tooltip, icon = _a.icon, kind = _a.kind, onClick = _a.onClick;
+        return (React.createElement(avatar_wrapper_1.AvatarWrapper, { size: size, isEmpty: false, icon: icon }, (function () {
+            if (kind === 'plus-button') {
+                return (React.createElement(avatar_action_add_1.AvatarContentAdd, { tooltipText: tooltip !== null && tooltip !== void 0 ? tooltip : undefined, onClick: onClick }));
+            }
+            else if (kind === 'user-icon') {
+                return (React.createElement(avatar_image_1.AvatarContentImage, { imageUrl: null, tooltipText: tooltip !== null && tooltip !== void 0 ? tooltip : undefined, onClick: onClick }));
+            }
+            else {
+                return null;
+            }
+        })()));
     };
     return AvatarPlaceholder;
 }(React.PureComponent));

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

@@ -11,6 +11,17 @@ export interface IPropsAvatar {
         name: string;
         color?: string;
     };
+    /**
+     * displayName is shown as tooltip by default
+     * use this if you need to add additional information (it will be added on a new line)
+     */
+    tooltip?: string;
+    /**
+     * JSX resulting from rendering of one of the following components:
+     * AvatarContentText
+     * AvatarContentImage
+     */
+    customContent?: JSX.Element;
 }
 export declare class Avatar extends React.PureComponent<IPropsAvatar> {
     render(): JSX.Element;

package/react/components/avatar/avatar.js

@@ -49,10 +49,19 @@ 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, 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: displayName }))
-            : (React.createElement(avatar_text_1.AvatarContentText, { text: initials, tooltipText: displayName }))));
+        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, customContent = _a.customContent;
+        var tooltipCombined = [displayName, this.props.tooltip].filter(function (str) { return (str !== null && str !== void 0 ? str : '').trim().length > 0; }).join('\n');
+        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 }, (function () {
+            if (customContent != null) {
+                return customContent;
+            }
+            else if (imageUrl != null || initials == null) {
+                return (React.createElement(avatar_image_1.AvatarContentImage, { imageUrl: imageUrl, tooltipText: tooltipCombined }));
+            }
+            else {
+                return (React.createElement(avatar_text_1.AvatarContentText, { text: initials, tooltipText: tooltipCombined }));
+            }
+        })()));
     };
     return Avatar;
 }(React.PureComponent));