Allow user to progress through space setup wizard using Enter/Return

This commit is contained in:
Michael Telatynski 2021-05-10 16:06:23 +01:00
parent 3a75eb1226
commit c96bb374ea

View file

@ -60,6 +60,7 @@ import IconizedContextMenu, {
IconizedContextMenuOptionList, IconizedContextMenuOptionList,
} from "../views/context_menus/IconizedContextMenu"; } from "../views/context_menus/IconizedContextMenu";
import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton"; import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton";
import {Key} from "../../Keyboard";
interface IProps { interface IProps {
space: Room; space: Room;
@ -367,6 +368,7 @@ const SpaceLanding = ({ space }) => {
const SpaceSetupFirstRooms = ({ space, title, description, onFinished }) => { const SpaceSetupFirstRooms = ({ space, title, description, onFinished }) => {
const [busy, setBusy] = useState(false); const [busy, setBusy] = useState(false);
const [error, setError] = useState(""); const [error, setError] = useState("");
let onClick = onFinished;
const numFields = 3; const numFields = 3;
const placeholders = [_t("General"), _t("Random"), _t("Support")]; const placeholders = [_t("General"), _t("Random"), _t("Support")];
// TODO vary default prefills for "Just Me" spaces // TODO vary default prefills for "Just Me" spaces
@ -382,10 +384,17 @@ const SpaceSetupFirstRooms = ({ space, title, description, onFinished }) => {
value={roomNames[i]} value={roomNames[i]}
onChange={ev => setRoomName(i, ev.target.value)} onChange={ev => setRoomName(i, ev.target.value)}
autoFocus={i === 2} autoFocus={i === 2}
onKeyDown={ev => {
if (ev.key === Key.ENTER) {
ev.preventDefault();
onClick();
}
}}
/>; />;
}); });
const onNextClick = async () => { const onNextClick = async () => {
if (busy) return;
setError(""); setError("");
setBusy(true); setBusy(true);
try { try {
@ -410,7 +419,6 @@ const SpaceSetupFirstRooms = ({ space, title, description, onFinished }) => {
setBusy(false); setBusy(false);
}; };
let onClick = onFinished;
let buttonLabel = _t("Skip for now"); let buttonLabel = _t("Skip for now");
if (roomNames.some(name => name.trim())) { if (roomNames.some(name => name.trim())) {
onClick = onNextClick; onClick = onNextClick;
@ -556,6 +564,7 @@ const validateEmailRules = withValidation({
const SpaceSetupPrivateInvite = ({ space, onFinished }) => { const SpaceSetupPrivateInvite = ({ space, onFinished }) => {
const [busy, setBusy] = useState(false); const [busy, setBusy] = useState(false);
const [error, setError] = useState(""); const [error, setError] = useState("");
let onClick = onFinished;
const numFields = 3; const numFields = 3;
const fieldRefs: RefObject<Field>[] = [useRef(), useRef(), useRef()]; const fieldRefs: RefObject<Field>[] = [useRef(), useRef(), useRef()];
const [emailAddresses, setEmailAddress] = useStateArray(numFields, ""); const [emailAddresses, setEmailAddress] = useStateArray(numFields, "");
@ -572,10 +581,17 @@ const SpaceSetupPrivateInvite = ({ space, onFinished }) => {
ref={fieldRefs[i]} ref={fieldRefs[i]}
onValidate={validateEmailRules} onValidate={validateEmailRules}
autoFocus={i === 0} autoFocus={i === 0}
onKeyDown={ev => {
if (ev.key === Key.ENTER) {
ev.preventDefault();
onClick();
}
}}
/>; />;
}); });
const onNextClick = async () => { const onNextClick = async () => {
if (busy) return;
setError(""); setError("");
for (let i = 0; i < fieldRefs.length; i++) { for (let i = 0; i < fieldRefs.length; i++) {
const fieldRef = fieldRefs[i]; const fieldRef = fieldRefs[i];
@ -609,7 +625,6 @@ const SpaceSetupPrivateInvite = ({ space, onFinished }) => {
setBusy(false); setBusy(false);
}; };
let onClick = onFinished;
let buttonLabel = _t("Skip for now"); let buttonLabel = _t("Skip for now");
if (emailAddresses.some(name => name.trim())) { if (emailAddresses.some(name => name.trim())) {
onClick = onNextClick; onClick = onNextClick;