374 lines
12 KiB
JavaScript
374 lines
12 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 _transitions = require('../styles/transitions');
|
|
|
|
var _transitions2 = _interopRequireDefault(_transitions);
|
|
|
|
var _propTypes = require('../utils/propTypes');
|
|
|
|
var _propTypes2 = _interopRequireDefault(_propTypes);
|
|
|
|
var _EnhancedButton = require('../internal/EnhancedButton');
|
|
|
|
var _EnhancedButton2 = _interopRequireDefault(_EnhancedButton);
|
|
|
|
var _FontIcon = require('../FontIcon');
|
|
|
|
var _FontIcon2 = _interopRequireDefault(_FontIcon);
|
|
|
|
var _Tooltip = require('../internal/Tooltip');
|
|
|
|
var _Tooltip2 = _interopRequireDefault(_Tooltip);
|
|
|
|
var _childUtils = require('../utils/childUtils');
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
|
|
function getStyles(props, context) {
|
|
var baseTheme = context.muiTheme.baseTheme;
|
|
|
|
|
|
return {
|
|
root: {
|
|
boxSizing: 'border-box',
|
|
overflow: 'visible',
|
|
transition: _transitions2.default.easeOut(),
|
|
padding: baseTheme.spacing.iconSize / 2,
|
|
width: baseTheme.spacing.iconSize * 2,
|
|
height: baseTheme.spacing.iconSize * 2,
|
|
fontSize: 0
|
|
},
|
|
tooltip: {
|
|
boxSizing: 'border-box'
|
|
},
|
|
disabled: {
|
|
color: baseTheme.palette.disabledColor,
|
|
fill: baseTheme.palette.disabledColor,
|
|
cursor: 'not-allowed'
|
|
}
|
|
};
|
|
}
|
|
|
|
var IconButton = function (_Component) {
|
|
(0, _inherits3.default)(IconButton, _Component);
|
|
|
|
function IconButton() {
|
|
var _ref;
|
|
|
|
var _temp, _this, _ret;
|
|
|
|
(0, _classCallCheck3.default)(this, IconButton);
|
|
|
|
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 = IconButton.__proto__ || (0, _getPrototypeOf2.default)(IconButton)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
|
|
hovered: false,
|
|
isKeyboardFocused: false,
|
|
// Not to be confonded with the touch property.
|
|
// This state is to determined if it's a mobile device.
|
|
touch: false,
|
|
tooltipShown: false
|
|
}, _this.handleBlur = function (event) {
|
|
_this.hideTooltip();
|
|
if (_this.props.onBlur) {
|
|
_this.props.onBlur(event);
|
|
}
|
|
}, _this.handleFocus = function (event) {
|
|
_this.showTooltip();
|
|
if (_this.props.onFocus) {
|
|
_this.props.onFocus(event);
|
|
}
|
|
}, _this.handleMouseLeave = function (event) {
|
|
if (!_this.button.isKeyboardFocused()) {
|
|
_this.hideTooltip();
|
|
}
|
|
_this.setState({ hovered: false });
|
|
if (_this.props.onMouseLeave) {
|
|
_this.props.onMouseLeave(event);
|
|
}
|
|
}, _this.handleMouseOut = function (event) {
|
|
if (_this.props.disabled) _this.hideTooltip();
|
|
if (_this.props.onMouseOut) _this.props.onMouseOut(event);
|
|
}, _this.handleMouseEnter = function (event) {
|
|
_this.showTooltip();
|
|
|
|
// Cancel hover styles for touch devices
|
|
if (!_this.state.touch) {
|
|
_this.setState({ hovered: true });
|
|
}
|
|
if (_this.props.onMouseEnter) {
|
|
_this.props.onMouseEnter(event);
|
|
}
|
|
}, _this.handleTouchStart = function (event) {
|
|
_this.setState({ touch: true });
|
|
|
|
if (_this.props.onTouchStart) {
|
|
_this.props.onTouchStart(event);
|
|
}
|
|
}, _this.handleKeyboardFocus = function (event, isKeyboardFocused) {
|
|
var _this$props = _this.props,
|
|
disabled = _this$props.disabled,
|
|
onFocus = _this$props.onFocus,
|
|
onBlur = _this$props.onBlur,
|
|
onKeyboardFocus = _this$props.onKeyboardFocus;
|
|
|
|
if (isKeyboardFocused && !disabled) {
|
|
_this.showTooltip();
|
|
if (onFocus) {
|
|
onFocus(event);
|
|
}
|
|
} else {
|
|
_this.hideTooltip();
|
|
if (onBlur) {
|
|
onBlur(event);
|
|
}
|
|
}
|
|
|
|
_this.setState({ isKeyboardFocused: isKeyboardFocused });
|
|
if (onKeyboardFocus) {
|
|
onKeyboardFocus(event, isKeyboardFocused);
|
|
}
|
|
}, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
|
|
}
|
|
|
|
(0, _createClass3.default)(IconButton, [{
|
|
key: 'componentWillReceiveProps',
|
|
value: function componentWillReceiveProps(nextProps) {
|
|
if (nextProps.disabled) {
|
|
this.setState({ hovered: false });
|
|
}
|
|
}
|
|
}, {
|
|
key: 'setKeyboardFocus',
|
|
value: function setKeyboardFocus() {
|
|
this.button.setKeyboardFocus();
|
|
}
|
|
}, {
|
|
key: 'showTooltip',
|
|
value: function showTooltip() {
|
|
if (this.props.tooltip) {
|
|
this.setState({ tooltipShown: true });
|
|
}
|
|
}
|
|
}, {
|
|
key: 'hideTooltip',
|
|
value: function hideTooltip() {
|
|
if (this.props.tooltip) this.setState({ tooltipShown: false });
|
|
}
|
|
}, {
|
|
key: 'render',
|
|
value: function render() {
|
|
var _this2 = this;
|
|
|
|
var _props = this.props,
|
|
disabled = _props.disabled,
|
|
hoveredStyle = _props.hoveredStyle,
|
|
disableTouchRipple = _props.disableTouchRipple,
|
|
children = _props.children,
|
|
iconClassName = _props.iconClassName,
|
|
style = _props.style,
|
|
tooltip = _props.tooltip,
|
|
tooltipPositionProp = _props.tooltipPosition,
|
|
tooltipStyles = _props.tooltipStyles,
|
|
touch = _props.touch,
|
|
iconStyle = _props.iconStyle,
|
|
other = (0, _objectWithoutProperties3.default)(_props, ['disabled', 'hoveredStyle', 'disableTouchRipple', 'children', 'iconClassName', 'style', 'tooltip', 'tooltipPosition', 'tooltipStyles', 'touch', 'iconStyle']);
|
|
|
|
var fonticon = void 0;
|
|
|
|
var styles = getStyles(this.props, this.context);
|
|
var tooltipPosition = tooltipPositionProp.split('-');
|
|
|
|
var hovered = (this.state.hovered || this.state.isKeyboardFocused) && !disabled;
|
|
|
|
var mergedRootStyles = (0, _simpleAssign2.default)(styles.root, style, hovered ? hoveredStyle : {});
|
|
|
|
var tooltipElement = tooltip ? _react2.default.createElement(_Tooltip2.default, {
|
|
label: tooltip,
|
|
show: this.state.tooltipShown,
|
|
touch: touch,
|
|
style: (0, _simpleAssign2.default)(styles.tooltip, tooltipStyles),
|
|
verticalPosition: tooltipPosition[0],
|
|
horizontalPosition: tooltipPosition[1]
|
|
}) : null;
|
|
|
|
if (iconClassName) {
|
|
var iconHoverColor = iconStyle.iconHoverColor,
|
|
iconStyleFontIcon = (0, _objectWithoutProperties3.default)(iconStyle, ['iconHoverColor']);
|
|
|
|
|
|
fonticon = _react2.default.createElement(
|
|
_FontIcon2.default,
|
|
{
|
|
className: iconClassName,
|
|
hoverColor: disabled ? null : iconHoverColor,
|
|
style: (0, _simpleAssign2.default)({}, disabled && styles.disabled, iconStyleFontIcon),
|
|
color: this.context.muiTheme.baseTheme.palette.textColor
|
|
},
|
|
children
|
|
);
|
|
}
|
|
|
|
var childrenStyle = disabled ? (0, _simpleAssign2.default)({}, iconStyle, styles.disabled) : iconStyle;
|
|
|
|
return _react2.default.createElement(
|
|
_EnhancedButton2.default,
|
|
(0, _extends3.default)({
|
|
ref: function ref(_ref2) {
|
|
return _this2.button = _ref2;
|
|
}
|
|
}, other, {
|
|
centerRipple: true,
|
|
disabled: disabled,
|
|
onTouchStart: this.handleTouchStart,
|
|
style: mergedRootStyles,
|
|
disableTouchRipple: disableTouchRipple,
|
|
onBlur: this.handleBlur,
|
|
onFocus: this.handleFocus,
|
|
onMouseLeave: this.handleMouseLeave,
|
|
onMouseEnter: this.handleMouseEnter,
|
|
onMouseOut: this.handleMouseOut,
|
|
onKeyboardFocus: this.handleKeyboardFocus
|
|
}),
|
|
tooltipElement,
|
|
fonticon,
|
|
(0, _childUtils.extendChildren)(children, {
|
|
style: childrenStyle
|
|
})
|
|
);
|
|
}
|
|
}]);
|
|
return IconButton;
|
|
}(_react.Component);
|
|
|
|
IconButton.muiName = 'IconButton';
|
|
IconButton.defaultProps = {
|
|
disabled: false,
|
|
disableTouchRipple: false,
|
|
iconStyle: {},
|
|
tooltipPosition: 'bottom-center',
|
|
touch: false
|
|
};
|
|
IconButton.contextTypes = {
|
|
muiTheme: _react.PropTypes.object.isRequired
|
|
};
|
|
process.env.NODE_ENV !== "production" ? IconButton.propTypes = {
|
|
/**
|
|
* Can be used to pass a `FontIcon` element as the icon for the button.
|
|
*/
|
|
children: _react.PropTypes.node,
|
|
/**
|
|
* The CSS class name of the root element.
|
|
*/
|
|
className: _react.PropTypes.string,
|
|
/**
|
|
* If true, the element's ripple effect will be disabled.
|
|
*/
|
|
disableTouchRipple: _react.PropTypes.bool,
|
|
/**
|
|
* If true, the element will be disabled.
|
|
*/
|
|
disabled: _react.PropTypes.bool,
|
|
/**
|
|
* Override the inline-styles of the root element when the component is hovered.
|
|
*/
|
|
hoveredStyle: _react.PropTypes.object,
|
|
/**
|
|
* The URL to link to when the button is clicked.
|
|
*/
|
|
href: _react.PropTypes.string,
|
|
/**
|
|
* The CSS class name of the icon. Used for setting the icon with a stylesheet.
|
|
*/
|
|
iconClassName: _react.PropTypes.string,
|
|
/**
|
|
* Override the inline-styles of the icon element.
|
|
* Note: you can specify iconHoverColor as a String inside this object.
|
|
*/
|
|
iconStyle: _react.PropTypes.object,
|
|
/** @ignore */
|
|
onBlur: _react.PropTypes.func,
|
|
/** @ignore */
|
|
onFocus: _react.PropTypes.func,
|
|
/**
|
|
* Callback function fired when the element is focused or blurred by the keyboard.
|
|
*
|
|
* @param {object} event `focus` or `blur` event targeting the element.
|
|
* @param {boolean} keyboardFocused Indicates whether the element is focused.
|
|
*/
|
|
onKeyboardFocus: _react.PropTypes.func,
|
|
/** @ignore */
|
|
onMouseEnter: _react.PropTypes.func,
|
|
/** @ignore */
|
|
onMouseLeave: _react.PropTypes.func,
|
|
/** @ignore */
|
|
onMouseOut: _react.PropTypes.func,
|
|
/** @ignore */
|
|
onTouchStart: _react.PropTypes.func,
|
|
/**
|
|
* Override the inline-styles of the root element.
|
|
*/
|
|
style: _react.PropTypes.object,
|
|
/**
|
|
* The text to supply to the element's tooltip.
|
|
*/
|
|
tooltip: _react.PropTypes.node,
|
|
/**
|
|
* The vertical and horizontal positions, respectively, of the element's tooltip.
|
|
* Possible values are: "bottom-center", "top-center", "bottom-right", "top-right",
|
|
* "bottom-left", and "top-left".
|
|
*/
|
|
tooltipPosition: _propTypes2.default.cornersAndCenter,
|
|
/**
|
|
* Override the inline-styles of the tooltip element.
|
|
*/
|
|
tooltipStyles: _react.PropTypes.object,
|
|
/**
|
|
* If true, increase the tooltip element's size. Useful for increasing tooltip
|
|
* readability on mobile devices.
|
|
*/
|
|
touch: _react.PropTypes.bool
|
|
} : void 0;
|
|
exports.default = IconButton; |