react-change-highlight - npm Package Compare versions

Comparing version 1.2.3-0 to 1.2.3-1

build/ChangeHighlight.d.ts

 import React from "react";
 interface Props {
-    children: React.ReactChildren;
+    children: React.ReactChildren | Element;
     containerClassName?: string;
@@ -5,0 +5,0 @@ showAfter?: number;

build/index.js

@@ -32,5 +32,4 @@ 'use strict';
 var createShadowDOM = function (currentChild, setShadowItemFn) {
+    var _a;
     var children = currentChild.props.children;
-    if (!children)
-        setNewChild();
     if (Array.isArray(children)) {
@@ -48,3 +47,3 @@ React__default.Children.forEach(children, function (child) {
     }
-    else if (children.toString().trim().length) {
+    else if ((_a = children) === null || _a === void 0 ? void 0 : _a.toString().trim().length) {
         setNewChild();
@@ -51,0 +50,0 @@ }

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,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]})}e||a(),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;
+"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,a=t.props.children;function n(){r(function(e){return e?__spreadArrays(e,[t]):[t]})}Array.isArray(a)?React__default.Children.forEach(a,function(e){"object"==typeof e?createShadowDOM(e,r):e.toString().trim().length&&n()}):"object"==typeof a?createShadowDOM(a,r):(null===(e=a)||void 0===e?void 0:e.toString().trim().length)&&n()},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;

package.json

@@ -23,6 +23,6 @@ {
   },
-  "version": "1.2.3-0",
+  "version": "1.2.3-1",
   "peerDependencies": {
-    "react": ">= 16.8",
-    "react-dom": ">= 16.8"
+    "react": ">=16.8",
+    "react-dom": ">=16.8"
   },
@@ -29,0 +29,0 @@ "scripts": {

No alert changes

Improved metrics

Total package byte prevSize

20938

0.25%

Worsened metrics

Lines of code

197

-0.51%

No dependency changes