react-change-highlight
Version:
React component to highlight the changed content immediately and bring focus of the user into the changed part
2 lines (1 loc) • 3.48 kB
JavaScript
;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],l=0,u=i.length;l<u;l++,a++)n[a]=i[l];return n}var createShadowDOM=function(t,r){if(t){var e=t.props.children;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):null!==e&&void 0!==e&&e.toString().trim().length&&n()}function n(){r(function(e){return e?__spreadArrays(e,[t]):[t]})}},defaults={TIME_TO_HIGHLIGHT:0,TIME_TO_STOP_HIGHLIGHT:2e3,HIGHLIGHT_CLASS:"rc-highlight",HIGHLIGHT_UNIQUE_ID:"rc-highlight-id"},setHighlight=function(e,t,r,n,a,i,l,u,c,d,o){if(e.ref){var s=e.ref.current;if((r?n:!n)&&(null===s||void 0===s?void 0:s.getAttribute(defaults.HIGHLIGHT_UNIQUE_ID))===o){u&&clearTimeout(u),setTimeout(function(){s.className+=" "+l},a);var h=setTimeout(function(){s.className=s.className.substr(0,s.className.indexOf(l)-1)},a+i);c(h),d(t,h)}}},ShadowChild=function(e){var t=e.child,r=e.id,n=e.showAfter,a=e.hideAfter,i=e.highlightClassName,l=e.clearHandler,u=e.newlyAddedOnly,c=e.updateClearHandler,d=e.uniqueId,o=React.useRef(!0),s=React.useState(l),h=s[0],f=s[1],g=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,d);return React.useEffect(function(){!u&&null!==o&&void 0!==o&&o.current||setHighlight(t,r,u,o.current,n,a,i,h,f,c,d),o.current=!1},[g]),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,n=e.showAfter,a=void 0===n?defaults.TIME_TO_HIGHLIGHT:n,i=e.hideAfter,l=void 0===i?defaults.TIME_TO_STOP_HIGHLIGHT:i,u=e.highlightClassName,c=void 0===u?defaults.HIGHLIGHT_CLASS:u,d=e.mode,o=void 0===d?"change":d,s=e.disabled,h=void 0!==s&&s,f=e.ssr,g=void 0!==f&&f,H=React.useState([]),_=H[0],x=H[1],I=React.useRef(!0),m=React.useState(""),p=m[0],S=m[1];return React.useEffect(function(){h||(I.current&&(S(getUUID()),c&&addStyleString("\n ."+defaults.HIGHLIGHT_CLASS+" {\n background: #f8ffb4 !important;\n transition: 0.25s ease-in-out;\n }\n ",g),I.current=!1),x([]),createShadowDOM({props:{children:t}},x))},[t,h,g,c]),React__default.createElement("div",{className:r},_.map(function(e,t){return React__default.createElement(ShadowChild,{key:t,id:t,child:e,newlyAddedOnly:"newOnly"===o,showAfter:a,hideAfter:l,highlightClassName:c,clearHandler:listOfClearHighlightFunctions[t],updateClearHandler:updateClearHandler,uniqueId:p})}),t)};module.exports=ChangeHighlight;