nested-comments-react/dist/index.es.js

A simple react component for nested comments

import*as e from"react";import t,{useState as r,useEffect as n}from"react";function o(e,t){void 0===t&&(t={});var r=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===r&&n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}function l({onReply:e,cancel:n=(()=>{}),isRoot:o=!1}){const[l,i]=r(""),[d,a]=r(!1);return t.createElement("div",null,t.createElement("div",{style:{display:"grid",gridTemplateRows:"32px 32px",maxWidth:"30px"}},t.createElement("div",null,t.createElement("input",{placeholder:"reply...",onFocus:()=>a(!0),className:"reply-box-no-focus",type:"text",value:l,onChange:e=>i(e.target.value)})),(o&&d||!o)&&t.createElement("div",{style:{display:"flex",alignItems:"flex-end",justifyContent:"flex-end"}},t.createElement("div",null,0===l.length&&t.createElement("button",{style:{borderRadius:"5px",borderStyle:"none",padding:"8px",cursor:"pointer"},onClick:()=>{e(l),i("")},disabled:!0},"Reply"),0!==l.length&&t.createElement("button",{style:{borderRadius:"5px",borderStyle:"none",padding:"8px",backgroundColor:"blue",color:"white",cursor:"pointer"},onClick:()=>{e(l),i("")}},"Reply")),t.createElement("div",{style:{paddingLeft:"5px"}},t.createElement("button",{style:{borderRadius:"5px",borderStyle:"none",padding:"8px",cursor:"pointer"},onClick:()=>{i(""),a(!1),n()}},"Cancel")))))}o(".reply-box-no-focus:focus{border-style:none none solid;box-shadow:none;outline-style:none}.reply-box-no-focus{border-style:none none solid;margin-left:10px}");let i;o(".recursive-align{border-left:1px;border-color:gray;border-left-style:solid;margin-left:10px;padding:5px}.recursive-reply-box-align{display:grid;grid-template-rows:32px 32px;margin-left:5px;margin-top:10px;max-width:30px}.recursive-view-replies-button{color:gray;cursor:pointer;margin-left:15px}.recursive-reply-button{color:#585858;font-size:15px;font-weight:500;margin:0;padding:0}.reply-icon{height:10px;width:10px}.recursive-reply-button-div{border-radius:10px;cursor:pointer;display:flex;margin:5px 0 5px 3px;max-width:80px;padding:2px}.recursive-reply-button-div:hover{background-color:#ebe9e9}.circle{background-color:#00d53b;border-radius:50%;cursor:pointer;display:inline-block;margin:7px}.circle-inner{color:#fff;display:table-cell;font-size:22px;height:30px;text-align:center;text-decoration:none;vertical-align:middle;width:30px}.show-more-button{color:gray;cursor:pointer;margin-left:10px}.nested-comment{margin-left:4px;padding-top:13px}.reply-img-div{margin:0 10px}");const d=new Uint8Array(16);function a(){if(!i&&(i="undefined"!=typeof crypto&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto),!i))throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");return i(d)}const c=[];for(let e=0;e<256;++e)c.push((e+256).toString(16).slice(1));var s={randomUUID:"undefined"!=typeof crypto&&crypto.randomUUID&&crypto.randomUUID.bind(crypto)};function p(e,t,r){if(s.randomUUID&&!t&&!e)return s.randomUUID();const n=(e=e||{}).random||(e.rng||a)();if(n[6]=15&n[6]|64,n[8]=63&n[8]|128,t){r=r||0;for(let e=0;e<16;++e)t[r+e]=n[e];return t}return function(e,t=0){return(c[e[t+0]]+c[e[t+1]]+c[e[t+2]]+c[e[t+3]]+"-"+c[e[t+4]]+c[e[t+5]]+"-"+c[e[t+6]]+c[e[t+7]]+"-"+c[e[t+8]]+c[e[t+9]]+"-"+c[e[t+10]]+c[e[t+11]]+c[e[t+12]]+c[e[t+13]]+c[e[t+14]]+c[e[t+15]]).toLowerCase()}(n)}function m(){return m=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},m.apply(this,arguments)}const u=t=>e.createElement("svg",m({fill:"#585858",height:800,width:800,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512",xmlSpace:"preserve"},t),e.createElement("path",{d:"M185.2 128.6V19.7L0 204.9l185.2 185.2v-109c152.5 0 250.5 0 326.8 217.9 0-108.9 10.9-370.4-326.8-370.4z"}));function h({data:e=[],commentAdded:o=(()=>{}),userName:i,paginationSize:d=2,userId:a}){const c="*";let[s,m]=r({children:[],id:c}),h=new Set,[g,y]=r({});const f=e=>{let t={...g};if(void 0!==e&&void 0!==t.userId)return g.userId;for(var r="#",n=0;n<6;n++)r+=Math.floor(10*Math.random());return void 0!==e&&y({...g,userId:r}),r},x=(e,t)=>{if(t.has(e.childId)){let r=[],n={id:e.childId,name:e.name,comment:e.comment,color:void 0!==e.color?e.color:f(e.userId),children:r};return t.get(e.childId).forEach((e=>{r.push(x(e,t))})),n}return{id:e.childId,name:e.name,comment:e.comment,color:void 0!==e.color?e.color:f(e.userId),children:[]}};n((()=>{let t=(e=>{let t=new Map;return e.forEach((e=>{h.add(e.childId),t.has(e.parentId)?t.set(e.parentId,[...t.get(e.parentId),e]):t.set(e.parentId,[e])})),t})(e),r=[],n=(()=>{let t=new Set;return e.forEach((e=>{h.has(e.parentId)||t.add(e.parentId)})),[...t]})();if(n.length>0)for(let e of n)t.get(e).forEach(((n,o)=>{r.push(x(t.get(e)[o],t))}));let o={children:[...r],id:c};m(o)}),[]);let v=({root:e,commentAdded:n})=>{let[o,s]=r(!1),[m,h]=r(!1),[g,y]=r(""),[x,b]=r(d);const E=t=>{const r=p().slice(0,8);e.children.unshift({id:r,name:i,comment:t,color:f(a),children:[]}),s(!0),h(!1),y(r),n({parentId:"*"==e.id?p().slice(0,8):e.id,childId:r,comment:t,name:i,userId:a})};return t.createElement("div",null,e.id===c&&t.createElement(l,{onReply:e=>E(e),isRoot:!0}),t.createElement("div",{className:e.id!==c?"recursive-align":""},e.id!==c&&t.createElement("div",{style:{display:"flex"}},t.createElement("div",{className:"circle",style:{backgroundColor:e.color},title:e.name},t.createElement("p",{className:"circle-inner"},e&&e.name&&e.name.substring(0,2)))," ",t.createElement("div",{className:"nested-comment"},e&&e.comment)),e.id!==c&&t.createElement("div",{className:"recursive-reply-button-div"},t.createElement("div",{className:"reply-img-div"},t.createElement(u,{className:"reply-icon"})),t.createElement("div",null,t.createElement("p",{onClick:()=>h(!m),className:"recursive-reply-button"},"Reply"))),m&&t.createElement("div",{className:"recursive-reply-box-align"},t.createElement(l,{onReply:e=>E(e),cancel:()=>{h(!1)}})),(o&&e||e.id===c)&&e.children.slice(0,x).map((e=>t.createElement("span",{key:e.id},t.createElement("div",null,t.createElement(v,{root:e,commentAdded:n}))))),!o&&e.id!==c&&e.children&&0!=e.children.length&&t.createElement("p",{className:"recursive-view-replies-button",onClick:()=>s(!0)},"view replies"),(o||e.id===c)&&e.children.length!=c&&x<e.children.length&&t.createElement("p",{className:"show-more-button",onClick:()=>{b(x+d)}},"show more")))};return t.createElement("div",null,t.createElement(v,{root:s,commentAdded:o}))}export{h as NestedComments};