-
Notifications
You must be signed in to change notification settings - Fork 1
/
5183-a8846e0ede1144110644.js
1 lines (1 loc) · 136 KB
/
5183-a8846e0ede1144110644.js
1
(self.webpackChunkzent_docs=self.webpackChunkzent_docs||[]).push([[5183],{5183:(n,s,a)=>{"use strict";a.r(s),a.d(s,{default:()=>T});var t=a(73118),p=a(73450),o=a(27378),e=a(57318),c=a(95388),l=a(3454),u=a(8327),i=a(82049),k=a(20840),r=a(33938),d=a(37371),m=a(24246);function y(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?y(Object(a),!0).forEach((function(s){(0,p.Z)(n,s,a[s])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(a)):y(Object(a)).forEach((function(s){Object.defineProperty(n,s,Object.getOwnPropertyDescriptor(a,s))}))}return n}var h=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,m.jsxs)("div",{className:"zent-demo-select-basic",children:[(0,m.jsx)(c.P,{clearable:!0,options:n,placeholder:"Select an option.."}),(0,m.jsx)(c.P,{clearable:!0,options:[],placeholder:"No Options"}),(0,m.jsx)(c.P,{clearable:!0,options:n,disabled:!0,placeholder:"Select an option.."}),(0,m.jsx)(c.P,{clearable:!0,options:n,placeholder:"Select an option.."}),(0,m.jsx)(c.P,{clearable:!0,options:n,placeholder:"Select an option..",size:"m"})]})},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,m.jsxs)("div",{children:[(0,m.jsxs)("div",{style:{marginBottom:"10px"},children:["External state: ",s?s.text:"null"]}),(0,m.jsx)(c.P,{placeholder:"Select an option..",options:n,onChange:this.onChange,value:s,clearable:!0}),(0,m.jsx)(l.z,{onClick:this.reset,style:{marginTop:"10px"},children:"Reset"})]})}}return(0,m.jsx)(s,{})},v=function(){return(0,m.jsx)(c.P,{clearable:!0,options:[{key:"group-1",text:"分组",type:"header"},{key:"1",text:"选项"},{key:"2",text:"选项"},{key:"group-2",text:"分组",type:"header"},{key:"3",text:"选项"}],placeholder:"Select an option.."})},x=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,m.jsxs)("div",{className:"zent-demo-select-multiple",children:[(0,m.jsx)(c.P,{multiple:!0,options:n,placeholder:"Select an option..",clearable:!0,creatable:!0}),(0,m.jsx)(c.P,{multiple:!0,options:n,placeholder:"Select an option..",value:p,onChange:e,collapsable:!0,collapseAt:1,clearable:!0}),(0,m.jsx)("div",{className:"zent-demo-select-multiple-values",children:p.map(((n,s)=>(0,m.jsx)("span",{children:n.text},s)))})]})}return(0,m.jsx)(s,{})},b=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,m.jsxs)("div",{className:"zent-demo-select-filter",children:[(0,m.jsx)(c.P,{clearable:!0,options:n,placeholder:"Built-in filter is enabled by default"}),(0,m.jsx)(c.P,{clearable:!0,options:n,placeholder:"Disable built-in filter",filter:!1}),(0,m.jsx)(c.P,{clearable:!0,options:n,placeholder:"Customer filter",filter:function(n,s){return new RegExp((a=n,a.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")),"i").test(s.text);var a}})]})},w=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],d=(0,o.useState)(!1),y=(0,t.Z)(d,2),g=y[0],h=y[1];return(0,o.useEffect)((()=>{h(!0);var s=setTimeout((()=>{e(n.filter((n=>n.text.startsWith(k)))),h(!1)}),1e3);return()=>clearTimeout(s)}),[k]),(0,m.jsx)(c.P,{options:p,keyword:k,onKeywordChange:r,placeholder:"Select an option..",filter:!1,clearable:!0,loading:g,renderOptionContent:n=>(0,m.jsx)(u.L,{searchWords:[k],textToHighlight:n.text,autoEscape:!0})})}return(0,m.jsx)(s,{})},O=function(){var n=Array(1e5).fill(null).map(((n,s)=>({key:String(s),text:"Option ".concat(s)})));return(0,m.jsx)(c.P,{clearable:!0,options:n,placeholder:"Select an option..",renderOptionList:function(n,s){return(0,m.jsx)(d.t7,{height:272,itemCount:n.length,itemSize:32,width:240,children:({index:a,style:t})=>(0,m.jsx)("div",{style:t,children:s(n[a],a)})})}})},S=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),d=(0,t.Z)(r,2),y=d[0],g=d[1],h=(0,o.useState)(!1),f=(0,t.Z)(h,2),v=f[0],x=f[1];function b(n){setTimeout((()=>{u(l.concat(p())),n&&n()}),2e4)}return(0,m.jsx)(c.P,{clearable:!0,options:l,placeholder:"Please Select",loading:y,open:v,onOpenChange:function(n){x(n),n&&a&&(a=!1,g(!0),setTimeout((()=>{u(p()),g(!1)}),2e3))},renderOptionList:function(n,s){return(0,m.jsx)(i.S,{hasMore:!0,skipLoadOnMount:!0,loadMore:b,className:"infinite-scroller-demo",loader:(0,m.jsx)("div",{className:"loading-text",children:(0,m.jsx)(k.l,{iconSize:18,loading:!0,icon:"circle",iconText:"加载中…",textPosition:"right",colorPreset:"grey"})}),children:n.map(((n,a)=>s(n,a)))})}})}return(0,m.jsx)(e,{})},j=function(){return(0,m.jsx)(c.P,{clearable:!0,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,m.jsxs)("div",{children:[(0,m.jsx)("div",{children:a}),(0,m.jsx)("div",{className:"select-addition-demo",children:s&&(0,m.jsx)("span",{children:s})})]})}})},C=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],d=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,m.jsx)(c.P,{options:e,clearable:!0,placeholder:"Select an option..",creatable:!0,onCreate:d,value:k,onChange:r})}function p(){var s=(0,o.useState)(n),a=(0,t.Z)(s,2),p=a[0],e=(a[1],(0,o.useState)([{key:"444",text:"444"}])),l=(0,t.Z)(e,2),u=l[0],i=l[1];return(0,m.jsx)(c.P,{options:p,clearable:!0,placeholder:"Select an option..",creatable:!0,value:u,onChange:i,multiple:!0})}return(0,m.jsxs)("div",{className:"zent-demo-select-creatable",children:[(0,m.jsx)(a,{}),(0,m.jsx)(p,{})]})},z=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,m.jsxs)("div",{style:{display:"flex"},children:[(0,m.jsx)(c.P,{placeholder:"Select an option..",options:a,onChange:this.onChange,value:s,clearable:!0}),(0,m.jsx)(l.z,{style:{marginLeft:16},onClick:this.loadOptions,children:"Load Options"})]})}}return(0,m.jsx)(s,{})},N=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"}];function s(){var s=(0,o.useState)(n),a=(0,t.Z)(s,2),p=a[0],e=a[1],l=(0,o.useState)(!1),u=(0,t.Z)(l,2),i=u[0],k=u[1],d=(0,o.useCallback)((n=>{k(n.target.checked)})),y=(0,o.useCallback)((n=>(0,m.jsx)(m.Fragment,{children:n.map((({key:n,text:s})=>(0,m.jsx)("p",{children:s})))})),[]);return(0,m.jsxs)("div",{className:"zent-demo-select-multiple-customize-collapsed",children:[(0,m.jsx)(c.P,{multiple:!0,options:n,placeholder:"Select some options..",value:p,onChange:e,collapsable:!0,collapseAt:1,clearable:!0,renderCollapsedContent:i?y:void 0}),(0,m.jsx)(r.X,{checked:i,onChange:d,children:"Customize the Pop content of collapsed tags"})]})}return(0,m.jsx)(s,{})};function P(n){return(0,m.jsx)(n.tag,g(g({},n.attributes),{},{dangerouslySetInnerHTML:{__html:n.html}}))}function E(n){return(0,m.jsx)(P,{tag:"section",html:n.html,attributes:{className:"zandoc-react-markdown"}})}function D(n){return(0,m.jsx)(P,{tag:"style",html:n.style})}function I(n,s){for(;n;)return n.offsetTop&&"static"!==getComputedStyle(n).position&&(s+=n.offsetTop),I(n.parentNode,s);return s}class q 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,m.jsxs)("div",{className:"zandoc-react-demo",children:[(0,m.jsx)("div",{className:"zandoc-react-demo__preview",children:p}),(0,m.jsxs)("div",{className:"zandoc-react-demo__bottom",onClick:this.toggle,children:[(0,m.jsx)("div",{className:"zandoc-react-demo__title",children:(0,m.jsx)("p",{children:a||""})}),(0,m.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,m.jsx)("pre",{className:"zandoc-react-demo__code",children:(0,m.jsx)(P,{tag:"code",html:t,attributes:{className:"language-jsx"}})})]})}}class T 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,I(s,-9))}}render(){return o.createElement("div",{className:"zandoc-react-container"},o.createElement(D,{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: 272px;\n}\n.loading-text {\n\tfont-size: 12px;\n\tpadding: 7px 0;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.select-addition-demo {\n color: #999;\n\t\tfont-size: 12px;\n\t\tmargin-top: 2px;\n\t}\n\t.zent-popover-v2 .zent-select-v2-option {\n\t\theight: auto;\n\t}\n\n.zent-demo-select-creatable > * {\n\t\t\tmargin-bottom: 10px;\n\t\t}\n\n.zent-demo-select-multiple-customize-collapsed {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t}\n\n.zent-demo-select-multiple-customize-collapsed .zent-checkbox {\n\t\t\t\tmargin-left: 16px;\n\t\t\t}"}),o.createElement(E,{html:'<h2 class="anchor-heading"><a href="#select">¶</a><a href="javascript:void(0)" id="select" class="anchor-point"></a>Select</h2>\n<p>You can select single or multiple values on the panel and finally enter the corresponding values.</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(q,{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 <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">\'1\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">text</span><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 <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">\'2\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">text</span><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 <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">\'3\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">\'Option 3\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">disabled</span><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 <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">\'4\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">text</span><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"><</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"><</span><span class="token class-name">Select</span></span> <span class="token attr-name">clearable</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>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Select</span></span> <span class="token attr-name">clearable</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"><</span><span class="token class-name">Select</span></span> <span class="token attr-name">clearable</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"><</span><span class="token class-name">Select</span></span> <span class="token attr-name">clearable</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>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Select</span></span> <span class="token attr-name">clearable</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">size</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token string">\'m\'</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>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(h)),o.createElement(q,{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> <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">\'1\'</span><span class="token punctuation">,</span> <span class="token literal-property property">text</span><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> <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">\'2\'</span><span class="token punctuation">,</span> <span class="token literal-property property">text</span><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> <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">\'3\'</span><span class="token punctuation">,</span> <span class="token literal-property property">text</span><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 <span class="token literal-property property">value</span><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 <span class="token literal-property property">value</span><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"><</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">marginBottom</span><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"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">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"><</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> <span class="token literal-property property">marginTop</span><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"></</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>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"><</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(q,{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 <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">\'group-1\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">\'分组\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">type</span><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 <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">\'1\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">text</span><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 <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">\'2\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">text</span><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 <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">\'group-2\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">\'分组\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">type</span><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 <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">\'3\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">text</span><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><span class="token punctuation">;</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Select</span></span> <span class="token attr-name">clearable</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(v)),o.createElement(q,{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 <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">\'1\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">text</span><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 <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">\'2\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">text</span><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 <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">\'3\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">text</span><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 <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">\'4\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">text</span><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"><</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"><</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 attr-name">creatable</span>\n <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">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">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 attr-name">clearable</span>\n <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>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"><</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"></</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"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token 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"><</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(x)),o.createElement(q,{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 <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">\'group-1\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">\'Group 1\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">type</span><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 <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">\'1\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">text</span><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 <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">\'2\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">text</span><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 <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">\'group-2\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">\'Group 2\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">type</span><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 <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">\'3\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">text</span><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">// $& 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 char-class"><span class="token char-class-punctuation punctuation">[</span>.*+?^${}()|[<span class="token special-escape escape">\\]</span><span class="token special-escape escape">\\\\</span><span class="token char-class-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">\'\\\\$&\'</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"><</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"><</span><span class="token class-name">Select</span></span> <span class="token attr-name">clearable</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"><</span><span class="token class-name">Select</span></span> <span class="token attr-name">clearable</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"><</span><span class="token class-name">Select</span></span>\n <span class="token attr-name">clearable</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"></</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(b)),o.createElement(q,{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 <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">\'1\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">text</span><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 <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">\'2\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">text</span><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 <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">\'3\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">text</span><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 <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">\'4\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">text</span><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 <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">\'5\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">text</span><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 <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">\'6\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">text</span><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 <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">\'7\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">text</span><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 <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">\'8\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">text</span><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 <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">\'9\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">text</span><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"><</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">clearable</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"><</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"><</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(w)),o.createElement(q,{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 <span class="token literal-property property">key</span><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 <span class="token literal-property property">text</span><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"><</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.5</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"><</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"></</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"></</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"><</span><span class="token class-name">Select</span></span> <span class="token attr-name">clearable</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(O)),o.createElement(q,{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">InlineLoading</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 <span class="token literal-property property">key</span><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 <span class="token literal-property property">text</span><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">&&</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">2000</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">&&</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">20000</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"><</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"><</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>loading-text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">InlineLoading</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">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 attr-name">iconText</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>加载中…<span class="token punctuation">"</span></span>\n <span class="token attr-name">textPosition</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>right<span class="token punctuation">"</span></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 punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token 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"></</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"><</span><span class="token class-name">Select</span></span>\n <span class="token attr-name">clearable</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"><</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(S)),o.createElement(q,{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 <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">\'1\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">text</span><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 <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">\'2\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">\'Option 2\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">addition</span><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 <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">\'3\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">text</span><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 <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">\'4\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">text</span><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"><</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>\n <span class="token punctuation">{</span>text<span class="token punctuation">}</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token 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>\n <span class="token punctuation">{</span>addition <span class="token operator">&&</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>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"></</span>span</span><span class="token punctuation">></span></span><span class="token punctuation">}</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Select</span></span> <span class="token attr-name">clearable</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(j)),o.createElement(q,{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 <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">\'1\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">text</span><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 <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">\'2\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">text</span><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 <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">\'3\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">text</span><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 <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">\'4\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">text</span><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 <span class="token literal-property property">key</span><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"><</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 literal-property property">key</span><span class="token operator">:</span> <span class="token string">\'444\'</span><span class="token punctuation">,</span> <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">\'444\'</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 control-flow">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">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">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"><</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"><</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"><</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"></</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(C)),o.createElement(q,{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> <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">\'1\'</span><span class="token punctuation">,</span> <span class="token literal-property property">text</span><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> <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">\'2\'</span><span class="token punctuation">,</span> <span class="token literal-property property">text</span><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> <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">\'3\'</span><span class="token punctuation">,</span> <span class="token literal-property property">text</span><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 <span class="token literal-property property">value</span><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 <span class="token literal-property property">value</span><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 <span class="token literal-property property">options</span><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> <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">\'4\'</span><span class="token punctuation">,</span> <span class="token literal-property property">text</span><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"><</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> <span class="token literal-property property">display</span><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"><</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"><</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> <span class="token literal-property property">marginLeft</span><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"></</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>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"><</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(z)),o.createElement(q,{title:"Customize the Pop content of collapsed tags",id:"Demo12",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> useState<span class="token punctuation">,</span> useCallback <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">Checkbox</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 <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">\'1\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">text</span><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 <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">\'2\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">text</span><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 <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">\'3\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">text</span><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 <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">\'4\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">text</span><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 <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">\'5\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">text</span><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><span class="token punctuation">;</span>\n\n<span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">CustomizeCollapsedContentRender</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>options<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">const</span> <span class="token punctuation">[</span>customizeCollapsedContent<span class="token punctuation">,</span> setCustomizeCollapsedContent<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 keyword">const</span> handleCheckboxChange <span class="token operator">=</span> <span class="token function">useCallback</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token function">setCustomizeCollapsedContent</span><span class="token punctuation">(</span>e<span class="token punctuation">.</span><span class="token property-access">target</span><span class="token punctuation">.</span><span class="token property-access">checked</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\n <span class="token keyword">const</span> renderCollapsedContent <span class="token operator">=</span> <span class="token function">useCallback</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">collapsedValue</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <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"><</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>collapsedValue<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>key<span class="token punctuation">,</span> text<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>text<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></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><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"><</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-customize-collapsed<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">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 some options..<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">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 attr-name">clearable</span>\n <span class="token attr-name">renderCollapsedContent</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>customizeCollapsedContent <span class="token operator">?</span> renderCollapsedContent <span class="token operator">:</span> <span class="token keyword nil">undefined</span><span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Checkbox</span></span> <span class="token attr-name">checked</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>customizeCollapsedContent<span class="token punctuation">}</span></span> <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>handleCheckboxChange<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Customize</span> the <span class="token maybe-class-name">Pop</span> content <span class="token keyword">of</span> collapsed tags<span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Checkbox</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token 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"><</span><span class="token class-name">CustomizeCollapsedContentRender</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(N)),o.createElement(E,{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>size</td>\n<td>size type</td>\n<td><code>xs</code>\n \n<code>s</code>\n \n<code>m</code>\n \n<code>l</code>\n \n<code>xl</code></td>\n<td>s</td>\n<td>否</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>true</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<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<tr>\n<td>renderCollapsedContent</td>\n<td>Render Pop content of collapsed tags in multiple and collapsed mode</td>\n<td><code>(collapsedValue: Item[]) => ReactNode</code></td>\n<td></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>'}))}}}}]);