@aimo.ui/aimo-sidemenu
Version:
Accordion Sidebar Menu for React
187 lines (186 loc) • 11.3 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
require("./AimoSideMenu.css");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var AimoSideMenu = function AimoSideMenu(_ref) {
var _ref$compactView = _ref.compactView,
compactView = _ref$compactView === void 0 ? true : _ref$compactView,
_ref$containerClassNa = _ref.containerClassName,
containerClassName = _ref$containerClassNa === void 0 ? "" : _ref$containerClassNa,
_ref$headerClassName = _ref.headerClassName,
headerClassName = _ref$headerClassName === void 0 ? "" : _ref$headerClassName,
_ref$headerPosition = _ref.headerPosition,
headerPosition = _ref$headerPosition === void 0 ? "top" : _ref$headerPosition,
_ref$headerText = _ref.headerText,
headerText = _ref$headerText === void 0 ? "Menu" : _ref$headerText,
_ref$hideCompactView = _ref.hideCompactView,
hideCompactView = _ref$hideCompactView === void 0 ? false : _ref$hideCompactView,
_ref$hideHeader = _ref.hideHeader,
hideHeader = _ref$hideHeader === void 0 ? false : _ref$hideHeader,
_ref$hideIcons = _ref.hideIcons,
hideIcons = _ref$hideIcons === void 0 ? false : _ref$hideIcons,
_ref$iconContainerCla = _ref.iconContainerClassName,
iconContainerClassName = _ref$iconContainerCla === void 0 ? "" : _ref$iconContainerCla,
_ref$menuItemClassNam = _ref.menuItemClassName,
menuItemClassName = _ref$menuItemClassNam === void 0 ? "" : _ref$menuItemClassNam,
_ref$menuItems = _ref.menuItems,
menuItems = _ref$menuItems === void 0 ? [] : _ref$menuItems,
renderHeaderIcon = _ref.renderHeaderIcon,
renderHeaderText = _ref.renderHeaderText,
renderItem = _ref.renderItem,
renderSeparator = _ref.renderSeparator,
_ref$rtl = _ref.rtl,
rtl = _ref$rtl === void 0 ? false : _ref$rtl,
_ref$textContainerCla = _ref.textContainerClassName,
textContainerClassName = _ref$textContainerCla === void 0 ? "" : _ref$textContainerCla;
var _useState = (0, _react.useState)(hideCompactView ? false : compactView),
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
compact = _useState2[0],
setCompact = _useState2[1];
var _useState3 = (0, _react.useState)({
full: -1,
compact: -1
}),
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
maxWidths = _useState4[0],
setMaxWidth = _useState4[1];
var containerRef = (0, _react.useRef)();
var iconRef = null;
(0, _react.useEffect)(function () {
if (maxWidths.compact < 0 && iconRef) setMaxWidth(_objectSpread(_objectSpread({}, maxWidths), {}, {
compact: hideIcons ? 0 : iconRef.current.clientWidth
}));
}, []);
(0, _react.useEffect)(function () {
setCompact(compactView);
}, [compactView]);
var renderMenuHeaderIcon = function renderMenuHeaderIcon(isCompact, toggleCompact) {
if (hideIcons) return null;
var icon = null;
if (renderHeaderIcon) icon = renderHeaderIcon(isCompact, toggleCompact);else if (hideCompactView) icon = /*#__PURE__*/_react["default"].createElement("span", {
onClick: function onClick() {
return toggleCompact(false);
}
}, "\u2630");else if (isCompact) icon = /*#__PURE__*/_react["default"].createElement("span", {
onClick: function onClick() {
if (maxWidths.compact < 0 && iconRef) setMaxWidth(_objectSpread(_objectSpread({}, maxWidths), {}, {
compact: iconRef.current.clientWidth
}));
toggleCompact(false);
}
}, "\u226B");else icon = /*#__PURE__*/_react["default"].createElement("span", {
onClick: function onClick() {
if (maxWidths.full < -1) setMaxWidth(_objectSpread(_objectSpread({}, maxWidths), {}, {
full: containerRef.current.clientWidth
}));
toggleCompact(true);
}
}, "\u226A");
return /*#__PURE__*/_react["default"].createElement("div", {
className: "sideMenuHeaderIcon \n ".concat(hideCompactView ? null : "sideMenuClickableItem", "\n ").concat(iconContainerClassName)
}, icon);
};
var renderMenuHeaderText = function renderMenuHeaderText() {
if (hideHeader) return null;
var menuHeaderText = "Menu";
if (renderHeaderText) menuHeaderText = renderHeaderText();else if (headerText) menuHeaderText = headerText;
return /*#__PURE__*/_react["default"].createElement("div", {
className: "sideMenuHeaderText ".concat(rtl ? "sideMenuItemRtl" : "")
}, menuHeaderText);
};
var renderItemIcon = function renderItemIcon(item, index) {
if (hideIcons) return null;
if (item.isSeparator) return renderRowSeparator(index);
var ref = null;
if (!iconRef) {
iconRef = (0, _react.useRef)();
ref = iconRef;
}
return /*#__PURE__*/_react["default"].createElement("div", {
key: index,
className: "".concat(item.onClick ? "sideMenuClickableItem" : "", " sideMenuItemIcon"),
onClick: item.onClick ? function () {
return item.onClick(item);
} : null,
ref: ref
}, typeof item.renderIcon === "function" ? item.renderIcon() : /*#__PURE__*/_react["default"].createElement("span", null, "\u220E"));
};
var renderItemText = function renderItemText(item, index) {
var itemText = null;
if (typeof item.renderText === "function") itemText = item.renderText();else if (item.text) itemText = /*#__PURE__*/_react["default"].createElement("span", null, item.text);
return /*#__PURE__*/_react["default"].createElement("div", {
key: index,
className: "".concat(item.onClick ? "sideMenuClickableItem" : "", " sideMenuItemText ").concat(rtl ? "sideMenuItemRtl" : "", " ").concat(textContainerClassName),
onClick: item.onClick ? function () {
return item.onClick(item);
} : null
}, itemText);
};
var renderRowSeparator = function renderRowSeparator(key) {
if (renderSeparator) return renderSeparator(key);
return /*#__PURE__*/_react["default"].createElement("div", {
key: key,
className: "sideMenuSeparator"
});
};
var style = {};
if (rtl) style["flexDirection"] = "row-reverse";
if (compact && maxWidths.compact >= 0) style["maxWidth"] = maxWidths.compact;else if (!compact && maxWidths.full >= 0) style["maxWidth"] = maxWidths.full;
return /*#__PURE__*/_react["default"].createElement("div", {
className: "sideMenuContainer \n ".concat(!hideHeader && headerPosition === "bottom" ? "sideMenuContainerBottom" : "", "\n ").concat(compact ? hideIcons ? "sideMenuContainerHide" : "sideMenuContainerCompact" : "sideMenuContainerFull", " \n ").concat(containerClassName),
ref: containerRef,
style: style
}, !hideHeader && /*#__PURE__*/_react["default"].createElement("div", {
className: "sideMenuHeader ".concat(headerClassName)
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "sideMenuItem ".concat(menuItemClassName)
}, renderMenuHeaderIcon(compact, setCompact), /*#__PURE__*/_react["default"].createElement("div", {
className: "sideMenuItemText ".concat(compact ? "sideMenuItemTextHidden" : "")
}, renderMenuHeaderText())), renderRowSeparator()), /*#__PURE__*/_react["default"].createElement("div", {
className: "sideMenuItems"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "sideMenuFull"
}, menuItems.map(function (item, index) {
if (item.isSeparator) return renderRowSeparator(index);
var customRenderFunc = item.renderFunc ? item.renderFunc : renderItem ? renderItem : null;
return /*#__PURE__*/_react["default"].createElement("div", {
key: index,
className: "sideMenuItem ".concat(menuItemClassName, " ").concat(item.className)
}, customRenderFunc && customRenderFunc(item, index, compact), !customRenderFunc && renderItemIcon(item, index), !customRenderFunc && /*#__PURE__*/_react["default"].createElement("div", {
className: "sideMenuItemText"
}, renderItemText(item, index)));
}))));
};
AimoSideMenu.propTypes = {
compactView: _propTypes["default"].bool,
containerClassName: _propTypes["default"].string,
headerClassName: _propTypes["default"].string,
headerPosition: _propTypes["default"].oneOf(["top", "bottom"]),
headerText: _propTypes["default"].string,
hideCompactView: _propTypes["default"].bool,
hideHeader: _propTypes["default"].bool,
hideIcons: _propTypes["default"].bool,
iconContainerClassName: _propTypes["default"].string,
menuItemClassName: _propTypes["default"].string,
menuItems: _propTypes["default"].arrayOf(_propTypes["default"].object).isRequired,
renderHeaderIcon: _propTypes["default"].func,
renderHeaderText: _propTypes["default"].func,
renderItem: _propTypes["default"].func,
renderSeparator: _propTypes["default"].func,
rtl: _propTypes["default"].bool,
textContainerClassName: _propTypes["default"].string
};
var _default = AimoSideMenu;
exports["default"] = _default;