d2-ui
Version:
467 lines (418 loc) • 16 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 _colorManipulator = require('../utils/colorManipulator');
var _childUtils = require('../utils/childUtils');
var _EnhancedButton = require('../internal/EnhancedButton');
var _EnhancedButton2 = _interopRequireDefault(_EnhancedButton);
var _Paper = require('../Paper');
var _Paper2 = _interopRequireDefault(_Paper);
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 + '.');
}
}
function getStyles(props, context, state) {
var _context$muiTheme = context.muiTheme;
var baseTheme = _context$muiTheme.baseTheme;
var button = _context$muiTheme.button;
var raisedButton = _context$muiTheme.raisedButton;
var disabled = props.disabled;
var disabledBackgroundColor = props.disabledBackgroundColor;
var disabledLabelColor = props.disabledLabelColor;
var fullWidth = props.fullWidth;
var icon = props.icon;
var label = props.label;
var labelPosition = props.labelPosition;
var primary = props.primary;
var secondary = props.secondary;
var style = props.style;
var amount = primary || secondary ? 0.4 : 0.08;
var backgroundColor = raisedButton.color;
var labelColor = raisedButton.textColor;
if (disabled) {
backgroundColor = disabledBackgroundColor || raisedButton.disabledColor;
labelColor = disabledLabelColor || raisedButton.disabledTextColor;
} else if (primary) {
backgroundColor = raisedButton.primaryColor;
labelColor = raisedButton.primaryTextColor;
} else if (secondary) {
backgroundColor = raisedButton.secondaryColor;
labelColor = raisedButton.secondaryTextColor;
} else {
if (props.backgroundColor) {
backgroundColor = props.backgroundColor;
}
if (props.labelColor) {
labelColor = props.labelColor;
}
}
var buttonHeight = style && style.height || button.height;
var borderRadius = 2;
return {
root: {
display: 'inline-block',
transition: _transitions2.default.easeOut()
},
button: {
position: 'relative',
minWidth: fullWidth ? '100%' : button.minWidth,
height: buttonHeight,
lineHeight: buttonHeight + 'px',
width: '100%',
padding: 0,
borderRadius: borderRadius,
transition: _transitions2.default.easeOut(),
backgroundColor: backgroundColor,
// That's the default value for a button but not a link
textAlign: 'center'
},
label: {
position: 'relative',
opacity: 1,
fontSize: '14px',
letterSpacing: 0,
textTransform: raisedButton.textTransform || button.textTransform || 'uppercase',
fontWeight: raisedButton.fontWeight,
margin: 0,
userSelect: 'none',
paddingLeft: icon && labelPosition !== 'before' ? 8 : baseTheme.spacing.desktopGutterLess,
paddingRight: icon && labelPosition === 'before' ? 8 : baseTheme.spacing.desktopGutterLess,
color: labelColor
},
icon: {
verticalAlign: 'middle',
marginLeft: label && labelPosition !== 'before' ? 12 : 0,
marginRight: label && labelPosition === 'before' ? 12 : 0
},
overlay: {
height: buttonHeight,
borderRadius: borderRadius,
backgroundColor: (state.keyboardFocused || state.hovered) && !disabled && (0, _colorManipulator.fade)(labelColor, amount),
transition: _transitions2.default.easeOut(),
top: 0
},
ripple: {
color: labelColor,
opacity: !(primary || secondary) ? 0.1 : 0.16
}
};
}
var RaisedButton = function (_Component) {
_inherits(RaisedButton, _Component);
function RaisedButton() {
var _Object$getPrototypeO;
var _temp, _this, _ret;
_classCallCheck(this, RaisedButton);
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(RaisedButton)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
hovered: false,
keyboardFocused: false,
touched: false,
initialZDepth: 0,
zDepth: 0
}, _this.handleMouseDown = function (event) {
// only listen to left clicks
if (event.button === 0) {
_this.setState({
zDepth: _this.state.initialZDepth + 1
});
}
if (_this.props.onMouseDown) {
_this.props.onMouseDown(event);
}
}, _this.handleMouseUp = function (event) {
_this.setState({
zDepth: _this.state.initialZDepth
});
if (_this.props.onMouseUp) {
_this.props.onMouseUp(event);
}
}, _this.handleMouseLeave = function (event) {
if (!_this.state.keyboardFocused) {
_this.setState({
zDepth: _this.state.initialZDepth,
hovered: false
});
}
if (_this.props.onMouseLeave) {
_this.props.onMouseLeave(event);
}
}, _this.handleMouseEnter = function (event) {
if (!_this.state.keyboardFocused && !_this.state.touched) {
_this.setState({ hovered: true });
}
if (_this.props.onMouseEnter) {
_this.props.onMouseEnter(event);
}
}, _this.handleTouchStart = function (event) {
_this.setState({
touched: true,
zDepth: _this.state.initialZDepth + 1
});
if (_this.props.onTouchStart) {
_this.props.onTouchStart(event);
}
}, _this.handleTouchEnd = function (event) {
_this.setState({
zDepth: _this.state.initialZDepth
});
if (_this.props.onTouchEnd) {
_this.props.onTouchEnd(event);
}
}, _this.handleKeyboardFocus = function (event, keyboardFocused) {
var zDepth = keyboardFocused && !_this.props.disabled ? _this.state.initialZDepth + 1 : _this.state.initialZDepth;
_this.setState({
zDepth: zDepth,
keyboardFocused: keyboardFocused
});
}, _temp), _possibleConstructorReturn(_this, _ret);
}
_createClass(RaisedButton, [{
key: 'componentWillMount',
value: function componentWillMount() {
var zDepth = this.props.disabled ? 0 : 1;
this.setState({
zDepth: zDepth,
initialZDepth: zDepth
});
}
}, {
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps) {
var zDepth = nextProps.disabled ? 0 : 1;
this.setState({
zDepth: zDepth,
initialZDepth: zDepth
});
}
}, {
key: 'render',
value: function render() {
var _props = this.props;
var children = _props.children;
var className = _props.className;
var disabled = _props.disabled;
var icon = _props.icon;
var label = _props.label;
var labelPosition = _props.labelPosition;
var labelStyle = _props.labelStyle;
var primary = _props.primary;
var // eslint-disable-line no-unused-vars
rippleStyle = _props.rippleStyle;
var secondary = _props.secondary;
var other = _objectWithoutProperties(_props, ['children', 'className', 'disabled', 'icon', 'label', 'labelPosition', 'labelStyle', 'primary', 'rippleStyle', 'secondary']);
var prepareStyles = this.context.muiTheme.prepareStyles;
var styles = getStyles(this.props, this.context, this.state);
var mergedRippleStyles = (0, _simpleAssign2.default)({}, styles.ripple, rippleStyle);
var buttonEventHandlers = disabled ? {} : {
onMouseDown: this.handleMouseDown,
onMouseUp: this.handleMouseUp,
onMouseLeave: this.handleMouseLeave,
onMouseEnter: this.handleMouseEnter,
onTouchStart: this.handleTouchStart,
onTouchEnd: this.handleTouchEnd,
onKeyboardFocus: this.handleKeyboardFocus
};
var labelElement = label && _react2.default.createElement(
'span',
{ style: prepareStyles((0, _simpleAssign2.default)(styles.label, labelStyle)) },
label
);
var iconCloned = icon && _react2.default.cloneElement(icon, {
color: styles.label.color,
style: styles.icon
});
// 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(
_Paper2.default,
{
className: className,
style: (0, _simpleAssign2.default)(styles.root, this.props.style),
zDepth: this.state.zDepth
},
_react2.default.createElement(
_EnhancedButton2.default,
_extends({}, other, buttonEventHandlers, {
ref: 'container',
disabled: disabled,
style: styles.button,
focusRippleColor: mergedRippleStyles.color,
touchRippleColor: mergedRippleStyles.color,
focusRippleOpacity: mergedRippleStyles.opacity,
touchRippleOpacity: mergedRippleStyles.opacity
}),
_react2.default.createElement(
'div',
{
ref: 'overlay',
style: prepareStyles(styles.overlay)
},
enhancedButtonChildren
)
)
);
}
}]);
return RaisedButton;
}(_react.Component);
RaisedButton.muiName = 'RaisedButton';
RaisedButton.propTypes = {
/**
* Override the default background color for the button,
* but not the default disabled background color
* (use `disabledBackgroundColor` for this).
*/
backgroundColor: _react.PropTypes.string,
/**
* The content of the button.
* If a label is provided via the `label` prop, the text within the label
* will be displayed in addition to the content provided here.
*/
children: _react.PropTypes.node,
/**
* The CSS class name of the root element.
*/
className: _react.PropTypes.string,
/**
* If true, the button will be disabled.
*/
disabled: _react.PropTypes.bool,
/**
* Override the default background color for the button
* when it is disabled.
*/
disabledBackgroundColor: _react.PropTypes.string,
/**
* The color of the button's label when the button is disabled.
*/
disabledLabelColor: _react.PropTypes.string,
/**
* If true, the button will take up the full width of its container.
*/
fullWidth: _react.PropTypes.bool,
/**
* If `linkButton` is true, the URL to link to when the button
* is clicked.
*/
href: _react.PropTypes.string,
/**
* An icon to be displayed within the button.
*/
icon: _react.PropTypes.node,
/**
* The label to be displayed within the button.
* If content is provided via the `children` prop, that content will be
* displayed in addition to the label provided here.
*/
label: validateLabel,
/**
* The color of the button's label.
*/
labelColor: _react.PropTypes.string,
/**
* The position of the button's label relative to the button's `children`.
*/
labelPosition: _react.PropTypes.oneOf(['before', 'after']),
/**
* Override the inline-styles of the button's label element.
*/
labelStyle: _react.PropTypes.object,
/**
* If true, enable the use of the `href` property to provide
* a URL to link to.
*/
linkButton: _react.PropTypes.bool,
/**
* Callback function fired when a mouse button is pressed down on
* the element.
*
* @param {object} event `mousedown` event targeting the element.
*/
onMouseDown: _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 a mouse button is released on the element.
*
* @param {object} event `mouseup` event targeting the element.
*/
onMouseUp: _react.PropTypes.func,
/**
* Callback function fired when a touch point is removed from the element.
*
* @param {object} event `touchend` event targeting the element.
*/
onTouchEnd: _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, the button will use the theme's primary color.
*/
primary: _react.PropTypes.bool,
/**
* Override the inline style of the ripple element.
*/
rippleStyle: _react.PropTypes.object,
/**
* If true, the button will use the theme's secondary color.
* If both `secondary` and `primary` are true, the button will use
* the theme's primary color.
*/
secondary: _react.PropTypes.bool,
/**
* Override the inline-styles of the root element.
*/
style: _react.PropTypes.object
};
RaisedButton.defaultProps = {
disabled: false,
labelPosition: 'after',
fullWidth: false,
primary: false,
secondary: false
};
RaisedButton.contextTypes = {
muiTheme: _react.PropTypes.object.isRequired
};
exports.default = RaisedButton;