@tenancy.nz/feature-ui 1.9.7 → 1.9.9
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/components/StatusButton.cjs +1 -1
- package/dist/cjs/components/TenantAvatarGroup.cjs +104 -0
- package/dist/cjs/index.cjs +2 -0
- package/dist/esm/components/StatusButton.js +1 -1
- package/dist/esm/components/TenantAvatarGroup.js +100 -0
- package/dist/esm/index.js +1 -0
- package/package.json +5 -5
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
|
|
6
|
+
var React = require('react');
|
|
7
|
+
var ui = require('@tenancy.nz/ui');
|
|
8
|
+
|
|
9
|
+
var _excluded = ["data", "loading", "max", "showAll", "size"];
|
|
10
|
+
var MAX_AVATARS = 4;
|
|
11
|
+
var AVATAR_SIZE = 48;
|
|
12
|
+
var fullName = function fullName(_ref) {
|
|
13
|
+
var firstName = _ref.firstName,
|
|
14
|
+
lastName = _ref.lastName;
|
|
15
|
+
return [firstName, lastName].map(function (s) {
|
|
16
|
+
return s.trim();
|
|
17
|
+
}).filter(Boolean).join(" ");
|
|
18
|
+
};
|
|
19
|
+
function TenantAvatarGroup(_ref2) {
|
|
20
|
+
var _ref2$data = _ref2.data,
|
|
21
|
+
data = _ref2$data === void 0 ? [] : _ref2$data,
|
|
22
|
+
_ref2$loading = _ref2.loading,
|
|
23
|
+
loading = _ref2$loading === void 0 ? false : _ref2$loading,
|
|
24
|
+
_ref2$max = _ref2.max,
|
|
25
|
+
max = _ref2$max === void 0 ? MAX_AVATARS : _ref2$max,
|
|
26
|
+
_ref2$showAll = _ref2.showAll,
|
|
27
|
+
showAll = _ref2$showAll === void 0 ? false : _ref2$showAll,
|
|
28
|
+
_ref2$size = _ref2.size,
|
|
29
|
+
size = _ref2$size === void 0 ? AVATAR_SIZE : _ref2$size,
|
|
30
|
+
rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded);
|
|
31
|
+
var containerSize = size + 28;
|
|
32
|
+
if (loading) {
|
|
33
|
+
return /* @__PURE__ */React.createElement(ui.Box, {
|
|
34
|
+
display: "flex",
|
|
35
|
+
align: "center",
|
|
36
|
+
gap: "4px"
|
|
37
|
+
}, Array.from({
|
|
38
|
+
length: max
|
|
39
|
+
}, function (_, index) {
|
|
40
|
+
return /* @__PURE__ */React.createElement(ui.Box, {
|
|
41
|
+
key: index,
|
|
42
|
+
display: "flex",
|
|
43
|
+
direction: "column",
|
|
44
|
+
align: "center",
|
|
45
|
+
width: containerSize
|
|
46
|
+
}, /* @__PURE__ */React.createElement(ui.Skeleton, {
|
|
47
|
+
width: size,
|
|
48
|
+
height: size,
|
|
49
|
+
variant: "circular"
|
|
50
|
+
}), /* @__PURE__ */React.createElement(ui.Skeleton, {
|
|
51
|
+
width: "85%",
|
|
52
|
+
height: 12,
|
|
53
|
+
variant: "text",
|
|
54
|
+
sx: {
|
|
55
|
+
mt: 3
|
|
56
|
+
}
|
|
57
|
+
}), /* @__PURE__ */React.createElement(ui.Skeleton, {
|
|
58
|
+
width: "70%",
|
|
59
|
+
height: 12,
|
|
60
|
+
variant: "text"
|
|
61
|
+
}));
|
|
62
|
+
}));
|
|
63
|
+
}
|
|
64
|
+
var surplus = showAll ? [] : data.slice(max - 1);
|
|
65
|
+
return /* @__PURE__ */React.createElement(ui.AvatarGroup, _rollupPluginBabelHelpers.objectSpread2({
|
|
66
|
+
max: showAll ? data.length : max,
|
|
67
|
+
spacing: -8,
|
|
68
|
+
size: size,
|
|
69
|
+
surplusTooltip: surplus.length > 0 ? /* @__PURE__ */React.createElement(ui.Box, {
|
|
70
|
+
display: "flex",
|
|
71
|
+
direction: "column",
|
|
72
|
+
gap: "4px"
|
|
73
|
+
}, surplus.map(function (tenant) {
|
|
74
|
+
return /* @__PURE__ */React.createElement("span", {
|
|
75
|
+
key: tenant.id
|
|
76
|
+
}, fullName(tenant));
|
|
77
|
+
})) : void 0
|
|
78
|
+
}, rest), data.map(function (tenant) {
|
|
79
|
+
return /* @__PURE__ */React.createElement(ui.Avatar, {
|
|
80
|
+
key: tenant.id,
|
|
81
|
+
src: tenant.avatarUrl,
|
|
82
|
+
alt: fullName(tenant),
|
|
83
|
+
label: fullName(tenant),
|
|
84
|
+
sx: {
|
|
85
|
+
"&&": {
|
|
86
|
+
ml: "0px "
|
|
87
|
+
}
|
|
88
|
+
},
|
|
89
|
+
slotProps: {
|
|
90
|
+
label: {
|
|
91
|
+
weight: "600",
|
|
92
|
+
align: "center"
|
|
93
|
+
},
|
|
94
|
+
stack: {
|
|
95
|
+
direction: "column",
|
|
96
|
+
width: containerSize,
|
|
97
|
+
p: 1
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
});
|
|
101
|
+
}));
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
exports.default = TenantAvatarGroup;
|
package/dist/cjs/index.cjs
CHANGED
|
@@ -22,6 +22,7 @@ var PersonCard = require('./components/PersonCard.cjs');
|
|
|
22
22
|
var PersonDetailHeader = require('./components/PersonDetailHeader.cjs');
|
|
23
23
|
var PropertyCard = require('./components/PropertyCard.cjs');
|
|
24
24
|
var StatusButton = require('./components/StatusButton.cjs');
|
|
25
|
+
var TenantAvatarGroup = require('./components/TenantAvatarGroup.cjs');
|
|
25
26
|
|
|
26
27
|
|
|
27
28
|
|
|
@@ -47,3 +48,4 @@ exports.PersonCard = PersonCard.default;
|
|
|
47
48
|
exports.PersonDetailHeader = PersonDetailHeader.default;
|
|
48
49
|
exports.PropertyCard = PropertyCard.default;
|
|
49
50
|
exports.StatusButton = StatusButton.default;
|
|
51
|
+
exports.TenantAvatarGroup = TenantAvatarGroup.default;
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { Box, Skeleton, AvatarGroup, Avatar } from '@tenancy.nz/ui';
|
|
4
|
+
|
|
5
|
+
var _excluded = ["data", "loading", "max", "showAll", "size"];
|
|
6
|
+
var MAX_AVATARS = 4;
|
|
7
|
+
var AVATAR_SIZE = 48;
|
|
8
|
+
var fullName = function fullName(_ref) {
|
|
9
|
+
var firstName = _ref.firstName,
|
|
10
|
+
lastName = _ref.lastName;
|
|
11
|
+
return [firstName, lastName].map(function (s) {
|
|
12
|
+
return s.trim();
|
|
13
|
+
}).filter(Boolean).join(" ");
|
|
14
|
+
};
|
|
15
|
+
function TenantAvatarGroup(_ref2) {
|
|
16
|
+
var _ref2$data = _ref2.data,
|
|
17
|
+
data = _ref2$data === void 0 ? [] : _ref2$data,
|
|
18
|
+
_ref2$loading = _ref2.loading,
|
|
19
|
+
loading = _ref2$loading === void 0 ? false : _ref2$loading,
|
|
20
|
+
_ref2$max = _ref2.max,
|
|
21
|
+
max = _ref2$max === void 0 ? MAX_AVATARS : _ref2$max,
|
|
22
|
+
_ref2$showAll = _ref2.showAll,
|
|
23
|
+
showAll = _ref2$showAll === void 0 ? false : _ref2$showAll,
|
|
24
|
+
_ref2$size = _ref2.size,
|
|
25
|
+
size = _ref2$size === void 0 ? AVATAR_SIZE : _ref2$size,
|
|
26
|
+
rest = _objectWithoutProperties(_ref2, _excluded);
|
|
27
|
+
var containerSize = size + 28;
|
|
28
|
+
if (loading) {
|
|
29
|
+
return /* @__PURE__ */React.createElement(Box, {
|
|
30
|
+
display: "flex",
|
|
31
|
+
align: "center",
|
|
32
|
+
gap: "4px"
|
|
33
|
+
}, Array.from({
|
|
34
|
+
length: max
|
|
35
|
+
}, function (_, index) {
|
|
36
|
+
return /* @__PURE__ */React.createElement(Box, {
|
|
37
|
+
key: index,
|
|
38
|
+
display: "flex",
|
|
39
|
+
direction: "column",
|
|
40
|
+
align: "center",
|
|
41
|
+
width: containerSize
|
|
42
|
+
}, /* @__PURE__ */React.createElement(Skeleton, {
|
|
43
|
+
width: size,
|
|
44
|
+
height: size,
|
|
45
|
+
variant: "circular"
|
|
46
|
+
}), /* @__PURE__ */React.createElement(Skeleton, {
|
|
47
|
+
width: "85%",
|
|
48
|
+
height: 12,
|
|
49
|
+
variant: "text",
|
|
50
|
+
sx: {
|
|
51
|
+
mt: 3
|
|
52
|
+
}
|
|
53
|
+
}), /* @__PURE__ */React.createElement(Skeleton, {
|
|
54
|
+
width: "70%",
|
|
55
|
+
height: 12,
|
|
56
|
+
variant: "text"
|
|
57
|
+
}));
|
|
58
|
+
}));
|
|
59
|
+
}
|
|
60
|
+
var surplus = showAll ? [] : data.slice(max - 1);
|
|
61
|
+
return /* @__PURE__ */React.createElement(AvatarGroup, _objectSpread2({
|
|
62
|
+
max: showAll ? data.length : max,
|
|
63
|
+
spacing: -8,
|
|
64
|
+
size: size,
|
|
65
|
+
surplusTooltip: surplus.length > 0 ? /* @__PURE__ */React.createElement(Box, {
|
|
66
|
+
display: "flex",
|
|
67
|
+
direction: "column",
|
|
68
|
+
gap: "4px"
|
|
69
|
+
}, surplus.map(function (tenant) {
|
|
70
|
+
return /* @__PURE__ */React.createElement("span", {
|
|
71
|
+
key: tenant.id
|
|
72
|
+
}, fullName(tenant));
|
|
73
|
+
})) : void 0
|
|
74
|
+
}, rest), data.map(function (tenant) {
|
|
75
|
+
return /* @__PURE__ */React.createElement(Avatar, {
|
|
76
|
+
key: tenant.id,
|
|
77
|
+
src: tenant.avatarUrl,
|
|
78
|
+
alt: fullName(tenant),
|
|
79
|
+
label: fullName(tenant),
|
|
80
|
+
sx: {
|
|
81
|
+
"&&": {
|
|
82
|
+
ml: "0px "
|
|
83
|
+
}
|
|
84
|
+
},
|
|
85
|
+
slotProps: {
|
|
86
|
+
label: {
|
|
87
|
+
weight: "600",
|
|
88
|
+
align: "center"
|
|
89
|
+
},
|
|
90
|
+
stack: {
|
|
91
|
+
direction: "column",
|
|
92
|
+
width: containerSize,
|
|
93
|
+
p: 1
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
});
|
|
97
|
+
}));
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
export { TenantAvatarGroup as default };
|
package/dist/esm/index.js
CHANGED
|
@@ -20,3 +20,4 @@ export { default as PersonCard } from './components/PersonCard.js';
|
|
|
20
20
|
export { default as PersonDetailHeader } from './components/PersonDetailHeader.js';
|
|
21
21
|
export { default as PropertyCard } from './components/PropertyCard.js';
|
|
22
22
|
export { default as StatusButton } from './components/StatusButton.js';
|
|
23
|
+
export { default as TenantAvatarGroup } from './components/TenantAvatarGroup.js';
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tenancy.nz/feature-ui",
|
|
3
3
|
"description": "React UI feature components.",
|
|
4
|
-
"version": "1.9.
|
|
4
|
+
"version": "1.9.9",
|
|
5
5
|
"author": "TPS <https://www.tenancy.co.nz>",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "dist/cjs/index.cjs",
|
|
@@ -19,15 +19,15 @@
|
|
|
19
19
|
"primereact": "3.1.3",
|
|
20
20
|
"react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
|
21
21
|
"react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
|
22
|
-
"@tenancy.nz/icons": "1.9.
|
|
23
|
-
"@tenancy.nz/ui": "1.9.
|
|
22
|
+
"@tenancy.nz/icons": "1.9.9",
|
|
23
|
+
"@tenancy.nz/ui": "1.9.9"
|
|
24
24
|
},
|
|
25
25
|
"devDependencies": {
|
|
26
26
|
"@emotion/react": "^11.14.0",
|
|
27
27
|
"@emotion/styled": "^11.14.1",
|
|
28
28
|
"@mui/material": "^7.3.1",
|
|
29
|
-
"@tenancy.nz/icons": "1.9.
|
|
30
|
-
"@tenancy.nz/ui": "1.9.
|
|
29
|
+
"@tenancy.nz/icons": "1.9.9",
|
|
30
|
+
"@tenancy.nz/ui": "1.9.9"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
33
|
"react-uid": "^2.4.0"
|