@6thquake/react-material
Version:
React components that implement Google's Material Design.
381 lines (335 loc) • 10.4 kB
JavaScript
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
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 = _interopRequireWildcard(require("react"));
var _styles = require("../../styles");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var styles = function styles(theme) {
return {
root: {
zIndex: theme.zIndex.appBar,
width: '100%',
height: '60px',
transition: 'background .3s cubic-bezier(0,0,.2,1) 0ms',
background: '#333',
position: 'relative',
// background:'rgba(55,61,65,0)',
'&:hover': {
background: '#373d41'
}
},
subContainer: {
position: 'absolute',
color: '#fff',
left: 0,
right: 0,
top: '60px',
background: '#272b2e',
transition: 'transform .3s',
transform: 'scaleY(0)',
transformOrigin: '0% 0%'
},
lightSubContainer: {
color: '#333',
background: '#fff',
boxShadow: theme.shadows[4],
borderTop: "1px solid ".concat(theme.palette.primary.main),
top: '61px'
},
topContainer: {
height: '100%'
},
topBar: {
margin: 0,
padding: 0,
listStyle: 'none',
height: '100%',
display: 'inline-block',
position: 'relative'
},
line: {
transition: 'all 200ms cubic-bezier(0.4, 0, 0.2, 1)',
position: 'absolute',
width: '0',
background: theme.palette.primary.main,
left: 0,
bottom: 0,
height: 3
},
left: {
float: 'left',
height: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-around'
},
right: {
float: 'right',
height: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-around'
},
lightRoot: {
background: '#fff',
'&:hover': {
background: '#fff'
},
boxShadow: theme.shadows[4]
}
};
};
var NavBar =
/*#__PURE__*/
function (_Component) {
(0, _inherits2.default)(NavBar, _Component);
function NavBar() {
var _getPrototypeOf2;
var _this;
(0, _classCallCheck2.default)(this, NavBar);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(NavBar)).call.apply(_getPrototypeOf2, [this].concat(args)));
_this.state = {
line: {
left: 0,
width: 0
},
activeKey: null,
subNavOpen: false,
initMenu: {
index: '',
activeKey: '',
line: {
width: '',
left: ''
}
},
selectedKeys: []
};
_this.getNav = function (e) {
var ele = e.target;
if (ele.getAttribute('top-nav-title')) {
_this.setState({
activeKey: ele.getAttribute('event-key'),
line: {
width: ele.offsetWidth,
left: ele.offsetLeft
},
subNavOpen: true,
hover: ele.getAttribute('event-key')
});
}
};
_this.getInitMenu = function () {
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.props;
var selectedKeys = props.selectedKeys,
children = props.children;
for (var i = 0, l = children.length; i < l; i++) {
var key = children[i].key || "menu-".concat(i);
var index = selectedKeys.indexOf(key);
if (index !== -1) {
_this.state.initMenu.index = i;
_this.state.initMenu.activeKey = key;
var initMenu = _this.state.topBar.childNodes[i];
_this.state.initMenu.line.width = initMenu.offsetWidth; // + this.left.offsetWidth;
_this.state.initMenu.line.left = initMenu.offsetLeft; // todo
_this.init();
break;
}
}
};
_this.init = function () {
_this.setState({
activeKey: _this.state.initMenu.activeKey,
line: {
width: _this.state.initMenu.line.width,
left: _this.state.initMenu.line.left
},
subNavOpen: false
});
};
_this.hiddenSubContainer = function () {
_this.setState({
subNavOpen: false
});
};
return _this;
}
(0, _createClass2.default)(NavBar, [{
key: "getChildContext",
value: function getChildContext() {
return {
onClick: this.props.onClick,
theme: this.props.theme,
hiddenSubContainer: this.hiddenSubContainer,
selectedKeys: this.props.selectedKeys
};
}
}, {
key: "renderNavItem",
value: function renderNavItem(child, i) {
var selectedKeys = this.props.selectedKeys;
var childKey = child.key || "menu-".concat(i);
var props = {
index: i,
eventKey: childKey,
hover: this.state.hover === childKey,
active: this.state.activeKey === childKey,
selected: selectedKeys.indexOf(childKey) !== -1,
selectedKeys: selectedKeys,
topNav: this
};
return _react.default.cloneElement(child, props);
}
}, {
key: "componentDidMount",
value: function componentDidMount() {
this.getInitMenu();
}
}, {
key: "getSubContainerStyles",
value: function getSubContainerStyles() {
return {
transform: "scaleY(".concat(this.state.subNavOpen ? 1 : 0, ")")
};
}
}, {
key: "render",
value: function render() {
var _this2 = this;
var _this$props = this.props,
children = _this$props.children,
classes = _this$props.classes,
rightTools = _this$props.rightTools,
leftTools = _this$props.leftTools,
theme = _this$props.theme;
var className = (0, _classnames.default)((0, _defineProperty2.default)({}, classes.lightRoot, theme === 'light'), classes.root);
var subContainerClassNames = (0, _classnames.default)((0, _defineProperty2.default)({}, classes.lightSubContainer, theme === 'light'), classes.subContainer);
return _react.default.createElement("div", {
className: className,
onMouseLeave: function onMouseLeave(e) {
return _this2.init(e);
}
}, _react.default.createElement("div", {
className: classes.topContainer
}, _react.default.createElement("div", {
className: classes.left,
ref: function ref(e) {
return _this2.left = e;
}
}, leftTools), _react.default.createElement("ul", {
className: classes.topBar,
onMouseOver: function onMouseOver(e) {
return _this2.getNav(e);
},
ref: function ref(e) {
return _this2.state.topBar = e;
}
}, _react.default.Children.map(children, function (c, i) {
return _this2.renderNavItem(c, i);
}), _react.default.createElement("span", {
ref: function ref(e) {
return _this2.line = e;
},
className: classes.line,
style: this.state.line
})), _react.default.createElement("div", {
className: classes.right
}, rightTools)), _react.default.createElement("div", {
ref: function ref(e) {
return _this2.subContainer = e;
},
className: subContainerClassNames,
style: this.getSubContainerStyles()
}));
}
}], [{
key: "getDerivedStateFromProps",
value: function getDerivedStateFromProps(nextProps, prevState) {
var initMenu = {
index: 0,
line: {}
};
var selectedKeys = nextProps.selectedKeys,
children = nextProps.children;
if (JSON.stringify(selectedKeys) === JSON.stringify(prevState.selectedKeys)) {
return null;
}
if (prevState.topBar) {
for (var i = 0, l = children.length; i < l; i++) {
var key = children[i].key || "menu-".concat(i);
var index = selectedKeys.indexOf(key);
if (index !== -1) {
initMenu.index = i;
initMenu.activeKey = key;
var ele = prevState.topBar.childNodes[i];
initMenu.line.width = ele.offsetWidth; // + this.left.offsetWidth;
initMenu.line.left = ele.offsetLeft; // todo
return {
activeKey: initMenu.activeKey,
line: {
width: initMenu.line.width,
left: initMenu.line.left
},
initMenu: initMenu,
selectedKeys: selectedKeys
};
}
}
}
return null;
}
}]);
return NavBar;
}(_react.Component);
NavBar.propTypes = {
/**
* 左侧工具区
*/
leftTools: _propTypes.default.node,
/**
* 点击 NavBarItem 调用此函数
*/
onClick: function onClick(_ref, NavBarItem, event) {
var key = _ref.key,
keyPath = _ref.keyPath;
return null;
},
/**
* 右侧工具区
*/
rightTools: _propTypes.default.node,
/**
* 选中的菜单项 key 数组
*/
selectedKeys: _propTypes.default.array,
/**
* 主题颜色
*/
theme: _propTypes.default.oneOf(['dark', 'light'])
};
NavBar.defaultProps = {
selectedKeys: [],
theme: 'dark'
};
NavBar.childContextTypes = {
onClick: _propTypes.default.func,
theme: _propTypes.default.string,
hiddenSubContainer: _propTypes.default.func,
selectedKeys: _propTypes.default.array
};
var _default = (0, _styles.withStyles)(styles)(NavBar);
exports.default = _default;