@launchmenu/core
Version:
An environment for visual keyboard controlled applets
123 lines • 13.6 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;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useConnectAdjacent = exports.MenuItemFrame = void 0;
const react_1 = __importStar(require("react"));
const Box_1 = require("../../styling/box/Box");
const isItemSelectable_1 = require("../../menus/items/isItemSelectable");
const useIOContext_1 = require("../../context/react/useIOContext");
const KeyEvent_1 = require("../../keyHandler/KeyEvent");
const emitContextEvent_1 = require("../../context/uiExtracters/emitContextEvent");
const executeAction_1 = require("../../actions/types/execute/executeAction");
const getConnectionGroupAction_1 = require("../../actions/types/connectionGroup/getConnectionGroupAction");
const backgroundColorContext_1 = require("../../styling/backgroundColorContext");
const model_react_1 = require("model-react");
const mergeStyles_1 = require("../../utils/mergeStyles");
const color_1 = __importDefault(require("color"));
const ThemeContext_1 = require("../../styling/theming/ThemeContext");
const useIsItemSelectable_1 = require("./useIsItemSelectable");
/**
* A menu item frame that visualizes selection state and click handler for item execution
*/
const MenuItemFrame = ({ isCursor, isSelected, menu, onExecute, item, children, transparent, disabled, outerProps, innerProps, colors, }) => {
var _a, _b;
const ioContext = useIOContext_1.useIOContext();
const onContextMenu = react_1.useCallback(() => {
if (!menu || !item)
return;
if (isItemSelectable_1.isItemSelectable(item)) {
menu.setCursor(item);
// Use the context menu keyboard shortcut to open the menu
if (ioContext) {
emitContextEvent_1.emitContextEvent(ioContext, new KeyEvent_1.KeyEvent({
key: { id: "tab", name: "tab" },
type: "down",
}));
emitContextEvent_1.emitContextEvent(ioContext, new KeyEvent_1.KeyEvent({
key: { id: "tab", name: "tab" },
type: "up",
}));
}
}
}, [menu, item]);
const isSelectable = useIsItemSelectable_1.useIsItemSelectable(item);
if (disabled == undefined && !transparent)
disabled = !isSelectable;
const { connectBgPrevious, connectBgNext } = transparent
? {}
: useConnectAdjacent(menu, item);
const radiusSize = "small";
const standardBackground = transparent ? undefined : "bgPrimary";
const mainBgColor = isCursor ? "primary" : standardBackground;
// Compute the main background color
const theme = ThemeContext_1.useTheme();
const containerBgColor = (_b = (_a = colors === null || colors === void 0 ? void 0 : colors.container) === null || _a === void 0 ? void 0 : _a.background) !== null && _b !== void 0 ? _b : (mainBgColor && theme.color[mainBgColor]);
const textColor = react_1.useMemo(() => {
const isThemeDark = new color_1.default(theme.color.bgPrimary).isDark();
if (!containerBgColor)
return isThemeDark ? "fontPrimary" : "fontBgPrimary";
const isDark = new color_1.default(containerBgColor).isDark();
return isDark != isThemeDark ? "fontPrimary" : "fontBgPrimary";
}, [containerBgColor]);
return (react_1.default.createElement(Box_1.Box, Object.assign({ className: "itemFrame", background: isSelected ? "secondary" : standardBackground, borderRadiusTopRight: connectBgPrevious ? undefined : radiusSize, borderRadiusBottomRight: connectBgNext ? undefined : radiusSize, borderRadiusTopLeft: connectBgPrevious ? undefined : radiusSize, borderRadiusBottomLeft: connectBgNext ? undefined : radiusSize, opacity: disabled ? 0.5 : 1, overflow: "hidden", elevation: transparent ? undefined : "small", zIndex: 1 }, outerProps, { css: mergeStyles_1.mergeStyles(colors === null || colors === void 0 ? void 0 : colors.selection, outerProps === null || outerProps === void 0 ? void 0 : outerProps.css), position: "relative" }),
react_1.default.createElement(backgroundColorContext_1.BackgroundColorProvider, { color: containerBgColor },
react_1.default.createElement(Box_1.Box, Object.assign({ background: mainBgColor, color: textColor, marginLeft: "medium", cursor: transparent || disabled ? "default" : "pointer", onClick: react_1.useCallback(async () => {
if (!menu || !item)
return;
if (menu.getCursor() == item) {
executeAction_1.executeAction.execute(menu.getContext(), [item], onExecute);
}
else if (!disabled && isSelectable)
menu.setCursor(item);
}, [menu, item]),
// Open the context menu on right click
onContextMenu: onContextMenu }, innerProps, { css: mergeStyles_1.mergeStyles(colors === null || colors === void 0 ? void 0 : colors.container, innerProps === null || innerProps === void 0 ? void 0 : innerProps.css) }),
connectBgPrevious && (react_1.default.createElement(Box_1.Box, { marginLeft: "medium", marginRight: "medium", borderTopColor: isCursor ? "primary" : "bgTertiary", css: isCursor
? { borderTopColor: "transparent" }
: (colors === null || colors === void 0 ? void 0 : colors.border) ? { borderTopColor: colors.border }
: undefined, borderTopStyle: "solid", borderWidth: 1 })),
children))));
};
exports.MenuItemFrame = MenuItemFrame;
/**
* Checks whether we should connect to adjacent items (concerning corner radii)
* @param menu The menu that the item is in
* @param item The item to check for
* @returns Whether the previous and next items are selected
*/
function useConnectAdjacent(menu, item) {
let prev = react_1.useRef({});
const [h] = model_react_1.useDataHook();
if (!item || !menu)
return {};
const items = menu.getItems(h);
const index = items.indexOf(item);
if (index == -1)
return prev.current;
const connect = getConnectionGroupAction_1.getConnectionGroupAction.shouldConnect(items, index, h);
prev.current = { connectBgNext: connect.next, connectBgPrevious: connect.previous };
return prev.current;
}
exports.useConnectAdjacent = useConnectAdjacent;
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTWVudUl0ZW1GcmFtZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL2l0ZW1zL01lbnVJdGVtRnJhbWUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFBQSwrQ0FBeUU7QUFDekUsK0NBQTBDO0FBRzFDLHlFQUFvRTtBQUNwRSxtRUFBOEQ7QUFDOUQsd0RBQW1EO0FBQ25ELGtGQUE2RTtBQUM3RSw2RUFBd0U7QUFDeEUsMkdBQXNHO0FBQ3RHLGlGQUE2RTtBQUM3RSw2Q0FBd0M7QUFFeEMseURBQW9EO0FBQ3BELGtEQUEwQjtBQUUxQixxRUFBNEQ7QUFDNUQsK0RBQTBEO0FBRTFEOztHQUVHO0FBQ0ksTUFBTSxhQUFhLEdBQTRCLENBQUMsRUFDbkQsUUFBUSxFQUNSLFVBQVUsRUFDVixJQUFJLEVBQ0osU0FBUyxFQUNULElBQUksRUFDSixRQUFRLEVBQ1IsV0FBVyxFQUNYLFFBQVEsRUFDUixVQUFVLEVBQ1YsVUFBVSxFQUNWLE1BQU0sR0FDVCxFQUFFLEVBQUU7O0lBQ0QsTUFBTSxTQUFTLEdBQUcsMkJBQVksRUFBRSxDQUFDO0lBRWpDLE1BQU0sYUFBYSxHQUFHLG1CQUFXLENBQUMsR0FBRyxFQUFFO1FBQ25DLElBQUksQ0FBQyxJQUFJLElBQUksQ0FBQyxJQUFJO1lBQUUsT0FBTztRQUMzQixJQUFJLG1DQUFnQixDQUFDLElBQUksQ0FBQyxFQUFFO1lBQ3hCLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLENBQUM7WUFFckIsMERBQTBEO1lBQzFELElBQUksU0FBUyxFQUFFO2dCQUNYLG1DQUFnQixDQUNaLFNBQVMsRUFDVCxJQUFJLG1CQUFRLENBQUM7b0JBQ1QsR0FBRyxFQUFFLEVBQUMsRUFBRSxFQUFFLEtBQUssRUFBRSxJQUFJLEVBQUUsS0FBSyxFQUFDO29CQUM3QixJQUFJLEVBQUUsTUFBTTtpQkFDZixDQUFDLENBQ0wsQ0FBQztnQkFD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