react-css-themr - npm Package Compare versions

Comparing version 1.7.2 to 2.0.0

index.d.ts

@@ -9,4 +9,2 @@ import * as React from "react";
 		composeTheme?: "deeply" | "softly" | false,
-		/** @default false */
-		withRef?: boolean
 	}
@@ -16,2 +14,3 @@
 	{
+    innerRef?: Function,
 		theme: {}
@@ -27,3 +26,3 @@ }
 	{
-		getWrappedInstance(): React.Component<P, S>;
+
 	}
@@ -30,0 +29,0 @@

lib/components/themr.js

@@ -36,3 +36,2 @@ 'use strict';
  * @property {String|Boolean} [composeTheme=COMPOSE_DEEPLY]
- * @property {Boolean} [withRef=false]
  */
@@ -45,4 +44,3 @@
 var DEFAULT_OPTIONS = {
-  composeTheme: COMPOSE_DEEPLY,
-  withRef: false
+  composeTheme: COMPOSE_DEEPLY
 };
@@ -66,4 +64,3 @@
     var _DEFAULT_OPTIONS$opti = _extends({}, DEFAULT_OPTIONS, options),
-        optionComposeTheme = _DEFAULT_OPTIONS$opti.composeTheme,
-        optionWithRef = _DEFAULT_OPTIONS$opti.withRef;
+        optionComposeTheme = _DEFAULT_OPTIONS$opti.composeTheme;
 
@@ -103,3 +100,3 @@ validateComposeOption(optionComposeTheme);
       Themed.prototype.getWrappedInstance = function getWrappedInstance() {
-        (0, _invariant2.default)(optionWithRef, 'To access the wrapped instance, you need to specify ' + '{ withRef: true } as the third argument of the themr() call.');
+        (0, _invariant2.default)(true, 'DEPRECATED: To access the wrapped instance, you have to pass ' + '{ innerRef: fn } and retrieve with a callback ref style.');
 
@@ -152,23 +149,14 @@ return this.refs.wrappedInstance;
       Themed.prototype.render = function render() {
-        var renderedElement = void 0;
         //exclude themr-only props
         //noinspection JSUnusedLocalSymbols
-
         var _props = this.props,
             composeTheme = _props.composeTheme,
+            innerRef = _props.innerRef,
             themeNamespace = _props.themeNamespace,
-            props = _objectWithoutProperties(_props, ['composeTheme', 'themeNamespace']); //eslint-disable-line no-unused-vars
+            props = _objectWithoutProperties(_props, ['composeTheme', 'innerRef', 'themeNamespace']); //eslint-disable-line no-unused-vars
 
-        if (optionWithRef) {
-          renderedElement = _react2.default.createElement(ThemedComponent, _extends({}, props, {
-            ref: 'wrappedInstance',
-            theme: this.theme_
-          }));
-        } else {
-          renderedElement = _react2.default.createElement(ThemedComponent, _extends({}, props, {
-            theme: this.theme_
-          }));
-        }
-
-        return renderedElement;
+        return _react2.default.createElement(ThemedComponent, _extends({}, props, {
+          ref: innerRef,
+          theme: this.theme_
+        }));
       };
@@ -181,2 +169,3 @@
       composeTheme: _react.PropTypes.oneOf([COMPOSE_DEEPLY, COMPOSE_SOFTLY, DONT_COMPOSE]),
+      innerRef: _react.PropTypes.func,
       theme: _react.PropTypes.object,
@@ -217,4 +206,4 @@ themeNamespace: _react.PropTypes.string
 
-    var originalValue = original[key] || '';
-    var mixinValue = mixin[key] || '';
+    var originalValue = typeof original[key] !== 'function' ? original[key] || '' : '';
+    var mixinValue = typeof mixin[key] !== 'function' ? mixin[key] || '' : '';
 
@@ -221,0 +210,0 @@ var newValue = void 0;

package.json

@@ -5,3 +5,3 @@ {
   "homepage": "https://github.com/javivelasco/react-css-themr#readme",
-  "version": "1.7.2",
+  "version": "2.0.0",
   "main": "./lib",
@@ -8,0 +8,0 @@ "author": {

README.md

@@ -161,3 +161,3 @@ [![npm version](https://img.shields.io/npm/v/react-css-themr.svg?style=flat-square)](https://www.npmjs.com/package/react-css-themr)
 
-The returned component accepts a `theme` and `composeTheme`  apart from the props of the original component. They are used to provide a `theme` to the component and to configure the style composition, which can be configured via options too. The function arguments are:
+The returned component accepts a `theme`, `composeTheme` and `innerRef` props apart from the props of the original component. They former two are used to provide a `theme` to the component and to configure the style composition, which can be configured via options too, while the latter is used to pass a ref callback to the decorated component. The function arguments are:
 
@@ -168,3 +168,2 @@ - `Identifier` *(String)* used to provide a unique identifier to the component that will be used to get a theme from context.
   - [`composeTheme = 'deeply'`] *(String)* allows to customize the way themes are merged or to disable merging completely. The accepted values are `deeply` to deeply merge themes, `softly` to softly merge themes and `false` to disable theme merging.
-  - [`withRef = false`] *(Boolean)* if true, stores a ref to the wrapped component instance and makes it available via `getWrappedInstance()` method. Defaults to false.
 
@@ -171,0 +170,0 @@ ## About

src/components/themr.js

@@ -11,3 +11,2 @@ import React, { Component, PropTypes } from 'react'
  * @property {String|Boolean} [composeTheme=COMPOSE_DEEPLY]
- * @property {Boolean} [withRef=false]
  */
@@ -20,4 +19,3 @@
 const DEFAULT_OPTIONS = {
-  composeTheme: COMPOSE_DEEPLY,
-  withRef: false
+  composeTheme: COMPOSE_DEEPLY
 }
@@ -37,3 +35,3 @@
 export default (componentName, localTheme, options = {}) => (ThemedComponent) => {
-  const { composeTheme: optionComposeTheme, withRef: optionWithRef } = { ...DEFAULT_OPTIONS, ...options }
+  const { composeTheme: optionComposeTheme } = { ...DEFAULT_OPTIONS, ...options }
   validateComposeOption(optionComposeTheme)
@@ -65,2 +63,3 @@
       composeTheme: PropTypes.oneOf([ COMPOSE_DEEPLY, COMPOSE_SOFTLY, DONT_COMPOSE ]),
+      innerRef: PropTypes.func,
       theme: PropTypes.object,
@@ -81,5 +80,5 @@ themeNamespace: PropTypes.string
     getWrappedInstance() {
-      invariant(optionWithRef,
-        'To access the wrapped instance, you need to specify ' +
-        '{ withRef: true } as the third argument of the themr() call.'
+      invariant(true,
+        'DEPRECATED: To access the wrapped instance, you have to pass ' +
+        '{ innerRef: fn } and retrieve with a callback ref style.'
       )
@@ -144,21 +143,11 @@
     render() {
-      let renderedElement
       //exclude themr-only props
       //noinspection JSUnusedLocalSymbols
-      const { composeTheme, themeNamespace, ...props } = this.props //eslint-disable-line no-unused-vars
+      const { composeTheme, innerRef, themeNamespace, ...props } = this.props //eslint-disable-line no-unused-vars
 
-      if (optionWithRef) {
-        renderedElement = React.createElement(ThemedComponent, {
-          ...props,
-          ref: 'wrappedInstance',
-          theme: this.theme_
-        })
-      } else {
-        renderedElement = React.createElement(ThemedComponent, {
-          ...props,
-          theme: this.theme_
-        })
-      }
-
-      return renderedElement
+      return React.createElement(ThemedComponent, {
+        ...props,
+        ref: innerRef,
+        theme: this.theme_
+      })
     }
@@ -187,5 +176,10 @@ }
     (result, key) => {
-      const originalValue = original[key] || ''
-      const mixinValue = mixin[key] || ''
 
+      const originalValue = typeof original[key] !== 'function'
+        ? (original[key] || '')
+        : ''
+      const mixinValue = typeof mixin[key] !== 'function'
+        ? (mixin[key] || '')
+        : ''
+
       let newValue
@@ -192,0 +186,0 @@

No alert changes

Worsened metrics

Total package byte prevSize

32843

decreased by-1.66%

Lines of code

507

decreased by-3.24%

Number of lines in readme file

177

decreased by-0.56%

No dependency changes