Comparing version 3.0.1 to 3.1.0
@@ -5,3 +5,4 @@ 'use strict'; | ||
var React = _interopDefault(require('react')); | ||
var React = require('react'); | ||
var React__default = _interopDefault(React); | ||
var glamor = require('glamor'); | ||
@@ -374,3 +375,3 @@ | ||
/* istanbul ignore next */ | ||
if (React.version.slice(0, 4) === '15.5') { | ||
if (React__default.version.slice(0, 4) === '15.5') { | ||
/* istanbul ignore next */ | ||
@@ -385,10 +386,299 @@ try { | ||
/* istanbul ignore next */ | ||
PropTypes = PropTypes || React.PropTypes; | ||
PropTypes = PropTypes || React__default.PropTypes; | ||
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; }; | ||
/** Mitt: Tiny (~200b) functional event emitter / pubsub. | ||
* @name mitt | ||
* @returns {Mitt} | ||
*/ | ||
function mitt(all) { | ||
all = all || Object.create(null); | ||
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } } | ||
return { | ||
/** | ||
* Register an event handler for the given type. | ||
* | ||
* @param {String} type Type of event to listen for, or `"*"` for all events | ||
* @param {Function} handler Function to call in response to given event | ||
* @return {Object} the `mitt` instance for chaining | ||
* @memberOf mitt | ||
*/ | ||
on: function on(type, handler) { | ||
(all[type] || (all[type] = [])).push(handler); | ||
}, | ||
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } | ||
/** | ||
* Remove an event handler for the given type. | ||
* | ||
* @param {String} type Type of event to unregister `handler` from, or `"*"` | ||
* @param {Function} handler Handler function to remove | ||
* @return {Object} the `mitt` instance for chaining | ||
* @memberOf mitt | ||
*/ | ||
off: function off(type, handler) { | ||
var e = all[type] || (all[type] = []); | ||
e.splice(e.indexOf(handler) >>> 0, 1); | ||
}, | ||
/** | ||
* Invoke all handlers for the given type. | ||
* If present, `"*"` handlers are invoked prior to type-matched handlers. | ||
* | ||
* @param {String} type The event type to invoke | ||
* @param {Any} [evt] Any value (object is recommended and powerful), passed to each handler | ||
* @return {Object} the `mitt` instance for chaining | ||
* @memberof mitt | ||
*/ | ||
emit: function emit(type, evt) { | ||
(all[type] || []).map(function (handler) { handler(evt); }); | ||
(all['*'] || []).map(function (handler) { handler(type, evt); }); | ||
} | ||
}; | ||
} | ||
function createBroadcast (initialState, channel) { | ||
if ( channel === void 0 ) channel = '__brcast__'; | ||
var emitter = mitt(); | ||
var currentState = initialState; | ||
var getState = function () { return currentState; }; | ||
var setState = function (state) { | ||
currentState = state; | ||
emitter.emit(channel, currentState); | ||
}; | ||
var subscribe = function (listener) { | ||
emitter.on(channel, listener); | ||
return function unsubscribe () { | ||
emitter.off(channel, listener); | ||
} | ||
}; | ||
return {getState: getState, setState: setState, subscribe: subscribe} | ||
} | ||
var classCallCheck = function (instance, Constructor) { | ||
if (!(instance instanceof Constructor)) { | ||
throw new TypeError("Cannot call a class as a function"); | ||
} | ||
}; | ||
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 defineProperty = function (obj, key, value) { | ||
if (key in obj) { | ||
Object.defineProperty(obj, key, { | ||
value: value, | ||
enumerable: true, | ||
configurable: true, | ||
writable: true | ||
}); | ||
} else { | ||
obj[key] = value; | ||
} | ||
return 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; | ||
}; | ||
var inherits = function (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 objectWithoutProperties = function (obj, keys) { | ||
var target = {}; | ||
for (var i in obj) { | ||
if (keys.indexOf(i) >= 0) continue; | ||
if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; | ||
target[i] = obj[i]; | ||
} | ||
return target; | ||
}; | ||
var possibleConstructorReturn = function (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; | ||
}; | ||
var toConsumableArray = function (arr) { | ||
if (Array.isArray(arr)) { | ||
for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i]; | ||
return arr2; | ||
} else { | ||
return Array.from(arr); | ||
} | ||
}; | ||
var CHANNEL = '__glamorous__'; | ||
/** | ||
* This is a component which will provide a theme to the entire tree | ||
* via context and event listener | ||
* (because pure components block context updates) | ||
* inspired by the styled-components implementation | ||
* https://github.com/styled-components/styled-components | ||
* @param {Object} theme the theme object.. | ||
*/ | ||
var ThemeProvider = function (_Component) { | ||
inherits(ThemeProvider, _Component); | ||
function ThemeProvider() { | ||
var _ref; | ||
var _temp, _this, _ret; | ||
classCallCheck(this, ThemeProvider); | ||
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | ||
args[_key] = arguments[_key]; | ||
} | ||
return _ret = (_temp = (_this = possibleConstructorReturn(this, (_ref = ThemeProvider.__proto__ || Object.getPrototypeOf(ThemeProvider)).call.apply(_ref, [this].concat(args))), _this), _this.broadcast = createBroadcast(_this.props.theme), _this.setOuterTheme = function (theme) { | ||
_this.outerTheme = theme; | ||
}, _temp), possibleConstructorReturn(_this, _ret); | ||
} | ||
createClass(ThemeProvider, [{ | ||
key: 'getTheme', | ||
// create theme, by merging with outer theme, if present | ||
value: function getTheme(passedTheme) { | ||
var theme = passedTheme || this.props.theme; | ||
return _extends({}, this.outerTheme, theme); | ||
} | ||
}, { | ||
key: 'getChildContext', | ||
value: function getChildContext() { | ||
return defineProperty({}, CHANNEL, this.broadcast); | ||
} | ||
}, { | ||
key: 'componentDidMount', | ||
value: function componentDidMount() { | ||
// create a new subscription for keeping track of outer theme, if present | ||
if (this.context[CHANNEL]) { | ||
this.unsubscribe = this.context[CHANNEL].subscribe(this.setOuterTheme); | ||
} | ||
} | ||
}, { | ||
key: 'componentWillMount', | ||
value: function componentWillMount() { | ||
// set broadcast state by merging outer theme with own | ||
if (this.context[CHANNEL]) { | ||
this.setOuterTheme(this.context[CHANNEL].getState()); | ||
this.broadcast.setState(this.getTheme()); | ||
} | ||
} | ||
}, { | ||
key: 'componentWillReceiveProps', | ||
value: function componentWillReceiveProps(nextProps) { | ||
if (this.props.theme !== nextProps.theme) { | ||
this.broadcast.setState(this.getTheme(nextProps.theme)); | ||
} | ||
} | ||
}, { | ||
key: 'componentWillUnmount', | ||
value: function componentWillUnmount() { | ||
this.unsubscribe && this.unsubscribe(); | ||
} | ||
}, { | ||
key: 'render', | ||
value: function render() { | ||
return this.props.children ? React__default.Children.only(this.props.children) : null; | ||
} | ||
}]); | ||
return ThemeProvider; | ||
}(React.Component); | ||
ThemeProvider.childContextTypes = defineProperty({}, CHANNEL, PropTypes.object.isRequired); | ||
ThemeProvider.contextTypes = defineProperty({}, CHANNEL, PropTypes.object); | ||
ThemeProvider.propTypes = { | ||
theme: PropTypes.object.isRequired, | ||
children: PropTypes.node | ||
}; | ||
/* | ||
@@ -408,3 +698,3 @@ * This is a relatively small abstraction that's ripe for open sourcing. | ||
*/ | ||
function glamorous(comp) { | ||
function glamorous$2(comp) { | ||
var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}, | ||
@@ -433,43 +723,102 @@ rootEl = _ref.rootEl, | ||
* props to the underlying component. | ||
* @param {Object} props the props for the component. className is | ||
* handled specially so any glamor-provided classNames will be | ||
* merged predicably (with no regard to specificity) | ||
* @param {Object} theme the theme object | ||
* @return {ReactElement} React.createElement | ||
*/ | ||
function GlamorousComponent(props) { | ||
var className = props.className, | ||
rest = _objectWithoutProperties(props, ['className']); | ||
var GlamorousComponent = function (_Component) { | ||
inherits(GlamorousComponent, _Component); | ||
var _splitProps = splitProps(rest, GlamorousComponent), | ||
toForward = _splitProps.toForward, | ||
cssOverrides = _splitProps.cssOverrides; | ||
function GlamorousComponent() { | ||
var _ref2; | ||
// create className to apply | ||
var _temp, _this, _ret; | ||
classCallCheck(this, GlamorousComponent); | ||
var mappedArgs = GlamorousComponent.styles.map(mapToPropsCall); | ||
for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { | ||
args[_key2] = arguments[_key2]; | ||
} | ||
var _extractGlamorStyles = extractGlamorStyles(className), | ||
parentGlamorStyles = _extractGlamorStyles.glamorStyles, | ||
glamorlessClassName = _extractGlamorStyles.glamorlessClassName; | ||
return _ret = (_temp = (_this = possibleConstructorReturn(this, (_ref2 = GlamorousComponent.__proto__ || Object.getPrototypeOf(GlamorousComponent)).call.apply(_ref2, [this].concat(args))), _this), _this.state = { theme: null }, _this.setTheme = function (theme) { | ||
return _this.setState({ theme: theme }); | ||
}, _temp), possibleConstructorReturn(_this, _ret); | ||
} | ||
var glamorClassName = glamor.css.apply(undefined, _toConsumableArray(mappedArgs).concat(_toConsumableArray(parentGlamorStyles), [cssOverrides])).toString(); | ||
var fullClassName = joinClasses(glamorlessClassName, glamorClassName); | ||
createClass(GlamorousComponent, [{ | ||
key: 'componentWillMount', | ||
value: function componentWillMount() { | ||
var theme = this.props.theme; | ||
return React.createElement(GlamorousComponent.comp, _extends({ | ||
className: fullClassName | ||
}, toForward)); | ||
if (this.context[CHANNEL]) { | ||
// if a theme is provided via props, it takes precedence over context | ||
this.setTheme(theme ? theme : this.context[CHANNEL].getState()); | ||
} else { | ||
this.setTheme(theme || {}); | ||
} | ||
} | ||
}, { | ||
key: 'componentWillReceiveProps', | ||
value: function componentWillReceiveProps(nextProps) { | ||
if (this.props.theme !== nextProps.theme) { | ||
this.setTheme(nextProps.theme); | ||
} | ||
} | ||
}, { | ||
key: 'componentDidMount', | ||
value: function componentDidMount() { | ||
if (this.context[CHANNEL] && !this.props.theme) { | ||
// subscribe to future theme changes | ||
this.unsubscribe = this.context[CHANNEL].subscribe(this.setTheme); | ||
} | ||
} | ||
}, { | ||
key: 'componentWillUnmount', | ||
value: function componentWillUnmount() { | ||
// cleanup subscription | ||
this.unsubscribe && this.unsubscribe(); | ||
} | ||
}, { | ||
key: 'render', | ||
value: function render() { | ||
var _this2 = this; | ||
function mapToPropsCall(glamorRules) { | ||
if (typeof glamorRules === 'function') { | ||
return glamorRules(props); | ||
var _props = this.props, | ||
className = _props.className, | ||
rest = objectWithoutProperties(_props, ['className']); | ||
var _splitProps = splitProps(rest, GlamorousComponent), | ||
toForward = _splitProps.toForward, | ||
cssOverrides = _splitProps.cssOverrides; | ||
// create className to apply | ||
var mappedArgs = GlamorousComponent.styles.map(function (glamorRules) { | ||
if (typeof glamorRules === 'function') { | ||
return glamorRules(_this2.props, _extends({}, _this2.state.theme)); | ||
} | ||
return glamorRules; | ||
}); | ||
var _extractGlamorStyles = extractGlamorStyles(className), | ||
parentGlamorStyles = _extractGlamorStyles.glamorStyles, | ||
glamorlessClassName = _extractGlamorStyles.glamorlessClassName; | ||
var glamorClassName = glamor.css.apply(undefined, toConsumableArray(mappedArgs).concat(toConsumableArray(parentGlamorStyles), [cssOverrides])).toString(); | ||
var fullClassName = joinClasses(glamorlessClassName, glamorClassName); | ||
return React__default.createElement(GlamorousComponent.comp, _extends({ | ||
className: fullClassName | ||
}, toForward)); | ||
} | ||
return glamorRules; | ||
} | ||
} | ||
}]); | ||
return GlamorousComponent; | ||
}(React.Component); | ||
GlamorousComponent.propTypes = { | ||
className: PropTypes.string, | ||
cssOverrides: PropTypes.object | ||
cssOverrides: PropTypes.object, | ||
theme: PropTypes.object | ||
}; | ||
GlamorousComponent.contextTypes = defineProperty({}, CHANNEL, PropTypes.object); | ||
Object.assign(GlamorousComponent, getGlamorousComponentMetadata({ comp: comp, styles: styles, rootEl: rootEl, displayName: displayName })); | ||
@@ -480,7 +829,7 @@ return GlamorousComponent; | ||
function getGlamorousComponentMetadata(_ref2) { | ||
var comp = _ref2.comp, | ||
styles = _ref2.styles, | ||
rootEl = _ref2.rootEl, | ||
displayName = _ref2.displayName; | ||
function getGlamorousComponentMetadata(_ref3) { | ||
var comp = _ref3.comp, | ||
styles = _ref3.styles, | ||
rootEl = _ref3.rootEl, | ||
displayName = _ref3.displayName; | ||
@@ -516,4 +865,4 @@ var componentsComp = comp.comp ? comp.comp : comp; | ||
*/ | ||
Object.assign(glamorous, domElements.reduce(function (getters, tag) { | ||
getters[tag] = glamorous(tag); | ||
Object.assign(glamorous$2, domElements.reduce(function (getters, tag) { | ||
getters[tag] = glamorous$2(tag); | ||
return getters; | ||
@@ -532,5 +881,5 @@ }, {})); | ||
*/ | ||
Object.assign(glamorous, domElements.reduce(function (comps, tag) { | ||
Object.assign(glamorous$2, domElements.reduce(function (comps, tag) { | ||
var capitalTag = capitalize(tag); | ||
comps[capitalTag] = glamorous[tag](); | ||
comps[capitalTag] = glamorous$2[tag](); | ||
comps[capitalTag].displayName = 'glamorous.' + capitalTag; | ||
@@ -568,10 +917,9 @@ comps[capitalTag].propsAreCssOverrides = true; | ||
function splitProps(_ref3, _ref4) { | ||
var propsAreCssOverrides = _ref4.propsAreCssOverrides, | ||
rootEl = _ref4.rootEl; | ||
function splitProps(_ref4, _ref5) { | ||
var propsAreCssOverrides = _ref5.propsAreCssOverrides, | ||
rootEl = _ref5.rootEl; | ||
var _ref4$css = _ref4.css, | ||
cssOverrides = _ref4$css === undefined ? {} : _ref4$css, | ||
rest = objectWithoutProperties(_ref4, ['css']); | ||
var _ref3$css = _ref3.css, | ||
cssOverrides = _ref3$css === undefined ? {} : _ref3$css, | ||
rest = _objectWithoutProperties(_ref3, ['css']); | ||
var returnValue = { toForward: {}, cssOverrides: {} }; | ||
@@ -596,4 +944,4 @@ if (!propsAreCssOverrides) { | ||
function joinClasses() { | ||
for (var _len2 = arguments.length, classes = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { | ||
classes[_key2] = arguments[_key2]; | ||
for (var _len3 = arguments.length, classes = Array(_len3), _key3 = 0; _key3 < _len3; _key3++) { | ||
classes[_key3] = arguments[_key3]; | ||
} | ||
@@ -604,2 +952,20 @@ | ||
var glamorousStar = Object.freeze({ | ||
default: glamorous$2, | ||
ThemeProvider: ThemeProvider | ||
}); | ||
var glamorous = glamorous$2; | ||
Object.assign(glamorous, Object.keys(glamorousStar).reduce(function (e, prop) { | ||
if (prop !== 'default') { | ||
// eslint-disable-next-line import/namespace | ||
e[prop] = glamorousStar[prop]; | ||
} | ||
return e; | ||
}, {})); | ||
module.exports = glamorous; | ||
//# sourceMappingURL=glamorous.cjs.js.map |
@@ -1,2 +0,2 @@ | ||
import React from 'react'; | ||
import React, { Component } from 'react'; | ||
import { css, styleSheet } from 'glamor'; | ||
@@ -381,8 +381,297 @@ | ||
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; }; | ||
/** Mitt: Tiny (~200b) functional event emitter / pubsub. | ||
* @name mitt | ||
* @returns {Mitt} | ||
*/ | ||
function mitt(all) { | ||
all = all || Object.create(null); | ||
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } } | ||
return { | ||
/** | ||
* Register an event handler for the given type. | ||
* | ||
* @param {String} type Type of event to listen for, or `"*"` for all events | ||
* @param {Function} handler Function to call in response to given event | ||
* @return {Object} the `mitt` instance for chaining | ||
* @memberOf mitt | ||
*/ | ||
on: function on(type, handler) { | ||
(all[type] || (all[type] = [])).push(handler); | ||
}, | ||
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } | ||
/** | ||
* Remove an event handler for the given type. | ||
* | ||
* @param {String} type Type of event to unregister `handler` from, or `"*"` | ||
* @param {Function} handler Handler function to remove | ||
* @return {Object} the `mitt` instance for chaining | ||
* @memberOf mitt | ||
*/ | ||
off: function off(type, handler) { | ||
var e = all[type] || (all[type] = []); | ||
e.splice(e.indexOf(handler) >>> 0, 1); | ||
}, | ||
/** | ||
* Invoke all handlers for the given type. | ||
* If present, `"*"` handlers are invoked prior to type-matched handlers. | ||
* | ||
* @param {String} type The event type to invoke | ||
* @param {Any} [evt] Any value (object is recommended and powerful), passed to each handler | ||
* @return {Object} the `mitt` instance for chaining | ||
* @memberof mitt | ||
*/ | ||
emit: function emit(type, evt) { | ||
(all[type] || []).map(function (handler) { handler(evt); }); | ||
(all['*'] || []).map(function (handler) { handler(type, evt); }); | ||
} | ||
}; | ||
} | ||
function createBroadcast (initialState, channel) { | ||
if ( channel === void 0 ) channel = '__brcast__'; | ||
var emitter = mitt(); | ||
var currentState = initialState; | ||
var getState = function () { return currentState; }; | ||
var setState = function (state) { | ||
currentState = state; | ||
emitter.emit(channel, currentState); | ||
}; | ||
var subscribe = function (listener) { | ||
emitter.on(channel, listener); | ||
return function unsubscribe () { | ||
emitter.off(channel, listener); | ||
} | ||
}; | ||
return {getState: getState, setState: setState, subscribe: subscribe} | ||
} | ||
var classCallCheck = function (instance, Constructor) { | ||
if (!(instance instanceof Constructor)) { | ||
throw new TypeError("Cannot call a class as a function"); | ||
} | ||
}; | ||
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 defineProperty = function (obj, key, value) { | ||
if (key in obj) { | ||
Object.defineProperty(obj, key, { | ||
value: value, | ||
enumerable: true, | ||
configurable: true, | ||
writable: true | ||
}); | ||
} else { | ||
obj[key] = value; | ||
} | ||
return 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; | ||
}; | ||
var inherits = function (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 objectWithoutProperties = function (obj, keys) { | ||
var target = {}; | ||
for (var i in obj) { | ||
if (keys.indexOf(i) >= 0) continue; | ||
if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; | ||
target[i] = obj[i]; | ||
} | ||
return target; | ||
}; | ||
var possibleConstructorReturn = function (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; | ||
}; | ||
var toConsumableArray = function (arr) { | ||
if (Array.isArray(arr)) { | ||
for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i]; | ||
return arr2; | ||
} else { | ||
return Array.from(arr); | ||
} | ||
}; | ||
var CHANNEL = '__glamorous__'; | ||
/** | ||
* This is a component which will provide a theme to the entire tree | ||
* via context and event listener | ||
* (because pure components block context updates) | ||
* inspired by the styled-components implementation | ||
* https://github.com/styled-components/styled-components | ||
* @param {Object} theme the theme object.. | ||
*/ | ||
var ThemeProvider = function (_Component) { | ||
inherits(ThemeProvider, _Component); | ||
function ThemeProvider() { | ||
var _ref; | ||
var _temp, _this, _ret; | ||
classCallCheck(this, ThemeProvider); | ||
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | ||
args[_key] = arguments[_key]; | ||
} | ||
return _ret = (_temp = (_this = possibleConstructorReturn(this, (_ref = ThemeProvider.__proto__ || Object.getPrototypeOf(ThemeProvider)).call.apply(_ref, [this].concat(args))), _this), _this.broadcast = createBroadcast(_this.props.theme), _this.setOuterTheme = function (theme) { | ||
_this.outerTheme = theme; | ||
}, _temp), possibleConstructorReturn(_this, _ret); | ||
} | ||
createClass(ThemeProvider, [{ | ||
key: 'getTheme', | ||
// create theme, by merging with outer theme, if present | ||
value: function getTheme(passedTheme) { | ||
var theme = passedTheme || this.props.theme; | ||
return _extends({}, this.outerTheme, theme); | ||
} | ||
}, { | ||
key: 'getChildContext', | ||
value: function getChildContext() { | ||
return defineProperty({}, CHANNEL, this.broadcast); | ||
} | ||
}, { | ||
key: 'componentDidMount', | ||
value: function componentDidMount() { | ||
// create a new subscription for keeping track of outer theme, if present | ||
if (this.context[CHANNEL]) { | ||
this.unsubscribe = this.context[CHANNEL].subscribe(this.setOuterTheme); | ||
} | ||
} | ||
}, { | ||
key: 'componentWillMount', | ||
value: function componentWillMount() { | ||
// set broadcast state by merging outer theme with own | ||
if (this.context[CHANNEL]) { | ||
this.setOuterTheme(this.context[CHANNEL].getState()); | ||
this.broadcast.setState(this.getTheme()); | ||
} | ||
} | ||
}, { | ||
key: 'componentWillReceiveProps', | ||
value: function componentWillReceiveProps(nextProps) { | ||
if (this.props.theme !== nextProps.theme) { | ||
this.broadcast.setState(this.getTheme(nextProps.theme)); | ||
} | ||
} | ||
}, { | ||
key: 'componentWillUnmount', | ||
value: function componentWillUnmount() { | ||
this.unsubscribe && this.unsubscribe(); | ||
} | ||
}, { | ||
key: 'render', | ||
value: function render() { | ||
return this.props.children ? React.Children.only(this.props.children) : null; | ||
} | ||
}]); | ||
return ThemeProvider; | ||
}(Component); | ||
ThemeProvider.childContextTypes = defineProperty({}, CHANNEL, PropTypes.object.isRequired); | ||
ThemeProvider.contextTypes = defineProperty({}, CHANNEL, PropTypes.object); | ||
ThemeProvider.propTypes = { | ||
theme: PropTypes.object.isRequired, | ||
children: PropTypes.node | ||
}; | ||
/* | ||
@@ -426,43 +715,102 @@ * This is a relatively small abstraction that's ripe for open sourcing. | ||
* props to the underlying component. | ||
* @param {Object} props the props for the component. className is | ||
* handled specially so any glamor-provided classNames will be | ||
* merged predicably (with no regard to specificity) | ||
* @param {Object} theme the theme object | ||
* @return {ReactElement} React.createElement | ||
*/ | ||
function GlamorousComponent(props) { | ||
var className = props.className, | ||
rest = _objectWithoutProperties(props, ['className']); | ||
var GlamorousComponent = function (_Component) { | ||
inherits(GlamorousComponent, _Component); | ||
var _splitProps = splitProps(rest, GlamorousComponent), | ||
toForward = _splitProps.toForward, | ||
cssOverrides = _splitProps.cssOverrides; | ||
function GlamorousComponent() { | ||
var _ref2; | ||
// create className to apply | ||
var _temp, _this, _ret; | ||
classCallCheck(this, GlamorousComponent); | ||
var mappedArgs = GlamorousComponent.styles.map(mapToPropsCall); | ||
for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { | ||
args[_key2] = arguments[_key2]; | ||
} | ||
var _extractGlamorStyles = extractGlamorStyles(className), | ||
parentGlamorStyles = _extractGlamorStyles.glamorStyles, | ||
glamorlessClassName = _extractGlamorStyles.glamorlessClassName; | ||
return _ret = (_temp = (_this = possibleConstructorReturn(this, (_ref2 = GlamorousComponent.__proto__ || Object.getPrototypeOf(GlamorousComponent)).call.apply(_ref2, [this].concat(args))), _this), _this.state = { theme: null }, _this.setTheme = function (theme) { | ||
return _this.setState({ theme: theme }); | ||
}, _temp), possibleConstructorReturn(_this, _ret); | ||
} | ||
var glamorClassName = css.apply(undefined, _toConsumableArray(mappedArgs).concat(_toConsumableArray(parentGlamorStyles), [cssOverrides])).toString(); | ||
var fullClassName = joinClasses(glamorlessClassName, glamorClassName); | ||
createClass(GlamorousComponent, [{ | ||
key: 'componentWillMount', | ||
value: function componentWillMount() { | ||
var theme = this.props.theme; | ||
return React.createElement(GlamorousComponent.comp, _extends({ | ||
className: fullClassName | ||
}, toForward)); | ||
if (this.context[CHANNEL]) { | ||
// if a theme is provided via props, it takes precedence over context | ||
this.setTheme(theme ? theme : this.context[CHANNEL].getState()); | ||
} else { | ||
this.setTheme(theme || {}); | ||
} | ||
} | ||
}, { | ||
key: 'componentWillReceiveProps', | ||
value: function componentWillReceiveProps(nextProps) { | ||
if (this.props.theme !== nextProps.theme) { | ||
this.setTheme(nextProps.theme); | ||
} | ||
} | ||
}, { | ||
key: 'componentDidMount', | ||
value: function componentDidMount() { | ||
if (this.context[CHANNEL] && !this.props.theme) { | ||
// subscribe to future theme changes | ||
this.unsubscribe = this.context[CHANNEL].subscribe(this.setTheme); | ||
} | ||
} | ||
}, { | ||
key: 'componentWillUnmount', | ||
value: function componentWillUnmount() { | ||
// cleanup subscription | ||
this.unsubscribe && this.unsubscribe(); | ||
} | ||
}, { | ||
key: 'render', | ||
value: function render() { | ||
var _this2 = this; | ||
function mapToPropsCall(glamorRules) { | ||
if (typeof glamorRules === 'function') { | ||
return glamorRules(props); | ||
var _props = this.props, | ||
className = _props.className, | ||
rest = objectWithoutProperties(_props, ['className']); | ||
var _splitProps = splitProps(rest, GlamorousComponent), | ||
toForward = _splitProps.toForward, | ||
cssOverrides = _splitProps.cssOverrides; | ||
// create className to apply | ||
var mappedArgs = GlamorousComponent.styles.map(function (glamorRules) { | ||
if (typeof glamorRules === 'function') { | ||
return glamorRules(_this2.props, _extends({}, _this2.state.theme)); | ||
} | ||
return glamorRules; | ||
}); | ||
var _extractGlamorStyles = extractGlamorStyles(className), | ||
parentGlamorStyles = _extractGlamorStyles.glamorStyles, | ||
glamorlessClassName = _extractGlamorStyles.glamorlessClassName; | ||
var glamorClassName = css.apply(undefined, toConsumableArray(mappedArgs).concat(toConsumableArray(parentGlamorStyles), [cssOverrides])).toString(); | ||
var fullClassName = joinClasses(glamorlessClassName, glamorClassName); | ||
return React.createElement(GlamorousComponent.comp, _extends({ | ||
className: fullClassName | ||
}, toForward)); | ||
} | ||
return glamorRules; | ||
} | ||
} | ||
}]); | ||
return GlamorousComponent; | ||
}(Component); | ||
GlamorousComponent.propTypes = { | ||
className: PropTypes.string, | ||
cssOverrides: PropTypes.object | ||
cssOverrides: PropTypes.object, | ||
theme: PropTypes.object | ||
}; | ||
GlamorousComponent.contextTypes = defineProperty({}, CHANNEL, PropTypes.object); | ||
Object.assign(GlamorousComponent, getGlamorousComponentMetadata({ comp: comp, styles: styles, rootEl: rootEl, displayName: displayName })); | ||
@@ -473,7 +821,7 @@ return GlamorousComponent; | ||
function getGlamorousComponentMetadata(_ref2) { | ||
var comp = _ref2.comp, | ||
styles = _ref2.styles, | ||
rootEl = _ref2.rootEl, | ||
displayName = _ref2.displayName; | ||
function getGlamorousComponentMetadata(_ref3) { | ||
var comp = _ref3.comp, | ||
styles = _ref3.styles, | ||
rootEl = _ref3.rootEl, | ||
displayName = _ref3.displayName; | ||
@@ -559,10 +907,9 @@ var componentsComp = comp.comp ? comp.comp : comp; | ||
function splitProps(_ref3, _ref4) { | ||
var propsAreCssOverrides = _ref4.propsAreCssOverrides, | ||
rootEl = _ref4.rootEl; | ||
function splitProps(_ref4, _ref5) { | ||
var propsAreCssOverrides = _ref5.propsAreCssOverrides, | ||
rootEl = _ref5.rootEl; | ||
var _ref4$css = _ref4.css, | ||
cssOverrides = _ref4$css === undefined ? {} : _ref4$css, | ||
rest = objectWithoutProperties(_ref4, ['css']); | ||
var _ref3$css = _ref3.css, | ||
cssOverrides = _ref3$css === undefined ? {} : _ref3$css, | ||
rest = _objectWithoutProperties(_ref3, ['css']); | ||
var returnValue = { toForward: {}, cssOverrides: {} }; | ||
@@ -587,4 +934,4 @@ if (!propsAreCssOverrides) { | ||
function joinClasses() { | ||
for (var _len2 = arguments.length, classes = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { | ||
classes[_key2] = arguments[_key2]; | ||
for (var _len3 = arguments.length, classes = Array(_len3), _key3 = 0; _key3 < _len3; _key3++) { | ||
classes[_key3] = arguments[_key3]; | ||
} | ||
@@ -595,2 +942,2 @@ | ||
export default glamorous; | ||
export { ThemeProvider };export default glamorous; |
@@ -7,3 +7,3 @@ (function (global, factory) { | ||
React = 'default' in React ? React['default'] : React; | ||
var React__default = 'default' in React ? React['default'] : React; | ||
@@ -375,3 +375,3 @@ /* eslint max-lines:0, func-style:0 */ | ||
/* istanbul ignore next */ | ||
if (React.version.slice(0, 4) === '15.5') { | ||
if (React__default.version.slice(0, 4) === '15.5') { | ||
/* istanbul ignore next */ | ||
@@ -386,10 +386,299 @@ try { | ||
/* istanbul ignore next */ | ||
PropTypes = PropTypes || React.PropTypes; | ||
PropTypes = PropTypes || React__default.PropTypes; | ||
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; }; | ||
/** Mitt: Tiny (~200b) functional event emitter / pubsub. | ||
* @name mitt | ||
* @returns {Mitt} | ||
*/ | ||
function mitt(all) { | ||
all = all || Object.create(null); | ||
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } } | ||
return { | ||
/** | ||
* Register an event handler for the given type. | ||
* | ||
* @param {String} type Type of event to listen for, or `"*"` for all events | ||
* @param {Function} handler Function to call in response to given event | ||
* @return {Object} the `mitt` instance for chaining | ||
* @memberOf mitt | ||
*/ | ||
on: function on(type, handler) { | ||
(all[type] || (all[type] = [])).push(handler); | ||
}, | ||
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } | ||
/** | ||
* Remove an event handler for the given type. | ||
* | ||
* @param {String} type Type of event to unregister `handler` from, or `"*"` | ||
* @param {Function} handler Handler function to remove | ||
* @return {Object} the `mitt` instance for chaining | ||
* @memberOf mitt | ||
*/ | ||
off: function off(type, handler) { | ||
var e = all[type] || (all[type] = []); | ||
e.splice(e.indexOf(handler) >>> 0, 1); | ||
}, | ||
/** | ||
* Invoke all handlers for the given type. | ||
* If present, `"*"` handlers are invoked prior to type-matched handlers. | ||
* | ||
* @param {String} type The event type to invoke | ||
* @param {Any} [evt] Any value (object is recommended and powerful), passed to each handler | ||
* @return {Object} the `mitt` instance for chaining | ||
* @memberof mitt | ||
*/ | ||
emit: function emit(type, evt) { | ||
(all[type] || []).map(function (handler) { handler(evt); }); | ||
(all['*'] || []).map(function (handler) { handler(type, evt); }); | ||
} | ||
}; | ||
} | ||
function createBroadcast (initialState, channel) { | ||
if ( channel === void 0 ) channel = '__brcast__'; | ||
var emitter = mitt(); | ||
var currentState = initialState; | ||
var getState = function () { return currentState; }; | ||
var setState = function (state) { | ||
currentState = state; | ||
emitter.emit(channel, currentState); | ||
}; | ||
var subscribe = function (listener) { | ||
emitter.on(channel, listener); | ||
return function unsubscribe () { | ||
emitter.off(channel, listener); | ||
} | ||
}; | ||
return {getState: getState, setState: setState, subscribe: subscribe} | ||
} | ||
var classCallCheck = function (instance, Constructor) { | ||
if (!(instance instanceof Constructor)) { | ||
throw new TypeError("Cannot call a class as a function"); | ||
} | ||
}; | ||
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 defineProperty = function (obj, key, value) { | ||
if (key in obj) { | ||
Object.defineProperty(obj, key, { | ||
value: value, | ||
enumerable: true, | ||
configurable: true, | ||
writable: true | ||
}); | ||
} else { | ||
obj[key] = value; | ||
} | ||
return 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; | ||
}; | ||
var inherits = function (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 objectWithoutProperties = function (obj, keys) { | ||
var target = {}; | ||
for (var i in obj) { | ||
if (keys.indexOf(i) >= 0) continue; | ||
if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; | ||
target[i] = obj[i]; | ||
} | ||
return target; | ||
}; | ||
var possibleConstructorReturn = function (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; | ||
}; | ||
var toConsumableArray = function (arr) { | ||
if (Array.isArray(arr)) { | ||
for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i]; | ||
return arr2; | ||
} else { | ||
return Array.from(arr); | ||
} | ||
}; | ||
var CHANNEL = '__glamorous__'; | ||
/** | ||
* This is a component which will provide a theme to the entire tree | ||
* via context and event listener | ||
* (because pure components block context updates) | ||
* inspired by the styled-components implementation | ||
* https://github.com/styled-components/styled-components | ||
* @param {Object} theme the theme object.. | ||
*/ | ||
var ThemeProvider = function (_Component) { | ||
inherits(ThemeProvider, _Component); | ||
function ThemeProvider() { | ||
var _ref; | ||
var _temp, _this, _ret; | ||
classCallCheck(this, ThemeProvider); | ||
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | ||
args[_key] = arguments[_key]; | ||
} | ||
return _ret = (_temp = (_this = possibleConstructorReturn(this, (_ref = ThemeProvider.__proto__ || Object.getPrototypeOf(ThemeProvider)).call.apply(_ref, [this].concat(args))), _this), _this.broadcast = createBroadcast(_this.props.theme), _this.setOuterTheme = function (theme) { | ||
_this.outerTheme = theme; | ||
}, _temp), possibleConstructorReturn(_this, _ret); | ||
} | ||
createClass(ThemeProvider, [{ | ||
key: 'getTheme', | ||
// create theme, by merging with outer theme, if present | ||
value: function getTheme(passedTheme) { | ||
var theme = passedTheme || this.props.theme; | ||
return _extends({}, this.outerTheme, theme); | ||
} | ||
}, { | ||
key: 'getChildContext', | ||
value: function getChildContext() { | ||
return defineProperty({}, CHANNEL, this.broadcast); | ||
} | ||
}, { | ||
key: 'componentDidMount', | ||
value: function componentDidMount() { | ||
// create a new subscription for keeping track of outer theme, if present | ||
if (this.context[CHANNEL]) { | ||
this.unsubscribe = this.context[CHANNEL].subscribe(this.setOuterTheme); | ||
} | ||
} | ||
}, { | ||
key: 'componentWillMount', | ||
value: function componentWillMount() { | ||
// set broadcast state by merging outer theme with own | ||
if (this.context[CHANNEL]) { | ||
this.setOuterTheme(this.context[CHANNEL].getState()); | ||
this.broadcast.setState(this.getTheme()); | ||
} | ||
} | ||
}, { | ||
key: 'componentWillReceiveProps', | ||
value: function componentWillReceiveProps(nextProps) { | ||
if (this.props.theme !== nextProps.theme) { | ||
this.broadcast.setState(this.getTheme(nextProps.theme)); | ||
} | ||
} | ||
}, { | ||
key: 'componentWillUnmount', | ||
value: function componentWillUnmount() { | ||
this.unsubscribe && this.unsubscribe(); | ||
} | ||
}, { | ||
key: 'render', | ||
value: function render() { | ||
return this.props.children ? React__default.Children.only(this.props.children) : null; | ||
} | ||
}]); | ||
return ThemeProvider; | ||
}(React.Component); | ||
ThemeProvider.childContextTypes = defineProperty({}, CHANNEL, PropTypes.object.isRequired); | ||
ThemeProvider.contextTypes = defineProperty({}, CHANNEL, PropTypes.object); | ||
ThemeProvider.propTypes = { | ||
theme: PropTypes.object.isRequired, | ||
children: PropTypes.node | ||
}; | ||
/* | ||
@@ -409,3 +698,3 @@ * This is a relatively small abstraction that's ripe for open sourcing. | ||
*/ | ||
function glamorous(comp) { | ||
function glamorous$2(comp) { | ||
var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}, | ||
@@ -434,43 +723,102 @@ rootEl = _ref.rootEl, | ||
* props to the underlying component. | ||
* @param {Object} props the props for the component. className is | ||
* handled specially so any glamor-provided classNames will be | ||
* merged predicably (with no regard to specificity) | ||
* @param {Object} theme the theme object | ||
* @return {ReactElement} React.createElement | ||
*/ | ||
function GlamorousComponent(props) { | ||
var className = props.className, | ||
rest = _objectWithoutProperties(props, ['className']); | ||
var GlamorousComponent = function (_Component) { | ||
inherits(GlamorousComponent, _Component); | ||
var _splitProps = splitProps(rest, GlamorousComponent), | ||
toForward = _splitProps.toForward, | ||
cssOverrides = _splitProps.cssOverrides; | ||
function GlamorousComponent() { | ||
var _ref2; | ||
// create className to apply | ||
var _temp, _this, _ret; | ||
classCallCheck(this, GlamorousComponent); | ||
var mappedArgs = GlamorousComponent.styles.map(mapToPropsCall); | ||
for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { | ||
args[_key2] = arguments[_key2]; | ||
} | ||
var _extractGlamorStyles = extractGlamorStyles(className), | ||
parentGlamorStyles = _extractGlamorStyles.glamorStyles, | ||
glamorlessClassName = _extractGlamorStyles.glamorlessClassName; | ||
return _ret = (_temp = (_this = possibleConstructorReturn(this, (_ref2 = GlamorousComponent.__proto__ || Object.getPrototypeOf(GlamorousComponent)).call.apply(_ref2, [this].concat(args))), _this), _this.state = { theme: null }, _this.setTheme = function (theme) { | ||
return _this.setState({ theme: theme }); | ||
}, _temp), possibleConstructorReturn(_this, _ret); | ||
} | ||
var glamorClassName = glamor.css.apply(undefined, _toConsumableArray(mappedArgs).concat(_toConsumableArray(parentGlamorStyles), [cssOverrides])).toString(); | ||
var fullClassName = joinClasses(glamorlessClassName, glamorClassName); | ||
createClass(GlamorousComponent, [{ | ||
key: 'componentWillMount', | ||
value: function componentWillMount() { | ||
var theme = this.props.theme; | ||
return React.createElement(GlamorousComponent.comp, _extends({ | ||
className: fullClassName | ||
}, toForward)); | ||
if (this.context[CHANNEL]) { | ||
// if a theme is provided via props, it takes precedence over context | ||
this.setTheme(theme ? theme : this.context[CHANNEL].getState()); | ||
} else { | ||
this.setTheme(theme || {}); | ||
} | ||
} | ||
}, { | ||
key: 'componentWillReceiveProps', | ||
value: function componentWillReceiveProps(nextProps) { | ||
if (this.props.theme !== nextProps.theme) { | ||
this.setTheme(nextProps.theme); | ||
} | ||
} | ||
}, { | ||
key: 'componentDidMount', | ||
value: function componentDidMount() { | ||
if (this.context[CHANNEL] && !this.props.theme) { | ||
// subscribe to future theme changes | ||
this.unsubscribe = this.context[CHANNEL].subscribe(this.setTheme); | ||
} | ||
} | ||
}, { | ||
key: 'componentWillUnmount', | ||
value: function componentWillUnmount() { | ||
// cleanup subscription | ||
this.unsubscribe && this.unsubscribe(); | ||
} | ||
}, { | ||
key: 'render', | ||
value: function render() { | ||
var _this2 = this; | ||
function mapToPropsCall(glamorRules) { | ||
if (typeof glamorRules === 'function') { | ||
return glamorRules(props); | ||
var _props = this.props, | ||
className = _props.className, | ||
rest = objectWithoutProperties(_props, ['className']); | ||
var _splitProps = splitProps(rest, GlamorousComponent), | ||
toForward = _splitProps.toForward, | ||
cssOverrides = _splitProps.cssOverrides; | ||
// create className to apply | ||
var mappedArgs = GlamorousComponent.styles.map(function (glamorRules) { | ||
if (typeof glamorRules === 'function') { | ||
return glamorRules(_this2.props, _extends({}, _this2.state.theme)); | ||
} | ||
return glamorRules; | ||
}); | ||
var _extractGlamorStyles = extractGlamorStyles(className), | ||
parentGlamorStyles = _extractGlamorStyles.glamorStyles, | ||
glamorlessClassName = _extractGlamorStyles.glamorlessClassName; | ||
var glamorClassName = glamor.css.apply(undefined, toConsumableArray(mappedArgs).concat(toConsumableArray(parentGlamorStyles), [cssOverrides])).toString(); | ||
var fullClassName = joinClasses(glamorlessClassName, glamorClassName); | ||
return React__default.createElement(GlamorousComponent.comp, _extends({ | ||
className: fullClassName | ||
}, toForward)); | ||
} | ||
return glamorRules; | ||
} | ||
} | ||
}]); | ||
return GlamorousComponent; | ||
}(React.Component); | ||
GlamorousComponent.propTypes = { | ||
className: PropTypes.string, | ||
cssOverrides: PropTypes.object | ||
cssOverrides: PropTypes.object, | ||
theme: PropTypes.object | ||
}; | ||
GlamorousComponent.contextTypes = defineProperty({}, CHANNEL, PropTypes.object); | ||
Object.assign(GlamorousComponent, getGlamorousComponentMetadata({ comp: comp, styles: styles, rootEl: rootEl, displayName: displayName })); | ||
@@ -481,7 +829,7 @@ return GlamorousComponent; | ||
function getGlamorousComponentMetadata(_ref2) { | ||
var comp = _ref2.comp, | ||
styles = _ref2.styles, | ||
rootEl = _ref2.rootEl, | ||
displayName = _ref2.displayName; | ||
function getGlamorousComponentMetadata(_ref3) { | ||
var comp = _ref3.comp, | ||
styles = _ref3.styles, | ||
rootEl = _ref3.rootEl, | ||
displayName = _ref3.displayName; | ||
@@ -517,4 +865,4 @@ var componentsComp = comp.comp ? comp.comp : comp; | ||
*/ | ||
Object.assign(glamorous, domElements.reduce(function (getters, tag) { | ||
getters[tag] = glamorous(tag); | ||
Object.assign(glamorous$2, domElements.reduce(function (getters, tag) { | ||
getters[tag] = glamorous$2(tag); | ||
return getters; | ||
@@ -533,5 +881,5 @@ }, {})); | ||
*/ | ||
Object.assign(glamorous, domElements.reduce(function (comps, tag) { | ||
Object.assign(glamorous$2, domElements.reduce(function (comps, tag) { | ||
var capitalTag = capitalize(tag); | ||
comps[capitalTag] = glamorous[tag](); | ||
comps[capitalTag] = glamorous$2[tag](); | ||
comps[capitalTag].displayName = 'glamorous.' + capitalTag; | ||
@@ -569,10 +917,9 @@ comps[capitalTag].propsAreCssOverrides = true; | ||
function splitProps(_ref3, _ref4) { | ||
var propsAreCssOverrides = _ref4.propsAreCssOverrides, | ||
rootEl = _ref4.rootEl; | ||
function splitProps(_ref4, _ref5) { | ||
var propsAreCssOverrides = _ref5.propsAreCssOverrides, | ||
rootEl = _ref5.rootEl; | ||
var _ref4$css = _ref4.css, | ||
cssOverrides = _ref4$css === undefined ? {} : _ref4$css, | ||
rest = objectWithoutProperties(_ref4, ['css']); | ||
var _ref3$css = _ref3.css, | ||
cssOverrides = _ref3$css === undefined ? {} : _ref3$css, | ||
rest = _objectWithoutProperties(_ref3, ['css']); | ||
var returnValue = { toForward: {}, cssOverrides: {} }; | ||
@@ -597,4 +944,4 @@ if (!propsAreCssOverrides) { | ||
function joinClasses() { | ||
for (var _len2 = arguments.length, classes = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { | ||
classes[_key2] = arguments[_key2]; | ||
for (var _len3 = arguments.length, classes = Array(_len3), _key3 = 0; _key3 < _len3; _key3++) { | ||
classes[_key3] = arguments[_key3]; | ||
} | ||
@@ -605,4 +952,22 @@ | ||
var glamorousStar = Object.freeze({ | ||
default: glamorous$2, | ||
ThemeProvider: ThemeProvider | ||
}); | ||
var glamorous = glamorous$2; | ||
Object.assign(glamorous, Object.keys(glamorousStar).reduce(function (e, prop) { | ||
if (prop !== 'default') { | ||
// eslint-disable-next-line import/namespace | ||
e[prop] = glamorousStar[prop]; | ||
} | ||
return e; | ||
}, {})); | ||
return glamorous; | ||
}))); | ||
//# sourceMappingURL=glamorous.umd.js.map |
@@ -1,2 +0,2 @@ | ||
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("glamor")):"function"==typeof define&&define.amd?define(["react","glamor"],t):e.glamorous=t(e.React,e.Glamor)}(this,function(e,t){"use strict";function n(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t<e.length;t++)n[t]=e[t];return n}return Array.from(e)}function o(e,t){var n={};for(var o in e)t.indexOf(o)>=0||Object.prototype.hasOwnProperty.call(e,o)&&(n[o]=e[o]);return n}function r(r){function i(){function i(r){function a(e){return"function"==typeof e?e(r):e}var u=r.className,c=o(r,["className"]),d=l(c,i),m=d.toForward,f=d.cssOverrides,g=i.styles.map(a),h=s(u),C=h.glamorStyles,y=h.glamorlessClassName,v=t.css.apply(void 0,n(g).concat(n(C),[f])).toString(),k=p(y,v);return e.createElement(i.comp,E({className:k},m))}for(var u=arguments.length,m=Array(u),f=0;f<u;f++)m[f]=arguments[f];return i.propTypes={className:F.string,cssOverrides:F.object},Object.assign(i,a({comp:r,styles:m,rootEl:c,displayName:d})),i}var u=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},c=u.rootEl,d=u.displayName;return i}function a(e){var t=e.comp,n=e.styles,o=e.rootEl,r=e.displayName,a=t.comp?t.comp:t;return{styles:t.styles?t.styles.concat(n):n,comp:a,rootEl:o||a,displayName:r||"glamorous("+i(t)+")"}}function i(e){return"string"==typeof e?e:e.displayName||e.name||"unknown"}function s(){return(arguments.length>0&&void 0!==arguments[0]?arguments[0]:"").toString().split(" ").reduce(function(e,n){if(0===n.indexOf("css-")){var o=n.slice("css-".length),r=t.styleSheet.registered[o].style;e.glamorStyles.push(r)}else e.glamorlessClassName=p(e.glamorlessClassName,n);return e},{glamorlessClassName:"",glamorStyles:[]})}function l(e,t){var n=t.propsAreCssOverrides,r=t.rootEl,a=e.css,i=void 0===a?{}:a,s=o(e,["css"]),l={toForward:{},cssOverrides:{}};return n||(l.cssOverrides=i),Object.keys(s).reduce(function(e,t){return b(r,t)?e.toForward[t]=s[t]:n&&(e.cssOverrides[t]=s[t]),e},l)}function u(e){return e.slice(0,1).toUpperCase()+e.slice(1)}function p(){for(var e=arguments.length,t=Array(e),n=0;n<e;n++)t[n]=arguments[n];return t.filter(Boolean).join(" ")}e="default"in e?e.default:e;var c=["children","dangerouslySetInnerHTML","key","ref","autoFocus","defaultValue","valueLink","defaultChecked","checkedLink","innerHTML","suppressContentEditableWarning","onFocusIn","onFocusOut","className","onCopy","onCut","onPaste","onCompositionEnd","onCompositionStart","onCompositionUpdate","onKeyDown","onKeyPress","onKeyUp","onFocus","onBlur","onChange","onInput","onSubmit","onClick","onContextMenu","onDoubleClick","onDrag","onDragEnd","onDragEnter","onDragExit","onDragLeave","onDragOver","onDragStart","onDrop","onMouseDown","onMouseEnter","onMouseLeave","onMouseMove","onMouseOut","onMouseOver","onMouseUp","onSelect","onTouchCancel","onTouchEnd","onTouchMove","onTouchStart","onScroll","onWheel","onAbort","onCanPlay","onCanPlayThrough","onDurationChange","onEmptied","onEncrypted","onEnded","onError","onLoadedData","onLoadedMetadata","onLoadStart","onPause","onPlay","onPlaying","onProgress","onRateChange","onSeeked","onSeeking","onStalled","onSuspend","onTimeUpdate","onVolumeChange","onWaiting","onLoad","onAnimationStart","onAnimationEnd","onAnimationIteration","onTransitionEnd","onCopyCapture","onCutCapture","onPasteCapture","onCompositionEndCapture","onCompositionStartCapture","onCompositionUpdateCapture","onKeyDownCapture","onKeyPressCapture","onKeyUpCapture","onFocusCapture","onBlurCapture","onChangeCapture","onInputCapture","onSubmitCapture","onClickCapture","onContextMenuCapture","onDoubleClickCapture","onDragCapture","onDragEndCapture","onDragEnterCapture","onDragExitCapture","onDragLeaveCapture","onDragOverCapture","onDragStartCapture","onDropCapture","onMouseDownCapture","onMouseEnterCapture","onMouseLeaveCapture","onMouseMoveCapture","onMouseOutCapture","onMouseOverCapture","onMouseUpCapture","onSelectCapture","onTouchCancelCapture","onTouchEndCapture","onTouchMoveCapture","onTouchStartCapture","onScrollCapture","onWheelCapture","onAbortCapture","onCanPlayCapture","onCanPlayThroughCapture","onDurationChangeCapture","onEmptiedCapture","onEncryptedCapture","onEndedCapture","onErrorCapture","onLoadedDataCapture","onLoadedMetadataCapture","onLoadStartCapture","onPauseCapture","onPlayCapture","onPlayingCapture","onProgressCapture","onRateChangeCapture","onSeekedCapture","onSeekingCapture","onStalledCapture","onSuspendCapture","onTimeUpdateCapture","onVolumeChangeCapture","onWaitingCapture","onLoadCapture","onAnimationStartCapture","onAnimationEndCapture","onAnimationIterationCapture","onTransitionEndCapture"],d=["accept","acceptCharset","accessKey","action","allowFullScreen","allowTransparency","alt","as","async","autoComplete","// autoFocus","autoPlay","capture","cellPadding","cellSpacing","charSet","challenge","checked","cite","classID","className","cols","colSpan","content","contentEditable","contextMenu","controls","coords","crossOrigin","data","dateTime","default","defer","dir","disabled","download","draggable","encType","form","formAction","formEncType","formMethod","formNoValidate","formTarget","frameBorder","headers","height","hidden","high","href","hrefLang","htmlFor","httpEquiv","icon","id","inputMode","integrity","is","keyParams","keyType","kind","label","lang","list","loop","low","manifest","marginHeight","marginWidth","max","maxLength","media","mediaGroup","method","min","minLength","multiple","muted","name","nonce","noValidate","open","optimum","pattern","placeholder","playsInline","poster","preload","profile","radioGroup","readOnly","referrerPolicy","rel","required","reversed","role","rows","rowSpan","sandbox","scope","scoped","scrolling","seamless","selected","shape","size","sizes","span","spellCheck","src","srcDoc","srcLang","srcSet","start","step","style","summary","tabIndex","target","title","type","useMap","value","width","wmode","wrap","about","datatype","inlist","prefix","property","resource","typeof","vocab","autoCapitalize","autoCorrect","autoSave","color","itemProp","itemScope","itemType","itemID","itemRef","results","security","unselectable"],m=["accentHeight","accumulate","additive","alignmentBaseline","allowReorder","alphabetic","amplitude","arabicForm","ascent","attributeName","attributeType","autoReverse","azimuth","baseFrequency","baseProfile","baselineShift","bbox","begin","bias","by","calcMode","capHeight","clip","clipPath","clipRule","clipPathUnits","colorInterpolation","colorInterpolationFilters","colorProfile","colorRendering","contentScriptType","contentStyleType","cursor","cx","cy","d","decelerate","descent","diffuseConstant","direction","display","divisor","dominantBaseline","dur","dx","dy","edgeMode","elevation","enableBackground","end","exponent","externalResourcesRequired","fill","fillOpacity","fillRule","filter","filterRes","filterUnits","floodColor","floodOpacity","focusable","fontFamily","fontSize","fontSizeAdjust","fontStretch","fontStyle","fontVariant","fontWeight","format","from","fx","fy","g1","g2","glyphName","glyphOrientationHorizontal","glyphOrientationVertical","glyphRef","gradientTransform","gradientUnits","hanging","horizAdvX","horizOriginX","ideographic","imageRendering","in","in2","intercept","k","k1","k2","k3","k4","kernelMatrix","kernelUnitLength","kerning","keyPoints","keySplines","keyTimes","lengthAdjust","letterSpacing","lightingColor","limitingConeAngle","local","markerEnd","markerMid","markerStart","markerHeight","markerUnits","markerWidth","mask","maskContentUnits","maskUnits","mathematical","mode","numOctaves","offset","opacity","operator","order","orient","orientation","origin","overflow","overlinePosition","overlineThickness","paintOrder","panose1","pathLength","patternContentUnits","patternTransform","patternUnits","pointerEvents","points","pointsAtX","pointsAtY","pointsAtZ","preserveAlpha","preserveAspectRatio","primitiveUnits","r","radius","refX","refY","renderingIntent","repeatCount","repeatDur","requiredExtensions","requiredFeatures","restart","result","rotate","rx","ry","scale","seed","shapeRendering","slope","spacing","specularConstant","specularExponent","speed","spreadMethod","startOffset","stdDeviation","stemh","stemv","stitchTiles","stopColor","stopOpacity","strikethroughPosition","strikethroughThickness","string","stroke","strokeDasharray","strokeDashoffset","strokeLinecap","strokeLinejoin","strokeMiterlimit","strokeOpacity","strokeWidth","surfaceScale","systemLanguage","tableValues","targetX","targetY","textAnchor","textDecoration","textRendering","textLength","to","transform","u1","u2","underlinePosition","underlineThickness","unicode","unicodeBidi","unicodeRange","unitsPerEm","vAlphabetic","vHanging","vIdeographic","vMathematical","values","vectorEffect","version","vertAdvY","vertOriginX","vertOriginY","viewBox","viewTarget","visibility","widths","wordSpacing","writingMode","x","xHeight","x1","x2","xChannelSelector","xlinkActuate","xlinkArcrole","xlinkHref","xlinkRole","xlinkShow","xlinkTitle","xlinkType","xmlBase","xmlns","xmlnsXlink","xmlLang","xmlSpace","y","y1","y2","yChannelSelector","z","zoomAndPan"],f=["color","height","width"],g=RegExp.prototype.test.bind(new RegExp("^(data|aria)-[:A-Z_a-z\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02FF\\u0370-\\u037D\\u037F-\\u1FFF\\u200C-\\u200D\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD\\-.0-9\\u00B7\\u0300-\\u036F\\u203F-\\u2040]*$")),h=function(e,t){return-1!==e.indexOf(t)},C=function(e){return h(d,e)},y=function(e){return h(f,e)},v=function(e,t){return"svg"===e&&h(m,t)},k=function(e){return h(c,e)},b=function(e,t){return"string"!=typeof e||(C(t)||v(e,t)||g(t.toLowerCase())||k(t))&&("svg"===e||!y(t))},x=["a","abbr","acronym","address","applet","area","article","aside","audio","b","base","basefont","bdi","bdo","bgsound","big","blink","blockquote","body","br","button","canvas","caption","center","cite","code","col","colgroup","command","content","data","datalist","dd","del","details","dfn","dialog","dir","div","dl","dt","element","em","embed","fieldset","figcaption","figure","font","footer","form","frame","frameset","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","iframe","image","img","input","ins","isindex","kbd","keygen","label","legend","li","link","listing","main","map","mark","marquee","math","menu","menuitem","meta","meter","multicol","nav","nextid","nobr","noembed","noframes","noscript","object","ol","optgroup","option","output","p","param","picture","plaintext","pre","progress","q","rb","rbc","rp","rt","rtc","ruby","s","samp","script","section","select","shadow","slot","small","source","spacer","span","strike","strong","style","sub","summary","sup","svg","table","tbody","td","template","textarea","tfoot","th","thead","time","title","tr","track","tt","u","ul","var","video","wbr","xmp"],S=["a","altGlyph","altGlyphDef","altGlyphItem","animate","animateColor","animateMotion","animateTransform","animation","audio","canvas","circle","clipPath","color-profile","cursor","defs","desc","discard","ellipse","feBlend","feColorMatrix","feComponentTransfer","feComposite","feConvolveMatrix","feDiffuseLighting","feDisplacementMap","feDistantLight","feDropShadow","feFlood","feFuncA","feFuncB","feFuncG","feFuncR","feGaussianBlur","feImage","feMerge","feMergeNode","feMorphology","feOffset","fePointLight","feSpecularLighting","feSpotLight","feTile","feTurbulence","filter","font","font-face","font-face-format","font-face-name","font-face-src","font-face-uri","foreignObject","g","glyph","glyphRef","handler","hatch","hatchpath","hkern","iframe","image","line","linearGradient","listener","marker","mask","mesh","meshgradient","meshpatch","meshrow","metadata","missing-glyph","mpath","path","pattern","polygon","polyline","prefetch","radialGradient","rect","script","set","solidColor","solidcolor","stop","style","svg","switch","symbol","tbreak","text","textArea","textPath","title","tref","tspan","unknown","use","video","view","vkern"],D=x.concat(S).filter(function(e,t,n){return n.indexOf(e)===t}),F=void 0;if("15.5"===e.version.slice(0,4))try{F=require("prop-types")}catch(e){}F=F||e.PropTypes;var E=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e};return Object.assign(r,D.reduce(function(e,t){return e[t]=r(t),e},{})),Object.assign(r,D.reduce(function(e,t){var n=u(t);return e[n]=r[t](),e[n].displayName="glamorous."+n,e[n].propsAreCssOverrides=!0,e},{})),r}); | ||
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("glamor")):"function"==typeof define&&define.amd?define(["react","glamor"],t):e.glamorous=t(e.React,e.Glamor)}(this,function(e,t){"use strict";function n(e){return e=e||Object.create(null),{on:function(t,n){(e[t]||(e[t]=[])).push(n)},off:function(t,n){var o=e[t]||(e[t]=[]);o.splice(o.indexOf(n)>>>0,1)},emit:function(t,n){(e[t]||[]).map(function(e){e(n)}),(e["*"]||[]).map(function(e){e(t,n)})}}}function o(e,t){void 0===t&&(t="__brcast__");var o=n(),r=e;return{getState:function(){return r},setState:function(e){r=e,o.emit(t,r)},subscribe:function(e){return o.on(t,e),function(){o.off(t,e)}}}}function r(n){function o(){for(var o=arguments.length,r=Array(o),d=0;d<o;d++)r[d]=arguments[d];var f=function(e){function n(){var e,t,o,r;M(this,n);for(var a=arguments.length,i=Array(a),s=0;s<a;s++)i[s]=arguments[s];return t=o=L(this,(e=n.__proto__||Object.getPrototypeOf(n)).call.apply(e,[this].concat(i))),o.state={theme:null},o.setTheme=function(e){return o.setState({theme:e})},r=t,L(o,r)}return F(n,e),w(n,[{key:"componentWillMount",value:function(){var e=this.props.theme;this.context[R]?this.setTheme(e||this.context[R].getState()):this.setTheme(e||{})}},{key:"componentWillReceiveProps",value:function(e){this.props.theme!==e.theme&&this.setTheme(e.theme)}},{key:"componentDidMount",value:function(){this.context[R]&&!this.props.theme&&(this.unsubscribe=this.context[R].subscribe(this.setTheme))}},{key:"componentWillUnmount",value:function(){this.unsubscribe&&this.unsubscribe()}},{key:"render",value:function(){var e=this,o=this.props,r=o.className,a=A(o,["className"]),i=u(a,n),l=i.toForward,d=i.cssOverrides,f=n.styles.map(function(t){return"function"==typeof t?t(e.props,P({},e.state.theme)):t}),m=s(r),h=m.glamorStyles,g=m.glamorlessClassName,y=t.css.apply(void 0,j(f).concat(j(h),[d])).toString(),C=c(g,y);return p.createElement(n.comp,P({className:C},l))}}]),n}(e.Component);return f.propTypes={className:D.string,cssOverrides:D.object,theme:D.object},f.contextTypes=E({},R,D.object),Object.assign(f,a({comp:n,styles:r,rootEl:i,displayName:l})),f}var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},i=r.rootEl,l=r.displayName;return o}function a(e){var t=e.comp,n=e.styles,o=e.rootEl,r=e.displayName,a=t.comp?t.comp:t;return{styles:t.styles?t.styles.concat(n):n,comp:a,rootEl:o||a,displayName:r||"glamorous("+i(t)+")"}}function i(e){return"string"==typeof e?e:e.displayName||e.name||"unknown"}function s(){return(arguments.length>0&&void 0!==arguments[0]?arguments[0]:"").toString().split(" ").reduce(function(e,n){if(0===n.indexOf("css-")){var o=n.slice("css-".length),r=t.styleSheet.registered[o].style;e.glamorStyles.push(r)}else e.glamorlessClassName=c(e.glamorlessClassName,n);return e},{glamorlessClassName:"",glamorStyles:[]})}function u(e,t){var n=t.propsAreCssOverrides,o=t.rootEl,r=e.css,a=void 0===r?{}:r,i=A(e,["css"]),s={toForward:{},cssOverrides:{}};return n||(s.cssOverrides=a),Object.keys(i).reduce(function(e,t){return x(o,t)?e.toForward[t]=i[t]:n&&(e.cssOverrides[t]=i[t]),e},s)}function l(e){return e.slice(0,1).toUpperCase()+e.slice(1)}function c(){for(var e=arguments.length,t=Array(e),n=0;n<e;n++)t[n]=arguments[n];return t.filter(Boolean).join(" ")}var p="default"in e?e.default:e,d=["children","dangerouslySetInnerHTML","key","ref","autoFocus","defaultValue","valueLink","defaultChecked","checkedLink","innerHTML","suppressContentEditableWarning","onFocusIn","onFocusOut","className","onCopy","onCut","onPaste","onCompositionEnd","onCompositionStart","onCompositionUpdate","onKeyDown","onKeyPress","onKeyUp","onFocus","onBlur","onChange","onInput","onSubmit","onClick","onContextMenu","onDoubleClick","onDrag","onDragEnd","onDragEnter","onDragExit","onDragLeave","onDragOver","onDragStart","onDrop","onMouseDown","onMouseEnter","onMouseLeave","onMouseMove","onMouseOut","onMouseOver","onMouseUp","onSelect","onTouchCancel","onTouchEnd","onTouchMove","onTouchStart","onScroll","onWheel","onAbort","onCanPlay","onCanPlayThrough","onDurationChange","onEmptied","onEncrypted","onEnded","onError","onLoadedData","onLoadedMetadata","onLoadStart","onPause","onPlay","onPlaying","onProgress","onRateChange","onSeeked","onSeeking","onStalled","onSuspend","onTimeUpdate","onVolumeChange","onWaiting","onLoad","onAnimationStart","onAnimationEnd","onAnimationIteration","onTransitionEnd","onCopyCapture","onCutCapture","onPasteCapture","onCompositionEndCapture","onCompositionStartCapture","onCompositionUpdateCapture","onKeyDownCapture","onKeyPressCapture","onKeyUpCapture","onFocusCapture","onBlurCapture","onChangeCapture","onInputCapture","onSubmitCapture","onClickCapture","onContextMenuCapture","onDoubleClickCapture","onDragCapture","onDragEndCapture","onDragEnterCapture","onDragExitCapture","onDragLeaveCapture","onDragOverCapture","onDragStartCapture","onDropCapture","onMouseDownCapture","onMouseEnterCapture","onMouseLeaveCapture","onMouseMoveCapture","onMouseOutCapture","onMouseOverCapture","onMouseUpCapture","onSelectCapture","onTouchCancelCapture","onTouchEndCapture","onTouchMoveCapture","onTouchStartCapture","onScrollCapture","onWheelCapture","onAbortCapture","onCanPlayCapture","onCanPlayThroughCapture","onDurationChangeCapture","onEmptiedCapture","onEncryptedCapture","onEndedCapture","onErrorCapture","onLoadedDataCapture","onLoadedMetadataCapture","onLoadStartCapture","onPauseCapture","onPlayCapture","onPlayingCapture","onProgressCapture","onRateChangeCapture","onSeekedCapture","onSeekingCapture","onStalledCapture","onSuspendCapture","onTimeUpdateCapture","onVolumeChangeCapture","onWaitingCapture","onLoadCapture","onAnimationStartCapture","onAnimationEndCapture","onAnimationIterationCapture","onTransitionEndCapture"],f=["accept","acceptCharset","accessKey","action","allowFullScreen","allowTransparency","alt","as","async","autoComplete","// autoFocus","autoPlay","capture","cellPadding","cellSpacing","charSet","challenge","checked","cite","classID","className","cols","colSpan","content","contentEditable","contextMenu","controls","coords","crossOrigin","data","dateTime","default","defer","dir","disabled","download","draggable","encType","form","formAction","formEncType","formMethod","formNoValidate","formTarget","frameBorder","headers","height","hidden","high","href","hrefLang","htmlFor","httpEquiv","icon","id","inputMode","integrity","is","keyParams","keyType","kind","label","lang","list","loop","low","manifest","marginHeight","marginWidth","max","maxLength","media","mediaGroup","method","min","minLength","multiple","muted","name","nonce","noValidate","open","optimum","pattern","placeholder","playsInline","poster","preload","profile","radioGroup","readOnly","referrerPolicy","rel","required","reversed","role","rows","rowSpan","sandbox","scope","scoped","scrolling","seamless","selected","shape","size","sizes","span","spellCheck","src","srcDoc","srcLang","srcSet","start","step","style","summary","tabIndex","target","title","type","useMap","value","width","wmode","wrap","about","datatype","inlist","prefix","property","resource","typeof","vocab","autoCapitalize","autoCorrect","autoSave","color","itemProp","itemScope","itemType","itemID","itemRef","results","security","unselectable"],m=["accentHeight","accumulate","additive","alignmentBaseline","allowReorder","alphabetic","amplitude","arabicForm","ascent","attributeName","attributeType","autoReverse","azimuth","baseFrequency","baseProfile","baselineShift","bbox","begin","bias","by","calcMode","capHeight","clip","clipPath","clipRule","clipPathUnits","colorInterpolation","colorInterpolationFilters","colorProfile","colorRendering","contentScriptType","contentStyleType","cursor","cx","cy","d","decelerate","descent","diffuseConstant","direction","display","divisor","dominantBaseline","dur","dx","dy","edgeMode","elevation","enableBackground","end","exponent","externalResourcesRequired","fill","fillOpacity","fillRule","filter","filterRes","filterUnits","floodColor","floodOpacity","focusable","fontFamily","fontSize","fontSizeAdjust","fontStretch","fontStyle","fontVariant","fontWeight","format","from","fx","fy","g1","g2","glyphName","glyphOrientationHorizontal","glyphOrientationVertical","glyphRef","gradientTransform","gradientUnits","hanging","horizAdvX","horizOriginX","ideographic","imageRendering","in","in2","intercept","k","k1","k2","k3","k4","kernelMatrix","kernelUnitLength","kerning","keyPoints","keySplines","keyTimes","lengthAdjust","letterSpacing","lightingColor","limitingConeAngle","local","markerEnd","markerMid","markerStart","markerHeight","markerUnits","markerWidth","mask","maskContentUnits","maskUnits","mathematical","mode","numOctaves","offset","opacity","operator","order","orient","orientation","origin","overflow","overlinePosition","overlineThickness","paintOrder","panose1","pathLength","patternContentUnits","patternTransform","patternUnits","pointerEvents","points","pointsAtX","pointsAtY","pointsAtZ","preserveAlpha","preserveAspectRatio","primitiveUnits","r","radius","refX","refY","renderingIntent","repeatCount","repeatDur","requiredExtensions","requiredFeatures","restart","result","rotate","rx","ry","scale","seed","shapeRendering","slope","spacing","specularConstant","specularExponent","speed","spreadMethod","startOffset","stdDeviation","stemh","stemv","stitchTiles","stopColor","stopOpacity","strikethroughPosition","strikethroughThickness","string","stroke","strokeDasharray","strokeDashoffset","strokeLinecap","strokeLinejoin","strokeMiterlimit","strokeOpacity","strokeWidth","surfaceScale","systemLanguage","tableValues","targetX","targetY","textAnchor","textDecoration","textRendering","textLength","to","transform","u1","u2","underlinePosition","underlineThickness","unicode","unicodeBidi","unicodeRange","unitsPerEm","vAlphabetic","vHanging","vIdeographic","vMathematical","values","vectorEffect","version","vertAdvY","vertOriginX","vertOriginY","viewBox","viewTarget","visibility","widths","wordSpacing","writingMode","x","xHeight","x1","x2","xChannelSelector","xlinkActuate","xlinkArcrole","xlinkHref","xlinkRole","xlinkShow","xlinkTitle","xlinkType","xmlBase","xmlns","xmlnsXlink","xmlLang","xmlSpace","y","y1","y2","yChannelSelector","z","zoomAndPan"],h=["color","height","width"],g=RegExp.prototype.test.bind(new RegExp("^(data|aria)-[:A-Z_a-z\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02FF\\u0370-\\u037D\\u037F-\\u1FFF\\u200C-\\u200D\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD\\-.0-9\\u00B7\\u0300-\\u036F\\u203F-\\u2040]*$")),y=function(e,t){return-1!==e.indexOf(t)},C=function(e){return y(f,e)},b=function(e){return y(h,e)},v=function(e,t){return"svg"===e&&y(m,t)},k=function(e){return y(d,e)},x=function(e,t){return"string"!=typeof e||(C(t)||v(e,t)||g(t.toLowerCase())||k(t))&&("svg"===e||!b(t))},S=["a","abbr","acronym","address","applet","area","article","aside","audio","b","base","basefont","bdi","bdo","bgsound","big","blink","blockquote","body","br","button","canvas","caption","center","cite","code","col","colgroup","command","content","data","datalist","dd","del","details","dfn","dialog","dir","div","dl","dt","element","em","embed","fieldset","figcaption","figure","font","footer","form","frame","frameset","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","iframe","image","img","input","ins","isindex","kbd","keygen","label","legend","li","link","listing","main","map","mark","marquee","math","menu","menuitem","meta","meter","multicol","nav","nextid","nobr","noembed","noframes","noscript","object","ol","optgroup","option","output","p","param","picture","plaintext","pre","progress","q","rb","rbc","rp","rt","rtc","ruby","s","samp","script","section","select","shadow","slot","small","source","spacer","span","strike","strong","style","sub","summary","sup","svg","table","tbody","td","template","textarea","tfoot","th","thead","time","title","tr","track","tt","u","ul","var","video","wbr","xmp"],O=["a","altGlyph","altGlyphDef","altGlyphItem","animate","animateColor","animateMotion","animateTransform","animation","audio","canvas","circle","clipPath","color-profile","cursor","defs","desc","discard","ellipse","feBlend","feColorMatrix","feComponentTransfer","feComposite","feConvolveMatrix","feDiffuseLighting","feDisplacementMap","feDistantLight","feDropShadow","feFlood","feFuncA","feFuncB","feFuncG","feFuncR","feGaussianBlur","feImage","feMerge","feMergeNode","feMorphology","feOffset","fePointLight","feSpecularLighting","feSpotLight","feTile","feTurbulence","filter","font","font-face","font-face-format","font-face-name","font-face-src","font-face-uri","foreignObject","g","glyph","glyphRef","handler","hatch","hatchpath","hkern","iframe","image","line","linearGradient","listener","marker","mask","mesh","meshgradient","meshpatch","meshrow","metadata","missing-glyph","mpath","path","pattern","polygon","polyline","prefetch","radialGradient","rect","script","set","solidColor","solidcolor","stop","style","svg","switch","symbol","tbreak","text","textArea","textPath","title","tref","tspan","unknown","use","video","view","vkern"],T=S.concat(O).filter(function(e,t,n){return n.indexOf(e)===t}),D=void 0;if("15.5"===p.version.slice(0,4))try{D=require("prop-types")}catch(e){}D=D||p.PropTypes;var M=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},w=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),E=function(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e},P=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},F=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)},A=function(e,t){var n={};for(var o in e)t.indexOf(o)>=0||Object.prototype.hasOwnProperty.call(e,o)&&(n[o]=e[o]);return n},L=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},j=function(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t<e.length;t++)n[t]=e[t];return n}return Array.from(e)},R="__glamorous__",U=function(e){function t(){var e,n,r,a;M(this,t);for(var i=arguments.length,s=Array(i),u=0;u<i;u++)s[u]=arguments[u];return n=r=L(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(s))),r.broadcast=o(r.props.theme),r.setOuterTheme=function(e){r.outerTheme=e},a=n,L(r,a)}return F(t,e),w(t,[{key:"getTheme",value:function(e){var t=e||this.props.theme;return P({},this.outerTheme,t)}},{key:"getChildContext",value:function(){return E({},R,this.broadcast)}},{key:"componentDidMount",value:function(){this.context[R]&&(this.unsubscribe=this.context[R].subscribe(this.setOuterTheme))}},{key:"componentWillMount",value:function(){this.context[R]&&(this.setOuterTheme(this.context[R].getState()),this.broadcast.setState(this.getTheme()))}},{key:"componentWillReceiveProps",value:function(e){this.props.theme!==e.theme&&this.broadcast.setState(this.getTheme(e.theme))}},{key:"componentWillUnmount",value:function(){this.unsubscribe&&this.unsubscribe()}},{key:"render",value:function(){return this.props.children?p.Children.only(this.props.children):null}}]),t}(e.Component);U.childContextTypes=E({},R,D.object.isRequired),U.contextTypes=E({},R,D.object),U.propTypes={theme:D.object.isRequired,children:D.node},Object.assign(r,T.reduce(function(e,t){return e[t]=r(t),e},{})),Object.assign(r,T.reduce(function(e,t){var n=l(t);return e[n]=r[t](),e[n].displayName="glamorous."+n,e[n].propsAreCssOverrides=!0,e},{}));var _=Object.freeze({default:r,ThemeProvider:U}),N=r;return Object.assign(N,Object.keys(_).reduce(function(e,t){return"default"!==t&&(e[t]=_[t]),e},{})),N}); | ||
//# sourceMappingURL=glamorous.umd.min.js.map |
{ | ||
"name": "glamorous", | ||
"version": "3.0.1", | ||
"version": "3.1.0", | ||
"description": "React component styling solved", | ||
@@ -28,2 +28,3 @@ "main": "dist/glamorous.cjs.js", | ||
"dependencies": { | ||
"brcast": "^1.1.6", | ||
"html-tag-names": "^1.1.1", | ||
@@ -40,2 +41,3 @@ "svg-tag-names": "^1.1.0" | ||
"babel-jest": "^19.0.0", | ||
"babel-plugin-external-helpers": "^6.22.0", | ||
"babel-preset-env": "^1.3.3", | ||
@@ -42,0 +44,0 @@ "babel-preset-react": "^6.24.1", |
@@ -6,3 +6,3 @@ <img src="https://github.com/paypal/glamorous/raw/master/other/glamorous.png" alt="glamorous logo" title="glamorous" align="right" width="150" height="150" /> | ||
React component styling solved with an elegant ([inspired](#inspiration)) API, | ||
small footprint (<5kb gzipped), and great performance (via [`glamor`][glamor]). | ||
small footprint (~6kb gzipped), and great performance (via [`glamor`][glamor]). | ||
@@ -18,3 +18,3 @@ > Read [the intro blogpost][intro-blogpost] | ||
[](#contributors) | ||
[](#contributors) | ||
[![PRs Welcome][prs-badge]][prs] | ||
@@ -44,3 +44,3 @@ [![Chat][chat-badge]][chat] | ||
```javascript | ||
```jsx | ||
const styles = glamor.css({ | ||
@@ -77,3 +77,3 @@ fontSize: 20, | ||
```javascript | ||
```jsx | ||
const { Div } = glamorous | ||
@@ -128,2 +128,3 @@ | ||
const glamorous = require('glamorous') | ||
const {ThemeProvider} = glamorous | ||
// etc. | ||
@@ -135,3 +136,3 @@ ``` | ||
```javascript | ||
import glamorous from 'glamorous' | ||
import glamorous, {ThemeProvider} from 'glamorous' | ||
``` | ||
@@ -150,2 +151,4 @@ | ||
// Use window.glamorous here... | ||
const glamorous = window.glamorous | ||
const {ThemeProvider} = glamorous | ||
</script> | ||
@@ -214,3 +217,3 @@ ``` | ||
```javascript | ||
```jsx | ||
const myCustomGlamorStyles = glamor.css({fontSize: 2}) | ||
@@ -228,3 +231,3 @@ <MyStyledDiv className={`${myCustomGlamorStyles} custom-class`} /> | ||
```javascript | ||
```jsx | ||
const myCustomGlamorStyles = glamor.css({fontSize: 2, padding: 2}) | ||
@@ -245,3 +248,3 @@ <MyStyledDiv | ||
```javascript | ||
```jsx | ||
<MyStyledDiv size="big" /> | ||
@@ -267,3 +270,3 @@ ``` | ||
```javascript | ||
```jsx | ||
const { Div, Span, A, Img } = glamorous | ||
@@ -296,3 +299,3 @@ | ||
```javascript | ||
```jsx | ||
<glamorous.Div color="blue"> | ||
@@ -303,2 +306,53 @@ JSX is pretty wild! | ||
### Theming | ||
`glamorous` fully supports theming using a special `<ThemeProvider>` component. | ||
It provides the `theme` to all glamorous components down the tree. | ||
```jsx | ||
import glamorous, {ThemeProvider} from glamorous | ||
// our main theme object | ||
const theme = { | ||
main: {color: 'red'} | ||
} | ||
// our secondary theme object | ||
const secondaryTheme = { | ||
main: {color: 'blue'} | ||
} | ||
// a themed <Title> component | ||
const Title = glamorous.h1({ | ||
fontSize: '10px' | ||
}, (props, theme) => ({ | ||
color: theme.main.color | ||
})) | ||
// use <ThemeProvider> to pass theme down the tree | ||
<ThemeProvider theme={theme}> | ||
<Title>Hello!</Title> | ||
</ThemeProvider> | ||
// it is possible to nest themes | ||
// inner themes will be merged with outers | ||
<ThemeProvider theme={theme}> | ||
<div> | ||
<Title>Hello!</Title> | ||
<ThemeProvider theme={secondaryTheme}> | ||
{/* this will be blue */} | ||
<Title>Hello from here!</Title> | ||
</ThemeProvider> | ||
</div> | ||
</ThemeProvider> | ||
// to override a theme, just pass a theme prop to a glamorous component | ||
// the component will ignore any surrounding theme, applying the one passed directly via props | ||
<ThemeProvider theme={theme}> | ||
{/* this will be yellow */} | ||
<Title theme={{main: {color: 'yellow'}}}>Hello!</Title> | ||
</ThemeProvider> | ||
``` | ||
### Server Side Rendering (SSR) | ||
@@ -334,3 +388,3 @@ | ||
```javascript | ||
```jsx | ||
const MyListItem = glamorous.li({ | ||
@@ -360,3 +414,3 @@ listStyleType: 'none', | ||
```javascript | ||
```jsx | ||
const MyDiv = glamorous.div({ | ||
@@ -381,3 +435,3 @@ display: 'block', | ||
```javascript | ||
```jsx | ||
// import css from glamor | ||
@@ -408,3 +462,3 @@ import { css } from 'glamor' | ||
```javascript | ||
```jsx | ||
const MyResponsiveDiv = glamorous.div({ | ||
@@ -462,5 +516,5 @@ width: '100%', | ||
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --> | ||
| [<img src="https://avatars.githubusercontent.com/u/1500684?v=3" width="100px;"/><br /><sub>Kent C. Dodds</sub>](https://kentcdodds.com)<br />[💻](https://github.com/paypal/glamorous/commits?author=kentcdodds) [📖](https://github.com/paypal/glamorous/commits?author=kentcdodds) 🚇 [⚠️](https://github.com/paypal/glamorous/commits?author=kentcdodds) | [<img src="https://avatars0.githubusercontent.com/u/587016?v=3" width="100px;"/><br /><sub>Ives van Hoorne</sub>](http://ivesvh.com)<br />💡 | [<img src="https://avatars3.githubusercontent.com/u/4614574?v=3" width="100px;"/><br /><sub>Gerardo Nardelli</sub>](https://gnardelli.com)<br />[📖](https://github.com/paypal/glamorous/commits?author=patitonar) | [<img src="https://avatars0.githubusercontent.com/u/14236753?v=3" width="100px;"/><br /><sub>Chandan Rai</sub>](https://github.com/crowchirp)<br />[📖](https://github.com/paypal/glamorous/commits?author=crowchirp) | [<img src="https://avatars3.githubusercontent.com/u/16726210?v=3" width="100px;"/><br /><sub>BinHong Lee</sub>](https://binhonglee.github.io)<br />[📖](https://github.com/paypal/glamorous/commits?author=binhonglee) | [<img src="https://avatars2.githubusercontent.com/u/737065?v=3" width="100px;"/><br /><sub>Paul Molluzzo</sub>](https://paul.molluzzo.com)<br />[📖](https://github.com/paypal/glamorous/commits?author=paulmolluzzo) 💡 | [<img src="https://avatars0.githubusercontent.com/u/450559?v=3" width="100px;"/><br /><sub>Sriram Thiagarajan</sub>](http://tsriram.in)<br />[💻](https://github.com/paypal/glamorous/commits?author=tsriram) | | ||
| [<img src="https://avatars.githubusercontent.com/u/1500684?v=3" width="100px;"/><br /><sub>Kent C. Dodds</sub>](https://kentcdodds.com)<br />[💻](https://github.com/paypal/glamorous/commits?author=kentcdodds) [📖](https://github.com/paypal/glamorous/commits?author=kentcdodds) 🚇 [⚠️](https://github.com/paypal/glamorous/commits?author=kentcdodds) 👀 | [<img src="https://avatars0.githubusercontent.com/u/587016?v=3" width="100px;"/><br /><sub>Ives van Hoorne</sub>](http://ivesvh.com)<br />💡 | [<img src="https://avatars3.githubusercontent.com/u/4614574?v=3" width="100px;"/><br /><sub>Gerardo Nardelli</sub>](https://gnardelli.com)<br />[📖](https://github.com/paypal/glamorous/commits?author=patitonar) | [<img src="https://avatars0.githubusercontent.com/u/14236753?v=3" width="100px;"/><br /><sub>Chandan Rai</sub>](https://github.com/crowchirp)<br />[📖](https://github.com/paypal/glamorous/commits?author=crowchirp) | [<img src="https://avatars3.githubusercontent.com/u/16726210?v=3" width="100px;"/><br /><sub>BinHong Lee</sub>](https://binhonglee.github.io)<br />[📖](https://github.com/paypal/glamorous/commits?author=binhonglee) | [<img src="https://avatars2.githubusercontent.com/u/737065?v=3" width="100px;"/><br /><sub>Paul Molluzzo</sub>](https://paul.molluzzo.com)<br />[📖](https://github.com/paypal/glamorous/commits?author=paulmolluzzo) 💡 | [<img src="https://avatars0.githubusercontent.com/u/450559?v=3" width="100px;"/><br /><sub>Sriram Thiagarajan</sub>](http://tsriram.in)<br />[💻](https://github.com/paypal/glamorous/commits?author=tsriram) | | ||
| :---: | :---: | :---: | :---: | :---: | :---: | :---: | | ||
| [<img src="https://avatars1.githubusercontent.com/u/417268?v=3" width="100px;"/><br /><sub>Pavithra Kodmad</sub>](https://github.com/pksjce)<br />💡 | | ||
| [<img src="https://avatars1.githubusercontent.com/u/417268?v=3" width="100px;"/><br /><sub>Pavithra Kodmad</sub>](https://github.com/pksjce)<br />💡 | [<img src="https://avatars0.githubusercontent.com/u/82070?v=3" width="100px;"/><br /><sub>Alessandro Arnodo</sub>](http://alessandro.arnodo.net)<br />[💻](https://github.com/paypal/glamorous/commits?author=vesparny) [📖](https://github.com/paypal/glamorous/commits?author=vesparny) [⚠️](https://github.com/paypal/glamorous/commits?author=vesparny) | [<img src="https://avatars1.githubusercontent.com/u/105127?v=3" width="100px;"/><br /><sub>Jason Miller</sub>](https://jasonformat.com)<br />👀 | [<img src="https://avatars0.githubusercontent.com/u/1295580?v=3" width="100px;"/><br /><sub>Kyle Welch</sub>](http://krwelch.com)<br />👀 | [<img src="https://avatars0.githubusercontent.com/u/1634922?v=3" width="100px;"/><br /><sub>Javi Velasco</sub>](http://javivelasco.com)<br />👀 | [<img src="https://avatars1.githubusercontent.com/u/6886061?v=3" width="100px;"/><br /><sub>Brandon Dail</sub>](https://twitter.com/aweary)<br />👀 | [<img src="https://avatars2.githubusercontent.com/u/1714673?v=3" width="100px;"/><br /><sub>Jason Brown</sub>](http://browniefed.com)<br />👀 | | ||
<!-- ALL-CONTRIBUTORS-LIST:END --> | ||
@@ -467,0 +521,0 @@ |
Sorry, the diff of this file is not supported yet
255334
11
2600
558
5
37
+ Addedbrcast@^1.1.6
+ Addedbrcast@1.1.6(transitive)
+ Addedmitt@1.2.0(transitive)