new-tree-system/js/tree.js

import { html } from "htm";
import * as React from "preact";

/** @typedef {(props:{children:preact.VNode, class:string|null})=>preact.VNode} BasicElement */
/** @typedef {{Open:boolean, Done:boolean, Away:boolean}} Stage*/
/** @typedef {[set:Stage, get:React.StateUpdater<Stage>]} Binding */

const BranchContext = React.createContext(
  /** @type Binding */ ([{ Open: false, Done: true, Away: false }, (_n) => {}]),
);

export { BranchContext as Context };

/** @type BasicElement */
export const Branch = (props) => {
  /** @type Binding */ const stage = React.useState(
    /** @type Stage */ ({ Open: false, Done: true, Away: false }),
  );
  /** @type Binding */ const stageParent = React.useContext(BranchContext);

  React.useEffect(() => {
    const [{ Open, Done, Away }] = stageParent;
    const [, Shut] = stage;
    if (!Open && Done) {
      Shut({ Open: false, Done: true, Away });
    }
  }, [stageParent]);

  return React.createElement(BranchContext.Provider, {
    value: stage,
    children: props.children,
  });
};

/** @type BasicElement */
export const Button = (props) => {
  /** @type Binding */
  const [stageGet, stageSet] = React.useContext(BranchContext);

  /** @type React.MutableRefObject<Handler|null> */
  const refHandler = React.useRef(null);
  React.useEffect(() => {
    console.log("recreating handler", stageGet);
    refHandler.current = (away) => {
      console.log("set: away");
      stageSet((state) => ({ ...state, Away: away }));
    };
  }, [stageGet]);

  /** @type React.MutableRefObject<HTMLElement|null> */
  const refEl = React.useRef(null);
  useAway(refEl, refHandler);

  const handleClick = () => {
    console.log("set: open");
    stageSet((state) => ({ ...state, Open: !state.Open, Done: false }));
  };

  React.useEffect(() => {
    console.log("away *changed*");
    if (stageGet.Away && stageGet.Open) {
      handleClick();
    }
  }, [stageGet.Away]);

  return html`<button ref=${refEl} onClick=${handleClick} class=${props.class}>stage: ${
    JSON.stringify(stageGet)
  }
  ${props.children}
  </button>`;
};

/** @type BasicElement */
export const Menu = (props) => {
  const [stageGet, stageSet] = React.useContext(BranchContext);
  const refElement = React.useRef(null);
  /** @type {React.MutableRefObject<null|Toggler>} */
  const refCollapser = React.useRef(null);

  React.useEffect(() => {
    refElement.current &&
      (refCollapser.current = Collapser(refElement.current));
  }, []);

  React.useEffect(() => {
    const instant = stageGet.Open == false && stageGet.Done;
    refCollapser.current && refCollapser.current(
      stageGet.Open,
      instant ? 0 : 600,
      () => stageSet({ ...stageGet, Done: true }),
    );
  }, [stageGet]);

  return html`
  <div ref=${refElement} class=${props.class}>
    ${props.children}
  </div>
  `;
};

/** @typedef {(Open:boolean)=>void} UserDone */
/** @typedef {(inOpen:boolean, inMilliseconds:number, inUserDone:UserDone)=>void} Toggler */
/** @typedef {(inElement:HTMLElement)=>Toggler} Collapse */
/** @type Collapse */
const Collapser = (inElement) => {
  /** @type UserDone */
  let userDone = () => {};
  let userMode = false;
  const collapse = inElement;
  /** @type {(inEvent:TransitionEvent)=>void} */
  const done = (inEvent) => {
    if (inEvent.propertyName == "height" && inEvent.target == collapse) {
      inEvent.stopPropagation();
      if (userMode) {
        collapse.style.height = "auto";
        collapse.style.overflow = "visible";
        userDone(true);
      } else {
        userDone(false);
      }
    }
  };
  /** @type Toggler */
  const show = (inOpen, inMs, inDone) => {
    userMode = inOpen;
    collapse.removeEventListener("transitionend", done);
    userDone = inDone;
    collapse.addEventListener("transitionend", done);

    collapse.style.height = collapse.clientHeight + "px";
    collapse.style.overflow = "hidden";
    collapse.style.transition = "none";
    requestAnimationFrame(() => {
      collapse.style.height = `${inOpen ? collapse.scrollHeight : 0}px`;
      collapse.style.transition = `height ${inMs / 1000}s`;
    });
  };
  return show;
};

/** @typedef {(away:boolean, e:Event)=>void} Handler */
/** @type {(inRef:React.MutableRefObject<HTMLElement|null>, inHandler:React.MutableRefObject<Handler|null>)=>void} */
export const useAway = (inRef, inHandler) => {
  /** @type React.MutableRefObject<(e:Event)=>void> */
  const handlerClick = React.useRef((e) => {
    const index = inRef.current ? e.composedPath().indexOf(inRef.current) : -1;
    inHandler.current && inHandler.current(index < 0, e);
  });
  React.useEffect(() => {
    document.addEventListener("click", handlerClick.current);
    return () => document.removeEventListener("click", handlerClick.current);
  });
};

const GlobalClick = {
  Bind: () => {
    if (!GlobalClick.Live) {
      GlobalClick.Live = true;
      document.addEventListener("click", (inEvent) => {
        GlobalClick.Path = inEvent.composedPath();
      });
    }
  },
  Live: false,
  Path: [],
};