@react-md/menu
Version:
Create menus that auto-position themselves within the viewport and adhere to the accessibility guidelines
80 lines • 2.8 kB
JavaScript
;
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __read = (this && this.__read) || function (o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.MenuBarProvider = exports.useMenuBarContext = void 0;
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = require("react");
var utils_1 = require("./utils");
var context = (0, react_1.createContext)({
root: false,
menubar: false,
menuitem: false,
activeId: "",
setActiveId: utils_1.noop,
animatedOnce: false,
setAnimatedOnce: utils_1.noop,
});
context.displayName = "MenuBar";
var Provider = context.Provider;
/**
* @internal
* @remarks \@since 5.0.0
*/
function useMenuBarContext() {
return (0, react_1.useContext)(context);
}
exports.useMenuBarContext = useMenuBarContext;
/**
* @internal
* @remarks \@since 5.0.0
*/
function MenuBarProvider(_a) {
var children = _a.children, _b = _a.root, root = _b === void 0 ? true : _b, _c = _a.defaultActiveId, defaultActiveId = _c === void 0 ? "" : _c, hoverTimeout = _a.hoverTimeout;
var menubar = useMenuBarContext().menubar;
var _d = __read((0, react_1.useState)(defaultActiveId), 2), activeId = _d[0], setActiveId = _d[1];
var _e = __read((0, react_1.useState)(!!defaultActiveId), 2), animatedOnce = _e[0], setAnimatedOnce = _e[1];
var value = (0, react_1.useMemo)(function () { return ({
root: root,
menubar: root || menubar,
menuitem: true,
activeId: activeId,
setActiveId: setActiveId,
hoverTimeout: hoverTimeout,
animatedOnce: animatedOnce,
setAnimatedOnce: setAnimatedOnce,
}); }, [activeId, animatedOnce, hoverTimeout, menubar, root]);
(0, react_1.useEffect)(function () {
if (!activeId) {
setAnimatedOnce(false);
}
}, [activeId]);
return (0, jsx_runtime_1.jsx)(Provider, __assign({ value: value }, { children: children }));
}
exports.MenuBarProvider = MenuBarProvider;
//# sourceMappingURL=MenuBarProvider.js.map