-
Notifications
You must be signed in to change notification settings - Fork 0
/
4372-03fa447bf7cd68868e05.js
1 lines (1 loc) · 38.1 KB
/
4372-03fa447bf7cd68868e05.js
1
(self.webpackChunkzent_docs=self.webpackChunkzent_docs||[]).push([[4372],{44372:(n,s,a)=>{"use strict";a.r(s),a.d(s,{default:()=>C});var t=a(73450),p=a(27378),e=a(57318),o=a(39550),c=a(74473),l=a(96681),i=a(31846),u=a(82010),r=a(25120),k=a(24246);function d(n,s){var a=Object.keys(n);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(n);s&&(t=t.filter((function(s){return Object.getOwnPropertyDescriptor(n,s).enumerable}))),a.push.apply(a,t)}return a}function m(n){for(var s=1;s<arguments.length;s++){var a=null!=arguments[s]?arguments[s]:{};s%2?d(Object(a),!0).forEach((function(s){(0,t.Z)(n,s,a[s])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(a)):d(Object(a)).forEach((function(s){Object.defineProperty(n,s,Object.getOwnPropertyDescriptor(a,s))}))}return n}var f=function(){return(0,k.jsxs)(o.W,{style:{margin:"10px 0"},children:[(0,k.jsx)(c.r,{span:8,children:(0,k.jsx)(l.z,{type:"primary",size:"large",children:"Index"})}),(0,k.jsx)(c.r,{span:8,offset:8,children:(0,k.jsx)(i.D,{offsetTop:135,children:(0,k.jsx)(l.z,{type:"primary",size:"large",children:"Affix"})})})]})},g=function(){class n extends p.Component{constructor(...n){super(...n),(0,t.Z)(this,"state",{text:"Affix"}),(0,t.Z)(this,"onPin",(()=>{this.setState({text:"Pinned"})})),(0,t.Z)(this,"onUnpin",(()=>{this.setState({text:"Unpinned"})}))}render(){return(0,k.jsx)(i.D,{offsetTop:200,onPin:this.onPin,onUnpin:this.onUnpin,children:(0,k.jsx)(u.b,{type:"warning",children:this.state.text})})}}return(0,k.jsx)(n,{})},h=function(){return(0,k.jsx)("div",{className:"affix-demo-bottom",children:(0,k.jsx)(i.D,{offsetBottom:60,children:(0,k.jsx)(u.b,{type:"warning",children:(0,k.jsx)("p",{children:"set offset bottom"})})})})},y=function(){return(0,k.jsx)("div",{className:"affix-demo-both",children:(0,k.jsx)(i.D,{offsetBottom:150,offsetTop:50,children:(0,k.jsx)(u.b,{type:"warning",children:(0,k.jsx)("p",{children:"Set offsetTop and offsetBottom"})})})})},x=function(){class n extends p.Component{constructor(...n){super(...n),(0,t.Z)(this,"containerRef",null),(0,t.Z)(this,"affixRef",p.createRef()),(0,t.Z)(this,"onSrcoll",(()=>{var n,s;null===(n=this.affixRef)||void 0===n||null===(s=n.current)||void 0===s||s.updatePosition()}))}render(){return(0,k.jsxs)(k.Fragment,{children:[(0,k.jsx)("div",{className:"affix-target__container",ref:n=>this.containerRef=n,children:(0,k.jsx)("div",{className:"affix-target__content",children:(0,k.jsx)(i.D,{ref:this.affixRef,offsetBottom:20,offsetTop:20,getAffixContainer:()=>this.containerRef,children:(0,k.jsx)(l.z,{children:"Affix relative to container node"})})})}),(0,k.jsx)(r.f,{onScroll:this.onSrcoll})]})}}return(0,k.jsx)(n,{})};function v(n){return(0,k.jsx)(n.tag,m(m({},n.attributes),{},{dangerouslySetInnerHTML:{__html:n.html}}))}function b(n){return(0,k.jsx)(v,{tag:"section",html:n.html,attributes:{className:"zandoc-react-markdown"}})}function j(n){return(0,k.jsx)(v,{tag:"style",html:n.style})}function w(n,s){for(;n;)return n.offsetTop&&"static"!==getComputedStyle(n).position&&(s+=n.offsetTop),w(n.parentNode,s);return s}class z extends p.Component{constructor(...n){super(...n),(0,t.Z)(this,"state",{showCode:!1}),(0,t.Z)(this,"toggle",(()=>{this.setState({showCode:!this.state.showCode})}))}render(){var n=this.state.showCode,s=this.props,a=s.title,t=s.src,p=s.children;return(0,k.jsxs)("div",{className:"zandoc-react-demo",children:[(0,k.jsx)("div",{className:"zandoc-react-demo__preview",children:p}),(0,k.jsxs)("div",{className:"zandoc-react-demo__bottom",onClick:this.toggle,children:[(0,k.jsx)("div",{className:"zandoc-react-demo__title",children:(0,k.jsx)("p",{children:a||""})}),(0,k.jsx)("i",{className:"zenticon zenticon-caret-up zandoc-react-demo__toggle ".concat(n?"zandoc-react-demo__toggle-on":"zandoc-react-demo__toggle-off")})]}),n&&(0,k.jsx)("pre",{className:"zandoc-react-demo__code",children:(0,k.jsx)(v,{tag:"code",html:t,attributes:{className:"language-jsx"}})})]})}}class C extends p.Component{componentDidMount(){var n=location.hash;if(n){var s=document.querySelector('a[href="'.concat(n,'"]'));s&&(0,e.l)(document.documentElement,0,w(s,-9))}}render(){return p.createElement("div",{className:"zandoc-react-container"},p.createElement(j,{style:".affix-target__container{\n height: 150px;\n overflow-y: auto;\n }\n\n .affix-target__content {\n background: rgba(0, 0, 0, 0.1);\n padding-top: 150px;\n height: 200px;\n }"}),p.createElement(b,{html:'<h2 class="anchor-heading"><a href="#affix">¶</a><a href="javascript:void(0)" id="affix" class="anchor-point"></a>Affix</h2>\n<p>Pin element in a specific position.</p>\n<h3 class="anchor-heading"><a href="#demos">¶</a><a href="javascript:void(0)" id="demos" class="anchor-point"></a>Demos</h3>'}),p.createElement(z,{title:"Using offsetTop to set offset from viewport's top",id:"Demooffsettop",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Affix</span><span class="token punctuation">,</span> <span class="token maybe-class-name">LayoutRow</span> <span class="token keyword module">as</span> <span class="token maybe-class-name">Row</span><span class="token punctuation">,</span> <span class="token maybe-class-name">LayoutCol</span> <span class="token keyword module">as</span> <span class="token maybe-class-name">Col</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Button</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Row</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> margin<span class="token operator">:</span> <span class="token string">\'10px 0\'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Col</span></span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">8</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n <span class="token maybe-class-name">Index</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Col</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Col</span></span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">8</span><span class="token punctuation">}</span></span> <span class="token attr-name">offset</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">8</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Affix</span></span> <span class="token attr-name">offsetTop</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">135</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n <span class="token maybe-class-name">Affix</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Affix</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Col</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Row</span></span><span class="token punctuation">></span></span><span class="token punctuation">,</span>\n mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},p.createElement(f)),p.createElement(z,{title:"Set callback function",id:"Democallback",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Affix</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Alert</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>\n state <span class="token operator">=</span> <span class="token punctuation">{</span>\n text<span class="token operator">:</span> <span class="token string">\'Affix\'</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function-variable function">onPin</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> text<span class="token operator">:</span> <span class="token string">\'Pinned\'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n <span class="token function-variable function">onUnpin</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> text<span class="token operator">:</span> <span class="token string">\'Unpinned\'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Affix</span></span> <span class="token attr-name">offsetTop</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">200</span><span class="token punctuation">}</span></span> <span class="token attr-name">onPin</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onPin</span><span class="token punctuation">}</span></span> <span class="token attr-name">onUnpin</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onUnpin</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Alert</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>warning<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">text</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Alert</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Affix</span></span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">App</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},p.createElement(g)),p.createElement(z,{title:"Using offsetBottom to set offset from viewport's bottom",id:"Demooffsetbottom",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Affix</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Alert</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>affix-demo-bottom<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Affix</span></span> <span class="token attr-name">offsetBottom</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">60</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Alert</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>warning<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token keyword">set</span> offset bottom<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Alert</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Affix</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">,</span>\n mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},p.createElement(h)),p.createElement(z,{title:"Set offsetTop and offsetBottom",id:"Demoboth",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Affix</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Alert</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>affix-demo-both<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Affix</span></span> <span class="token attr-name">offsetBottom</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">150</span><span class="token punctuation">}</span></span> <span class="token attr-name">offsetTop</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">50</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Alert</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>warning<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token known-class-name class-name">Set</span> offsetTop and offsetBottom<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Alert</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Affix</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">,</span>\n mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},p.createElement(y)),p.createElement(z,{title:"Container node for positioning",id:"Democontainer",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Affix</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Button</span><span class="token punctuation">,</span> <span class="token maybe-class-name">WindowScrollHandler</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">Demo</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>\n containerRef <span class="token operator">=</span> <span class="token keyword null nil">null</span><span class="token punctuation">;</span>\n affixRef <span class="token operator">=</span> <span class="token maybe-class-name">React</span><span class="token punctuation">.</span><span class="token method function property-access">createRef</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token function-variable function">onSrcoll</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">affixRef</span><span class="token operator">?.</span>current<span class="token operator">?.</span><span class="token method function property-access">updatePosition</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span>\n <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>affix-target__container<span class="token punctuation">"</span></span>\n <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token parameter">ref</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">containerRef</span> <span class="token operator">=</span> ref<span class="token punctuation">)</span><span class="token punctuation">}</span></span>\n <span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>affix-target__content<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Affix</span></span>\n <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">affixRef</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">offsetBottom</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">20</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">offsetTop</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">20</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">getAffixContainer</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">containerRef</span><span class="token punctuation">}</span></span>\n <span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Affix</span> relative to container node<span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Affix</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">WindowScrollHandler</span></span> <span class="token attr-name">onScroll</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onSrcoll</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Demo</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},p.createElement(x)),p.createElement(b,{html:'<h3 class="anchor-heading"><a href="#api">¶</a><a href="javascript:void(0)" id="api" class="anchor-point"></a>API</h3>\n<table class="table">\n<thead>\n<tr>\n<th>Property</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default</th>\n<th>Alternative</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>offsetTop</td>\n<td>Offset to the top of the viewport</td>\n<td><code>number</code></td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>offsetBottom</td>\n<td>Offset to the bottom of the viewport</td>\n<td><code>number</code></td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>getAffixContainer</td>\n<td>Custom target node for positioning</td>\n<td><code>() => HTMLElement | null</code></td>\n<td><code>window</code></td>\n<td></td>\n</tr>\n<tr>\n<td>children</td>\n<td>Children</td>\n<td><code>React.ReactNode</code></td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>onPin</td>\n<td>Callback when affix pins</td>\n<td><code>() => void</code></td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>onUnpin</td>\n<td>Callback when affix unpins</td>\n<td><code>() => void</code></td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>zIndex</td>\n<td>Pin \n<code>z-index</code></td>\n<td><code>number</code></td>\n<td>10</td>\n<td></td>\n</tr>\n<tr>\n<td>className</td>\n<td>Extra class name</td>\n<td><code>string</code></td>\n<td><code>\'\'</code></td>\n<td></td>\n</tr>\n<tr>\n<td>placeholderClassName</td>\n<td>Placeholder container class name</td>\n<td><code>string</code></td>\n<td><code>\'\'</code></td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<p><strong>Note</strong></p>\n<ul>\n<li>At least one of <code>offsetTop</code> and <code>offsetBottom</code> must be set; you can set both at the same time but you\'re warned of bizarre things that may happen if window height is too small.</li>\n<li>Using <code>ref</code> and <code>getAffixContainer</code> for relative positioning at the same time when there are two scrollbars. You should add scroll event listener for outer scroll container manually.</li>\n</ul>'}))}}},82010:(n,s,a)=>{"use strict";a.d(s,{b:()=>k});var t=a(59312),p=a(24246),e=a(60042),o=a.n(e),c=a(27378),l=a(78486),i=a(78513),u=["outline","closed","onClose"],r=["title","description","loading","closable","closed","onClose","closeContent","extraContent"],k=function(n){function s(){var s=null!==n&&n.apply(this,arguments)||this;return s.state={closed:!1},s.onCloseHandler=function(){s.isControlled||s.setState({closed:!0}),s.props.onClose&&s.props.onClose()},s}return(0,t.ZT)(s,n),Object.defineProperty(s.prototype,"isControlled",{get:function(){return"closed"in this.props},enumerable:!1,configurable:!0}),Object.defineProperty(s.prototype,"closed",{get:function(){return this.isControlled?this.props.closed:this.state.closed},enumerable:!1,configurable:!0}),s.prototype.render=function(){var n;if(this.closed)return null;var s=(0,i.Z)(this.props,r),a=s.className,e=s.type,c=s.outline,k=(0,t._T)(s,["className","type","outline"]),d=(0,i.Z)(this.props,u),m=o()("zent-alert","zent-alert-style-"+e,a,((n={})["zent-alert-outline"]=c,n));return(0,p.jsx)("div",(0,t.pi)({className:m},k,{"data-zv":"9.12.16"},{children:(0,p.jsx)(l.Z,(0,t.pi)({},d,{onAlertItemClose:this.onCloseHandler},{children:this.props.children}),void 0)}),void 0)},s.highlightClassName="zent-alert-content__highlight",s.defaultProps={type:"info",loading:!1,outline:!1,closable:!1},s}(c.PureComponent)},78486:(n,s,a)=>{"use strict";var t=a(59312),p=a(24246),e=a(27378),o=a(60042),c=a.n(o),l=a(27036),i=a(20840),u={info:"info-circle",warning:"warning",success:"check-circle",error:"error-circle"},r=(0,e.forwardRef)((function(n,s){var a=n.extraContent,o=n.classItemName,r=n.title,k=n.description,d=n.children,m=n.loading,f=n.type,g=n.closable,h=n.closeContent,y=n.onAlertItemClose,x=(0,e.useRef)(n);x.current=n;var v=(0,e.useMemo)((function(){return d||(0,p.jsxs)(p.Fragment,{children:[r&&(0,p.jsx)("h3",(0,t.pi)({className:"zent-alert-item-content__title","data-zv":"9.12.16"},{children:r}),void 0),k&&(0,p.jsx)("p",(0,t.pi)({className:"zent-alert-item-content__description","data-zv":"9.12.16"},{children:k}),void 0)]},void 0)}),[d,k,r]),b=(0,e.useMemo)((function(){var n=x.current.onClose;return g?(0,p.jsx)("div",(0,t.pi)({className:"zent-alert-item-close-wrapper",onClick:function(s){null==n||n(),y&&y(),s.stopPropagation()},"data-zv":"9.12.16"},{children:null!=h?h:(0,p.jsx)(l.Z,{type:"close",className:"zent-alert-item-close-btn"},void 0)}),void 0):null}),[g,h,y]),j=(0,e.useMemo)((function(){return m?(0,p.jsx)(i.Z,{className:"zent-alert-item-icon",loading:!0,icon:"circle",iconSize:16},void 0):f in u?(0,p.jsx)(l.Z,{className:"zent-alert-item-icon",type:u[f]},void 0):null}),[m,f]);return(0,p.jsxs)("div",(0,t.pi)({className:c()("zent-alert-item",o),ref:s,"data-zv":"9.12.16"},{children:[j,(0,p.jsx)("div",(0,t.pi)({className:"zent-alert-item-content","data-zv":"9.12.16"},{children:v}),void 0),a&&(0,p.jsx)("div",(0,t.pi)({className:"zent-alert-item-extra-content","data-zv":"9.12.16"},{children:a}),void 0),b]}),void 0)}));r.displayName="AlertItem",s.Z=r},48591:(n,s,a)=>{"use strict";var t=(0,a(27378).createContext)({});s.Z=t},74473:(n,s,a)=>{"use strict";a.d(s,{r:()=>r});var t=a(59312),p=a(24246),e=a(27378),o=a(60042),c=a.n(o),l=a(65225),i=a(48591),u=a(81093),r=function(n){function s(){return null!==n&&n.apply(this,arguments)||this}return(0,t.ZT)(s,n),s.prototype.render=function(){var n=this;return(0,p.jsx)(i.Z.Consumer,{children:function(s){return(0,p.jsx)(l.Z.Consumer,{children:function(a){var e,o=n.props,l=o.span,i=o.offset,r=o.order,k=o.className,d=o.style,m=(0,t._T)(o,["span","offset","order","className","style"]),f=d,g=(0,u.r)(s,a.colGutter);if(g>0){var h=g/2;f=(0,t.pi)((0,t.pi)({},f),{paddingLeft:h,paddingRight:h})}var y=(0,u.r)(s,l),x=(0,u.r)(s,i),v=(0,u.r)(s,r),b=c()("zent-col",((e={})["zent-col-offset-"+i]=x,e["zent-col-order-"+r]=v,e),"zent-col-"+y,k);return(0,p.jsx)("div",(0,t.pi)({},m,{className:b,style:f,"data-zv":"9.12.16"},{children:n.props.children}),void 0)}},void 0)}},void 0)},s.defaultProps={offset:0,order:0},s}(e.Component)},65225:(n,s,a)=>{"use strict";a.d(s,{x:()=>t});var t=(0,a(27378).createContext)({rowGutter:0,colGutter:0});s.Z=t},39550:(n,s,a)=>{"use strict";a.d(s,{W:()=>r});var t=a(59312),p=a(24246),e=a(27378),o=a(60042),c=a.n(o),l=a(65225),i=a(48591),u=a(81093),r=function(n){function s(){return null!==n&&n.apply(this,arguments)||this}return(0,t.ZT)(s,n),s.prototype.render=function(){var n=this,s=this.props,a=s.className,e=s.style,o=s.justify,r=s.align,k=(0,t._T)(s,["className","style","justify","align"]),d=c()({"zent-row":!0},"zent-row-justify-"+o,"zent-row-align-"+r,a);return(0,p.jsx)(i.Z.Consumer,{children:function(s){return(0,p.jsx)(l.Z.Consumer,{children:function(a){var o=(0,u.r)(s,a.colGutter),c=(0,u.r)(s,a.rowGutter),l=e;if(o>0){var i=-o/2;l=(0,t.pi)((0,t.pi)({},l),{marginLeft:i,marginRight:i})}if(c&&c>0){var r=c/2;l=(0,t.pi)((0,t.pi)({},l),{paddingTop:r,paddingBottom:r})}return(0,p.jsx)("div",(0,t.pi)({},k,{className:d,style:l,"data-zv":"9.12.16"},{children:n.props.children}),void 0)}},void 0)}},void 0)},s.defaultProps={justify:"start",align:"start"},s}(e.Component)},81093:(n,s,a)=>{"use strict";var t;a.d(s,{j:()=>o,r:()=>c}),function(n){n.fhd="(min-width: 1920px)",n.xxl="(min-width: 1600px)",n.xl="(min-width: 1200px)",n.lg="(min-width: 992px)",n.md="(min-width: 768px)",n.sm="(min-width: 576px)",n.xs="(max-width: 575px)"}(t||(t={}));var p=a(72551),e=Object.keys(t).reduce((function(n,s){return n[t[s]]=s,n}),{}),o=Object.keys(e);function c(n,s){if("number"==typeof s)return s;for(var a=0;a<o.length;a++){var t=o[a],c=e[t];if(n[t]){var l=s[c];if(void 0!==l)return l}}return(0,p.n)(s,"fallback")?s.fallback:0}}}]);