prettier

src/video-grid/NewVideoGrid.tsx

@@ -9,45 +9,46 @@ interface Cell {
   /**
    * The item held by the slot containing this cell.
    */
-  item: TileDescriptor
+  item: TileDescriptor;
   /**
    * Whether this cell is the first cell of the containing slot.
    */
-  slot: boolean
+  slot: boolean;
   /**
    * The width, in columns, of the containing slot.
    */
-  columns: number
+  columns: number;
   /**
    * The height, in rows, of the containing slot.
    */
-  rows: number
+  rows: number;
 }
 
 interface Rect {
-  x: number
+  x: number;
-  y: number
+  y: number;
-  width: number
+  width: number;
-  height: number
+  height: number;
 }
 
 interface Tile extends Rect {
-  item: TileDescriptor
+  item: TileDescriptor;
-  dragging: boolean
+  dragging: boolean;
 }
 
 interface SlotsProps {
-  count: number
+  count: number;
 }
 
 /**
  * Generates a number of empty slot divs.
  */
 const Slots: FC<SlotsProps> = memo(({ count }) => {
-  const slots = new Array<ReactNode>(count)
+  const slots = new Array<ReactNode>(count);
-  for (let i = 0; i < count; i++) slots[i] = <div className={styles.slot} key={i} />
+  for (let i = 0; i < count; i++)
-  return <>{slots}</>
+    slots[i] = <div className={styles.slot} key={i} />;
-})
+  return <>{slots}</>;
+});
 
 export const NewVideoGrid: FC<Props> = ({ items, children }) => {
   const slotGridRef = useRef<HTMLDivElement>(null);
@@ -56,51 +57,71 @@ export const NewVideoGrid: FC<Props> = ({ items, children }) => {
   const slotRects = useMemo(() => {
     if (slotGridRef.current === null) return [];
 
-    const slots = slotGridRef.current.getElementsByClassName(styles.slot)
+    const slots = slotGridRef.current.getElementsByClassName(styles.slot);
-    const rects = new Array<Rect>(slots.length)
+    const rects = new Array<Rect>(slots.length);
     for (let i = 0; i < slots.length; i++) {
-      const slot = slots[i] as HTMLElement
+      const slot = slots[i] as HTMLElement;
       rects[i] = {
         x: slot.offsetLeft,
         y: slot.offsetTop,
         width: slot.offsetWidth,
         height: slot.offsetHeight,
-      }
+      };
     }
 
     return rects;
   }, [items, gridBounds]);
 
-  const cells: Cell[] = useMemo(() => items.map(item => ({
+  const cells: Cell[] = useMemo(
-    item,
+    () =>
-    slot: true,
+      items.map((item) => ({
-    columns: 1,
+        item,
-    rows: 1,
+        slot: true,
-  })), [items])
+        columns: 1,
+        rows: 1,
+      })),
+    [items]
+  );
 
-  const slotCells = useMemo(() => cells.filter(cell => cell.slot), [cells])
+  const slotCells = useMemo(() => cells.filter((cell) => cell.slot), [cells]);
 
-  const tiles: Tile[] = useMemo(() => slotRects.flatMap((slot, i) => {
+  const tiles: Tile[] = useMemo(
-    const cell = slotCells[i]
+    () =>
-    if (cell === undefined) return []
+      slotRects.flatMap((slot, i) => {
+        const cell = slotCells[i];
+        if (cell === undefined) return [];
 
-    return [{
+        return [
-      item: cell.item,
+          {
-      x: slot.x,
+            item: cell.item,
-      y: slot.y,
+            x: slot.x,
-      width: slot.width,
+            y: slot.y,
-      height: slot.height,
+            width: slot.width,
-      dragging: false,
+            height: slot.height,
-    }]
+            dragging: false,
-  }), [slotRects, cells])
+          },
+        ];
+      }),
+    [slotRects, cells]
+  );
 
-  const [tileTransitions] = useTransition(tiles, () => ({
+  const [tileTransitions] = useTransition(
-    key: ({ item }: Tile) => item.id,
+    tiles,
-    from: { opacity: 0 },
+    () => ({
-    enter: ({ x, y, width, height }: Tile) => ({ opacity: 1, x, y, width, height }),
+      key: ({ item }: Tile) => item.id,
-    update: ({ x, y, width, height }: Tile) => ({ x, y, width, height }),
+      from: { opacity: 0 },
-    leave: { opacity: 0 },
+      enter: ({ x, y, width, height }: Tile) => ({
-  }), [tiles])
+        opacity: 1,
+        x,
+        y,
+        width,
+        height,
+      }),
+      update: ({ x, y, width, height }: Tile) => ({ x, y, width, height }),
+      leave: { opacity: 0 },
+    }),
+    [tiles]
+  );
 
   const slotGridStyle = useMemo(() => {
     const columnCount = gridBounds.width >= 800 ? 6 : 3;
@@ -111,28 +132,29 @@ export const NewVideoGrid: FC<Props> = ({ items, children }) => {
 
   // Render nothing if the bounds are not yet known
   if (gridBounds.width === 0) {
-    return <div ref={gridRef} className={styles.grid}>
+    return (
-      {/* It's important that we always attach slotGridRef to something,
+      <div ref={gridRef} className={styles.grid}>
+        {/* It's important that we always attach slotGridRef to something,
       or else we may not receive the initial slot rects. */}
-      <div ref={slotGridRef} className={styles.slotGrid} />
+        <div ref={slotGridRef} className={styles.slotGrid} />
-    </div>
+      </div>
+    );
   }
 
   return (
-    <div
+    <div ref={gridRef} className={styles.grid}>
-      ref={gridRef}
-      className={styles.grid}
-    >
       <div style={slotGridStyle} ref={slotGridRef} className={styles.slotGrid}>
         <Slots count={items.length} />
       </div>
-      {tileTransitions((style, tile) => children({
+      {tileTransitions((style, tile) =>
-        key: tile.item.id,
+        children({
-        style: style as any,
+          key: tile.item.id,
-        width: tile.width,
+          style: style as any,
-        height: tile.height,
+          width: tile.width,
-        item: tile.item,
+          height: tile.height,
-      }))}
+          item: tile.item,
+        })
+      )}
     </div>
   );
 };