38 lines
1.0 KiB
JavaScript
38 lines
1.0 KiB
JavaScript
|
import { html } from "htm";
|
||
|
|
import * as React from "preact";
|
||
|
|
|
||
|
|
/** @typedef {0|0.5|1|1.5|2} Stage*/
|
||
|
|
/** @typedef {[set:Stage, get:React.StateUpdater<Stage>]} Binding */
|
||
|
|
|
||
|
|
const BranchContext = React.createContext(
|
||
|
|
/** @type Binding */ ([0, (_n) => {}]),
|
||
|
|
);
|
||
|
|
|
||
|
|
/** @type {({children}:{children:preact.VNode})=>preact.VNode} */
|
||
|
|
export const Branch = (props) => {
|
||
|
|
/** @type Binding */ const stage = React.useState(/** @type Stage */ (0));
|
||
|
|
/** @type Binding */ const stageParent = React.useContext(BranchContext);
|
||
|
|
|
||
|
|
React.useEffect(() => {
|
||
|
|
if (stageParent[0] == 2) {
|
||
|
|
stage[1](0);
|
||
|
|
}
|
||
|
|
}, [stageParent]);
|
||
|
|
|
||
|
|
return html`<${BranchContext.Provider} value=${stage}>${props.children}<//>`;
|
||
|
|
};
|
||
|
|
|
||
|
|
export const Button = () => {
|
||
|
|
/** @type Binding */
|
||
|
|
const [stageGet, stageSet] = React.useContext(BranchContext);
|
||
|
|
|
||
|
|
const handler = () => {
|
||
|
|
let value = stageGet + 0.5;
|
||
|
|
if (value > 2) value = 0;
|
||
|
|
stageSet(value);
|
||
|
|
console.log(value);
|
||
|
|
};
|
||
|
|
|
||
|
|
return html`<button onClick=${handler}>stage: ${stageGet}</button>`;
|
||
|
|
};
|