@6thquake/react-material
Version:
React components that implement Google's Material Design.
338 lines (288 loc) • 9.47 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
var _OriginMenuBar = _interopRequireDefault(require("./OriginMenuBar"));
/**
* @ignore - do not document.
*/
var SubMenu = _OriginMenuBar.default.SubMenu;
var MenuItem = _OriginMenuBar.default.Item;
var defaultItemKeysMap = {
name: 'name',
icon: 'icon',
children: 'children',
beforeChildren: 'beforeChildren',
before: 'before',
onClick: 'onClick',
onHandle: 'onHandle',
style: 'style',
className: 'className',
open: 'open',
selected: 'selected',
key: 'key'
};
var styles = function styles(theme) {
return {
'@media (max-width: 600px)': {
MuiListItemButton: {
paddingLeft: "".concat(theme.spacing(2), "px !important"),
paddingRight: "".concat(theme.spacing(2), "px !important")
}
},
'@global .selected': {
fontWeight: theme.typography.fontWeightMedium,
color: theme.palette.primary.main
}
};
};
var Item =
/*#__PURE__*/
function (_React$Component) {
(0, _inherits2.default)(Item, _React$Component);
function Item() {
(0, _classCallCheck2.default)(this, Item);
return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf3.default)(Item).apply(this, arguments));
}
(0, _createClass2.default)(Item, [{
key: "renderItem",
value: function renderItem() {
var _this$props = this.props,
name = _this$props.name,
key = _this$props.key,
children = _this$props.children;
if (this.isRenderItem()) {
return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(MenuItem, {
key: key
}, renderIcon(this.props), name), children ? _react.default.createElement(MenuList, {
list: children
}) : null);
}
return null;
}
}, {
key: "render",
value: function render() {
var _this$props2 = this.props,
name = _this$props2.name,
icon = _this$props2.icon,
children = _this$props2.children,
beforeChildren = _this$props2.beforeChildren,
before = _this$props2.before,
style = _this$props2.style,
classNamePro = _this$props2.className,
classes = _this$props2.classes;
var _this$context = this.context,
level = _this$context.level,
inlineIndent = _this$context.inlineIndent;
return this.renderItem();
}
}]);
return Item;
}(_react.default.Component);
Item.contextTypes = {
level: _propTypes.default.number,
inlineIndent: _propTypes.default.number,
root: _propTypes.default.object
};
Item.propTypes = {
before: _propTypes.default.func,
beforeChildren: _propTypes.default.func,
children: _propTypes.default.array,
className: _propTypes.default.object,
icon: _propTypes.default.element || _propTypes.default.string,
name: _propTypes.default.node || _propTypes.default.string,
onClick: _propTypes.default.func,
onHandle: _propTypes.default.func,
style: _propTypes.default.object
};
Item.defaultProps = {
open: false,
before: function before() {
return true;
},
beforeChildren: function beforeChildren() {
return true;
},
onClick: function onClick() {
return true;
},
onHandle: function onHandle() {
return true;
},
selected: false
};
var EasyMenuBar =
/*#__PURE__*/
function (_React$Component2) {
(0, _inherits2.default)(EasyMenuBar, _React$Component2);
function EasyMenuBar() {
var _getPrototypeOf2;
var _this;
(0, _classCallCheck2.default)(this, EasyMenuBar);
for (var _len = arguments.length, args = new Array(_len), _key2 = 0; _key2 < _len; _key2++) {
args[_key2] = arguments[_key2];
}
_this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(EasyMenuBar)).call.apply(_getPrototypeOf2, [this].concat(args)));
_this.state = {
itemKeysMap: (0, _extends2.default)({}, defaultItemKeysMap, _this.props.itemKeysMap)
};
return _this;
}
(0, _createClass2.default)(EasyMenuBar, [{
key: "itemKeyToProps",
value: function itemKeyToProps(item) {
var itemKeysMap = this.state.itemKeysMap;
var result = {};
for (var key in itemKeysMap) {
var resultKey = itemKeysMap[key];
result[key] = item[resultKey];
}
return result;
}
/**
* 是否渲染当前节点
* @param item
*/
}, {
key: "isRenderItem",
value: function isRenderItem(item) {
if (item.before) return item.before();
return true;
}
/**
* 渲染icon
* @param icon
*/
}, {
key: "renderIcon",
value: function renderIcon(icon) {
if (icon) {
if (typeof icon === 'string') {
return _react.default.createElement("i", {
className: "material-icons"
}, icon);
}
return icon;
}
return null;
}
}, {
key: "getChildContext",
value: function getChildContext() {
return {
level: 0,
itemKeysMap: (0, _extends2.default)({}, defaultItemKeysMap, this.props.itemKeysMap),
inlineIndent: this.props.inlineIndent // root:this
};
}
/**
* 是否渲染子节点
* @param item 当前节点
* @return boolean
*/
}, {
key: "isRenderChildren",
value: function isRenderChildren(item) {
if (item.children && item.children !== 0) {
if (item.beforeChildren) return item.beforeChildren();
return true;
}
return false;
}
}, {
key: "renderMenu",
value: function renderMenu(list, parentKey) {
var _this2 = this;
if (!Array.isArray(list)) return null;
return list.map(function (item, index) {
var result = _this2.itemKeyToProps(item);
var icon = result.icon,
name = result.name,
children = result.children,
key = result.key;
var _key;
if (key) {
_key = key;
} else {
_key = parentKey === undefined ? index : "".concat(parentKey, "-").concat(index);
}
if (_this2.isRenderItem(item)) {
if (_this2.isRenderChildren(result)) {
return _react.default.createElement(SubMenu, {
key: _key,
title: _react.default.createElement("span", null, _this2.renderIcon(icon), _react.default.createElement("span", null, name), " ", _this2.props.debugger ? _key : null)
}, _this2.renderMenu(children, _key));
}
return _react.default.createElement(MenuItem, {
key: _key
}, _this2.renderIcon(icon), _react.default.createElement("span", null, name), " ", _this2.props.debugger ? _key : null);
}
return null;
});
}
}, {
key: "render",
value: function render() {
var _this$props3 = this.props,
list = _this$props3.list,
itemKeysMap = _this$props3.itemKeysMap,
d = _this$props3.debugger,
classes = _this$props3.classes,
props = (0, _objectWithoutProperties2.default)(_this$props3, ["list", "itemKeysMap", "debugger", "classes"]);
return _react.default.createElement(_OriginMenuBar.default, props, this.renderMenu(list));
}
}]);
return EasyMenuBar;
}(_react.default.Component);
EasyMenuBar.childContextTypes = {
level: _propTypes.default.number,
itemKeysMap: _propTypes.default.object,
inlineIndent: _propTypes.default.number // root:PropTypes.object
};
EasyMenuBar.propTypes = {
/**
* 要展示的menu
*/
debugger: _propTypes.default.bool,
/**
* menu的每一项数据的key值
*/
itemKeysMap: _propTypes.default.shape({
before: _propTypes.default.string,
beforeChildren: _propTypes.default.string,
children: _propTypes.default.string,
className: _propTypes.default.string,
icon: _propTypes.default.string,
key: _propTypes.default.string,
name: _propTypes.default.string,
onClick: _propTypes.default.string,
onHandle: _propTypes.default.string,
open: _propTypes.default.string,
style: _propTypes.default.string
}),
/**
* @ignore
*/
list: _propTypes.default.array.isRequired
};
EasyMenuBar.defaultProps = {
debugger: false,
itemKeysMap: defaultItemKeysMap
};
var _default = (0, _withStyles.default)(styles, {
name: 'RMEasyNavBar'
})(EasyMenuBar);
exports.default = _default;