react-matrix-viz
Version:
A react component for creating quick matrix/grid visualizations.
1,457 lines (1,114 loc) • 157 kB
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("react"), require("lodash"));
else if(typeof define === 'function' && define.amd)
define(["react", "_"], factory);
else {
var a = typeof exports === 'object' ? factory(require("react"), require("lodash")) : factory(root["react"], root["_"]);
for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
}
})(this, function(__WEBPACK_EXTERNAL_MODULE_2__, __WEBPACK_EXTERNAL_MODULE_3__) {
return /******/ (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] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ // Flag the module as loaded
/******/ module.loaded = 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;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Cell = exports.Matrix = undefined;
var _Matrix = __webpack_require__(1);
var _Matrix2 = _interopRequireDefault(_Matrix);
var _Cell = __webpack_require__(6);
var _Cell2 = _interopRequireDefault(_Cell);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _Matrix2.default;
exports.Matrix = _Matrix2.default;
exports.Cell = _Cell2.default;
/***/ },
/* 1 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
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__(2);
var _react2 = _interopRequireDefault(_react);
var _lodash = __webpack_require__(3);
var _Styles = __webpack_require__(4);
var _Util = __webpack_require__(68);
var _Column = __webpack_require__(5);
var _Column2 = _interopRequireDefault(_Column);
var _Cell = __webpack_require__(6);
var _Cell2 = _interopRequireDefault(_Cell);
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 Matrix = function (_Component) {
_inherits(Matrix, _Component);
function Matrix() {
_classCallCheck(this, Matrix);
return _possibleConstructorReturn(this, Object.getPrototypeOf(Matrix).apply(this, arguments));
}
_createClass(Matrix, [{
key: 'getCellStyle',
value: function getCellStyle(data) {
var _props = this.props;
var setStyle = _props.setStyle;
var setHoverStyle = _props.setHoverStyle;
var style = (0, _lodash.extend)({}, _Styles.cellStyle);
if (setStyle) style = (0, _lodash.extend)(style, setStyle(data));
if (setHoverStyle) style = (0, _lodash.extend)(style, setHoverStyle(data));
return style;
}
}, {
key: 'generateCells',
value: function generateCells(data) {
var _this2 = this;
var _props2 = this.props;
var cellData = _props2.cellData;
var cellClass = _props2.cellClass;
var onClick = _props2.onClick;
var onMouseOver = _props2.onMouseOver;
var onMouseOut = _props2.onMouseOut;
return data.map(function (col, i) {
return col.map(function (cell, j) {
var curData = cellData(cell, i, j); // Using i and j to denote col and row respectively
var style = _this2.getCellStyle(curData);
return _react2.default.createElement(_Cell2.default, {
key: 'col' + i + 'row' + j,
className: cellClass,
data: curData,
style: style,
onClick: onClick,
onMouseOver: onMouseOver,
onMouseOut: onMouseOut });
});
});
}
}, {
key: 'render',
value: function render() {
var _props3 = this.props;
var columnClass = _props3.columnClass;
var matrixClass = _props3.matrixClass;
var data = _props3.data;
var random = _props3.random;
// If data exists, use it. Otherwise, use our random prop.
var cells = this.generateCells(data || (0, _Util.randomData)(random[0], random[1]));
return _react2.default.createElement(
'div',
{ className: matrixClass, style: _Styles.matrixStyle },
cells.map(function (col, i) {
return _react2.default.createElement(_Column2.default, { key: 'col' + i, className: columnClass, cells: col });
})
);
}
}]);
return Matrix;
}(_react.Component);
exports.default = Matrix;
Matrix.propTypes = {
data: _react.PropTypes.array, // A 2d array of values or objects
cellData: _react.PropTypes.func, // A function that determines what the cell's value will be
setStyle: _react.PropTypes.func, // A function that determines the cell's style
setHoverStyle: _react.PropTypes.func, // A function that determines the cell's style
onClick: _react.PropTypes.func, // An event handler, triggered when cell is clicked
onMouseOver: _react.PropTypes.func, // An event handler, triggered when mouse enters cell
onMouseOut: _react.PropTypes.func, // An event handler, triggered when mouse exits cell,
random: _react.PropTypes.array, // [10, 5] would result in a 10 column, 5 row grid with random values between 1-100
cellClass: _react.PropTypes.string,
columnClass: _react.PropTypes.string,
matrixClass: _react.PropTypes.string
};
Matrix.defaultProps = {
cellData: function cellData(cell, col, row) {
return cell;
}, // Returns the value at data[col][row]
cellClass: 'rm-cell', // Default cell class name to 'rm-cell'
columnClass: 'rm-column', // Default column class name to 'rm-column'
matrixClass: 'rm-matrix' };
/***/ },
/* 2 */
/***/ function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_2__;
/***/ },
/* 3 */
/***/ function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_3__;
/***/ },
/* 4 */
/***/ function(module, exports) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var cellStyle = exports.cellStyle = {
height: 20,
width: 20,
margin: 1,
backgroundColor: '#eee',
boxSizing: 'border-box',
cursor: 'pointer'
};
var columnStyle = exports.columnStyle = {
display: 'flex',
flexDirection: 'column'
};
var matrixStyle = exports.matrixStyle = {
display: 'flex'
};
/***/ },
/* 5 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
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__(2);
var _react2 = _interopRequireDefault(_react);
var _Styles = __webpack_require__(4);
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 Column = function (_Component) {
_inherits(Column, _Component);
function Column() {
_classCallCheck(this, Column);
return _possibleConstructorReturn(this, Object.getPrototypeOf(Column).apply(this, arguments));
}
_createClass(Column, [{
key: 'render',
value: function render() {
return _react2.default.createElement(
'div',
{ className: this.props.className, style: _Styles.columnStyle },
this.props.cells
);
}
}]);
return Column;
}(_react.Component);
exports.default = Column;
Column.propTypes = {
cells: _react.PropTypes.array, // An array of Cell components, representing a column
className: _react.PropTypes.string };
/***/ },
/* 6 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
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__(2);
var _react2 = _interopRequireDefault(_react);
var _radium = __webpack_require__(7);
var _radium2 = _interopRequireDefault(_radium);
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 Cell = function (_Component) {
_inherits(Cell, _Component);
function Cell() {
_classCallCheck(this, Cell);
return _possibleConstructorReturn(this, Object.getPrototypeOf(Cell).apply(this, arguments));
}
_createClass(Cell, [{
key: 'getClickHandler',
value: function getClickHandler(data) {
var onClick = this.props.onClick;
if (!onClick) return false;
return function () {
return onClick(data);
};
}
}, {
key: 'getMouseOverHandler',
value: function getMouseOverHandler(data) {
var onMouseOver = this.props.onMouseOver;
if (!onMouseOver) return false;
return function () {
return onMouseOver(data);
};
}
}, {
key: 'getMouseOutHandler',
value: function getMouseOutHandler(data) {
var onMouseOut = this.props.onMouseOut;
if (!onMouseOut) return false;
return function () {
return onMouseOut(data);
};
}
}, {
key: 'render',
value: function render() {
var _props = this.props;
var data = _props.data;
var style = _props.style;
var className = _props.className;
return _react2.default.createElement('div', {
className: className,
style: style,
onClick: this.getClickHandler(data),
onMouseOver: this.getMouseOverHandler(data),
onMouseOut: this.getMouseOutHandler(data) });
}
}]);
return Cell;
}(_react.Component);
Cell.propTypes = {
data: _react.PropTypes.object, // This cell's data
style: _react.PropTypes.object, // This cell's style object
onClick: _react.PropTypes.func, // This cell's click handler
onMouseOver: _react.PropTypes.func, // This cell's mouseover handler
onMouseOut: _react.PropTypes.func, // This cell's mouseout handler
className: _react.PropTypes.string };
// Cell's class
exports.default = (0, _radium2.default)(Cell); // Wraps Cell in Radium, which extends React's inline CSS capabilities
/***/ },
/* 7 */
/***/ function(module, exports, __webpack_require__) {
/* WEBPACK VAR INJECTION */(function(process) {'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _enhancer = __webpack_require__(9);
var _enhancer2 = _interopRequireDefault(_enhancer);
var _plugins = __webpack_require__(54);
var _plugins2 = _interopRequireDefault(_plugins);
var _style = __webpack_require__(64);
var _style2 = _interopRequireDefault(_style);
var _styleRoot = __webpack_require__(65);
var _styleRoot2 = _interopRequireDefault(_styleRoot);
var _getState = __webpack_require__(50);
var _getState2 = _interopRequireDefault(_getState);
var _keyframes = __webpack_require__(67);
var _keyframes2 = _interopRequireDefault(_keyframes);
var _resolveStyles = __webpack_require__(11);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function Radium(ComposedComponent) {
return (0, _enhancer2.default)(ComposedComponent);
}
Radium.Plugins = _plugins2.default;
Radium.Style = _style2.default;
Radium.StyleRoot = _styleRoot2.default;
Radium.getState = _getState2.default;
Radium.keyframes = _keyframes2.default;
if (process.env.NODE_ENV !== 'production') {
Radium.TestMode = {
clearState: _resolveStyles.__clearStateForTests,
disable: _resolveStyles.__setTestMode.bind(null, false),
enable: _resolveStyles.__setTestMode.bind(null, true)
};
}
exports.default = Radium;
module.exports = exports['default'];
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(8)))
/***/ },
/* 8 */
/***/ function(module, exports) {
// shim for using process in browser
var process = module.exports = {};
var queue = [];
var draining = false;
var currentQueue;
var queueIndex = -1;
function cleanUpNextTick() {
if (!draining || !currentQueue) {
return;
}
draining = false;
if (currentQueue.length) {
queue = currentQueue.concat(queue);
} else {
queueIndex = -1;
}
if (queue.length) {
drainQueue();
}
}
function drainQueue() {
if (draining) {
return;
}
var timeout = setTimeout(cleanUpNextTick);
draining = true;
var len = queue.length;
while(len) {
currentQueue = queue;
queue = [];
while (++queueIndex < len) {
if (currentQueue) {
currentQueue[queueIndex].run();
}
}
queueIndex = -1;
len = queue.length;
}
currentQueue = null;
draining = false;
clearTimeout(timeout);
}
process.nextTick = function (fun) {
var args = new Array(arguments.length - 1);
if (arguments.length > 1) {
for (var i = 1; i < arguments.length; i++) {
args[i - 1] = arguments[i];
}
}
queue.push(new Item(fun, args));
if (queue.length === 1 && !draining) {
setTimeout(drainQueue, 0);
}
};
// v8 likes predictible objects
function Item(fun, array) {
this.fun = fun;
this.array = array;
}
Item.prototype.run = function () {
this.fun.apply(null, this.array);
};
process.title = 'browser';
process.browser = true;
process.env = {};
process.argv = [];
process.version = ''; // empty string to avoid regexp issues
process.versions = {};
function noop() {}
process.on = noop;
process.addListener = noop;
process.once = noop;
process.off = noop;
process.removeListener = noop;
process.removeAllListeners = noop;
process.emit = noop;
process.binding = function (name) {
throw new Error('process.binding is not supported');
};
process.cwd = function () { return '/' };
process.chdir = function (dir) {
throw new Error('process.chdir is not supported');
};
process.umask = function() { return 0; };
/***/ },
/* 9 */
/***/ function(module, exports, __webpack_require__) {
/* WEBPACK VAR INJECTION */(function(process) {'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };
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; };
exports.default = enhanceWithRadium;
var _react = __webpack_require__(2);
var _styleKeeper = __webpack_require__(10);
var _styleKeeper2 = _interopRequireDefault(_styleKeeper);
var _resolveStyles = __webpack_require__(11);
var _resolveStyles2 = _interopRequireDefault(_resolveStyles);
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 KEYS_TO_IGNORE_WHEN_COPYING_PROPERTIES = ['arguments', 'callee', 'caller', 'length', 'name', 'prototype', 'type'];
function copyProperties(source, target) {
Object.getOwnPropertyNames(source).forEach(function (key) {
if (KEYS_TO_IGNORE_WHEN_COPYING_PROPERTIES.indexOf(key) < 0 && !target.hasOwnProperty(key)) {
var descriptor = Object.getOwnPropertyDescriptor(source, key);
Object.defineProperty(target, key, descriptor);
}
});
}
function enhanceWithRadium(configOrComposedComponent) {
var _class, _temp;
var config = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
if (typeof configOrComposedComponent !== 'function') {
var _ret = function () {
var newConfig = _extends({}, config, configOrComposedComponent);
return {
v: function v(configOrComponent) {
return enhanceWithRadium(configOrComponent, newConfig);
}
};
}();
if ((typeof _ret === 'undefined' ? 'undefined' : _typeof(_ret)) === "object") return _ret.v;
}
var component = configOrComposedComponent;
var ComposedComponent = component;
// Handle stateless components
if (!ComposedComponent.render && !ComposedComponent.prototype.render) {
ComposedComponent = function (_Component) {
_inherits(ComposedComponent, _Component);
function ComposedComponent() {
_classCallCheck(this, ComposedComponent);
return _possibleConstructorReturn(this, _Component.apply(this, arguments));
}
ComposedComponent.prototype.render = function render() {
return component(this.props, this.context);
};
return ComposedComponent;
}(_react.Component);
ComposedComponent.displayName = component.displayName || component.name;
}
var RadiumEnhancer = (_temp = _class = function (_ComposedComponent) {
_inherits(RadiumEnhancer, _ComposedComponent);
function RadiumEnhancer() {
_classCallCheck(this, RadiumEnhancer);
var _this2 = _possibleConstructorReturn(this, _ComposedComponent.apply(this, arguments));
_this2.state = _this2.state || {};
_this2.state._radiumStyleState = {};
_this2._radiumIsMounted = true;
return _this2;
}
RadiumEnhancer.prototype.componentWillUnmount = function componentWillUnmount() {
if (_ComposedComponent.prototype.componentWillUnmount) {
_ComposedComponent.prototype.componentWillUnmount.call(this);
}
this._radiumIsMounted = false;
if (this._radiumMouseUpListener) {
this._radiumMouseUpListener.remove();
}
if (this._radiumMediaQueryListenersByQuery) {
Object.keys(this._radiumMediaQueryListenersByQuery).forEach(function (query) {
this._radiumMediaQueryListenersByQuery[query].remove();
}, this);
}
};
RadiumEnhancer.prototype.getChildContext = function getChildContext() {
var superChildContext = _ComposedComponent.prototype.getChildContext ? _ComposedComponent.prototype.getChildContext.call(this) : {};
if (!this.props.radiumConfig) {
return superChildContext;
}
var newContext = _extends({}, superChildContext);
if (this.props.radiumConfig) {
newContext._radiumConfig = this.props.radiumConfig;
}
return newContext;
};
RadiumEnhancer.prototype.render = function render() {
var renderedElement = _ComposedComponent.prototype.render.call(this);
var currentConfig = this.props.radiumConfig || this.context._radiumConfig || config;
if (config && currentConfig !== config) {
currentConfig = _extends({}, config, currentConfig);
}
return (0, _resolveStyles2.default)(this, renderedElement, currentConfig);
};
return RadiumEnhancer;
}(ComposedComponent), _class._isRadiumEnhanced = true, _temp);
// Class inheritance uses Object.create and because of __proto__ issues
// with IE <10 any static properties of the superclass aren't inherited and
// so need to be manually populated.
// See http://babeljs.io/docs/advanced/caveats/#classes-10-and-below-
copyProperties(component, RadiumEnhancer);
if (process.env.NODE_ENV !== 'production') {
// This also fixes React Hot Loader by exposing the original components top
// level prototype methods on the Radium enhanced prototype as discussed in
// https://github.com/FormidableLabs/radium/issues/219.
copyProperties(ComposedComponent.prototype, RadiumEnhancer.prototype);
}
if (RadiumEnhancer.propTypes && RadiumEnhancer.propTypes.style) {
RadiumEnhancer.propTypes = _extends({}, RadiumEnhancer.propTypes, {
style: _react.PropTypes.oneOfType([_react.PropTypes.array, _react.PropTypes.object])
});
}
RadiumEnhancer.displayName = component.displayName || component.name || 'Component';
RadiumEnhancer.contextTypes = _extends({}, RadiumEnhancer.contextTypes, {
_radiumConfig: _react.PropTypes.object,
_radiumStyleKeeper: _react.PropTypes.instanceOf(_styleKeeper2.default)
});
RadiumEnhancer.childContextTypes = _extends({}, RadiumEnhancer.childContextTypes, {
_radiumConfig: _react.PropTypes.object,
_radiumStyleKeeper: _react.PropTypes.instanceOf(_styleKeeper2.default)
});
return RadiumEnhancer;
}
module.exports = exports['default'];
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(8)))
/***/ },
/* 10 */
/***/ function(module, exports) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var StyleKeeper = function () {
function StyleKeeper(userAgent) {
_classCallCheck(this, StyleKeeper);
this._userAgent = userAgent;
this._listeners = [];
this._cssSet = {};
}
StyleKeeper.prototype.subscribe = function subscribe(listener) {
var _this = this;
if (this._listeners.indexOf(listener) === -1) {
this._listeners.push(listener);
}
return {
// Must be fat arrow to capture `this`
remove: function remove() {
var listenerIndex = _this._listeners.indexOf(listener);
if (listenerIndex > -1) {
_this._listeners.splice(listenerIndex, 1);
}
}
};
};
StyleKeeper.prototype.addCSS = function addCSS(css) {
var _this2 = this;
if (!this._cssSet[css]) {
this._cssSet[css] = true;
this._emitChange();
}
return {
// Must be fat arrow to capture `this`
remove: function remove() {
delete _this2._cssSet[css];
_this2._emitChange();
}
};
};
StyleKeeper.prototype.getCSS = function getCSS() {
return Object.keys(this._cssSet).join('\n');
};
StyleKeeper.prototype._emitChange = function _emitChange() {
this._listeners.forEach(function (listener) {
return listener();
});
};
return StyleKeeper;
}();
exports.default = StyleKeeper;
module.exports = exports['default'];
/***/ },
/* 11 */
/***/ function(module, exports, __webpack_require__) {
/* WEBPACK VAR INJECTION */(function(process) {'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 _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };
var _appendImportantToEachValue = __webpack_require__(12);
var _appendImportantToEachValue2 = _interopRequireDefault(_appendImportantToEachValue);
var _cssRuleSetToString = __webpack_require__(15);
var _cssRuleSetToString2 = _interopRequireDefault(_cssRuleSetToString);
var _getState = __webpack_require__(50);
var _getState2 = _interopRequireDefault(_getState);
var _getStateKey = __webpack_require__(51);
var _getStateKey2 = _interopRequireDefault(_getStateKey);
var _hash = __webpack_require__(52);
var _hash2 = _interopRequireDefault(_hash);
var _mergeStyles = __webpack_require__(53);
var _plugins = __webpack_require__(54);
var _plugins2 = _interopRequireDefault(_plugins);
var _exenv = __webpack_require__(63);
var _exenv2 = _interopRequireDefault(_exenv);
var _react = __webpack_require__(2);
var _react2 = _interopRequireDefault(_react);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var DEFAULT_CONFIG = {
plugins: [_plugins2.default.mergeStyleArray, _plugins2.default.checkProps, _plugins2.default.resolveMediaQueries, _plugins2.default.resolveInteractionStyles, _plugins2.default.keyframes, _plugins2.default.visited, _plugins2.default.prefix, _plugins2.default.checkProps]
};
// Gross
var globalState = {};
// Declare early for recursive helpers.
var resolveStyles = null;
var _shouldResolveStyles = function _shouldResolveStyles(component) {
return component.type && !component.type._isRadiumEnhanced;
};
var _resolveChildren = function _resolveChildren(_ref) {
var children = _ref.children;
var component = _ref.component;
var config = _ref.config;
var existingKeyMap = _ref.existingKeyMap;
if (!children) {
return children;
}
var childrenType = typeof children === 'undefined' ? 'undefined' : _typeof(children);
if (childrenType === 'string' || childrenType === 'number') {
// Don't do anything with a single primitive child
return children;
}
if (childrenType === 'function') {
// Wrap the function, resolving styles on the result
return function () {
var result = children.apply(this, arguments);
if (_react2.default.isValidElement(result)) {
return resolveStyles(component, result, config, existingKeyMap, true);
}
return result;
};
}
if (_react2.default.Children.count(children) === 1 && children.type) {
// If a React Element is an only child, don't wrap it in an array for
// React.Children.map() for React.Children.only() compatibility.
var onlyChild = _react2.default.Children.only(children);
return resolveStyles(component, onlyChild, config, existingKeyMap, true);
}
return _react2.default.Children.map(children, function (child) {
if (_react2.default.isValidElement(child)) {
return resolveStyles(component, child, config, existingKeyMap, true);
}
return child;
});
};
// Recurse over props, just like children
var _resolveProps = function _resolveProps(_ref2) {
var component = _ref2.component;
var config = _ref2.config;
var existingKeyMap = _ref2.existingKeyMap;
var props = _ref2.props;
var newProps = props;
Object.keys(props).forEach(function (prop) {
// We already recurse over children above
if (prop === 'children') {
return;
}
var propValue = props[prop];
if (_react2.default.isValidElement(propValue)) {
newProps = _extends({}, newProps);
newProps[prop] = resolveStyles(component, propValue, config, existingKeyMap, true);
}
});
return newProps;
};
var _buildGetKey = function _buildGetKey(_ref3) {
var componentName = _ref3.componentName;
var existingKeyMap = _ref3.existingKeyMap;
var renderedElement = _ref3.renderedElement;
// We need a unique key to correlate state changes due to user interaction
// with the rendered element, so we know to apply the proper interactive
// styles.
var originalKey = typeof renderedElement.ref === 'string' ? renderedElement.ref : renderedElement.key;
var key = (0, _getStateKey2.default)(originalKey);
var alreadyGotKey = false;
var getKey = function getKey() {
if (alreadyGotKey) {
return key;
}
alreadyGotKey = true;
if (existingKeyMap[key]) {
var elementName = void 0;
if (typeof renderedElement.type === 'string') {
elementName = renderedElement.type;
} else if (renderedElement.type.constructor) {
elementName = renderedElement.type.constructor.displayName || renderedElement.type.constructor.name;
}
throw new Error('Radium requires each element with interactive styles to have a unique ' + 'key, set using either the ref or key prop. ' + (originalKey ? 'Key "' + originalKey + '" is a duplicate.' : 'Multiple elements have no key specified.') + ' ' + 'Component: "' + componentName + '". ' + (elementName ? 'Element: "' + elementName + '".' : ''));
}
existingKeyMap[key] = true;
return key;
};
return getKey;
};
var _setStyleState = function _setStyleState(component, key, stateKey, value) {
if (!component._radiumIsMounted) {
return;
}
var existing = component._lastRadiumState || component.state && component.state._radiumStyleState || {};
var state = { _radiumStyleState: _extends({}, existing) };
state._radiumStyleState[key] = _extends({}, state._radiumStyleState[key]);
state._radiumStyleState[key][stateKey] = value;
component._lastRadiumState = state._radiumStyleState;
component.setState(state);
};
var _runPlugins = function _runPlugins(_ref4) {
var component = _ref4.component;
var config = _ref4.config;
var existingKeyMap = _ref4.existingKeyMap;
var props = _ref4.props;
var renderedElement = _ref4.renderedElement;
// Don't run plugins if renderedElement is not a simple ReactDOMElement or has
// no style.
if (!_react2.default.isValidElement(renderedElement) || typeof renderedElement.type !== 'string' || !props.style) {
return props;
}
var newProps = props;
var plugins = config.plugins || DEFAULT_CONFIG.plugins;
var componentName = component.constructor.displayName || component.constructor.name;
var getKey = _buildGetKey({ renderedElement: renderedElement, existingKeyMap: existingKeyMap, componentName: componentName });
var getComponentField = function getComponentField(key) {
return component[key];
};
var getGlobalState = function getGlobalState(key) {
return globalState[key];
};
var componentGetState = function componentGetState(stateKey, elementKey) {
return (0, _getState2.default)(component.state, elementKey || getKey(), stateKey);
};
var setState = function setState(stateKey, value, elementKey) {
return _setStyleState(component, elementKey || getKey(), stateKey, value);
};
var addCSS = function addCSS(css) {
var styleKeeper = component._radiumStyleKeeper || component.context._radiumStyleKeeper;
if (!styleKeeper) {
if (__isTestModeEnabled) {
return {
remove: function remove() {}
};
}
throw new Error('To use plugins requiring `addCSS` (e.g. keyframes, media queries), ' + 'please wrap your application in the StyleRoot component. Component ' + 'name: `' + componentName + '`.');
}
return styleKeeper.addCSS(css);
};
var newStyle = props.style;
plugins.forEach(function (plugin) {
var result = plugin({
ExecutionEnvironment: _exenv2.default,
addCSS: addCSS,
appendImportantToEachValue: _appendImportantToEachValue2.default,
componentName: componentName,
config: config,
cssRuleSetToString: _cssRuleSetToString2.default,
getComponentField: getComponentField,
getGlobalState: getGlobalState,
getState: componentGetState,
hash: _hash2.default,
mergeStyles: _mergeStyles.mergeStyles,
props: newProps,
setState: setState,
isNestedStyle: _mergeStyles.isNestedStyle,
style: newStyle
}) || {};
newStyle = result.style || newStyle;
newProps = result.props && Object.keys(result.props).length ? _extends({}, newProps, result.props) : newProps;
var newComponentFields = result.componentFields || {};
Object.keys(newComponentFields).forEach(function (fieldName) {
component[fieldName] = newComponentFields[fieldName];
});
var newGlobalState = result.globalState || {};
Object.keys(newGlobalState).forEach(function (key) {
globalState[key] = newGlobalState[key];
});
});
if (newStyle !== props.style) {
newProps = _extends({}, newProps, { style: newStyle });
}
return newProps;
};
// Wrapper around React.cloneElement. To avoid processing the same element
// twice, whenever we clone an element add a special prop to make sure we don't
// process this element again.
var _cloneElement = function _cloneElement(renderedElement, newProps, newChildren) {
// Only add flag if this is a normal DOM element
if (typeof renderedElement.type === 'string') {
newProps = _extends({}, newProps, { _radiumDidResolveStyles: true });
}
return _react2.default.cloneElement(renderedElement, newProps, newChildren);
};
//
// The nucleus of Radium. resolveStyles is called on the rendered elements
// before they are returned in render. It iterates over the elements and
// children, rewriting props to add event handlers required to capture user
// interactions (e.g. mouse over). It also replaces the style prop because it
// adds in the various interaction styles (e.g. :hover).
//
resolveStyles = function resolveStyles(component, // ReactComponent, flow+eslint complaining
renderedElement) {
var // ReactElement
config = arguments.length <= 2 || arguments[2] === undefined ? DEFAULT_CONFIG : arguments[2];
var existingKeyMap = arguments[3];
var shouldCheckBeforeResolve = arguments.length <= 4 || arguments[4] === undefined ? false : arguments[4];
// ReactElement
existingKeyMap = existingKeyMap || {};
if (!renderedElement ||
// Bail if we've already processed this element. This ensures that only the
// owner of an element processes that element, since the owner's render
// function will be called first (which will always be the case, since you
// can't know what else to render until you render the parent component).
renderedElement.props && renderedElement.props._radiumDidResolveStyles ||
// Bail if this element is a radium enhanced element, because if it is,
// then it will take care of resolving its own styles.
shouldCheckBeforeResolve && !_shouldResolveStyles(renderedElement)) {
return renderedElement;
}
var newChildren = _resolveChildren({
children: renderedElement.props.children,
component: component,
config: config,
existingKeyMap: existingKeyMap
});
var newProps = _resolveProps({
component: component,
config: config,
existingKeyMap: existingKeyMap,
props: renderedElement.props
});
newProps = _runPlugins({
component: component,
config: config,
existingKeyMap: existingKeyMap,
props: newProps,
renderedElement: renderedElement
});
// If nothing changed, don't bother cloning the element. Might be a bit
// wasteful, as we add the sentinal to stop double-processing when we clone.
// Assume benign double-processing is better than unneeded cloning.
if (newChildren === renderedElement.props.children && newProps === renderedElement.props) {
return renderedElement;
}
return _cloneElement(renderedElement, newProps !== renderedElement.props ? newProps : {}, newChildren);
};
// Only for use by tests
var __isTestModeEnabled = false;
if (process.env.NODE_ENV !== 'production') {
resolveStyles.__clearStateForTests = function () {
globalState = {};
};
resolveStyles.__setTestMode = function (isEnabled) {
__isTestModeEnabled = isEnabled;
};
}
exports.default = resolveStyles;
module.exports = exports['default'];
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(8)))
/***/ },
/* 12 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = appendImportantToEachValue;
var _appendPxIfNeeded = __webpack_require__(13);
var _appendPxIfNeeded2 = _interopRequireDefault(_appendPxIfNeeded);
var _mapObject = __webpack_require__(14);
var _mapObject2 = _interopRequireDefault(_mapObject);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function appendImportantToEachValue(style) {
return (0, _mapObject2.default)(style, function (result, key) {
return (0, _appendPxIfNeeded2.default)(key, style[key]) + ' !important';
});
}
module.exports = exports['default'];
/***/ },
/* 13 */
/***/ function(module, exports) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = appendPxIfNeeded;
// Copied from https://github.com/facebook/react/blob/
// 102cd291899f9942a76c40a0e78920a6fe544dc1/
// src/renderers/dom/shared/CSSProperty.js
var isUnitlessNumber = {
animationIterationCount: true,
boxFlex: true,
boxFlexGroup: true,
boxOrdinalGroup: true,
columnCount: true,
flex: true,
flexGrow: true,
flexPositive: true,
flexShrink: true,
flexNegative: true,
flexOrder: true,
gridRow: true,
gridColumn: true,
fontWeight: true,
lineClamp: true,
lineHeight: true,
opacity: true,
order: true,
orphans: true,
tabSize: true,
widows: true,
zIndex: true,
zoom: true,
// SVG-related properties
fillOpacity: true,
stopOpacity: true,
strokeDashoffset: true,
strokeOpacity: true,
strokeWidth: true
};
function appendPxIfNeeded(propertyName, value) {
var needsPxSuffix = !isUnitlessNumber[propertyName] && typeof value === 'number' && value !== 0;
return needsPxSuffix ? value + 'px' : value;
}
module.exports = exports['default'];
/***/ },
/* 14 */
/***/ function(module, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = mapObject;
function mapObject(object, mapper) {
return Object.keys(object).reduce(function (result, key) {
result[key] = mapper(object[key], key);
return result;
}, {});
}
module.exports = exports['default'];
/***/ },
/* 15 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = cssRuleSetToString;
var _appendPxIfNeeded = __webpack_require__(13);
var _appendPxIfNeeded2 = _interopRequireDefault(_appendPxIfNeeded);
var _camelCasePropsToDashCase = __webpack_require__(16);
var _camelCasePropsToDashCase2 = _interopRequireDefault(_camelCasePropsToDashCase);
var _mapObject = __webpack_require__(14);
var _mapObject2 = _interopRequireDefault(_mapObject);
var _prefixer = __webpack_require__(17);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function createMarkupForStyles(style) {
return Object.keys(style).map(function (property) {
return property + ': ' + style[property] + ';';
}).join('\n');
}
function cssRuleSetToString(selector, rules, userAgent) {
if (!rules) {
return '';
}
var rulesWithPx = (0, _mapObject2.default)(rules, function (value, key) {
return (0, _appendPxIfNeeded2.default)(key, value);
});
var prefixedRules = (0, _prefixer.getPrefixedStyle)(rulesWithPx, userAgent);
var cssPrefixedRules = (0, _camelCasePropsToDashCase2.default)(prefixedRules);
var serializedRules = createMarkupForStyles(cssPrefixedRules);
return selector + '{' + serializedRules + '}';
}
module.exports = exports['default'];
/***/ },
/* 16 */
/***/ function(module, exports) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _camelCaseRegex = /([a-z])?([A-Z])/g;
var _camelCaseReplacer = function _camelCaseReplacer(match, p1, p2) {
return (p1 || '') + '-' + p2.toLowerCase();
};
var _camelCaseToDashCase = function _camelCaseToDashCase(s) {
return s.replace(_camelCaseRegex, _camelCaseReplacer);
};
var camelCasePropsToDashCase = function camelCasePropsToDashCase(prefixedStyle) {
// Since prefix is expected to work on inline style objects, we must
// translate the keys to dash case for rendering to CSS.
return Object.keys(prefixedStyle).reduce(function (result, key) {
var dashCaseKey = _camelCaseToDashCase(key);
// Fix IE vendor prefix
if (/^ms-/.test(dashCaseKey)) {
dashCaseKey = '-' + dashCaseKey;
}
result[dashCaseKey] = prefixedStyle[key];
return result;
}, {});
};
exports.default = camelCasePropsToDashCase;
module.exports = exports['default'];
/***/ },
/* 17 */
/***/ function(module, exports, __webpack_require__) {
/* WEBPACK VAR INJECTION */(function(global, process) {'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; }; /**
* Based on https://github.com/jsstyles/css-vendor, but without having to
* convert between different cases all the time.
*
*
*/
exports.getPrefixedKeyframes = getPrefixedKeyframes;
exports.getPrefixedStyle = getPrefixedStyle;
var _inlineStylePrefixer = __webpack_require__(18);
var _inlineStylePrefixer2 = _interopRequireDefault(_inlineStylePrefixer);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function transformValues(style) {
return Object.keys(style).reduce(function (newStyle, key) {
var value = style[key];
if (Array.isArray(value)) {
value = value.join(';' + key + ':');
} else if (value && (typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object' && typeof value.toString === 'function') {
value = value.toString();
}
newStyle[key] = value;
return newStyle;
}, {});
}
var _hasWarnedAboutUserAgent = false;
var _lastUserAgent = void 0;
var _cachedPrefixer = void 0;
function getPrefixer(userAgent) {
var actualUserAgent = userAgent || global && global.navigator && global.navigator.userAgent;
if (process.env.NODE_ENV !== 'production') {
if (!actualUserAgent && !_hasWarnedAboutUserAgent) {
/* eslint-disable no-console */
console.warn('Radium: userAgent should be supplied for server-side rendering. See ' + 'https://github.com/FormidableLabs/radium/tree/master/docs/api#radium ' + 'for more information.');
/* eslint-enable no-console */
_hasWarnedAboutUserAgent = true;
}
}
if (!_cachedPrefixer || actualUserAgent !== _lastUserAgent) {
if (actualUserAgent === 'all') {
_cachedPrefixer = {
prefix: _inlineStylePrefixer2.default.prefixAll,
prefixedKeyframes: 'keyframes'
};
} else {
_cachedPrefixer = new _inlineStylePrefixer2.default({ userAgent: actualUserAgent });
}
_lastUserAgent = actualUserAgent;
}
return _cachedPrefixer;
}
function getPrefixedKeyframes(userAgent) {
return getPrefixer(userAgent).prefixedKeyframes;
}
// Returns a new style object with vendor prefixes added to property names
// and values.
function getPrefixedStyle(style, userAgent) {
var styleWithFallbacks = transformValues(style);
var prefixer = getPrefixer(userAgent);
var prefixedStyle = prefixer.prefix(styleWithFallbacks);
return prefixedStyle;
}
/* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }()), __webpack_require__(8)