fixing back and next transition
This commit is contained in:
parent
bf3e011183
commit
a2e8ab9445
@ -100,24 +100,26 @@ export function AnastasisClientFrame(props: AnastasisClientFrameProps): VNode {
|
|||||||
return <p>Fatal: Reducer must be in context.</p>;
|
return <p>Fatal: Reducer must be in context.</p>;
|
||||||
}
|
}
|
||||||
const doBack = async (): Promise<void> => {
|
const doBack = async (): Promise<void> => {
|
||||||
history.back();
|
|
||||||
|
|
||||||
if (props.onBack) {
|
if (props.onBack) {
|
||||||
await props.onBack();
|
await props.onBack();
|
||||||
|
} else {
|
||||||
|
await reducer.back();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
const doNext = async (): Promise<void> => {
|
const doNext = async (fromPopstate?: boolean): Promise<void> => {
|
||||||
try {
|
if (!fromPopstate) {
|
||||||
const nextId: number =
|
try {
|
||||||
(history.state && typeof history.state.id === "number"
|
const nextId: number =
|
||||||
? history.state.id
|
(history.state && typeof history.state.id === "number"
|
||||||
: 0) + 1;
|
? history.state.id
|
||||||
|
: 0) + 1;
|
||||||
|
|
||||||
currentHistoryId = nextId;
|
currentHistoryId = nextId;
|
||||||
|
|
||||||
history.pushState({ id: nextId }, "unused", `#${nextId}`);
|
history.pushState({ id: nextId }, "unused", `#${nextId}`);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.log(e);
|
console.log(e);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (props.onNext) {
|
if (props.onNext) {
|
||||||
@ -136,9 +138,9 @@ export function AnastasisClientFrame(props: AnastasisClientFrameProps): VNode {
|
|||||||
const browserOnBackButton = useCallback(async (ev: PopStateEvent) => {
|
const browserOnBackButton = useCallback(async (ev: PopStateEvent) => {
|
||||||
//check if we are going back or forward
|
//check if we are going back or forward
|
||||||
if (!ev.state || ev.state.id === 0 || ev.state.id < currentHistoryId) {
|
if (!ev.state || ev.state.id === 0 || ev.state.id < currentHistoryId) {
|
||||||
await reducer.back();
|
await doBack();
|
||||||
} else {
|
} else {
|
||||||
await reducer.transition("next", {});
|
await doNext(true);
|
||||||
}
|
}
|
||||||
|
|
||||||
// reducer
|
// reducer
|
||||||
@ -169,13 +171,13 @@ export function AnastasisClientFrame(props: AnastasisClientFrameProps): VNode {
|
|||||||
justifyContent: "space-between",
|
justifyContent: "space-between",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<button class="button" onClick={doBack}>
|
<button class="button" onClick={() => doBack()}>
|
||||||
Back
|
Back
|
||||||
</button>
|
</button>
|
||||||
<AsyncButton
|
<AsyncButton
|
||||||
class="button is-info"
|
class="button is-info"
|
||||||
data-tooltip={props.hideNext}
|
data-tooltip={props.hideNext}
|
||||||
onClick={doNext}
|
onClick={() => doNext()}
|
||||||
disabled={props.hideNext !== undefined}
|
disabled={props.hideNext !== undefined}
|
||||||
>
|
>
|
||||||
Next
|
Next
|
||||||
|
Loading…
Reference in New Issue
Block a user