39 lines
956 B
TypeScript
39 lines
956 B
TypeScript
// Copyright 2021 Signal Messenger, LLC
|
|
// SPDX-License-Identifier: AGPL-3.0-only
|
|
|
|
import React, {
|
|
useRef,
|
|
useEffect,
|
|
Children,
|
|
FunctionComponent,
|
|
ReactNode,
|
|
} from 'react';
|
|
|
|
import { scrollToBottom } from '../util/scrollToBottom';
|
|
|
|
type PropsType = {
|
|
children?: ReactNode;
|
|
};
|
|
|
|
export const ContactPills: FunctionComponent<PropsType> = ({ children }) => {
|
|
const elRef = useRef<null | HTMLDivElement>(null);
|
|
|
|
const childCount = Children.count(children);
|
|
const previousChildCountRef = useRef<number>(childCount);
|
|
const previousChildCount = previousChildCountRef.current;
|
|
previousChildCountRef.current = childCount;
|
|
|
|
useEffect(() => {
|
|
const hasAddedNewChild = childCount > previousChildCount;
|
|
const el = elRef.current;
|
|
if (hasAddedNewChild && el) {
|
|
scrollToBottom(el);
|
|
}
|
|
}, [childCount, previousChildCount]);
|
|
|
|
return (
|
|
<div className="module-ContactPills" ref={elRef}>
|
|
{children}
|
|
</div>
|
|
);
|
|
};
|