@launchmenu/core
Version:
An environment for visual keyboard controlled applets
129 lines • 15.4 kB
JavaScript
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ApplicationLayout = void 0;
const react_1 = __importStar(require("react"));
const react_resize_detector_1 = require("react-resize-detector");
const UIPathView_1 = require("../../components/context/paths/UIPathView");
const StackView_1 = require("../../components/context/stacks/StackView");
const InstantChangeTransition_1 = require("../../components/context/stacks/transitions/change/InstantChangeTransition");
const slideChangeDirectionts_1 = require("../../components/context/stacks/transitions/change/slideChange/slideChangeDirectionts");
const slideCloseDirections_1 = require("../../components/context/stacks/transitions/close/slideClose/slideCloseDirections");
const slideOpenDirectionts_1 = require("../../components/context/stacks/transitions/open/slideOpen/slideOpenDirectionts");
const FillBox_1 = require("../../components/FillBox");
const IOContextContext_1 = require("../../context/react/IOContextContext");
const getContextContentStack_1 = require("../../context/uiExtracters/getContextContentStack");
const getContextFieldStack_1 = require("../../context/uiExtracters/getContextFieldStack");
const getContextMenuStack_1 = require("../../context/uiExtracters/getContextMenuStack");
const Box_1 = require("../../styling/box/Box");
const usePaneIsVisible_1 = require("../hooks/usePaneIsVisible");
/**
* A component to make up the application layout and handle opening an closing of panes
*/
const ApplicationLayout = ({ context, menuWidthFraction = 0.4, fieldHeight = 60, defaultTransitionDuration = 200, }) => {
const fieldStackGetter = (h) => getContextFieldStack_1.getContextFieldStack(context, h);
const fieldState = usePaneIsVisible_1.usePaneIsVisible(fieldStackGetter, defaultTransitionDuration);
const menuStackGetter = (h) => getContextMenuStack_1.getContextMenuStack(context, h);
const menuState = usePaneIsVisible_1.usePaneIsVisible(menuStackGetter, defaultTransitionDuration);
const contentStackGetter = (h) => getContextContentStack_1.getContextContentStack(context, h);
const contentState = usePaneIsVisible_1.usePaneIsVisible(contentStackGetter, defaultTransitionDuration);
// Combine the menu and content states
const bottomDivisionState = react_1.useRef({
leftOpen: true,
rightOpen: true,
duration: defaultTransitionDuration,
}).current;
const bottomSectionState = react_1.useRef({
open: true,
animating: false,
duration: defaultTransitionDuration,
}).current;
if (menuState.open != menuState.prevOpen ||
contentState.open != contentState.prevOpen) {
const bothClosed = !menuState.open && !contentState.open;
if (bothClosed) {
// If both left and right are closed, close the whole bottom
bottomSectionState.open = false;
// Copy the appropriate duration
bottomSectionState.duration = menuState.prevOpen
? menuState.duration
: contentState.duration;
}
else {
const changeDuration = menuState.prevOpen != menuState.open
? menuState.duration
: contentState.duration;
// Update the left and right open states
bottomDivisionState.leftOpen = menuState.open;
bottomDivisionState.rightOpen = contentState.open;
bottomDivisionState.duration = changeDuration;
// Open the bottom section if it isn't already
if (!bottomSectionState.open) {
bottomSectionState.open = true;
bottomSectionState.duration = changeDuration;
// If the bottom section is about to open (and isn't still closing) instantly open the left and or right section
if (!bottomSectionState.animating)
bottomDivisionState.duration = 0;
}
}
}
// Obtain the layout size for animation calculations
const [animating, setAnimating] = react_1.useState(false); // Skip animating on first render
const layoutRef = react_1.useRef();
const [size, setSize] = react_1.useState({ width: 0, height: 0 });
const [sizeID, triggerSizeChange] = react_1.useState(0);
const { ref: resizeRef } = react_resize_detector_1.useResizeDetector({
onResize: () => triggerSizeChange(s => s + 1),
});
react_1.useLayoutEffect(() => {
if (layoutRef.current)
setSize(layoutRef.current.getBoundingClientRect());
setTimeout(() => setAnimating(true));
}, [layoutRef.current, sizeID]);
// Return the layout with transition animations
const horizontalDivision = (bottomDivisionState.leftOpen
? bottomDivisionState.rightOpen
? menuWidthFraction
: 1
: 0) * size.width;
return (react_1.default.createElement(IOContextContext_1.IOContextProvider, { value: context },
react_1.default.createElement(FillBox_1.FillBox, { className: "frame", elRef: [layoutRef, resizeRef], display: "flex", flexDirection: "column", overflow: "hidden" },
react_1.default.createElement(Box_1.Box, { className: "searchSection", position: "relative", elevation: "medium", zIndex: 1, height: fieldState.open ? fieldHeight : 0, transition: `${fieldState.duration}ms height` },
react_1.default.createElement(StackView_1.StackView, { OpenTransitionComp: slideOpenDirectionts_1.SlideDownOpenTransition, ChangeTransitionComp: slideChangeDirectionts_1.SlideUpChangeTransition, CloseTransitionComp: slideCloseDirections_1.SlideUpCloseTransition, stackGetter: fieldStackGetter })),
react_1.default.createElement(Box_1.Box, { className: "pathSection", background: "bgPrimary" },
react_1.default.createElement(UIPathView_1.UIPathView, { context: context, pathTransitionDuration: defaultTransitionDuration, heightTransitionDuration: defaultTransitionDuration })),
react_1.default.createElement(Box_1.Box, { position: "relative", overflow: "hidden", flexGrow: bottomSectionState.open ? 1 : 0, transition: animating
? `${bottomSectionState.duration}ms flex-grow`
: undefined },
react_1.default.createElement(Box_1.Box, { position: "absolute", bottom: "none", height: "100%", width: "100%",
// minHeight={size.height - fieldHeight}
display: "flex" },
react_1.default.createElement(Box_1.Box, { position: "relative", background: "bgTertiary", flexShrink: 0, onAnimationStart: () => (bottomSectionState.animating = true), onAnimationEnd: () => (bottomSectionState.animating = false), transition: animating
? `${bottomDivisionState.duration}ms width`
: undefined, width: horizontalDivision },
react_1.default.createElement(Box_1.Box, { className: "menuSection", minWidth: size.width * menuWidthFraction, width: "100%", height: "100%", right: "none", position: "absolute" },
react_1.default.createElement(StackView_1.StackView, { OpenTransitionComp: slideOpenDirectionts_1.SlideLeftOpenTransition, CloseTransitionComp: slideCloseDirections_1.SlideRightCloseTransition, stackGetter: menuStackGetter }))),
react_1.default.createElement(Box_1.Box, { position: "relative", flexGrow: 1, flexShrink: 1, background: "bgSecondary" },
react_1.default.createElement(Box_1.Box, { className: "contentSection", width: "100%", height: "100%" },
react_1.default.createElement(StackView_1.StackView, { ChangeTransitionComp: InstantChangeTransition_1.InstantChangeTransition, stackGetter: contentStackGetter }))))))));
};
exports.ApplicationLayout = ApplicationLayout;
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQXBwbGljYXRpb25MYXlvdXQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvYXBwbGljYXRpb24vY29tcG9uZW50cy9BcHBsaWNhdGlvbkxheW91dC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUNBLCtDQUErRDtBQUMvRCxpRUFBd0Q7QUFDeEQsMEVBQXFFO0FBQ3JFLHlFQUFvRTtBQUNwRSx3SEFBbUg7QUFDbkgsa0lBQThIO0FBQzlILDRIQUcyRjtBQUMzRiwwSEFHeUY7QUFDekYsc0RBQWlEO0FBQ2pELDJFQUF1RTtBQUN2RSw4RkFBeUY7QUFDekYsMEZBQXFGO0FBQ3JGLHdGQUFtRjtBQUNuRiwrQ0FBMEM7QUFHMUMsZ0VBQTJEO0FBRzNEOztHQUVHO0FBQ0ksTUFBTSxpQkFBaUIsR0FBaUMsQ0FBQyxFQUM1RCxPQUFPLEVBQ1AsaUJBQWlCLEdBQUcsR0FBRyxFQUN2QixXQUFXLEdBQUcsRUFBRSxFQUNoQix5QkFBeUIsR0FBRyxHQUFHLEdBQ2xDLEVBQUUsRUFBRTtJQUNELE1BQU0sZ0JBQWdCLEdBQUcsQ0FBQyxDQUFhLEVBQUUsRUFBRSxDQUFDLDJDQUFvQixDQUFDLE9BQU8sRUFBRSxDQUFDLENBQUMsQ0FBQztJQUM3RSxNQUFNLFVBQVUsR0FBRyxtQ0FBZ0IsQ0FBQyxnQkFBZ0IsRUFBRSx5QkFBeUIsQ0FBQyxDQUFDO0lBQ2pGLE1BQU0sZUFBZSxHQUFHLENBQUMsQ0FBYSxFQUFFLEVBQUUsQ0FBQyx5Q0FBbUIsQ0FBQyxPQUFPLEVBQUUsQ0FBQyxDQUFDLENBQUM7SUFDM0UsTUFBTSxTQUFTLEdBQUcsbUNBQWdCLENBQUMsZUFBZSxFQUFFLHlCQUF5QixDQUFDLENBQUM7SUFDL0UsTUFBTSxrQkFBa0IsR0FBRyxDQUFDLENBQWEsRUFBRSxFQUFFLENBQUMsK0NBQXNCLENBQUMsT0FBTyxFQUFFLENBQUMsQ0FBQyxDQUFDO0lBQ2pGLE1BQU0sWUFBWSxHQUFHLG1D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