baseui
Version:
A React Component library implementing the Base design language
141 lines (139 loc) • 6.14 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.NestedMenuContext = void 0;
var React = _interopRequireWildcard(require("react"));
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /*
Copyright (c) Uber Technologies, Inc.
This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/
const NestedMenuContext = exports.NestedMenuContext = /*#__PURE__*/React.createContext({
addMenuToNesting: () => {},
removeMenuFromNesting: () => {},
// @ts-expect-error todo(flow->ts): incorrect default value
getParentMenu: () => {},
// @ts-expect-error todo(flow->ts): incorrect default value
getChildMenu: () => {},
nestedMenuHoverIndex: -1,
isNestedMenuVisible: () => false,
mountRef: {
current: null
}
});
function isSame(a, b) {
if (!a || !b) {
return false;
}
return a.isSameNode(b);
}
class NestedMenus extends React.Component {
constructor(...args) {
super(...args);
// @ts-ignore
_defineProperty(this, "state", {
menus: [],
nestedMenuHoverIndex: -1
});
_defineProperty(this, "mountRef", /*#__PURE__*/React.createRef());
// @ts-ignore
_defineProperty(this, "mouseLeaveTimeoueId", null);
// eslint-disable-next-line @typescript-eslint/no-unused-vars
_defineProperty(this, "handleMenuMouseLeave", event => {
// @ts-ignore
this.mouseLeaveTimeoueId = setTimeout(() => {
this.setState({
nestedMenuHoverIndex: -1
});
}, 200);
});
_defineProperty(this, "handleMenuMouseEnter", event => {
if (typeof document !== 'undefined') {
// @ts-ignore
clearTimeout(this.mouseLeaveTimeoueId);
const index = this.state.menus.findIndex(m => {
return (
// @ts-ignore
m.current && event.currentTarget instanceof Node &&
// @ts-ignore
m.current.contains(event.currentTarget)
);
});
this.setState({
nestedMenuHoverIndex: index
});
}
});
_defineProperty(this, "addMenuToNesting", ref => {
// check offsetHeight to determine if component is visible in the dom (0 means hidden)
// we need to do this so that when we renderAll, the hidden seo-only child-menus don't
// register themselves which would break the nesting logic
const element = ref.current;
if (element && element.offsetHeight) {
element.addEventListener('mouseenter', this.handleMenuMouseEnter);
element.addEventListener('mouseleave', this.handleMenuMouseLeave);
this.setState(state => {
return {
menus: [...state.menus, ref]
};
});
}
});
_defineProperty(this, "removeMenuFromNesting", ref => {
this.setState(state => {
for (const r of this.state.menus) {
// @ts-ignore
if (r.current && isSame(r.current, ref.current)) {
// @ts-ignore
const element = r.current;
element.removeEventListener('mouseenter', this.handleMenuMouseEnter);
element.removeEventListener('mouseleave', this.handleMenuMouseLeave);
}
}
const nextMenus = state.menus.filter(r => {
return r.current && !isSame(r.current, ref.current);
});
return {
menus: nextMenus
};
});
});
_defineProperty(this, "findMenuIndexByRef", ref => {
// @ts-ignore
return this.state.menus.findIndex(r => isSame(r.current, ref.current));
});
_defineProperty(this, "getParentMenu", ref => {
const index = this.findMenuIndexByRef(ref) - 1;
return this.state.menus[index];
});
_defineProperty(this, "getChildMenu", ref => {
const index = this.findMenuIndexByRef(ref) + 1;
return this.state.menus[index];
});
_defineProperty(this, "isNestedMenuVisible", ref => {
const index = this.findMenuIndexByRef(ref);
return index <= this.state.nestedMenuHoverIndex;
});
}
render() {
return /*#__PURE__*/React.createElement(NestedMenuContext.Provider, {
value: {
addMenuToNesting: this.addMenuToNesting,
removeMenuFromNesting: this.removeMenuFromNesting,
getParentMenu: this.getParentMenu,
getChildMenu: this.getChildMenu,
isNestedMenuVisible: this.isNestedMenuVisible,
nestedMenuHoverIndex: this.state.nestedMenuHoverIndex,
mountRef: this.mountRef
}
}, /*#__PURE__*/React.createElement(React.Fragment, null, this.props.children, /*#__PURE__*/React.createElement("span", {
ref: this.mountRef
})));
}
}
exports.default = NestedMenus;