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

Prepare for switching AccessibleButton and derivatives to forwardRef (#12072)

Browse source 
* Improve AccessibleButton props & docs

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Improve AccessibleTooltipButton props docs

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Simplify roving tab index hook usage

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Ditch RefObject type casts

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Convert AccessibleTooltipButton to a Functional Component

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2023-12-20 10:58:24 +00:00 • committed by GitHub
parent 2212fbadd0
commit bf61d93bf4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 140 additions and 103 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/views/dialogs/AddExistingToSpaceDialog.tsx
View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React, { ReactElement, ReactNode, RefObject, useContext, useMemo, useRef, useState } from "react";
import React, { ReactElement, ReactNode, useContext, useMemo, useRef, useState } from "react";
import classNames from "classnames";
import { Room, EventType } from "matrix-js-sdk/src/matrix";
import { sleep } from "matrix-js-sdk/src/utils";
@ -144,7 +144,7 @@ export const AddExistingToSpace: React.FC<IAddExistingToSpaceProps> = ({
[cli, msc3946ProcessDynamicPredecessor],
);
const scrollRef = useRef() as RefObject<AutoHideScrollbar<"div">>;
const scrollRef = useRef<AutoHideScrollbar<"div">>(null);
const [scrollState, setScrollState] = useState<IScrollState>({
// these are estimates which update as soon as it mounts
scrollTop: 0,

8
src/components/views/dialogs/DeactivateAccountDialog.tsx
View file

@ -23,7 +23,7 @@ import { MatrixClient } from "matrix-js-sdk/src/matrix";
import { MatrixClientPeg } from "../../../MatrixClientPeg";
import { _t } from "../../../languageHandler";
import InteractiveAuth, { ERROR_USER_CANCELLED, InteractiveAuthCallback } from "../../structures/InteractiveAuth";
import { DEFAULT_PHASE, PasswordAuthEntry, SSOAuthEntry } from "../auth/InteractiveAuthEntryComponents";
import { ContinueKind, DEFAULT_PHASE, PasswordAuthEntry, SSOAuthEntry } from "../auth/InteractiveAuthEntryComponents";
import StyledCheckbox from "../elements/StyledCheckbox";
import BaseDialog from "./BaseDialog";
import defaultDispatcher from "../../../dispatcher/dispatcher";
@ -34,7 +34,7 @@ type DialogAesthetics = Partial<{
[x: number]: {
body: string;
continueText?: string;
continueKind?: string;
continueKind?: ContinueKind;
};
};
}>;
@ -53,7 +53,7 @@ interface IState {
// next to the InteractiveAuth component.
bodyText?: string;
continueText?: string;
continueKind?: string;
continueKind?: ContinueKind;
}
export default class DeactivateAccountDialog extends React.Component<IProps, IState> {
@ -98,7 +98,7 @@ export default class DeactivateAccountDialog extends React.Component<IProps, ISt
const aesthetics = DEACTIVATE_AESTHETICS[stage];
let bodyText: string | undefined;
let continueText: string | undefined;
let continueKind: string | undefined;
let continueKind: ContinueKind | undefined;
if (aesthetics) {
const phaseAesthetics = aesthetics[phase];
if (phaseAesthetics) {

6
src/components/views/dialogs/InteractiveAuthDialog.tsx
View file

@ -27,7 +27,7 @@ import InteractiveAuth, {
InteractiveAuthCallback,
InteractiveAuthProps,
} from "../../structures/InteractiveAuth";
import { SSOAuthEntry } from "../auth/InteractiveAuthEntryComponents";
import { ContinueKind, SSOAuthEntry } from "../auth/InteractiveAuthEntryComponents";
import BaseDialog from "./BaseDialog";
type DialogAesthetics = Partial<{
@ -36,7 +36,7 @@ type DialogAesthetics = Partial<{
title: string;
body: string;
continueText: string;
continueKind: string;
continueKind: ContinueKind;
};
};
}>;
@ -146,7 +146,7 @@ export default class InteractiveAuthDialog<T> extends React.Component<Interactiv
let title = this.state.authError ? "Error" : this.props.title || _t("common|authentication");
let body = this.state.authError ? null : this.props.body;
let continueText: string | undefined;
let continueKind: string | undefined;
let continueKind: ContinueKind | undefined;
const dialogAesthetics = this.props.aestheticsForStagePhases || this.getDefaultDialogAesthetics();
if (!this.state.authError && dialogAesthetics) {
if (

4
src/components/views/dialogs/ModalWidgetDialog.tsx
View file

@ -33,7 +33,7 @@ import {
import BaseDialog from "./BaseDialog";
import { _t, getUserLanguage } from "../../../languageHandler";
import AccessibleButton from "../elements/AccessibleButton";
import AccessibleButton, { AccessibleButtonKind } from "../elements/AccessibleButton";
import { StopGapWidgetDriver } from "../../../stores/widgets/StopGapWidgetDriver";
import { MatrixClientPeg } from "../../../MatrixClientPeg";
import { OwnProfileStore } from "../../../stores/OwnProfileStore";
@ -158,7 +158,7 @@ export default class ModalWidgetDialog extends React.PureComponent<IProps, IStat
.slice(0, MAX_BUTTONS)
.reverse()
.map((def) => {
let kind = "secondary";
let kind: AccessibleButtonKind = "secondary";
switch (def.kind) {
case ModalButtonKind.Primary:
kind = "primary";