theming - npm Package Compare versions

Comparing version 2.0.0 to 2.1.0

CHANGELOG.md

@@ -6,4 +6,10 @@ # Changelog
 
-### 2.0.0 (Unreleased)
+### 2.1.0 (2018-10-31)
 
+- Align flow and TypeScript types so they export the same interfaces ([#60](https://github.com/cssinjs/theming/pull/60))
+- Improve withTheme HoC, added support for innerRef and improved typings ([#61](https://github.com/cssinjs/theming/pull/61))
+- Export the default ThemeContext ([#62](https://github.com/cssinjs/theming/pull/62))
+
+### 2.0.0 (2018-10-24)
+
 - Use new React Context API ([#54](https://github.com/cssinjs/theming/pull/54))
@@ -10,0 +16,0 @@ - Switched build system to rollup for building esm, cjs and umd ([#55](https://github.com/cssinjs/theming/pull/55))

dist/theming.cjs.js

@@ -53,2 +53,17 @@ 'use strict';
 
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
 function isObject(obj) {
@@ -112,12 +127,17 @@ return obj !== null && typeof obj === 'object' && !Array.isArray(obj);
 function createWithTheme(context) {
-  function hoc(Component, propName) {
-    if (propName === void 0) {
-      propName = 'theme';
-    }
+  return function hoc(Component, _temp) {
+    var _ref = _temp === void 0 ? {} : _temp,
+        _ref$forwardInnerRef = _ref.forwardInnerRef,
+        forwardInnerRef = _ref$forwardInnerRef === void 0 ? false : _ref$forwardInnerRef;
 
     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) {
-        var _ref;
-
-        return React.createElement(Component, _extends({}, (_ref = {}, _ref[propName] = theme, _ref), props));
+        return React.createElement(Component, _extends({
+          theme: theme
+        }, otherProps));
       });
@@ -129,8 +149,6 @@ }
     return withTheme;
-  }
-
-  return hoc;
+  };
 }
 
-var defaultContext = createReactContext({});
+var ThemeContext = createReactContext({});
 
@@ -144,8 +162,9 @@ function createTheming(context) {
 
-var _createTheming = createTheming(defaultContext),
+var _createTheming = createTheming(ThemeContext),
     withTheme = _createTheming.withTheme,
     ThemeProvider = _createTheming.ThemeProvider;
 
+exports.ThemeContext = ThemeContext;
 exports.withTheme = withTheme;
 exports.createTheming = createTheming;
 exports.ThemeProvider = ThemeProvider;

dist/theming.esm.js

@@ -47,2 +47,17 @@ import React from 'react';
 
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
 function isObject(obj) {
@@ -106,12 +121,17 @@ return obj !== null && typeof obj === 'object' && !Array.isArray(obj);
 function createWithTheme(context) {
-  function hoc(Component, propName) {
-    if (propName === void 0) {
-      propName = 'theme';
-    }
+  return function hoc(Component, _temp) {
+    var _ref = _temp === void 0 ? {} : _temp,
+        _ref$forwardInnerRef = _ref.forwardInnerRef,
+        forwardInnerRef = _ref$forwardInnerRef === void 0 ? false : _ref$forwardInnerRef;
 
     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) {
-        var _ref;
-
-        return React.createElement(Component, _extends({}, (_ref = {}, _ref[propName] = theme, _ref), props));
+        return React.createElement(Component, _extends({
+          theme: theme
+        }, otherProps));
       });
@@ -123,8 +143,6 @@ }
     return withTheme;
-  }
-
-  return hoc;
+  };
 }
 
-var defaultContext = createReactContext({});
+var ThemeContext = createReactContext({});
 
@@ -138,6 +156,6 @@ function createTheming(context) {
 
-var _createTheming = createTheming(defaultContext),
+var _createTheming = createTheming(ThemeContext),
     withTheme = _createTheming.withTheme,
     ThemeProvider = _createTheming.ThemeProvider;
 
-export { withTheme, createTheming, ThemeProvider };
+export { ThemeContext, withTheme, createTheming, ThemeProvider };

dist/theming.js

@@ -1124,2 +1124,17 @@ (function (global, factory) {
 
+	function _objectWithoutPropertiesLoose(source, excluded) {
+	  if (source == null) return {};
+	  var target = {};
+	  var sourceKeys = Object.keys(source);
+	  var key, i;
+
+	  for (i = 0; i < sourceKeys.length; i++) {
+	    key = sourceKeys[i];
+	    if (excluded.indexOf(key) >= 0) continue;
+	    target[key] = source[key];
+	  }
+
+	  return target;
+	}
+
 	/**
@@ -1513,12 +1528,17 @@ * Copyright (c) 2014-present, Facebook, Inc.
 	function createWithTheme(context) {
-	  function hoc(Component, propName) {
-	    if (propName === void 0) {
-	      propName = 'theme';
-	    }
+	  return function hoc(Component, _temp) {
+	    var _ref = _temp === void 0 ? {} : _temp,
+	        _ref$forwardInnerRef = _ref.forwardInnerRef,
+	        forwardInnerRef = _ref$forwardInnerRef === void 0 ? false : _ref$forwardInnerRef;
 
 	    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) {
-	        var _ref;
-
-	        return React.createElement(Component, _extends({}, (_ref = {}, _ref[propName] = theme, _ref), props));
+	        return React.createElement(Component, _extends({
+	          theme: theme
+	        }, otherProps));
 	      });
@@ -1530,8 +1550,6 @@ }
 	    return withTheme;
-	  }
-
-	  return hoc;
+	  };
 	}
 
-	var defaultContext = createReactContext({});
+	var ThemeContext = createReactContext({});
 
@@ -1545,6 +1563,7 @@ function createTheming(context) {
 
-	var _createTheming = createTheming(defaultContext),
+	var _createTheming = createTheming(ThemeContext),
 	    withTheme = _createTheming.withTheme,
 	    ThemeProvider = _createTheming.ThemeProvider;
 
+	exports.ThemeContext = ThemeContext;
 	exports.withTheme = withTheme;
@@ -1551,0 +1570,0 @@ exports.createTheming = createTheming;

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__",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"),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.async_mode"):60111,p=r?Symbol.for("react.forward_ref"):60112,l=r?Symbol.for("react.placeholder"):60113;function y(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}}}t.typeOf=y,t.AsyncMode=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&&("function"==typeof e.then||e.$$typeof===c||e.$$typeof===f||e.$$typeof===p)},t.isAsyncMode=function(e){return y(e)===s},t.isContextConsumer=function(e){return y(e)===f},t.isContextProvider=function(e){return y(e)===c},t.isElement=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===n},t.isForwardRef=function(e){return y(e)===p},t.isFragment=function(e){return y(e)===i},t.isProfiler=function(e){return y(e)===a},t.isPortal=function(e){return y(e)===o},t.isStrictMode=function(e){return y(e)===u}});t(_);_.typeOf,_.AsyncMode,_.ContextConsumer,_.ContextProvider,_.Element,_.ForwardRef,_.Fragment,_.Profiler,_.Portal,_.StrictMode,_.isValidElementType,_.isAsyncMode,_.isContextConsumer,_.isContextProvider,_.isElement,_.isForwardRef,_.isFragment,_.isProfiler,_.isPortal,_.isStrictMode;var j=r(function(e,t){});t(j);j.typeOf,j.AsyncMode,j.ContextConsumer,j.ContextProvider,j.Element,j.ForwardRef,j.Fragment,j.Profiler,j.Portal,j.StrictMode,j.isValidElementType,j.isAsyncMode,j.isContextConsumer,j.isContextProvider,j.isElement,j.isForwardRef,j.isFragment,j.isProfiler,j.isPortal,j.isStrictMode;var w,x=r(function(e){e.exports=_});function T(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}var C={childContextTypes:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},S={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},E=T({},x.ForwardRef,(T(w={},"$$typeof",!0),T(w,"render",!0),w)),R=Object.defineProperty,M=Object.getOwnPropertyNames,$=Object.getOwnPropertySymbols,F=Object.getOwnPropertyDescriptor,A=Object.getPrototypeOf,k=Object.prototype;var N=function e(t,r,n){if("string"==typeof r)return t;if(k){var o=A(r);o&&o!==k&&e(t,o,n)}var i=M(r);$&&(i=i.concat($(r)));for(var u=E[t.$$typeof]||C,a=E[r.$$typeof]||C,c=0;c<i.length;++c){var f=i[c];if(!(S[f]||n&&n[f]||a&&a[f]||u&&u[f])){var s=F(r,f);try{R(t,f,s)}catch(e){}}}return t},q=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 U(e){return{withTheme:(t=e,function(n,o){function e(r){return y.createElement(t.Consumer,null,function(e){var t;return y.createElement(n,b({},((t={})[o]=e,t),r))})}return void 0===o&&(o="theme"),e.displayName="WithTheme("+q(n)+")",N(e,n),e}),ThemeProvider:O(e)};var t}var V=U(l({})),B=V.withTheme,D=V.ThemeProvider;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,l=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 l(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 p=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 l(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):p,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 l(u,i),u.prototype.componentWillReceiveProps=function(e){var t=e.observedBits;this.observedBits=null==t?p:t},u.prototype.componentDidMount=function(){this.context[n]&&this.context[n].on(this.onUpdate);var e=this.props.observedBits;this.observedBits=null==e?p: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(l);var p=t(r(function(e,t){t.__esModule=!0;var r=o(y),n=o(l);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.async_mode"):60111,l=r?Symbol.for("react.forward_ref"):60112,p=r?Symbol.for("react.placeholder"):60113;function y(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 l:case c:return e;default:return t}}case o:return t}}}t.typeOf=y,t.AsyncMode=s,t.ContextConsumer=f,t.ContextProvider=c,t.Element=n,t.ForwardRef=l,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===p||"object"==typeof e&&null!==e&&("function"==typeof e.then||e.$$typeof===c||e.$$typeof===f||e.$$typeof===l)},t.isAsyncMode=function(e){return y(e)===s},t.isContextConsumer=function(e){return y(e)===f},t.isContextProvider=function(e){return y(e)===c},t.isElement=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===n},t.isForwardRef=function(e){return y(e)===l},t.isFragment=function(e){return y(e)===i},t.isProfiler=function(e){return y(e)===a},t.isPortal=function(e){return y(e)===o},t.isStrictMode=function(e){return y(e)===u}});t(_);_.typeOf,_.AsyncMode,_.ContextConsumer,_.ContextProvider,_.Element,_.ForwardRef,_.Fragment,_.Profiler,_.Portal,_.StrictMode,_.isValidElementType,_.isAsyncMode,_.isContextConsumer,_.isContextProvider,_.isElement,_.isForwardRef,_.isFragment,_.isProfiler,_.isPortal,_.isStrictMode;var j=r(function(e,t){});t(j);j.typeOf,j.AsyncMode,j.ContextConsumer,j.ContextProvider,j.Element,j.ForwardRef,j.Fragment,j.Profiler,j.Portal,j.StrictMode,j.isValidElementType,j.isAsyncMode,j.isContextConsumer,j.isContextProvider,j.isElement,j.isForwardRef,j.isFragment,j.isProfiler,j.isPortal,j.isStrictMode;var w,x=r(function(e){e.exports=_});function T(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}var C={childContextTypes:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},S={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},R=T({},x.ForwardRef,(T(w={},"$$typeof",!0),T(w,"render",!0),w)),E=Object.defineProperty,M=Object.getOwnPropertyNames,$=Object.getOwnPropertySymbols,F=Object.getOwnPropertyDescriptor,A=Object.getPrototypeOf,k=Object.prototype;var N=function e(t,r,n){if("string"==typeof r)return t;if(k){var o=A(r);o&&o!==k&&e(t,o,n)}var i=M(r);$&&(i=i.concat($(r)));for(var u=R[t.$$typeof]||C,a=R[r.$$typeof]||C,c=0;c<i.length;++c){var f=i[c];if(!(S[f]||n&&n[f]||a&&a[f]||u&&u[f])){var s=F(r,f);try{E(t,f,s)}catch(e){}}}return t},q=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 U(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("+q(n)+")",N(r,n),r}}var V=p({});function B(e){return{withTheme:U(e),ThemeProvider:O(e)}}var D=B(V),I=D.withTheme,W=D.ThemeProvider;e.ThemeContext=V,e.withTheme=I,e.createTheming=B,e.ThemeProvider=W,Object.defineProperty(e,"__esModule",{value:!0})});

package.json

 {
   "name": "theming",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Unified CSSinJS theming solution for React",
@@ -72,3 +72,3 @@ "main": "dist/theming.cjs.js",
     "eslint": "^5.6.0",
-    "eslint-config-jss": "^4.0.0",
+    "eslint-config-jss": "^5.0.1",
     "flow-bin": "^0.81.0",
@@ -75,0 +75,0 @@ "nyc": "^13.0.1",

README.md

@@ -169,3 +169,3 @@ # Theming
 
-### withTheme(component)
+### withTheme(component, options)
 
@@ -218,9 +218,17 @@ React High-Order component, which maps context to theme prop.
 
-#### propName
+#### options
+ 
+Type: `Object`
 
-Type: `String`
-Default: `theme`
+The options currently only contains one property.
 
-The prop name of the theme.
+##### 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)
@@ -254,2 +262,11 @@
 
+## ThemeContext
+
+We export the default ThemeContext so you can use it with the new `static contextType` with classes or even the new React Hooks API.
+This is the context which also the exported `withTheme` and `ThemeProvider` use.
+
+```js
+import { ThemeContext } from 'theming';
+```
+
 ## Credits
@@ -256,0 +273,0 @@

src/create-with-theme.js

 // @flow
 
-import React, { type ComponentType } from 'react';
+import React, { type ComponentType, type ElementRef } from 'react';
 import { type Context } from 'create-react-context';
@@ -8,5 +8,24 @@ import hoist from 'hoist-non-react-statics';
 
-export default function createWithTheme(context: Context<{}>) {
-  function hoc<Props, Comp: ComponentType<Props>>(Component: Comp, propName: string = 'theme') {
-    function withTheme(props: Props) {
+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>) {
+  return function hoc<
+    InnerProps: InnerPropsType<Theme>,
+    InnerComponent: ComponentType<InnerProps>,
+    OuterProps: OuterPropsType<InnerProps, InnerComponent, Theme>,
+  >(
+    Component: InnerComponent,
+    { forwardInnerRef = false }: Options = {},
+  ): ComponentType<OuterProps> {
+    function withTheme(props: OuterProps) {
+      // $FlowFixMe
+      const { innerRef, ...otherProps } = props;
+
+      otherProps[forwardInnerRef ? 'innerRef' : 'ref'] = innerRef;
+
       return (
@@ -16,4 +35,4 @@ <context.Consumer>
             <Component
-              {...{ [propName]: theme }}
-              {...props}
+              theme={theme}
+              {...otherProps}
             />
@@ -30,5 +49,3 @@ )}
     return withTheme;
-  }
-
-  return hoc;
+  };
 }

src/create-with-theme.test.js

@@ -9,4 +9,17 @@ // @flow
 
-const Comp = () => null;
+// eslint-disable-next-line no-unused-vars
+const FunctionalComponent = (props: { theme: {} }) => null;
 
+class ClassComponent extends React.Component<{ theme: {} }> {
+  static displayName = 'foo';
+
+  static someSpecialStatic = 'bar';
+
+  inner = true;
+
+  render() {
+    return null;
+  }
+}
+
 test('createWithTheme\'s type', (t) => {
@@ -19,2 +32,3 @@ t.true(typeof createWithTheme === 'function', 'createWithTheme should be a function');
   const withTheme = createWithTheme(context);
+
   t.true(typeof withTheme === 'function', 'withTheme should be a function');
@@ -26,6 +40,6 @@ });
   const context = createReactContext(theme);
-  const WithTheme = createWithTheme(context)(Comp);
+  const WithTheme = createWithTheme(context)(FunctionalComponent);
   const { root } = TestRenderer.create(<WithTheme />);
 
-  t.true(root.findByType(Comp).props.theme === theme);
+  t.true(root.findByType(FunctionalComponent).props.theme === theme);
 });
@@ -37,3 +51,3 @@
   const context = createReactContext(theme);
-  const WithTheme = createWithTheme(context)(Comp);
+  const WithTheme = createWithTheme(context)(FunctionalComponent);
   const { root } = TestRenderer.create((
@@ -45,26 +59,42 @@ <context.Provider value={theme}>
 
-  t.true(root.findByType(Comp).props.theme === theme);
+  t.true(root.findByType(FunctionalComponent).props.theme === theme);
 });
 
-test('should pass the theme as the specified prop', (t) => {
-  const theme = { test: 'test' };
+test('should allow overriding the prop from the outer props', (t) => {
+  const theme = {};
+  const otherTheme = {};
   const context = createReactContext(theme);
-  const WithTheme = createWithTheme(context)(Comp, 'outerTheme');
+  const WithTheme = createWithTheme(context)(FunctionalComponent);
   const { root } = TestRenderer.create((
-    <WithTheme />
+    <WithTheme theme={otherTheme} />
   ));
 
-  t.true(root.findByType(Comp).props.outerTheme === theme);
+  t.true(root.findByType(FunctionalComponent).props.theme === otherTheme);
 });
 
-test('should allow overriding the prop from the outer props', (t) => {
-  const theme = {};
-  const otherTheme = {};
-  const context = createReactContext(theme);
-  const WithTheme = createWithTheme(context)(Comp);
+test('innerRef should set the ref prop on the wrapped component', (t) => {
+  const context = createReactContext({});
+  const withTheme = createWithTheme(context);
+  let refComp = null;
+  const innerRef = (comp) => {
+    refComp = comp;
+  };
+  const WithTheme = withTheme(ClassComponent);
+
+  TestRenderer.create((
+    <WithTheme innerRef={innerRef} />
+  ));
+
+  t.deepEqual(refComp !== null && refComp.inner, true);
+});
+
+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 theme={otherTheme} />
+    <WithTheme innerRef={innerRef} />
   ));
 
-  t.true(root.findByType(Comp).props.theme === otherTheme);
+  t.true(root.findByType(FunctionalComponent).props.innerRef === innerRef);
 });
@@ -75,10 +105,6 @@
   const withTheme = createWithTheme(context);
-  class ExampleComponent extends React.Component<{}> {
-    static displayName = 'foo';
+  const WithTheme = withTheme(ClassComponent);
 
-    static someSpecialStatic = 'bar';
-  }
-  const ComponentWithTheme = withTheme(ExampleComponent);
   t.deepEqual(
-    ComponentWithTheme.displayName,
+    WithTheme.displayName,
     'WithTheme(foo)',
@@ -89,6 +115,6 @@ 'withTheme(Comp) should not hoist react static properties',
     // $FlowFixMe: Need to find a better way to type the hoist-non-react-statics
-    ComponentWithTheme.someSpecialStatic,
-    ExampleComponent.someSpecialStatic,
+    WithTheme.someSpecialStatic,
+    ClassComponent.someSpecialStatic,
     'withTheme(Comp) should hoist non-react static properties',
   );
 });

src/index.d.ts

 import * as React from 'react';
 import { Context } from 'create-react-context';
 
-type DefaultTheme = {};
+type DefaultTheme = object;
 
 type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;
 
-type WithThemeFactory<Theme> = <Props extends { theme: Theme }>(
-    comp: React.ComponentType<Props>,
-    name: string,
-) => React.ComponentType<Omit<Props, { theme: Theme }>>;
+type WithThemeFactory<Theme> = <
+    InnerProps extends { theme: 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>;
 
@@ -27,9 +34,10 @@ type ThemeProviderFactory<Theme> = React.ComponentType<{
 declare const ThemeProvider: WithThemeFactory<DefaultTheme>;
+declare const ThemeContext: Context<{}>;
 
 export {
+    ThemeContext,
     createTheming,
     withTheme,
     ThemeProvider,
-    ThemeProviderFactory,
-    WithThemeFactory,
+    Theming,
 }

src/index.js

@@ -8,5 +8,12 @@ // @flow
 
-const defaultContext = createReactContext({});
+type ExtractReturnType = <ReturnType>((context: Context<{}>) => ReturnType) => ReturnType;
 
-function createTheming(context: Context<{}>) {
+interface Theming {
+  withTheme: $Call<ExtractReturnType, typeof createWithTheme>,
+  ThemeProvider: $Call<ExtractReturnType, typeof createThemeProvider>,
+}
+
+const ThemeContext = createReactContext({});
+
+function createTheming(context: Context<{}>): Theming {
   return {
@@ -21,5 +28,8 @@ withTheme: createWithTheme(context),
   ThemeProvider,
-} = createTheming(defaultContext);
+} = createTheming(ThemeContext);
 
+export type { Theming };
+
 export {
+  ThemeContext,
   withTheme,
@@ -26,0 +36,0 @@ createTheming,

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

195160

increased by3.3%

Lines of code

1969

increased by5.29%

Number of lines in readme file

306

increased by5.88%

No dependency changes