@panneau/layout
Version:
Layout core for Panneau
266 lines (243 loc) • 10.4 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _extends from "@babel/runtime/helpers/extends";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
var _excluded = ["index"];
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) { _defineProperty(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; }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
/* eslint-disable react/no-array-index-key */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import get from 'lodash/get';
import isArray from 'lodash/isArray';
import { Link } from 'react-router-dom';
import { withComponentsCollection, PropTypes as PanneauPropTypes } from '@panneau/core';
import NavbarItem from './NavbarItem';
import NavbarDivider from './NavbarDivider';
import NavbarUser from './NavbarUser';
import NavbarResource from './NavbarResource';
var defaultItemsComponents = {
item: NavbarItem,
divider: NavbarDivider,
user: NavbarUser,
resource: NavbarResource
};
var propTypes = {
title: PropTypes.string,
titleLink: PropTypes.string,
items: PropTypes.arrayOf(PropTypes.shape({
type: PropTypes.string,
label: PropTypes.string,
position: PropTypes.oneOf(['right', 'left', 'center'])
})),
itemsCollection: PanneauPropTypes.componentsCollection,
itemsComponents: PropTypes.objectOf(PropTypes.func),
opened: PropTypes.bool,
gotoHome: PropTypes.func.isRequired,
gotoLink: PropTypes.func.isRequired,
gotoRoute: PropTypes.func.isRequired,
onClickTitle: PropTypes.func,
onClickItem: PropTypes.func
};
var defaultProps = {
title: 'Panneau',
titleLink: '#',
items: [],
itemsCollection: null,
itemsComponents: defaultItemsComponents,
opened: false,
onClickTitle: null,
onClickItem: null
};
var Navbar = /*#__PURE__*/function (_Component) {
_inherits(Navbar, _Component);
var _super = _createSuper(Navbar);
function Navbar(props) {
var _this;
_classCallCheck(this, Navbar);
_this = _super.call(this, props);
_this.onClickTitle = _this.onClickTitle.bind(_assertThisInitialized(_this));
_this.onClickHamburger = _this.onClickHamburger.bind(_assertThisInitialized(_this));
_this.renderItem = _this.renderItem.bind(_assertThisInitialized(_this));
_this.state = {
opened: props.opened
};
return _this;
}
_createClass(Navbar, [{
key: "componentWillReceiveProps",
value: function componentWillReceiveProps(_ref) {
var nextOpened = _ref.opened;
var opened = this.props.opened;
var openedChanged = nextOpened !== opened;
if (openedChanged) {
this.setState({
opened: nextOpened
});
}
}
}, {
key: "onClickTitle",
value: function onClickTitle(e) {
var onClickTitle = this.props.onClickTitle;
if (onClickTitle !== null) {
onClickTitle(e);
}
}
}, {
key: "onClickHamburger",
value: function onClickHamburger() {
this.setState(function (_ref2) {
var opened = _ref2.opened;
return {
opened: !opened
};
});
}
}, {
key: "onClickItem",
value: function onClickItem(e, _ref3, relIndex, position) {
var index = _ref3.index,
it = _objectWithoutProperties(_ref3, _excluded);
var _this$props = this.props,
onClickItem = _this$props.onClickItem,
gotoRoute = _this$props.gotoRoute;
if (onClickItem !== null) {
onClickItem(e, it, index, position);
}
if (typeof it.gotoRoute !== 'undefined') {
gotoRoute.apply(void 0, _toConsumableArray(isArray(it.gotoRoute) ? it.gotoRoute : [it.gotoRoute]));
}
}
}, {
key: "getItemComponent",
value: function getItemComponent() {
var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'item';
var _this$props2 = this.props,
itemsCollection = _this$props2.itemsCollection,
itemsComponents = _this$props2.itemsComponents;
var defaultComponent = itemsComponents !== null ? itemsComponents[type] || null : null;
return (itemsCollection !== null ? itemsCollection.getComponent(type) : null) || defaultComponent;
}
}, {
key: "renderItem",
value: function renderItem(it, index, position) {
var _this2 = this;
var _this$props3 = this.props,
gotoHome = _this$props3.gotoHome,
gotoLink = _this$props3.gotoLink,
gotoRoute = _this$props3.gotoRoute;
var ItemComponent = this.getItemComponent(it.type || 'item');
return ItemComponent !== null ? /*#__PURE__*/React.createElement(ItemComponent, _extends({
key: "item-".concat(position, "-").concat(index)
}, it, {
position: position,
gotoHome: gotoHome,
gotoLink: gotoLink,
gotoRoute: gotoRoute,
onClick: function onClick(e) {
return _this2.onClickItem(e, it, index, position);
},
onClickItem: function onClickItem(e, subIt, subIndex) {
return _this2.onClickItem(e, subIt, subIndex, position);
}
})) : null;
}
}, {
key: "renderItems",
value: function renderItems(items, position) {
var _this3 = this;
return /*#__PURE__*/React.createElement("ul", {
className: classNames({
'navbar-nav mr-auto': true,
'navbar-right': position === 'right'
})
}, items.map(function (it, index) {
return _this3.renderItem(it, index, position);
}));
}
}, {
key: "render",
value: function render() {
var _this4 = this;
var _this$props4 = this.props,
title = _this$props4.title,
titleLink = _this$props4.titleLink,
items = _this$props4.items;
var opened = this.state.opened;
var itemsWithIndex = items.map(function (it, index) {
return _objectSpread(_objectSpread({}, it), {}, {
dropdown: get(it, 'type', 'item') !== 'divider' && get(it, 'items', null) !== null,
index: index
});
});
var leftItems = itemsWithIndex.filter(function (it) {
return get(it, 'position', 'left') === 'left';
});
var rightItems = itemsWithIndex.filter(function (it) {
return get(it, 'position', 'left') === 'right';
});
var hasLeftItems = leftItems.length > 0;
var hasRightItems = rightItems.length > 0;
return /*#__PURE__*/React.createElement("nav", {
className: "navbar navbar-expand-lg navbar-light bg-light"
}, /*#__PURE__*/React.createElement(Link, {
to: {
pathname: titleLink
},
className: "navbar-brand",
onClick: this.onClickTitle
}, title), /*#__PURE__*/React.createElement("button", {
type: "button",
className: "navbar-toggler",
"aria-expanded": "false",
onClick: this.onClickHamburger
}, /*#__PURE__*/React.createElement("span", {
className: "sr-only"
}, "Menu"), /*#__PURE__*/React.createElement("span", {
className: "navbar-toggler-icon"
})), /*#__PURE__*/React.createElement("div", {
className: classNames({
collapse: true,
'navbar-collapse': true,
show: opened
})
}, hasLeftItems ? /*#__PURE__*/React.createElement("ul", {
className: classNames({
'navbar-nav': true,
'mr-auto': true
})
}, leftItems.map(function (it, index) {
return _this4.renderItem(it, index, 'left');
})) : null, hasRightItems ? /*#__PURE__*/React.createElement("ul", {
className: classNames({
'navbar-nav': true,
'ml-auto': !hasLeftItems
})
}, rightItems.map(function (it, index) {
return _this4.renderItem(it, index, 'right');
})) : null));
}
}]);
return Navbar;
}(Component);
Navbar.propTypes = propTypes;
Navbar.defaultProps = defaultProps;
var mapCollectionToProps = function mapCollectionToProps(_ref4, _ref5) {
var propsCollection = _ref4.componentsCollection;
var contextCollection = _ref5.componentsCollection;
var collection = propsCollection || contextCollection || null;
return {
itemsCollection: collection !== null ? collection.getCollection('navbarItems') : null
};
};
export default withComponentsCollection(mapCollectionToProps)(Navbar);