react-change-highlight - npm Package Compare versions

Comparing version 1.1.3-2 to 1.1.3

build/index.d.ts

@@ -1,2 +0,2 @@
-import { ChangeHighlight } from './components/ChangeHighlight';
+import ChangeHighlight from "./ChangeHighlight";
 export default ChangeHighlight;

build/index.js

@@ -31,93 +31,70 @@ 'use strict';
 
-var highlightClassName = 'react-highlight';
-var styles = "\n  ." + highlightClassName + " {\n    background-color: #f8ffb4;\n    transition: all 0.5s ease-in-out;\n  }\n";
-var styleSheet = document.createElement('style');
-styleSheet.type = 'text/css';
-styleSheet.innerText = styles;
-document.head.appendChild(styleSheet);
+var createShadowDOM = function (currentChild, pushShadowItem) {
+    var children = currentChild.props.children;
+    if (Array.isArray(children)) {
+        React__default.Children.forEach(children, function (child) {
+            if (typeof child === "object")
+                createShadowDOM(child, pushShadowItem);
+            else if (child.toString().trim().length) {
+                setNewChild();
+            }
+        });
+    }
+    else if (typeof children === "object") {
+        createShadowDOM(children, pushShadowItem);
+    }
+    else if (children.toString().trim().length) {
+        setNewChild();
+    }
+    function setNewChild() {
+        pushShadowItem(function (child) {
+            if (child)
+                return __spreadArrays(child, [currentChild]);
+            return [currentChild];
+        });
+    }
+};
 
-var ChangeHighlight = function (_a) {
-    var children = _a.children, _b = _a.showAfter, showAfter = _b === void 0 ? 500 : _b, _c = _a.hideAfter, hideAfter = _c === void 0 ? 2500 : _c, _d = _a.containerClassName, containerClassName = _d === void 0 ? '' : _d, _e = _a.highlightStyle, highlightStyle = _e === void 0 ? highlightClassName : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f;
-    var _g = React.useState(), oldChildren = _g[0], setOldChildren = _g[1];
-    var _h = React.useState([]), listOfHighlightedElements = _h[0], setListOfHighlightedElements = _h[1];
-    var isInitialMount = React.useRef(true);
-    var showHighlight = function (element, showAfter, hideAfter) {
-        var classNames = element.ref.current.className;
-        var isHighlighted = element.ref.current.className.includes(highlightStyle);
-        if (!isHighlighted) {
-            setTimeout(function () {
-                element.ref.current.className += ' ' + highlightStyle;
-            }, showAfter);
-        }
-        else {
-            element.ref.current.className =
-                classNames.indexOf(highlightStyle) &&
-                    classNames.substr(0, classNames.indexOf(highlightStyle)).trim();
-            showHighlight(element, showAfter);
-        }
-    };
-    var hideHighlight = function (element, hideAfter, oneElement) {
+var setHighlight = function (ref, isInitial, hideAfter) {
+    if (!isInitial && ref.current) {
+        var element_1 = ref.current.style;
+        element_1.background = "#f8ffb4";
         setTimeout(function () {
-            var classNames = element.ref.current.className;
-            if (classNames.indexOf(highlightStyle) > -1) {
-                element.ref.current.className = classNames
-                    .substr(0, classNames.indexOf(highlightStyle))
-                    .trim();
-            }
-            oneElement.highlighted = true;
+            element_1.background = "#fff";
         }, hideAfter);
-    };
-    var checkChangedChildren = function (children, oldChildren) {
-        React__default.Children.forEach(oldChildren, function (oldChild, index1) {
-            React__default.Children.forEach(children, function (newChild, index2) {
-                if (index1 === index2) {
-                    if (oldChild.ref &&
-                        newChild.props.children !== oldChild.props.children) {
-                        if (newChild.props.children) {
-                            setListOfHighlightedElements(__spreadArrays(listOfHighlightedElements, [
-                                { element: newChild, hideAfter: hideAfter }
-                            ]));
-                            showHighlight(newChild, showAfter);
-                        }
-                        setOldChildren(children);
-                    }
-                }
-            });
-        });
-    };
+    }
+};
+
+var ShadowChild = function (props) {
+    var initialMount = React.useRef(true);
+    var child = props.child, _a = props.hideAfter, hideAfter = _a === void 0 ? 2000 : _a;
+    var childrenToWatch = Array.isArray(child.props.children)
+        ? child.props.children.find(function (c) { return c.toString().trim().length; })
+        : child.props.children;
     React.useEffect(function () {
-        if (disabled)
+        if (initialMount.current) {
+            initialMount.current = false;
             return;
+        }
+        setHighlight(child.ref, initialMount.current, hideAfter);
+    }, [childrenToWatch]);
+    return React__default.createElement(React__default.Fragment, null);
+};
+
+var ChangeHighlight = function (_a) {
+    var children = _a.children, hideAfter = _a.hideAfter;
+    var _b = React.useState([]), shadowDOM = _b[0], setShadowDOM = _b[1];
+    var isInitialMount = React.useRef(true);
+    React.useEffect(function () {
         if (isInitialMount.current) {
             isInitialMount.current = false;
-            setOldChildren(children);
         }
-        else {
-            checkChangedChildren(children, oldChildren);
-        }
-    });
-    var pickNotHighlightedElement = function (allChanged, idx) {
-        if (idx === void 0) { idx = 0; }
-        var oneElement;
-        if (idx < allChanged.length) {
-            oneElement = listOfHighlightedElements[idx];
-            if (oneElement.highlighted) {
-                pickNotHighlightedElement(allChanged, idx++);
-            }
-        }
-        return oneElement;
-    };
-    React.useEffect(function () {
-        var length = listOfHighlightedElements.length;
-        if (length) {
-            var oneElement = pickNotHighlightedElement(listOfHighlightedElements);
-            if (oneElement) {
-                var element = oneElement.element, hideAfter_1 = oneElement.hideAfter;
-                hideHighlight(element, hideAfter_1, oneElement);
-            }
-        }
-    }, [listOfHighlightedElements]);
-    return React__default.createElement("div", { className: containerClassName }, children);
+        setShadowDOM([]);
+        createShadowDOM({ props: { children: children } }, setShadowDOM);
+    }, [children]);
+    return (React__default.createElement(React__default.Fragment, null,
+        shadowDOM.map(function (child, index) { return (React__default.createElement(ShadowChild, { key: index, child: child, hideAfter: hideAfter })); }),
+        children));
 };
 
 module.exports = ChangeHighlight;

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 n=Array(e),a=0;for(t=0;t<r;t++)for(var i=arguments[t],c=0,s=i.length;c<s;c++,a++)n[a]=i[c];return n}var highlightClassName="react-highlight",styles="\n  ."+highlightClassName+" {\n    background-color: #f8ffb4;\n    transition: all 0.5s ease-in-out;\n  }\n",styleSheet=document.createElement("style");styleSheet.type="text/css",styleSheet.innerText=styles,document.head.appendChild(styleSheet);var ChangeHighlight=function(e){var t=e.children,r=e.showAfter,i=void 0===r?500:r,n=e.hideAfter,c=void 0===n?2500:n,a=e.containerClassName,s=void 0===a?"":a,l=e.highlightStyle,f=void 0===l?highlightClassName:l,h=e.disabled,u=void 0!==h&&h,o=React.useState(),d=o[0],g=o[1],m=React.useState([]),v=m[0],p=m[1],_=React.useRef(!0),y=function(e,t,r){var n=e.ref.current.className;e.ref.current.className.includes(f)?(e.ref.current.className=n.indexOf(f)&&n.substr(0,n.indexOf(f)).trim(),y(e,t)):setTimeout(function(){e.ref.current.className+=" "+f},t)};React.useEffect(function(){u||(_.current?(_.current=!1,g(t)):function(a,e){React__default.Children.forEach(e,function(r,n){React__default.Children.forEach(a,function(e,t){n===t&&r.ref&&e.props.children!==r.props.children&&(e.props.children&&(p(__spreadArrays(v,[{element:e,hideAfter:c}])),y(e,i)),g(a))})})}(t,d))});var R=function(e,t){var r;return void 0===t&&(t=0),t<e.length&&(r=v[t]).highlighted&&R(e,t++),r};return React.useEffect(function(){if(v.length){var e=R(v);if(e)!function(t,e,r){setTimeout(function(){var e=t.ref.current.className;-1<e.indexOf(f)&&(t.ref.current.className=e.substr(0,e.indexOf(f)).trim()),r.highlighted=!0},e)}(e.element,e.hideAfter,e)}},[v]),React__default.createElement("div",{className:s},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 n=Array(e),a=0;for(t=0;t<r;t++)for(var c=arguments[t],i=0,u=c.length;i<u;i++,a++)n[a]=c[i];return n}var createShadowDOM=function(t,r){var e=t.props.children;function n(){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&&n()}):"object"==typeof e?createShadowDOM(e,r):e.toString().trim().length&&n()},setHighlight=function(e,t,r){if(!t&&e.current){var n=e.current.style;n.background="#f8ffb4",setTimeout(function(){n.background="#fff"},r)}},ShadowChild=function(e){var t=React.useRef(!0),r=e.child,n=e.hideAfter,a=void 0===n?2e3:n,c=Array.isArray(r.props.children)?r.props.children.find(function(e){return e.toString().trim().length}):r.props.children;return React.useEffect(function(){t.current?t.current=!1:setHighlight(r.ref,t.current,a)},[c]),React__default.createElement(React__default.Fragment,null)},ChangeHighlight=function(e){var t=e.children,r=e.hideAfter,n=React.useState([]),a=n[0],c=n[1],i=React.useRef(!0);return React.useEffect(function(){i.current&&(i.current=!1),c([]),createShadowDOM({props:{children:t}},c)},[t]),React__default.createElement(React__default.Fragment,null,a.map(function(e,t){return React__default.createElement(ShadowChild,{key:t,child:e,hideAfter:r})}),t)};module.exports=ChangeHighlight;

package.json

@@ -19,3 +19,3 @@ {
   ],
-  "version": "1.1.3-2",
+  "version": "1.1.3",
   "peerDependencies": {
@@ -37,2 +37,4 @@ "react": "^16.8",
     "@babel/preset-react": "^7.0.0",
+    "@types/react": "^16.9.11",
+    "@types/react-dom": "^16.9.3",
     "babel-loader": "^8.0.6",
@@ -53,7 +55,5 @@ "babel-plugin-module-resolver": "^3.2.0",
     "rollup-plugin-uglify": "^6.0.3",
-    "typescript": "^3.6.4",
-    "webpack": "^4.41.0",
-    "webpack-cli": "^3.3.9"
+    "typescript": "^3.6.4"
   },
   "license": "MIT"
 }

Fixed 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

Number of package files

9

28.57%

Number of low quality alerts

2

-33.33%

Worsened metrics

Total package byte prevSize

9885

-15.38%

Lines of code

115

-16.06%

No dependency changes