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

src/components/views/emojipicker/EmojiPicker.tsx

@@ -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} />

src/components/views/emojipicker/Header.tsx

@@ -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();
         }
     }
 

src/components/views/emojipicker/ReactionPicker.tsx

@@ -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}
             />
         );
     }

src/components/views/rooms/EmojiButton.tsx

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