imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Apply strictNullChecks to src/components/views/elements/* (#10462

Browse source 
* Apply `strictNullChecks` to `src/components/views/elements/*`

* Iterate

* Iterate

* Iterate

* Apply `strictNullChecks` to `src/components/views/elements/*`

* Iterate

* Iterate

* Iterate

* Update snapshot
This commit is contained in:
Michael Telatynski 2023-03-29 08:23:54 +01:00 • committed by GitHub
parent cefd94859c
commit a47b3eb0ee
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
24 changed files with 158 additions and 121 deletions
Download patch file Download diff file Expand all files Collapse all files

37
src/components/views/elements/Dropdown.tsx
View file

@ -23,6 +23,7 @@ import { _t } from "../../../languageHandler";
import { getKeyBindingsManager } from "../../../KeyBindingsManager";
import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
import { objectHasDiff } from "../../../utils/objects";
import { NonEmptyArray } from "../../../@types/common";
interface IMenuOptionProps {
children: ReactElement;
@ -77,7 +78,7 @@ export interface DropdownProps {
label: string;
value?: string;
className?: string;
children: ReactElement[];
children: NonEmptyArray<ReactElement & { key: string }>;
// negative for consistency with HTML
disabled?: boolean;
// The width that the dropdown should be. If specified,
@ -102,7 +103,7 @@ export interface DropdownProps {
interface IState {
expanded: boolean;
highlightedOption: string | null;
highlightedOption: string;
searchQuery: string;
}
@ -122,14 +123,14 @@ export default class Dropdown extends React.Component<DropdownProps, IState> {
this.reindexChildren(this.props.children);
const firstChild = React.Children.toArray(props.children)[0] as ReactElement;
const firstChild = props.children[0];
this.state = {
// True if the menu is dropped-down
expanded: false,
// The key of the highlighted option
// (the option that would become selected if you pressed enter)
highlightedOption: firstChild ? (firstChild.key as string) : null,
highlightedOption: firstChild.key,
// the current search query
searchQuery: "",
};
@ -144,7 +145,7 @@ export default class Dropdown extends React.Component<DropdownProps, IState> {
this.reindexChildren(this.props.children);
const firstChild = this.props.children[0];
this.setState({
highlightedOption: String(firstChild?.key) ?? null,
highlightedOption: firstChild.key,
});
}
}
@ -156,7 +157,7 @@ export default class Dropdown extends React.Component<DropdownProps, IState> {
private reindexChildren(children: ReactElement[]): void {
this.childrenByKey = {};
React.Children.forEach(children, (child) => {
this.childrenByKey[child.key] = child;
this.childrenByKey[(child as DropdownProps["children"][number]).key] = child;
});
}
@ -291,13 +292,11 @@ export default class Dropdown extends React.Component<DropdownProps, IState> {
return keys[index <= 0 ? keys.length - 1 : (index - 1) % keys.length];
}
private scrollIntoView(node: Element): void {
if (node) {
node.scrollIntoView({
block: "nearest",
behavior: "auto",
});
}
private scrollIntoView(node: Element | null): void {
node?.scrollIntoView({
block: "nearest",
behavior: "auto",
});
}
private getMenuOptions(): JSX.Element[] {
@ -317,7 +316,7 @@ export default class Dropdown extends React.Component<DropdownProps, IState> {
</MenuOption>
);
});
if (options.length === 0) {
if (!options?.length) {
return [
<div key="0" className="mx_Dropdown_option" role="option" aria-selected={false}>
{_t("No results")}
@ -363,9 +362,13 @@ export default class Dropdown extends React.Component<DropdownProps, IState> {
}
if (!currentValue) {
const selectedChild = this.props.getShortOption
? this.props.getShortOption(this.props.value)
: this.childrenByKey[this.props.value];
let selectedChild: ReactNode | undefined;
if (this.props.value) {
selectedChild = this.props.getShortOption
? this.props.getShortOption(this.props.value)
: this.childrenByKey[this.props.value];
}
currentValue = (
<div className="mx_Dropdown_option" id={`${this.props.id}_value`}>
{selectedChild || this.props.placeholder}