react-change-highlight - npm Package Compare versions

Comparing version 1.2.1 to 1.2.2

build/index.js

@@ -65,4 +65,7 @@ 'use strict';
 var setHighlight = function (child, id, isInitial, showAfter, hideAfter, highlightStyle, clearHighlightRef, setClearHighlightFn, updateClearHandler, uniqueId) {
+    var _a;
+    if (!child.ref)
+        return;
     var element = child.ref.current;
-    if (!isInitial && element && parseInt(element.getAttribute(defaults.HIGHLIGHT_UNIQUE_ID)) === uniqueId) {
+    if (!isInitial && ((_a = element) === null || _a === void 0 ? void 0 : _a.getAttribute(defaults.HIGHLIGHT_UNIQUE_ID)) === uniqueId) {
         if (clearHighlightRef) {
@@ -89,6 +92,9 @@ clearTimeout(clearHighlightRef);
         : child.props.children;
-    var elementDOM = child.ref.current;
-    elementDOM.setAttribute(defaults.HIGHLIGHT_UNIQUE_ID, uniqueId);
+    if (child.ref) {
+        var elementDOM = child.ref.current;
+        elementDOM.setAttribute(defaults.HIGHLIGHT_UNIQUE_ID, uniqueId);
+    }
     React.useEffect(function () {
-        if (initialMount.current) {
+        var _a;
+        if ((_a = initialMount) === null || _a === void 0 ? void 0 : _a.current) {
             initialMount.current = false;
@@ -114,2 +120,10 @@ return;
 
+var getUUID = function () {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+        var randomNum = Math.random() * 16 | 0;
+        var finalChar = c === 'x' ? randomNum : (randomNum & 0x3 | 0x8);
+        return finalChar.toString(16);
+    });
+};
+
 var listOfClearHighlightFunctions = [];
@@ -123,7 +137,7 @@ var updateClearHandler = function (childId, Fn) {
     var isInitialMount = React.useRef(true);
-    var _h = React.useState(0), uniqueId = _h[0], setUniqueId = _h[1];
+    var _h = React.useState(""), uniqueId = _h[0], setUniqueId = _h[1];
     React.useEffect(function () {
         if (!disabled) {
             if (isInitialMount.current) {
-                setUniqueId(Math.floor(Math.random() * 100000) + 1);
+                setUniqueId(getUUID());
                 if (!!highlightStyle) {
@@ -130,0 +144,0 @@ addStyleString("\n          ." + defaults.HIGHLIGHT_CLASS + " {\n            background: #f8ffb4 !important;\n            transition: 0.25s ease-in-out;\n          }\n        ", ssr);

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",HIGHLIGHT_UNIQUE_ID:"rc-highlight-id"},setHighlight=function(e,t,r,a,n,i,l,c,u,o){var d=e.ref.current;if(!r&&d&&parseInt(d.getAttribute(defaults.HIGHLIGHT_UNIQUE_ID))===o){l&&clearTimeout(l),setTimeout(function(){d.className+=" "+i},a);var s=setTimeout(function(){d.className=d.className.substr(0,d.className.indexOf(i)-1)},a+n);c(s),u(t,s)}},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,u=e.uniqueId,o=React.useRef(!0),d=React.useState(l),s=d[0],h=d[1],f=Array.isArray(t.props.children)?t.props.children.find(function(e){return e.toString().trim().length}):t.props.children;return t.ref.current.setAttribute(defaults.HIGHLIGHT_UNIQUE_ID,u),React.useEffect(function(){o.current?o.current=!1:setHighlight(t,r,o.current,a,n,i,s,h,c,u)},[f]),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,u=void 0===c?defaults.HIGHLIGHT_CLASS:c,o=e.disabled,d=void 0!==o&&o,s=e.ssr,h=void 0!==s&&s,f=React.useState([]),g=f[0],H=f[1],_=React.useRef(!0),I=React.useState(0),p=I[0],S=I[1];return React.useEffect(function(){d||(_.current&&(S(Math.floor(1e5*Math.random())+1),u&&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:u,clearHandler:listOfClearHighlightFunctions[t],updateClearHandler:updateClearHandler,uniqueId:p})}),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,u=i.length;l<u;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",HIGHLIGHT_UNIQUE_ID:"rc-highlight-id"},setHighlight=function(e,t,r,a,n,i,l,u,c,o){var d;if(e.ref){var s=e.ref.current;if(!r&&(null===(d=s)||void 0===d?void 0:d.getAttribute(defaults.HIGHLIGHT_UNIQUE_ID))===o){l&&clearTimeout(l),setTimeout(function(){s.className+=" "+i},a);var h=setTimeout(function(){s.className=s.className.substr(0,s.className.indexOf(i)-1)},a+n);u(h),c(t,h)}}},ShadowChild=function(e){var t=e.child,r=e.id,a=e.showAfter,n=e.hideAfter,i=e.highlightStyle,l=e.clearHandler,u=e.updateClearHandler,c=e.uniqueId,o=React.useRef(!0),d=React.useState(l),s=d[0],h=d[1],f=Array.isArray(t.props.children)?t.props.children.find(function(e){return e.toString().trim().length}):t.props.children;t.ref&&t.ref.current.setAttribute(defaults.HIGHLIGHT_UNIQUE_ID,c);return React.useEffect(function(){var e;null!==(e=o)&&void 0!==e&&e.current?o.current=!1:setHighlight(t,r,o.current,a,n,i,s,h,u,c)},[f]),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.')},getUUID=function(){return"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,function(e){var t=16*Math.random()|0;return("x"===e?t:3&t|8).toString(16)})},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,u=e.highlightStyle,c=void 0===u?defaults.HIGHLIGHT_CLASS:u,o=e.disabled,d=void 0!==o&&o,s=e.ssr,h=void 0!==s&&s,f=React.useState([]),g=f[0],H=f[1],_=React.useRef(!0),x=React.useState(""),I=x[0],p=x[1];return React.useEffect(function(){d||(_.current&&(p(getUUID()),c&&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:c,clearHandler:listOfClearHighlightFunctions[t],updateClearHandler:updateClearHandler,uniqueId:I})}),t)};module.exports=ChangeHighlight;

build/ShadowChild.d.ts

@@ -10,5 +10,5 @@ import React from "react";
     updateClearHandler: Function;
-    uniqueId: number;
+    uniqueId: string;
 };
 declare const ShadowChild: React.FC<Props>;
 export default ShadowChild;

build/Util/setHighlight.d.ts

@@ -1,2 +0,2 @@
-declare const setHighlight: (child: any, id: number, isInitial: boolean, showAfter: number, hideAfter: number, highlightStyle: string, clearHighlightRef: number, setClearHighlightFn: Function, updateClearHandler: Function, uniqueId: number) => void;
+declare const setHighlight: (child: any, id: number, isInitial: boolean, showAfter: number, hideAfter: number, highlightStyle: string, clearHighlightRef: number, setClearHighlightFn: Function, updateClearHandler: Function, uniqueId: string) => void;
 export default setHighlight;

CHANGELOG.md

 ## CHANGE LOG
 
+### v1.2.2 (20 Nov 2019)
+- Fix issue with elements with no ref.
+
 ### v1.2.1 (13 Nov 2019)
@@ -4,0 +7,0 @@ - Small patch to fix problem of 2 nested `ChangeHighlight` elements inside each other.

package.json

@@ -23,6 +23,6 @@ {
   },
-  "version": "1.2.1",
+  "version": "1.2.2",
   "peerDependencies": {
-    "react": "^16.8",
-    "react-dom": "^16.8"
+    "react": ">= 16.8",
+    "react-dom": ">= 16.8"
   },
@@ -58,5 +58,5 @@ "scripts": {
     "rollup-plugin-uglify": "^6.0.3",
-    "typescript": "^3.6.4"
+    "typescript": "^3.7.2"
   },
   "license": "MIT"
 }

README.md

 # react-change-highlight
 
-[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors)
+[![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg)](#contributors)
+[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/medhatdawoud/react-change-highlight/blob/master/LICENSE) 
+[![npm version](https://img.shields.io/npm/v/react-change-highlight.svg?style=flat)](https://www.npmjs.com/package/react-change-highlight)
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/medhatdawoud/react-change-highlight/blob/master/CONTRIBUTING.md)
 
@@ -84,2 +87,3 @@ > React Change Highlight is a react component to highlight changes in the wrapped component to enhance the UX and grap the focus of the user into the changed value of some parts like the cart in an e-commerce application for example.
     <td align="center"><a href="https://github.com/EslamHiko"><img src="https://avatars1.githubusercontent.com/u/18349358?v=4" width="100px;" alt="Islam ElHakmi"/><br /><sub><b>Islam ElHakmi</b></sub></a><br /><a href="https://github.com/medhatdawoud/react-change-highlight/commits?author=EslamHiko" title="Code">💻</a></td>
+    <td align="center"><a href="https://www.linkedin.com/in/mohamedabugalala/"><img src="https://avatars2.githubusercontent.com/u/14947957?v=4" width="100px;" alt="Mohamed Gamal"/><br /><sub><b>Mohamed Gamal</b></sub></a><br /><a href="https://github.com/medhatdawoud/react-change-highlight/issues?q=author%3AmohamedGamalAbuGalala" title="Bug reports">🐛</a> <a href="https://github.com/medhatdawoud/react-change-highlight/commits?author=mohamedGamalAbuGalala" title="Code">💻</a></td>
   </tr>
@@ -86,0 +90,0 @@ </table>

No alert changes

Improved metrics

Total package byte prevSize

20832

8.9%

Number of package files

14

7.69%

Lines of code

196

8.89%

Number of lines in readme file

94

4.44%

No dependency changes