@oxyhq/bloom 0.9.0 → 0.9.1
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/lib/commonjs/avatar-group/AvatarGroupBase.js +49 -47
- package/lib/commonjs/avatar-group/AvatarGroupBase.js.map +1 -1
- package/lib/commonjs/user-hover-card/UserHoverCard.js +1 -1
- package/lib/commonjs/user-hover-card/UserHoverCard.js.map +1 -1
- package/lib/module/avatar-group/AvatarGroupBase.js +49 -47
- package/lib/module/avatar-group/AvatarGroupBase.js.map +1 -1
- package/lib/module/user-hover-card/UserHoverCard.js +1 -1
- package/lib/module/user-hover-card/UserHoverCard.js.map +1 -1
- package/lib/typescript/commonjs/avatar-group/AvatarGroupBase.d.ts.map +1 -1
- package/lib/typescript/commonjs/avatar-group/types.d.ts +14 -8
- package/lib/typescript/commonjs/avatar-group/types.d.ts.map +1 -1
- package/lib/typescript/commonjs/user-hover-card/types.d.ts +4 -2
- package/lib/typescript/commonjs/user-hover-card/types.d.ts.map +1 -1
- package/lib/typescript/module/avatar-group/AvatarGroupBase.d.ts.map +1 -1
- package/lib/typescript/module/avatar-group/types.d.ts +14 -8
- package/lib/typescript/module/avatar-group/types.d.ts.map +1 -1
- package/lib/typescript/module/user-hover-card/types.d.ts +4 -2
- package/lib/typescript/module/user-hover-card/types.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/avatar-group/AvatarGroupBase.tsx +54 -46
- package/src/avatar-group/types.ts +14 -8
- package/src/user-hover-card/UserHoverCard.tsx +1 -1
- package/src/user-hover-card/types.ts +4 -2
|
@@ -11,12 +11,12 @@ var _useTheme = require("../theme/use-theme.js");
|
|
|
11
11
|
var _tokens = require("../styles/tokens.js");
|
|
12
12
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
13
13
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
14
|
-
/** Ring thickness
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
const DEFAULT_OVERLAP_RATIO =
|
|
14
|
+
/** Ring (border) thickness around each avatar, in pixels. Matches the
|
|
15
|
+
* original Mention `AvatarStack` (a single hairline-ish 1px separator). */
|
|
16
|
+
const RING_WIDTH = 1;
|
|
17
|
+
/** Default horizontal overlap as a fraction of avatar size — the original
|
|
18
|
+
* stack pulled each avatar left by `size / 3`. */
|
|
19
|
+
const DEFAULT_OVERLAP_RATIO = 1 / 3;
|
|
20
20
|
function getItemName(item) {
|
|
21
21
|
return item.displayName ?? item.name ?? item.username;
|
|
22
22
|
}
|
|
@@ -39,34 +39,46 @@ const AvatarGroupBaseComponent = ({
|
|
|
39
39
|
hoverHandlers
|
|
40
40
|
}) => {
|
|
41
41
|
const theme = (0, _useTheme.useTheme)();
|
|
42
|
-
|
|
43
|
-
|
|
42
|
+
|
|
43
|
+
// The ring is the thin separator drawn between overlapping avatars. It
|
|
44
|
+
// defaults to the page background so avatars read as cleanly punched out of
|
|
45
|
+
// the surface behind them — matching the original Mention stack, which used
|
|
46
|
+
// `theme.colors.background`, not a large `card`-colored ring cell.
|
|
47
|
+
const ring = ringColor ?? theme.colors.background;
|
|
44
48
|
const effectiveOverlap = overlap ?? Math.round(size * DEFAULT_OVERLAP_RATIO);
|
|
45
|
-
// Each avatar after the first is pulled left by `overlap
|
|
46
|
-
//
|
|
47
|
-
|
|
49
|
+
// Each avatar after the first is pulled left by `overlap`. The cell carries a
|
|
50
|
+
// 1px border on each side, so the negative margin absorbs both borders to
|
|
51
|
+
// keep the visual overlap equal to `effectiveOverlap`.
|
|
52
|
+
const negativeMargin = -(effectiveOverlap + RING_WIDTH * 2);
|
|
48
53
|
const shown = (0, _react.useMemo)(() => items.slice(0, Math.max(0, max)), [items, max]);
|
|
49
54
|
const realTotal = total ?? items.length;
|
|
50
55
|
const overflow = Math.max(0, realTotal - shown.length);
|
|
56
|
+
|
|
57
|
+
// Each cell is a circular, clipped container with a 1px ring border. The inner
|
|
58
|
+
// Avatar is inset by the border on both sides so the image fills the circle
|
|
59
|
+
// exactly inside the ring.
|
|
60
|
+
const innerSize = size - RING_WIDTH * 2;
|
|
51
61
|
const cellStyle = (0, _react.useMemo)(() => {
|
|
52
62
|
return {
|
|
53
|
-
width: size
|
|
54
|
-
height: size
|
|
55
|
-
borderRadius:
|
|
56
|
-
|
|
63
|
+
width: size,
|
|
64
|
+
height: size,
|
|
65
|
+
borderRadius: size / 2,
|
|
66
|
+
borderWidth: RING_WIDTH,
|
|
67
|
+
borderColor: ring,
|
|
68
|
+
overflow: 'hidden',
|
|
57
69
|
alignItems: 'center',
|
|
58
70
|
justifyContent: 'center'
|
|
59
71
|
};
|
|
60
|
-
}, [size,
|
|
72
|
+
}, [size, ring]);
|
|
61
73
|
const overflowTextStyle = (0, _react.useMemo)(() => ({
|
|
62
|
-
color:
|
|
63
|
-
fontSize: Math.max(_tokens.fontSize._2xs, Math.round(size * 0.
|
|
74
|
+
color: '#FFFFFF',
|
|
75
|
+
fontSize: Math.max(_tokens.fontSize._2xs, Math.round(size * 0.36)),
|
|
64
76
|
fontWeight: '600'
|
|
65
|
-
}), [
|
|
77
|
+
}), [size]);
|
|
66
78
|
const interactive = typeof onPressItem === 'function';
|
|
67
79
|
const hoverable = typeof hoverHandlers?.onHoverIn === 'function' || typeof hoverHandlers?.onHoverOut === 'function';
|
|
68
80
|
|
|
69
|
-
// Pressing the "+N"
|
|
81
|
+
// Pressing the "+N" circle surfaces the first hidden member (if any), so
|
|
70
82
|
// consumers can route it to a full member list.
|
|
71
83
|
const firstHidden = items[shown.length];
|
|
72
84
|
const overflowOnPress = interactive && firstHidden ? () => onPressItem?.(firstHidden, shown.length) : undefined;
|
|
@@ -91,9 +103,8 @@ const AvatarGroupBaseComponent = ({
|
|
|
91
103
|
collapsable: false,
|
|
92
104
|
style: cellStyle,
|
|
93
105
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Avatar, {
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
size: size
|
|
106
|
+
source: item.uri ?? undefined,
|
|
107
|
+
size: innerSize
|
|
97
108
|
})
|
|
98
109
|
});
|
|
99
110
|
if (interactive || hoverable) {
|
|
@@ -111,7 +122,7 @@ const AvatarGroupBaseComponent = ({
|
|
|
111
122
|
style: wrapperStyle,
|
|
112
123
|
children: cell
|
|
113
124
|
}, getItemKey(item, index));
|
|
114
|
-
}), overflow > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
125
|
+
}), overflow > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(OverflowCircle, {
|
|
115
126
|
count: overflow,
|
|
116
127
|
cellStyle: cellStyle,
|
|
117
128
|
negativeMargin: shown.length > 0 ? negativeMargin : 0,
|
|
@@ -120,7 +131,7 @@ const AvatarGroupBaseComponent = ({
|
|
|
120
131
|
})]
|
|
121
132
|
});
|
|
122
133
|
};
|
|
123
|
-
function
|
|
134
|
+
function OverflowCircle({
|
|
124
135
|
count,
|
|
125
136
|
cellStyle,
|
|
126
137
|
negativeMargin,
|
|
@@ -128,8 +139,8 @@ function OverflowChip({
|
|
|
128
139
|
onPress
|
|
129
140
|
}) {
|
|
130
141
|
const theme = (0, _useTheme.useTheme)();
|
|
131
|
-
// The
|
|
132
|
-
// last avatar's ring. The margin lives on the outer element to keep layout
|
|
142
|
+
// The count circle is anchored at the lowest stacking order so it tucks behind
|
|
143
|
+
// the last avatar's ring. The margin lives on the outer element to keep layout
|
|
133
144
|
// aligned with the overlap.
|
|
134
145
|
const wrapperStyle = {
|
|
135
146
|
...(negativeMargin !== 0 && {
|
|
@@ -137,19 +148,17 @@ function OverflowChip({
|
|
|
137
148
|
}),
|
|
138
149
|
zIndex: 0
|
|
139
150
|
};
|
|
140
|
-
|
|
151
|
+
|
|
152
|
+
// A solid "+N" count circle: secondary-text-colored fill with white text,
|
|
153
|
+
// matching the original Mention `ResponsiveAvatarStack` count circle.
|
|
154
|
+
const circle = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
141
155
|
style: [cellStyle, {
|
|
142
|
-
backgroundColor: theme.colors.
|
|
156
|
+
backgroundColor: theme.colors.textSecondary
|
|
143
157
|
}],
|
|
144
|
-
children: /*#__PURE__*/(0, _jsxRuntime.
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
|
|
149
|
-
allowFontScaling: false,
|
|
150
|
-
style: textStyle,
|
|
151
|
-
children: ["+", count]
|
|
152
|
-
})
|
|
158
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
|
|
159
|
+
allowFontScaling: false,
|
|
160
|
+
style: textStyle,
|
|
161
|
+
children: ["+", count]
|
|
153
162
|
})
|
|
154
163
|
});
|
|
155
164
|
if (onPress) {
|
|
@@ -158,25 +167,18 @@ function OverflowChip({
|
|
|
158
167
|
accessibilityRole: "button",
|
|
159
168
|
accessibilityLabel: `${count} more`,
|
|
160
169
|
style: wrapperStyle,
|
|
161
|
-
children:
|
|
170
|
+
children: circle
|
|
162
171
|
});
|
|
163
172
|
}
|
|
164
173
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
165
174
|
style: wrapperStyle,
|
|
166
|
-
children:
|
|
175
|
+
children: circle
|
|
167
176
|
});
|
|
168
177
|
}
|
|
169
178
|
const styles = _reactNative.StyleSheet.create({
|
|
170
179
|
row: {
|
|
171
180
|
flexDirection: 'row',
|
|
172
181
|
alignItems: 'center'
|
|
173
|
-
},
|
|
174
|
-
chipInner: {
|
|
175
|
-
width: '100%',
|
|
176
|
-
height: '100%',
|
|
177
|
-
borderRadius: 999,
|
|
178
|
-
alignItems: 'center',
|
|
179
|
-
justifyContent: 'center'
|
|
180
182
|
}
|
|
181
183
|
});
|
|
182
184
|
const AvatarGroupBase = exports.AvatarGroupBase = /*#__PURE__*/(0, _react.memo)(AvatarGroupBaseComponent);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_index","_useTheme","_tokens","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_index","_useTheme","_tokens","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","RING_WIDTH","DEFAULT_OVERLAP_RATIO","getItemName","item","displayName","name","username","getItemKey","index","id","uri","AvatarGroupBaseComponent","items","size","max","total","overlap","ringColor","onPressItem","style","testID","hoverHandlers","theme","useTheme","ring","colors","background","effectiveOverlap","Math","round","negativeMargin","shown","useMemo","slice","realTotal","length","overflow","innerSize","cellStyle","width","height","borderRadius","borderWidth","borderColor","alignItems","justifyContent","overflowTextStyle","color","fontSize","_2xs","fontWeight","interactive","hoverable","onHoverIn","onHoverOut","firstHidden","overflowOnPress","undefined","jsxs","View","styles","row","children","map","accessibilityLabel","wrapperStyle","marginLeft","zIndex","cell","jsx","ref","registerCellRef","node","collapsable","Avatar","source","Pressable","onPress","accessibilityRole","OverflowCircle","count","textStyle","circle","backgroundColor","textSecondary","Text","allowFontScaling","StyleSheet","create","flexDirection","AvatarGroupBase","exports","memo"],"sourceRoot":"../../../src","sources":["avatar-group/AvatarGroupBase.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -53,7 +53,7 @@ const UserHoverCardComponent = ({
|
|
|
53
53
|
const identity = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
54
54
|
style: styles.identityRow,
|
|
55
55
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Avatar, {
|
|
56
|
-
|
|
56
|
+
source: avatar ?? undefined,
|
|
57
57
|
name: displayName,
|
|
58
58
|
size: AVATAR_SIZE
|
|
59
59
|
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_index","_VerifiedCheck","_useTheme","_tokens","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","AVATAR_SIZE","VERIFIED_SIZE","UserHoverCardComponent","avatar","displayName","username","bio","stats","verified","onPressProfile","action","style","testID","theme","useTheme","cardStyle","useMemo","base","backgroundColor","colors","card","borderRadius","lg","borderWidth","StyleSheet","hairlineWidth","borderColor","border","padding","space","width","Platform","OS","boxShadow","shadow","shadowColor","shadowOffset","height","shadowOpacity","shadowRadius","elevation","identity","jsxs","View","styles","identityRow","children","jsx","Avatar","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_index","_VerifiedCheck","_useTheme","_tokens","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","AVATAR_SIZE","VERIFIED_SIZE","UserHoverCardComponent","avatar","displayName","username","bio","stats","verified","onPressProfile","action","style","testID","theme","useTheme","cardStyle","useMemo","base","backgroundColor","colors","card","borderRadius","lg","borderWidth","StyleSheet","hairlineWidth","borderColor","border","padding","space","width","Platform","OS","boxShadow","shadow","shadowColor","shadowOffset","height","shadowOpacity","shadowRadius","elevation","identity","jsxs","View","styles","identityRow","children","jsx","Avatar","source","undefined","name","size","identityText","nameRow","Text","numberOfLines","color","text","VerifiedCheck","fill","primary","verifiedBadge","textSecondary","header","Pressable","onPress","accessibilityRole","accessibilityLabel","identityPressable","length","statsRow","map","stat","statValue","value","statLabel","label","create","flexDirection","alignItems","justifyContent","gap","sm","flexShrink","flexGrow","xs","fontSize","fontWeight","marginTop","_2xs","lineHeight","md","UserHoverCard","exports","memo"],"sourceRoot":"../../../src","sources":["user-hover-card/UserHoverCard.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -6,12 +6,12 @@ import { Avatar } from "../avatar/index.js";
|
|
|
6
6
|
import { useTheme } from "../theme/use-theme.js";
|
|
7
7
|
import { fontSize } from "../styles/tokens.js";
|
|
8
8
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
9
|
-
/** Ring thickness
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
const DEFAULT_OVERLAP_RATIO =
|
|
9
|
+
/** Ring (border) thickness around each avatar, in pixels. Matches the
|
|
10
|
+
* original Mention `AvatarStack` (a single hairline-ish 1px separator). */
|
|
11
|
+
const RING_WIDTH = 1;
|
|
12
|
+
/** Default horizontal overlap as a fraction of avatar size — the original
|
|
13
|
+
* stack pulled each avatar left by `size / 3`. */
|
|
14
|
+
const DEFAULT_OVERLAP_RATIO = 1 / 3;
|
|
15
15
|
function getItemName(item) {
|
|
16
16
|
return item.displayName ?? item.name ?? item.username;
|
|
17
17
|
}
|
|
@@ -34,34 +34,46 @@ const AvatarGroupBaseComponent = ({
|
|
|
34
34
|
hoverHandlers
|
|
35
35
|
}) => {
|
|
36
36
|
const theme = useTheme();
|
|
37
|
-
|
|
38
|
-
|
|
37
|
+
|
|
38
|
+
// The ring is the thin separator drawn between overlapping avatars. It
|
|
39
|
+
// defaults to the page background so avatars read as cleanly punched out of
|
|
40
|
+
// the surface behind them — matching the original Mention stack, which used
|
|
41
|
+
// `theme.colors.background`, not a large `card`-colored ring cell.
|
|
42
|
+
const ring = ringColor ?? theme.colors.background;
|
|
39
43
|
const effectiveOverlap = overlap ?? Math.round(size * DEFAULT_OVERLAP_RATIO);
|
|
40
|
-
// Each avatar after the first is pulled left by `overlap
|
|
41
|
-
//
|
|
42
|
-
|
|
44
|
+
// Each avatar after the first is pulled left by `overlap`. The cell carries a
|
|
45
|
+
// 1px border on each side, so the negative margin absorbs both borders to
|
|
46
|
+
// keep the visual overlap equal to `effectiveOverlap`.
|
|
47
|
+
const negativeMargin = -(effectiveOverlap + RING_WIDTH * 2);
|
|
43
48
|
const shown = useMemo(() => items.slice(0, Math.max(0, max)), [items, max]);
|
|
44
49
|
const realTotal = total ?? items.length;
|
|
45
50
|
const overflow = Math.max(0, realTotal - shown.length);
|
|
51
|
+
|
|
52
|
+
// Each cell is a circular, clipped container with a 1px ring border. The inner
|
|
53
|
+
// Avatar is inset by the border on both sides so the image fills the circle
|
|
54
|
+
// exactly inside the ring.
|
|
55
|
+
const innerSize = size - RING_WIDTH * 2;
|
|
46
56
|
const cellStyle = useMemo(() => {
|
|
47
57
|
return {
|
|
48
|
-
width: size
|
|
49
|
-
height: size
|
|
50
|
-
borderRadius:
|
|
51
|
-
|
|
58
|
+
width: size,
|
|
59
|
+
height: size,
|
|
60
|
+
borderRadius: size / 2,
|
|
61
|
+
borderWidth: RING_WIDTH,
|
|
62
|
+
borderColor: ring,
|
|
63
|
+
overflow: 'hidden',
|
|
52
64
|
alignItems: 'center',
|
|
53
65
|
justifyContent: 'center'
|
|
54
66
|
};
|
|
55
|
-
}, [size,
|
|
67
|
+
}, [size, ring]);
|
|
56
68
|
const overflowTextStyle = useMemo(() => ({
|
|
57
|
-
color:
|
|
58
|
-
fontSize: Math.max(fontSize._2xs, Math.round(size * 0.
|
|
69
|
+
color: '#FFFFFF',
|
|
70
|
+
fontSize: Math.max(fontSize._2xs, Math.round(size * 0.36)),
|
|
59
71
|
fontWeight: '600'
|
|
60
|
-
}), [
|
|
72
|
+
}), [size]);
|
|
61
73
|
const interactive = typeof onPressItem === 'function';
|
|
62
74
|
const hoverable = typeof hoverHandlers?.onHoverIn === 'function' || typeof hoverHandlers?.onHoverOut === 'function';
|
|
63
75
|
|
|
64
|
-
// Pressing the "+N"
|
|
76
|
+
// Pressing the "+N" circle surfaces the first hidden member (if any), so
|
|
65
77
|
// consumers can route it to a full member list.
|
|
66
78
|
const firstHidden = items[shown.length];
|
|
67
79
|
const overflowOnPress = interactive && firstHidden ? () => onPressItem?.(firstHidden, shown.length) : undefined;
|
|
@@ -86,9 +98,8 @@ const AvatarGroupBaseComponent = ({
|
|
|
86
98
|
collapsable: false,
|
|
87
99
|
style: cellStyle,
|
|
88
100
|
children: /*#__PURE__*/_jsx(Avatar, {
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
size: size
|
|
101
|
+
source: item.uri ?? undefined,
|
|
102
|
+
size: innerSize
|
|
92
103
|
})
|
|
93
104
|
});
|
|
94
105
|
if (interactive || hoverable) {
|
|
@@ -106,7 +117,7 @@ const AvatarGroupBaseComponent = ({
|
|
|
106
117
|
style: wrapperStyle,
|
|
107
118
|
children: cell
|
|
108
119
|
}, getItemKey(item, index));
|
|
109
|
-
}), overflow > 0 && /*#__PURE__*/_jsx(
|
|
120
|
+
}), overflow > 0 && /*#__PURE__*/_jsx(OverflowCircle, {
|
|
110
121
|
count: overflow,
|
|
111
122
|
cellStyle: cellStyle,
|
|
112
123
|
negativeMargin: shown.length > 0 ? negativeMargin : 0,
|
|
@@ -115,7 +126,7 @@ const AvatarGroupBaseComponent = ({
|
|
|
115
126
|
})]
|
|
116
127
|
});
|
|
117
128
|
};
|
|
118
|
-
function
|
|
129
|
+
function OverflowCircle({
|
|
119
130
|
count,
|
|
120
131
|
cellStyle,
|
|
121
132
|
negativeMargin,
|
|
@@ -123,8 +134,8 @@ function OverflowChip({
|
|
|
123
134
|
onPress
|
|
124
135
|
}) {
|
|
125
136
|
const theme = useTheme();
|
|
126
|
-
// The
|
|
127
|
-
// last avatar's ring. The margin lives on the outer element to keep layout
|
|
137
|
+
// The count circle is anchored at the lowest stacking order so it tucks behind
|
|
138
|
+
// the last avatar's ring. The margin lives on the outer element to keep layout
|
|
128
139
|
// aligned with the overlap.
|
|
129
140
|
const wrapperStyle = {
|
|
130
141
|
...(negativeMargin !== 0 && {
|
|
@@ -132,19 +143,17 @@ function OverflowChip({
|
|
|
132
143
|
}),
|
|
133
144
|
zIndex: 0
|
|
134
145
|
};
|
|
135
|
-
|
|
146
|
+
|
|
147
|
+
// A solid "+N" count circle: secondary-text-colored fill with white text,
|
|
148
|
+
// matching the original Mention `ResponsiveAvatarStack` count circle.
|
|
149
|
+
const circle = /*#__PURE__*/_jsx(View, {
|
|
136
150
|
style: [cellStyle, {
|
|
137
|
-
backgroundColor: theme.colors.
|
|
151
|
+
backgroundColor: theme.colors.textSecondary
|
|
138
152
|
}],
|
|
139
|
-
children: /*#__PURE__*/
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
children: /*#__PURE__*/_jsxs(Text, {
|
|
144
|
-
allowFontScaling: false,
|
|
145
|
-
style: textStyle,
|
|
146
|
-
children: ["+", count]
|
|
147
|
-
})
|
|
153
|
+
children: /*#__PURE__*/_jsxs(Text, {
|
|
154
|
+
allowFontScaling: false,
|
|
155
|
+
style: textStyle,
|
|
156
|
+
children: ["+", count]
|
|
148
157
|
})
|
|
149
158
|
});
|
|
150
159
|
if (onPress) {
|
|
@@ -153,25 +162,18 @@ function OverflowChip({
|
|
|
153
162
|
accessibilityRole: "button",
|
|
154
163
|
accessibilityLabel: `${count} more`,
|
|
155
164
|
style: wrapperStyle,
|
|
156
|
-
children:
|
|
165
|
+
children: circle
|
|
157
166
|
});
|
|
158
167
|
}
|
|
159
168
|
return /*#__PURE__*/_jsx(View, {
|
|
160
169
|
style: wrapperStyle,
|
|
161
|
-
children:
|
|
170
|
+
children: circle
|
|
162
171
|
});
|
|
163
172
|
}
|
|
164
173
|
const styles = StyleSheet.create({
|
|
165
174
|
row: {
|
|
166
175
|
flexDirection: 'row',
|
|
167
176
|
alignItems: 'center'
|
|
168
|
-
},
|
|
169
|
-
chipInner: {
|
|
170
|
-
width: '100%',
|
|
171
|
-
height: '100%',
|
|
172
|
-
borderRadius: 999,
|
|
173
|
-
alignItems: 'center',
|
|
174
|
-
justifyContent: 'center'
|
|
175
177
|
}
|
|
176
178
|
});
|
|
177
179
|
export const AvatarGroupBase = /*#__PURE__*/memo(AvatarGroupBaseComponent);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","memo","useMemo","Pressable","StyleSheet","Text","View","Avatar","useTheme","fontSize","jsx","_jsx","jsxs","_jsxs","
|
|
1
|
+
{"version":3,"names":["React","memo","useMemo","Pressable","StyleSheet","Text","View","Avatar","useTheme","fontSize","jsx","_jsx","jsxs","_jsxs","RING_WIDTH","DEFAULT_OVERLAP_RATIO","getItemName","item","displayName","name","username","getItemKey","index","id","uri","AvatarGroupBaseComponent","items","size","max","total","overlap","ringColor","onPressItem","style","testID","hoverHandlers","theme","ring","colors","background","effectiveOverlap","Math","round","negativeMargin","shown","slice","realTotal","length","overflow","innerSize","cellStyle","width","height","borderRadius","borderWidth","borderColor","alignItems","justifyContent","overflowTextStyle","color","_2xs","fontWeight","interactive","hoverable","onHoverIn","onHoverOut","firstHidden","overflowOnPress","undefined","styles","row","children","map","accessibilityLabel","wrapperStyle","marginLeft","zIndex","cell","ref","registerCellRef","node","collapsable","source","onPress","accessibilityRole","OverflowCircle","count","textStyle","circle","backgroundColor","textSecondary","allowFontScaling","create","flexDirection","AvatarGroupBase"],"sourceRoot":"../../../src","sources":["avatar-group/AvatarGroupBase.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -48,7 +48,7 @@ const UserHoverCardComponent = ({
|
|
|
48
48
|
const identity = /*#__PURE__*/_jsxs(View, {
|
|
49
49
|
style: styles.identityRow,
|
|
50
50
|
children: [/*#__PURE__*/_jsx(Avatar, {
|
|
51
|
-
|
|
51
|
+
source: avatar ?? undefined,
|
|
52
52
|
name: displayName,
|
|
53
53
|
size: AVATAR_SIZE
|
|
54
54
|
}), /*#__PURE__*/_jsxs(View, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","memo","useMemo","Platform","Pressable","StyleSheet","Text","View","Avatar","VerifiedCheck","useTheme","borderRadius","fontSize","space","jsx","_jsx","jsxs","_jsxs","AVATAR_SIZE","VERIFIED_SIZE","UserHoverCardComponent","avatar","displayName","username","bio","stats","verified","onPressProfile","action","style","testID","theme","cardStyle","base","backgroundColor","colors","card","lg","borderWidth","hairlineWidth","borderColor","border","padding","width","OS","boxShadow","shadow","shadowColor","shadowOffset","height","shadowOpacity","shadowRadius","elevation","identity","styles","identityRow","children","
|
|
1
|
+
{"version":3,"names":["React","memo","useMemo","Platform","Pressable","StyleSheet","Text","View","Avatar","VerifiedCheck","useTheme","borderRadius","fontSize","space","jsx","_jsx","jsxs","_jsxs","AVATAR_SIZE","VERIFIED_SIZE","UserHoverCardComponent","avatar","displayName","username","bio","stats","verified","onPressProfile","action","style","testID","theme","cardStyle","base","backgroundColor","colors","card","lg","borderWidth","hairlineWidth","borderColor","border","padding","width","OS","boxShadow","shadow","shadowColor","shadowOffset","height","shadowOpacity","shadowRadius","elevation","identity","styles","identityRow","children","source","undefined","name","size","identityText","nameRow","numberOfLines","color","text","fill","primary","verifiedBadge","textSecondary","header","onPress","accessibilityRole","accessibilityLabel","identityPressable","length","statsRow","map","stat","statValue","value","statLabel","label","create","flexDirection","alignItems","justifyContent","gap","sm","flexShrink","flexGrow","xs","fontWeight","marginTop","_2xs","lineHeight","md","UserHoverCard"],"sourceRoot":"../../../src","sources":["user-hover-card/UserHoverCard.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarGroupBase.d.ts","sourceRoot":"","sources":["../../../../src/avatar-group/AvatarGroupBase.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,EAIL,IAAI,EAEL,MAAM,cAAc,CAAC;AAKtB,OAAO,KAAK,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAiBjE,6EAA6E;AAC7E,MAAM,WAAW,4BAA4B;IAC3C,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,oEAAoE;IACpE,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;CAC9D;AAED,UAAU,oBAAqB,SAAQ,gBAAgB;IACrD,aAAa,CAAC,EAAE,4BAA4B,CAAC;CAC9C;
|
|
1
|
+
{"version":3,"file":"AvatarGroupBase.d.ts","sourceRoot":"","sources":["../../../../src/avatar-group/AvatarGroupBase.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,EAIL,IAAI,EAEL,MAAM,cAAc,CAAC;AAKtB,OAAO,KAAK,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAiBjE,6EAA6E;AAC7E,MAAM,WAAW,4BAA4B;IAC3C,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,oEAAoE;IACpE,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;CAC9D;AAED,UAAU,oBAAqB,SAAQ,gBAAgB;IACrD,aAAa,CAAC,EAAE,4BAA4B,CAAC;CAC9C;AAwND,eAAO,MAAM,eAAe,kDAAiC,CAAC"}
|
|
@@ -2,16 +2,21 @@ import type { ReactNode } from 'react';
|
|
|
2
2
|
import type { StyleProp, ViewStyle } from 'react-native';
|
|
3
3
|
/**
|
|
4
4
|
* A single member of an {@link AvatarGroup}. Mirrors the minimal shape needed to
|
|
5
|
-
* render an {@link Avatar} plus drive the optional hover card. `uri`
|
|
6
|
-
* avatar
|
|
7
|
-
*
|
|
5
|
+
* render an {@link Avatar} plus drive the optional hover card. `uri` carries the
|
|
6
|
+
* avatar value (routed into Avatar's `source` prop); `name`/`displayName`/
|
|
7
|
+
* `username` are used for the hover card and accessibility only.
|
|
8
8
|
*/
|
|
9
9
|
export interface AvatarGroupItem {
|
|
10
10
|
/** Stable identity used as a React key and passed back to handlers. */
|
|
11
11
|
id?: string;
|
|
12
|
-
/**
|
|
12
|
+
/**
|
|
13
|
+
* Avatar value, routed into {@link Avatar}'s `source` prop. Accepts a full
|
|
14
|
+
* image URL OR a resolver-handled id (e.g. an Oxy file ID) — non-URL strings
|
|
15
|
+
* resolve through the consumer's ImageResolver. Null/undefined renders
|
|
16
|
+
* Avatar's neutral default placeholder.
|
|
17
|
+
*/
|
|
13
18
|
uri?: string | null;
|
|
14
|
-
/**
|
|
19
|
+
/** Name used for the hover card / accessibility when `displayName` is absent. */
|
|
15
20
|
name?: string;
|
|
16
21
|
/** Canonical, already-resolved display name (preferred over `name`). */
|
|
17
22
|
displayName?: string;
|
|
@@ -32,13 +37,14 @@ export interface AvatarGroupProps {
|
|
|
32
37
|
*/
|
|
33
38
|
total?: number;
|
|
34
39
|
/**
|
|
35
|
-
* Horizontal overlap between adjacent avatars in pixels. Defaults to ~
|
|
40
|
+
* Horizontal overlap between adjacent avatars in pixels. Defaults to ~1/3 of
|
|
36
41
|
* `size`. Larger values pull avatars closer together.
|
|
37
42
|
*/
|
|
38
43
|
overlap?: number;
|
|
39
44
|
/**
|
|
40
|
-
* Color of the ring/border drawn around each avatar so
|
|
41
|
-
* Defaults to the theme `
|
|
45
|
+
* Color of the thin ring/border drawn around each avatar so overlapping
|
|
46
|
+
* avatars separate cleanly. Defaults to the theme `background` color so the
|
|
47
|
+
* avatars read as punched out of the surface behind them.
|
|
42
48
|
*/
|
|
43
49
|
ringColor?: string;
|
|
44
50
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/avatar-group/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD;;;;;GAKG;AACH,MAAM,WAAW,eAAe;IAC9B,uEAAuE;IACvE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/avatar-group/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD;;;;;GAKG;AACH,MAAM,WAAW,eAAe;IAC9B,uEAAuE;IACvE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;;OAKG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,iFAAiF;IACjF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,gBAAgB;IAC/B,qEAAqE;IACrE,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oFAAoF;IACpF,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7D;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IACvE,gCAAgC;IAChC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}
|
|
@@ -9,8 +9,10 @@ export interface UserHoverCardStat {
|
|
|
9
9
|
}
|
|
10
10
|
export interface UserHoverCardProps {
|
|
11
11
|
/**
|
|
12
|
-
* Avatar image source
|
|
13
|
-
*
|
|
12
|
+
* Avatar image source. Accepts a full image URL OR a resolver-handled id
|
|
13
|
+
* (e.g. an Oxy file ID) — it is routed into {@link Avatar}'s `source` prop, so
|
|
14
|
+
* non-URL strings resolve through the consumer's ImageResolver. Null/undefined
|
|
15
|
+
* falls back to the deterministic name-based placeholder.
|
|
14
16
|
*/
|
|
15
17
|
avatar?: string | null;
|
|
16
18
|
/** Canonical, already-resolved display name (an API contract — render directly). */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/user-hover-card/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,oFAAoF;AACpF,MAAM,WAAW,iBAAiB;IAChC,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,kBAAkB;IACjC
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/user-hover-card/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,oFAAoF;AACpF,MAAM,WAAW,iBAAiB;IAChC,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,kBAAkB;IACjC;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,oFAAoF;IACpF,WAAW,EAAE,MAAM,CAAC;IACpB,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0DAA0D;IAC1D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yDAAyD;IACzD,KAAK,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC5B,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kEAAkE;IAClE,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,gCAAgC;IAChC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarGroupBase.d.ts","sourceRoot":"","sources":["../../../../src/avatar-group/AvatarGroupBase.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,EAIL,IAAI,EAEL,MAAM,cAAc,CAAC;AAKtB,OAAO,KAAK,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAiBjE,6EAA6E;AAC7E,MAAM,WAAW,4BAA4B;IAC3C,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,oEAAoE;IACpE,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;CAC9D;AAED,UAAU,oBAAqB,SAAQ,gBAAgB;IACrD,aAAa,CAAC,EAAE,4BAA4B,CAAC;CAC9C;
|
|
1
|
+
{"version":3,"file":"AvatarGroupBase.d.ts","sourceRoot":"","sources":["../../../../src/avatar-group/AvatarGroupBase.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,EAIL,IAAI,EAEL,MAAM,cAAc,CAAC;AAKtB,OAAO,KAAK,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAiBjE,6EAA6E;AAC7E,MAAM,WAAW,4BAA4B;IAC3C,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,oEAAoE;IACpE,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;CAC9D;AAED,UAAU,oBAAqB,SAAQ,gBAAgB;IACrD,aAAa,CAAC,EAAE,4BAA4B,CAAC;CAC9C;AAwND,eAAO,MAAM,eAAe,kDAAiC,CAAC"}
|
|
@@ -2,16 +2,21 @@ import type { ReactNode } from 'react';
|
|
|
2
2
|
import type { StyleProp, ViewStyle } from 'react-native';
|
|
3
3
|
/**
|
|
4
4
|
* A single member of an {@link AvatarGroup}. Mirrors the minimal shape needed to
|
|
5
|
-
* render an {@link Avatar} plus drive the optional hover card. `uri`
|
|
6
|
-
* avatar
|
|
7
|
-
*
|
|
5
|
+
* render an {@link Avatar} plus drive the optional hover card. `uri` carries the
|
|
6
|
+
* avatar value (routed into Avatar's `source` prop); `name`/`displayName`/
|
|
7
|
+
* `username` are used for the hover card and accessibility only.
|
|
8
8
|
*/
|
|
9
9
|
export interface AvatarGroupItem {
|
|
10
10
|
/** Stable identity used as a React key and passed back to handlers. */
|
|
11
11
|
id?: string;
|
|
12
|
-
/**
|
|
12
|
+
/**
|
|
13
|
+
* Avatar value, routed into {@link Avatar}'s `source` prop. Accepts a full
|
|
14
|
+
* image URL OR a resolver-handled id (e.g. an Oxy file ID) — non-URL strings
|
|
15
|
+
* resolve through the consumer's ImageResolver. Null/undefined renders
|
|
16
|
+
* Avatar's neutral default placeholder.
|
|
17
|
+
*/
|
|
13
18
|
uri?: string | null;
|
|
14
|
-
/**
|
|
19
|
+
/** Name used for the hover card / accessibility when `displayName` is absent. */
|
|
15
20
|
name?: string;
|
|
16
21
|
/** Canonical, already-resolved display name (preferred over `name`). */
|
|
17
22
|
displayName?: string;
|
|
@@ -32,13 +37,14 @@ export interface AvatarGroupProps {
|
|
|
32
37
|
*/
|
|
33
38
|
total?: number;
|
|
34
39
|
/**
|
|
35
|
-
* Horizontal overlap between adjacent avatars in pixels. Defaults to ~
|
|
40
|
+
* Horizontal overlap between adjacent avatars in pixels. Defaults to ~1/3 of
|
|
36
41
|
* `size`. Larger values pull avatars closer together.
|
|
37
42
|
*/
|
|
38
43
|
overlap?: number;
|
|
39
44
|
/**
|
|
40
|
-
* Color of the ring/border drawn around each avatar so
|
|
41
|
-
* Defaults to the theme `
|
|
45
|
+
* Color of the thin ring/border drawn around each avatar so overlapping
|
|
46
|
+
* avatars separate cleanly. Defaults to the theme `background` color so the
|
|
47
|
+
* avatars read as punched out of the surface behind them.
|
|
42
48
|
*/
|
|
43
49
|
ringColor?: string;
|
|
44
50
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/avatar-group/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD;;;;;GAKG;AACH,MAAM,WAAW,eAAe;IAC9B,uEAAuE;IACvE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/avatar-group/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD;;;;;GAKG;AACH,MAAM,WAAW,eAAe;IAC9B,uEAAuE;IACvE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;;OAKG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,iFAAiF;IACjF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,gBAAgB;IAC/B,qEAAqE;IACrE,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oFAAoF;IACpF,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7D;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IACvE,gCAAgC;IAChC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}
|
|
@@ -9,8 +9,10 @@ export interface UserHoverCardStat {
|
|
|
9
9
|
}
|
|
10
10
|
export interface UserHoverCardProps {
|
|
11
11
|
/**
|
|
12
|
-
* Avatar image source
|
|
13
|
-
*
|
|
12
|
+
* Avatar image source. Accepts a full image URL OR a resolver-handled id
|
|
13
|
+
* (e.g. an Oxy file ID) — it is routed into {@link Avatar}'s `source` prop, so
|
|
14
|
+
* non-URL strings resolve through the consumer's ImageResolver. Null/undefined
|
|
15
|
+
* falls back to the deterministic name-based placeholder.
|
|
14
16
|
*/
|
|
15
17
|
avatar?: string | null;
|
|
16
18
|
/** Canonical, already-resolved display name (an API contract — render directly). */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/user-hover-card/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,oFAAoF;AACpF,MAAM,WAAW,iBAAiB;IAChC,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,kBAAkB;IACjC
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/user-hover-card/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,oFAAoF;AACpF,MAAM,WAAW,iBAAiB;IAChC,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,kBAAkB;IACjC;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,oFAAoF;IACpF,WAAW,EAAE,MAAM,CAAC;IACpB,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0DAA0D;IAC1D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yDAAyD;IACzD,KAAK,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC5B,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kEAAkE;IAClE,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,gCAAgC;IAChC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}
|
package/package.json
CHANGED
|
@@ -12,12 +12,12 @@ import { useTheme } from '../theme/use-theme';
|
|
|
12
12
|
import { fontSize } from '../styles/tokens';
|
|
13
13
|
import type { AvatarGroupItem, AvatarGroupProps } from './types';
|
|
14
14
|
|
|
15
|
-
/** Ring thickness
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
const DEFAULT_OVERLAP_RATIO =
|
|
15
|
+
/** Ring (border) thickness around each avatar, in pixels. Matches the
|
|
16
|
+
* original Mention `AvatarStack` (a single hairline-ish 1px separator). */
|
|
17
|
+
const RING_WIDTH = 1;
|
|
18
|
+
/** Default horizontal overlap as a fraction of avatar size — the original
|
|
19
|
+
* stack pulled each avatar left by `size / 3`. */
|
|
20
|
+
const DEFAULT_OVERLAP_RATIO = 1 / 3;
|
|
21
21
|
|
|
22
22
|
function getItemName(item: AvatarGroupItem): string | undefined {
|
|
23
23
|
return item.displayName ?? item.name ?? item.username;
|
|
@@ -53,13 +53,17 @@ const AvatarGroupBaseComponent: React.FC<AvatarGroupBaseProps> = ({
|
|
|
53
53
|
}) => {
|
|
54
54
|
const theme = useTheme();
|
|
55
55
|
|
|
56
|
-
|
|
57
|
-
|
|
56
|
+
// The ring is the thin separator drawn between overlapping avatars. It
|
|
57
|
+
// defaults to the page background so avatars read as cleanly punched out of
|
|
58
|
+
// the surface behind them — matching the original Mention stack, which used
|
|
59
|
+
// `theme.colors.background`, not a large `card`-colored ring cell.
|
|
60
|
+
const ring = ringColor ?? theme.colors.background;
|
|
58
61
|
const effectiveOverlap =
|
|
59
62
|
overlap ?? Math.round(size * DEFAULT_OVERLAP_RATIO);
|
|
60
|
-
// Each avatar after the first is pulled left by `overlap
|
|
61
|
-
//
|
|
62
|
-
|
|
63
|
+
// Each avatar after the first is pulled left by `overlap`. The cell carries a
|
|
64
|
+
// 1px border on each side, so the negative margin absorbs both borders to
|
|
65
|
+
// keep the visual overlap equal to `effectiveOverlap`.
|
|
66
|
+
const negativeMargin = -(effectiveOverlap + RING_WIDTH * 2);
|
|
63
67
|
|
|
64
68
|
const shown = useMemo(
|
|
65
69
|
() => items.slice(0, Math.max(0, max)),
|
|
@@ -69,24 +73,30 @@ const AvatarGroupBaseComponent: React.FC<AvatarGroupBaseProps> = ({
|
|
|
69
73
|
const realTotal = total ?? items.length;
|
|
70
74
|
const overflow = Math.max(0, realTotal - shown.length);
|
|
71
75
|
|
|
76
|
+
// Each cell is a circular, clipped container with a 1px ring border. The inner
|
|
77
|
+
// Avatar is inset by the border on both sides so the image fills the circle
|
|
78
|
+
// exactly inside the ring.
|
|
79
|
+
const innerSize = size - RING_WIDTH * 2;
|
|
72
80
|
const cellStyle = useMemo((): ViewStyle => {
|
|
73
81
|
return {
|
|
74
|
-
width: size
|
|
75
|
-
height: size
|
|
76
|
-
borderRadius:
|
|
77
|
-
|
|
82
|
+
width: size,
|
|
83
|
+
height: size,
|
|
84
|
+
borderRadius: size / 2,
|
|
85
|
+
borderWidth: RING_WIDTH,
|
|
86
|
+
borderColor: ring,
|
|
87
|
+
overflow: 'hidden',
|
|
78
88
|
alignItems: 'center',
|
|
79
89
|
justifyContent: 'center',
|
|
80
90
|
};
|
|
81
|
-
}, [size,
|
|
91
|
+
}, [size, ring]);
|
|
82
92
|
|
|
83
93
|
const overflowTextStyle = useMemo(
|
|
84
94
|
() => ({
|
|
85
|
-
color:
|
|
86
|
-
fontSize: Math.max(fontSize._2xs, Math.round(size * 0.
|
|
95
|
+
color: '#FFFFFF',
|
|
96
|
+
fontSize: Math.max(fontSize._2xs, Math.round(size * 0.36)),
|
|
87
97
|
fontWeight: '600' as const,
|
|
88
98
|
}),
|
|
89
|
-
[
|
|
99
|
+
[size],
|
|
90
100
|
);
|
|
91
101
|
|
|
92
102
|
const interactive = typeof onPressItem === 'function';
|
|
@@ -94,7 +104,7 @@ const AvatarGroupBaseComponent: React.FC<AvatarGroupBaseProps> = ({
|
|
|
94
104
|
typeof hoverHandlers?.onHoverIn === 'function' ||
|
|
95
105
|
typeof hoverHandlers?.onHoverOut === 'function';
|
|
96
106
|
|
|
97
|
-
// Pressing the "+N"
|
|
107
|
+
// Pressing the "+N" circle surfaces the first hidden member (if any), so
|
|
98
108
|
// consumers can route it to a full member list.
|
|
99
109
|
const firstHidden = items[shown.length];
|
|
100
110
|
const overflowOnPress =
|
|
@@ -128,7 +138,15 @@ const AvatarGroupBaseComponent: React.FC<AvatarGroupBaseProps> = ({
|
|
|
128
138
|
collapsable={false}
|
|
129
139
|
style={cellStyle}
|
|
130
140
|
>
|
|
131
|
-
|
|
141
|
+
{/*
|
|
142
|
+
Route the item's avatar value through Avatar's `source` prop (not
|
|
143
|
+
`uri`): full URLs pass through directly, while resolver-handled ids
|
|
144
|
+
(e.g. Oxy file IDs) are resolved by the consumer's ImageResolver —
|
|
145
|
+
exactly like the original Mention stack. No `name` is passed, so a
|
|
146
|
+
missing avatar shows Avatar's neutral default placeholder rather
|
|
147
|
+
than a colored deterministic initial.
|
|
148
|
+
*/}
|
|
149
|
+
<Avatar source={item.uri ?? undefined} size={innerSize} />
|
|
132
150
|
</View>
|
|
133
151
|
);
|
|
134
152
|
|
|
@@ -166,7 +184,7 @@ const AvatarGroupBaseComponent: React.FC<AvatarGroupBaseProps> = ({
|
|
|
166
184
|
})}
|
|
167
185
|
|
|
168
186
|
{overflow > 0 && (
|
|
169
|
-
<
|
|
187
|
+
<OverflowCircle
|
|
170
188
|
count={overflow}
|
|
171
189
|
cellStyle={cellStyle}
|
|
172
190
|
negativeMargin={shown.length > 0 ? negativeMargin : 0}
|
|
@@ -178,7 +196,7 @@ const AvatarGroupBaseComponent: React.FC<AvatarGroupBaseProps> = ({
|
|
|
178
196
|
);
|
|
179
197
|
};
|
|
180
198
|
|
|
181
|
-
function
|
|
199
|
+
function OverflowCircle({
|
|
182
200
|
count,
|
|
183
201
|
cellStyle,
|
|
184
202
|
negativeMargin,
|
|
@@ -192,26 +210,23 @@ function OverflowChip({
|
|
|
192
210
|
onPress?: () => void;
|
|
193
211
|
}) {
|
|
194
212
|
const theme = useTheme();
|
|
195
|
-
// The
|
|
196
|
-
// last avatar's ring. The margin lives on the outer element to keep layout
|
|
213
|
+
// The count circle is anchored at the lowest stacking order so it tucks behind
|
|
214
|
+
// the last avatar's ring. The margin lives on the outer element to keep layout
|
|
197
215
|
// aligned with the overlap.
|
|
198
216
|
const wrapperStyle: ViewStyle = {
|
|
199
217
|
...(negativeMargin !== 0 && { marginLeft: negativeMargin }),
|
|
200
218
|
zIndex: 0,
|
|
201
219
|
};
|
|
202
220
|
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
+{count}
|
|
213
|
-
</Text>
|
|
214
|
-
</View>
|
|
221
|
+
// A solid "+N" count circle: secondary-text-colored fill with white text,
|
|
222
|
+
// matching the original Mention `ResponsiveAvatarStack` count circle.
|
|
223
|
+
const circle = (
|
|
224
|
+
<View
|
|
225
|
+
style={[cellStyle, { backgroundColor: theme.colors.textSecondary }]}
|
|
226
|
+
>
|
|
227
|
+
<Text allowFontScaling={false} style={textStyle}>
|
|
228
|
+
+{count}
|
|
229
|
+
</Text>
|
|
215
230
|
</View>
|
|
216
231
|
);
|
|
217
232
|
|
|
@@ -223,12 +238,12 @@ function OverflowChip({
|
|
|
223
238
|
accessibilityLabel={`${count} more`}
|
|
224
239
|
style={wrapperStyle}
|
|
225
240
|
>
|
|
226
|
-
{
|
|
241
|
+
{circle}
|
|
227
242
|
</Pressable>
|
|
228
243
|
);
|
|
229
244
|
}
|
|
230
245
|
|
|
231
|
-
return <View style={wrapperStyle}>{
|
|
246
|
+
return <View style={wrapperStyle}>{circle}</View>;
|
|
232
247
|
}
|
|
233
248
|
|
|
234
249
|
const styles = StyleSheet.create({
|
|
@@ -236,13 +251,6 @@ const styles = StyleSheet.create({
|
|
|
236
251
|
flexDirection: 'row',
|
|
237
252
|
alignItems: 'center',
|
|
238
253
|
},
|
|
239
|
-
chipInner: {
|
|
240
|
-
width: '100%',
|
|
241
|
-
height: '100%',
|
|
242
|
-
borderRadius: 999,
|
|
243
|
-
alignItems: 'center',
|
|
244
|
-
justifyContent: 'center',
|
|
245
|
-
},
|
|
246
254
|
});
|
|
247
255
|
|
|
248
256
|
export const AvatarGroupBase = memo(AvatarGroupBaseComponent);
|
|
@@ -3,16 +3,21 @@ import type { StyleProp, ViewStyle } from 'react-native';
|
|
|
3
3
|
|
|
4
4
|
/**
|
|
5
5
|
* A single member of an {@link AvatarGroup}. Mirrors the minimal shape needed to
|
|
6
|
-
* render an {@link Avatar} plus drive the optional hover card. `uri`
|
|
7
|
-
* avatar
|
|
8
|
-
*
|
|
6
|
+
* render an {@link Avatar} plus drive the optional hover card. `uri` carries the
|
|
7
|
+
* avatar value (routed into Avatar's `source` prop); `name`/`displayName`/
|
|
8
|
+
* `username` are used for the hover card and accessibility only.
|
|
9
9
|
*/
|
|
10
10
|
export interface AvatarGroupItem {
|
|
11
11
|
/** Stable identity used as a React key and passed back to handlers. */
|
|
12
12
|
id?: string;
|
|
13
|
-
/**
|
|
13
|
+
/**
|
|
14
|
+
* Avatar value, routed into {@link Avatar}'s `source` prop. Accepts a full
|
|
15
|
+
* image URL OR a resolver-handled id (e.g. an Oxy file ID) — non-URL strings
|
|
16
|
+
* resolve through the consumer's ImageResolver. Null/undefined renders
|
|
17
|
+
* Avatar's neutral default placeholder.
|
|
18
|
+
*/
|
|
14
19
|
uri?: string | null;
|
|
15
|
-
/**
|
|
20
|
+
/** Name used for the hover card / accessibility when `displayName` is absent. */
|
|
16
21
|
name?: string;
|
|
17
22
|
/** Canonical, already-resolved display name (preferred over `name`). */
|
|
18
23
|
displayName?: string;
|
|
@@ -34,13 +39,14 @@ export interface AvatarGroupProps {
|
|
|
34
39
|
*/
|
|
35
40
|
total?: number;
|
|
36
41
|
/**
|
|
37
|
-
* Horizontal overlap between adjacent avatars in pixels. Defaults to ~
|
|
42
|
+
* Horizontal overlap between adjacent avatars in pixels. Defaults to ~1/3 of
|
|
38
43
|
* `size`. Larger values pull avatars closer together.
|
|
39
44
|
*/
|
|
40
45
|
overlap?: number;
|
|
41
46
|
/**
|
|
42
|
-
* Color of the ring/border drawn around each avatar so
|
|
43
|
-
* Defaults to the theme `
|
|
47
|
+
* Color of the thin ring/border drawn around each avatar so overlapping
|
|
48
|
+
* avatars separate cleanly. Defaults to the theme `background` color so the
|
|
49
|
+
* avatars read as punched out of the surface behind them.
|
|
44
50
|
*/
|
|
45
51
|
ringColor?: string;
|
|
46
52
|
/**
|
|
@@ -56,7 +56,7 @@ const UserHoverCardComponent: React.FC<UserHoverCardProps> = ({
|
|
|
56
56
|
|
|
57
57
|
const identity = (
|
|
58
58
|
<View style={styles.identityRow}>
|
|
59
|
-
<Avatar
|
|
59
|
+
<Avatar source={avatar ?? undefined} name={displayName} size={AVATAR_SIZE} />
|
|
60
60
|
<View style={styles.identityText}>
|
|
61
61
|
<View style={styles.nameRow}>
|
|
62
62
|
<Text
|
|
@@ -11,8 +11,10 @@ export interface UserHoverCardStat {
|
|
|
11
11
|
|
|
12
12
|
export interface UserHoverCardProps {
|
|
13
13
|
/**
|
|
14
|
-
* Avatar image source
|
|
15
|
-
*
|
|
14
|
+
* Avatar image source. Accepts a full image URL OR a resolver-handled id
|
|
15
|
+
* (e.g. an Oxy file ID) — it is routed into {@link Avatar}'s `source` prop, so
|
|
16
|
+
* non-URL strings resolve through the consumer's ImageResolver. Null/undefined
|
|
17
|
+
* falls back to the deterministic name-based placeholder.
|
|
16
18
|
*/
|
|
17
19
|
avatar?: string | null;
|
|
18
20
|
/** Canonical, already-resolved display name (an API contract — render directly). */
|