From 949d28a88f8bdedf1487895f6597b3ac2051e2b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sat, 30 Jul 2022 09:46:47 +0200
Subject: [PATCH] `Facepile`
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 src/{Facepile.jsx => Facepile.tsx} | 53 +++++++++++++++++++++---------
 1 file changed, 37 insertions(+), 16 deletions(-)
 rename src/{Facepile.jsx => Facepile.tsx} (54%)

diff --git a/src/Facepile.jsx b/src/Facepile.tsx
similarity index 54%
rename from src/Facepile.jsx
rename to src/Facepile.tsx
index e19e6425..5f661c34 100644
--- a/src/Facepile.jsx
+++ b/src/Facepile.tsx
@@ -1,22 +1,48 @@
-import React from "react";
-import styles from "./Facepile.module.css";
-import classNames from "classnames";
-import { Avatar, sizes } from "./Avatar";
+/*
+Copyright 2022 New Vector Ltd
 
-const overlapMap = {
-  xs: 2,
-  sm: 4,
-  md: 8,
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { HTMLAttributes } from "react";
+import classNames from "classnames";
+import { MatrixClient, RoomMember } from "matrix-js-sdk";
+
+import styles from "./Facepile.module.css";
+import { Avatar, Size, sizes } from "./Avatar";
+
+const overlapMap: Partial<Record<Size, number>> = {
+  [Size.XS]: 2,
+  [Size.SM]: 4,
+  [Size.MD]: 8,
 };
 
+interface Props extends HTMLAttributes<HTMLDivElement> {
+  className: string;
+  client: MatrixClient;
+  participants: RoomMember[];
+  max: number;
+  size: Size;
+}
+
 export function Facepile({
   className,
   client,
   participants,
-  max,
-  size,
+  max = 3,
+  size = Size.XS,
   ...rest
-}) {
+}: Props) {
   const _size = sizes.get(size);
   const _overlap = overlapMap[size];
 
@@ -56,8 +82,3 @@ export function Facepile({
     </div>
   );
 }
-
-Facepile.defaultProps = {
-  max: 3,
-  size: "xs",
-};