d2-ui
Version:
318 lines (275 loc) • 12.6 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 _transitions = require('../styles/transitions');
var _transitions2 = _interopRequireDefault(_transitions);
var _childUtils = require('../utils/childUtils');
var _colorManipulator = require('../utils/colorManipulator');
var _EnhancedButton = require('../internal/EnhancedButton');
var _EnhancedButton2 = _interopRequireDefault(_EnhancedButton);
var _FlatButtonLabel = require('./FlatButtonLabel');
var _FlatButtonLabel2 = _interopRequireDefault(_FlatButtonLabel);
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; }
function validateLabel(props, propName, componentName) {
if (!props.children && !props.label && !props.icon) {
return new Error('Required prop label or children or icon was not specified in ' + componentName + '.');
}
}
var FlatButton = function (_Component) {
_inherits(FlatButton, _Component);
function FlatButton() {
var _Object$getPrototypeO;
var _temp, _this, _ret;
_classCallCheck(this, FlatButton);
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(FlatButton)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
hovered: false,
isKeyboardFocused: false,
touch: false
}, _this.handleKeyboardFocus = function (event, isKeyboardFocused) {
_this.setState({ isKeyboardFocused: isKeyboardFocused });
_this.props.onKeyboardFocus(event, isKeyboardFocused);
}, _this.handleMouseEnter = function (event) {
// Cancel hover styles for touch devices
if (!_this.state.touch) _this.setState({ hovered: true });
_this.props.onMouseEnter(event);
}, _this.handleMouseLeave = function (event) {
_this.setState({ hovered: false });
_this.props.onMouseLeave(event);
}, _this.handleTouchStart = function (event) {
_this.setState({ touch: true });
_this.props.onTouchStart(event);
}, _temp), _possibleConstructorReturn(_this, _ret);
}
_createClass(FlatButton, [{
key: 'render',
value: function render() {
var _props = this.props;
var children = _props.children;
var disabled = _props.disabled;
var hoverColor = _props.hoverColor;
var backgroundColor = _props.backgroundColor;
var icon = _props.icon;
var label = _props.label;
var labelStyle = _props.labelStyle;
var labelPosition = _props.labelPosition;
var linkButton = _props.linkButton;
var primary = _props.primary;
var rippleColor = _props.rippleColor;
var secondary = _props.secondary;
var style = _props.style;
var other = _objectWithoutProperties(_props, ['children', 'disabled', 'hoverColor', 'backgroundColor', 'icon', 'label', 'labelStyle', 'labelPosition', 'linkButton', 'primary', 'rippleColor', 'secondary', 'style']);
var _context$muiTheme = this.context.muiTheme;
var _context$muiTheme$but = _context$muiTheme.button;
var buttonHeight = _context$muiTheme$but.height;
var buttonMinWidth = _context$muiTheme$but.minWidth;
var buttonTextTransform = _context$muiTheme$but.textTransform;
var _context$muiTheme$fla = _context$muiTheme.flatButton;
var buttonFilterColor = _context$muiTheme$fla.buttonFilterColor;
var buttonColor = _context$muiTheme$fla.color;
var disabledTextColor = _context$muiTheme$fla.disabledTextColor;
var fontSize = _context$muiTheme$fla.fontSize;
var fontWeight = _context$muiTheme$fla.fontWeight;
var primaryTextColor = _context$muiTheme$fla.primaryTextColor;
var secondaryTextColor = _context$muiTheme$fla.secondaryTextColor;
var textColor = _context$muiTheme$fla.textColor;
var _context$muiTheme$fla2 = _context$muiTheme$fla.textTransform;
var textTransform = _context$muiTheme$fla2 === undefined ? buttonTextTransform || 'uppercase' : _context$muiTheme$fla2;
var defaultTextColor = disabled ? disabledTextColor : primary ? primaryTextColor : secondary ? secondaryTextColor : textColor;
var defaultHoverColor = (0, _colorManipulator.fade)(buttonFilterColor, 0.2);
var defaultRippleColor = buttonFilterColor;
var buttonHoverColor = hoverColor || defaultHoverColor;
var buttonRippleColor = rippleColor || defaultRippleColor;
var buttonBackgroundColor = backgroundColor || buttonColor;
var hovered = (this.state.hovered || this.state.isKeyboardFocused) && !disabled;
var mergedRootStyles = (0, _simpleAssign2.default)({}, {
height: buttonHeight,
lineHeight: buttonHeight + 'px',
minWidth: buttonMinWidth,
color: defaultTextColor,
transition: _transitions2.default.easeOut(),
borderRadius: 2,
userSelect: 'none',
position: 'relative',
overflow: 'hidden',
backgroundColor: hovered ? buttonHoverColor : buttonBackgroundColor,
padding: 0,
margin: 0,
textAlign: 'center'
}, style);
var iconCloned = void 0;
var labelStyleIcon = {};
if (icon) {
iconCloned = _react2.default.cloneElement(icon, {
color: mergedRootStyles.color,
style: {
verticalAlign: 'middle',
marginLeft: label && labelPosition !== 'before' ? 12 : 0,
marginRight: label && labelPosition === 'before' ? 12 : 0
}
});
if (labelPosition === 'before') {
labelStyleIcon.paddingRight = 8;
} else {
labelStyleIcon.paddingLeft = 8;
}
}
var mergedLabelStyles = (0, _simpleAssign2.default)({
letterSpacing: 0,
textTransform: textTransform,
fontWeight: fontWeight,
fontSize: fontSize
}, labelStyleIcon, labelStyle);
var labelElement = label ? _react2.default.createElement(_FlatButtonLabel2.default, { label: label, style: mergedLabelStyles }) : undefined;
// Place label before or after children.
var childrenFragment = labelPosition === 'before' ? {
labelElement: labelElement,
iconCloned: iconCloned,
children: children
} : {
children: children,
iconCloned: iconCloned,
labelElement: labelElement
};
var enhancedButtonChildren = (0, _childUtils.createChildFragment)(childrenFragment);
return _react2.default.createElement(
_EnhancedButton2.default,
_extends({}, other, {
disabled: disabled,
focusRippleColor: buttonRippleColor,
focusRippleOpacity: 0.3,
linkButton: linkButton,
onKeyboardFocus: this.handleKeyboardFocus,
onMouseLeave: this.handleMouseLeave,
onMouseEnter: this.handleMouseEnter,
onTouchStart: this.handleTouchStart,
style: mergedRootStyles,
touchRippleColor: buttonRippleColor,
touchRippleOpacity: 0.3
}),
enhancedButtonChildren
);
}
}]);
return FlatButton;
}(_react.Component);
FlatButton.muiName = 'FlatButton';
FlatButton.propTypes = {
/**
* Color of button when mouse is not hovering over it.
*/
backgroundColor: _react.PropTypes.string,
/**
* This is what will be displayed inside the button.
* If a label is specified, the text within the label prop will
* be displayed. Otherwise, the component will expect children
* which will then be displayed. (In our example,
* we are nesting an `<input type="file" />` and a `span`
* that acts as our label to be displayed.) This only
* applies to flat and raised buttons.
*/
children: _react.PropTypes.node,
/**
* Disables the button if set to true.
*/
disabled: _react.PropTypes.bool,
/**
* Color of button when mouse hovers over.
*/
hoverColor: _react.PropTypes.string,
/**
* URL to link to when button clicked if `linkButton` is set to true.
*/
href: _react.PropTypes.string,
/**
* Use this property to display an icon.
*/
icon: _react.PropTypes.node,
/**
* Label for the button.
*/
label: validateLabel,
/**
* Place label before or after the passed children.
*/
labelPosition: _react.PropTypes.oneOf(['before', 'after']),
/**
* Override the inline-styles of the button's label element.
*/
labelStyle: _react.PropTypes.object,
/**
* Enables use of `href` property to provide a URL to link to if set to true.
*/
linkButton: _react.PropTypes.bool,
/**
* 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} isKeyboardFocused Indicates whether the element is focused.
*/
onKeyboardFocus: _react.PropTypes.func,
/**
* Callback function fired when the mouse enters the element.
*
* @param {object} event `mouseenter` event targeting the element.
*/
onMouseEnter: _react.PropTypes.func,
/**
* Callback function fired when the mouse leaves the element.
*
* @param {object} event `mouseleave` event targeting the element.
*/
onMouseLeave: _react.PropTypes.func,
/**
* Callback function fired when the element is touched.
*
* @param {object} event `touchstart` event targeting the element.
*/
onTouchStart: _react.PropTypes.func,
/**
* If true, colors button according to
* primaryTextColor from the Theme.
*/
primary: _react.PropTypes.bool,
/**
* Color for the ripple after button is clicked.
*/
rippleColor: _react.PropTypes.string,
/**
* If true, colors button according to secondaryTextColor from the theme.
* The primary prop has precendent if set to true.
*/
secondary: _react.PropTypes.bool,
/**
* Override the inline-styles of the root element.
*/
style: _react.PropTypes.object
};
FlatButton.defaultProps = {
disabled: false,
labelStyle: {},
labelPosition: 'after',
onKeyboardFocus: function onKeyboardFocus() {},
onMouseEnter: function onMouseEnter() {},
onMouseLeave: function onMouseLeave() {},
onTouchStart: function onTouchStart() {},
primary: false,
secondary: false
};
FlatButton.contextTypes = {
muiTheme: _react.PropTypes.object.isRequired
};
exports.default = FlatButton;