Apply strictNullChecks to src/components/views/emojipicker/* (#10298)

This commit is contained in:
Michael Telatynski 2023-03-07 11:28:48 +00:00 committed by GitHub
parent 1b806bb47b
commit 2191a2d820
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 11 additions and 10 deletions

View file

@ -36,7 +36,6 @@ const ZERO_WIDTH_JOINER = "\u200D";
interface IProps {
selectedEmojis?: Set<string>;
showQuickReactions?: boolean;
onChoose(unicode: string): boolean;
isEmojiDisabled?: (unicode: string) => boolean;
}
@ -143,6 +142,7 @@ class EmojiPicker extends React.Component<IProps, IState> {
private onScroll = (): void => {
const body = this.scrollRef.current?.containerRef.current;
if (!body) return;
this.setState({
scrollTop: body.scrollTop,
viewportHeight: body.clientHeight,
@ -152,12 +152,13 @@ class EmojiPicker extends React.Component<IProps, IState> {
private updateVisibility = (): void => {
const body = this.scrollRef.current?.containerRef.current;
if (!body) return;
const rect = body.getBoundingClientRect();
for (const cat of this.categories) {
const elem = body.querySelector(`[data-category-id="${cat.id}"]`);
if (!elem) {
cat.visible = false;
cat.ref.current.classList.remove("mx_EmojiPicker_anchor_visible");
cat.ref.current?.classList.remove("mx_EmojiPicker_anchor_visible");
continue;
}
const elemRect = elem.getBoundingClientRect();
@ -165,6 +166,7 @@ class EmojiPicker extends React.Component<IProps, IState> {
const yEnd = elemRect.y + elemRect.height - rect.y;
cat.visible = y < rect.height && yEnd > 0;
// We update this here instead of through React to avoid re-render on scroll.
if (!cat.ref.current) continue;
if (cat.visible) {
cat.ref.current.classList.add("mx_EmojiPicker_anchor_visible");
cat.ref.current.setAttribute("aria-selected", "true");
@ -180,7 +182,7 @@ class EmojiPicker extends React.Component<IProps, IState> {
private scrollToCategory = (category: string): void => {
this.scrollRef.current?.containerRef.current
?.querySelector(`[data-category-id="${category}"]`)
.scrollIntoView();
?.scrollIntoView();
};
private onChangeFilter = (filter: string): void => {
@ -299,7 +301,7 @@ class EmojiPicker extends React.Component<IProps, IState> {
return categoryElement;
})}
</AutoHideScrollbar>
{this.state.previewEmoji || !this.props.showQuickReactions ? (
{this.state.previewEmoji ? (
<Preview emoji={this.state.previewEmoji} />
) : (
<QuickReactions onClick={this.onClickEmoji} selectedEmojis={this.props.selectedEmojis} />

View file

@ -29,7 +29,7 @@ interface IProps {
}
class Header extends React.PureComponent<IProps> {
private findNearestEnabled(index: number, delta: number): number {
private findNearestEnabled(index: number, delta: number): number | undefined {
index += this.props.categories.length;
const cats = [...this.props.categories, ...this.props.categories, ...this.props.categories];
@ -45,10 +45,10 @@ class Header extends React.PureComponent<IProps> {
}
private changeCategoryAbsolute(index: number, delta = 1): void {
const category = this.props.categories[this.findNearestEnabled(index, delta)];
const category = this.props.categories[this.findNearestEnabled(index, delta)!];
if (category) {
this.props.onAnchorClick(category.id);
category.ref.current.focus();
category.ref.current?.focus();
}
}

View file

@ -82,7 +82,7 @@ class ReactionPicker extends React.Component<IProps, IState> {
return Object.fromEntries(
[...myAnnotations]
.filter((event) => !event.isRedacted())
.map((event) => [event.getRelation().key, event.getId()]),
.map((event) => [event.getRelation()?.key, event.getId()]),
);
}
@ -136,7 +136,6 @@ class ReactionPicker extends React.Component<IProps, IState> {
onChoose={this.onChoose}
isEmojiDisabled={this.isEmojiDisabled}
selectedEmojis={this.state.selectedEmojis}
showQuickReactions={true}
/>
);
}

View file

@ -46,7 +46,7 @@ export function EmojiButton({ addEmoji, menuPosition, className }: IEmojiButtonP
}}
managed={false}
>
<EmojiPicker onChoose={addEmoji} showQuickReactions={true} />
<EmojiPicker onChoose={addEmoji} />
</ContextMenu>
);
}