kitchensink
Version:
Dispatch's awesome components and style guide
1,468 lines (1,117 loc) • 151 kB
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("react"));
else if(typeof define === 'function' && define.amd)
define(["react"], factory);
else if(typeof exports === 'object')
exports["Radium"] = factory(require("react"));
else
root["Radium"] = factory(root["React"]);
})(this, function(__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__) {
/* WEBPACK VAR INJECTION */(function(process) {'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _enhancer = __webpack_require__(2);
var _enhancer2 = _interopRequireDefault(_enhancer);
var _plugins = __webpack_require__(48);
var _plugins2 = _interopRequireDefault(_plugins);
var _style = __webpack_require__(60);
var _style2 = _interopRequireDefault(_style);
var _styleRoot = __webpack_require__(61);
var _styleRoot2 = _interopRequireDefault(_styleRoot);
var _getState = __webpack_require__(44);
var _getState2 = _interopRequireDefault(_getState);
var _keyframes = __webpack_require__(63);
var _keyframes2 = _interopRequireDefault(_keyframes);
var _resolveStyles = __webpack_require__(5);
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__(1)))
/***/ },
/* 1 */
/***/ function(module, exports) {
'use strict';
// shim for using process in browser
var process = module.exports = {};
// cached from whatever global is present so that test runners that stub it
// don't break things. But we need to wrap it in a try catch in case it is
// wrapped in strict mode code which doesn't define any globals. It's inside a
// function because try/catches deoptimize in certain engines.
var cachedSetTimeout;
var cachedClearTimeout;
(function () {
try {
cachedSetTimeout = setTimeout;
} catch (e) {
cachedSetTimeout = function cachedSetTimeout() {
throw new Error('setTimeout is not defined');
};
}
try {
cachedClearTimeout = clearTimeout;
} catch (e) {
cachedClearTimeout = function cachedClearTimeout() {
throw new Error('clearTimeout is not defined');
};
}
})();
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 = cachedSetTimeout(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;
cachedClearTimeout(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) {
cachedSetTimeout(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;
};
/***/ },
/* 2 */
/***/ 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__(3);
var _styleKeeper = __webpack_require__(4);
var _styleKeeper2 = _interopRequireDefault(_styleKeeper);
var _resolveStyles = __webpack_require__(5);
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 isStateless(component) {
return !component.render && !(component.prototype && component.prototype.render);
}
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 (isStateless(ComposedComponent)) {
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__(1)))
/***/ },
/* 3 */
/***/ function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_3__;
/***/ },
/* 4 */
/***/ 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'];
/***/ },
/* 5 */
/***/ 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__(6);
var _appendImportantToEachValue2 = _interopRequireDefault(_appendImportantToEachValue);
var _cssRuleSetToString = __webpack_require__(9);
var _cssRuleSetToString2 = _interopRequireDefault(_cssRuleSetToString);
var _getState = __webpack_require__(44);
var _getState2 = _interopRequireDefault(_getState);
var _getStateKey = __webpack_require__(45);
var _getStateKey2 = _interopRequireDefault(_getStateKey);
var _hash = __webpack_require__(46);
var _hash2 = _interopRequireDefault(_hash);
var _mergeStyles = __webpack_require__(47);
var _plugins = __webpack_require__(48);
var _plugins2 = _interopRequireDefault(_plugins);
var _exenv = __webpack_require__(58);
var _exenv2 = _interopRequireDefault(_exenv);
var _react = __webpack_require__(3);
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.removeNestedStyles, _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, { 'data-radium': 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['data-radium'] ||
// 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__(1)))
/***/ },
/* 6 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = appendImportantToEachValue;
var _appendPxIfNeeded = __webpack_require__(7);
var _appendPxIfNeeded2 = _interopRequireDefault(_appendPxIfNeeded);
var _mapObject = __webpack_require__(8);
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'];
/***/ },
/* 7 */
/***/ 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'];
/***/ },
/* 8 */
/***/ 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"];
/***/ },
/* 9 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = cssRuleSetToString;
var _appendPxIfNeeded = __webpack_require__(7);
var _appendPxIfNeeded2 = _interopRequireDefault(_appendPxIfNeeded);
var _camelCasePropsToDashCase = __webpack_require__(10);
var _camelCasePropsToDashCase2 = _interopRequireDefault(_camelCasePropsToDashCase);
var _mapObject = __webpack_require__(8);
var _mapObject2 = _interopRequireDefault(_mapObject);
var _prefixer = __webpack_require__(11);
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'];
/***/ },
/* 10 */
/***/ 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'];
/***/ },
/* 11 */
/***/ 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__(12);
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__(1)))
/***/ },
/* 12 */
/***/ 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;
};
}();
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');
}
}
var _inlineStylePrefixAll = __webpack_require__(13);
var _inlineStylePrefixAll2 = _interopRequireDefault(_inlineStylePrefixAll);
var _utilsGetBrowserInformation = __webpack_require__(28);
var _utilsGetBrowserInformation2 = _interopRequireDefault(_utilsGetBrowserInformation);
var _utilsGetPrefixedKeyframes = __webpack_require__(30);
var _utilsGetPrefixedKeyframes2 = _interopRequireDefault(_utilsGetPrefixedKeyframes);
var _utilsCapitalizeString = __webpack_require__(31);
var _utilsCapitalizeString2 = _interopRequireDefault(_utilsCapitalizeString);
var _utilsAssign = __webpack_require__(32);
var _utilsAssign2 = _interopRequireDefault(_utilsAssign);
var _prefixProps = __webpack_require__(33);
var _prefixProps2 = _interopRequireDefault(_prefixProps);
var _pluginsCalc = __webpack_require__(34);
var _pluginsCalc2 = _interopRequireDefault(_pluginsCalc);
var _pluginsCursor = __webpack_require__(36);
var _pluginsCursor2 = _interopRequireDefault(_pluginsCursor);
var _pluginsFlex = __webpack_require__(37);
var _pluginsFlex2 = _interopRequireDefault(_pluginsFlex);
var _pluginsSizing = __webpack_require__(38);
var _pluginsSizing2 = _interopRequireDefault(_pluginsSizing);
var _pluginsGradient = __webpack_require__(39);
var _pluginsGradient2 = _interopRequireDefault(_pluginsGradient);
var _pluginsTransition = __webpack_require__(40);
var _pluginsTransition2 = _interopRequireDefault(_pluginsTransition);
// special flexbox specifications
var _pluginsFlexboxIE = __webpack_require__(42);
var _pluginsFlexboxIE2 = _interopRequireDefault(_pluginsFlexboxIE);
var _pluginsFlexboxOld = __webpack_require__(43);
var _pluginsFlexboxOld2 = _interopRequireDefault(_pluginsFlexboxOld);
var plugins = [_pluginsCalc2['default'], _pluginsCursor2['default'], _pluginsSizing2['default'], _pluginsGradient2['default'], _pluginsTransition2['default'], _pluginsFlexboxIE2['default'], _pluginsFlexboxOld2['default'],
// this must be run AFTER the flexbox specs
_pluginsFlex2['default']];
var Prefixer = function () {
/**
* Instantiante a new prefixer
* @param {string} userAgent - userAgent to gather prefix information according to caniuse.com
* @param {string} keepUnprefixed - keeps unprefixed properties and values
*/
function Prefixer() {
var _this = this;
var options = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
_classCallCheck(this, Prefixer);
var defaultUserAgent = typeof navigator !== 'undefined' ? navigator.userAgent : undefined;
this._userAgent = options.userAgent || defaultUserAgent;
this._keepUnprefixed = options.keepUnprefixed || false;
this._browserInfo = (0, _utilsGetBrowserInformation2['default'])(this._userAgent);
// Checks if the userAgent was resolved correctly
if (this._browserInfo && this._browserInfo.prefix) {
// set additional prefix information
this.cssPrefix = this._browserInfo.prefix.css;
this.jsPrefix = this._browserInfo.prefix.inline;
this.prefixedKeyframes = (0, _utilsGetPrefixedKeyframes2['default'])(this._browserInfo);
} else {
this._usePrefixAllFallback = true;
return false;
}
var data = this._browserInfo.browser && _prefixProps2['default'][this._browserInfo.browser];
if (data) {
this._requiresPrefix = Object.keys(data).filter(function (key) {
return data[key] >= _this._browserInfo.version;
}).reduce(function (result, name) {
result[name] = true;
return result;
}, {});
this._hasPropsRequiringPrefix = Object.keys(this._requiresPrefix).length > 0;
} else {
this._usePrefixAllFallback = true;
}
}
/**
* Returns a prefixed version of the style object
* @param {Object} styles - Style object that gets prefixed properties added
* @returns {Object} - Style object with prefixed properties and values
*/
_createClass(Prefixer, [{
key: 'prefix',
value: function prefix(styles) {
var _this2 = this;
// use prefixAll as fallback if userAgent can not be resolved
if (this._usePrefixAllFallback) {
return (0, _inlineStylePrefixAll2['default'])(styles);
}
// only add prefixes if needed
if (!this._hasPropsRequiringPrefix) {
return styles;
}
styles = (0, _utilsAssign2['default'])({}, styles);
Object.keys(styles).forEach(function (property) {
var value = styles[property];
if (value instanceof Object) {
// recurse through nested style objects
styles[property] = _this2.prefix(value);
} else {
// add prefixes if needed
if (_this2._requiresPrefix[property]) {
styles[_this2.jsPrefix + (0, _utilsCapitalizeString2['default'])(property)] = value;
if (!_this2._keepUnprefixed) {
delete styles[property];
}
}
// resolve plugins
plugins.forEach(function (plugin) {
// generates a new plugin interface with current data
var resolvedStyles = plugin({
property: property,
value: value,
styles: styles,
browserInfo: _this2._browserInfo,
prefix: {
js: _this2.jsPrefix,
css: _this2.cssPrefix,
keyframes: _this2.prefixedKeyframes
},
keepUnprefixed: _this2._keepUnprefixed,
requiresPrefix: _this2._requiresPrefix
});
(0, _utilsAssign2['default'])(styles, resolvedStyles);
});
}
});
return styles;
}
/**
* Returns a prefixed version of the style object using all vendor prefixes
* @param {Object} styles - Style object that gets prefixed properties added
* @returns {Object} - Style object with prefixed properties and values
*/
}], [{
key: 'prefixAll',
value: function prefixAll(styles) {
return (0, _inlineStylePrefixAll2['default'])(styles);
}
}]);
return Prefixer;
}();
exports['default'] = Prefixer;
module.exports = exports['default'];
/***/ },
/* 13 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, '__esModule', {
value: true
});
exports['default'] = prefixAll;
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : { 'default': obj };
}
var _prefixProps = __webpack_require__(14);
var _prefixProps2 = _interopRequireDefault(_prefixProps);
var _utilsCapitalizeString = __webpack_require__(15);
var _utilsCapitalizeString2 = _interopRequireDefault(_utilsCapitalizeString);
var _utilsAssign = __webpack_require__(16);
var _utilsAssign2 = _interopRequireDefault(_utilsAssign);
var _pluginsCalc = __webpack_require__(17);
var _pluginsCalc2 = _interopRequireDefault(_pluginsCalc);
var _pluginsCursor = __webpack_require__(21);
var _pluginsCursor2 = _interopRequireDefault(_pluginsCursor);
var _pluginsFlex = __webpack_require__(22);
var _pluginsFlex2 = _interopRequireDefault(_pluginsFlex);
var _pluginsSizing = __webpack_require__(23);
var _pluginsSizing2 = _interopRequireDefault(_pluginsSizing);
var _pluginsGradient = __webpack_require__(24);
var _pluginsGradient2 = _interopRequireDefault(_pluginsGradient);
var _pluginsTransition = __webpack_require__(25);
var _pluginsTransition2 = _interopRequireDefault(_pluginsTransition);
// special flexbox specifications
var _pluginsFlexboxIE = __webpack_require__(26);
var _pluginsFlexboxIE2 = _interopRequireDefault(_pluginsFlexboxIE);
var _pluginsFlexboxOld = __webpack_require__(27);
var _pluginsFlexboxOld2 = _interopRequireDefault(_pluginsFlexboxOld);
var plugins = [_pluginsCalc2['default'], _pluginsCursor2['default'], _pluginsSizing2['default'], _pluginsGradient2['default'], _pluginsTransition2['default'], _pluginsFlexboxIE2['default'], _pluginsFlexboxOld2['default'], _pluginsFlex2['default']];
/**
* Returns a prefixed version of the style object using all vendor prefixes
* @param {Object} styles - Style object that gets prefixed properties added
* @returns {Object} - Style object with prefixed properties and values
*/
function prefixAll(styles) {
return Object.keys(styles).reduce(function (prefixedStyles, property) {
var value = styles[property];
if (value instanceof Object && !Array.isArray(value)) {
// recurse through nested style objects
prefixedStyles[property] = prefixAll(value);
} else {
Object.keys(_prefixProps2['default']).forEach(function (prefix) {
var properties = _prefixProps2['default'][prefix];
// add prefixes if needed
if (properties[property]) {
prefixedStyles[prefix + (0, _utilsCapitalizeString2['default'])(property)] = value;
}
});
// resolve every special plugins
plugins.forEach(function (plugin) {
return (0, _utilsAssign2['default'])(prefixedStyles, plugin(property, value));
});
}
return prefixedStyles;
}, styles);
}
module.exports = exports['default'];
/***/ },
/* 14 */
/***/ function(module, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = { "Webkit": { "transform": true, "transformOrigin": true, "transformOriginX": true, "transformOriginY": true, "backfaceVisibility": true, "perspective": true, "perspectiveOrigin": true, "transformStyle": true, "transformOriginZ": true, "animation": true, "animationDelay": true, "animationDirection": true, "animationFillMode": true, "animationDuration": true, "animationIterationCount": true, "animationName": true, "animationPlayState": true, "animationTimingFunction": true, "appearance": true, "userSelect": true, "fontKerning": true, "textEmphasisPosition": true, "textEmphasis": true, "textEmphasisStyle": true, "textEmphasisColor": true, "boxDecorationBreak": true, "clipPath": true, "maskImage": true, "maskMode": true, "maskRepeat": true, "maskPosition": true, "maskClip": true, "maskOrigin": true, "maskSize": true, "maskComposite": true, "mask": true, "maskBorderSource": true, "maskBorderMode": true, "maskBorderSlice": true, "maskBorderWidth": true, "maskBorderOutset": true, "maskBorderRepeat": true, "maskBorder": true, "maskType": true, "textDecorationStyle": true, "textDecorationSkip": true, "textDecorationLine": true, "textDecorationColor": true, "filter": true, "fontFeatureSettings": true, "breakAfter": true, "breakBefore": true, "breakInside": true, "columnCount": true, "columnFill": true, "columnGap": true, "columnRule": true, "columnRuleColor": true, "columnRuleStyle": true, "columnRuleWidth": true, "columns": true, "columnSpan": true, "columnWidth": true, "flex": true, "flexBasis": true, "flexDirection": true, "flexGrow": true, "flexFlow": true, "flexShrink": true, "flexWrap": true, "alignContent": true, "alignItems": true, "alignSelf": true, "justifyContent": true, "or