Factor out a more generic FacePile

Signed-off-by: Robin Townsend <[email protected]>

Author: robintown

res/css/views/elements/_FacePile.scss

@@ -20,7 +20,7 @@ limitations under the License.
         flex-direction: row-reverse;
         vertical-align: middle;
 
-        > .mx_FacePile_face + .mx_FacePile_face {
+        > * + * {
             margin-right: -8px;
         }
 

src/components/structures/SpaceRoomView.tsx

@@ -58,7 +58,7 @@ import {
 import SpaceHierarchy, { showRoom } from "./SpaceHierarchy";
 import MemberAvatar from "../views/avatars/MemberAvatar";
 import SpaceStore from "../../stores/spaces/SpaceStore";
-import FacePile from "../views/elements/FacePile";
+import { RoomFacePile } from "../views/elements/FacePile";
 import {
     AddExistingToSpace,
     defaultDmsRenderer,
@@ -354,7 +354,7 @@ const SpacePreview = ({ space, onJoinButtonClicked, onRejectButtonClicked }: ISp
                 </div>
             }
         </RoomTopic>
-        { space.getJoinRule() === "public" && <FacePile room={space} /> }
+        { space.getJoinRule() === "public" && <RoomFacePile room={space} /> }
         <div className="mx_SpaceRoomView_preview_joinButtons">
             { joinButtons }
         </div>
@@ -495,7 +495,7 @@ const SpaceLanding = ({ space }: { space: Room }) => {
         </div>
         <div className="mx_SpaceRoomView_landing_info">
             <SpaceInfo space={space} />
-            <FacePile room={space} onlyKnownUsers={false} numShown={7} onClick={onMembersClick} />
+            <RoomFacePile room={space} onlyKnownUsers={false} numShown={7} onClick={onMembersClick} />
             { inviteButton }
             { settingsButton }
         </div>

src/components/views/elements/FacePile.tsx

@@ -26,17 +26,48 @@ import TextWithTooltip from "../elements/TextWithTooltip";
 import { useRoomMembers } from "../../../hooks/useRoomMembers";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 
+interface IProps extends HTMLAttributes<HTMLSpanElement> {
+    faces: ReactNode[];
+    overflow: boolean;
+    tooltip?: ReactNode;
+    children?: ReactNode;
+}
+
+const FacePile = ({ faces, overflow, tooltip, children, ...props }: IProps) => {
+    const pileContents = <>
+        { overflow ? <span className="mx_FacePile_more" /> : null }
+        { faces }
+    </>;
+
+    return <div {...props} className="mx_FacePile">
+        { tooltip ? (
+            <TextWithTooltip class="mx_FacePile_faces" tooltip={tooltip} tooltipProps={{ yOffset: 32 }}>
+                { pileContents }
+            </TextWithTooltip>
+        ) : (
+            <div className="mx_FacePile_faces">
+                { pileContents }
+            </div>
+        ) }
+        { children }
+    </div>;
+};
+
+export default FacePile;
+
 const DEFAULT_NUM_FACES = 5;
 
-interface IProps extends HTMLAttributes<HTMLSpanElement> {
+const isKnownMember = (member: RoomMember) => !!DMRoomMap.shared().getDMRoomsForUserId(member.userId)?.length;
+
+interface IRoomProps extends HTMLAttributes<HTMLSpanElement> {
     room: Room;
     onlyKnownUsers?: boolean;
     numShown?: number;
 }
 
-const isKnownMember = (member: RoomMember) => !!DMRoomMap.shared().getDMRoomsForUserId(member.userId)?.length;
-
-const FacePile = ({ room, onlyKnownUsers = true, numShown = DEFAULT_NUM_FACES, ...props }: IProps) => {
+export const RoomFacePile = (
+    { room, onlyKnownUsers = true, numShown = DEFAULT_NUM_FACES, ...props }: IRoomProps,
+) => {
     const cli = useContext(MatrixClientContext);
     const isJoined = room.getMyMembership() === "join";
     let members = useRoomMembers(room);
@@ -58,6 +89,8 @@ const FacePile = ({ room, onlyKnownUsers = true, numShown = DEFAULT_NUM_FACES, .
     // We reverse the order of the shown faces in CSS to simplify their visual overlap,
     // reverse members in tooltip order to make the order between the two match up.
     const commaSeparatedMembers = shownMembers.map(m => m.rawDisplayName).reverse().join(", ");
+    const faces = shownMembers.map(m =>
+        <MemberAvatar key={m.userId} member={m} width={28} height={28} />);
 
     let tooltip: ReactNode;
     if (props.onClick) {
@@ -90,16 +123,9 @@ const FacePile = ({ room, onlyKnownUsers = true, numShown = DEFAULT_NUM_FACES, .
         }
     }
 
-    return <div {...props} className="mx_FacePile">
-        <TextWithTooltip class="mx_FacePile_faces" tooltip={tooltip} tooltipProps={{ yOffset: 32 }}>
-            { members.length > numShown ? <span className="mx_FacePile_face mx_FacePile_more" /> : null }
-            { shownMembers.map(m =>
-                <MemberAvatar key={m.userId} member={m} width={28} height={28} className="mx_FacePile_face" />) }
-        </TextWithTooltip>
+    return <FacePile faces={faces} overflow={members.length > numShown} tooltip={tooltip}>
         { onlyKnownUsers && <span className="mx_FacePile_summary">
             { _t("%(count)s people you know have already joined", { count: members.length }) }
         </span> }
-    </div>;
+    </FacePile>;
 };
-
-export default FacePile;