5183-884bc400bd27cda030e9.js

(self.webpackChunkzent_docs=self.webpackChunkzent_docs||[]).push([[5183],{5183:(n,s,a)=>{"use strict";a.r(s),a.d(s,{default:()=>D});var t=a(73118),p=a(73450),o=a(27378),e=a(57318),c=a(95388),l=a(96681),u=a(8327),i=a(82049),k=a(50993),r=a(37371),d=a(24246);function m(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 g(n){for(var s=1;s<arguments.length;s++){var a=null!=arguments[s]?arguments[s]:{};s%2?m(Object(a),!0).forEach((function(s){(0,p.Z)(n,s,a[s])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(a)):m(Object(a)).forEach((function(s){Object.defineProperty(n,s,Object.getOwnPropertyDescriptor(a,s))}))}return n}var y=function(){var n=[{key:"1",text:"Option 1"},{key:"2",text:"Option 2"},{key:"3",text:"Option 3",disabled:!0},{key:"4",text:"Do you not see the Yellow River come from the sky, Rushing into the sea and never come back?"}];return(0,d.jsxs)("div",{className:"zent-demo-select-basic",children:[(0,d.jsx)(c.P,{options:n,clearable:!0,placeholder:"Select an option.."}),(0,d.jsx)(c.P,{options:[],placeholder:"No Options"}),(0,d.jsx)(c.P,{options:n,disabled:!0,placeholder:"Select an option.."}),(0,d.jsx)(c.P,{options:n,clearable:!0,placeholder:"Select an option..",popupWidth:"360px"}),(0,d.jsx)(c.P,{options:n,placeholder:"Select an option..",width:360})]})},f=function(){var n=[{key:"1",text:"Option 1"},{key:"2",text:"Option 2"},{key:"3",text:"Option 3"}];class s extends o.Component{constructor(...n){super(...n),(0,p.Z)(this,"state",{value:null}),(0,p.Z)(this,"onChange",(n=>{this.setState({value:n})})),(0,p.Z)(this,"reset",(()=>{this.setState({value:null})}))}render(){var s=this.state.value;return(0,d.jsxs)("div",{children:[(0,d.jsxs)("div",{style:{marginBottom:"10px"},children:["External state: ",s?s.text:"null"]}),(0,d.jsx)(c.P,{placeholder:"Select an option..",options:n,onChange:this.onChange,value:s,clearable:!0}),(0,d.jsx)(l.z,{onClick:this.reset,style:{marginTop:"10px"},children:"Reset"})]})}}return(0,d.jsx)(s,{})},h=function(){return(0,d.jsx)(c.P,{options:[{key:"group-1",text:"Group 1",type:"header"},{key:"1",text:"Option 1"},{key:"2",text:"Option 2"},{key:"group-2",text:"Group 2",type:"header"},{key:"3",text:"Option 3"}],placeholder:"Select an option.."})},v=function(){var n=[{key:"1",text:"Option 1"},{key:"2",text:"Option 2"},{key:"3",text:"Option 3"},{key:"4",text:"Option 4"}];function s(){var s=(0,o.useState)([]),a=(0,t.Z)(s,2),p=a[0],e=a[1];return(0,d.jsxs)("div",{className:"zent-demo-select-multiple",children:[(0,d.jsx)(c.P,{multiple:!0,options:n,placeholder:"Select an option..",clearable:!0}),(0,d.jsx)(c.P,{multiple:!0,options:n,placeholder:"Select an option..",value:p,onChange:e,clearable:!0,collapsable:!0,collapseAt:1}),(0,d.jsx)("div",{className:"zent-demo-select-multiple-values",children:p.map(((n,s)=>(0,d.jsx)("span",{children:n.text},s)))})]})}return(0,d.jsx)(s,{})},w=function(){var n=[{key:"group-1",text:"Group 1",type:"header"},{key:"1",text:"Option 1"},{key:"2",text:"Option 2"},{key:"group-2",text:"Group 2",type:"header"},{key:"3",text:"Option 3"}];return(0,d.jsxs)("div",{className:"zent-demo-select-filter",children:[(0,d.jsx)(c.P,{options:n,placeholder:"Built-in filter is enabled by default"}),(0,d.jsx)(c.P,{options:n,placeholder:"Disable built-in filter",filter:!1}),(0,d.jsx)(c.P,{options:n,placeholder:"Customer filter",filter:function(n,s){return new RegExp((a=n,a.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")),"i").test(s.text);var a}})]})},x=function(){var n=[{key:"1",text:"Option 1"},{key:"2",text:"Option 2"},{key:"3",text:"Option 3"},{key:"4",text:"Option 4"},{key:"5",text:"Option 5"},{key:"6",text:"Option 6"},{key:"7",text:"Option 7"},{key:"8",text:"Option 8"},{key:"9",text:"Option 9"}];function s(){var s=(0,o.useState)(n),a=(0,t.Z)(s,2),p=a[0],e=a[1],l=(0,o.useState)(""),i=(0,t.Z)(l,2),k=i[0],r=i[1],m=(0,o.useState)(!1),g=(0,t.Z)(m,2),y=g[0],f=g[1];return(0,o.useEffect)((()=>{f(!0);var s=setTimeout((()=>{e(n.filter((n=>n.text.startsWith(k)))),f(!1)}),1e3);return()=>clearTimeout(s)}),[k]),(0,d.jsx)(c.P,{options:p,keyword:k,onKeywordChange:r,placeholder:"Select an option..",filter:!1,loading:y,renderOptionContent:n=>(0,d.jsx)(u.L,{searchWords:[k],textToHighlight:n.text,autoEscape:!0})})}return(0,d.jsx)(s,{})},b=function(){var n=Array(1e5).fill(null).map(((n,s)=>({key:String(s),text:"Option ".concat(s)})));return(0,d.jsx)(c.P,{options:n,placeholder:"Select an option..",renderOptionList:function(n,s){return(0,d.jsx)(r.t7,{height:256,itemCount:n.length,itemSize:32,width:240,children:({index:a,style:t})=>(0,d.jsx)("div",{style:t,children:s(n[a],a)})})}})},O=function(){var n=[],s=0,a=!0;function p(){return Array(10).fill(null).map((n=>(s++,{key:String(s),text:"Option ".concat(s)})))}function e(){var s=(0,o.useState)(n),e=(0,t.Z)(s,2),l=e[0],u=e[1],r=(0,o.useState)(!0),m=(0,t.Z)(r,2),g=m[0],y=m[1],f=(0,o.useState)(!1),h=(0,t.Z)(f,2),v=h[0],w=h[1];function x(n){setTimeout((()=>{u(l.concat(p())),n&&n()}),2e3)}return(0,d.jsx)(c.P,{options:l,placeholder:"Please Select",loading:g,open:v,onOpenChange:function(n){w(n),n&&a&&(a=!1,y(!0),setTimeout((()=>{u(p()),y(!1)}),1e3))},renderOptionList:function(n,s){return(0,d.jsx)(i.S,{hasMore:!0,skipLoadOnMount:!0,loadMore:x,className:"infinite-scroller-demo",loader:(0,d.jsx)(k.c,{height:32,iconSize:18,loading:!0,colorPreset:"grey",icon:"circle"}),children:n.map(((n,a)=>s(n,a)))})}})}return(0,d.jsx)(e,{})},S=function(){return(0,d.jsx)(c.P,{options:[{key:"1",text:"Option 1"},{key:"2",text:"Option 2",addition:"辅助信息"},{key:"3",text:"Option 3"},{key:"4",text:"Option 4"}],placeholder:"Select an option..",renderOptionContent:function(n){var s=n.addition,a=n.text;return(0,d.jsxs)(d.Fragment,{children:[a,s&&(0,d.jsx)("span",{className:"select-addition-demo",children:s})]})}})},j=function(){var n=[{key:"1",text:"Option 1"},{key:"2",text:"Option 2"},{key:"3",text:"Option 3"},{key:"4",text:"Option 4"}],s=10;function a(){var a=(0,o.useState)(n),p=(0,t.Z)(a,2),e=p[0],l=p[1],u=(0,o.useState)(null),i=(0,t.Z)(u,2),k=i[0],r=i[1],m=o.useCallback((n=>new Promise((a=>{setTimeout((()=>{var t={key:s+=1,text:n};l(e.concat(t)),r(t),a()}),500)}))),[e]);return(0,d.jsx)(c.P,{options:e,clearable:!0,placeholder:"Select an option..",creatable:!0,onCreate:m,value:k,onChange:r})}function p(){var a=(0,o.useState)(n),p=(0,t.Z)(a,2),e=p[0],l=p[1],u=(0,o.useState)([]),i=(0,t.Z)(u,2),k=i[0],r=i[1],m=o.useCallback((n=>new Promise((a=>{setTimeout((()=>{var t={key:s+=1,text:n};l(e.concat(t)),r(k.concat(t)),a()}),500)}))),[k,e]);return(0,d.jsx)(c.P,{options:e,clearable:!0,placeholder:"Select an option..",creatable:!0,onCreate:m,value:k,onChange:r,multiple:!0})}return(0,d.jsxs)("div",{className:"zent-demo-select-creatable",children:[(0,d.jsx)(a,{}),(0,d.jsx)(p,{})]})},C=function(){var n=[{key:"1",text:"Option 1"},{key:"2",text:"Option 2"},{key:"3",text:"Option 3"}];class s extends o.Component{constructor(...s){super(...s),(0,p.Z)(this,"state",{value:c.P.reviveValue("4"),options:n}),(0,p.Z)(this,"onChange",(n=>{this.setState({value:n})})),(0,p.Z)(this,"reset",(()=>{this.setState({value:null})})),(0,p.Z)(this,"loadOptions",(()=>{setTimeout((()=>{this.setState({options:n.concat({key:"4",text:"Option 4"})})}),3e3)}))}render(){var n=this.state,s=n.value,a=n.options;return(0,d.jsxs)("div",{style:{display:"flex"},children:[(0,d.jsx)(c.P,{placeholder:"Select an option..",options:a,onChange:this.onChange,value:s,clearable:!0}),(0,d.jsx)(l.z,{style:{marginLeft:16},onClick:this.loadOptions,children:"Load Options"})]})}}return(0,d.jsx)(s,{})};function T(n){return(0,d.jsx)(n.tag,g(g({},n.attributes),{},{dangerouslySetInnerHTML:{__html:n.html}}))}function N(n){return(0,d.jsx)(T,{tag:"section",html:n.html,attributes:{className:"zandoc-react-markdown"}})}function z(n){return(0,d.jsx)(T,{tag:"style",html:n.style})}function P(n,s){for(;n;)return n.offsetTop&&"static"!==getComputedStyle(n).position&&(s+=n.offsetTop),P(n.parentNode,s);return s}class E extends o.Component{constructor(...n){super(...n),(0,p.Z)(this,"state",{showCode:!1}),(0,p.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,d.jsxs)("div",{className:"zandoc-react-demo",children:[(0,d.jsx)("div",{className:"zandoc-react-demo__preview",children:p}),(0,d.jsxs)("div",{className:"zandoc-react-demo__bottom",onClick:this.toggle,children:[(0,d.jsx)("div",{className:"zandoc-react-demo__title",children:(0,d.jsx)("p",{children:a||""})}),(0,d.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,d.jsx)("pre",{className:"zandoc-react-demo__code",children:(0,d.jsx)(T,{tag:"code",html:t,attributes:{className:"language-jsx"}})})]})}}class D extends o.Component{componentDidMount(){var n=location.hash;if(n){var s=document.querySelector('a[href="'.concat(n,'"]'));s&&(0,e.l)(document.documentElement,0,P(s,-9))}}render(){return o.createElement("div",{className:"zandoc-react-container"},o.createElement(z,{style:".zent-demo-select-basic > * {\n\t\tmargin-bottom: 10px;\n\t}\n\n.zent-demo-select-multiple-values > span:not(:last-child):after {\n\t\tcontent: ', ';\n}\n\n.zent-demo-select-multiple > * {\n\t\t\tmargin-bottom: 10px;\n\t\t}\n\n.zent-demo-select-filter > * {\n\t\tmargin-bottom: 10px;\n\t}\n\n.infinite-scroller-demo {\n\tmax-height: 240px;\n}\n\n.select-addition-demo {\n    color: #c8c9cc;\n    margin-left: 8px;\n\t}\n\n.zent-demo-select-creatable > * {\n\t\t\tmargin-bottom: 10px;\n\t\t}"}),o.createElement(N,{html:'<h2 class="anchor-heading"><a href="#select">¶</a><a href="javascript:void(0)" id="select" class="anchor-point"></a>Select</h2>\n<p>Select is a drop-down selection component with variety functions.</p>\n<h3 class="anchor-heading"><a href="#demos">¶</a><a href="javascript:void(0)" id="demos" class="anchor-point"></a>Demos</h3>'}),o.createElement(E,{title:"Basic Usage",id:"Demo1",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Select</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">const</span> options <span class="token operator">=</span> <span class="token punctuation">[</span>\n  <span class="token punctuation">{</span>\n    key<span class="token operator">:</span> <span class="token string">\'1\'</span><span class="token punctuation">,</span>\n    text<span class="token operator">:</span> <span class="token string">\'Option 1\'</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    key<span class="token operator">:</span> <span class="token string">\'2\'</span><span class="token punctuation">,</span>\n    text<span class="token operator">:</span> <span class="token string">\'Option 2\'</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    key<span class="token operator">:</span> <span class="token string">\'3\'</span><span class="token punctuation">,</span>\n    text<span class="token operator">:</span> <span class="token string">\'Option 3\'</span><span class="token punctuation">,</span>\n    disabled<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n    <span class="token punctuation">{</span>\n    key<span class="token operator">:</span> <span class="token string">\'4\'</span><span class="token punctuation">,</span>\n    text<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Do you not see the Yellow River come from the sky, Rushing into the sea and never come back?</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>\n  <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 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">&lt;</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>zent-demo-select-basic<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">&lt;</span><span class="token class-name">Select</span></span> <span class="token attr-name">options</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>options<span class="token punctuation">}</span></span> <span class="token attr-name">clearable</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option..<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">&lt;</span><span class="token class-name">Select</span></span> <span class="token attr-name">options</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 punctuation">}</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>No Options<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">&lt;</span><span class="token class-name">Select</span></span> <span class="token attr-name">options</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>options<span class="token punctuation">}</span></span> <span class="token attr-name">disabled</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option..<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">&lt;</span><span class="token class-name">Select</span></span> <span class="token attr-name">options</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>options<span class="token punctuation">}</span></span> <span class="token attr-name">clearable</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option..<span class="token punctuation">"</span></span> <span class="token attr-name">popupWidth</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>360px<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">&lt;</span><span class="token class-name">Select</span></span> <span class="token attr-name">options</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>options<span class="token punctuation">}</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option..<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">360</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">&lt;/</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>'},o.createElement(y)),o.createElement(E,{title:"Controlled Mode",id:"Demo2",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Select</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 keyword">const</span> options <span class="token operator">=</span> <span class="token punctuation">[</span>\n  <span class="token punctuation">{</span> key<span class="token operator">:</span> <span class="token string">\'1\'</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Option 1\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span> key<span class="token operator">:</span> <span class="token string">\'2\'</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Option 2\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span> key<span class="token operator">:</span> <span class="token string">\'3\'</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Option 3\'</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 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  state <span class="token operator">=</span> <span class="token punctuation">{</span>\n    value<span class="token operator">:</span> <span class="token keyword null nil">null</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">onChange</span> <span class="token operator">=</span> <span class="token parameter">value</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>\n      value<span class="token punctuation">,</span>\n    <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-variable function">reset</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>\n      value<span class="token operator">:</span> <span class="token keyword null nil">null</span><span class="token punctuation">,</span>\n    <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">const</span> <span class="token punctuation">{</span> value <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</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">&lt;</span>div</span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</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> marginBottom<span class="token operator">:</span> <span class="token string">\'10px\'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n          <span class="token maybe-class-name">External</span> state<span class="token operator">:</span> <span class="token punctuation">{</span>value <span class="token operator">?</span> value<span class="token punctuation">.</span><span class="token property-access">text</span> <span class="token operator">:</span> <span class="token string">\'null\'</span><span class="token punctuation">}</span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Select</span></span>\n          <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option..<span class="token punctuation">"</span></span>\n          <span class="token attr-name">options</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>options<span class="token punctuation">}</span></span>\n          <span class="token attr-name">onChange</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">onChange</span><span class="token punctuation">}</span></span>\n          <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>value<span class="token punctuation">}</span></span>\n          <span class="token attr-name">clearable</span>\n        <span class="token punctuation">/></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span> <span class="token attr-name">onClick</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">reset</span><span class="token punctuation">}</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> marginTop<span class="token operator">:</span> <span class="token string">\'10px\'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Reset</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</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">&lt;/</span>div</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">&lt;</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>'},o.createElement(f)),o.createElement(E,{title:"Groups",id:"Demo3",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Select</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">const</span> options <span class="token operator">=</span> <span class="token punctuation">[</span>\n  <span class="token punctuation">{</span>\n    key<span class="token operator">:</span> <span class="token string">\'group-1\'</span><span class="token punctuation">,</span>\n    text<span class="token operator">:</span> <span class="token string">\'Group 1\'</span><span class="token punctuation">,</span>\n    type<span class="token operator">:</span> <span class="token string">\'header\'</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    key<span class="token operator">:</span> <span class="token string">\'1\'</span><span class="token punctuation">,</span>\n    text<span class="token operator">:</span> <span class="token string">\'Option 1\'</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    key<span class="token operator">:</span> <span class="token string">\'2\'</span><span class="token punctuation">,</span>\n    text<span class="token operator">:</span> <span class="token string">\'Option 2\'</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    key<span class="token operator">:</span> <span class="token string">\'group-2\'</span><span class="token punctuation">,</span>\n    text<span class="token operator">:</span> <span class="token string">\'Group 2\'</span><span class="token punctuation">,</span>\n    type<span class="token operator">:</span> <span class="token string">\'header\'</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    key<span class="token operator">:</span> <span class="token string">\'3\'</span><span class="token punctuation">,</span>\n    text<span class="token operator">:</span> <span class="token string">\'Option 3\'</span><span class="token punctuation">,</span>\n  <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 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">&lt;</span><span class="token class-name">Select</span></span> <span class="token attr-name">options</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>options<span class="token punctuation">}</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option..<span class="token punctuation">"</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>'},o.createElement(h)),o.createElement(E,{title:"Multiple",id:"Demo4",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> useState <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'react\'</span><span class="token punctuation">;</span>\n<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Select</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">const</span> options <span class="token operator">=</span> <span class="token punctuation">[</span>\n  <span class="token punctuation">{</span>\n    key<span class="token operator">:</span> <span class="token string">\'1\'</span><span class="token punctuation">,</span>\n    text<span class="token operator">:</span> <span class="token string">\'Option 1\'</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    key<span class="token operator">:</span> <span class="token string">\'2\'</span><span class="token punctuation">,</span>\n    text<span class="token operator">:</span> <span class="token string">\'Option 2\'</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    key<span class="token operator">:</span> <span class="token string">\'3\'</span><span class="token punctuation">,</span>\n    text<span class="token operator">:</span> <span class="token string">\'Option 3\'</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    key<span class="token operator">:</span> <span class="token string">\'4\'</span><span class="token punctuation">,</span>\n    text<span class="token operator">:</span> <span class="token string">\'Option 4\'</span><span class="token punctuation">,</span>\n  <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 keyword">function</span> <span class="token function"><span class="token maybe-class-name">Multiple</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  <span class="token keyword">const</span> <span class="token punctuation">[</span>value<span class="token punctuation">,</span> onChange<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token punctuation">[</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">&lt;</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>zent-demo-select-multiple<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">&lt;</span><span class="token class-name">Select</span></span>\n        <span class="token attr-name">multiple</span>\n        <span class="token attr-name">options</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>options<span class="token punctuation">}</span></span>\n        <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option..<span class="token punctuation">"</span></span>\n        <span class="token attr-name">clearable</span>\n      <span class="token punctuation">/></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Select</span></span>\n        <span class="token attr-name">multiple</span>\n        <span class="token attr-name">options</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>options<span class="token punctuation">}</span></span>\n        <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option..<span class="token punctuation">"</span></span>\n        <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>value<span class="token punctuation">}</span></span>\n        <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>onChange<span class="token punctuation">}</span></span>\n        <span class="token attr-name">clearable</span>\n        <span class="token attr-name">collapsable</span>\n        <span class="token attr-name">collapseAt</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">1</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">&lt;</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>zent-demo-select-multiple-values<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n        <span class="token punctuation">{</span>value<span class="token punctuation">.</span><span class="token method function property-access">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">it<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>index<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>it<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">&lt;/</span>span</span><span class="token punctuation">></span></span>\n        <span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</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\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">&lt;</span><span class="token class-name">Multiple</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},o.createElement(v)),o.createElement(E,{title:"Filter",id:"Demo5",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Select</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">const</span> options <span class="token operator">=</span> <span class="token punctuation">[</span>\n  <span class="token punctuation">{</span>\n    key<span class="token operator">:</span> <span class="token string">\'group-1\'</span><span class="token punctuation">,</span>\n    text<span class="token operator">:</span> <span class="token string">\'Group 1\'</span><span class="token punctuation">,</span>\n    type<span class="token operator">:</span> <span class="token string">\'header\'</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    key<span class="token operator">:</span> <span class="token string">\'1\'</span><span class="token punctuation">,</span>\n    text<span class="token operator">:</span> <span class="token string">\'Option 1\'</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    key<span class="token operator">:</span> <span class="token string">\'2\'</span><span class="token punctuation">,</span>\n    text<span class="token operator">:</span> <span class="token string">\'Option 2\'</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    key<span class="token operator">:</span> <span class="token string">\'group-2\'</span><span class="token punctuation">,</span>\n    text<span class="token operator">:</span> <span class="token string">\'Group 2\'</span><span class="token punctuation">,</span>\n    type<span class="token operator">:</span> <span class="token string">\'header\'</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    key<span class="token operator">:</span> <span class="token string">\'3\'</span><span class="token punctuation">,</span>\n    text<span class="token operator">:</span> <span class="token string">\'Option 3\'</span><span class="token punctuation">,</span>\n  <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 keyword">function</span> <span class="token function">escapeRegExp</span><span class="token punctuation">(</span><span class="token parameter">string</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  <span class="token comment">// $&amp; means the whole matched string</span>\n  <span class="token keyword control-flow">return</span> string<span class="token punctuation">.</span><span class="token method function property-access">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex"><span class="token charset"><span class="token charset-punctuation punctuation">[</span>.*+?^${}()|[<span class="token special-escape escape">\\]</span><span class="token special-escape escape">\\\\</span><span class="token charset-punctuation punctuation">]</span></span></span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">,</span> <span class="token string">\'\\\\$&amp;\'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n\n<span class="token keyword">function</span> <span class="token function">customerFilter</span><span class="token punctuation">(</span><span class="token parameter">keyword<span class="token punctuation">,</span> option</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  <span class="token keyword control-flow">return</span> <span class="token keyword">new</span> <span class="token class-name">RegExp</span><span class="token punctuation">(</span><span class="token function">escapeRegExp</span><span class="token punctuation">(</span>keyword<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token string">\'i\'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">test</span><span class="token punctuation">(</span>option<span class="token punctuation">.</span><span class="token property-access">text</span><span class="token punctuation">)</span><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>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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>zent-demo-select-filter<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">&lt;</span><span class="token class-name">Select</span></span> <span class="token attr-name">options</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>options<span class="token punctuation">}</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Built-in filter is enabled by default<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">&lt;</span><span class="token class-name">Select</span></span> <span class="token attr-name">options</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>options<span class="token punctuation">}</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Disable built-in filter<span class="token punctuation">"</span></span> <span class="token attr-name">filter</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token boolean">false</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">&lt;</span><span class="token class-name">Select</span></span>\n      <span class="token attr-name">options</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>options<span class="token punctuation">}</span></span>\n      <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Customer filter<span class="token punctuation">"</span></span>\n      <span class="token attr-name">filter</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>customerFilter<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">&lt;/</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>'},o.createElement(w)),o.createElement(E,{title:"Custom Search",id:"Demo6",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> useState<span class="token punctuation">,</span> useEffect <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'react\'</span><span class="token punctuation">;</span>\n<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Select</span><span class="token punctuation">,</span> <span class="token maybe-class-name">TextMark</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">const</span> <span class="token constant">OPTIONS</span> <span class="token operator">=</span> <span class="token punctuation">[</span>\n  <span class="token punctuation">{</span>\n    key<span class="token operator">:</span> <span class="token string">\'1\'</span><span class="token punctuation">,</span>\n    text<span class="token operator">:</span> <span class="token string">\'Option 1\'</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    key<span class="token operator">:</span> <span class="token string">\'2\'</span><span class="token punctuation">,</span>\n    text<span class="token operator">:</span> <span class="token string">\'Option 2\'</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    key<span class="token operator">:</span> <span class="token string">\'3\'</span><span class="token punctuation">,</span>\n    text<span class="token operator">:</span> <span class="token string">\'Option 3\'</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    key<span class="token operator">:</span> <span class="token string">\'4\'</span><span class="token punctuation">,</span>\n    text<span class="token operator">:</span> <span class="token string">\'Option 4\'</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    key<span class="token operator">:</span> <span class="token string">\'5\'</span><span class="token punctuation">,</span>\n    text<span class="token operator">:</span> <span class="token string">\'Option 5\'</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    key<span class="token operator">:</span> <span class="token string">\'6\'</span><span class="token punctuation">,</span>\n    text<span class="token operator">:</span> <span class="token string">\'Option 6\'</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    key<span class="token operator">:</span> <span class="token string">\'7\'</span><span class="token punctuation">,</span>\n    text<span class="token operator">:</span> <span class="token string">\'Option 7\'</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    key<span class="token operator">:</span> <span class="token string">\'8\'</span><span class="token punctuation">,</span>\n    text<span class="token operator">:</span> <span class="token string">\'Option 8\'</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    key<span class="token operator">:</span> <span class="token string">\'9\'</span><span class="token punctuation">,</span>\n    text<span class="token operator">:</span> <span class="token string">\'Option 9\'</span><span class="token punctuation">,</span>\n  <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 keyword">function</span> <span class="token function"><span class="token maybe-class-name">CustomSearch</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  <span class="token keyword">const</span> <span class="token punctuation">[</span>options<span class="token punctuation">,</span> setOptions<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token constant">OPTIONS</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token keyword">const</span> <span class="token punctuation">[</span>keyword<span class="token punctuation">,</span> onKeywordChange<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token string">\'\'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token keyword">const</span> <span class="token punctuation">[</span>loading<span class="token punctuation">,</span> setLoading<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token function">useEffect</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 punctuation">{</span>\n    <span class="token function">setLoading</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token keyword">const</span> timeout <span class="token operator">=</span> <span class="token function">setTimeout</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 punctuation">{</span>\n      <span class="token function">setOptions</span><span class="token punctuation">(</span><span class="token constant">OPTIONS</span><span class="token punctuation">.</span><span class="token method function property-access">filter</span><span class="token punctuation">(</span><span class="token parameter">it</span> <span class="token arrow operator">=></span> it<span class="token punctuation">.</span><span class="token property-access">text</span><span class="token punctuation">.</span><span class="token method function property-access">startsWith</span><span class="token punctuation">(</span>keyword<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n      <span class="token function">setLoading</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</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><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">clearTimeout</span><span class="token punctuation">(</span>timeout<span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">[</span>keyword<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">&lt;</span><span class="token class-name">Select</span></span>\n      <span class="token attr-name">options</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>options<span class="token punctuation">}</span></span>\n      <span class="token attr-name">keyword</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>keyword<span class="token punctuation">}</span></span>\n      <span class="token attr-name">onKeywordChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>onKeywordChange<span class="token punctuation">}</span></span>\n      <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option..<span class="token punctuation">"</span></span>\n      <span class="token attr-name">filter</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span></span>\n      <span class="token attr-name">loading</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>loading<span class="token punctuation">}</span></span>\n      <span class="token attr-name">renderOptionContent</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token parameter">it</span> <span class="token arrow operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">TextMark</span></span> <span class="token attr-name">searchWords</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>keyword<span class="token punctuation">]</span><span class="token punctuation">}</span></span> <span class="token attr-name">textToHighlight</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>it<span class="token punctuation">.</span><span class="token property-access">text</span><span class="token punctuation">}</span></span> <span class="token attr-name">autoEscape</span> <span class="token punctuation">/></span></span><span class="token punctuation">}</span></span>\n    <span class="token punctuation">/></span></span>\n  <span class="token punctuation">)</span><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">&lt;</span><span class="token class-name">CustomSearch</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},o.createElement(x)),o.createElement(E,{title:"Tons of options",id:"Demo7",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Select</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<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">FixedSizeList</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'react-window\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token constant">OPTIONS</span> <span class="token operator">=</span> <span class="token known-class-name class-name">Array</span><span class="token punctuation">(</span><span class="token number">100000</span><span class="token punctuation">)</span>\n  <span class="token punctuation">.</span><span class="token method function property-access">fill</span><span class="token punctuation">(</span><span class="token keyword null nil">null</span><span class="token punctuation">)</span>\n  <span class="token punctuation">.</span><span class="token method function property-access">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">_<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>\n    key<span class="token operator">:</span> <span class="token known-class-name class-name">String</span><span class="token punctuation">(</span>index<span class="token punctuation">)</span><span class="token punctuation">,</span>\n    text<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Option </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>index<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n<span class="token keyword">function</span> <span class="token function">renderOptionList</span><span class="token punctuation">(</span><span class="token parameter">options<span class="token punctuation">,</span> renderOption</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">&lt;</span><span class="token class-name">FixedSizeList</span></span>\n      <span class="token attr-name">height</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 operator">*</span> <span class="token number">32</span><span class="token punctuation">}</span></span>\n      <span class="token attr-name">itemCount</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>options<span class="token punctuation">.</span><span class="token property-access">length</span><span class="token punctuation">}</span></span>\n      <span class="token attr-name">itemSize</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">32</span><span class="token punctuation">}</span></span>\n      <span class="token attr-name">width</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">240</span><span class="token punctuation">}</span></span>\n    <span class="token punctuation">></span></span>\n      <span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> index<span class="token punctuation">,</span> style <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</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>style<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span><span class="token function">renderOption</span><span class="token punctuation">(</span>options<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">,</span> index<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n      <span class="token punctuation">)</span><span class="token punctuation">}</span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">FixedSizeList</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\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">&lt;</span><span class="token class-name">Select</span></span> <span class="token attr-name">options</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token constant">OPTIONS</span><span class="token punctuation">}</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option..<span class="token punctuation">"</span></span> <span class="token attr-name">renderOptionList</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>renderOptionList<span class="token punctuation">}</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>'},o.createElement(b)),o.createElement(E,{title:"Scroll Loading",id:"Demo8",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> useState<span class="token punctuation">,</span> useEffect <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'react\'</span><span class="token punctuation">;</span>\n<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Select</span><span class="token punctuation">,</span> <span class="token maybe-class-name">InfiniteScroller</span><span class="token punctuation">,</span> <span class="token maybe-class-name">BlockLoading</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">const</span> <span class="token constant">OPTIONS</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>\n<span class="token keyword">let</span> optionIndex <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>\n<span class="token keyword">let</span> firstOpen <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>\n\n<span class="token keyword">function</span> <span class="token function">loadOptions</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 known-class-name class-name">Array</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">fill</span><span class="token punctuation">(</span><span class="token keyword null nil">null</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">map</span><span class="token punctuation">(</span><span class="token parameter">_</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n      optionIndex<span class="token operator">++</span><span class="token punctuation">;</span>\n\n      <span class="token keyword control-flow">return</span> <span class="token punctuation">{</span>\n        key<span class="token operator">:</span> <span class="token known-class-name class-name">String</span><span class="token punctuation">(</span>optionIndex<span class="token punctuation">)</span><span class="token punctuation">,</span>\n        text<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Option </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>optionIndex<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>\n      <span class="token punctuation">}</span>\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n\n<span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">CustomerSearch</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  <span class="token keyword">const</span> <span class="token punctuation">[</span>options<span class="token punctuation">,</span> setOptions<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token constant">OPTIONS</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token keyword">const</span> <span class="token punctuation">[</span>loading<span class="token punctuation">,</span> setLoading<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token keyword">const</span> <span class="token punctuation">[</span>open<span class="token punctuation">,</span> onOpenChange<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n  <span class="token comment">// 处理浮层打开</span>\n  <span class="token keyword">function</span> <span class="token function">handleOpenChange</span><span class="token punctuation">(</span><span class="token parameter">isOpen</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token function">onOpenChange</span><span class="token punctuation">(</span>isOpen<span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n    <span class="token comment">// 首次打开浮层加载数据</span>\n    <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>isOpen <span class="token operator">&amp;&amp;</span> firstOpen<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n      firstOpen <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>\n\n      <span class="token function">setLoading</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n      <span class="token function">setTimeout</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 punctuation">{</span>\n        <span class="token function">setOptions</span><span class="token punctuation">(</span><span class="token function">loadOptions</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n        <span class="token function">setLoading</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n      <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><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 comment">// 滚动加载</span>\n  <span class="token keyword">function</span> <span class="token function">loadMore</span><span class="token punctuation">(</span><span class="token parameter">closeLoading</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token function">setTimeout</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 punctuation">{</span>\n      <span class="token function">setOptions</span><span class="token punctuation">(</span>options<span class="token punctuation">.</span><span class="token method function property-access">concat</span><span class="token punctuation">(</span><span class="token function">loadOptions</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n      closeLoading <span class="token operator">&amp;&amp;</span> <span class="token function">closeLoading</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> <span class="token number">2000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n\n  <span class="token keyword">function</span> <span class="token function">renderOptionList</span><span class="token punctuation">(</span><span class="token parameter">optionList<span class="token punctuation">,</span> renderOption</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">&lt;</span><span class="token class-name">InfiniteScroller</span></span>\n        <span class="token attr-name">hasMore</span>\n        <span class="token attr-name">skipLoadOnMount</span>\n        <span class="token attr-name">loadMore</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>loadMore<span class="token punctuation">}</span></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>infinite-scroller-demo<span class="token punctuation">"</span></span>\n        <span class="token attr-name">loader</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">BlockLoading</span></span>\n            <span class="token attr-name">height</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">32</span><span class="token punctuation">}</span></span>\n            <span class="token attr-name">iconSize</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">18</span><span class="token punctuation">}</span></span>\n            <span class="token attr-name">loading</span>\n            <span class="token attr-name">colorPreset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>grey<span class="token punctuation">"</span></span>\n            <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>circle<span class="token punctuation">"</span></span>\n          <span class="token punctuation">/></span></span>\n        <span class="token punctuation">)</span><span class="token punctuation">}</span></span>\n      <span class="token punctuation">></span></span>\n        <span class="token punctuation">{</span>optionList<span class="token punctuation">.</span><span class="token method function property-access">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">renderOption</span><span class="token punctuation">(</span>item<span class="token punctuation">,</span> index<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">InfiniteScroller</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\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">&lt;</span><span class="token class-name">Select</span></span>\n      <span class="token attr-name">options</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>options<span class="token punctuation">}</span></span>\n      <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Please Select<span class="token punctuation">"</span></span>\n      <span class="token attr-name">loading</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>loading<span class="token punctuation">}</span></span>\n      <span class="token attr-name">open</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>open<span class="token punctuation">}</span></span>\n      <span class="token attr-name">onOpenChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>handleOpenChange<span class="token punctuation">}</span></span>\n      <span class="token attr-name">renderOptionList</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>renderOptionList<span class="token punctuation">}</span></span>\n    <span class="token punctuation">/></span></span>\n  <span class="token punctuation">)</span><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">&lt;</span><span class="token class-name">CustomerSearch</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},o.createElement(O)),o.createElement(E,{title:"Basic Usage",id:"Demo9",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Select</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">const</span> options <span class="token operator">=</span> <span class="token punctuation">[</span>\n  <span class="token punctuation">{</span>\n    key<span class="token operator">:</span> <span class="token string">\'1\'</span><span class="token punctuation">,</span>\n    text<span class="token operator">:</span> <span class="token string">\'Option 1\'</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    key<span class="token operator">:</span> <span class="token string">\'2\'</span><span class="token punctuation">,</span>\n    text<span class="token operator">:</span> <span class="token string">\'Option 2\'</span><span class="token punctuation">,</span>\n    addition<span class="token operator">:</span> <span class="token string">\'辅助信息\'</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    key<span class="token operator">:</span> <span class="token string">\'3\'</span><span class="token punctuation">,</span>\n    text<span class="token operator">:</span> <span class="token string">\'Option 3\'</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n    <span class="token punctuation">{</span>\n    key<span class="token operator">:</span> <span class="token string">\'4\'</span><span class="token punctuation">,</span>\n    text<span class="token operator">:</span> <span class="token string">\'Option 4\'</span><span class="token punctuation">,</span>\n  <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 keyword">function</span> <span class="token function">renderOptionContent</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  <span class="token keyword">const</span> <span class="token punctuation">{</span> addition<span class="token punctuation">,</span> text <span class="token punctuation">}</span> <span class="token operator">=</span> item<span class="token punctuation">;</span>\n  <span class="token keyword control-flow">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>text<span class="token punctuation">}</span><span class="token punctuation">{</span>addition <span class="token operator">&amp;&amp;</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</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>select-addition-demo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>addition<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">></span></span><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>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Select</span></span> <span class="token attr-name">options</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>options<span class="token punctuation">}</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option..<span class="token punctuation">"</span></span> <span class="token attr-name">renderOptionContent</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>renderOptionContent<span class="token punctuation">}</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>'},o.createElement(S)),o.createElement(E,{title:"Creatable",id:"Demo10",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Select</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">const</span> <span class="token constant">OPTIONS</span> <span class="token operator">=</span> <span class="token punctuation">[</span>\n  <span class="token punctuation">{</span>\n    key<span class="token operator">:</span> <span class="token string">\'1\'</span><span class="token punctuation">,</span>\n    text<span class="token operator">:</span> <span class="token string">\'Option 1\'</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    key<span class="token operator">:</span> <span class="token string">\'2\'</span><span class="token punctuation">,</span>\n    text<span class="token operator">:</span> <span class="token string">\'Option 2\'</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    key<span class="token operator">:</span> <span class="token string">\'3\'</span><span class="token punctuation">,</span>\n    text<span class="token operator">:</span> <span class="token string">\'Option 3\'</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n    <span class="token punctuation">{</span>\n    key<span class="token operator">:</span> <span class="token string">\'4\'</span><span class="token punctuation">,</span>\n    text<span class="token operator">:</span> <span class="token string">\'Option 4\'</span><span class="token punctuation">,</span>\n  <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 keyword">let</span> optionId <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">;</span>\n\n<span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">SingleCreatableSelect</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  <span class="token keyword">const</span> <span class="token punctuation">[</span>options<span class="token punctuation">,</span> setOptions<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token constant">OPTIONS</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token keyword">const</span> <span class="token punctuation">[</span>value<span class="token punctuation">,</span> onChange<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token keyword null nil">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n  <span class="token keyword">const</span> onCreate <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">useCallback</span><span class="token punctuation">(</span><span class="token parameter">text</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword control-flow">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token parameter">resolve</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n      <span class="token function">setTimeout</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 punctuation">{</span>\n        optionId <span class="token operator">+=</span> <span class="token number">1</span><span class="token punctuation">;</span>\n\n        <span class="token keyword">const</span> newOption <span class="token operator">=</span> <span class="token punctuation">{</span>\n          key<span class="token operator">:</span> optionId<span class="token punctuation">,</span>\n          text<span class="token punctuation">,</span>\n        <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n        <span class="token function">setOptions</span><span class="token punctuation">(</span>options<span class="token punctuation">.</span><span class="token method function property-access">concat</span><span class="token punctuation">(</span>newOption<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n        <span class="token function">onChange</span><span class="token punctuation">(</span>newOption<span class="token punctuation">)</span><span class="token punctuation">;</span>\n        <span class="token function">resolve</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> <span class="token number">500</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <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> <span class="token punctuation">[</span>options<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\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">&lt;</span><span class="token class-name">Select</span></span>\n      <span class="token attr-name">options</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>options<span class="token punctuation">}</span></span>\n      <span class="token attr-name">clearable</span>\n      <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option..<span class="token punctuation">"</span></span>\n      <span class="token attr-name">creatable</span>\n      <span class="token attr-name">onCreate</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>onCreate<span class="token punctuation">}</span></span>\n      <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>value<span class="token punctuation">}</span></span>\n      <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>onChange<span class="token punctuation">}</span></span>\n    <span class="token punctuation">/></span></span>\n  <span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n\n<span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">MultiCreatableSelect</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  <span class="token keyword">const</span> <span class="token punctuation">[</span>options<span class="token punctuation">,</span> setOptions<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token constant">OPTIONS</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token keyword">const</span> <span class="token punctuation">[</span>value<span class="token punctuation">,</span> onChange<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n  <span class="token keyword">const</span> onCreate <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">useCallback</span><span class="token punctuation">(</span><span class="token parameter">text</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword control-flow">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token parameter">resolve</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n      <span class="token function">setTimeout</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 punctuation">{</span>\n        optionId <span class="token operator">+=</span> <span class="token number">1</span><span class="token punctuation">;</span>\n\n        <span class="token keyword">const</span> newOption <span class="token operator">=</span> <span class="token punctuation">{</span>\n          key<span class="token operator">:</span> optionId<span class="token punctuation">,</span>\n          text<span class="token punctuation">,</span>\n        <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n        <span class="token function">setOptions</span><span class="token punctuation">(</span>options<span class="token punctuation">.</span><span class="token method function property-access">concat</span><span class="token punctuation">(</span>newOption<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n        <span class="token function">onChange</span><span class="token punctuation">(</span>value<span class="token punctuation">.</span><span class="token method function property-access">concat</span><span class="token punctuation">(</span>newOption<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n        <span class="token function">resolve</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> <span class="token number">500</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <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> <span class="token punctuation">[</span>value<span class="token punctuation">,</span> options<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\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">&lt;</span><span class="token class-name">Select</span></span>\n      <span class="token attr-name">options</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>options<span class="token punctuation">}</span></span>\n      <span class="token attr-name">clearable</span>\n      <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option..<span class="token punctuation">"</span></span>\n      <span class="token attr-name">creatable</span>\n      <span class="token attr-name">onCreate</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>onCreate<span class="token punctuation">}</span></span>\n      <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>value<span class="token punctuation">}</span></span>\n      <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>onChange<span class="token punctuation">}</span></span>\n      <span class="token attr-name">multiple</span>\n    <span class="token punctuation">/></span></span>\n  <span class="token punctuation">)</span><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 punctuation">(</span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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>zent-demo-select-creatable<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">&lt;</span><span class="token class-name">SingleCreatableSelect</span></span> <span class="token punctuation">/></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MultiCreatableSelect</span></span> <span class="token punctuation">/></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n<span class="token punctuation">)</span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},o.createElement(j)),o.createElement(E,{title:"Initialize Value in Controlled Mode",id:"Demo11",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Select</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 keyword">const</span> options <span class="token operator">=</span> <span class="token punctuation">[</span>\n  <span class="token punctuation">{</span> key<span class="token operator">:</span> <span class="token string">\'1\'</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Option 1\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span> key<span class="token operator">:</span> <span class="token string">\'2\'</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Option 2\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span> key<span class="token operator">:</span> <span class="token string">\'3\'</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Option 3\'</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 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  state <span class="token operator">=</span> <span class="token punctuation">{</span>\n    value<span class="token operator">:</span> <span class="token maybe-class-name">Select</span><span class="token punctuation">.</span><span class="token method function property-access">reviveValue</span><span class="token punctuation">(</span><span class="token string">\'4\'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n    options<span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n  <span class="token function-variable function">onChange</span> <span class="token operator">=</span> <span class="token parameter">value</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>\n      value<span class="token punctuation">,</span>\n    <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-variable function">reset</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>\n      value<span class="token operator">:</span> <span class="token keyword null nil">null</span><span class="token punctuation">,</span>\n    <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-variable function">loadOptions</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 function">setTimeout</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 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>\n        options<span class="token operator">:</span> options<span class="token punctuation">.</span><span class="token method function property-access">concat</span><span class="token punctuation">(</span><span class="token punctuation">{</span> key<span class="token operator">:</span> <span class="token string">\'4\'</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Option 4\'</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><span class="token punctuation">;</span>\n    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">3000</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">const</span> <span class="token punctuation">{</span> value<span class="token punctuation">,</span> options <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</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">&lt;</span>div</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> display<span class="token operator">:</span> <span class="token string">\'flex\'</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">&lt;</span><span class="token class-name">Select</span></span>\n          <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option..<span class="token punctuation">"</span></span>\n          <span class="token attr-name">options</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>options<span class="token punctuation">}</span></span>\n          <span class="token attr-name">onChange</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">onChange</span><span class="token punctuation">}</span></span>\n          <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>value<span class="token punctuation">}</span></span>\n          <span class="token attr-name">clearable</span>\n        <span class="token punctuation">/></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</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> marginLeft<span class="token operator">:</span> <span class="token number">16</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token attr-name">onClick</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">loadOptions</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n          <span class="token maybe-class-name">Load</span> <span class="token maybe-class-name">Options</span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</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">&lt;/</span>div</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">&lt;</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>'},o.createElement(C)),o.createElement(N,{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>Props</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default</th>\n<th>Required</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>options</td>\n<td>Option data</td>\n<td>array</td>\n<td><code>[]</code></td>\n<td>yes</td>\n</tr>\n<tr>\n<td>value</td>\n<td>Selected value, when tags type, can be passed into the array</td>\n<td>any</td>\n<td><code>null</code></td>\n<td>no</td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>Disable switch</td>\n<td>bool</td>\n<td><code>false</code></td>\n<td>no</td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>The default prompt text</td>\n<td>string</td>\n<td><code>\'please choose\'</code></td>\n<td>no</td>\n</tr>\n<tr>\n<td>notFoundContent</td>\n<td>Empty list prompt text</td>\n<td>string</td>\n<td><code>\'No matches found\'</code></td>\n<td>no</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>Select changed callback</td>\n<td>function</td>\n<td><code>noop</code></td>\n<td>no</td>\n</tr>\n<tr>\n<td>filter</td>\n<td>Filter conditions, set to open the filter function</td>\n<td>function</td>\n<td><code>false</code></td>\n<td>no</td>\n</tr>\n<tr>\n<td>highlight</td>\n<td>Highlight filterd options</td>\n<td>function</td>\n<td><code>noop</code></td>\n<td>no</td>\n</tr>\n<tr>\n<td>className</td>\n<td>Optional, custom trigger additional classname</td>\n<td>string</td>\n<td><code>\'\'</code></td>\n<td>no</td>\n</tr>\n<tr>\n<td>width</td>\n<td>input-box\'s width</td>\n<td><code>string</code>\n \n|\n \n<code>number</code></td>\n<td><code>\'\'</code></td>\n<td>no</td>\n</tr>\n<tr>\n<td>popupWidth</td>\n<td>pupup\'s width</td>\n<td><code>string</code>\n \n|\n \n<code>number</code></td>\n<td>Same as trigger width</td>\n<td>no</td>\n</tr>\n<tr>\n<td>multiple</td>\n<td>Support multiple selected options</td>\n<td>bool</td>\n<td><code>false</code></td>\n<td>no</td>\n</tr>\n<tr>\n<td>collapsable</td>\n<td>Support collapsed tags in multiple mode</td>\n<td>bool</td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td><code>false</code></td>\n<td>no</td>\n<td></td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>hideCollapsePop</td>\n<td>Hide tags content pop in collapsed mode</td>\n<td>bool</td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td><code>false</code></td>\n<td>no</td>\n<td></td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>collapseAt</td>\n<td>Dispaly tags count in collapsed mode</td>\n<td>number</td>\n<td><code>1</code></td>\n<td>no</td>\n</tr>\n<tr>\n<td>clearable</td>\n<td>Is the select value clearable</td>\n<td>bool</td>\n<td><code>false</code></td>\n<td>no</td>\n</tr>\n<tr>\n<td>loading</td>\n<td>Is the select in a state of loading</td>\n<td>bool</td>\n<td><code>false</code></td>\n<td>no</td>\n</tr>\n<tr>\n<td>creatable</td>\n<td>Allow options to be created</td>\n<td>bool</td>\n<td><code>false</code></td>\n<td>no</td>\n</tr>\n<tr>\n<td>onCreate</td>\n<td>Select create callback</td>\n<td><code>(keyword) => Promise&#x3C;void></code></td>\n<td></td>\n<td>no</td>\n</tr>\n<tr>\n<td>isValidNewOption</td>\n<td>Determines whether the "+Click add" option should be displayed based on the current input value</td>\n<td><code>(keyword, options) => boolean</code></td>\n<td></td>\n<td>no</td>\n</tr>\n<tr>\n<td>keyword</td>\n<td>Search\'s keyword</td>\n<td>string</td>\n<td><code>\'\'</code></td>\n<td>no</td>\n</tr>\n<tr>\n<td>onKeywordChange</td>\n<td>Keyword changed callback</td>\n<td><code>(keyword: string, meta: ISelectKeywordChangeMeta) => void</code></td>\n<td><code>noop</code></td>\n<td>no</td>\n</tr>\n<tr>\n<td>isEqual</td>\n<td>Compare two option is equal</td>\n<td><code>(a: Item, b: Item) => boolean</code></td>\n<td><code>(a, b) => a.key === b.key</code></td>\n<td>no</td>\n</tr>\n<tr>\n<td>inline</td>\n<td>Is inline display</td>\n<td>bool</td>\n<td><code>false</code></td>\n<td>no</td>\n</tr>\n<tr>\n<td>open</td>\n<td>Whether the menu is open</td>\n<td>bool</td>\n<td><code>false</code></td>\n<td>no</td>\n</tr>\n<tr>\n<td>onOpenChange</td>\n<td>Menu visible changed callback</td>\n<td>function</td>\n<td><code>noop</code></td>\n<td>no</td>\n</tr>\n<tr>\n<td>renderValue</td>\n<td>Render option value</td>\n<td><code>option => ReactNode</code></td>\n<td></td>\n<td>no</td>\n</tr>\n<tr>\n<td>renderOptionList</td>\n<td>Render menu list</td>\n<td><code>(options, renderOption) => ReactNode</code></td>\n<td></td>\n<td>no</td>\n</tr>\n<tr>\n<td>renderOptionContent</td>\n<td>Render menu item content</td>\n<td><code>option => ReactNode</code></td>\n<td></td>\n<td>no</td>\n</tr>\n<tr>\n<td>renderTagList</td>\n<td>Only available in \n<code>multiple</code>\n mode; render selected option list</td>\n<td><code>(props: ISelectTagListProps) => ReactNode</code></td>\n<td></td>\n<td>No</td>\n</tr>\n<tr>\n<td>disableSearch</td>\n<td>Disable search</td>\n<td>boolean</td>\n<td><code>false</code></td>\n<td>no</td>\n</tr>\n</tbody>\n</table>\n<h3 class="anchor-heading"><a href="#select-revivevalue">¶</a><a href="javascript:void(0)" id="select-revivevalue" class="anchor-point"></a><code>Select.reviveValue</code></h3>\n<p><code>reviveValue</code> can only be used in controlled mode. It can simplify initializing value from remote server. It\'s a function with 3 different types of parameters:</p>\n<ul>\n<li>Function：<code>(item: ISelectItem) => ISelectItem | null</code> return non <code>null</code> value to replace current value</li>\n<li>Object：<code>{ key: K; [k: string]: unknown; }</code> replace current value with the first matching option in options array using plain object equality test</li>\n<li>String/Number：Shorthand of <code>{ key: K }</code></li>\n</ul>'}))}}},82049:(n,s,a)=>{"use strict";a.d(s,{S:()=>d});var t=a(59312),p=a(24246),o=a(60042),e=a.n(o),c=a(27378),l=a(50993),u=a(86446),i=a(79352),k=a(43239),r=(0,p.jsx)(l.Z,{height:60,loading:!0,icon:"circle"},void 0),d=(0,c.forwardRef)((function(n,s){var a,o=n.hasMore,l=void 0!==o&&o,d=n.loadMore,m=n.skipLoadOnMount,g=void 0!==m&&m,y=n.useWindow,f=void 0!==y&&y,h=n.loader,v=void 0===h?r:h,w=n.threshold,x=void 0===w?1:w,b=n.className,O=n.children,S=(0,c.useState)(!1),j=S[0],C=S[1],T=(0,k.s)(),N=(0,c.useCallback)((function(){T.current&&C(!1)}),[T]),z=(0,c.useCallback)((function(){"function"==typeof d&&(C(!0),d.length>0?d(N):d().then(N,N))}),[d,N]),P=(0,c.useCallback)((function(n){j||2===n.previousPosition&&z()}),[z,j]);return(0,c.useEffect)((function(){g||z()}),[]),(0,p.jsxs)("div",(0,t.pi)({className:e()("zent-infinite-scroller",b,(a={},a["zent-infinite-scroller-y"]=!f,a)),ref:s,"data-zv":"9.12.16"},{children:[O,l&&i.Z&&(0,p.jsx)(u.h,{scrollableAncestor:f?window:void 0,onEnter:P,bottomOffset:-x},void 0),j&&v]}),void 0)}));d.displayName="InfiniteScroller",s.Z=d},55978:(n,s,a)=>{"use strict";function t(n){for(var s=[],a=1;a<arguments.length;a++)s[a-1]=arguments[a];var t=setTimeout((function(){return n.apply(void 0,s)}),1);return{cancel:function(){clearTimeout(t)}}}a.d(s,{Z:()=>t})},86446:(n,s,a)=>{"use strict";a.d(s,{h:()=>f});var t=a(59312),p=a(24246),o=a(27378),e=a(49744),c=a(19185);function l(n){return(0,c.isElement)(n)&&"string"==typeof n.type}function u(n){return n.viewportBottom-n.viewportTop==0?3:n.viewportTop<=n.waypointTop&&n.waypointTop<=n.viewportBottom||n.viewportTop<=n.waypointBottom&&n.waypointBottom<=n.viewportBottom||n.waypointTop<=n.viewportTop&&n.viewportBottom<=n.waypointBottom?1:n.viewportBottom<n.waypointTop?2:n.waypointTop<n.viewportTop?0:3}var i=a(79352),k=a(55978);function r(n){return g(n.toLowerCase())}function d(n,s,a){var t=g(n=n.toLowerCase());return null!==t?t:function(n,s,a){var t=y.exec(n);if(t){var p=parseFloat(t[1]);switch(t[2]){case"em":return null!==(o=s())?o*p:null;case"rem":var o;return null!==(o=a())?o*p:null;default:return null}}return null}(n,s,a)}var m=/(^-?\d*\.?\d+)(cm|mm|in|px|pt|pc)$/;function g(n){var s=m.exec(n);if(s){var a=parseFloat(s[1]);switch(s[2]){case"cm":return 9600*a/254;case"mm":return 960*a/254;case"in":return 96*a;case"pt":return 4*a/3;case"pc":return 16*a;case"px":return a;default:return null}}return null}var y=/(^-?\d*\.?\d+)(em|rem)$/,f=function(n){function s(){var s=null!==n&&n.apply(this,arguments)||this;return s.refElement=(0,o.createRef)(),s.previousPosition=4,s.handleScroll=function(n){if(s.refElement.current){var a=s.getBounds(),t=u(a),p=s.previousPosition,o=s.props,e=o.onPositionChange,c=o.onEnter,l=o.onLeave,i=o.fireOnRapidScroll;if(s.previousPosition=t,p!==t){var k={currentPosition:t,previousPosition:p,event:n,waypointTop:a.waypointTop,waypointBottom:a.waypointBottom,viewportTop:a.viewportTop,viewportBottom:a.viewportBottom};null==e||e(k),1===t?null==c||c(k):1!==p&&4!==p||null==l||l(k),i&&(2===p&&0===t||0===p&&2===t)&&(null==c||c({currentPosition:1,previousPosition:p,event:n,waypointTop:a.waypointTop,waypointBottom:a.waypointBottom,viewportTop:a.viewportTop,viewportBottom:a.viewportBottom}),null==l||l({currentPosition:t,previousPosition:1,event:n,waypointTop:a.waypointTop,waypointBottom:a.waypointBottom,viewportTop:a.viewportTop,viewportBottom:a.viewportBottom}))}}},s}return(0,t.ZT)(s,n),s.prototype.componentDidMount=function(){var n=this;i.Z&&(this.cancelOnNextTick=(0,k.Z)((function(){n.cancelOnNextTick=null,function(n,s){if(n&&!l(n)&&!s)throw new Error("<Waypoint> needs a DOM element to compute boundaries. The child you passed is neither a DOM element (e.g. <div>) nor does it use the innerRef prop.\n")}(n.props.children,n.refElement.current),n.scrollableAncestor=n.findScrollableAncestor(),n.scrollEventListenerUnsubscribe=(0,e.Oo)(n.scrollableAncestor,"scroll",n.handleScroll,{passive:!0}),n.resizeEventListenerUnsubscribe=(0,e.Oo)(window,"resize",n.handleScroll,{passive:!0}),n.handleScroll(null)})))},s.prototype.componentDidUpdate=function(){var n=this;i.Z&&this.scrollableAncestor&&(this.cancelOnNextTick||(this.cancelOnNextTick=(0,k.Z)((function(){n.cancelOnNextTick=null,n.handleScroll(null)}))))},s.prototype.componentWillUnmount=function(){var n,s,a;i.Z&&(null===(n=this.scrollEventListenerUnsubscribe)||void 0===n||n.call(this),null===(s=this.resizeEventListenerUnsubscribe)||void 0===s||s.call(this),null===(a=this.cancelOnNextTick)||void 0===a||a.cancel())},s.prototype.findScrollableAncestor=function(){var n=this.props,s=n.horizontal,a=n.scrollableAncestor;if(a)return a;for(var t=this.refElement.current;t.parentNode;){if((t=t.parentNode)===document.body)return window;var p=getComputedStyle(t),o=(s?p.getPropertyValue("overflow-x"):p.getPropertyValue("overflow-y"))||p.getPropertyValue("overflow");if("auto"===o||"scroll"===o)return t}return window},s.prototype.getBounds=function(){var n,s,a=this.props.horizontal,t=this.refElement.current.getBoundingClientRect(),p=t.left,o=t.top,e=t.right,c=t.bottom,l=a?p:o,u=a?e:c;if(this.scrollableAncestor===window)n=a?window.innerWidth:window.innerHeight,s=0;else{var i=this.scrollableAncestor.getBoundingClientRect();n=a?i.width:i.height,s=a?i.left:i.top}return{waypointTop:l,waypointBottom:u,viewportTop:s+this.getOffset("top",n),viewportBottom:s+n-this.getOffset("bottom",n)}},s.prototype.getOffset=function(n,s){var a,t,p=this.props.horizontal,o=n+"Offset",e="top"===n?"border"+(p?"Left":"Top")+"Width":"border"+(p?"Right":"Bottom")+"Width",c=this.props[o];if("auto"!==c)return function(n,s){var a=function(n){var s;if(s="number"==typeof n?n:parseFloat(n),!Number.isNaN(s)&&Number.isFinite(s))return s}(n);if("number"==typeof a)return a;if("string"==typeof n){var t=function(n){if("%"===n.slice(-1))return parseFloat(n.slice(0,-1))/100}(n);if("number"==typeof t)return t*s}}(c,s);if(this.scrollableAncestor===window){var l=getComputedStyle(document.documentElement),u=function(){return r(l.fontSize)};return null!==(a=d(l[e],u,u))&&void 0!==a?a:0}var i=getComputedStyle(this.scrollableAncestor);return u=function(){return r(i.fontSize)},null!==(t=d(i[e],u,(function(){return r(getComputedStyle(document.documentElement).fontSize)})))&&void 0!==t?t:0},s.prototype.render=function(){var n=this,s=this.props.children;if(!s)return(0,p.jsx)("span",{ref:this.refElement,style:{fontSize:0},className:"zent-waypoint-marker","data-zv":"9.12.16"},void 0);var a=o.Children.only(s);return l(a)||(0,c.isForwardRef)(a)?(0,o.cloneElement)(a,{ref:function(s){n.refElement.current=s;var t=a.ref;t&&("function"==typeof t?t(s):t.current=s)}}):(0,o.cloneElement)(a,{innerRef:this.refElement})},s.defaultProps={topOffset:0,bottomOffset:0,horizontal:!1,fireOnRapidScroll:!0},s}(o.PureComponent)}}]);