d5db131eef
* Spike AXE A11Y testing in Cypress * Fix NewRoomIntro breaking html/aria list rules * Fix HeaderButtons breaking aria role semantics rules * missing type * Switch left panel from aside to nav and include space panel * Give the page a main heading of the room name when viewing a room * Use header landmark on RoomHeader * Improve aria attributes on composer when autocomplete is closed * Fix aria-owns on RoomHeader * Give Spinner an aria role * Give server picker help button an aria label * Improve auth aria attributes and semantics * Improve heading semantics in use case selection screen * Fix autocomplete attribute to be valid * Fix heading semantics on login page * Improve Cypress axe testing * Add axe tests * Stop synapse after the timeline tests * Await spinners to fade before percy snapshotting timeline tests * Improve naming of plugin * Update snapshots * Fix accidental heading change * Fix double synapse stoppage * Fix Cypress timeline avatar assertions to be DPI agnostic * Fix aria attributes on date separators * delint * Update snapshots * Revert style change * Skip redundant call
86 lines
3.2 KiB
TypeScript
86 lines
3.2 KiB
TypeScript
/*
|
|
Copyright 2022 The Matrix.org Foundation C.I.C.
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
you may not use this file except in compliance with the License.
|
|
You may obtain a copy of the License at
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
See the License for the specific language governing permissions and
|
|
limitations under the License.
|
|
*/
|
|
|
|
import classNames from "classnames";
|
|
import React, { useEffect, useState } from 'react';
|
|
|
|
import { _t } from "../../../languageHandler";
|
|
import { UseCase } from "../../../settings/enums/UseCase";
|
|
import SplashPage from "../../structures/SplashPage";
|
|
import AccessibleButton from "../elements/AccessibleButton";
|
|
import { UseCaseSelectionButton } from "./UseCaseSelectionButton";
|
|
|
|
interface Props {
|
|
onFinished: (useCase: UseCase) => void;
|
|
}
|
|
|
|
const TIMEOUT = 1500;
|
|
|
|
export function UseCaseSelection({ onFinished }: Props) {
|
|
const [selection, setSelected] = useState<UseCase | null>(null);
|
|
|
|
// Call onFinished 1.5s after `selection` becomes truthy, to give time for the animation to run
|
|
useEffect(() => {
|
|
if (selection) {
|
|
let handler: number | null = setTimeout(() => {
|
|
handler = null;
|
|
onFinished(selection);
|
|
}, TIMEOUT);
|
|
return () => {
|
|
clearTimeout(handler);
|
|
handler = null;
|
|
};
|
|
}
|
|
}, [selection, onFinished]);
|
|
|
|
return (
|
|
<SplashPage className={classNames(
|
|
"mx_UseCaseSelection", {
|
|
"mx_UseCaseSelection_selected": selection !== null,
|
|
},
|
|
)}>
|
|
<div className="mx_UseCaseSelection_title mx_UseCaseSelection_slideIn">
|
|
<h1>{ _t("You're in") }</h1>
|
|
</div>
|
|
<div className="mx_UseCaseSelection_info mx_UseCaseSelection_slideInDelayed">
|
|
<h2>{ _t("Who will you chat to the most?") }</h2>
|
|
<h3>{ _t("We'll help you get connected.") }</h3>
|
|
</div>
|
|
<div className="mx_UseCaseSelection_options mx_UseCaseSelection_slideInDelayed">
|
|
<UseCaseSelectionButton
|
|
useCase={UseCase.PersonalMessaging}
|
|
selected={selection === UseCase.PersonalMessaging}
|
|
onClick={setSelected}
|
|
/>
|
|
<UseCaseSelectionButton
|
|
useCase={UseCase.WorkMessaging}
|
|
selected={selection === UseCase.WorkMessaging}
|
|
onClick={setSelected}
|
|
/>
|
|
<UseCaseSelectionButton
|
|
useCase={UseCase.CommunityMessaging}
|
|
selected={selection === UseCase.CommunityMessaging}
|
|
onClick={setSelected}
|
|
/>
|
|
</div>
|
|
<div className="mx_UseCaseSelection_skip mx_UseCaseSelection_slideInDelayed">
|
|
<AccessibleButton kind="link" onClick={async () => setSelected(UseCase.Skip)}>
|
|
{ _t("Skip") }
|
|
</AccessibleButton>
|
|
</div>
|
|
</SplashPage>
|
|
);
|
|
}
|