@react-md/menu
Version:
Create menus that auto-position themselves within the viewport and adhere to the accessibility guidelines
75 lines • 2.52 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;
};
import { jsx as _jsx } from "react/jsx-runtime";
import { createContext, useContext, useEffect, useMemo, useState } from "react";
import { noop } from "./utils";
var context = createContext({
root: false,
menubar: false,
menuitem: false,
activeId: "",
setActiveId: noop,
animatedOnce: false,
setAnimatedOnce: noop,
});
context.displayName = "MenuBar";
var Provider = context.Provider;
/**
* @internal
* @remarks \@since 5.0.0
*/
export function useMenuBarContext() {
return useContext(context);
}
/**
* @internal
* @remarks \@since 5.0.0
*/
export 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(useState(defaultActiveId), 2), activeId = _d[0], setActiveId = _d[1];
var _e = __read(useState(!!defaultActiveId), 2), animatedOnce = _e[0], setAnimatedOnce = _e[1];
var value = 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]);
useEffect(function () {
if (!activeId) {
setAnimatedOnce(false);
}
}, [activeId]);
return _jsx(Provider, __assign({ value: value }, { children: children }));
}
//# sourceMappingURL=MenuBarProvider.js.map