signal-desktop/ts/components/ContactPills.tsx

34 lines
917 B
TypeScript
Raw Normal View History

2021-03-03 20:09:58 +00:00
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import type { FunctionComponent, ReactNode } from 'react';
import React, { useRef, useEffect, Children } from 'react';
2021-03-03 20:09:58 +00:00
2021-09-17 22:24:21 +00:00
import { usePrevious } from '../hooks/usePrevious';
import { scrollToBottom } from '../util/scrollToBottom';
2021-03-03 20:09:58 +00:00
type PropsType = {
children?: ReactNode;
};
export const ContactPills: FunctionComponent<PropsType> = ({ children }) => {
const elRef = useRef<null | HTMLDivElement>(null);
const childCount = Children.count(children);
const previousChildCount = usePrevious(0, childCount);
2021-03-03 20:09:58 +00:00
useEffect(() => {
const hasAddedNewChild = childCount > previousChildCount;
const el = elRef.current;
if (hasAddedNewChild && el) {
scrollToBottom(el);
2021-03-03 20:09:58 +00:00
}
}, [childCount, previousChildCount]);
return (
<div className="module-ContactPills" ref={elRef}>
{children}
</div>
);
};