(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[42961],{59769:(e,t,n)=>{"use strict";n.d(t,{Z:()=>r});let r=(0,n(64833).z)("button")({name:"DefaultButton",class:"dj4vswd",propsAsIs:!1});n(16368)},42961:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>k});var r=n(67841),s=n(79477),o=n(64833),a=n(74631),l=n(62867);let c=s.createContext({});function i(e){let{wrapperRef:t,groupId:n,children:o}=e,a=s.useRef({}),l=s.useMemo(()=>({domNodes:a,groupId:n,wrapperRef:t}),[n,t]);return(0,r.jsx)(c.Provider,{value:l,children:o})}var p=n(72789),u=n(59769);function d(e){let{ownsState:t,state:n,onClick:o,onChange:a}=e,l=typeof n[t],{groupId:i}=s.useContext(c),u="".concat(i,"-").concat(t);return(0,r.jsxs)(r.Fragment,{children:["object"===l&&(0,r.jsx)(r.Fragment,{children:(0,r.jsxs)(g,{children:[t,": ",(0,p.ZP)(n[t],"HH:mm:ss")]})}),"number"===l&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(g,{children:[t,": ",n[t]]}),(0,r.jsx)(b,{onClick:o,children:"Increment"})]}),"string"===l&&(0,r.jsxs)(x,{onSubmit:e=>e.preventDefault(),children:[(0,r.jsxs)("label",{htmlFor:u,children:[t,":"]}),(0,r.jsx)("input",{type:"text",value:n[t],onChange:a})]})]})}let h=(0,o.z)("div")({name:"Wrapper",class:"w6q7rj",propsAsIs:!1}),m=(0,o.z)("p")({name:"Props",class:"p1s8dhho",propsAsIs:!1}),f=(0,o.z)("div")({name:"ActiveCover",class:"a1x0smr8",propsAsIs:!1}),w=(0,o.z)("p")({name:"Label",class:"l103zwh5",propsAsIs:!1});(0,o.z)("div")({name:"ChildRow",class:"cgvo6rv",propsAsIs:!1});let g=(0,o.z)("p")({name:"StateParagraph",class:"s158vob2",propsAsIs:!1}),x=(0,o.z)("form")({name:"MiniForm",class:"m1wmcxq",propsAsIs:!1}),b=(0,o.z)(u.Z)({name:"Button",class:"b110zhun",propsAsIs:!0}),j=(0,o.z)("svg")({name:"Svg",class:"sf2gdtx",propsAsIs:!1}),S=(0,o.z)("div")({name:"PureWrapper",class:"pef3u37",propsAsIs:!1}),v=(0,o.z)("p")({name:"PureText",class:"p1nnkjjs",propsAsIs:!1}),C=function(e){let{id:t,label:n,parentId:o,ownsState:a,props:l,isPure:i,state:p,alignment:u,onClick:g,onChange:x}=e,[b,C]=s.useState(!1),I=s.useRef(),P=t||n.toLowerCase(),z=function(e){let{actualId:t,parentId:n,nodeRef:r,alignment:o}=e,[a,l]=s.useState(null),{domNodes:i,wrapperRef:p}=s.useContext(c);return s.useEffect(()=>{function e(){i.current[t]=r;let e=i.current[n];if(!(null==e?void 0:e.current)||!(null==p?void 0:p.current))return;let s=p.current.getBoundingClientRect(),a=e.current.getBoundingClientRect(),c={top:a.top-s.top,left:a.left-s.left,right:a.left-s.left+a.width,bottom:a.top-s.top+a.height,width:a.width,height:a.height};c.centerX=c.left+c.width/2,c.centerY=c.top+c.height/2;let u=r.current.getBoundingClientRect(),d={top:u.top-s.top,left:u.left-s.left,right:u.left-s.left+u.width,bottom:u.top-s.top+u.height,width:u.width,height:u.height};if(d.centerX=d.left+d.width/2,d.centerY=d.top+d.height/2,"center"===o){let e=d.centerX,t=d.top-8,n=c.centerX,r=c.bottom+8;l("\n          M ".concat(e," ").concat(t,"\n          L ").concat(n,"   ").concat(r,"\n        "))}else if("left"===o){let e=d.left+.66*d.width,t=d.top-8,n=d.left+.66*d.width,r=c.bottom+8,s=c.left+.4*c.width,o=d.top-8,a=c.left+.45*c.width,i=c.bottom+8;l("\n          M ".concat(e,"  ").concat(t,"\n          C ").concat(n," ").concat(r,"\n            ").concat(s," ").concat(o,"\n            ").concat(a,"    ").concat(i,"\n        "))}else{let e=d.left+.33*d.width,t=d.top-8,n=d.left+.33*d.width,r=c.bottom+8,s=c.left+.6*c.width,o=d.top-8,a=c.left+.55*c.width,i=c.bottom+8;l("\n          M ".concat(e,"  ").concat(t,"\n          C ").concat(n," ").concat(r,"\n            ").concat(s," ").concat(o,"\n            ").concat(a,"    ").concat(i,"\n        "))}}return window.setTimeout(e,1),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}},[t,n]),a}({actualId:P,parentId:o,nodeRef:I,alignment:u});s.useEffect(()=>{C(!0),window.setTimeout(()=>{C(!1)},100)},Object.values(p));let A=b&&!a;return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(h,{id:P,ref:I,children:[(0,r.jsx)(w,{children:n}),l&&(0,r.jsxs)(m,{children:["Props:"," { ",l.join(", ")," }"]}),a&&(0,r.jsx)(d,{ownsState:a,state:p,onClick:g,onChange:x}),(0,r.jsx)(f,{style:{opacity:b?1:0,transition:b?"opacity 0ms":"opacity ".concat(1e3,"ms")}}),i&&(0,r.jsx)(S,{children:(0,r.jsx)(v,{style:{left:"left"===u?16:void 0,right:"right"===u?16:void 0},children:"Pure Component"})})]}),z&&(0,r.jsx)(j,{children:(0,r.jsx)("path",{d:z,fill:"none",style:{stroke:A?"hsl(150deg 70% 65%)":"hsl(220deg 20% 70%)",transition:A?"stroke 0ms":"stroke ".concat(1e3,"ms")}})})]})};n(78832);let I=(0,o.z)(l.Z)({name:"Wrapper",class:"w1pdv1kl",propsAsIs:!0}),P=(0,o.z)("div")({name:"Row",class:"r1t5pwgv",propsAsIs:!1}),z=function(e){let{initialState:t,groupId:n,rows:o}=e,l=s.useRef(),[c,p]=s.useState(t),u=s.useMemo(()=>{let e=[];return o.forEach((t,n)=>{let r=[...e[n-1]||[]];t.forEach(e=>{e.ownsState&&!r.includes(e.ownsState)&&r.push(e.ownsState)}),e.push(r)}),e},[o]);return s.useEffect(()=>{let e=Object.entries(t).filter(e=>{let[t,n]=e;return"object"==typeof n});if(e.length>0){let t=window.setInterval(()=>{p(t=>{let n=e.reduce((e,t)=>{let[n]=t;return{...e,[n]:new Date}},{});return{...t,...n}})},1e3);return()=>{window.clearInterval(t)}}},[t]),(0,r.jsx)(i,{groupId:n,wrapperRef:l,children:(0,r.jsx)(I,{ref:l,children:o.map((e,t)=>(0,r.jsx)(P,{children:e.map((n,s)=>{let o;let l=n.id||n.label,i=(0,a.ei)(c,u[t]);return(n.isPure||n.isPureSecretly)&&(i=(0,a.ei)(i,n.dependsOnState||[])),1===e.length?o="center":2===e.length?o=0===s?"left":"right":3===e.length&&(o=0===s?"left":1===s?"center":"right"),(0,r.jsx)(C,{...n,state:i,alignment:o,onChange:e=>{p(t=>({...t,[n.ownsState]:e.target.value}))},onClick:()=>{p(e=>({...e,[n.ownsState]:e[n.ownsState]+1}))}},l)})},t))})})};n(83342);let A={CounterNodeGraph:function(){return(0,r.jsx)(z,{initialState:{count:0},rows:[[{label:"App"}],[{label:"Counter",parentId:"app",ownsState:"count"}],[{label:"BigCountNumber",parentId:"counter",props:["count"],dependsOnState:["count"]}]]})},CounterDecorationNodeGraph:function(){return(0,r.jsx)(z,{initialState:{count:0},rows:[[{label:"App"}],[{label:"Counter",parentId:"app",ownsState:"count"}],[{label:"BigCountNumber",parentId:"counter",props:["count"],dependsOnState:["count"]},{label:"Decoration",parentId:"counter",dependsOnState:[]}]]})},UseMemoGraph:function(){return(0,r.jsx)(z,{initialState:{count:0},rows:[[{label:"App"}],[{label:"Counter",parentId:"app",ownsState:"count"}],[{label:"BigCountNumber",parentId:"counter",props:["count"],dependsOnState:["count"],isPure:!0},{label:"Decoration",parentId:"counter",dependsOnState:[],isPure:!0}]]})},DecorativeBoxesNodeGraph:function(){return(0,r.jsx)(z,{groupId:"red-boxes",initialState:{name:""},rows:[[{label:"App",ownsState:"name"}],[{label:"Boxes",parentId:"app",props:["boxes"],dependsOnState:["name"],isPure:!0}]]})},PrimeClockGraph:function(){let[e,t]=s.useState(!1);return(s.useEffect(()=>{t(!0)}),e)?(0,r.jsx)(z,{initialState:{time:new Date,selectedNum:10},rows:[[{label:"App"}],[{label:"Clock",parentId:"app",ownsState:"time",dependsOnState:"time",isPureSecretly:!0},{label:"PrimeCalculator",parentId:"app",ownsState:"selectedNum",dependsOnState:"selectedNum",isPureSecretly:!0}]]}):null},PurePrimeClockGraph:function(){let[e,t]=s.useState(!1);return(s.useEffect(()=>{t(!0)}),e)?(0,r.jsx)(z,{initialState:{time:new Date,selectedNum:10},rows:[[{label:"App",ownsState:"time",dependsOnState:"time"}],[{label:"Clock",parentId:"app",isPureSecretly:!0,dependsOnState:"time"},{label:"PurePrimeCalculator",parentId:"app",ownsState:"selectedNum",dependsOnState:"selectedNum",isPure:!0}]]}):null}};function k(e){let{component:t,...n}=e,s=A[t];if(!s)throw console.error(t,n),Error("Tried rendering a “WhyReactRenders” demo, but no component was found under name: "+t+". See console log for more info");return(0,r.jsx)(s,{...n})}},16368:e=>{e.exports={dj4vswd:"dj4vswd"}},78832:e=>{e.exports={w6q7rj:"w6q7rj",p1s8dhho:"p1s8dhho",a1x0smr8:"a1x0smr8",l103zwh5:"l103zwh5",s158vob2:"s158vob2",m1wmcxq:"m1wmcxq",b110zhun:"b110zhun",sf2gdtx:"sf2gdtx",pef3u37:"pef3u37",p1nnkjjs:"p1nnkjjs"}},83342:e=>{e.exports={w1pdv1kl:"w1pdv1kl",r1t5pwgv:"r1t5pwgv"}}}]);
//# sourceMappingURL=42961.cb6b7b5d6bd2004f.js.map