theming - npm Package Compare versions

Comparing version 2.1.2 to 2.2.0

dist/theming.cjs.js

@@ -97,3 +97,3 @@ 'use strict';
       warning(isObject(theme), '[ThemeProvider] Please make your theme prop a plain object');
-      return _extends({}, outerTheme, theme);
+      return !outerTheme ? theme : _extends({}, outerTheme, theme);
     };
@@ -127,16 +127,12 @@
 function createWithTheme(context) {
-  return function hoc(Component, _temp) {
-    var _ref = _temp === void 0 ? {} : _temp,
-        _ref$forwardInnerRef = _ref.forwardInnerRef,
-        forwardInnerRef = _ref$forwardInnerRef === void 0 ? false : _ref$forwardInnerRef;
-
+  return function hoc(Component) {
     function withTheme(props) {
-      // $FlowFixMe
       var innerRef = props.innerRef,
           otherProps = _objectWithoutPropertiesLoose(props, ["innerRef"]);
 
-      otherProps[forwardInnerRef ? 'innerRef' : 'ref'] = innerRef;
       return React.createElement(context.Consumer, null, function (theme) {
+        warning(isObject(theme), '[theming] Please use withTheme only with the ThemeProvider');
         return React.createElement(Component, _extends({
-          theme: theme
+          theme: theme,
+          ref: innerRef
         }, otherProps));
@@ -152,6 +148,7 @@ });
 
-var ThemeContext = createReactContext({});
+var ThemeContext = createReactContext();
 
 function createTheming(context) {
   return {
+    context: context,
     withTheme: createWithTheme(context),
@@ -158,0 +155,0 @@ ThemeProvider: createThemeProvider(context)

dist/theming.esm.js

@@ -91,3 +91,3 @@ import React from 'react';
       warning(isObject(theme), '[ThemeProvider] Please make your theme prop a plain object');
-      return _extends({}, outerTheme, theme);
+      return !outerTheme ? theme : _extends({}, outerTheme, theme);
     };
@@ -121,16 +121,12 @@
 function createWithTheme(context) {
-  return function hoc(Component, _temp) {
-    var _ref = _temp === void 0 ? {} : _temp,
-        _ref$forwardInnerRef = _ref.forwardInnerRef,
-        forwardInnerRef = _ref$forwardInnerRef === void 0 ? false : _ref$forwardInnerRef;
-
+  return function hoc(Component) {
     function withTheme(props) {
-      // $FlowFixMe
       var innerRef = props.innerRef,
           otherProps = _objectWithoutPropertiesLoose(props, ["innerRef"]);
 
-      otherProps[forwardInnerRef ? 'innerRef' : 'ref'] = innerRef;
       return React.createElement(context.Consumer, null, function (theme) {
+        warning(isObject(theme), '[theming] Please use withTheme only with the ThemeProvider');
         return React.createElement(Component, _extends({
-          theme: theme
+          theme: theme,
+          ref: innerRef
         }, otherProps));
@@ -146,6 +142,7 @@ });
 
-var ThemeContext = createReactContext({});
+var ThemeContext = createReactContext();
 
 function createTheming(context) {
   return {
+    context: context,
     withTheme: createWithTheme(context),
@@ -152,0 +149,0 @@ ThemeProvider: createThemeProvider(context)

dist/theming.js

@@ -1220,3 +1220,3 @@ (function (global, factory) {
 	      warning_1$1(isObject(theme), '[ThemeProvider] Please make your theme prop a plain object');
-	      return _extends({}, outerTheme, theme);
+	      return !outerTheme ? theme : _extends({}, outerTheme, theme);
 	    };
@@ -1606,16 +1606,12 @@
 	function createWithTheme(context) {
-	  return function hoc(Component, _temp) {
-	    var _ref = _temp === void 0 ? {} : _temp,
-	        _ref$forwardInnerRef = _ref.forwardInnerRef,
-	        forwardInnerRef = _ref$forwardInnerRef === void 0 ? false : _ref$forwardInnerRef;
-
+	  return function hoc(Component) {
 	    function withTheme(props) {
-	      // $FlowFixMe
 	      var innerRef = props.innerRef,
 	          otherProps = _objectWithoutPropertiesLoose(props, ["innerRef"]);
 
-	      otherProps[forwardInnerRef ? 'innerRef' : 'ref'] = innerRef;
 	      return React.createElement(context.Consumer, null, function (theme) {
+	        warning_1$1(isObject(theme), '[theming] Please use withTheme only with the ThemeProvider');
 	        return React.createElement(Component, _extends({
-	          theme: theme
+	          theme: theme,
+	          ref: innerRef
 	        }, otherProps));
@@ -1631,6 +1627,7 @@ });
 
-	var ThemeContext = createReactContext({});
+	var ThemeContext = createReactContext();
 
 	function createTheming(context) {
 	  return {
+	    context: context,
 	    withTheme: createWithTheme(context),
@@ -1637,0 +1634,0 @@ ThemeProvider: createThemeProvider(context)

dist/theming.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t(e.theming={},e.react)}(this,function(e,y){"use strict";function t(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}function r(e,t){return e(t={exports:{}},t.exports),t.exports}y=y&&y.hasOwnProperty("default")?y.default:y;var n=Object.getOwnPropertySymbols,o=Object.prototype.hasOwnProperty,i=Object.prototype.propertyIsEnumerable;(function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},r=0;r<10;r++)t["_"+String.fromCharCode(r)]=r;if("0123456789"!==Object.getOwnPropertyNames(t).map(function(e){return t[e]}).join(""))return!1;var n={};return"abcdefghijklmnopqrst".split("").forEach(function(e){n[e]=e}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},n)).join("")}catch(e){return!1}})()&&Object.assign;function u(){}var d=r(function(e){e.exports=function(){function e(e,t,r,n,o,i){if("SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"!==i){var u=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw u.name="Invariant Violation",u}}function t(){return e}var r={array:e.isRequired=e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t};return r.checkPropTypes=u,r.PropTypes=r}()}),a="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{},c="__global_unique_id__",m=function(){return a[c]=(a[c]||0)+1};function f(e){return function(){return e}}var s=function(){};s.thatReturns=f,s.thatReturnsFalse=f(!1),s.thatReturnsTrue=f(!0),s.thatReturnsNull=f(null),s.thatReturnsThis=function(){return this},s.thatReturnsArgument=function(e){return e};var h=s,p=r(function(e,t){t.__esModule=!0;r(y);var a=r(d),c=r(m);r(h);function r(e){return e&&e.__esModule?e:{default:e}}function f(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(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}function p(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)}var l=1073741823;t.default=function(e,u){var t,r,n="__create-react-context-"+(0,c.default)()+"__",o=function(a){function c(){var e,t,r,n;f(this,c);for(var o=arguments.length,i=Array(o),u=0;u<o;u++)i[u]=arguments[u];return(e=t=s(this,a.call.apply(a,[this].concat(i)))).emitter=(r=t.props.value,n=[],{on:function(e){n.push(e)},off:function(t){n=n.filter(function(e){return e!==t})},get:function(){return r},set:function(e,t){r=e,n.forEach(function(e){return e(r,t)})}}),s(t,e)}return p(c,a),c.prototype.getChildContext=function(){var e;return(e={})[n]=this.emitter,e},c.prototype.componentWillReceiveProps=function(e){if(this.props.value!==e.value){var t=this.props.value,r=e.value,n=void 0;((o=t)===(i=r)?0!==o||1/o==1/i:o!=o&&i!=i)?n=0:(n="function"==typeof u?u(t,r):l,0!=(n|=0)&&this.emitter.set(e.value,n))}var o,i},c.prototype.render=function(){return this.props.children},c}(y.Component);o.childContextTypes=((t={})[n]=a.default.object.isRequired,t);var i=function(i){function u(){var e,r;f(this,u);for(var t=arguments.length,n=Array(t),o=0;o<t;o++)n[o]=arguments[o];return(e=r=s(this,i.call.apply(i,[this].concat(n)))).state={value:r.getValue()},r.onUpdate=function(e,t){0!=((0|r.observedBits)&t)&&r.setState({value:r.getValue()})},s(r,e)}return p(u,i),u.prototype.componentWillReceiveProps=function(e){var t=e.observedBits;this.observedBits=null==t?l:t},u.prototype.componentDidMount=function(){this.context[n]&&this.context[n].on(this.onUpdate);var e=this.props.observedBits;this.observedBits=null==e?l:e},u.prototype.componentWillUnmount=function(){this.context[n]&&this.context[n].off(this.onUpdate)},u.prototype.getValue=function(){return this.context[n]?this.context[n].get():e},u.prototype.render=function(){return e=this.props.children,(Array.isArray(e)?e[0]:e)(this.state.value);var e},u}(y.Component);return i.contextTypes=((r={})[n]=a.default.object,r),{Provider:o,Consumer:i}},e.exports=t.default});t(p);var l=t(r(function(e,t){t.__esModule=!0;var r=o(y),n=o(p);function o(e){return e&&e.__esModule?e:{default:e}}t.default=r.default.createContext||n.default,e.exports=t.default}));function v(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function b(){return(b=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}var P=function(){};function g(e){return null!==e&&"object"==typeof e&&!Array.isArray(e)}function O(i){var e,t;return t=e=function(e){var t,r;function n(){return e.apply(this,arguments)||this}r=e,(t=n).prototype=Object.create(r.prototype),(t.prototype.constructor=t).__proto__=r;var o=n.prototype;return o.getTheme=function(e){var t=this.props.theme;if("function"!=typeof t)return P(g(t),"[ThemeProvider] Please make your theme prop a plain object"),b({},e,t);var r=t(e);return P(g(r),"[ThemeProvider] Please return an object from your theme function"),r},o.render=function(){var t=this,r=this.props.children;return r?y.createElement(i.Consumer,null,function(e){return y.createElement(i.Provider,{value:t.getTheme(e)},r)}):null},n}(y.Component),v(e,"propTypes",{children:d.node,theme:d.oneOfType([d.shape({}),d.func]).isRequired}),v(e,"defaultProps",{children:null}),t}var _=r(function(e,t){Object.defineProperty(t,"__esModule",{value:!0});var r="function"==typeof Symbol&&Symbol.for,n=r?Symbol.for("react.element"):60103,o=r?Symbol.for("react.portal"):60106,i=r?Symbol.for("react.fragment"):60107,u=r?Symbol.for("react.strict_mode"):60108,a=r?Symbol.for("react.profiler"):60114,c=r?Symbol.for("react.provider"):60109,f=r?Symbol.for("react.context"):60110,s=r?Symbol.for("react.concurrent_mode"):60111,p=r?Symbol.for("react.forward_ref"):60112,l=r?Symbol.for("react.suspense"):60113,y=r?Symbol.for("react.memo"):60115,d=r?Symbol.for("react.lazy"):60116;function m(e){if("object"==typeof e&&null!==e){var t=e.$$typeof;switch(t){case n:switch(e=e.type){case s:case i:case a:case u:return e;default:switch(e=e&&e.$$typeof){case f:case p:case c:return e;default:return t}}case o:return t}}}function h(e){return m(e)===s}t.typeOf=m,t.AsyncMode=s,t.ConcurrentMode=s,t.ContextConsumer=f,t.ContextProvider=c,t.Element=n,t.ForwardRef=p,t.Fragment=i,t.Profiler=a,t.Portal=o,t.StrictMode=u,t.isValidElementType=function(e){return"string"==typeof e||"function"==typeof e||e===i||e===s||e===a||e===u||e===l||"object"==typeof e&&null!==e&&(e.$$typeof===d||e.$$typeof===y||e.$$typeof===c||e.$$typeof===f||e.$$typeof===p)},t.isAsyncMode=function(e){return h(e)},t.isConcurrentMode=h,t.isContextConsumer=function(e){return m(e)===f},t.isContextProvider=function(e){return m(e)===c},t.isElement=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===n},t.isForwardRef=function(e){return m(e)===p},t.isFragment=function(e){return m(e)===i},t.isProfiler=function(e){return m(e)===a},t.isPortal=function(e){return m(e)===o},t.isStrictMode=function(e){return m(e)===u}});t(_);_.typeOf,_.AsyncMode,_.ConcurrentMode,_.ContextConsumer,_.ContextProvider,_.Element,_.ForwardRef,_.Fragment,_.Profiler,_.Portal,_.StrictMode,_.isValidElementType,_.isAsyncMode,_.isConcurrentMode,_.isContextConsumer,_.isContextProvider,_.isElement,_.isForwardRef,_.isFragment,_.isProfiler,_.isPortal,_.isStrictMode;var j=r(function(e,t){});t(j);j.typeOf,j.AsyncMode,j.ConcurrentMode,j.ContextConsumer,j.ContextProvider,j.Element,j.ForwardRef,j.Fragment,j.Profiler,j.Portal,j.StrictMode,j.isValidElementType,j.isAsyncMode,j.isConcurrentMode,j.isContextConsumer,j.isContextProvider,j.isElement,j.isForwardRef,j.isFragment,j.isProfiler,j.isPortal,j.isStrictMode;var x=r(function(e){e.exports=_}),w={childContextTypes:!0,contextType:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},C={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},T={};T[x.ForwardRef]={$$typeof:!0,render:!0};var S=Object.defineProperty,M=Object.getOwnPropertyNames,R=Object.getOwnPropertySymbols,E=Object.getOwnPropertyDescriptor,$=Object.getPrototypeOf,F=Object.prototype;var A=function e(t,r,n){if("string"==typeof r)return t;if(F){var o=$(r);o&&o!==F&&e(t,o,n)}var i=M(r);R&&(i=i.concat(R(r)));for(var u=T[t.$$typeof]||w,a=T[r.$$typeof]||w,c=0;c<i.length;++c){var f=i[c];if(!(C[f]||n&&n[f]||a&&a[f]||u&&u[f])){var s=E(r,f);try{S(t,f,s)}catch(e){}}}return t},k=t(r(function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){return e.displayName||e.name||("string"==typeof e&&0<e.length?e:"Unknown")}}));function N(i){return function(n,e){var t=(void 0===e?{}:e).forwardInnerRef,o=void 0!==t&&t;function r(e){var t=e.innerRef,r=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],0<=t.indexOf(r)||(o[r]=e[r]);return o}(e,["innerRef"]);return r[o?"innerRef":"ref"]=t,y.createElement(i.Consumer,null,function(e){return y.createElement(n,b({theme:e},r))})}return r.displayName="WithTheme("+k(n)+")",A(r,n),r}}var q=l({});function U(e){return{withTheme:N(e),ThemeProvider:O(e)}}var V=U(q),B=V.withTheme,D=V.ThemeProvider;e.ThemeContext=q,e.withTheme=B,e.createTheming=U,e.ThemeProvider=D,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t(e.theming={},e.react)}(this,function(e,y){"use strict";function t(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}function r(e,t){return e(t={exports:{}},t.exports),t.exports}y=y&&y.hasOwnProperty("default")?y.default:y;var n=Object.getOwnPropertySymbols,o=Object.prototype.hasOwnProperty,i=Object.prototype.propertyIsEnumerable;(function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},r=0;r<10;r++)t["_"+String.fromCharCode(r)]=r;if("0123456789"!==Object.getOwnPropertyNames(t).map(function(e){return t[e]}).join(""))return!1;var n={};return"abcdefghijklmnopqrst".split("").forEach(function(e){n[e]=e}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},n)).join("")}catch(e){return!1}})()&&Object.assign;function u(){}var d=r(function(e){e.exports=function(){function e(e,t,r,n,o,i){if("SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"!==i){var u=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw u.name="Invariant Violation",u}}function t(){return e}var r={array:e.isRequired=e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t};return r.checkPropTypes=u,r.PropTypes=r}()}),a="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{},c="__global_unique_id__",h=function(){return a[c]=(a[c]||0)+1};function f(e){return function(){return e}}var s=function(){};s.thatReturns=f,s.thatReturnsFalse=f(!1),s.thatReturnsTrue=f(!0),s.thatReturnsNull=f(null),s.thatReturnsThis=function(){return this},s.thatReturnsArgument=function(e){return e};var m=s,p=r(function(e,t){t.__esModule=!0;r(y);var a=r(d),c=r(h);r(m);function r(e){return e&&e.__esModule?e:{default:e}}function f(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(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}function p(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)}var l=1073741823;t.default=function(e,u){var t,r,n="__create-react-context-"+(0,c.default)()+"__",o=function(a){function c(){var e,t,r,n;f(this,c);for(var o=arguments.length,i=Array(o),u=0;u<o;u++)i[u]=arguments[u];return(e=t=s(this,a.call.apply(a,[this].concat(i)))).emitter=(r=t.props.value,n=[],{on:function(e){n.push(e)},off:function(t){n=n.filter(function(e){return e!==t})},get:function(){return r},set:function(e,t){r=e,n.forEach(function(e){return e(r,t)})}}),s(t,e)}return p(c,a),c.prototype.getChildContext=function(){var e;return(e={})[n]=this.emitter,e},c.prototype.componentWillReceiveProps=function(e){if(this.props.value!==e.value){var t=this.props.value,r=e.value,n=void 0;((o=t)===(i=r)?0!==o||1/o==1/i:o!=o&&i!=i)?n=0:(n="function"==typeof u?u(t,r):l,0!=(n|=0)&&this.emitter.set(e.value,n))}var o,i},c.prototype.render=function(){return this.props.children},c}(y.Component);o.childContextTypes=((t={})[n]=a.default.object.isRequired,t);var i=function(i){function u(){var e,r;f(this,u);for(var t=arguments.length,n=Array(t),o=0;o<t;o++)n[o]=arguments[o];return(e=r=s(this,i.call.apply(i,[this].concat(n)))).state={value:r.getValue()},r.onUpdate=function(e,t){0!=((0|r.observedBits)&t)&&r.setState({value:r.getValue()})},s(r,e)}return p(u,i),u.prototype.componentWillReceiveProps=function(e){var t=e.observedBits;this.observedBits=null==t?l:t},u.prototype.componentDidMount=function(){this.context[n]&&this.context[n].on(this.onUpdate);var e=this.props.observedBits;this.observedBits=null==e?l:e},u.prototype.componentWillUnmount=function(){this.context[n]&&this.context[n].off(this.onUpdate)},u.prototype.getValue=function(){return this.context[n]?this.context[n].get():e},u.prototype.render=function(){return e=this.props.children,(Array.isArray(e)?e[0]:e)(this.state.value);var e},u}(y.Component);return i.contextTypes=((r={})[n]=a.default.object,r),{Provider:o,Consumer:i}},e.exports=t.default});t(p);var l=t(r(function(e,t){t.__esModule=!0;var r=o(y),n=o(p);function o(e){return e&&e.__esModule?e:{default:e}}t.default=r.default.createContext||n.default,e.exports=t.default}));function v(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function b(){return(b=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}var P=function(){};function g(e){return null!==e&&"object"==typeof e&&!Array.isArray(e)}function O(i){var e,t;return t=e=function(e){var t,r;function n(){return e.apply(this,arguments)||this}r=e,(t=n).prototype=Object.create(r.prototype),(t.prototype.constructor=t).__proto__=r;var o=n.prototype;return o.getTheme=function(e){var t=this.props.theme;if("function"!=typeof t)return P(g(t),"[ThemeProvider] Please make your theme prop a plain object"),e?b({},e,t):t;var r=t(e);return P(g(r),"[ThemeProvider] Please return an object from your theme function"),r},o.render=function(){var t=this,r=this.props.children;return r?y.createElement(i.Consumer,null,function(e){return y.createElement(i.Provider,{value:t.getTheme(e)},r)}):null},n}(y.Component),v(e,"propTypes",{children:d.node,theme:d.oneOfType([d.shape({}),d.func]).isRequired}),v(e,"defaultProps",{children:null}),t}var _=r(function(e,t){Object.defineProperty(t,"__esModule",{value:!0});var r="function"==typeof Symbol&&Symbol.for,n=r?Symbol.for("react.element"):60103,o=r?Symbol.for("react.portal"):60106,i=r?Symbol.for("react.fragment"):60107,u=r?Symbol.for("react.strict_mode"):60108,a=r?Symbol.for("react.profiler"):60114,c=r?Symbol.for("react.provider"):60109,f=r?Symbol.for("react.context"):60110,s=r?Symbol.for("react.concurrent_mode"):60111,p=r?Symbol.for("react.forward_ref"):60112,l=r?Symbol.for("react.suspense"):60113,y=r?Symbol.for("react.memo"):60115,d=r?Symbol.for("react.lazy"):60116;function h(e){if("object"==typeof e&&null!==e){var t=e.$$typeof;switch(t){case n:switch(e=e.type){case s:case i:case a:case u:return e;default:switch(e=e&&e.$$typeof){case f:case p:case c:return e;default:return t}}case o:return t}}}function m(e){return h(e)===s}t.typeOf=h,t.AsyncMode=s,t.ConcurrentMode=s,t.ContextConsumer=f,t.ContextProvider=c,t.Element=n,t.ForwardRef=p,t.Fragment=i,t.Profiler=a,t.Portal=o,t.StrictMode=u,t.isValidElementType=function(e){return"string"==typeof e||"function"==typeof e||e===i||e===s||e===a||e===u||e===l||"object"==typeof e&&null!==e&&(e.$$typeof===d||e.$$typeof===y||e.$$typeof===c||e.$$typeof===f||e.$$typeof===p)},t.isAsyncMode=function(e){return m(e)},t.isConcurrentMode=m,t.isContextConsumer=function(e){return h(e)===f},t.isContextProvider=function(e){return h(e)===c},t.isElement=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===n},t.isForwardRef=function(e){return h(e)===p},t.isFragment=function(e){return h(e)===i},t.isProfiler=function(e){return h(e)===a},t.isPortal=function(e){return h(e)===o},t.isStrictMode=function(e){return h(e)===u}});t(_);_.typeOf,_.AsyncMode,_.ConcurrentMode,_.ContextConsumer,_.ContextProvider,_.Element,_.ForwardRef,_.Fragment,_.Profiler,_.Portal,_.StrictMode,_.isValidElementType,_.isAsyncMode,_.isConcurrentMode,_.isContextConsumer,_.isContextProvider,_.isElement,_.isForwardRef,_.isFragment,_.isProfiler,_.isPortal,_.isStrictMode;var j=r(function(e,t){});t(j);j.typeOf,j.AsyncMode,j.ConcurrentMode,j.ContextConsumer,j.ContextProvider,j.Element,j.ForwardRef,j.Fragment,j.Profiler,j.Portal,j.StrictMode,j.isValidElementType,j.isAsyncMode,j.isConcurrentMode,j.isContextConsumer,j.isContextProvider,j.isElement,j.isForwardRef,j.isFragment,j.isProfiler,j.isPortal,j.isStrictMode;var x=r(function(e){e.exports=_}),w={childContextTypes:!0,contextType:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},C={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},T={};T[x.ForwardRef]={$$typeof:!0,render:!0};var S=Object.defineProperty,M=Object.getOwnPropertyNames,R=Object.getOwnPropertySymbols,E=Object.getOwnPropertyDescriptor,$=Object.getPrototypeOf,F=Object.prototype;var A=function e(t,r,n){if("string"==typeof r)return t;if(F){var o=$(r);o&&o!==F&&e(t,o,n)}var i=M(r);R&&(i=i.concat(R(r)));for(var u=T[t.$$typeof]||w,a=T[r.$$typeof]||w,c=0;c<i.length;++c){var f=i[c];if(!(C[f]||n&&n[f]||a&&a[f]||u&&u[f])){var s=E(r,f);try{S(t,f,s)}catch(e){}}}return t},k=t(r(function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){return e.displayName||e.name||("string"==typeof e&&0<e.length?e:"Unknown")}}));function N(o){return function(n){function e(e){var t=e.innerRef,r=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],0<=t.indexOf(r)||(o[r]=e[r]);return o}(e,["innerRef"]);return y.createElement(o.Consumer,null,function(e){return P(g(e),"[theming] Please use withTheme only with the ThemeProvider"),y.createElement(n,b({theme:e,ref:t},r))})}return e.displayName="WithTheme("+k(n)+")",A(e,n),e}}var q=l();function U(e){return{context:e,withTheme:N(e),ThemeProvider:O(e)}}var V=U(q),B=V.withTheme,D=V.ThemeProvider;e.ThemeContext=q,e.withTheme=B,e.createTheming=U,e.ThemeProvider=D,Object.defineProperty(e,"__esModule",{value:!0})});

package.json

 {
   "name": "theming",
-  "version": "2.1.2",
+  "version": "2.2.0",
   "description": "Unified CSSinJS theming solution for React",
@@ -5,0 +5,0 @@ "main": "dist/theming.cjs.js",

README.md

@@ -169,3 +169,3 @@ # Theming
 
-### withTheme(component, options)
+### withTheme(component)
 
@@ -218,17 +218,2 @@ React High-Order component, which maps context to theme prop.
 
-#### options
- 
-Type: `Object`
-
-The options currently only contains one property.
-
-##### forwardInnerRef
-
-Type: `Boolean`
-Default: `false`
-
-This will actually just forward the `innerRef` property to the nested component.
-Otherwise the `innerRef` will be set as the `ref` prop of the wrapped component.
-This is most useful when building a Higher-Order-Component which uses `withTheme` to not have the ref on your Higher-Order-Component.
-
 ### createTheming(context)
@@ -235,0 +220,0 @@

src/create-theme-provider.js

@@ -11,3 +11,3 @@ // @flow
   children: Node,
-  theme: Theme | (outerTheme: Theme) => Theme,
+  theme: $NonMaybeType<Theme> | (outerTheme: Theme) => $NonMaybeType<Theme>,
 };
@@ -44,3 +44,3 @@
 
-      return { ...outerTheme, ...theme };
+      return !outerTheme ? theme : { ...outerTheme, ...theme };
     }
@@ -47,0 +47,0 @@

src/create-theme-provider.test.js

@@ -84,1 +84,45 @@ // @flow
 });
+
+test('should return not modify the theme when the ThemeProvider isn\'t nested', (t) => {
+  const context = createReactContext();
+  const ThemeProvider = createThemeProvider(context);
+  const themeA = {};
+  let receivedTheme;
+
+  TestRenderer.create((
+    <ThemeProvider theme={themeA}>
+      <context.Consumer>
+        {(theme) => {
+          receivedTheme = theme;
+          return null;
+        }}
+      </context.Consumer>
+    </ThemeProvider>
+  ));
+
+  t.true(themeA === receivedTheme);
+});
+
+test('should create new theme object when 2 ThemeProvider\'s are nested', (t) => {
+  const context = createReactContext();
+  const ThemeProvider = createThemeProvider(context);
+  const themeA = {};
+  const themeB = {};
+  let receivedTheme;
+
+  TestRenderer.create((
+    <ThemeProvider theme={themeA}>
+      <ThemeProvider theme={themeB}>
+        <context.Consumer>
+          {(theme) => {
+            receivedTheme = theme;
+            return null;
+          }}
+        </context.Consumer>
+      </ThemeProvider>
+    </ThemeProvider>
+  ));
+
+  t.true(themeA !== receivedTheme);
+  t.true(themeB !== receivedTheme);
+});

src/create-with-theme.js

 // @flow
 
-import React, { type ComponentType, type ElementRef } from 'react';
+import React, { type ComponentType, type Ref } from 'react';
 import { type Context } from 'create-react-context';
 import hoist from 'hoist-non-react-statics';
 import getDisplayName from 'react-display-name';
+import warning from 'warning';
+import isObject from './is-object';
 
-type Options = { forwardInnerRef?: boolean };
-type OuterPropsType<InnerProps, InnerComponent, Theme> = $Diff<InnerProps, { theme: Theme }> & {
-  theme?: Theme,
-  innerRef?: (instance: ElementRef<InnerComponent> | null) => void
-};
-type InnerPropsType<Theme> = { theme: Theme };
-
-export default function createWithTheme<Theme: {}>(context: Context<Theme>) {
+export default function createWithTheme<Theme>(context: Context<Theme>) {
   return function hoc<
-    InnerProps: InnerPropsType<Theme>,
+    InnerProps: {},
     InnerComponent: ComponentType<InnerProps>,
-    OuterProps: OuterPropsType<InnerProps, InnerComponent, Theme>,
-  >(
-    Component: InnerComponent,
-    { forwardInnerRef = false }: Options = {},
-  ): ComponentType<OuterProps> {
+    OuterProps: $Diff<InnerProps, { theme: Theme }> & { innerRef?: Ref<InnerComponent> },
+  >(Component: InnerComponent): ComponentType<OuterProps> {
     function withTheme(props: OuterProps) {
-      // $FlowFixMe
       const { innerRef, ...otherProps } = props;
 
-      otherProps[forwardInnerRef ? 'innerRef' : 'ref'] = innerRef;
-
       return (
         <context.Consumer>
-          {theme => (
-            <Component
-              theme={theme}
-              {...otherProps}
-            />
-          )}
+          {(theme) => {
+            warning(isObject(theme), '[theming] Please use withTheme only with the ThemeProvider');
+
+            return (
+              <Component
+                theme={theme}
+                ref={innerRef}
+                {...otherProps}
+              />
+            );
+          }}
         </context.Consumer>
@@ -39,0 +33,0 @@ );

src/create-with-theme.test.js

@@ -6,9 +6,12 @@ // @flow
 import TestRenderer from 'react-test-renderer';
+import sinon from 'sinon';
 
 import createWithTheme from './create-with-theme';
 
+type Props = { theme: {} };
+
 // eslint-disable-next-line no-unused-vars
-const FunctionalComponent = (props: { theme: {} }) => null;
+const FunctionalComponent = (props: Props) => null;
 
-class ClassComponent extends React.Component<{ theme: {} }> {
+class ClassComponent extends React.Component<Props> {
   static displayName = 'foo';
@@ -72,3 +75,4 @@
 test('innerRef should set the ref prop on the wrapped component', (t) => {
-  const context = createReactContext({});
+  const theme = {};
+  const context = createReactContext<{}>(theme);
   const withTheme = createWithTheme(context);
@@ -88,13 +92,2 @@ let refComp = null;
 
-test('should forward the innerRef to the wrapped component when forwardInnerRef is true', (t) => {
-  const context = createReactContext({});
-  const WithTheme = createWithTheme(context)(FunctionalComponent, { forwardInnerRef: true });
-  const innerRef = () => undefined;
-  const { root } = TestRenderer.create((
-    <WithTheme innerRef={innerRef} />
-  ));
-
-  t.true(root.findByType(FunctionalComponent).props.innerRef === innerRef);
-});
-
 test('withTheme(Comp) hoists non-react static class properties', (t) => {
@@ -117,1 +110,17 @@ const context = createReactContext({});
 });
+
+test('should warn when theme isn\'t an object', (t) => {
+  const spy = sinon.spy(console, 'error');
+
+  const context = createReactContext(null);
+  const withTheme = createWithTheme(context);
+  const WithTheme = withTheme(ClassComponent);
+
+  TestRenderer.create((
+    <WithTheme />
+  ));
+
+  t.deepEqual(spy.callCount, 1);
+
+  spy.restore();
+});

src/index.d.ts

 import * as React from 'react';
 import { Context } from 'create-react-context';
 
-type DefaultTheme = object;
+type DefaultTheme = object | null;
 
@@ -9,15 +9,9 @@ type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;
 type WithThemeFactory<Theme> = <
-    InnerProps extends { theme: Theme },
+    InnerProps extends { theme: NonNullable<Theme> },
     InnerComponent extends React.ComponentType<InnerProps>,
-    OuterProps extends Omit<InnerProps, { theme: Theme }> & {
-        theme?: Theme,
-        innerRef?: (ref: InnerComponent | null) => void,
-    },
->(
-    comp: InnerComponent,
-    options?: { forwardInnerRef?: boolean },
-) => React.ComponentType<OuterProps>;
+    OuterProps extends Omit<InnerProps, { theme: NonNullable<Theme> }> & { innerRef?: React.Ref<InnerComponent> },
+>(comp: InnerComponent) => React.ComponentType<OuterProps>;
 
 interface ThemeProviderProps<Theme> {
-    theme: Theme | ((outerTheme: object) => Theme),
+    theme: NonNullable<Theme> | ((outerTheme: Theme) => NonNullable<Theme>),
     children: React.ReactNode,
@@ -29,2 +23,3 @@ }
 interface Theming<Theme> {
+    context: Context<Theme>,
     withTheme: WithThemeFactory<Theme>,
@@ -38,3 +33,3 @@ ThemeProvider: ThemeProviderFactory<Theme>,
 declare const ThemeProvider: ThemeProviderFactory<DefaultTheme>;
-declare const ThemeContext: Context<{}>;
+declare const ThemeContext: Context<DefaultTheme>;
 
@@ -41,0 +36,0 @@ export {

src/index.js

@@ -8,13 +8,17 @@ // @flow
 
-type ExtractReturnType = <ReturnType>((context: Context<{}>) => ReturnType) => ReturnType;
+type ExtractReturnType<Theme> = <ReturnType>(
+  (context: Context<Theme>) => ReturnType
+) => ReturnType;
 
-interface Theming {
-  withTheme: $Call<ExtractReturnType, typeof createWithTheme>,
-  ThemeProvider: $Call<ExtractReturnType, typeof createThemeProvider>,
+interface Theming<Theme> {
+  context: Context<Theme>,
+  withTheme: $Call<ExtractReturnType<Theme>, typeof createWithTheme>,
+  ThemeProvider: $Call<ExtractReturnType<Theme>, typeof createThemeProvider>,
 }
 
-const ThemeContext = createReactContext<{}>({});
+const ThemeContext = createReactContext<{} | void>();
 
-function createTheming(context: Context<{}>): Theming {
+function createTheming<Theme>(context: Context<Theme>): Theming<Theme> {
   return {
+    context,
     withTheme: createWithTheme(context),
@@ -21,0 +25,0 @@ ThemeProvider: createThemeProvider(context),

src/index.test.js

@@ -23,3 +23,3 @@ // @flow
   const actual = Object.keys(theming);
-  const expected = ['withTheme', 'ThemeProvider'];
+  const expected = ['context', 'withTheme', 'ThemeProvider'];
 
@@ -26,0 +26,0 @@ t.deepEqual(

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

203168

increased by0.1%

Lines of code

2077

increased by1.52%

Worsened metrics

Number of lines in readme file

291

decreased by-4.9%

No dependency changes