Allow user to progress through space setup wizard using Enter/Return
This commit is contained in:
parent
3a75eb1226
commit
c96bb374ea
1 changed files with 17 additions and 2 deletions
|
@ -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;
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue