react-responsive-menu-hook
Version:
Responsive menu using react hooks
407 lines (338 loc) • 12.7 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react')) :
typeof define === 'function' && define.amd ? define(['react'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.ReactResponsiveMenu = factory(global.React));
}(this, (function (React) { 'use strict';
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function ownKeys(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(object);
if (enumerableOnly) symbols = symbols.filter(function (sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
});
keys.push.apply(keys, symbols);
}
return keys;
}
function _objectSpread2(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i] != null ? arguments[i] : {};
if (i % 2) {
ownKeys(Object(source), true).forEach(function (key) {
_defineProperty(target, key, source[key]);
});
} else if (Object.getOwnPropertyDescriptors) {
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
} else {
ownKeys(Object(source)).forEach(function (key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
}
return target;
}
function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
function _objectWithoutProperties(source, excluded) {
if (source == null) return {};
var target = _objectWithoutPropertiesLoose(source, excluded);
var key, i;
if (Object.getOwnPropertySymbols) {
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
for (i = 0; i < sourceSymbolKeys.length; i++) {
key = sourceSymbolKeys[i];
if (excluded.indexOf(key) >= 0) continue;
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
target[key] = source[key];
}
}
return target;
}
function _slicedToArray(arr, i) {
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
}
function _arrayWithHoles(arr) {
if (Array.isArray(arr)) return arr;
}
function _iterableToArrayLimit(arr, i) {
if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
var _arr = [];
var _n = true;
var _d = false;
var _e = undefined;
try {
for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
_arr.push(_s.value);
if (i && _arr.length === i) break;
}
} catch (err) {
_d = true;
_e = err;
} finally {
try {
if (!_n && _i["return"] != null) _i["return"]();
} finally {
if (_d) throw _e;
}
}
return _arr;
}
function _unsupportedIterableToArray(o, minLen) {
if (!o) return;
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(o);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}
function _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
return arr2;
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function createCommonjsModule(fn, module) {
return module = { exports: {} }, fn(module, module.exports), module.exports;
}
var classnames = createCommonjsModule(function (module) {
/*!
Copyright (c) 2018 Jed Watson.
Licensed under the MIT License (MIT), see
http://jedwatson.github.io/classnames
*/
/* global define */
(function () {
var hasOwn = {}.hasOwnProperty;
function classNames() {
var classes = [];
for (var i = 0; i < arguments.length; i++) {
var arg = arguments[i];
if (!arg) continue;
var argType = typeof arg;
if (argType === 'string' || argType === 'number') {
classes.push(arg);
} else if (Array.isArray(arg)) {
if (arg.length) {
var inner = classNames.apply(null, arg);
if (inner) {
classes.push(inner);
}
}
} else if (argType === 'object') {
if (arg.toString === Object.prototype.toString) {
for (var key in arg) {
if (hasOwn.call(arg, key) && arg[key]) {
classes.push(key);
}
}
} else {
classes.push(arg.toString());
}
}
}
return classes.join(' ');
}
if (module.exports) {
classNames.default = classNames;
module.exports = classNames;
} else {
window.classNames = classNames;
}
})();
});
/**
* Copyright (c) 2014-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/**
* Similar to invariant but only logs a warning if the condition is not met.
* This can be used to log issues in development environments in critical
* paths. Removing the logging code for production environments will keep the
* same logic and follow the same code paths.
*/
var __DEV__ = process.env.NODE_ENV !== 'production';
var warning = function () {};
if (__DEV__) {
var printWarning = function printWarning(format, args) {
var len = arguments.length;
args = new Array(len > 1 ? len - 1 : 0);
for (var key = 1; key < len; key++) {
args[key - 1] = arguments[key];
}
var argIndex = 0;
var message = 'Warning: ' + format.replace(/%s/g, function () {
return args[argIndex++];
});
if (typeof console !== 'undefined') {
console.error(message);
}
try {
// --- Welcome to debugging React ---
// This error was thrown as a convenience so that you can use this stack
// to find the callsite that caused this warning to fire.
throw new Error(message);
} catch (x) {}
};
warning = function (condition, format, args) {
var len = arguments.length;
args = new Array(len > 2 ? len - 2 : 0);
for (var key = 2; key < len; key++) {
args[key - 2] = arguments[key];
}
if (format === undefined) {
throw new Error('`warning(condition, format, ...args)` requires a warning ' + 'message argument');
}
if (!condition) {
printWarning.apply(null, [format].concat(args));
}
};
}
var warning_1 = warning;
var hasSymbol = typeof Symbol === 'function' && Symbol.for;
var REACT_FRAGMENT_TYPE = hasSymbol ? Symbol.for('react.fragment') : 0xeacb;
var isFragment = function isFragment(object) {
return object.type === REACT_FRAGMENT_TYPE;
};
var styles = {
menuWrapper: {
display: 'flex',
overflow: 'hidden'
}
};
var ReactResponsiveMenu = function ReactResponsiveMenu(_ref) {
var children = _ref.children;
var navRef = React__default['default'].useRef(null);
var _React$useState = React__default['default'].useState({}),
_React$useState2 = _slicedToArray(_React$useState, 2),
menuItems = _React$useState2[0],
setMenuItems = _React$useState2[1];
var _React$useState3 = React__default['default'].useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
open = _React$useState4[0],
setOpen = _React$useState4[1];
var toggle = React__default['default'].useCallback(function (value) {
return setOpen(value);
}, [setOpen]);
var observe = React__default['default'].useCallback(function (elements) {
var updatedEntries = {};
elements.forEach(function (element) {
var targetid = element.target.dataset.targetid;
if (element.isIntersecting) {
updatedEntries[targetid] = true;
} else {
updatedEntries[targetid] = false;
}
});
setMenuItems(function (prev) {
return _objectSpread2(_objectSpread2({}, prev), updatedEntries);
});
}, [setMenuItems]);
var attachObserver = React__default['default'].useCallback(function () {
var observer = new IntersectionObserver(observe, {
root: navRef.current,
threshold: 1
});
Array.from(navRef.current.children).forEach(function (item) {
return item.dataset.targetid && observer.observe(item);
});
return observer;
}, []);
var handleClickOutside = React__default['default'].useCallback(function (_ref2) {
var target = _ref2.target;
return navRef && navRef.current && !navRef.current.contains(target) && toggle(false);
}, [toggle]);
var showEllipsis = React__default['default'].useMemo(function () {
return Object.values(menuItems).some(function (v) {
return v === false;
});
}, [menuItems]);
var overFlowMenu = function overFlowMenu(child) {
if (!child || !child.props['data-targetid'] || menuItems[child.props['data-targetid']]) return null;
return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, {
key: child
}, /*#__PURE__*/React__default['default'].cloneElement(child, {
onClick: function onClick() {
return toggle(false);
}
}));
};
var getMenuProps = function getMenuProps(menuType) {
return function () {
var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
id = _ref3.id,
props = _objectWithoutProperties(_ref3, ["id"]);
return _objectSpread2({
'data-targetid': id,
className: classnames({
visible: menuType === 'menu' && !!menuItems[id] || menuType === 'overflowMenu' && !menuItems[id],
inVisible: menuType === 'menu' && !menuItems[id] || menuType === 'overflowMenu' && !!menuItems[id]
}),
onClick: function onClick() {
return menuType === 'overflowMenu' && toggle(false);
}
}, props);
};
};
var flattenChildren = React__default['default'].useCallback(function (children) {
return isFragment(children) ? children.props.children.filter(function (child) {
return child && child.props['data-targetid'];
}) : children;
}, []);
var childProps = {
getMenuProps: getMenuProps('menu'),
showEllipsis: showEllipsis,
children: React__default['default'].Children.map(flattenChildren(children({
getMenuProps: getMenuProps('overflowMenu')
})), overFlowMenu),
open: open,
toggle: toggle
};
React__default['default'].useEffect(function () {
var observer = attachObserver();
document.addEventListener('click', handleClickOutside);
return function () {
observer.disconnect();
document.removeEventListener('click', handleClickOutside);
};
}, []);
React__default['default'].useEffect(function () {
warning_1(isFragment(children(childProps)), "Menu should wrapped inside fragment");
}, []);
return /*#__PURE__*/React__default['default'].createElement("div", {
ref: navRef,
style: styles.menuWrapper
}, children(childProps));
};
var index = /*#__PURE__*/React__default['default'].memo(ReactResponsiveMenu);
return index;
})));
//# sourceMappingURL=react-responsive-menu-hook.development.js.map