d2-ui
Version:
356 lines (304 loc) • 12.2 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _simpleAssign = require('simple-assign');
var _simpleAssign2 = _interopRequireDefault(_simpleAssign);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _reactDom = require('react-dom');
var _reactDom2 = _interopRequireDefault(_reactDom);
var _shallowEqual = require('recompose/shallowEqual');
var _shallowEqual2 = _interopRequireDefault(_shallowEqual);
var _Popover = require('../Popover/Popover');
var _Popover2 = _interopRequireDefault(_Popover);
var _check = require('../svg-icons/navigation/check');
var _check2 = _interopRequireDefault(_check);
var _ListItem = require('../List/ListItem');
var _ListItem2 = _interopRequireDefault(_ListItem);
var _Menu = require('../Menu/Menu');
var _Menu2 = _interopRequireDefault(_Menu);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var nestedMenuStyle = {
position: 'relative'
};
function getStyles(props, context) {
var disabledColor = context.muiTheme.baseTheme.palette.disabledColor;
var textColor = context.muiTheme.baseTheme.palette.textColor;
var leftIndent = props.desktop ? 64 : 72;
var sidePadding = props.desktop ? 24 : 16;
var styles = {
root: {
color: props.disabled ? disabledColor : textColor,
lineHeight: props.desktop ? '32px' : '48px',
fontSize: props.desktop ? 15 : 16,
whiteSpace: 'nowrap'
},
innerDivStyle: {
paddingLeft: props.leftIcon || props.insetChildren || props.checked ? leftIndent : sidePadding,
paddingRight: sidePadding,
paddingBottom: 0,
paddingTop: 0
},
secondaryText: {
float: 'right'
},
leftIconDesktop: {
margin: 0,
left: 24,
top: 4
},
rightIconDesktop: {
margin: 0,
right: 24,
top: 4,
fill: context.muiTheme.menuItem.rightIconDesktopFill
}
};
return styles;
}
var MenuItem = function (_Component) {
_inherits(MenuItem, _Component);
function MenuItem() {
var _Object$getPrototypeO;
var _temp, _this, _ret;
_classCallCheck(this, MenuItem);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(MenuItem)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
open: false
}, _this.cloneMenuItem = function (item) {
return _react2.default.cloneElement(item, {
onTouchTap: function onTouchTap(event) {
if (!item.props.menuItems) {
_this.handleRequestClose();
}
if (item.props.onTouchTap) {
item.props.onTouchTap(event);
}
},
onRequestClose: _this.handleRequestClose
});
}, _this.handleTouchTap = function (event) {
event.preventDefault();
_this.setState({
open: true,
anchorEl: _reactDom2.default.findDOMNode(_this)
});
if (_this.props.onTouchTap) {
_this.props.onTouchTap(event);
}
}, _this.handleRequestClose = function () {
_this.setState({
open: false,
anchorEl: null
});
}, _temp), _possibleConstructorReturn(_this, _ret);
}
_createClass(MenuItem, [{
key: 'componentDidMount',
value: function componentDidMount() {
this.applyFocusState();
}
}, {
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps) {
if (this.state.open && nextProps.focusState === 'none') {
this.handleRequestClose();
}
}
}, {
key: 'shouldComponentUpdate',
value: function shouldComponentUpdate(nextProps, nextState) {
return !(0, _shallowEqual2.default)(this.props, nextProps) || !(0, _shallowEqual2.default)(this.state, nextState);
}
}, {
key: 'componentDidUpdate',
value: function componentDidUpdate() {
this.applyFocusState();
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
if (this.state.open) {
this.setState({
open: false
});
}
}
}, {
key: 'applyFocusState',
value: function applyFocusState() {
this.refs.listItem.applyFocusState(this.props.focusState);
}
}, {
key: 'render',
value: function render() {
var _props = this.props;
var checked = _props.checked;
var children = _props.children;
var desktop = _props.desktop;
var disabled = _props.disabled;
var focusState = _props.focusState;
var // eslint-disable-line no-unused-vars
innerDivStyle = _props.innerDivStyle;
var insetChildren = _props.insetChildren;
var leftIcon = _props.leftIcon;
var menuItems = _props.menuItems;
var rightIcon = _props.rightIcon;
var secondaryText = _props.secondaryText;
var style = _props.style;
var value = _props.value;
var other = _objectWithoutProperties(_props, ['checked', 'children', 'desktop', 'disabled', 'focusState', 'innerDivStyle', 'insetChildren', 'leftIcon', 'menuItems', 'rightIcon', 'secondaryText', 'style', 'value']);
var prepareStyles = this.context.muiTheme.prepareStyles;
var styles = getStyles(this.props, this.context);
var mergedRootStyles = (0, _simpleAssign2.default)(styles.root, style);
var mergedInnerDivStyles = (0, _simpleAssign2.default)(styles.innerDivStyle, innerDivStyle);
// Left Icon
var leftIconElement = leftIcon ? leftIcon : checked ? _react2.default.createElement(_check2.default, null) : null;
if (leftIconElement && desktop) {
var mergedLeftIconStyles = (0, _simpleAssign2.default)(styles.leftIconDesktop, leftIconElement.props.style);
leftIconElement = _react2.default.cloneElement(leftIconElement, { style: mergedLeftIconStyles });
}
// Right Icon
var rightIconElement = void 0;
if (rightIcon) {
var mergedRightIconStyles = desktop ? (0, _simpleAssign2.default)(styles.rightIconDesktop, rightIcon.props.style) : rightIcon.props.style;
rightIconElement = _react2.default.cloneElement(rightIcon, { style: mergedRightIconStyles });
}
// Secondary Text
var secondaryTextElement = void 0;
if (secondaryText) {
var secondaryTextIsAnElement = _react2.default.isValidElement(secondaryText);
var mergedSecondaryTextStyles = secondaryTextIsAnElement ? (0, _simpleAssign2.default)(styles.secondaryText, secondaryText.props.style) : null;
secondaryTextElement = secondaryTextIsAnElement ? _react2.default.cloneElement(secondaryText, { style: mergedSecondaryTextStyles }) : _react2.default.createElement(
'div',
{ style: prepareStyles(styles.secondaryText) },
secondaryText
);
}
var childMenuPopover = void 0;
if (menuItems) {
childMenuPopover = _react2.default.createElement(
_Popover2.default,
{
anchorOrigin: { horizontal: 'right', vertical: 'top' },
anchorEl: this.state.anchorEl,
open: this.state.open,
useLayerForClickAway: false,
onRequestClose: this.handleRequestClose
},
_react2.default.createElement(
_Menu2.default,
{ desktop: desktop, disabled: disabled, style: nestedMenuStyle },
_react2.default.Children.map(menuItems, this.cloneMenuItem)
)
);
other.onTouchTap = this.handleTouchTap;
}
return _react2.default.createElement(
_ListItem2.default,
_extends({}, other, {
disabled: disabled,
innerDivStyle: mergedInnerDivStyles,
insetChildren: insetChildren,
leftIcon: leftIconElement,
ref: 'listItem',
rightIcon: rightIconElement,
style: mergedRootStyles
}),
children,
secondaryTextElement,
childMenuPopover
);
}
}]);
return MenuItem;
}(_react.Component);
MenuItem.muiName = 'MenuItem';
MenuItem.propTypes = {
/**
* If true, a left check mark will be rendered.
*/
checked: _react.PropTypes.bool,
/**
* Elements passed as children to the underlying `ListItem`.
*/
children: _react.PropTypes.node,
/**
* @ignore
* If true, the menu item will render with compact desktop
* styles.
*/
desktop: _react.PropTypes.bool,
/**
* If true, the menu item will be disabled.
*/
disabled: _react.PropTypes.bool,
/**
* The focus state of the menu item. This prop is used to set the focus
* state of the underlying `ListItem`.
*/
focusState: _react.PropTypes.oneOf(['none', 'focused', 'keyboard-focused']),
/**
* Override the inline-styles of the inner div.
*/
innerDivStyle: _react.PropTypes.object,
/**
* If true, the children will be indented.
* This is only needed when there is no `leftIcon`.
*/
insetChildren: _react.PropTypes.bool,
/**
* The `SvgIcon` or `FontIcon` to be displayed on the left side.
*/
leftIcon: _react.PropTypes.element,
/**
* `MenuItem` elements to nest within the menu item.
*/
menuItems: _react.PropTypes.node,
/**
* Callback function fired when the menu item is touch-tapped.
*
* @param {object} event TouchTap event targeting the menu item.
*/
onTouchTap: _react.PropTypes.func,
/**
* Can be used to render primary text within the menu item.
*/
primaryText: _react.PropTypes.node,
/**
* The `SvgIcon` or `FontIcon` to be displayed on the right side.
*/
rightIcon: _react.PropTypes.element,
/**
* Can be used to render secondary text within the menu item.
*/
secondaryText: _react.PropTypes.node,
/**
* Override the inline-styles of the root element.
*/
style: _react.PropTypes.object,
/**
* The value of the menu item.
*/
value: _react.PropTypes.any
};
MenuItem.defaultProps = {
checked: false,
desktop: false,
disabled: false,
focusState: 'none',
insetChildren: false
};
MenuItem.contextTypes = {
muiTheme: _react.PropTypes.object.isRequired
};
exports.default = MenuItem;