jc-biz-components
Version:
jc component library based on Antd
349 lines (298 loc) • 9.7 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');
var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _createClass2 = require('babel-runtime/helpers/createClass');
var _createClass3 = _interopRequireDefault(_createClass2);
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _inherits2 = require('babel-runtime/helpers/inherits');
var _inherits3 = _interopRequireDefault(_inherits2);
var _menu = require('antd/lib/menu');
var _menu2 = _interopRequireDefault(_menu);
var _layout = require('antd/lib/layout');
var _layout2 = _interopRequireDefault(_layout);
require('antd/lib/menu/style');
require('antd/lib/layout/style');
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _reactRouterDom = require('react-router-dom');
var _storage = require('../jc-_utils/storage');
var _storage2 = _interopRequireDefault(_storage);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var Sider = _layout2['default'].Sider;
// import styles from './index.less'
var SubMenu = _menu2['default'].SubMenu;
var prefixCls = 'jc-sider-menu';
// Allow menu.js config icon as string or ReactNode
// icon: 'setting',
// icon: 'http://demo.com/icon.png',
// icon: <Icon type='setting' />,
var getIcon = function getIcon(icon) {
if (typeof icon === 'string' && icon.indexOf('http') === 0) {
return _react2['default'].createElement('img', {
src: icon,
alt: 'icon',
className: prefixCls + '-icon'
});
}
if (typeof icon === 'string') {
return _react2['default'].createElement('span', {
className: 'iconfont ' + icon,
style: { marginRight: '35px' }
});
}
return icon;
};
var SiderMenu = function (_PureComponent) {
(0, _inherits3['default'])(SiderMenu, _PureComponent);
function SiderMenu(props) {
(0, _classCallCheck3['default'])(this, SiderMenu);
var _this = (0, _possibleConstructorReturn3['default'])(this, (SiderMenu.__proto__ || Object.getPrototypeOf(SiderMenu)).call(this, props));
_this.getSelectedMenuKeys = function (path) {
var flatMenuKeys = _this.getFlatMenuKeys(_this.state.menus);
var menu = flatMenuKeys.filter(function (item) {
return path.startsWith(item);
});
if (menu.length === 1) {
return menu;
} else if (menu.length > 1) {
return menu.filter(function (item) {
return item !== '/';
});
}
return [];
};
_this.getMenuItemPath = function (item) {
var itemPath = _this.conversionPath(item.path);
var icon = getIcon(item.icon);
var target = item.target,
name = item.name;
// Is it a http link
if (/^https?:\/\//.test(itemPath)) {
return _react2['default'].createElement(
'a',
{
href: itemPath,
target: target
},
icon,
_react2['default'].createElement(
'span',
null,
name
)
);
}
return _react2['default'].createElement(
_reactRouterDom.Link,
{
to: itemPath,
target: target,
replace: itemPath === _this.props.location.pathname,
onClick: _this.props.isMobile ? function () {
_this.props.onCollapse(true);
} : undefined
},
icon ? _react2['default'].createElement(
'span',
null,
icon,
_react2['default'].createElement(
'span',
null,
name
)
) : _react2['default'].createElement(
'span',
{ style: { marginLeft: 20 } },
name
)
);
};
_this.getSubMenuOrItem = function (item) {
if (item.children && item.children.some(function (child) {
return child.name;
})) {
return _react2['default'].createElement(
SubMenu,
{
title: item.icon ? _react2['default'].createElement(
'span',
null,
getIcon(item.icon),
_react2['default'].createElement(
'span',
null,
item.name
)
) : item.name,
key: item.key || item.path
},
_this.getNavMenuItems(item.children)
);
} else {
return _react2['default'].createElement(
_menu2['default'].Item,
{ key: item.key || item.path },
_this.getMenuItemPath(item)
);
}
};
_this.getNavMenuItems = function (menusData) {
if (!menusData) {
return [];
}
return menusData.filter(function (item) {
return item.name && !item.hideInMenu;
}).map(function (item) {
var ItemDom = _this.getSubMenuOrItem(item);
return _this.checkPermissionItem(item.authority, ItemDom);
}).filter(function (item) {
return !!item;
});
};
_this.conversionPath = function (path) {
if (path && path.indexOf('http') === 0) {
return path;
} else {
return ('/' + (path || '')).replace(/\/+/g, '/');
}
};
_this.checkPermissionItem = function (authority, ItemDom) {
if (_this.props.Authorized && _this.props.Authorized.check) {
var check = _this.props.Authorized.check;
return check(authority, ItemDom);
}
return ItemDom;
};
_this.handleOpenChange = function (openKeys) {
var lastOpenKey = openKeys[openKeys.length - 1];
var isMainMenu = _this.state.menus.some(function (item) {
return lastOpenKey && (item.key === lastOpenKey || item.path === lastOpenKey);
});
_storage2['default'].set('openKeys', isMainMenu ? [lastOpenKey] : [].concat((0, _toConsumableArray3['default'])(openKeys)));
_this.setState({
openKeys: isMainMenu ? [lastOpenKey] : [].concat((0, _toConsumableArray3['default'])(openKeys))
});
};
_this.state = {
menus: props.menuData,
openKeys: _storage2['default'].get('openKeys') || []
};
return _this;
}
(0, _createClass3['default'])(SiderMenu, [{
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps) {
if (nextProps.menuData !== this.state.menus) {
this.setState({
menus: nextProps.menuData
});
}
}
}, {
key: 'getFlatMenuKeys',
value: function getFlatMenuKeys(menus) {
var _this2 = this;
var keys = [];
menus.forEach(function (item) {
if (item.children) {
keys.push(item.path);
keys = keys.concat(_this2.getFlatMenuKeys(item.children));
} else {
keys.push(item.path);
}
});
return keys;
}
/**
* 判断是否是http链接.返回 Link 或 a
* Judge whether it is http link.return a or Link
* @memberof SiderMenu
*/
/**
* get SubMenu or Item
*/
/**
* 获得菜单子节点
* @memberof SiderMenu
*/
// conversion Path
// 转化路径
// permission to check
}, {
key: 'render',
value: function render() {
var _props = this.props,
logo = _props.logo,
collapsed = _props.collapsed,
pathname = _props.location.pathname,
onCollapse = _props.onCollapse,
title = _props.title;
var openKeys = this.state.openKeys;
// Don't show popup menu when it is been collapsed
var menuProps = collapsed ? {} : {
openKeys: openKeys
// if pathname can't match, use the nearest parent's key
};var selectedKeys = this.getSelectedMenuKeys(pathname);
if (!selectedKeys.length) {
selectedKeys = [openKeys[openKeys.length - 1]];
}
return _react2['default'].createElement(
Sider,
{
trigger: null,
collapsible: true,
collapsed: collapsed,
breakpoint: 'md',
onCollapse: onCollapse,
width: 256,
className: prefixCls + '-sider'
},
_react2['default'].createElement(
'div',
{
className: prefixCls + '-logo',
key: 'logo'
},
_react2['default'].createElement(
_reactRouterDom.Link,
{ to: '/' },
_react2['default'].createElement('img', {
src: logo,
alt: 'logo'
}),
_react2['default'].createElement(
'h1',
null,
title
)
)
),
_react2['default'].createElement(
_menu2['default'],
(0, _extends3['default'])({
key: 'Menu',
theme: 'dark',
mode: 'inline'
}, menuProps, {
onOpenChange: this.handleOpenChange,
selectedKeys: selectedKeys,
style: { padding: '16px 0', width: '100%' }
}),
this.getNavMenuItems(this.state.menus)
)
);
}
}]);
return SiderMenu;
}(_react.PureComponent);
exports['default'] = SiderMenu;
module.exports = exports['default'];