415 lines
13 KiB
JavaScript
415 lines
13 KiB
JavaScript
|
'use strict';
|
||
|
|
|
||
|
|
Object.defineProperty(exports, "__esModule", {
|
||
|
|
value: true
|
||
|
|
});
|
||
|
|
|
||
|
|
var _extends2 = require('babel-runtime/helpers/extends');
|
||
|
|
|
||
|
|
var _extends3 = _interopRequireDefault(_extends2);
|
||
|
|
|
||
|
|
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);
|
||
|
|
|
||
|
|
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 _events = require('../utils/events');
|
||
|
|
|
||
|
|
var _events2 = _interopRequireDefault(_events);
|
||
|
|
|
||
|
|
var _propTypes = require('../utils/propTypes');
|
||
|
|
|
||
|
|
var _propTypes2 = _interopRequireDefault(_propTypes);
|
||
|
|
|
||
|
|
var _Menu = require('../Menu/Menu');
|
||
|
|
|
||
|
|
var _Menu2 = _interopRequireDefault(_Menu);
|
||
|
|
|
||
|
|
var _Popover = require('../Popover/Popover');
|
||
|
|
|
||
|
|
var _Popover2 = _interopRequireDefault(_Popover);
|
||
|
|
|
||
|
|
var _warning = require('warning');
|
||
|
|
|
||
|
|
var _warning2 = _interopRequireDefault(_warning);
|
||
|
|
|
||
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||
|
|
|
||
|
|
var IconMenu = function (_Component) {
|
||
|
|
(0, _inherits3.default)(IconMenu, _Component);
|
||
|
|
|
||
|
|
function IconMenu() {
|
||
|
|
var _ref;
|
||
|
|
|
||
|
|
var _temp, _this, _ret;
|
||
|
|
|
||
|
|
(0, _classCallCheck3.default)(this, IconMenu);
|
||
|
|
|
||
|
|
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 = IconMenu.__proto__ || (0, _getPrototypeOf2.default)(IconMenu)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
|
||
|
|
menuInitiallyKeyboardFocused: false,
|
||
|
|
open: false
|
||
|
|
}, _this.handleItemTouchTap = function (event, child) {
|
||
|
|
if (_this.props.touchTapCloseDelay !== 0 && !child.props.hasOwnProperty('menuItems')) {
|
||
|
|
(function () {
|
||
|
|
var isKeyboard = _events2.default.isKeyboard(event);
|
||
|
|
_this.timerCloseId = setTimeout(function () {
|
||
|
|
_this.close(isKeyboard ? 'enter' : 'itemTap', isKeyboard);
|
||
|
|
}, _this.props.touchTapCloseDelay);
|
||
|
|
})();
|
||
|
|
}
|
||
|
|
|
||
|
|
_this.props.onItemTouchTap(event, child);
|
||
|
|
}, _this.handleRequestClose = function (reason) {
|
||
|
|
_this.close(reason);
|
||
|
|
}, _this.handleEscKeyDownMenu = function (event) {
|
||
|
|
_this.close('escape', event);
|
||
|
|
}, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
|
||
|
|
}
|
||
|
|
|
||
|
|
(0, _createClass3.default)(IconMenu, [{
|
||
|
|
key: 'componentWillReceiveProps',
|
||
|
|
value: function componentWillReceiveProps(nextProps) {
|
||
|
|
if (nextProps.open != null) {
|
||
|
|
this.setState({
|
||
|
|
open: nextProps.open,
|
||
|
|
anchorEl: this.refs.iconMenuContainer
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
key: 'componentWillUnmount',
|
||
|
|
value: function componentWillUnmount() {
|
||
|
|
clearTimeout(this.timerCloseId);
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
key: 'isOpen',
|
||
|
|
value: function isOpen() {
|
||
|
|
return this.state.open;
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
key: 'close',
|
||
|
|
value: function close(reason, isKeyboard) {
|
||
|
|
var _this2 = this;
|
||
|
|
|
||
|
|
if (!this.state.open) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (this.props.open !== null) {
|
||
|
|
this.props.onRequestChange(false, reason);
|
||
|
|
} else {
|
||
|
|
this.setState({ open: false }, function () {
|
||
|
|
// Set focus on the icon button when the menu close
|
||
|
|
if (isKeyboard) {
|
||
|
|
var iconButton = _this2.refs.iconButton;
|
||
|
|
_reactDom2.default.findDOMNode(iconButton).focus();
|
||
|
|
iconButton.setKeyboardFocus();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
key: 'open',
|
||
|
|
value: function open(reason, event) {
|
||
|
|
if (this.props.open !== null) {
|
||
|
|
this.props.onRequestChange(true, reason);
|
||
|
|
|
||
|
|
return this.setState({
|
||
|
|
menuInitiallyKeyboardFocused: _events2.default.isKeyboard(event),
|
||
|
|
anchorEl: event.currentTarget
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
this.setState({
|
||
|
|
open: true,
|
||
|
|
menuInitiallyKeyboardFocused: _events2.default.isKeyboard(event),
|
||
|
|
anchorEl: event.currentTarget
|
||
|
|
});
|
||
|
|
|
||
|
|
event.preventDefault();
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
key: 'render',
|
||
|
|
value: function render() {
|
||
|
|
var _this3 = this;
|
||
|
|
|
||
|
|
var _props = this.props,
|
||
|
|
anchorOrigin = _props.anchorOrigin,
|
||
|
|
className = _props.className,
|
||
|
|
animated = _props.animated,
|
||
|
|
animation = _props.animation,
|
||
|
|
iconButtonElement = _props.iconButtonElement,
|
||
|
|
iconStyle = _props.iconStyle,
|
||
|
|
onItemTouchTap = _props.onItemTouchTap,
|
||
|
|
onKeyboardFocus = _props.onKeyboardFocus,
|
||
|
|
onMouseDown = _props.onMouseDown,
|
||
|
|
onMouseLeave = _props.onMouseLeave,
|
||
|
|
onMouseEnter = _props.onMouseEnter,
|
||
|
|
onMouseUp = _props.onMouseUp,
|
||
|
|
onRequestChange = _props.onRequestChange,
|
||
|
|
onTouchTap = _props.onTouchTap,
|
||
|
|
listStyle = _props.listStyle,
|
||
|
|
menuStyle = _props.menuStyle,
|
||
|
|
style = _props.style,
|
||
|
|
targetOrigin = _props.targetOrigin,
|
||
|
|
touchTapCloseDelay = _props.touchTapCloseDelay,
|
||
|
|
useLayerForClickAway = _props.useLayerForClickAway,
|
||
|
|
other = (0, _objectWithoutProperties3.default)(_props, ['anchorOrigin', 'className', 'animated', 'animation', 'iconButtonElement', 'iconStyle', 'onItemTouchTap', 'onKeyboardFocus', 'onMouseDown', 'onMouseLeave', 'onMouseEnter', 'onMouseUp', 'onRequestChange', 'onTouchTap', 'listStyle', 'menuStyle', 'style', 'targetOrigin', 'touchTapCloseDelay', 'useLayerForClickAway']);
|
||
|
|
var prepareStyles = this.context.muiTheme.prepareStyles;
|
||
|
|
var _state = this.state,
|
||
|
|
open = _state.open,
|
||
|
|
anchorEl = _state.anchorEl;
|
||
|
|
|
||
|
|
|
||
|
|
var styles = {
|
||
|
|
root: {
|
||
|
|
display: 'inline-block',
|
||
|
|
position: 'relative'
|
||
|
|
},
|
||
|
|
menu: {
|
||
|
|
position: 'relative'
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
var mergedRootStyles = (0, _simpleAssign2.default)(styles.root, style);
|
||
|
|
var mergedMenuStyles = (0, _simpleAssign2.default)(styles.menu, menuStyle);
|
||
|
|
|
||
|
|
process.env.NODE_ENV !== "production" ? (0, _warning2.default)(iconButtonElement.type.muiName !== 'SvgIcon', 'Material-UI: You shoud not provide an <SvgIcon /> to the \'iconButtonElement\' property of <IconMenu />.\nYou should wrapped it with an <IconButton />.') : void 0;
|
||
|
|
|
||
|
|
var iconButtonProps = {
|
||
|
|
onKeyboardFocus: onKeyboardFocus,
|
||
|
|
onTouchTap: function onTouchTap(event) {
|
||
|
|
_this3.open(_events2.default.isKeyboard(event) ? 'keyboard' : 'iconTap', event);
|
||
|
|
if (iconButtonElement.props.onTouchTap) {
|
||
|
|
iconButtonElement.props.onTouchTap(event);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
ref: 'iconButton'
|
||
|
|
};
|
||
|
|
if (iconStyle || iconButtonElement.props.iconStyle) {
|
||
|
|
iconButtonProps.iconStyle = iconStyle ? (0, _simpleAssign2.default)({}, iconStyle, iconButtonElement.props.iconStyle) : iconButtonElement.props.iconStyle;
|
||
|
|
}
|
||
|
|
var iconButton = _react2.default.cloneElement(iconButtonElement, iconButtonProps);
|
||
|
|
|
||
|
|
var menu = _react2.default.createElement(
|
||
|
|
_Menu2.default,
|
||
|
|
(0, _extends3.default)({}, other, {
|
||
|
|
initiallyKeyboardFocused: this.state.menuInitiallyKeyboardFocused,
|
||
|
|
onEscKeyDown: this.handleEscKeyDownMenu,
|
||
|
|
onItemTouchTap: this.handleItemTouchTap,
|
||
|
|
style: mergedMenuStyles,
|
||
|
|
listStyle: listStyle
|
||
|
|
}),
|
||
|
|
this.props.children
|
||
|
|
);
|
||
|
|
|
||
|
|
return _react2.default.createElement(
|
||
|
|
'div',
|
||
|
|
{
|
||
|
|
ref: 'iconMenuContainer',
|
||
|
|
className: className,
|
||
|
|
onMouseDown: onMouseDown,
|
||
|
|
onMouseLeave: onMouseLeave,
|
||
|
|
onMouseEnter: onMouseEnter,
|
||
|
|
onMouseUp: onMouseUp,
|
||
|
|
onTouchTap: onTouchTap,
|
||
|
|
style: prepareStyles(mergedRootStyles)
|
||
|
|
},
|
||
|
|
iconButton,
|
||
|
|
_react2.default.createElement(
|
||
|
|
_Popover2.default,
|
||
|
|
{
|
||
|
|
anchorOrigin: anchorOrigin,
|
||
|
|
targetOrigin: targetOrigin,
|
||
|
|
open: open,
|
||
|
|
anchorEl: anchorEl,
|
||
|
|
childContextTypes: this.constructor.childContextTypes,
|
||
|
|
useLayerForClickAway: useLayerForClickAway,
|
||
|
|
onRequestClose: this.handleRequestClose,
|
||
|
|
animated: animated,
|
||
|
|
animation: animation,
|
||
|
|
context: this.context
|
||
|
|
},
|
||
|
|
menu
|
||
|
|
)
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}]);
|
||
|
|
return IconMenu;
|
||
|
|
}(_react.Component);
|
||
|
|
|
||
|
|
IconMenu.muiName = 'IconMenu';
|
||
|
|
IconMenu.defaultProps = {
|
||
|
|
anchorOrigin: {
|
||
|
|
vertical: 'top',
|
||
|
|
horizontal: 'left'
|
||
|
|
},
|
||
|
|
animated: true,
|
||
|
|
multiple: false,
|
||
|
|
open: null,
|
||
|
|
onItemTouchTap: function onItemTouchTap() {},
|
||
|
|
onKeyboardFocus: function onKeyboardFocus() {},
|
||
|
|
onMouseDown: function onMouseDown() {},
|
||
|
|
onMouseLeave: function onMouseLeave() {},
|
||
|
|
onMouseEnter: function onMouseEnter() {},
|
||
|
|
onMouseUp: function onMouseUp() {},
|
||
|
|
onRequestChange: function onRequestChange() {},
|
||
|
|
onTouchTap: function onTouchTap() {},
|
||
|
|
targetOrigin: {
|
||
|
|
vertical: 'top',
|
||
|
|
horizontal: 'left'
|
||
|
|
},
|
||
|
|
touchTapCloseDelay: 200,
|
||
|
|
useLayerForClickAway: false
|
||
|
|
};
|
||
|
|
IconMenu.contextTypes = {
|
||
|
|
muiTheme: _react.PropTypes.object.isRequired
|
||
|
|
};
|
||
|
|
process.env.NODE_ENV !== "production" ? IconMenu.propTypes = {
|
||
|
|
/**
|
||
|
|
* This is the point on the icon where the menu
|
||
|
|
* `targetOrigin` will attach.
|
||
|
|
* Options:
|
||
|
|
* vertical: [top, center, bottom]
|
||
|
|
* horizontal: [left, middle, right].
|
||
|
|
*/
|
||
|
|
anchorOrigin: _propTypes2.default.origin,
|
||
|
|
/**
|
||
|
|
* If true, the popover will apply transitions when
|
||
|
|
* it gets added to the DOM.
|
||
|
|
*/
|
||
|
|
animated: _react.PropTypes.bool,
|
||
|
|
/**
|
||
|
|
* Override the default animation component used.
|
||
|
|
*/
|
||
|
|
animation: _react.PropTypes.func,
|
||
|
|
/**
|
||
|
|
* Should be used to pass `MenuItem` components.
|
||
|
|
*/
|
||
|
|
children: _react.PropTypes.node,
|
||
|
|
/**
|
||
|
|
* The CSS class name of the root element.
|
||
|
|
*/
|
||
|
|
className: _react.PropTypes.string,
|
||
|
|
/**
|
||
|
|
* This is the `IconButton` to render. This button will open the menu.
|
||
|
|
*/
|
||
|
|
iconButtonElement: _react.PropTypes.element.isRequired,
|
||
|
|
/**
|
||
|
|
* Override the inline-styles of the underlying icon element.
|
||
|
|
*/
|
||
|
|
iconStyle: _react.PropTypes.object,
|
||
|
|
/**
|
||
|
|
* Override the inline-styles of the underlying `List` element.
|
||
|
|
*/
|
||
|
|
listStyle: _react.PropTypes.object,
|
||
|
|
/**
|
||
|
|
* Override the inline-styles of the menu element.
|
||
|
|
*/
|
||
|
|
menuStyle: _react.PropTypes.object,
|
||
|
|
/**
|
||
|
|
* If true, the value can an be array and allow the menu to be a multi-select.
|
||
|
|
*/
|
||
|
|
multiple: _react.PropTypes.bool,
|
||
|
|
/**
|
||
|
|
* Callback function fired when a menu item is selected with a touch-tap.
|
||
|
|
*
|
||
|
|
* @param {object} event TouchTap event targeting the selected menu item element.
|
||
|
|
* @param {object} child The selected element.
|
||
|
|
*/
|
||
|
|
onItemTouchTap: _react.PropTypes.func,
|
||
|
|
/**
|
||
|
|
* Callback function fired when the `IconButton` element is focused or blurred by the keyboard.
|
||
|
|
*
|
||
|
|
* @param {object} event `focus` or `blur` event targeting the `IconButton` element.
|
||
|
|
* @param {boolean} keyboardFocused If true, the `IconButton` element is focused.
|
||
|
|
*/
|
||
|
|
onKeyboardFocus: _react.PropTypes.func,
|
||
|
|
/** @ignore */
|
||
|
|
onMouseDown: _react.PropTypes.func,
|
||
|
|
/** @ignore */
|
||
|
|
onMouseEnter: _react.PropTypes.func,
|
||
|
|
/** @ignore */
|
||
|
|
onMouseLeave: _react.PropTypes.func,
|
||
|
|
/** @ignore */
|
||
|
|
onMouseUp: _react.PropTypes.func,
|
||
|
|
/**
|
||
|
|
* Callback function fired when the `open` state of the menu is requested to be changed.
|
||
|
|
*
|
||
|
|
* @param {boolean} open If true, the menu was requested to be opened.
|
||
|
|
* @param {string} reason The reason for the open or close request. Possible values are
|
||
|
|
* 'keyboard' and 'iconTap' for open requests; 'enter', 'escape', 'itemTap', and 'clickAway'
|
||
|
|
* for close requests.
|
||
|
|
*/
|
||
|
|
onRequestChange: _react.PropTypes.func,
|
||
|
|
/**
|
||
|
|
* Callback function fired when the `IconButton` element is touch-tapped.
|
||
|
|
*
|
||
|
|
* @param {object} event TouchTap event targeting the `IconButton` element.
|
||
|
|
*/
|
||
|
|
onTouchTap: _react.PropTypes.func,
|
||
|
|
/**
|
||
|
|
* If true, the `IconMenu` is opened.
|
||
|
|
*/
|
||
|
|
open: _react.PropTypes.bool,
|
||
|
|
/**
|
||
|
|
* Override the inline-styles of the root element.
|
||
|
|
*/
|
||
|
|
style: _react.PropTypes.object,
|
||
|
|
/**
|
||
|
|
* This is the point on the menu which will stick to the menu
|
||
|
|
* origin.
|
||
|
|
* Options:
|
||
|
|
* vertical: [top, center, bottom]
|
||
|
|
* horizontal: [left, middle, right].
|
||
|
|
*/
|
||
|
|
targetOrigin: _propTypes2.default.origin,
|
||
|
|
/**
|
||
|
|
* Sets the delay in milliseconds before closing the
|
||
|
|
* menu when an item is clicked.
|
||
|
|
* If set to 0 then the auto close functionality
|
||
|
|
* will be disabled.
|
||
|
|
*/
|
||
|
|
touchTapCloseDelay: _react.PropTypes.number,
|
||
|
|
/**
|
||
|
|
* If true, the popover will render on top of an invisible
|
||
|
|
* layer, which will prevent clicks to the underlying elements.
|
||
|
|
*/
|
||
|
|
useLayerForClickAway: _react.PropTypes.bool
|
||
|
|
} : void 0;
|
||
|
|
exports.default = IconMenu;
|