SethTrowbridge/new-tree-system
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ref corrections

Browse Source
This commit is contained in:
Seth Trowbridge 2023-01-24 12:01:10 -05:00
parent d77f200521
commit 9fc85f1901
1 changed files with 20 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
js/tree.js
View File

@ -51,13 +51,18 @@ export const Button = (props) => {
export const Menu = (props) => { export const Menu = (props) => {
const [stageGet, stageSet] = React.useContext(BranchContext); const [stageGet, stageSet] = React.useContext(BranchContext);
const refElement = React.useRef(null); const refElement = React.useRef(null);
const refCollapser = React.useRef(null);
React.useEffect(() => { React.useEffect(() => {
console.log(`menu should change`, stageGet); refCollapser.current = Collapser(refElement.current);
}, []);
Collapser(refElement.current, () => { React.useEffect(() => {
stageSet({ ...stageGet, Done: true }); refCollapser.current(
})(stageGet.Open, stageGet.Open == false && stageGet.Done ? 0 : 600); stageGet.Open,
stageGet.Open == false && stageGet.Done ? 0 : 600,
() => stageSet({ ...stageGet, Done: true }),
);
}, [stageGet.Open]); }, [stageGet.Open]);
return html` return html`
@ -67,17 +72,14 @@ export const Menu = (props) => {
`; `;
}; };
/** @type BasicElement */ /** @typedef {(Open:boolean)=>void} UserDone */
export const Collapse = (props) => { /** @typedef {(inOpen:boolean, inMilliseconds:number, inUserDone:UserDone)=>void} Toggler */
const ref = React.useRef(); /** @type {(inElement:HTMLElement)=>Toggler} */
const style = { overflow: "visible", height: "auto" }; const Collapser = (inElement) => {
console.log("Collapser initialized");
return html`<div ref=${ref} style=${style}>${props.children}</div>`; /** @type UserDone */
}; let userDone = () => {};
/** @typedef {(inOpen:boolean, inMilliseconds:number)=>void} Toggler */
/** @type {(inElement:HTMLElement, inUserDone:(Open:boolean)=>void)=>Toggler} */
const Collapser = (inElement, inUserDone) => {
const collapse = inElement; const collapse = inElement;
/** @type {(inEvent:TransitionEvent)=>void} */ /** @type {(inEvent:TransitionEvent)=>void} */
const done = (inEvent) => { const done = (inEvent) => {
@ -86,15 +88,16 @@ const Collapser = (inElement, inUserDone) => {
if (collapse.clientHeight > 0) { if (collapse.clientHeight > 0) {
collapse.style.height = "auto"; collapse.style.height = "auto";
collapse.style.overflow = "visible"; collapse.style.overflow = "visible";
inUserDone(true); userDone(true);
} else { } else {
inUserDone(false); userDone(false);
} }
} }
}; };
/** @type Toggler */ /** @type Toggler */
const show = (inOpen, inMs) => { const show = (inOpen, inMs, inDone) => {
collapse.removeEventListener("transitionend", done); collapse.removeEventListener("transitionend", done);
userDone = inDone;
collapse.addEventListener("transitionend", done); collapse.addEventListener("transitionend", done);
collapse.style.height = collapse.clientHeight + "px"; collapse.style.height = collapse.clientHeight + "px";