380 lines
13 KiB
JavaScript
380 lines
13 KiB
JavaScript
|
'use strict';
|
||
|
|
|
||
|
|
Object.defineProperty(exports, "__esModule", {
|
||
|
|
value: true
|
||
|
|
});
|
||
|
|
|
||
|
|
var _extends2 = require('babel-runtime/helpers/extends');
|
||
|
|
|
||
|
|
var _extends3 = _interopRequireDefault(_extends2);
|
||
|
|
|
||
|
|
var _keys = require('babel-runtime/core-js/object/keys');
|
||
|
|
|
||
|
|
var _keys2 = _interopRequireDefault(_keys);
|
||
|
|
|
||
|
|
var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
|
||
|
|
|
||
|
|
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
|
||
|
|
|
||
|
|
var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
|
||
|
|
|
||
|
|
var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
|
||
|
|
|
||
|
|
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);
|
||
|
|
|
||
|
|
exports.getStyles = getStyles;
|
||
|
|
|
||
|
|
var _simpleAssign = require('simple-assign');
|
||
|
|
|
||
|
|
var _simpleAssign2 = _interopRequireDefault(_simpleAssign);
|
||
|
|
|
||
|
|
var _react = require('react');
|
||
|
|
|
||
|
|
var _react2 = _interopRequireDefault(_react);
|
||
|
|
|
||
|
|
var _IconButton = require('../IconButton');
|
||
|
|
|
||
|
|
var _IconButton2 = _interopRequireDefault(_IconButton);
|
||
|
|
|
||
|
|
var _menu = require('../svg-icons/navigation/menu');
|
||
|
|
|
||
|
|
var _menu2 = _interopRequireDefault(_menu);
|
||
|
|
|
||
|
|
var _Paper = require('../Paper');
|
||
|
|
|
||
|
|
var _Paper2 = _interopRequireDefault(_Paper);
|
||
|
|
|
||
|
|
var _propTypes = require('../utils/propTypes');
|
||
|
|
|
||
|
|
var _propTypes2 = _interopRequireDefault(_propTypes);
|
||
|
|
|
||
|
|
var _warning = require('warning');
|
||
|
|
|
||
|
|
var _warning2 = _interopRequireDefault(_warning);
|
||
|
|
|
||
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||
|
|
|
||
|
|
function getStyles(props, context) {
|
||
|
|
var _context$muiTheme = context.muiTheme,
|
||
|
|
appBar = _context$muiTheme.appBar,
|
||
|
|
iconButtonSize = _context$muiTheme.button.iconButtonSize,
|
||
|
|
zIndex = _context$muiTheme.zIndex;
|
||
|
|
|
||
|
|
|
||
|
|
var flatButtonSize = 36;
|
||
|
|
|
||
|
|
var styles = {
|
||
|
|
root: {
|
||
|
|
position: 'relative',
|
||
|
|
zIndex: zIndex.appBar,
|
||
|
|
width: '100%',
|
||
|
|
display: 'flex',
|
||
|
|
backgroundColor: appBar.color,
|
||
|
|
paddingLeft: appBar.padding,
|
||
|
|
paddingRight: appBar.padding
|
||
|
|
},
|
||
|
|
title: {
|
||
|
|
whiteSpace: 'nowrap',
|
||
|
|
overflow: 'hidden',
|
||
|
|
textOverflow: 'ellipsis',
|
||
|
|
margin: 0,
|
||
|
|
paddingTop: 0,
|
||
|
|
letterSpacing: 0,
|
||
|
|
fontSize: 24,
|
||
|
|
fontWeight: appBar.titleFontWeight,
|
||
|
|
color: appBar.textColor,
|
||
|
|
height: appBar.height,
|
||
|
|
lineHeight: appBar.height + 'px'
|
||
|
|
},
|
||
|
|
mainElement: {
|
||
|
|
boxFlex: 1,
|
||
|
|
flex: '1'
|
||
|
|
},
|
||
|
|
iconButtonStyle: {
|
||
|
|
marginTop: (appBar.height - iconButtonSize) / 2,
|
||
|
|
marginRight: 8,
|
||
|
|
marginLeft: -16
|
||
|
|
},
|
||
|
|
iconButtonIconStyle: {
|
||
|
|
fill: appBar.textColor,
|
||
|
|
color: appBar.textColor
|
||
|
|
},
|
||
|
|
flatButton: {
|
||
|
|
color: appBar.textColor,
|
||
|
|
marginTop: (iconButtonSize - flatButtonSize) / 2 + 1
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return styles;
|
||
|
|
}
|
||
|
|
|
||
|
|
var AppBar = function (_Component) {
|
||
|
|
(0, _inherits3.default)(AppBar, _Component);
|
||
|
|
|
||
|
|
function AppBar() {
|
||
|
|
var _ref;
|
||
|
|
|
||
|
|
var _temp, _this, _ret;
|
||
|
|
|
||
|
|
(0, _classCallCheck3.default)(this, AppBar);
|
||
|
|
|
||
|
|
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
|
||
|
|
args[_key] = arguments[_key];
|
||
|
|
}
|
||
|
|
|
||
|
|
return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = AppBar.__proto__ || (0, _getPrototypeOf2.default)(AppBar)).call.apply(_ref, [this].concat(args))), _this), _this.handleTouchTapLeftIconButton = function (event) {
|
||
|
|
if (_this.props.onLeftIconButtonTouchTap) {
|
||
|
|
_this.props.onLeftIconButtonTouchTap(event);
|
||
|
|
}
|
||
|
|
}, _this.handleTouchTapRightIconButton = function (event) {
|
||
|
|
if (_this.props.onRightIconButtonTouchTap) {
|
||
|
|
_this.props.onRightIconButtonTouchTap(event);
|
||
|
|
}
|
||
|
|
}, _this.handleTitleTouchTap = function (event) {
|
||
|
|
if (_this.props.onTitleTouchTap) {
|
||
|
|
_this.props.onTitleTouchTap(event);
|
||
|
|
}
|
||
|
|
}, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
|
||
|
|
}
|
||
|
|
|
||
|
|
(0, _createClass3.default)(AppBar, [{
|
||
|
|
key: 'componentDidMount',
|
||
|
|
value: function componentDidMount() {
|
||
|
|
process.env.NODE_ENV !== "production" ? (0, _warning2.default)(!this.props.iconElementLeft || !this.props.iconClassNameLeft, 'Material-UI: Properties iconElementLeft\n and iconClassNameLeft cannot be simultaneously defined. Please use one or the other.') : void 0;
|
||
|
|
|
||
|
|
process.env.NODE_ENV !== "production" ? (0, _warning2.default)(!this.props.iconElementRight || !this.props.iconClassNameRight, 'Material-UI: Properties iconElementRight\n and iconClassNameRight cannot be simultaneously defined. Please use one or the other.') : void 0;
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
key: 'render',
|
||
|
|
value: function render() {
|
||
|
|
var _props = this.props,
|
||
|
|
title = _props.title,
|
||
|
|
titleStyle = _props.titleStyle,
|
||
|
|
iconStyleLeft = _props.iconStyleLeft,
|
||
|
|
iconStyleRight = _props.iconStyleRight,
|
||
|
|
onTitleTouchTap = _props.onTitleTouchTap,
|
||
|
|
showMenuIconButton = _props.showMenuIconButton,
|
||
|
|
iconElementLeft = _props.iconElementLeft,
|
||
|
|
iconElementRight = _props.iconElementRight,
|
||
|
|
iconClassNameLeft = _props.iconClassNameLeft,
|
||
|
|
iconClassNameRight = _props.iconClassNameRight,
|
||
|
|
onLeftIconButtonTouchTap = _props.onLeftIconButtonTouchTap,
|
||
|
|
onRightIconButtonTouchTap = _props.onRightIconButtonTouchTap,
|
||
|
|
className = _props.className,
|
||
|
|
style = _props.style,
|
||
|
|
zDepth = _props.zDepth,
|
||
|
|
children = _props.children,
|
||
|
|
other = (0, _objectWithoutProperties3.default)(_props, ['title', 'titleStyle', 'iconStyleLeft', 'iconStyleRight', 'onTitleTouchTap', 'showMenuIconButton', 'iconElementLeft', 'iconElementRight', 'iconClassNameLeft', 'iconClassNameRight', 'onLeftIconButtonTouchTap', 'onRightIconButtonTouchTap', 'className', 'style', 'zDepth', 'children']);
|
||
|
|
var prepareStyles = this.context.muiTheme.prepareStyles;
|
||
|
|
|
||
|
|
var styles = getStyles(this.props, this.context);
|
||
|
|
|
||
|
|
var menuElementLeft = void 0;
|
||
|
|
var menuElementRight = void 0;
|
||
|
|
|
||
|
|
// If the title is a string, wrap in an h1 tag.
|
||
|
|
// If not, wrap in a div tag.
|
||
|
|
var titleComponent = typeof title === 'string' || title instanceof String ? 'h1' : 'div';
|
||
|
|
|
||
|
|
var titleElement = _react2.default.createElement(titleComponent, {
|
||
|
|
onTouchTap: this.handleTitleTouchTap,
|
||
|
|
style: prepareStyles((0, _simpleAssign2.default)(styles.title, styles.mainElement, titleStyle))
|
||
|
|
}, title);
|
||
|
|
|
||
|
|
var iconLeftStyle = (0, _simpleAssign2.default)({}, styles.iconButtonStyle, iconStyleLeft);
|
||
|
|
|
||
|
|
if (showMenuIconButton) {
|
||
|
|
if (iconElementLeft) {
|
||
|
|
var iconElementLeftProps = {};
|
||
|
|
|
||
|
|
if (iconElementLeft.type.muiName === 'IconButton') {
|
||
|
|
var iconElemLeftChildren = iconElementLeft.props.children;
|
||
|
|
var iconButtonIconStyle = !(iconElemLeftChildren && iconElemLeftChildren.props && iconElemLeftChildren.props.color) ? styles.iconButtonIconStyle : null;
|
||
|
|
|
||
|
|
iconElementLeftProps.iconStyle = (0, _simpleAssign2.default)({}, iconButtonIconStyle, iconElementLeft.props.iconStyle);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!iconElementLeft.props.onTouchTap && this.props.onLeftIconButtonTouchTap) {
|
||
|
|
iconElementLeftProps.onTouchTap = this.handleTouchTapLeftIconButton;
|
||
|
|
}
|
||
|
|
|
||
|
|
menuElementLeft = _react2.default.createElement(
|
||
|
|
'div',
|
||
|
|
{ style: prepareStyles(iconLeftStyle) },
|
||
|
|
(0, _keys2.default)(iconElementLeftProps).length > 0 ? (0, _react.cloneElement)(iconElementLeft, iconElementLeftProps) : iconElementLeft
|
||
|
|
);
|
||
|
|
} else {
|
||
|
|
menuElementLeft = _react2.default.createElement(
|
||
|
|
_IconButton2.default,
|
||
|
|
{
|
||
|
|
style: iconLeftStyle,
|
||
|
|
iconStyle: styles.iconButtonIconStyle,
|
||
|
|
iconClassName: iconClassNameLeft,
|
||
|
|
onTouchTap: this.handleTouchTapLeftIconButton
|
||
|
|
},
|
||
|
|
iconClassNameLeft ? '' : _react2.default.createElement(_menu2.default, { style: (0, _simpleAssign2.default)({}, styles.iconButtonIconStyle) })
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
var iconRightStyle = (0, _simpleAssign2.default)({}, styles.iconButtonStyle, {
|
||
|
|
marginRight: -16,
|
||
|
|
marginLeft: 'auto'
|
||
|
|
}, iconStyleRight);
|
||
|
|
|
||
|
|
if (iconElementRight) {
|
||
|
|
var iconElementRightProps = {};
|
||
|
|
|
||
|
|
switch (iconElementRight.type.muiName) {
|
||
|
|
case 'IconMenu':
|
||
|
|
case 'IconButton':
|
||
|
|
var iconElemRightChildren = iconElementRight.props.children;
|
||
|
|
var _iconButtonIconStyle = !(iconElemRightChildren && iconElemRightChildren.props && iconElemRightChildren.props.color) ? styles.iconButtonIconStyle : null;
|
||
|
|
|
||
|
|
iconElementRightProps.iconStyle = (0, _simpleAssign2.default)({}, _iconButtonIconStyle, iconElementRight.props.iconStyle);
|
||
|
|
break;
|
||
|
|
|
||
|
|
case 'FlatButton':
|
||
|
|
iconElementRightProps.style = (0, _simpleAssign2.default)({}, styles.flatButton, iconElementRight.props.style);
|
||
|
|
break;
|
||
|
|
|
||
|
|
default:
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!iconElementRight.props.onTouchTap && this.props.onRightIconButtonTouchTap) {
|
||
|
|
iconElementRightProps.onTouchTap = this.handleTouchTapRightIconButton;
|
||
|
|
}
|
||
|
|
|
||
|
|
menuElementRight = _react2.default.createElement(
|
||
|
|
'div',
|
||
|
|
{ style: prepareStyles(iconRightStyle) },
|
||
|
|
(0, _keys2.default)(iconElementRightProps).length > 0 ? (0, _react.cloneElement)(iconElementRight, iconElementRightProps) : iconElementRight
|
||
|
|
);
|
||
|
|
} else if (iconClassNameRight) {
|
||
|
|
menuElementRight = _react2.default.createElement(_IconButton2.default, {
|
||
|
|
style: iconRightStyle,
|
||
|
|
iconStyle: styles.iconButtonIconStyle,
|
||
|
|
iconClassName: iconClassNameRight,
|
||
|
|
onTouchTap: this.handleTouchTapRightIconButton
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
return _react2.default.createElement(
|
||
|
|
_Paper2.default,
|
||
|
|
(0, _extends3.default)({}, other, {
|
||
|
|
rounded: false,
|
||
|
|
className: className,
|
||
|
|
style: (0, _simpleAssign2.default)({}, styles.root, style),
|
||
|
|
zDepth: zDepth
|
||
|
|
}),
|
||
|
|
menuElementLeft,
|
||
|
|
titleElement,
|
||
|
|
menuElementRight,
|
||
|
|
children
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}]);
|
||
|
|
return AppBar;
|
||
|
|
}(_react.Component);
|
||
|
|
|
||
|
|
AppBar.muiName = 'AppBar';
|
||
|
|
AppBar.defaultProps = {
|
||
|
|
showMenuIconButton: true,
|
||
|
|
title: '',
|
||
|
|
zDepth: 1
|
||
|
|
};
|
||
|
|
AppBar.contextTypes = {
|
||
|
|
muiTheme: _react.PropTypes.object.isRequired
|
||
|
|
};
|
||
|
|
process.env.NODE_ENV !== "production" ? AppBar.propTypes = {
|
||
|
|
/**
|
||
|
|
* Can be used to render a tab inside an app bar for instance.
|
||
|
|
*/
|
||
|
|
children: _react.PropTypes.node,
|
||
|
|
/**
|
||
|
|
* Applied to the app bar's root element.
|
||
|
|
*/
|
||
|
|
className: _react.PropTypes.string,
|
||
|
|
/**
|
||
|
|
* The classname of the icon on the left of the app bar.
|
||
|
|
* If you are using a stylesheet for your icons, enter the class name for the icon to be used here.
|
||
|
|
*/
|
||
|
|
iconClassNameLeft: _react.PropTypes.string,
|
||
|
|
/**
|
||
|
|
* Similiar to the iconClassNameLeft prop except that
|
||
|
|
* it applies to the icon displayed on the right of the app bar.
|
||
|
|
*/
|
||
|
|
iconClassNameRight: _react.PropTypes.string,
|
||
|
|
/**
|
||
|
|
* The custom element to be displayed on the left side of the
|
||
|
|
* app bar such as an SvgIcon.
|
||
|
|
*/
|
||
|
|
iconElementLeft: _react.PropTypes.element,
|
||
|
|
/**
|
||
|
|
* Similiar to the iconElementLeft prop except that this element is displayed on the right of the app bar.
|
||
|
|
*/
|
||
|
|
iconElementRight: _react.PropTypes.element,
|
||
|
|
/**
|
||
|
|
* Override the inline-styles of the element displayed on the left side of the app bar.
|
||
|
|
*/
|
||
|
|
iconStyleLeft: _react.PropTypes.object,
|
||
|
|
/**
|
||
|
|
* Override the inline-styles of the element displayed on the right side of the app bar.
|
||
|
|
*/
|
||
|
|
iconStyleRight: _react.PropTypes.object,
|
||
|
|
/**
|
||
|
|
* Callback function for when the left icon is selected via a touch tap.
|
||
|
|
*
|
||
|
|
* @param {object} event TouchTap event targeting the left `IconButton`.
|
||
|
|
*/
|
||
|
|
onLeftIconButtonTouchTap: _react.PropTypes.func,
|
||
|
|
/**
|
||
|
|
* Callback function for when the right icon is selected via a touch tap.
|
||
|
|
*
|
||
|
|
* @param {object} event TouchTap event targeting the right `IconButton`.
|
||
|
|
*/
|
||
|
|
onRightIconButtonTouchTap: _react.PropTypes.func,
|
||
|
|
/**
|
||
|
|
* Callback function for when the title text is selected via a touch tap.
|
||
|
|
*
|
||
|
|
* @param {object} event TouchTap event targeting the `title` node.
|
||
|
|
*/
|
||
|
|
onTitleTouchTap: _react.PropTypes.func,
|
||
|
|
/**
|
||
|
|
* Determines whether or not to display the Menu icon next to the title.
|
||
|
|
* Setting this prop to false will hide the icon.
|
||
|
|
*/
|
||
|
|
showMenuIconButton: _react.PropTypes.bool,
|
||
|
|
/**
|
||
|
|
* Override the inline-styles of the root element.
|
||
|
|
*/
|
||
|
|
style: _react.PropTypes.object,
|
||
|
|
/**
|
||
|
|
* The title to display on the app bar.
|
||
|
|
*/
|
||
|
|
title: _react.PropTypes.node,
|
||
|
|
/**
|
||
|
|
* Override the inline-styles of the app bar's title element.
|
||
|
|
*/
|
||
|
|
titleStyle: _react.PropTypes.object,
|
||
|
|
/**
|
||
|
|
* The zDepth of the component.
|
||
|
|
* The shadow of the app bar is also dependent on this property.
|
||
|
|
*/
|
||
|
|
zDepth: _propTypes2.default.zDepth
|
||
|
|
} : void 0;
|
||
|
|
exports.default = AppBar;
|