-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy path4372-aee6cc6949817e263ce0.js
1 lines (1 loc) · 44.8 KB
/
4372-aee6cc6949817e263ce0.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),e=a(27378),p=a(57318),o=a(39550),c=a(74473),l=a(3454),i=a(31846),r=a(82010),u=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"})})})]})},h=function(){class n extends e.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)(r.b,{type:"warning",children:this.state.text})})}}return(0,k.jsx)(n,{})},g=function(){return(0,k.jsx)("div",{className:"affix-demo-bottom",children:(0,k.jsx)(i.D,{offsetBottom:60,children:(0,k.jsx)(r.b,{type:"warning",children:(0,k.jsx)("p",{children:"set offset bottom"})})})})},v=function(){return(0,k.jsx)("div",{className:"affix-demo-both",children:(0,k.jsx)(i.D,{offsetBottom:150,offsetTop:50,children:(0,k.jsx)(r.b,{type:"warning",children:(0,k.jsx)("p",{children:"Set offsetTop and offsetBottom"})})})})},y=function(){class n extends e.Component{constructor(...n){super(...n),(0,t.Z)(this,"containerRef",null),(0,t.Z)(this,"affixRef",e.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)(u.f,{onScroll:this.onSrcoll})]})}}return(0,k.jsx)(n,{})};function x(n){return(0,k.jsx)(n.tag,m(m({},n.attributes),{},{dangerouslySetInnerHTML:{__html:n.html}}))}function b(n){return(0,k.jsx)(x,{tag:"section",html:n.html,attributes:{className:"zandoc-react-markdown"}})}function j(n){return(0,k.jsx)(x,{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 e.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,e=s.children;return(0,k.jsxs)("div",{className:"zandoc-react-demo",children:[(0,k.jsx)("div",{className:"zandoc-react-demo__preview",children:e}),(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)(x,{tag:"code",html:t,attributes:{className:"language-jsx"}})})]})}}class C extends e.Component{componentDidMount(){var n=location.hash;if(n){var s=document.querySelector('a[href="'.concat(n,'"]'));s&&(0,p.l)(document.documentElement,0,w(s,-9))}}render(){return e.createElement("div",{className:"zandoc-react-container"},e.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 }"}),e.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>'}),e.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> <span class="token literal-property property">margin</span><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>'},e.createElement(f)),e.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 <span class="token literal-property property">text</span><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> <span class="token literal-property property">text</span><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> <span class="token literal-property property">text</span><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>'},e.createElement(h)),e.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>'},e.createElement(g)),e.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>'},e.createElement(v)),e.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>'},e.createElement(y)),e.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:()=>d});var t=a(59312),e=a(24246),p=a(60042),o=a.n(p),c=a(27378),l=a(8434),i=a(78486),r=a(78513),u=["outline","closed","onClose"],k=["title","description","loading","closable","closed","onClose","closeContent","closeIconColor","icon","extraContent"],d=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,r.Z)(this.props,k),a=s.className,p=s.type,c=s.outline,d=s.bordered,m=s.progress,f=(0,t._T)(s,["className","type","outline","bordered","progress"]),h=(0,r.Z)(this.props,u),g=o()("zent-alert","zent-alert-style-"+p,a,((n={})["zent-alert-outline"]=c,n["zent-alert--borderless"]=!d,n));return(0,e.jsxs)("div",(0,t.pi)({className:g},f,{"data-zv":"10.0.10"},{children:[!!m&&(0,e.jsx)(l.E,{className:"zent-alert__progress",percent:m,showInfo:!1,strokeWidth:2},void 0),(0,e.jsx)(i.Z,(0,t.pi)({},h,{onAlertItemClose:this.onCloseHandler},{children:this.props.children}),void 0)]}),void 0)},s.highlightClassName="zent-alert-item-content__highlight",s.defaultProps={type:"info",bordered:!1,loading:!1,outline:!1,closable:!1},s}(c.PureComponent)},78486:(n,s,a)=>{"use strict";var t=a(59312),e=a(24246),p=a(27378),o=a(60042),c=a.n(o),l=a(27036),i=a(20840),r={info:"info-circle",warning:"warning",success:"check-circle",error:"close-circle"},u=(0,p.forwardRef)((function(n,s){var a=n.extraContent,o=n.classItemName,u=n.title,k=n.description,d=n.children,m=n.loading,f=n.type,h=n.closable,g=n.icon,v=n.closeIconColor,y=n.closeContent,x=n.onAlertItemClose,b=(0,p.useRef)(n);b.current=n;var j=(0,p.useMemo)((function(){return d||(0,e.jsxs)(e.Fragment,{children:[u&&(0,e.jsx)("h3",(0,t.pi)({className:"zent-alert-item-content__title","data-zv":"10.0.10"},{children:u}),void 0),k&&(0,e.jsx)("p",(0,t.pi)({className:"zent-alert-item-content__description","data-zv":"10.0.10"},{children:k}),void 0)]},void 0)}),[d,k,u]),w=(0,p.useMemo)((function(){var n=b.current.onClose,s=v?{color:v}:{};return h?(0,e.jsx)("div",(0,t.pi)({className:"zent-alert-item-close-wrapper",onClick:function(s){null==n||n(),x&&x(),s.stopPropagation()},"data-zv":"10.0.10"},{children:null!=y?y:(0,e.jsx)(l.Z,{type:"close",className:"zent-alert-item-close-btn",style:s},void 0)}),void 0):null}),[h,y,v,x]),z=(0,p.useMemo)((function(){return m?(0,e.jsx)(i.Z,{className:"zent-alert-item-icon",loading:!0,icon:"circle",iconSize:16},void 0):null===g||!1===g?null:g?(0,e.jsx)("span",(0,t.pi)({className:"zent-alert-item-custom-icon","data-zv":"10.0.10"},{children:g}),void 0):f in r?(0,e.jsx)(l.Z,{className:"zent-alert-item-icon",type:r[f]},void 0):null}),[m,f,g]);return(0,e.jsxs)("div",(0,t.pi)({className:c()("zent-alert-item",o),ref:s,"data-zv":"10.0.10"},{children:[z,(0,e.jsx)("div",(0,t.pi)({className:"zent-alert-item-content","data-zv":"10.0.10"},{children:j}),void 0),a&&(0,e.jsx)("div",(0,t.pi)({className:"zent-alert-item-extra-content","data-zv":"10.0.10"},{children:a}),void 0),w]}),void 0)}));u.displayName="AlertItem",s.Z=u},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:()=>u});var t=a(59312),e=a(24246),p=a(27378),o=a(60042),c=a.n(o),l=a(65225),i=a(48591),r=a(81093),u=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,e.jsx)(i.Z.Consumer,{children:function(s){return(0,e.jsx)(l.Z.Consumer,{children:function(a){var p,o=n.props,l=o.span,i=o.offset,u=o.order,k=o.className,d=o.style,m=(0,t._T)(o,["span","offset","order","className","style"]),f=d,h=(0,r.r)(s,a.colGutter);if(h>0){var g=h/2;f=(0,t.pi)((0,t.pi)({},f),{paddingLeft:g,paddingRight:g})}var v=(0,r.r)(s,l),y=(0,r.r)(s,i),x=(0,r.r)(s,u),b=c()("zent-col",((p={})["zent-col-offset-"+i]=y,p["zent-col-order-"+u]=x,p),"zent-col-"+v,k);return(0,e.jsx)("div",(0,t.pi)({},m,{className:b,style:f,"data-zv":"10.0.10"},{children:n.props.children}),void 0)}},void 0)}},void 0)},s.defaultProps={offset:0,order:0},s}(p.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:()=>u});var t=a(59312),e=a(24246),p=a(27378),o=a(60042),c=a.n(o),l=a(65225),i=a(48591),r=a(81093),u=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,p=s.style,o=s.justify,u=s.align,k=(0,t._T)(s,["className","style","justify","align"]),d=c()({"zent-row":!0},"zent-row-justify-"+o,"zent-row-align-"+u,a);return(0,e.jsx)(i.Z.Consumer,{children:function(s){return(0,e.jsx)(l.Z.Consumer,{children:function(a){var o=(0,r.r)(s,a.colGutter),c=(0,r.r)(s,a.rowGutter),l=p;if(o>0){var i=-o/2;l=(0,t.pi)((0,t.pi)({},l),{marginLeft:i,marginRight:i})}if(c&&c>0){var u=c/2;l=(0,t.pi)((0,t.pi)({},l),{paddingTop:u,paddingBottom:u})}return(0,e.jsx)("div",(0,t.pi)({},k,{className:d,style:l,"data-zv":"10.0.10"},{children:n.props.children}),void 0)}},void 0)}},void 0)},s.defaultProps={justify:"start",align:"start"},s}(p.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 e=a(72551),p=Object.keys(t).reduce((function(n,s){return n[t[s]]=s,n}),{}),o=Object.keys(p);function c(n,s){if("number"==typeof s)return s;for(var a=0;a<o.length;a++){var t=o[a],c=p[t];if(n[t]){var l=s[c];if(void 0!==l)return l}}return(0,e.n)(s,"fallback")?s.fallback:0}},8434:(n,s,a)=>{"use strict";a.d(s,{E:()=>g});var t=a(59312),e=a(24246),p=a(27378),o=a(60042),c=a.n(o),l=["normal","success","exception"],i=(0,a(70453).Z)("zentAnimatedArcStrokeGradient"),r={},u={WebkitTransition:"none",MozTransition:"none",OTransition:"none",msTransition:"none",transition:"none"},k=function(n){function s(){var s=null!==n&&n.apply(this,arguments)||this;return s.state={opacity:0,rotate:0,transition:r},s.startAnimation=function(){s.animationDelayTimerId&&clearTimeout(s.animationDelayTimerId);var n=s.props,a=n.arcLength,t=n.radius,e=(a-s.getMaskArcLength())/t;s.setState({rotate:e,transition:r,opacity:.2},s.queueAnimationEnd)},s.finishAnimation=function(){s.transitionEndTimerId&&clearTimeout(s.transitionEndTimerId),s.setState({rotate:0,transition:u,opacity:0}),s.animationDelayTimerId=setTimeout(s.startAnimation,1e3)},s.queueAnimationEnd=function(){s.transitionEndTimerId=setTimeout(s.finishAnimation,400)},s}return(0,t.ZT)(s,n),s.prototype.render=function(){var n=this.getPath(),s=this.props,a=s.className,p=s.strokeWidth,o=this.state,c=o.rotate,l=o.transition,r=o.opacity;return(0,e.jsxs)("g",(0,t.pi)({"data-zv":"10.0.10"},{children:[(0,e.jsx)("defs",(0,t.pi)({"data-zv":"10.0.10"},{children:(0,e.jsxs)("linearGradient",(0,t.pi)({id:i},{children:[(0,e.jsx)("stop",{offset:"0%",stopColor:"rgba(255, 255, 255, 0)","data-zv":"10.0.10"},void 0),(0,e.jsx)("stop",{offset:"100%",stopColor:"#fff","data-zv":"10.0.10"},void 0)]}),void 0)}),void 0),(0,e.jsx)("path",{className:a,d:n,stroke:"url(#"+i+")",strokeOpacity:r,strokeWidth:p,style:(0,t.pi)({transform:"rotate("+c+"rad)"},l),"data-zv":"10.0.10"},void 0)]}),void 0)},s.prototype.componentDidMount=function(){this.startAnimation()},s.prototype.componentWillUnmount=function(){clearTimeout(this.animationDelayTimerId),clearTimeout(this.transitionEndTimerId),this.animationDelayTimerId=null,this.transitionEndTimerId=null},s.prototype.getMaskArcLength=function(){return.2*this.props.arcLength},s.prototype.getMaskTheta=function(){var n=this.props.radius;return this.getMaskArcLength()/n},s.prototype.getArcStartPoint=function(){var n=this.props,s=n.radius,a=n.strokeWidth/2;return[s+a,a]},s.prototype.getArcEndPoint=function(){var n=this.props,s=n.radius,a=s+n.strokeWidth/2,t=this.getMaskTheta();return[a+Math.sin(t)*s,a-Math.cos(t)*s]},s.prototype.getPath=function(){var n=this.getArcStartPoint(),s=this.getArcEndPoint(),a=this.props.radius;return"M"+n.join(",")+" A"+a+","+a+" 0 0 1 "+s.join(",")},s}(p.PureComponent),d=a(39215),m=function(n){var s=n.type,a=n.percent,t=n.format,p=n.state,o=n.color;return"success"===p?(0,e.jsx)(d.J,{type:"circle"===s?"check":"check-circle",style:{color:o}},void 0):"exception"===p?(0,e.jsx)(d.J,{type:"circle"===s?"close":"close-circle",style:{color:o}},void 0):(0,e.jsx)(e.Fragment,{children:t(a)},void 0)},f=function(n){var s=n.percent,a=n.showInfo,p=n.format,o=n.strokeWidth,l=n.width,i=n.bgColor,r=n.color,u=n.state,d=n.strokeLinecap,f=l||132,h=f/2,g=f-o,v=g/2,y=g*Math.PI,x=y*(100-s)/100;return(0,e.jsxs)("div",(0,t.pi)({className:"zent-progress-container",style:{width:f,height:f},"data-zv":"10.0.10"},{children:[(0,e.jsx)("div",{className:"zent-progress-wrapper",style:{borderWidth:o,borderColor:i,width:f,height:f},"data-zv":"10.0.10"},void 0),(0,e.jsxs)("svg",(0,t.pi)({className:"zent-progress-inner",viewBox:"0 0 "+f+" "+f,width:f,height:f,"data-zv":"10.0.10"},{children:[(0,e.jsx)("g",(0,t.pi)({transform:"rotate(-90 "+h+" "+h+")","data-zv":"10.0.10"},{children:(0,e.jsx)("circle",{className:c()("zent-progress-inner-path","zent-progress-inner-path--"+d),cx:h,cy:h,r:v,style:{stroke:r,strokeWidth:o},strokeDasharray:y,strokeDashoffset:x,"data-zv":"10.0.10"},void 0)}),void 0),"normal"===u&&(0,e.jsx)(k,{className:c()("zent-progress-path-mask","zent-progress-path-mask--"+d),radius:v,arcLength:y-x,strokeWidth:o},void 0)]}),void 0),a&&(0,e.jsx)("div",(0,t.pi)({className:"zent-progress-info","data-zv":"10.0.10"},{children:(0,e.jsx)(m,{type:"circle",percent:s,format:p,state:u,color:r},void 0)}),void 0)]}),void 0)},h=function(n){var s=n.format,a=n.width,p=n.percent,o=n.showInfo,l=n.strokeWidth,i=n.bgColor,r=n.color,u=n.state,k=n.strokeLinecap,d=a||"100%",f=o&&(0,e.jsx)("div",(0,t.pi)({className:"zent-progress-info","data-zv":"10.0.10"},{children:(0,e.jsx)(m,{type:"line",percent:p,format:s,state:u,color:r},void 0)}),void 0);return(0,e.jsxs)("div",(0,t.pi)({className:"zent-progress-container","data-zv":"10.0.10"},{children:[(0,e.jsx)("div",(0,t.pi)({className:c()("zent-progress-wrapper","zent-progress-wrapper--"+k,{"zent-progress-wrapper--finished":100===p}),style:{background:i,width:d,height:l},"data-zv":"10.0.10"},{children:(0,e.jsx)("div",{className:"zent-progress-inner",style:{background:r,width:p+"%",height:l},"data-zv":"10.0.10"},void 0)}),void 0),f]}),void 0)},g=function(n){var s,a=n,o=a.type,i=a.status,r=a.percent,u=a.className,k=a.normalColor,d=a.successColor,m=a.exceptionColor,g=a.bgColor,v=a.format,y=a.showInfo,x=a.strokeWidth,b=a.width,j=a.strokeLinecap,w=(0,t._T)(a,["type","status","percent","className","normalColor","successColor","exceptionColor","bgColor","format","showInfo","strokeWidth","width","strokeLinecap"]),z=(0,p.useMemo)((function(){return-1!==l.indexOf(i)?i:r>=100?"success":"normal"}),[i,r]),C={exception:m,success:d,normal:k}[z],N=(0,p.useMemo)((function(){return r<0?0:r>100?100:r}),[r]);switch(o){case"circle":s=f;break;case"line":default:s=h}var A=c()("zent-progress","zent-progress-type__"+o,"zent-progress-state__"+z,u);return(0,e.jsx)("div",(0,t.pi)({className:A},w,{"data-zv":"10.0.10"},{children:(0,e.jsx)(s,{percent:N,showInfo:y,strokeWidth:x,width:b,bgColor:g,format:v,color:C,state:z,strokeLinecap:j},void 0)}),void 0)};g.defaultProps={type:"line",percent:0,showInfo:!0,strokeWidth:8,strokeLinecap:"round",format:function(n){return n+"%"}}},25120:(n,s,a)=>{"use strict";a.d(s,{f:()=>i});var t=a(59312),e=a(24246),p=a(27378),o=a(80186),c=a(17127),l={passive:!0},i=function(n){var s=n.disableThrottle,a=void 0!==s&&s,i=n.options,r=n.onScroll,u=(0,p.useRef)(r);u.current=r;var k=(0,p.useCallback)((function(n){u.current(n)}),[]),d=(0,c.BN)(k,a);return(0,p.useEffect)((function(){return d.cancel}),[d]),(0,e.jsx)(o.ZM,{eventName:"scroll",listener:d,options:(0,t.pi)((0,t.pi)({},l),i)},void 0)}}}]);