react-blades
Version:
Horizontal stacking window panels.
320 lines (266 loc) • 10.7 kB
JavaScript
module.exports =
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // identity function for calling harmony imports with the correct context
/******/ __webpack_require__.i = function(value) { return value; };
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 18);
/******/ })
/************************************************************************/
/******/ ({
/***/ 0:
/***/ (function(module, exports) {
module.exports = require("prop-types");
/***/ }),
/***/ 1:
/***/ (function(module, exports) {
module.exports = require("react");
/***/ }),
/***/ 18:
/***/ (function(module, exports, __webpack_require__) {
Object.defineProperty(exports, "__esModule", {
value: true
});
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 _react = __webpack_require__(1);
var _react2 = _interopRequireDefault(_react);
var _propTypes = __webpack_require__(0);
var _propTypes2 = _interopRequireDefault(_propTypes);
var _classnames = __webpack_require__(3);
var _classnames2 = _interopRequireDefault(_classnames);
var _BladeToolbarButtonPropShape = __webpack_require__(4);
var _BladeToolbarButtonPropShape2 = _interopRequireDefault(_BladeToolbarButtonPropShape);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
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 propTypes = _BladeToolbarButtonPropShape2['default'];
var defaultProps = {
title: '',
onClick: function () {
function onClick() {}
return onClick;
}(),
iconClass: '',
isEnabled: true,
tooltip: null
};
var style = {
root: {},
button: {
display: 'flex',
textDecoration: 'none',
margin: 0,
border: 0,
outline: 0
},
icon: {},
title: {
flex: '0 1 auto',
overflow: 'hidden'
}
};
var contextTypes = {
bladeTheme: _propTypes2['default'].object
};
var BladeToolbarButton = function (_Component) {
_inherits(BladeToolbarButton, _Component);
function BladeToolbarButton(props) {
_classCallCheck(this, BladeToolbarButton);
var _this = _possibleConstructorReturn(this, (BladeToolbarButton.__proto__ || Object.getPrototypeOf(BladeToolbarButton)).call(this, props));
_this.state = {
hovered: false
};
_this.getLayoutDirection = _this.getLayoutDirection.bind(_this);
_this.handleMouseEnter = _this.handleMouseEnter.bind(_this);
_this.handleMouseLeave = _this.handleMouseLeave.bind(_this);
return _this;
}
_createClass(BladeToolbarButton, [{
key: 'getLayoutDirection',
value: function () {
function getLayoutDirection() {
var bladeTheme = this.context.bladeTheme;
return this.props.layoutDirection ? this.props.layoutDirection : bladeTheme.bladeToolbarButton.layoutDirection;
}
return getLayoutDirection;
}()
}, {
key: 'handleMouseEnter',
value: function () {
function handleMouseEnter() {
this.setState({ hovered: true });
}
return handleMouseEnter;
}()
}, {
key: 'handleMouseLeave',
value: function () {
function handleMouseLeave() {
this.setState({ hovered: false });
}
return handleMouseLeave;
}()
}, {
key: 'render',
value: function () {
function render() {
var _props = this.props,
isEnabled = _props.isEnabled,
onClick = _props.onClick,
id = _props.id,
title = _props.title,
width = _props.width,
height = _props.height,
tooltip = _props.tooltip,
iconClass = _props.iconClass;
var modifiersForButton = [];
if (!isEnabled) modifiersForButton.push('disabled');
if (this.state.hovered) modifiersForButton.push('hovered');
var clickHandler = null;
if (isEnabled) {
clickHandler = function () {
function clickHandler(e) {
if (e) e.preventDefault();
onClick(e, { id: id });
}
return clickHandler;
}();
}
var isLayoutDirectionVertical = this.getLayoutDirection() === 'vertical';
var bladeTheme = this.context.bladeTheme;
var buttonStyle = Object.assign({}, style.button, {
backgroundColor: bladeTheme.bladeToolbarButton[(this.state.hovered ? 'hoveredB' : 'b') + 'ackgroundColor'],
height: height || bladeTheme.bladeToolbar.height || 50,
flexDirection: isLayoutDirectionVertical ? 'column' : 'row',
alignItems: 'center',
padding: bladeTheme.bladeToolbarButton.padding || 0
});
if (isLayoutDirectionVertical) {
buttonStyle.width = width || bladeTheme.bladeToolbarButton.width || 65;
} else {
buttonStyle.maxWidth = width || bladeTheme.bladeToolbarButton.width || 65;
}
var iconStyle = Object.assign({}, style.icon, {
minHeight: bladeTheme.bladeToolbarButton.iconFontSize,
padding: bladeTheme.bladeToolbarButton.iconPadding,
fontSize: bladeTheme.bladeToolbarButton.iconFontSize,
color: bladeTheme.bladeToolbarButton['' + (!isEnabled ? 'disabledColor' : 'iconColor')]
});
var titleStyle = Object.assign({}, style.title, {
fontSize: bladeTheme.bladeToolbarButton.textFontSize,
color: bladeTheme.bladeToolbarButton['' + (!isEnabled ? 'disabledColor' : 'textColor')]
});
if (!isLayoutDirectionVertical) {
titleStyle.whiteSpace = 'nowrap';
titleStyle.textOverflow = 'ellipsis';
}
return _react2['default'].createElement(
'li',
{
onMouseLeave: this.handleMouseLeave,
onMouseEnter: this.handleMouseEnter,
className: 'BladeToolbarButton',
style: style.root
},
_react2['default'].createElement(
'button',
{
className: (0, _classnames2['default'])({
BladeToolbarButton__button: true
}, modifiersForButton.map(function (mod) {
return 'BladeToolbarButton__button--' + String(mod);
})),
onClick: clickHandler,
title: tooltip,
style: buttonStyle
},
_react2['default'].createElement('i', { className: iconClass, style: iconStyle }),
_react2['default'].createElement(
'div',
{ className: 'BladeToolbarButton_title', style: titleStyle },
title
)
)
);
}
return render;
}()
}]);
return BladeToolbarButton;
}(_react.Component);
BladeToolbarButton.propTypes = propTypes;
BladeToolbarButton.defaultProps = defaultProps;
BladeToolbarButton.contextTypes = contextTypes;
exports['default'] = BladeToolbarButton;
/***/ }),
/***/ 3:
/***/ (function(module, exports) {
module.exports = require("classnames");
/***/ }),
/***/ 4:
/***/ (function(module, exports) {
module.exports = require("../shapes/BladeToolbarButtonPropShape");
/***/ })
/******/ });
//# sourceMappingURL=BladeToolbarButton.js.map