react-change-highlight - npm Package Compare versions

Comparing version 1.2.0 to 1.2.1-0

build/index.js

@@ -101,3 +101,3 @@ 'use strict';
     if (!document || isSSR) {
-        console.warn("\"react-change-highlight\", As you're using server-side rendering, it's a must to create and \n      pass your css class to the highlightStyle attribute for \"HighlightChange\" component ");
+        console.warn("\"react-change-highlight\", As you're using server-side rendering, it's a must to create and pass your css class to the highlightStyle attribute for \"ChangeHighlight\" component.");
         return;
@@ -118,10 +118,10 @@ }
     var isInitialMount = React.useRef(true);
-    if (!!highlightStyle) {
-        addStyleString("\n      ." + defaults.HIGHLIGHT_CLASS + " {\n        background: #f8ffb4 !important;\n        transition: 0.25s ease-in-out;\n      }\n    ", ssr);
-    }
     React.useEffect(function () {
-        if (isInitialMount.current) {
-            isInitialMount.current = false;
-        }
         if (!disabled) {
+            if (isInitialMount.current) {
+                if (!!highlightStyle) {
+                    addStyleString("\n          ." + defaults.HIGHLIGHT_CLASS + " {\n            background: #f8ffb4 !important;\n            transition: 0.25s ease-in-out;\n          }\n        ", ssr);
+                }
+                isInitialMount.current = false;
+            }
             setShadowDOM([]);
@@ -128,0 +128,0 @@ createShadowDOM({ props: { children: children } }, setShadowDOM);

build/index.min.js

@@ -1,1 +0,1 @@
-"use strict";function _interopDefault(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var React=require("react"),React__default=_interopDefault(React);function __spreadArrays(){for(var e=0,t=0,r=arguments.length;t<r;t++)e+=arguments[t].length;var a=Array(e),n=0;for(t=0;t<r;t++)for(var i=arguments[t],l=0,c=i.length;l<c;l++,n++)a[n]=i[l];return a}var createShadowDOM=function(t,r){var e=t.props.children;function a(){r(function(e){return e?__spreadArrays(e,[t]):[t]})}Array.isArray(e)?React__default.Children.forEach(e,function(e){"object"==typeof e?createShadowDOM(e,r):e.toString().trim().length&&a()}):"object"==typeof e?createShadowDOM(e,r):e.toString().trim().length&&a()},defaults={TIME_TO_HIGHLIGHT:500,TIME_TO_STOP_HIGHLIGHT:2e3,HIGHLIGHT_CLASS:"rc-highlight"},setHighlight=function(e,t,r,a,n,i,l,c,o){if(!r&&e.ref.current){var u=e.ref.current;l&&clearTimeout(l),setTimeout(function(){u.className+=" "+i},a);var d=setTimeout(function(){u.className=u.className.substr(0,u.className.indexOf(i)-1)},a+n);c(d),o(t,d)}},ShadowChild=function(e){var t=e.child,r=e.id,a=e.showAfter,n=e.hideAfter,i=e.highlightStyle,l=e.clearHandler,c=e.updateClearHandler,o=React.useRef(!0),u=React.useState(l),d=u[0],s=u[1],h=Array.isArray(t.props.children)?t.props.children.find(function(e){return e.toString().trim().length}):t.props.children;return React.useEffect(function(){o.current?o.current=!1:setHighlight(t,r,o.current,a,n,i,d,s,c)},[h]),React__default.createElement(React__default.Fragment,null)},addStyleString=function(e,t){if(void 0===t&&(t=!1),document&&!t){var r=document.createElement("style");r.innerHTML=e,document.body.appendChild(r)}else console.warn('"react-change-highlight", As you\'re using server-side rendering, it\'s a must to create and \n      pass your css class to the highlightStyle attribute for "HighlightChange" component ')},listOfClearHighlightFunctions=[],updateClearHandler=function(e,t){listOfClearHighlightFunctions[e]=t},ChangeHighlight=function(e){var t=e.children,r=e.containerClassName,a=e.showAfter,n=void 0===a?defaults.TIME_TO_HIGHLIGHT:a,i=e.hideAfter,l=void 0===i?defaults.TIME_TO_STOP_HIGHLIGHT:i,c=e.highlightStyle,o=void 0===c?defaults.HIGHLIGHT_CLASS:c,u=e.disabled,d=void 0!==u&&u,s=e.ssr,h=void 0!==s&&s,f=React.useState([]),g=f[0],H=f[1],_=React.useRef(!0);return o&&addStyleString("\n      ."+defaults.HIGHLIGHT_CLASS+" {\n        background: #f8ffb4 !important;\n        transition: 0.25s ease-in-out;\n      }\n    ",h),React.useEffect(function(){_.current&&(_.current=!1),d||(H([]),createShadowDOM({props:{children:t}},H))},[t]),React__default.createElement("div",{className:r},g.map(function(e,t){return React__default.createElement(ShadowChild,{key:t,id:t,child:e,showAfter:n,hideAfter:l,highlightStyle:o,clearHandler:listOfClearHighlightFunctions[t],updateClearHandler:updateClearHandler})}),t)};module.exports=ChangeHighlight;
+"use strict";function _interopDefault(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var React=require("react"),React__default=_interopDefault(React);function __spreadArrays(){for(var e=0,t=0,r=arguments.length;t<r;t++)e+=arguments[t].length;var a=Array(e),n=0;for(t=0;t<r;t++)for(var i=arguments[t],l=0,c=i.length;l<c;l++,n++)a[n]=i[l];return a}var createShadowDOM=function(t,r){var e=t.props.children;function a(){r(function(e){return e?__spreadArrays(e,[t]):[t]})}Array.isArray(e)?React__default.Children.forEach(e,function(e){"object"==typeof e?createShadowDOM(e,r):e.toString().trim().length&&a()}):"object"==typeof e?createShadowDOM(e,r):e.toString().trim().length&&a()},defaults={TIME_TO_HIGHLIGHT:500,TIME_TO_STOP_HIGHLIGHT:2e3,HIGHLIGHT_CLASS:"rc-highlight"},setHighlight=function(e,t,r,a,n,i,l,c,o){if(!r&&e.ref.current){var u=e.ref.current;l&&clearTimeout(l),setTimeout(function(){u.className+=" "+i},a);var d=setTimeout(function(){u.className=u.className.substr(0,u.className.indexOf(i)-1)},a+n);c(d),o(t,d)}},ShadowChild=function(e){var t=e.child,r=e.id,a=e.showAfter,n=e.hideAfter,i=e.highlightStyle,l=e.clearHandler,c=e.updateClearHandler,o=React.useRef(!0),u=React.useState(l),d=u[0],s=u[1],h=Array.isArray(t.props.children)?t.props.children.find(function(e){return e.toString().trim().length}):t.props.children;return React.useEffect(function(){o.current?o.current=!1:setHighlight(t,r,o.current,a,n,i,d,s,c)},[h]),React__default.createElement(React__default.Fragment,null)},addStyleString=function(e,t){if(void 0===t&&(t=!1),document&&!t){var r=document.createElement("style");r.innerHTML=e,document.body.appendChild(r)}else console.warn('"react-change-highlight", As you\'re using server-side rendering, it\'s a must to create and pass your css class to the highlightStyle attribute for "ChangeHighlight" component.')},listOfClearHighlightFunctions=[],updateClearHandler=function(e,t){listOfClearHighlightFunctions[e]=t},ChangeHighlight=function(e){var t=e.children,r=e.containerClassName,a=e.showAfter,n=void 0===a?defaults.TIME_TO_HIGHLIGHT:a,i=e.hideAfter,l=void 0===i?defaults.TIME_TO_STOP_HIGHLIGHT:i,c=e.highlightStyle,o=void 0===c?defaults.HIGHLIGHT_CLASS:c,u=e.disabled,d=void 0!==u&&u,s=e.ssr,h=void 0!==s&&s,f=React.useState([]),g=f[0],H=f[1],_=React.useRef(!0);return React.useEffect(function(){d||(_.current&&(o&&addStyleString("\n          ."+defaults.HIGHLIGHT_CLASS+" {\n            background: #f8ffb4 !important;\n            transition: 0.25s ease-in-out;\n          }\n        ",h),_.current=!1),H([]),createShadowDOM({props:{children:t}},H))},[t]),React__default.createElement("div",{className:r},g.map(function(e,t){return React__default.createElement(ShadowChild,{key:t,id:t,child:e,showAfter:n,hideAfter:l,highlightStyle:o,clearHandler:listOfClearHighlightFunctions[t],updateClearHandler:updateClearHandler})}),t)};module.exports=ChangeHighlight;

package.json

@@ -23,3 +23,3 @@ {
   },
-  "version": "1.2.0",
+  "version": "1.2.1-0",
   "peerDependencies": {
@@ -26,0 +26,0 @@ "react": "^16.8",

README.md

@@ -26,5 +26,5 @@ # react-change-highlight
 
-Basically you need to wrap the components you want to highlight on change inside `HighlightChange` element then add `ref` attribute to each child in this component to be used to be highlighted.
+Basically you need to wrap the components you want to highlight on change inside `ChangeHighlight` element (default import) then add `ref` attribute to each child in this component which you want to highlight when they got their content changed.
 
-In the following example the `count` variable comes from state, so when ever that function `setCount()` is called with any different value the background of that wrapped div will be changed
+In the following example the `count` variable comes from state, so when ever that function `setCount()` is called with any different value the background of that wrapped div will be changed as a default action, but actually it can be any kind of animation you make into the class you will pass to `highlightStyle` attribute.
 
@@ -45,6 +45,6 @@ ```jsx
 
-Default styling for highlighting in case the user didn't use a custom styling using the `highlightStyle` property:
+Default styling for highlighting in case the user didn't use a custom styling using the `highlightStyle` property is `rc-highlight` class and it is as follow:
 
 ```css
-.react-highlight {
+.rc-highlight {
   background-color: #f8ffb4;
@@ -57,4 +57,8 @@ transition: all 0.5s ease-in-out;
 
-In case of using this module in a server-side rengering app, you should make sure to create and pass your own className to the `highlightStyle` attribute, and to make some hint for you, add `ssr` attribute to the `HighlightChange` element, so it can give you a hint to add a class in your console as a warning.
+In case of using this module in a server-side rengering app, you should make sure to create and pass your own className to the `highlightStyle` attribute, and to make some hint for you, add `ssr` attribute to the `ChangeHighlight` element, so it can give you a hint to add a class in your console as a warning like this.
 
+```text
+⚠️ "react-change-highlight", As you're using server-side rendering, it's a must to create and pass your css class to the highlightStyle attribute for "ChangeHighlight" component
+```
+
 ## Props
@@ -61,0 +65,0 @@

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

16769

3.12%

Number of lines in readme file

89

4.71%

Worsened metrics

Number of low quality alerts

3

50%

No dependency changes