nested-comments-react/dist/index.js

A simple react component for nested comments

"use strict";var e=require("react");function t(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var r=t(e);function n(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 o({onReply:t,cancel:r=(()=>{}),isRoot:n=!1}){const[o,l]=e.useState(""),[i,a]=e.useState(!1);return e.createElement("div",null,e.createElement("div",{style:{display:"grid",gridTemplateRows:"32px 32px",maxWidth:"30px"}},e.createElement("div",null,e.createElement("input",{placeholder:"reply...",onFocus:()=>a(!0),className:"reply-box-no-focus",type:"text",value:o,onChange:e=>l(e.target.value)})),(n&&i||!n)&&e.createElement("div",{style:{display:"flex",alignItems:"flex-end",justifyContent:"flex-end"}},e.createElement("div",null,0===o.length&&e.createElement("button",{style:{borderRadius:"5px",borderStyle:"none",padding:"8px",cursor:"pointer"},onClick:()=>{t(o),l("")},disabled:!0},"Reply"),0!==o.length&&e.createElement("button",{style:{borderRadius:"5px",borderStyle:"none",padding:"8px",backgroundColor:"blue",color:"white",cursor:"pointer"},onClick:()=>{t(o),l("")}},"Reply")),e.createElement("div",{style:{paddingLeft:"5px"}},e.createElement("button",{style:{borderRadius:"5px",borderStyle:"none",padding:"8px",cursor:"pointer"},onClick:()=>{l(""),a(!1),r()}},"Cancel")))))}n(".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 l;n(".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 i=new Uint8Array(16);function a(){if(!l&&(l="undefined"!=typeof crypto&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto),!l))throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");return l(i)}const d=[];for(let e=0;e<256;++e)d.push((e+256).toString(16).slice(1));var c={randomUUID:"undefined"!=typeof crypto&&crypto.randomUUID&&crypto.randomUUID.bind(crypto)};function s(e,t,r){if(c.randomUUID&&!t&&!e)return c.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(d[e[t+0]]+d[e[t+1]]+d[e[t+2]]+d[e[t+3]]+"-"+d[e[t+4]]+d[e[t+5]]+"-"+d[e[t+6]]+d[e[t+7]]+"-"+d[e[t+8]]+d[e[t+9]]+"-"+d[e[t+10]]+d[e[t+11]]+d[e[t+12]]+d[e[t+13]]+d[e[t+14]]+d[e[t+15]]).toLowerCase()}(n)}function p(){return p=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},p.apply(this,arguments)}const u=e=>r.createElement("svg",p({fill:"#585858",height:800,width:800,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512",xmlSpace:"preserve"},e),r.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"}));exports.NestedComments=function({data:t=[],commentAdded:r=(()=>{}),userName:n,paginationSize:l=2,userId:i}){const a="*";let[d,c]=e.useState({children:[],id:a}),p=new Set,[m,g]=e.useState({});const f=e=>{let t={...m};if(void 0!==e&&void 0!==t.userId)return m.userId;for(var r="#",n=0;n<6;n++)r+=Math.floor(10*Math.random());return void 0!==e&&g({...m,userId:r}),r},h=(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(h(e,t))})),n}return{id:e.childId,name:e.name,comment:e.comment,color:void 0!==e.color?e.color:f(e.userId),children:[]}};e.useEffect((()=>{let e=(e=>{let t=new Map;return e.forEach((e=>{p.add(e.childId),t.has(e.parentId)?t.set(e.parentId,[...t.get(e.parentId),e]):t.set(e.parentId,[e])})),t})(t),r=[],n=(()=>{let e=new Set;return t.forEach((t=>{p.has(t.parentId)||e.add(t.parentId)})),[...e]})();if(n.length>0)for(let t of n)e.get(t).forEach(((n,o)=>{r.push(h(e.get(t)[o],e))}));let o={children:[...r],id:a};c(o)}),[]);let y=({root:t,commentAdded:r})=>{let[d,c]=e.useState(!1),[p,m]=e.useState(!1),[g,h]=e.useState(""),[v,x]=e.useState(l);const b=e=>{const o=s().slice(0,8);t.children.unshift({id:o,name:n,comment:e,color:f(i),children:[]}),c(!0),m(!1),h(o),r({parentId:"*"==t.id?s().slice(0,8):t.id,childId:o,comment:e,name:n,userId:i})};return e.createElement("div",null,t.id===a&&e.createElement(o,{onReply:e=>b(e),isRoot:!0}),e.createElement("div",{className:t.id!==a?"recursive-align":""},t.id!==a&&e.createElement("div",{style:{display:"flex"}},e.createElement("div",{className:"circle",style:{backgroundColor:t.color},title:t.name},e.createElement("p",{className:"circle-inner"},t&&t.name&&t.name.substring(0,2)))," ",e.createElement("div",{className:"nested-comment"},t&&t.comment)),t.id!==a&&e.createElement("div",{className:"recursive-reply-button-div"},e.createElement("div",{className:"reply-img-div"},e.createElement(u,{className:"reply-icon"})),e.createElement("div",null,e.createElement("p",{onClick:()=>m(!p),className:"recursive-reply-button"},"Reply"))),p&&e.createElement("div",{className:"recursive-reply-box-align"},e.createElement(o,{onReply:e=>b(e),cancel:()=>{m(!1)}})),(d&&t||t.id===a)&&t.children.slice(0,v).map((t=>e.createElement("span",{key:t.id},e.createElement("div",null,e.createElement(y,{root:t,commentAdded:r}))))),!d&&t.id!==a&&t.children&&0!=t.children.length&&e.createElement("p",{className:"recursive-view-replies-button",onClick:()=>c(!0)},"view replies"),(d||t.id===a)&&t.children.length!=a&&v<t.children.length&&e.createElement("p",{className:"show-more-button",onClick:()=>{x(v+l)}},"show more")))};return e.createElement("div",null,e.createElement(y,{root:d,commentAdded:r}))};