@nutui/nutui-react
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
173 lines (172 loc) • 8.22 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Menu", {
enumerable: true,
get: function() {
return Menu;
}
});
var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
var _object_spread = require("@swc/helpers/_/_object_spread");
var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
var _to_consumable_array = require("@swc/helpers/_/_to_consumable_array");
var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
var _iconsreact = require("@nutui/icons-react");
var _menuitem = require("../menuitem/menuitem");
var _typings = require("../../utils/typings");
var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
activeColor: '',
closeOnOverlayClick: true,
scrollFixed: false,
lockScroll: true,
overlay: true,
icon: null,
onOpen: function onOpen(index, from) {},
onClose: function onClose(index, from) {}
});
var Menu = function Menu(props) {
var _ref = (0, _object_spread._)({}, defaultProps, props), className = _ref.className, icon = _ref.icon, scrollFixed = _ref.scrollFixed, lockScroll = _ref.lockScroll, overlay = _ref.overlay, closeOnOverlayClick = _ref.closeOnOverlayClick, children = _ref.children, activeColor = _ref.activeColor, onClose = _ref.onClose, onOpen = _ref.onOpen, rest = (0, _object_without_properties._)(_ref, [
"className",
"icon",
"scrollFixed",
"lockScroll",
"overlay",
"closeOnOverlayClick",
"children",
"activeColor",
"onClose",
"onOpen"
]);
var menuRef = (0, _react.useRef)(null);
var _useState = (0, _sliced_to_array._)((0, _react.useState)([]), 2), showMenuItem = _useState[0], setShowMenuItem = _useState[1];
var _useState1 = (0, _sliced_to_array._)((0, _react.useState)([]), 2), menuItemTitle = _useState1[0], setMenuItemTitle = _useState1[1];
var _useState2 = (0, _sliced_to_array._)((0, _react.useState)(false), 2), isScrollFixed = _useState2[0], setIsScrollFixed = _useState2[1];
var cls = (0, _classnames.default)("nut-menu", className, {
'scroll-fixed': isScrollFixed
});
var getScrollTop = function getScrollTop(el) {
return Math.max(0, el === window ? window.scrollY : el.scrollTop);
};
var onScroll = (0, _react.useCallback)(function() {
var scrollTop = getScrollTop(window);
var isFixed = scrollTop > (typeof scrollFixed === 'boolean' ? 30 : Number(scrollFixed));
setIsScrollFixed(isFixed);
}, [
scrollFixed
]);
(0, _react.useEffect)(function() {
if (scrollFixed) {
window.addEventListener('scroll', onScroll);
}
return function() {
return window.removeEventListener('scroll', onScroll);
};
}, [
scrollFixed,
onScroll
]);
var toggleMenuItem = function toggleMenuItem(index) {
var from = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 'NORMAL';
showMenuItem[index] = !showMenuItem[index];
if (showMenuItem[index]) {
onOpen && onOpen(index, from);
} else {
onClose && onClose(index, from);
}
var temp = showMenuItem.map(function(i, idx) {
return idx === index ? i : false;
});
setShowMenuItem((0, _to_consumable_array._)(temp));
};
var hideMenuItem = function hideMenuItem(index) {
var from = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 'NORMAL';
showMenuItem[index] = false;
setShowMenuItem((0, _to_consumable_array._)(showMenuItem));
onClose && onClose(index, from);
};
var updateTitle = function updateTitle(text, index) {
menuItemTitle[index] = text;
setMenuItemTitle((0, _to_consumable_array._)(menuItemTitle));
};
var cloneChildren = function cloneChildren() {
return _react.default.Children.map(children, function(child, index) {
return /*#__PURE__*/ _react.default.cloneElement(child, (0, _object_spread_props._)((0, _object_spread._)({}, child.props), {
show: showMenuItem[index],
index: index,
activeColor: activeColor,
parent: {
closeOnOverlayClick: closeOnOverlayClick,
overlay: overlay,
lockScroll: lockScroll,
toggleMenuItem: toggleMenuItem,
updateTitle: updateTitle,
hideMenuItem: hideMenuItem,
menuRef: menuRef
}
}));
});
};
var menuTitle = function menuTitle() {
return _react.default.Children.map(children, function(child, index) {
if (/*#__PURE__*/ _react.default.isValidElement(child)) {
var _child_props = child.props, title = _child_props.title, titleIcon = _child_props.titleIcon, options = _child_props.options, value = _child_props.value, defaultValue = _child_props.defaultValue, disabled = _child_props.disabled, direction = _child_props.direction;
var selected = options === null || options === void 0 ? void 0 : options.filter(function(option) {
return option.value === (value !== undefined ? value : defaultValue);
});
var finallyTitle = function finallyTitle() {
if (title) return title;
if (menuItemTitle && menuItemTitle[index]) return menuItemTitle[index];
if (selected && selected.length && selected[0].text) return selected[0].text;
return '';
};
var finallyIcon = function finallyIcon() {
if (titleIcon) return titleIcon;
if (icon) return icon;
return direction === 'up' ? /*#__PURE__*/ _react.default.createElement(_iconsreact.ArrowUp, {
className: "nut-menu-title-icon",
width: "12px",
height: "12px"
}) : /*#__PURE__*/ _react.default.createElement(_iconsreact.ArrowDown, {
className: "nut-menu-title-icon",
width: "12px",
height: "12px"
});
};
return /*#__PURE__*/ _react.default.createElement("div", {
className: (0, _classnames.default)('nut-menu-title', "nut-menu-title-".concat(index), {
active: showMenuItem[index],
disabled: disabled
}),
style: {
color: showMenuItem[index] ? activeColor : ''
},
key: index,
onClick: function onClick(e) {
e.stopPropagation();
if ((!options || !options.length) && !child.props.children) return;
!disabled && toggleMenuItem(index);
}
}, /*#__PURE__*/ _react.default.createElement("div", {
className: "nut-menu-title-text"
}, finallyTitle()), finallyIcon());
}
return null;
});
};
return /*#__PURE__*/ _react.default.createElement("div", (0, _object_spread_props._)((0, _object_spread._)({}, rest), {
className: cls,
ref: menuRef
}), /*#__PURE__*/ _react.default.createElement("div", {
className: (0, _classnames.default)('nut-menu-bar', {
opened: showMenuItem.includes(true)
})
}, menuTitle()), cloneChildren());
};
Menu.displayName = 'NutMenu';
Menu.Item = _menuitem.MenuItem;