superdesk-ui-framework 3.0.17 → 3.0.19
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/app/styles/_avatar.scss +175 -25
- package/app/styles/design-tokens/_new-colors.scss +35 -2
- package/app-typescript/components/Icon.tsx +7 -1
- package/app-typescript/components/ShowPopup.tsx +173 -0
- package/app-typescript/components/Spacer.tsx +0 -8
- package/app-typescript/components/WithPagination.tsx +4 -4
- package/app-typescript/components/WithPopover.tsx +43 -0
- package/app-typescript/components/avatar/avatar-action-add.tsx +27 -0
- package/app-typescript/components/avatar/avatar-group.tsx +86 -0
- package/app-typescript/components/avatar/avatar-image.tsx +26 -0
- package/app-typescript/components/avatar/avatar-number.tsx +16 -0
- package/app-typescript/components/avatar/avatar-placeholder.tsx +35 -0
- package/app-typescript/components/avatar/avatar-text.tsx +19 -0
- package/app-typescript/components/avatar/avatar-wrapper.tsx +72 -0
- package/app-typescript/components/avatar/avatar.tsx +48 -0
- package/app-typescript/components/avatar/interfaces.ts +3 -0
- package/app-typescript/index.ts +8 -4
- package/dist/avatar_dummy.svg +4 -0
- package/dist/examples.bundle.js +3271 -2470
- package/dist/react/Avatar.tsx +628 -307
- package/dist/superdesk-ui.bundle.css +139 -27
- package/dist/superdesk-ui.bundle.js +2689 -1846
- package/dist/vendor.bundle.js +22 -22
- package/examples/pages/react/Avatar.tsx +628 -307
- package/images/avatar_dummy.svg +4 -0
- package/package.json +2 -1
- package/react/components/Icon.d.ts +1 -0
- package/react/components/Icon.js +1 -1
- package/react/components/ShowPopup.d.ts +10 -0
- package/react/components/ShowPopup.js +158 -0
- package/react/components/Spacer.d.ts +30 -0
- package/react/components/Spacer.js +86 -0
- package/react/components/WithPagination.d.ts +1 -1
- package/react/components/WithPagination.js +3 -3
- package/react/components/WithPopover.d.ts +18 -0
- package/react/components/WithPopover.js +65 -0
- package/react/components/avatar/avatar-action-add.d.ts +9 -0
- package/react/components/avatar/avatar-action-add.js +59 -0
- package/react/components/avatar/avatar-group.d.ts +18 -0
- package/react/components/avatar/avatar-group.js +104 -0
- package/react/components/avatar/avatar-image.d.ts +9 -0
- package/react/components/avatar/avatar-image.js +62 -0
- package/react/components/avatar/avatar-number.d.ts +9 -0
- package/react/components/avatar/avatar-number.js +56 -0
- package/react/components/avatar/avatar-placeholder.d.ts +14 -0
- package/react/components/avatar/avatar-placeholder.js +57 -0
- package/react/components/avatar/avatar-text.d.ts +9 -0
- package/react/components/avatar/avatar-text.js +54 -0
- package/react/components/avatar/avatar-wrapper.d.ts +26 -0
- package/react/components/{Avatar.js → avatar/avatar-wrapper.js} +16 -57
- package/react/components/avatar/avatar.d.ts +17 -0
- package/react/components/avatar/avatar.js +59 -0
- package/react/components/avatar/interfaces.d.ts +3 -0
- package/react/components/avatar/interfaces.js +2 -0
- package/react/index.d.ts +8 -4
- package/react/index.js +20 -11
- package/app-typescript/components/Avatar.tsx +0 -122
- package/dist/avatar_64.png +0 -0
- package/react/components/Avatar.d.ts +0 -42
@@ -0,0 +1,62 @@
|
|
1
|
+
"use strict";
|
2
|
+
var __extends = (this && this.__extends) || (function () {
|
3
|
+
var extendStatics = function (d, b) {
|
4
|
+
extendStatics = Object.setPrototypeOf ||
|
5
|
+
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
6
|
+
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
|
7
|
+
return extendStatics(d, b);
|
8
|
+
};
|
9
|
+
return function (d, b) {
|
10
|
+
if (typeof b !== "function" && b !== null)
|
11
|
+
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
|
12
|
+
extendStatics(d, b);
|
13
|
+
function __() { this.constructor = d; }
|
14
|
+
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
15
|
+
};
|
16
|
+
})();
|
17
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
18
|
+
if (k2 === undefined) k2 = k;
|
19
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
20
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
21
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
22
|
+
}
|
23
|
+
Object.defineProperty(o, k2, desc);
|
24
|
+
}) : (function(o, m, k, k2) {
|
25
|
+
if (k2 === undefined) k2 = k;
|
26
|
+
o[k2] = m[k];
|
27
|
+
}));
|
28
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
29
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
30
|
+
}) : function(o, v) {
|
31
|
+
o["default"] = v;
|
32
|
+
});
|
33
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
34
|
+
if (mod && mod.__esModule) return mod;
|
35
|
+
var result = {};
|
36
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
37
|
+
__setModuleDefault(result, mod);
|
38
|
+
return result;
|
39
|
+
};
|
40
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
41
|
+
exports.AvatarContentImage = void 0;
|
42
|
+
var React = __importStar(require("react"));
|
43
|
+
var AvatarContentImage = /** @class */ (function (_super) {
|
44
|
+
__extends(AvatarContentImage, _super);
|
45
|
+
function AvatarContentImage() {
|
46
|
+
return _super !== null && _super.apply(this, arguments) || this;
|
47
|
+
}
|
48
|
+
AvatarContentImage.prototype.render = function () {
|
49
|
+
if (this.props.imageUrl == null) {
|
50
|
+
return (React.createElement("span", { className: "sd-avatar-content sd-avatar-content--dummy-img", title: this.props.tooltipText },
|
51
|
+
React.createElement("svg", { width: "200", height: "200", viewBox: "0 0 200 200", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
52
|
+
React.createElement("circle", { cx: "100", cy: "100", r: "100", fill: "white", "fill-opacity": "0.01" }),
|
53
|
+
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" }))));
|
54
|
+
}
|
55
|
+
else {
|
56
|
+
return (React.createElement("span", { className: "sd-avatar-content", title: this.props.tooltipText },
|
57
|
+
React.createElement("img", { src: this.props.imageUrl })));
|
58
|
+
}
|
59
|
+
};
|
60
|
+
return AvatarContentImage;
|
61
|
+
}(React.PureComponent));
|
62
|
+
exports.AvatarContentImage = AvatarContentImage;
|
@@ -0,0 +1,9 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import { IPropsBase } from './interfaces';
|
3
|
+
interface IPropsNumberAvatar extends IPropsBase {
|
4
|
+
number: string;
|
5
|
+
}
|
6
|
+
export declare class AvatarContentNumber extends React.PureComponent<IPropsNumberAvatar> {
|
7
|
+
render(): JSX.Element;
|
8
|
+
}
|
9
|
+
export {};
|
@@ -0,0 +1,56 @@
|
|
1
|
+
"use strict";
|
2
|
+
var __extends = (this && this.__extends) || (function () {
|
3
|
+
var extendStatics = function (d, b) {
|
4
|
+
extendStatics = Object.setPrototypeOf ||
|
5
|
+
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
6
|
+
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
|
7
|
+
return extendStatics(d, b);
|
8
|
+
};
|
9
|
+
return function (d, b) {
|
10
|
+
if (typeof b !== "function" && b !== null)
|
11
|
+
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
|
12
|
+
extendStatics(d, b);
|
13
|
+
function __() { this.constructor = d; }
|
14
|
+
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
15
|
+
};
|
16
|
+
})();
|
17
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
18
|
+
if (k2 === undefined) k2 = k;
|
19
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
20
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
21
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
22
|
+
}
|
23
|
+
Object.defineProperty(o, k2, desc);
|
24
|
+
}) : (function(o, m, k, k2) {
|
25
|
+
if (k2 === undefined) k2 = k;
|
26
|
+
o[k2] = m[k];
|
27
|
+
}));
|
28
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
29
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
30
|
+
}) : function(o, v) {
|
31
|
+
o["default"] = v;
|
32
|
+
});
|
33
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
34
|
+
if (mod && mod.__esModule) return mod;
|
35
|
+
var result = {};
|
36
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
37
|
+
__setModuleDefault(result, mod);
|
38
|
+
return result;
|
39
|
+
};
|
40
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
41
|
+
exports.AvatarContentNumber = void 0;
|
42
|
+
var React = __importStar(require("react"));
|
43
|
+
var AvatarContentNumber = /** @class */ (function (_super) {
|
44
|
+
__extends(AvatarContentNumber, _super);
|
45
|
+
function AvatarContentNumber() {
|
46
|
+
return _super !== null && _super.apply(this, arguments) || this;
|
47
|
+
}
|
48
|
+
AvatarContentNumber.prototype.render = function () {
|
49
|
+
return (React.createElement("span", { className: "sd-avatar-content sd-avatar-content--number" },
|
50
|
+
React.createElement("span", null,
|
51
|
+
"+",
|
52
|
+
this.props.number)));
|
53
|
+
};
|
54
|
+
return AvatarContentNumber;
|
55
|
+
}(React.PureComponent));
|
56
|
+
exports.AvatarContentNumber = AvatarContentNumber;
|
@@ -0,0 +1,14 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
export interface IPropsAvatarPlaceholder {
|
3
|
+
kind: 'plus-button';
|
4
|
+
tooltip?: string | null;
|
5
|
+
size: 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large';
|
6
|
+
icon?: {
|
7
|
+
name: string;
|
8
|
+
color?: string;
|
9
|
+
};
|
10
|
+
onClick?(): void;
|
11
|
+
}
|
12
|
+
export declare class AvatarPlaceholder extends React.PureComponent<IPropsAvatarPlaceholder> {
|
13
|
+
render(): JSX.Element;
|
14
|
+
}
|
@@ -0,0 +1,57 @@
|
|
1
|
+
"use strict";
|
2
|
+
var __extends = (this && this.__extends) || (function () {
|
3
|
+
var extendStatics = function (d, b) {
|
4
|
+
extendStatics = Object.setPrototypeOf ||
|
5
|
+
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
6
|
+
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
|
7
|
+
return extendStatics(d, b);
|
8
|
+
};
|
9
|
+
return function (d, b) {
|
10
|
+
if (typeof b !== "function" && b !== null)
|
11
|
+
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
|
12
|
+
extendStatics(d, b);
|
13
|
+
function __() { this.constructor = d; }
|
14
|
+
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
15
|
+
};
|
16
|
+
})();
|
17
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
18
|
+
if (k2 === undefined) k2 = k;
|
19
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
20
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
21
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
22
|
+
}
|
23
|
+
Object.defineProperty(o, k2, desc);
|
24
|
+
}) : (function(o, m, k, k2) {
|
25
|
+
if (k2 === undefined) k2 = k;
|
26
|
+
o[k2] = m[k];
|
27
|
+
}));
|
28
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
29
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
30
|
+
}) : function(o, v) {
|
31
|
+
o["default"] = v;
|
32
|
+
});
|
33
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
34
|
+
if (mod && mod.__esModule) return mod;
|
35
|
+
var result = {};
|
36
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
37
|
+
__setModuleDefault(result, mod);
|
38
|
+
return result;
|
39
|
+
};
|
40
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
41
|
+
exports.AvatarPlaceholder = void 0;
|
42
|
+
var React = __importStar(require("react"));
|
43
|
+
var avatar_wrapper_1 = require("./avatar-wrapper");
|
44
|
+
var avatar_action_add_1 = require("./avatar-action-add");
|
45
|
+
var AvatarPlaceholder = /** @class */ (function (_super) {
|
46
|
+
__extends(AvatarPlaceholder, _super);
|
47
|
+
function AvatarPlaceholder() {
|
48
|
+
return _super !== null && _super.apply(this, arguments) || this;
|
49
|
+
}
|
50
|
+
AvatarPlaceholder.prototype.render = function () {
|
51
|
+
var _a = this.props, size = _a.size, tooltip = _a.tooltip, icon = _a.icon;
|
52
|
+
return (React.createElement(avatar_wrapper_1.AvatarWrapper, { size: size, isEmpty: false, icon: icon },
|
53
|
+
React.createElement(avatar_action_add_1.AvatarContentAdd, { tooltipText: tooltip !== null && tooltip !== void 0 ? tooltip : undefined, onClick: this.props.onClick })));
|
54
|
+
};
|
55
|
+
return AvatarPlaceholder;
|
56
|
+
}(React.PureComponent));
|
57
|
+
exports.AvatarPlaceholder = AvatarPlaceholder;
|
@@ -0,0 +1,9 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import { IPropsBase } from './interfaces';
|
3
|
+
interface IPropsTextAvatar extends IPropsBase {
|
4
|
+
text: string;
|
5
|
+
}
|
6
|
+
export declare class AvatarContentText extends React.PureComponent<IPropsTextAvatar> {
|
7
|
+
render(): JSX.Element;
|
8
|
+
}
|
9
|
+
export {};
|
@@ -0,0 +1,54 @@
|
|
1
|
+
"use strict";
|
2
|
+
var __extends = (this && this.__extends) || (function () {
|
3
|
+
var extendStatics = function (d, b) {
|
4
|
+
extendStatics = Object.setPrototypeOf ||
|
5
|
+
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
6
|
+
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
|
7
|
+
return extendStatics(d, b);
|
8
|
+
};
|
9
|
+
return function (d, b) {
|
10
|
+
if (typeof b !== "function" && b !== null)
|
11
|
+
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
|
12
|
+
extendStatics(d, b);
|
13
|
+
function __() { this.constructor = d; }
|
14
|
+
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
15
|
+
};
|
16
|
+
})();
|
17
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
18
|
+
if (k2 === undefined) k2 = k;
|
19
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
20
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
21
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
22
|
+
}
|
23
|
+
Object.defineProperty(o, k2, desc);
|
24
|
+
}) : (function(o, m, k, k2) {
|
25
|
+
if (k2 === undefined) k2 = k;
|
26
|
+
o[k2] = m[k];
|
27
|
+
}));
|
28
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
29
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
30
|
+
}) : function(o, v) {
|
31
|
+
o["default"] = v;
|
32
|
+
});
|
33
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
34
|
+
if (mod && mod.__esModule) return mod;
|
35
|
+
var result = {};
|
36
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
37
|
+
__setModuleDefault(result, mod);
|
38
|
+
return result;
|
39
|
+
};
|
40
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
41
|
+
exports.AvatarContentText = void 0;
|
42
|
+
var React = __importStar(require("react"));
|
43
|
+
var AvatarContentText = /** @class */ (function (_super) {
|
44
|
+
__extends(AvatarContentText, _super);
|
45
|
+
function AvatarContentText() {
|
46
|
+
return _super !== null && _super.apply(this, arguments) || this;
|
47
|
+
}
|
48
|
+
AvatarContentText.prototype.render = function () {
|
49
|
+
return (React.createElement("span", { className: "sd-avatar-content sd-avatar-content--text", title: this.props.tooltipText },
|
50
|
+
React.createElement("span", null, this.props.text.slice(0, 3))));
|
51
|
+
};
|
52
|
+
return AvatarContentText;
|
53
|
+
}(React.PureComponent));
|
54
|
+
exports.AvatarContentText = AvatarContentText;
|
@@ -0,0 +1,26 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
interface IPropsAvatarWrapper {
|
3
|
+
size?: 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large';
|
4
|
+
statusIndicator?: {
|
5
|
+
status: 'online' | 'offline';
|
6
|
+
tooltipText?: string;
|
7
|
+
};
|
8
|
+
administratorIndicator?: {
|
9
|
+
enabled: boolean;
|
10
|
+
tooltipText?: string;
|
11
|
+
};
|
12
|
+
children: React.ReactNode;
|
13
|
+
'data-test-id'?: string;
|
14
|
+
isEmpty?: boolean;
|
15
|
+
icon?: {
|
16
|
+
name: string;
|
17
|
+
color?: string;
|
18
|
+
};
|
19
|
+
}
|
20
|
+
/**
|
21
|
+
* @deprecated use AvatarV2
|
22
|
+
*/
|
23
|
+
export declare class AvatarWrapper extends React.PureComponent<IPropsAvatarWrapper> {
|
24
|
+
render(): JSX.Element;
|
25
|
+
}
|
26
|
+
export {};
|
@@ -41,79 +41,38 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
41
41
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
42
42
|
};
|
43
43
|
Object.defineProperty(exports, "__esModule", { value: true });
|
44
|
-
exports.AvatarWrapper =
|
44
|
+
exports.AvatarWrapper = void 0;
|
45
45
|
var React = __importStar(require("react"));
|
46
46
|
var classnames_1 = __importDefault(require("classnames"));
|
47
|
-
var
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
}
|
52
|
-
AvatarContentText.prototype.render = function () {
|
53
|
-
return (React.createElement("span", { className: "sd-avatar-content sd-avatar-content--text", title: this.props.tooltipText },
|
54
|
-
React.createElement("span", null, this.props.text.slice(0, 3))));
|
55
|
-
};
|
56
|
-
return AvatarContentText;
|
57
|
-
}(React.PureComponent));
|
58
|
-
exports.AvatarContentText = AvatarContentText;
|
59
|
-
var AvatarContentImage = /** @class */ (function (_super) {
|
60
|
-
__extends(AvatarContentImage, _super);
|
61
|
-
function AvatarContentImage() {
|
62
|
-
return _super !== null && _super.apply(this, arguments) || this;
|
63
|
-
}
|
64
|
-
AvatarContentImage.prototype.render = function () {
|
65
|
-
if (this.props.imageUrl == null) {
|
66
|
-
return React.createElement("span", { className: "sd-avatar-content sd-avatar-content--empty", title: this.props.tooltipText });
|
67
|
-
}
|
68
|
-
else {
|
69
|
-
return (React.createElement("span", { className: "sd-avatar-content", title: this.props.tooltipText },
|
70
|
-
React.createElement("img", { src: this.props.imageUrl })));
|
71
|
-
}
|
72
|
-
};
|
73
|
-
return AvatarContentImage;
|
74
|
-
}(React.PureComponent));
|
75
|
-
exports.AvatarContentImage = AvatarContentImage;
|
76
|
-
var AvatarGroup = /** @class */ (function (_super) {
|
77
|
-
__extends(AvatarGroup, _super);
|
78
|
-
function AvatarGroup() {
|
79
|
-
return _super !== null && _super.apply(this, arguments) || this;
|
80
|
-
}
|
81
|
-
AvatarGroup.prototype.render = function () {
|
82
|
-
var _a;
|
83
|
-
var classes = (0, classnames_1.default)('sd-avatar-group', (_a = {},
|
84
|
-
_a["sd-avatar-group--stacked"] = this.props.appearance === undefined,
|
85
|
-
_a["sd-avatar-group--".concat(this.props.appearance)] = this.props.appearance,
|
86
|
-
_a["sd-avatar-group__border--000"] = this.props.borderColor === undefined,
|
87
|
-
_a["sd-avatar-group__border--".concat(this.props.borderColor)] = this.props.borderColor,
|
88
|
-
_a), this.props.className);
|
89
|
-
return (React.createElement("div", { className: classes, role: 'group' }, this.props.children));
|
90
|
-
};
|
91
|
-
return AvatarGroup;
|
92
|
-
}(React.PureComponent));
|
93
|
-
exports.AvatarGroup = AvatarGroup;
|
47
|
+
var Icon_1 = require("../Icon");
|
48
|
+
/**
|
49
|
+
* @deprecated use AvatarV2
|
50
|
+
*/
|
94
51
|
var AvatarWrapper = /** @class */ (function (_super) {
|
95
52
|
__extends(AvatarWrapper, _super);
|
96
53
|
function AvatarWrapper() {
|
97
54
|
return _super !== null && _super.apply(this, arguments) || this;
|
98
55
|
}
|
99
56
|
AvatarWrapper.prototype.render = function () {
|
100
|
-
var _a;
|
57
|
+
var _a, _b, _c;
|
58
|
+
var icon = this.props.icon;
|
101
59
|
return (React.createElement("span", { className: (0, classnames_1.default)('sd-avatar', {
|
60
|
+
'sd-avatar--x-small': this.props.size === 'x-small',
|
102
61
|
'sd-avatar--small': this.props.size === 'small',
|
103
62
|
'sd-avatar--medium': this.props.size === 'medium' || this.props.size == null,
|
104
63
|
'sd-avatar--large': this.props.size === 'large',
|
105
64
|
'sd-avatar--x-large': this.props.size === 'x-large',
|
106
65
|
'sd-avatar--xx-large': this.props.size === 'xx-large',
|
107
|
-
|
66
|
+
'sd-avatar--indicator-status--online': ((_a = this.props.statusIndicator) === null || _a === void 0 ? void 0 : _a.status) === 'online',
|
67
|
+
'sd-avatar--indicator-status--offline': ((_b = this.props.statusIndicator) === null || _b === void 0 ? void 0 : _b.status) === 'offline',
|
68
|
+
'sd-avatar--empty-light': this.props.isEmpty,
|
69
|
+
}), "data-test-id": this.props['data-test-id'], title: this.props.statusIndicator != null ? this.props.statusIndicator.tooltipText : "" },
|
108
70
|
this.props.children,
|
109
|
-
this.props.
|
110
|
-
? (React.createElement("span", { className: this.props.statusIndicator.status === 'online'
|
111
|
-
? 'sd-avatar--indicator-status--online'
|
112
|
-
: 'sd-avatar--indicator-status--offline', title: this.props.statusIndicator.tooltipText }))
|
113
|
-
: null,
|
114
|
-
((_a = this.props.administratorIndicator) === null || _a === void 0 ? void 0 : _a.enabled) === true
|
71
|
+
((_c = this.props.administratorIndicator) === null || _c === void 0 ? void 0 : _c.enabled) === true
|
115
72
|
? (React.createElement("i", { className: "icon-settings sd-avatar--indicator-admin", title: this.props.administratorIndicator.tooltipText }))
|
116
|
-
: null
|
73
|
+
: null,
|
74
|
+
icon != null && (React.createElement("span", { className: "sd-avatar__icon" },
|
75
|
+
React.createElement(Icon_1.Icon, { name: icon.name, color: icon.color })))));
|
117
76
|
};
|
118
77
|
return AvatarWrapper;
|
119
78
|
}(React.PureComponent));
|
@@ -0,0 +1,17 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
export interface IPropsAvatar {
|
3
|
+
imageUrl: string | null;
|
4
|
+
tooltip: string | null;
|
5
|
+
/** 3 letters max */
|
6
|
+
initials: string | null;
|
7
|
+
size: 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large';
|
8
|
+
statusIndicator?: 'online' | 'offline';
|
9
|
+
administratorIndicator?: boolean;
|
10
|
+
icon?: {
|
11
|
+
name: string;
|
12
|
+
color?: string;
|
13
|
+
};
|
14
|
+
}
|
15
|
+
export declare class Avatar extends React.PureComponent<IPropsAvatar> {
|
16
|
+
render(): JSX.Element;
|
17
|
+
}
|
@@ -0,0 +1,59 @@
|
|
1
|
+
"use strict";
|
2
|
+
var __extends = (this && this.__extends) || (function () {
|
3
|
+
var extendStatics = function (d, b) {
|
4
|
+
extendStatics = Object.setPrototypeOf ||
|
5
|
+
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
6
|
+
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
|
7
|
+
return extendStatics(d, b);
|
8
|
+
};
|
9
|
+
return function (d, b) {
|
10
|
+
if (typeof b !== "function" && b !== null)
|
11
|
+
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
|
12
|
+
extendStatics(d, b);
|
13
|
+
function __() { this.constructor = d; }
|
14
|
+
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
15
|
+
};
|
16
|
+
})();
|
17
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
18
|
+
if (k2 === undefined) k2 = k;
|
19
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
20
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
21
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
22
|
+
}
|
23
|
+
Object.defineProperty(o, k2, desc);
|
24
|
+
}) : (function(o, m, k, k2) {
|
25
|
+
if (k2 === undefined) k2 = k;
|
26
|
+
o[k2] = m[k];
|
27
|
+
}));
|
28
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
29
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
30
|
+
}) : function(o, v) {
|
31
|
+
o["default"] = v;
|
32
|
+
});
|
33
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
34
|
+
if (mod && mod.__esModule) return mod;
|
35
|
+
var result = {};
|
36
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
37
|
+
__setModuleDefault(result, mod);
|
38
|
+
return result;
|
39
|
+
};
|
40
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
41
|
+
exports.Avatar = void 0;
|
42
|
+
var React = __importStar(require("react"));
|
43
|
+
var avatar_image_1 = require("./avatar-image");
|
44
|
+
var avatar_wrapper_1 = require("./avatar-wrapper");
|
45
|
+
var avatar_text_1 = require("./avatar-text");
|
46
|
+
var Avatar = /** @class */ (function (_super) {
|
47
|
+
__extends(Avatar, _super);
|
48
|
+
function Avatar() {
|
49
|
+
return _super !== null && _super.apply(this, arguments) || this;
|
50
|
+
}
|
51
|
+
Avatar.prototype.render = function () {
|
52
|
+
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;
|
53
|
+
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
|
54
|
+
? (React.createElement(avatar_image_1.AvatarContentImage, { imageUrl: imageUrl, tooltipText: tooltip !== null && tooltip !== void 0 ? tooltip : undefined }))
|
55
|
+
: (React.createElement(avatar_text_1.AvatarContentText, { text: initials, tooltipText: tooltip !== null && tooltip !== void 0 ? tooltip : undefined }))));
|
56
|
+
};
|
57
|
+
return Avatar;
|
58
|
+
}(React.PureComponent));
|
59
|
+
exports.Avatar = Avatar;
|
package/react/index.d.ts
CHANGED
@@ -8,10 +8,12 @@ export { Popover } from './components/Popover';
|
|
8
8
|
export { Label } from './components/Label';
|
9
9
|
export { Badge } from './components/Badge';
|
10
10
|
export { Alert } from './components/Alert';
|
11
|
-
export { AvatarWrapper } from './components/
|
12
|
-
export { AvatarContentText } from './components/
|
13
|
-
export { AvatarContentImage } from './components/
|
14
|
-
export { AvatarGroup } from './components/
|
11
|
+
export { AvatarWrapper } from './components/avatar/avatar-wrapper';
|
12
|
+
export { AvatarContentText } from './components/avatar/avatar-text';
|
13
|
+
export { AvatarContentImage } from './components/avatar/avatar-image';
|
14
|
+
export { AvatarGroup } from './components/avatar/avatar-group';
|
15
|
+
export { Avatar } from './components/avatar/avatar';
|
16
|
+
export { AvatarPlaceholder } from './components/avatar/avatar-placeholder';
|
15
17
|
export { IconButton } from './components/IconButton';
|
16
18
|
export { IconLabel } from './components/IconLabel';
|
17
19
|
export { Tooltip } from './components/Tooltip';
|
@@ -84,5 +86,7 @@ export { TableList, TableListItem } from './components/Lists/TableList';
|
|
84
86
|
export { ContentListItem } from './components/Lists/ContentList';
|
85
87
|
export { MultiSelect } from './components/MultiSelect';
|
86
88
|
export { ResizablePanels } from './components/ResizablePanels';
|
89
|
+
export { WithPopover } from './components/WithPopover';
|
90
|
+
export { Spacer, SpacerBlock } from './components/Spacer';
|
87
91
|
export declare const ToggleBoxNext: any;
|
88
92
|
export declare const reactToAngular1: any;
|
package/react/index.js
CHANGED
@@ -16,9 +16,9 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
16
16
|
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
17
17
|
};
|
18
18
|
Object.defineProperty(exports, "__esModule", { value: true });
|
19
|
-
exports.
|
20
|
-
exports.
|
21
|
-
exports.ResizablePanels = exports.MultiSelect = void 0;
|
19
|
+
exports.HeadingText = exports.ContentDivider = exports.Divider = exports.Icon = exports.Prop = exports.PropsList = exports.StrechBar = exports.SlidingToolbar = exports.SubNavDivider = exports.SubNav = exports.LeftMenu = exports.TabList = exports.Tab = exports.NavButton = exports.CheckButtonGroup = exports.CheckGroup = exports.CheckboxButton = exports.RadioButtonGroup = exports.Checkbox = exports.RadioGroup = exports.Loader = exports.ButtonGroup = exports.SwitchGroup = exports.Switch = exports.FormLabel = exports.TimePicker = exports.DatePickerISO = exports.DatePicker = exports.getDurationString = exports.DurationInput = exports.Tooltip = exports.IconLabel = exports.IconButton = exports.AvatarPlaceholder = exports.Avatar = exports.AvatarGroup = exports.AvatarContentImage = exports.AvatarContentText = exports.AvatarWrapper = exports.Alert = exports.Badge = exports.Label = exports.Popover = exports.WithPagination = exports.SelectWithTemplate = exports.Option = exports.Select = exports.Input = exports.Button = exports.HelloWorld = void 0;
|
20
|
+
exports.TableList = exports.TreeSelect = exports.BottomNav = exports.Heading = exports.Time = exports.Text = exports.LoadingOverlay = exports.Spinner = exports.ListItemLoader = exports.Skeleton = exports.WithSizeObserver = exports.SearchBar = exports.CreateButton = exports.DropZone = exports.ThemeSelector = exports.IconPicker = exports.SelectGrid = exports.ToggleBox = exports.Menu = exports.toasted = exports.GridItemCheckWrapper = exports.GridItemTopActions = exports.GridItemFooterActions = exports.GridItemFooterBlock = exports.GridItemSlug = exports.GridItemText = exports.GridItemTitle = exports.GridItemTime = exports.GridItemContentBlock = exports.GridItemFooter = exports.GridItemMedia = exports.GridItemContent = exports.GridItem = exports.GridList = exports.Modal = exports.Carousel = exports.DonutChart = exports.Autocomplete = exports.EmptyState = exports.Tabs = exports.TabContent = exports.TabPanel = exports.TabLabel = exports.TagInput = exports.Tag = exports.Dropdown = exports.DropdownDivider = exports.DropdownLabel = exports.DropdownItem = exports.DropdownFirst = void 0;
|
21
|
+
exports.SpacerBlock = exports.Spacer = exports.WithPopover = exports.ResizablePanels = exports.MultiSelect = exports.ContentListItem = exports.TableListItem = void 0;
|
22
22
|
var HelloWorld_1 = require("./components/HelloWorld");
|
23
23
|
Object.defineProperty(exports, "HelloWorld", { enumerable: true, get: function () { return HelloWorld_1.HelloWorld; } });
|
24
24
|
var Button_1 = require("./components/Button");
|
@@ -40,14 +40,18 @@ var Badge_1 = require("./components/Badge");
|
|
40
40
|
Object.defineProperty(exports, "Badge", { enumerable: true, get: function () { return Badge_1.Badge; } });
|
41
41
|
var Alert_1 = require("./components/Alert");
|
42
42
|
Object.defineProperty(exports, "Alert", { enumerable: true, get: function () { return Alert_1.Alert; } });
|
43
|
-
var
|
44
|
-
Object.defineProperty(exports, "AvatarWrapper", { enumerable: true, get: function () { return
|
45
|
-
var
|
46
|
-
Object.defineProperty(exports, "AvatarContentText", { enumerable: true, get: function () { return
|
47
|
-
var
|
48
|
-
Object.defineProperty(exports, "AvatarContentImage", { enumerable: true, get: function () { return
|
49
|
-
var
|
50
|
-
Object.defineProperty(exports, "AvatarGroup", { enumerable: true, get: function () { return
|
43
|
+
var avatar_wrapper_1 = require("./components/avatar/avatar-wrapper");
|
44
|
+
Object.defineProperty(exports, "AvatarWrapper", { enumerable: true, get: function () { return avatar_wrapper_1.AvatarWrapper; } });
|
45
|
+
var avatar_text_1 = require("./components/avatar/avatar-text");
|
46
|
+
Object.defineProperty(exports, "AvatarContentText", { enumerable: true, get: function () { return avatar_text_1.AvatarContentText; } });
|
47
|
+
var avatar_image_1 = require("./components/avatar/avatar-image");
|
48
|
+
Object.defineProperty(exports, "AvatarContentImage", { enumerable: true, get: function () { return avatar_image_1.AvatarContentImage; } });
|
49
|
+
var avatar_group_1 = require("./components/avatar/avatar-group");
|
50
|
+
Object.defineProperty(exports, "AvatarGroup", { enumerable: true, get: function () { return avatar_group_1.AvatarGroup; } });
|
51
|
+
var avatar_1 = require("./components/avatar/avatar");
|
52
|
+
Object.defineProperty(exports, "Avatar", { enumerable: true, get: function () { return avatar_1.Avatar; } });
|
53
|
+
var avatar_placeholder_1 = require("./components/avatar/avatar-placeholder");
|
54
|
+
Object.defineProperty(exports, "AvatarPlaceholder", { enumerable: true, get: function () { return avatar_placeholder_1.AvatarPlaceholder; } });
|
51
55
|
var IconButton_1 = require("./components/IconButton");
|
52
56
|
Object.defineProperty(exports, "IconButton", { enumerable: true, get: function () { return IconButton_1.IconButton; } });
|
53
57
|
var IconLabel_1 = require("./components/IconLabel");
|
@@ -206,3 +210,8 @@ var MultiSelect_1 = require("./components/MultiSelect");
|
|
206
210
|
Object.defineProperty(exports, "MultiSelect", { enumerable: true, get: function () { return MultiSelect_1.MultiSelect; } });
|
207
211
|
var ResizablePanels_1 = require("./components/ResizablePanels");
|
208
212
|
Object.defineProperty(exports, "ResizablePanels", { enumerable: true, get: function () { return ResizablePanels_1.ResizablePanels; } });
|
213
|
+
var WithPopover_1 = require("./components/WithPopover");
|
214
|
+
Object.defineProperty(exports, "WithPopover", { enumerable: true, get: function () { return WithPopover_1.WithPopover; } });
|
215
|
+
var Spacer_1 = require("./components/Spacer");
|
216
|
+
Object.defineProperty(exports, "Spacer", { enumerable: true, get: function () { return Spacer_1.Spacer; } });
|
217
|
+
Object.defineProperty(exports, "SpacerBlock", { enumerable: true, get: function () { return Spacer_1.SpacerBlock; } });
|