-import{j as e}from"./index-CnoKS_tV.js";import{r as s}from"./iframe-CdqLD_Ol.js";import{c as d,I as i,O as a}from"./index-BclH8SrV.js";import"./index-BdGV8CkY.js";import"./preload-helper-PPVm8Dsz.js";const k={title:"Portals"},c=t=>s.createElement("div",{style:{border:"1px solid #222",padding:"10px"}},t.children),h=()=>{const t=d();return e.jsxs("div",{children:[e.jsxs("div",{children:["Portal defined here:",e.jsx(i,{node:t,children:"Hi!"})]}),e.jsxs("div",{children:["Portal renders here:",e.jsx(a,{node:t})]})]})},m=()=>{const t=d();return s.createElement(()=>{const[r,o]=s.useState(!1);return e.jsxs("div",{children:[e.jsx(i,{node:t,children:e.jsx("video",{src:"https://media.giphy.com/media/l0HlKghz8IvrQ8TYY/giphy.mp4",controls:!0,loop:!0})}),e.jsx("button",{onClick:()=>o(!r),children:"Click to move the OutPortal"}),e.jsx("hr",{}),e.jsxs("div",{children:[e.jsx("p",{children:"Outer OutPortal:"}),r===!0&&e.jsx(a,{node:t}),e.jsx(c,{children:e.jsx(c,{children:e.jsxs(c,{children:[e.jsx("p",{children:"Inner OutPortal:"}),r===!1&&e.jsx(a,{node:t})]})})})]})]})})},x=()=>{const t=d(),r=()=>{const[o,n]=s.useState(0);return e.jsxs("div",{children:["Count is ",o,e.jsx("button",{onClick:()=>n(o+1),children:"+1"})]})};return s.createElement(()=>{const[o,n]=s.useState(!1);return e.jsxs("div",{children:[e.jsx(i,{node:t,children:e.jsx(r,{})}),e.jsx("button",{onClick:()=>n(!o),children:"Click to move the OutPortal"}),e.jsx("hr",{}),e.jsx("p",{children:"Outer OutPortal:"}),o===!0&&e.jsx(a,{node:t}),e.jsx(c,{children:e.jsx(c,{children:e.jsxs(c,{children:[e.jsx("p",{children:"Inner OutPortal:"}),o===!1&&e.jsx(a,{node:t})]})})})]})})},v=()=>{const t=d(),r=o=>{const[n,l]=s.useState(0);return e.jsxs("div",{style:{backgroundColor:o.bgColor},children:["Count is ",n,e.jsx("button",{onClick:()=>l(n+1),children:"+1"})]})};return s.createElement(()=>{const[o,n]=s.useState(!1);return e.jsxs("div",{children:[e.jsx(i,{node:t,children:e.jsx(r,{bgColor:"#faa"})}),e.jsx("button",{onClick:()=>n(!o),children:"Click to move the OutPortal"}),e.jsx("hr",{}),e.jsx("p",{children:"Outer OutPortal:"}),o===!0&&e.jsx(a,{node:t,bgColor:"#aaf"}),e.jsx(c,{children:e.jsx(c,{children:e.jsxs(c,{children:[e.jsx("p",{children:"Inner OutPortal:"}),o===!1&&e.jsx(a,{node:t,bgColor:"#afa"})]})})})]})})},P=()=>{const t=d(),r=d(),o=()=>{const[n,l]=s.useState(0);return e.jsxs("div",{children:["Count is ",n,e.jsx("button",{onClick:()=>l(n+1),children:"+1"})]})};return s.createElement(()=>{const[n,l]=s.useState(!1);let u=n?r:t;return e.jsxs("div",{children:[e.jsx(i,{node:t,children:e.jsx(o,{})}),e.jsx(i,{node:r,children:e.jsx(o,{})}),e.jsx("button",{onClick:()=>l(!n),children:"Click to swap the portal shown"}),e.jsx("hr",{}),e.jsx("p",{children:"Inner OutPortal:"}),e.jsx(a,{node:u})]})})},C=()=>{const t=d(),r=n=>e.jsx(e.Fragment,{children:n.value.toString()}),o=()=>{const[n,l]=s.useState(!1);return setTimeout(()=>{l(!n)},10),e.jsxs("div",{children:["Portal flickers between 2 / 3 / nothing here:",n?e.jsxs(e.Fragment,{children:[e.jsx(a,{node:t,value:1}),e.jsx(a,{node:t,value:2})]}):Math.random()>.5?e.jsx(a,{node:t,value:3}):null]})};return e.jsxs("div",{children:[e.jsxs("div",{children:["Portal defined here:",e.jsx(i,{node:t,children:e.jsx(r,{value:"unmounted"})})]}),e.jsx(o,{})]})},j=()=>{const r=[];for(let n=0;n<5;n++)r[n]=n;const o=()=>{const n=s.useMemo(()=>r.map(()=>d()),[]),[l,u]=s.useState(r);return e.jsxs("div",{children:[e.jsx("button",{onClick:()=>u(l.slice().reverse()),children:"Click to reverse the order"}),n.map((f,p)=>e.jsx(i,{node:f,children:e.jsx("span",{children:p})},p)),l.map((f,p)=>e.jsx(a,{node:n[f]},p))]})};return e.jsx(o,{})},b=()=>s.createElement(()=>{const[t,r]=s.useState(!1),o=d(t?{attributes:{id:"div-id-1",style:"background-color: #aaf; width: 204px;"}}:void 0);return e.jsxs("div",{children:[e.jsx("button",{onClick:()=>r(!t),children:"Click to pass attributes option to the intermediary div"}),e.jsx("hr",{}),e.jsx(i,{node:o,children:e.jsx("div",{style:{width:"200px",height:"50px",border:"2px solid purple"}})}),e.jsx(a,{node:o}),e.jsx("br",{}),e.jsx("br",{}),e.jsx("br",{}),e.jsx("pre",{children:t?'const portalNode = createHtmlPortalNode({ attributes: { id: "div-id-1", style: "background-color: #aaf; width: 204px;" } });':"const portalNode = createHtmlPortalNode();"})]})}),O=()=>{const t=d({containerElement:"span"});return e.jsxs("div",{children:[e.jsxs("p",{children:["Portal defined here:",e.jsx(i,{node:t,children:"Hi!"})]}),e.jsxs("p",{children:["Portal renders here:",e.jsx(a,{node:t})]})]})},N=()=>{const t=d({containerElement:"tr"});return s.createElement(()=>{const[r,o]=s.useState(!0);return e.jsxs("div",{children:[e.jsxs(i,{node:t,children:[e.jsx("td",{children:"Cell 1"}),e.jsx("td",{children:"Cell 2"}),e.jsx("td",{children:"Cell 3"})]}),e.jsxs("button",{onClick:()=>o(!r),children:["Move row to ",r?"second":"first"," table"]}),e.jsxs("div",{style:{display:"flex",gap:"20px",marginTop:"20px"},children:[e.jsxs("table",{border:1,children:[e.jsx("thead",{children:e.jsx("tr",{children:e.jsx("th",{colSpan:3,children:"First Table"})})}),e.jsx("tbody",{children:r&&e.jsx(a,{node:t})})]}),e.jsxs("table",{border:1,children:[e.jsx("thead",{children:e.jsx("tr",{children:e.jsx("th",{colSpan:3,children:"Second Table"})})}),e.jsx("tbody",{children:!r&&e.jsx(a,{node:t})})]})]})]})})},g=()=>{const t=l=>"expensive!",r=l=>{const u=s.useMemo(()=>d(),[]);return e.jsxs("div",{children:[e.jsx(i,{node:u,children:e.jsx(t,{myProp:"defaultValue"})}),l.componentToShow==="component-a"?e.jsx(o,{portalNode:u}):e.jsx(n,{portalNode:u})]})},o=l=>e.jsxs("div",{children:["A:",e.jsx(a,{node:l.portalNode})]}),n=l=>e.jsxs("div",{children:["B:",e.jsx(a,{node:l.portalNode,myProp:"newValue",myOtherProp:123})]});return e.jsx(r,{componentToShow:"component-a"})};h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`() => {
0 commit comments