-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path112-bc4eac5649ec72ccd951.js
1 lines (1 loc) · 101 KB
/
112-bc4eac5649ec72ccd951.js
1
(window.webpackJsonp=window.webpackJsonp||[]).push([[112],{711:function(n,a,s){"use strict";s.r(a),s.d(a,"default",function(){return I});var t=s(580),p=s.n(t),o=s(581),e=s.n(o),c=s(23),u=s.n(c),l=s(24),i=s.n(l),k=s(25),r=s.n(k),d=s(26),g=s.n(d),m=s(32),h=s.n(m),f=s(27),v=s.n(f),y=s(28),w=s.n(y),O=s(0),b=s.n(O),x=s(111),E=s(82),S=function(){var n=E.qb.Option;return b.a.createElement(E.qb,null,b.a.createElement(n,{value:"1"},"Option 1"),b.a.createElement(n,{value:"2"},"Option 2"),b.a.createElement(n,{value:"3"},"Option 3"))},C=function(){E.qb.Option;var n=[{value:"1",text:"Option 1"},{value:"2",text:"Option 2"},{value:"3",text:"Option 3"}],a=function(a){function s(){var n,a;u()(this,s);for(var t=arguments.length,p=new Array(t),o=0;o<t;o++)p[o]=arguments[o];return a=r()(this,(n=g()(s)).call.apply(n,[this].concat(p))),w()(h()(a),"state",{selectedValue:"2"}),w()(h()(a),"reRender",function(){a.forceUpdate()}),w()(h()(a),"selectChangeHandler",function(n,s){a.setState({selectedValue:s.value})}),w()(h()(a),"reset",function(){a.setState({selectedValue:""})}),a}return v()(s,a),i()(s,[{key:"render",value:function(){return b.a.createElement("div",null,b.a.createElement("span",null,"External state: ",this.state.selectedValue),b.a.createElement("br",null),b.a.createElement("br",null),b.a.createElement(E.qb,{placeholder:"Select an option..",data:n,onChange:this.selectChangeHandler,value:this.state.selectedValue}),b.a.createElement(E.i,{onClick:this.reset},"Reset"),b.a.createElement(E.i,{onClick:this.reRender},"Rerender"))}}]),s}(O.Component);return b.a.createElement(a,null)},D=function(){E.qb.Option;var n=function(n){function a(){var n,s;u()(this,a);for(var t=arguments.length,p=new Array(t),o=0;o<t;o++)p[o]=arguments[o];return s=r()(this,(n=g()(a)).call.apply(n,[this].concat(p))),w()(h()(s),"state",{selectedValue:"2",selectData:[{value:"1",text:"Option 1"},{value:"2",text:"Option 2"},{value:"3",text:"Option 3"}]}),w()(h()(s),"reRender",function(){s.forceUpdate()}),w()(h()(s),"selectChangeHandler",function(n,a){s.setState({selectedValue:a.value})}),w()(h()(s),"reset",function(){s.setState({selectData:[]})}),w()(h()(s),"refill",function(){s.setState({selectData:[{value:"1",text:"Option 1"},{value:"2",text:"Option 2"},{value:"3",text:"Option 3"}]})}),s}return v()(a,n),i()(a,[{key:"render",value:function(){return b.a.createElement("div",null,b.a.createElement(E.qb,{data:this.state.selectData,onChange:this.selectChangeHandler,value:this.state.selectedValue}),b.a.createElement(E.i,{onClick:this.reset},"Empty option array"),b.a.createElement(E.i,{onClick:this.refill},"Reset"))}}]),a}(O.Component);return b.a.createElement(n,null)},_=function(){return b.a.createElement(E.qb,{resetOption:!0,resetText:"...",data:["Option 1","Option 2","Option 3"]})},T=function(){return b.a.createElement(E.qb,{data:[{id:1,name:"Option 1"},{id:2,name:"Option 2"},{id:3,name:"Option 3"}],optionValue:"id",optionText:"name"})},j=function(){return b.a.createElement(E.qb,{data:[{value:0,text:"Option 1"},{value:2,text:"Option 2"},{value:3,text:"Option 3"}]})},N=function(){return b.a.createElement(E.qb,{data:[{id:1,name:"Option 1"},{id:2,name:"Option 2"},{id:3,name:"Option 3"}],optionValue:"id",optionText:"name",onChange:function(n,a){E.u.openDialog({children:"".concat(a.name," was selected, and its value is ").concat(a.id)})}})},R=function(){return b.a.createElement(E.qb,{data:[{id:1,name:"Option 1"},{id:2,name:"Option 2"},{id:3,name:"Option 3"}],optionValue:"id",optionText:"name",disabled:!0})},z=function(){var n=E.qb.Option;return b.a.createElement(E.qb,{autoWidth:!0,open:!0,className:"zent-select--auto-width"},b.a.createElement(n,{value:"1"},"Option 1"),b.a.createElement(n,{value:"2"},"Option 2"),b.a.createElement(n,{value:"3"},"Option 3"))},V=function(){return b.a.createElement(E.qb,{data:[{id:1,name:"Option 1"},{id:2,name:"Option 2"},{id:3,name:"Option 3"}],optionValue:"id",optionText:"name",onEmptySelected:function(n){return console.log(n)},filter:function(n,a){return n.name.indexOf(a)>-1}})},A=function(){var n=function(n){return[{text:"".concat(n,"__a"),value:"".concat(n,"__a")},{text:"".concat(n,"__b"),value:"".concat(n,"__b")},{text:"".concat(n,"__c"),value:"".concat(n,"__c")},{text:"".concat(n,"__d"),value:"".concat(n,"__d")},{text:"".concat(n,"__e"),value:"".concat(n,"__e")}]},a=function(a){function s(){var a,t;u()(this,s);for(var p=arguments.length,o=new Array(p),c=0;c<p;c++)o[c]=arguments[c];return t=r()(this,(a=g()(s)).call.apply(a,[this].concat(o))),w()(h()(t),"state",{selected:{value:""},tags:[],options:n("origin")}),w()(h()(t),"onAsyncFilter",function(a){setTimeout(function(){t.setState({options:n(a)})},1e3)}),w()(h()(t),"onTagsAsyncFilter",function(a){var s=t.state.tags;setTimeout(function(){t.setState({options:(s.length?s:[]).concat(n(a).filter(function(n){return!s.find(function(a){return a.value===n.value})}))})},1e3)}),w()(h()(t),"onChange",function(n,a){t.setState({selected:a})}),w()(h()(t),"onTagChange",function(n,a){t.setState({tags:[].concat(e()(t.state.tags),[a])})}),w()(h()(t),"onTagDelete",function(n){var a=t.state.tags.slice(0);t.setState({tags:a.filter(function(a){return a.value!==n.value})})}),t}return v()(s,a),i()(s,[{key:"render",value:function(){var n=this.state,a=n.selected,s=n.options,t=n.tags;return b.a.createElement("div",{className:"async-filter__wrapper"},b.a.createElement(E.qb,{data:s,value:a.value,onChange:this.onChange,onAsyncFilter:this.onAsyncFilter,onEmptySelected:function(n){return console.log(n)}}),b.a.createElement("br",null),b.a.createElement("br",null),b.a.createElement(E.qb,{tags:!0,autoWidth:!0,className:"async-filter__tags",data:s,value:t.map(function(n){return n.value}),onChange:this.onTagChange,onDelete:this.onTagDelete,onAsyncFilter:this.onTagsAsyncFilter,onEmptySelected:function(n){return console.log(n)}}))}}]),s}(O.Component);return b.a.createElement(a,null)},q=function(){return b.a.createElement(E.qb,{data:[{id:1,name:"Option 1"},{id:2,name:"Option 2"},{id:3,name:"Option 3"}],optionValue:"id",optionText:"name",searchPlaceholder:"Search",filter:function(n,a){return n.name.indexOf(a)>-1}})},F=function(){return b.a.createElement(E.qb,{data:[{value:1,text:"Option 1"},{value:2,text:"Option 2"},{value:3,text:"Option 3"}],emptyText:"No Result",filter:function(n,a){return n.text.indexOf(a)>-1}})},M=function(){var n=function(n){function a(){var n,s;u()(this,a);for(var t=arguments.length,p=new Array(t),o=0;o<t;o++)p[o]=arguments[o];return s=r()(this,(n=g()(a)).call.apply(n,[this].concat(p))),w()(h()(s),"state",{selected:["1"],data:[{value:"1",text:"Option 1"},{value:"2",text:"Option 2"},{value:"3",text:"Option 3"}]}),w()(h()(s),"reset",function(){s.setState({selected:[]})}),w()(h()(s),"upgradeData",function(){s.setState({data:[{value:"1",text:"Option 1"},{value:"2",text:"Option 2"},{value:"3",text:"Option 3"},{value:"4",text:"Option 4"}]})}),w()(h()(s),"increaseHandler",function(n,a){s.setState({value:s.state.selected.push(a.value)}),E.db.success(b.a.createElement("span",null,"The value of new added option is ",a.value))}),w()(h()(s),"deleteHandler",function(n){var a=s.state.selected.filter(function(a){return a!==n.value});s.setState({selected:a}),E.db.success(b.a.createElement("span",null,"The value of new deleted option is ",n.value))}),s}return v()(a,n),i()(a,[{key:"render",value:function(){return b.a.createElement("div",null,b.a.createElement("span",null,"External state: ",this.state.selected.join(",")),b.a.createElement("br",null),b.a.createElement("br",null),b.a.createElement(E.qb,{data:this.state.data,onChange:this.increaseHandler,onDelete:this.deleteHandler,tags:!0,filter:function(n,a){return n.text.indexOf(a)>-1},value:this.state.selected}),b.a.createElement(E.i,{onClick:this.reset},"Reset"),b.a.createElement(E.i,{onClick:this.upgradeData},"Fill Data"))}}]),a}(O.Component);return b.a.createElement(n,null)},H=function(){return b.a.createElement(E.qb,{retainNullOption:!0,data:[{text:"Value is null",value:null},"Option 2","Option 3"],onChange:function(n,a){console.log(a.value)}})};function B(n){return b.a.createElement(n.tag,p()({},n.attributes,{dangerouslySetInnerHTML:{__html:n.html}}))}function W(n){return b.a.createElement(B,{tag:"section",html:n.html,attributes:{className:"zandoc-react-markdown"}})}function $(n){return b.a.createElement(B,{tag:"style",html:n.style})}var P=function(n){function a(){var n,s;u()(this,a);for(var t=arguments.length,p=new Array(t),o=0;o<t;o++)p[o]=arguments[o];return s=r()(this,(n=g()(a)).call.apply(n,[this].concat(p))),w()(h()(s),"state",{showCode:!1}),w()(h()(s),"toggle",function(){s.setState({showCode:!s.state.showCode})}),s}return v()(a,n),i()(a,[{key:"render",value:function(){var n=this.state.showCode,a=this.props,s=a.title,t=a.src,p=a.children;return b.a.createElement("div",{className:"zandoc-react-demo"},b.a.createElement("div",{className:"zandoc-react-demo__preview"},p),b.a.createElement("div",{className:"zandoc-react-demo__bottom",onClick:this.toggle},b.a.createElement("div",{className:"zandoc-react-demo__title"},b.a.createElement("p",null,s||"")),b.a.createElement("i",{className:"zenticon zenticon-caret-up zandoc-react-demo__toggle ".concat(n?"zandoc-react-demo__toggle-on":"zandoc-react-demo__toggle-off")})),n&&b.a.createElement("pre",{className:"zandoc-react-demo__code"},b.a.createElement(B,{tag:"code",html:t,attributes:{className:"language-jsx"}})))}}]),a}(O.Component),I=function(n){function a(){return u()(this,a),r()(this,g()(a).apply(this,arguments))}return v()(a,n),i()(a,[{key:"componentDidMount",value:function(){var n=location.hash;if(n){var a=document.querySelector('a[href="'.concat(n,'"]'));a&&Object(x.a)(document.documentElement,0,function n(a,s){for(;a;)return a.offsetTop&&"static"!==getComputedStyle(a).position&&(s+=a.offsetTop),n(a.parentNode,s);return s}(a,-9))}}},{key:"render",value:function(){return b.a.createElement("div",{className:"zandoc-react-container",key:null},b.a.createElement($,{style:".zent-select--auto-width {\n\twidth: 300px;\n}\n\n.async-filter__tags {\n\twidth: 400px;\n}"}),b.a.createElement(W,{html:'<h2 class="anchor-heading"><a href="#select">¶</a><a href="javascript:void(0)" id="select" class="anchor-point"></a>Select</h2>\n<p>Select is a drop-down selection component with variety functions.</p>\n<h3 class="anchor-heading"><a href="#guides">¶</a><a href="javascript:void(0)" id="guides" class="anchor-point"></a>Guides</h3>\n<p>Component mainly made up of Select, Popup, Trigger three modules.</p>\n<h4 class="anchor-heading"><a href="#select">¶</a><a href="javascript:void(0)" id="select" class="anchor-point"></a>Select</h4>\n<p>Core controller, the main responsibility is to format data and data transfer between Popup and Trigger.</p>\n<h4 class="anchor-heading"><a href="#popup">¶</a><a href="javascript:void(0)" id="popup" class="anchor-point"></a>Popup</h4>\n<p>Options list pop-up layer, is mainly responsible for display options, data filtering control.</p>\n<h4 class="anchor-heading"><a href="#trigger">¶</a><a href="javascript:void(0)" id="trigger" class="anchor-point"></a>Trigger</h4>\n<ul>\n<li>Triggers, exposed to the user, can be configured via the trigger prop.</li>\n<li>Core triggers are SelectTrigger and InputTrigger.</li>\n<li>TagsTrigger is based on the InputTrigger extended multi-select function.</li>\n<li>Users can expand or develop their own trigger.</li>\n</ul>\n<h3 class="anchor-heading"><a href="#demos">¶</a><a href="javascript:void(0)" id="demos" class="anchor-point"></a>Demos</h3>'}),b.a.createElement(P,{title:"Basic Usage",id:"Demobasic",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Select <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> Option <span class="token operator">=</span> Select<span class="token punctuation">.</span>Option<span class="token punctuation">;</span>\n\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Select</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option <span class="token number">1</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Option</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option <span class="token number">2</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Option</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option <span class="token number">3</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Option</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Select</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>'},b.a.createElement(S)),b.a.createElement(P,{title:"Controlled Mode",id:"Democontrolled",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Select<span class="token punctuation">,</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> Option <span class="token operator">=</span> Select<span class="token punctuation">.</span>Option<span class="token punctuation">;</span>\n<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span> value<span class="token punctuation">:</span> <span class="token string">\'1\'</span><span class="token punctuation">,</span> text<span class="token punctuation">:</span> <span class="token string">\'Option 1\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span> value<span class="token punctuation">:</span> <span class="token string">\'2\'</span><span class="token punctuation">,</span> text<span class="token punctuation">:</span> <span class="token string">\'Option 2\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span> value<span class="token punctuation">:</span> <span class="token string">\'3\'</span><span class="token punctuation">,</span> text<span class="token punctuation">:</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 selectedValue<span class="token punctuation">:</span> <span class="token string">\'2\'</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function-variable function">reRender</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">forceUpdate</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function-variable function">selectChangeHandler</span> <span class="token operator">=</span> <span class="token punctuation">(</span>event<span class="token punctuation">,</span> selected<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token comment">// do whatever u want here</span>\n\n <span class="token comment">// important step for controlled component</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n selectedValue<span class="token punctuation">:</span> selected<span class="token punctuation">.</span>value <span class="token comment">// or selected[your optionValue]</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 operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n selectedValue<span class="token punctuation">:</span> <span class="token string">\'\'</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">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>span</span><span class="token punctuation">></span></span>External state<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>selectedValue<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 tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Select</span>\n <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Select an option..<span class="token punctuation">"</span></span>\n <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>selectChangeHandler<span class="token punctuation">}</span></span>\n <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>selectedValue<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>Button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>reset<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>Reset<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>reRender<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>Rerender<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</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\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Demo</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>'},b.a.createElement(C)),b.a.createElement(P,{title:"Modify the option data dynamically",id:"Demodynamic",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Select<span class="token punctuation">,</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> Option <span class="token operator">=</span> Select<span class="token punctuation">.</span>Option<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 selectedValue<span class="token punctuation">:</span> <span class="token string">\'2\'</span><span class="token punctuation">,</span>\n selectData<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span> value<span class="token punctuation">:</span> <span class="token string">\'1\'</span><span class="token punctuation">,</span> text<span class="token punctuation">:</span> <span class="token string">\'Option 1\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span> value<span class="token punctuation">:</span> <span class="token string">\'2\'</span><span class="token punctuation">,</span> text<span class="token punctuation">:</span> <span class="token string">\'Option 2\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span> value<span class="token punctuation">:</span> <span class="token string">\'3\'</span><span class="token punctuation">,</span> text<span class="token punctuation">:</span> <span class="token string">\'Option 3\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function-variable function">reRender</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">forceUpdate</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function-variable function">selectChangeHandler</span> <span class="token operator">=</span> <span class="token punctuation">(</span>event<span class="token punctuation">,</span> selected<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n selectedValue<span class="token punctuation">:</span> selected<span class="token punctuation">.</span>value\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 operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n selectData<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>\n\n <span class="token function-variable function">refill</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n selectData<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span> value<span class="token punctuation">:</span> <span class="token string">\'1\'</span><span class="token punctuation">,</span> text<span class="token punctuation">:</span> <span class="token string">\'Option 1\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span> value<span class="token punctuation">:</span> <span class="token string">\'2\'</span><span class="token punctuation">,</span> text<span class="token punctuation">:</span> <span class="token string">\'Option 2\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span> value<span class="token punctuation">:</span> <span class="token string">\'3\'</span><span class="token punctuation">,</span> text<span class="token punctuation">:</span> <span class="token string">\'Option 3\'</span> <span class="token punctuation">}</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><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">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>Select</span>\n <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>selectData<span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>selectChangeHandler<span class="token punctuation">}</span></span>\n <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>selectedValue<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>Button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>reset<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>Empty option array<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>refill<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>Reset<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</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\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Demo</span> <span class="token punctuation">/></span></span>\n <span class="token punctuation">,</span> mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},b.a.createElement(D)),b.a.createElement(P,{title:"String Array with reset option",id:"Demoreset",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Select <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">\'Option 1\'</span><span class="token punctuation">,</span> <span class="token string">\'Option 2\'</span><span class="token punctuation">,</span> <span class="token string">\'Option 3\'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>\n\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Select</span> <span class="token attr-name">resetOption</span> <span class="token attr-name">resetText</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>...<span class="token punctuation">"</span></span> <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>data<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>'},b.a.createElement(_)),b.a.createElement(P,{title:"Custom Key",id:"Democustom",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Select <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>id<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> name<span class="token punctuation">:</span> <span class="token string">\'Option 1\'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>id<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span> name<span class="token punctuation">:</span> <span class="token string">\'Option 2\'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>id<span class="token punctuation">:</span> <span class="token number">3</span><span class="token punctuation">,</span> name<span class="token punctuation">:</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\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Select</span>\n <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span>\n <span class="token attr-name">optionValue</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>id<span class="token punctuation">"</span></span>\n <span class="token attr-name">optionText</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span>\n <span class="token punctuation">/></span></span><span class="token punctuation">,</span>\n mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},b.a.createElement(T)),b.a.createElement(P,{title:"Object Array",id:"Demoobjectarray",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Select <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>value<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span> text<span class="token punctuation">:</span> <span class="token string">\'Option 1\'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>value<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span> text<span class="token punctuation">:</span> <span class="token string">\'Option 2\'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>value<span class="token punctuation">:</span> <span class="token number">3</span><span class="token punctuation">,</span> text<span class="token punctuation">:</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\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Select</span> <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>\n <span class="token punctuation">,</span> mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},b.a.createElement(j)),b.a.createElement(P,{title:"Custom Callback",id:"Democallback",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Select<span class="token punctuation">,</span> Dialog <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>id<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> name<span class="token punctuation">:</span> <span class="token string">\'Option 1\'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>id<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span> name<span class="token punctuation">:</span> <span class="token string">\'Option 2\'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>id<span class="token punctuation">:</span> <span class="token number">3</span><span class="token punctuation">,</span> name<span class="token punctuation">:</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\n<span class="token keyword">function</span> <span class="token function">showOption</span><span class="token punctuation">(</span>ev<span class="token punctuation">,</span> data<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n Dialog<span class="token punctuation">.</span><span class="token function">openDialog</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n children<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> was selected, and its value is </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span>id<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Select</span>\n <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span>\n <span class="token attr-name">optionValue</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>id<span class="token punctuation">"</span></span>\n <span class="token attr-name">optionText</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>showOption<span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span><span class="token punctuation">,</span>\n mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},b.a.createElement(N)),b.a.createElement(P,{title:"Disabled",id:"Demodisable",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Select <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>id<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> name<span class="token punctuation">:</span> <span class="token string">\'Option 1\'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>id<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span> name<span class="token punctuation">:</span> <span class="token string">\'Option 2\'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>id<span class="token punctuation">:</span> <span class="token number">3</span><span class="token punctuation">,</span> name<span class="token punctuation">:</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\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Select</span>\n <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span>\n <span class="token attr-name">optionValue</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>id<span class="token punctuation">"</span></span>\n <span class="token attr-name">optionText</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span>\n <span class="token attr-name">disabled</span>\n <span class="token punctuation">/></span></span>\n <span class="token punctuation">,</span> mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},b.a.createElement(R)),b.a.createElement(P,{title:"Auto Width",id:"Demoautowidth",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Select <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> Option <span class="token operator">=</span> Select<span class="token punctuation">.</span>Option<span class="token punctuation">;</span>\n\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Select</span>\n <span class="token attr-name">autoWidth</span>\n <span class="token attr-name">open</span>\n <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>zent-select--auto-width<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>Option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option <span class="token number">1</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Option</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option <span class="token number">2</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Option</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option <span class="token number">3</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Option</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Select</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>'},b.a.createElement(z)),b.a.createElement(P,{title:"With Option Filter",id:"Demofilter",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Select <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>id<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> name<span class="token punctuation">:</span> <span class="token string">\'Option 1\'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>id<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span> name<span class="token punctuation">:</span> <span class="token string">\'Option 2\'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>id<span class="token punctuation">:</span> <span class="token number">3</span><span class="token punctuation">,</span> name<span class="token punctuation">:</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\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Select</span>\n <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span>\n <span class="token attr-name">optionValue</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>id<span class="token punctuation">"</span></span>\n <span class="token attr-name">optionText</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span>\n <span class="token attr-name">onEmptySelected</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">filter</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>item<span class="token punctuation">,</span> keyword<span class="token punctuation">)</span> <span class="token operator">=></span> item<span class="token punctuation">.</span>name<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>keyword<span class="token punctuation">)</span> <span class="token operator">></span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span><span class="token punctuation">,</span>\n mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},b.a.createElement(V)),b.a.createElement(P,{title:"With Async Option Filter",id:"Demoasyncfilter",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Select <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token function-variable function">createOptions</span> <span class="token operator">=</span> keyword <span class="token operator">=></span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>text<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>keyword<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">__a`</span></span><span class="token punctuation">,</span> value<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>keyword<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">__a`</span></span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>text<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>keyword<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">__b`</span></span><span class="token punctuation">,</span> value<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>keyword<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">__b`</span></span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>text<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>keyword<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">__c`</span></span><span class="token punctuation">,</span> value<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>keyword<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">__c`</span></span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>text<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>keyword<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">__d`</span></span><span class="token punctuation">,</span> value<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>keyword<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">__d`</span></span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>text<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>keyword<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">__e`</span></span><span class="token punctuation">,</span> value<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>keyword<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">__e`</span></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">AsyncFilterDemo</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 selected<span class="token punctuation">:</span> <span class="token punctuation">{</span> value<span class="token punctuation">:</span> <span class="token string">\'\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n tags<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n options<span class="token punctuation">:</span> <span class="token function">createOptions</span><span class="token punctuation">(</span><span class="token string">\'origin\'</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">onAsyncFilter</span> <span class="token operator">=</span> keyword <span class="token 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 operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n options<span class="token punctuation">:</span> <span class="token function">createOptions</span><span class="token punctuation">(</span>keyword<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">1000</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">onTagsAsyncFilter</span> <span class="token operator">=</span> keyword <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> <span class="token punctuation">{</span> tags <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<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 operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n <span class="token comment">/*\n * 为了确保多选的选中状态不丢失\n * 需要对异步操作进行特殊处理\n *\n * 将已选中的项添加进新 options, 同时做去重\n */</span>\n options<span class="token punctuation">:</span> <span class="token punctuation">(</span>tags<span class="token punctuation">.</span>length <span class="token operator">?</span> tags <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><span class="token function">concat</span><span class="token punctuation">(</span>\n <span class="token function">createOptions</span><span class="token punctuation">(</span>keyword<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>newOption <span class="token operator">=></span>\n <span class="token operator">!</span>tags<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span>tag <span class="token operator">=></span> tag<span class="token punctuation">.</span>value <span class="token operator">===</span> newOption<span class="token punctuation">.</span>value<span class="token punctuation">)</span>\n <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><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function-variable function">onChange</span> <span class="token operator">=</span> <span class="token punctuation">(</span>e<span class="token punctuation">,</span> selected<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n selected\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">onTagChange</span> <span class="token operator">=</span> <span class="token punctuation">(</span>e<span class="token punctuation">,</span> selected<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n tags<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>tags<span class="token punctuation">,</span> selected<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">onTagDelete</span> <span class="token operator">=</span> deleted <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> tags <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>tags<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n tags<span class="token punctuation">:</span> tags<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>tag <span class="token operator">=></span> tag<span class="token punctuation">.</span>value <span class="token operator">!==</span> deleted<span class="token punctuation">.</span>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">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> selected<span class="token punctuation">,</span> options<span class="token punctuation">,</span> tags <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">;</span>\n <span class="token keyword">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">=</span><span class="token punctuation">"</span>async-filter__wrapper<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>Select</span>\n <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>options<span class="token punctuation">}</span></span>\n <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>selected<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 punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onChange<span class="token punctuation">}</span></span>\n <span class="token attr-name">onAsyncFilter</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onAsyncFilter<span class="token punctuation">}</span></span>\n <span class="token attr-name">onEmptySelected</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Select</span>\n <span class="token attr-name">tags</span>\n <span class="token attr-name">autoWidth</span>\n <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>async-filter__tags<span class="token punctuation">"</span></span>\n <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>options<span class="token punctuation">}</span></span>\n <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>tags<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>tag <span class="token operator">=></span> tag<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onTagChange<span class="token punctuation">}</span></span>\n <span class="token attr-name">onDelete</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onTagDelete<span class="token punctuation">}</span></span>\n <span class="token attr-name">onAsyncFilter</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onTagsAsyncFilter<span class="token punctuation">}</span></span>\n <span class="token attr-name">onEmptySelected</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token 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\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>AsyncFilterDemo</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>'},b.a.createElement(A)),b.a.createElement(P,{title:"Custom Search Text",id:"Democustomtext",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Select <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>id<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> name<span class="token punctuation">:</span> <span class="token string">\'Option 1\'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>id<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span> name<span class="token punctuation">:</span> <span class="token string">\'Option 2\'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>id<span class="token punctuation">:</span> <span class="token number">3</span><span class="token punctuation">,</span> name<span class="token punctuation">:</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\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Select</span>\n <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span>\n <span class="token attr-name">optionValue</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>id<span class="token punctuation">"</span></span>\n <span class="token attr-name">optionText</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span>\n <span class="token attr-name">searchPlaceholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Search<span class="token punctuation">"</span></span>\n <span class="token attr-name">filter</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>item<span class="token punctuation">,</span> keyword<span class="token punctuation">)</span> <span class="token operator">=></span> item<span class="token punctuation">.</span>name<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>keyword<span class="token punctuation">)</span> <span class="token operator">></span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span><span class="token punctuation">,</span>\n mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},b.a.createElement(q)),b.a.createElement(P,{title:"Custom No Match Text",id:"Demoemptytext",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Select <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>value<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> text<span class="token punctuation">:</span> <span class="token string">\'Option 1\'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>value<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span> text<span class="token punctuation">:</span> <span class="token string">\'Option 2\'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>value<span class="token punctuation">:</span> <span class="token number">3</span><span class="token punctuation">,</span> text<span class="token punctuation">:</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\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Select</span>\n <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span>\n <span class="token attr-name">emptyText</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>No Result<span class="token punctuation">"</span></span>\n <span class="token attr-name">filter</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>item<span class="token punctuation">,</span> keyword<span class="token punctuation">)</span> <span class="token operator">=></span> item<span class="token punctuation">.</span>text<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>keyword<span class="token punctuation">)</span> <span class="token operator">></span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span><span class="token punctuation">,</span>\n mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},b.a.createElement(F)),b.a.createElement(P,{title:"Multiple Select with Tag",id:"Demotag",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Select<span class="token punctuation">,</span> Button<span class="token punctuation">,</span> Notify <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">TagsDemo</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>\n\n state <span class="token operator">=</span> <span class="token punctuation">{</span>\n selected<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">"1"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n data<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span> value<span class="token punctuation">:</span> <span class="token string">\'1\'</span><span class="token punctuation">,</span> text<span class="token punctuation">:</span> <span class="token string">\'Option 1\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span> value<span class="token punctuation">:</span> <span class="token string">\'2\'</span><span class="token punctuation">,</span> text<span class="token punctuation">:</span> <span class="token string">\'Option 2\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span> value<span class="token punctuation">:</span> <span class="token string">\'3\'</span><span class="token punctuation">,</span> text<span class="token punctuation">:</span> <span class="token string">\'Option 3\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <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 operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n selected<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>\n\n <span class="token function-variable function">upgradeData</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n data<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span> value<span class="token punctuation">:</span> <span class="token string">\'1\'</span><span class="token punctuation">,</span> text<span class="token punctuation">:</span> <span class="token string">\'Option 1\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span> value<span class="token punctuation">:</span> <span class="token string">\'2\'</span><span class="token punctuation">,</span> text<span class="token punctuation">:</span> <span class="token string">\'Option 2\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span> value<span class="token punctuation">:</span> <span class="token string">\'3\'</span><span class="token punctuation">,</span> text<span class="token punctuation">:</span> <span class="token string">\'Option 3\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span> value<span class="token punctuation">:</span> <span class="token string">\'4\'</span><span class="token punctuation">,</span> text<span class="token punctuation">:</span> <span class="token string">\'Option 4\'</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><span class="token punctuation">;</span>\n\n <span class="token function-variable function">increaseHandler</span> <span class="token operator">=</span> <span class="token punctuation">(</span>event<span class="token punctuation">,</span> item<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n value<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>selected<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>item<span class="token punctuation">.</span>value<span class="token punctuation">)</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n Notify<span class="token punctuation">.</span><span class="token function">success</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>The value <span class="token keyword">of</span> <span class="token keyword">new</span> <span class="token class-name">added</span> option is <span class="token punctuation">{</span>item<span class="token punctuation">.</span>value<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><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n\n <span class="token function-variable function">deleteHandler</span> <span class="token operator">=</span> <span class="token punctuation">(</span>item<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n\n <span class="token comment">// 可以使用效率更高或者更优雅的数组定点删除方法，比如 lodash.remove</span>\n <span class="token keyword">const</span> newSelected <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>selected<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>value <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> value <span class="token operator">!==</span> item<span class="token punctuation">.</span>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 keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n selected<span class="token punctuation">:</span> newSelected\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n Notify<span class="token punctuation">.</span><span class="token function">success</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>The value <span class="token keyword">of</span> <span class="token keyword">new</span> <span class="token class-name">deleted</span> option is <span class="token punctuation">{</span>item<span class="token punctuation">.</span>value<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><span class="token punctuation">;</span>\n <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">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>span</span><span class="token punctuation">></span></span>External state<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>selected<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">\',\'</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><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Select</span>\n <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>data<span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>increaseHandler<span class="token punctuation">}</span></span>\n <span class="token attr-name">onDelete</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>deleteHandler<span class="token punctuation">}</span></span>\n <span class="token attr-name">tags</span>\n <span class="token attr-name">filter</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>item<span class="token punctuation">,</span> keyword<span class="token punctuation">)</span> <span class="token operator">=></span> item<span class="token punctuation">.</span>text<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>keyword<span class="token punctuation">)</span> <span class="token operator">></span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>selected<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>Button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>reset<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>Reset<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>upgradeData<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>Fill Data<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</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\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>TagsDemo</span> <span class="token punctuation">/></span></span>\n <span class="token punctuation">,</span> mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},b.a.createElement(M)),b.a.createElement(P,{title:"Select option with null value",id:"Demoretainnulloption",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Select <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> text<span class="token punctuation">:</span> <span class="token string">\'Value is null\'</span><span class="token punctuation">,</span> value<span class="token punctuation">:</span> <span class="token keyword">null</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string">\'Option 2\'</span><span class="token punctuation">,</span> <span class="token string">\'Option 3\'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>\n\n<span class="token keyword">function</span> <span class="token function">onChange</span><span class="token punctuation">(</span>evt<span class="token punctuation">,</span> item<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>item<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Select</span> <span class="token attr-name">retainNullOption</span> <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>onChange<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>'},b.a.createElement(H)),b.a.createElement(W,{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>data</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>index</td>\n<td>Select the index</td>\n<td>any</td>\n<td><code>null</code></td>\n<td>no</td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>Disable switch</td>\n<td>bool</td>\n<td><code>false</code></td>\n<td>no</td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>The default prompt text</td>\n<td>string</td>\n<td><code>\'please choose\'</code></td>\n<td>no</td>\n</tr>\n<tr>\n<td>searchPlaceholder</td>\n<td>Search box default text</td>\n<td>string</td>\n<td><code>\'\'</code></td>\n<td>no</td>\n</tr>\n<tr>\n<td>emptyText</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>trigger</td>\n<td>Custom trigger</td>\n<td>function</td>\n<td><code>Select.SelectTrigger</code></td>\n<td>no</td>\n</tr>\n<tr>\n<td>optionText</td>\n<td>Custom options display text\'s corresponding key, e.g. \n<code>{ id: 1, name: \'Doc\' }</code>\n needs \n<code>optionText="name"</code></td>\n<td>string</td>\n<td><code>\'text\'</code></td>\n<td>no</td>\n</tr>\n<tr>\n<td>optionValue</td>\n<td>Custom options value\'s corresponding key, e.g. \n<code>{ id: 1, name: \'Doc\' }</code>\n needs \n<code>optionValue="id"</code></td>\n<td>string</td>\n<td><code>\'value\'</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>onDelete</td>\n<td>Tag removed 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>null</code></td>\n<td>no</td>\n</tr>\n<tr>\n<td>maxToShow</td>\n<td>When there is a filter, set the maximum number options to display</td>\n<td>number</td>\n<td></td>\n<td>no</td>\n</tr>\n<tr>\n<td>onAsyncFilter</td>\n<td>Asynchronous filter function</td>\n<td>function</td>\n<td><code>null</code></td>\n<td>no</td>\n</tr>\n<tr>\n<td>onEmptySelected</td>\n<td>Empty filtered data callback</td>\n<td>function</td>\n<td><code>noop</code></td>\n<td>no</td>\n</tr>\n<tr>\n<td>onOpen</td>\n<td>Expanded callback</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>popupClassName</td>\n<td>Optional, custom popup classname</td>\n<td>string</td>\n<td><code>\'\'</code></td>\n<td>no</td>\n</tr>\n<tr>\n<td>autoWidth</td>\n<td>Whether to automatically set the width of pop-up layer equal with input-box\'s width</td>\n<td>bool</td>\n<td><code>false</code></td>\n<td>no</td>\n</tr>\n<tr>\n<td>resetOption</td>\n<td>Whether to add a reset option</td>\n<td>bool</td>\n<td><code>false</code></td>\n<td>no</td>\n</tr>\n<tr>\n<td>resetText</td>\n<td>Reset option text</td>\n<td>string</td>\n<td><code>\'...\'</code></td>\n<td>no</td>\n</tr>\n<tr>\n<td>retainNullOption</td>\n<td>Allow option with null value to be selected. Can\'t be used when \n<code>resetOption</code>\n is on</td>\n<td>bool</td>\n<td><code>false</code></td>\n<td>No</td>\n</tr>\n<tr>\n<td>width</td>\n<td>input-box\'s width</td>\n<td>string or number</td>\n<td></td>\n<td>no</td>\n</tr>\n<tr>\n<td>prefix</td>\n<td>Custom prefix</td>\n<td>string</td>\n<td><code>\'zent\'</code></td>\n<td>no</td>\n</tr>\n</tbody>\n</table>\n<p>If both data and children are used, data will cover the children, mainly in order to receive asynchronous data directly change the data property to change the options.</p>\n<h4 class="anchor-heading"><a href="#trigger">¶</a><a href="javascript:void(0)" id="trigger" class="anchor-point"></a>Trigger</h4>\n<table class="table">\n<thead>\n<tr>\n<th>Props</th>\n<th>Desctription</th>\n<th>Type</th>\n<th>Default</th>\n<th>Required</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>selectedItems</td>\n<td>Selected entry</td>\n<td>array</td>\n<td><code>[]</code></td>\n<td>no</td>\n</tr>\n<tr>\n<td>extraFilter</td>\n<td>Whether has filter function</td>\n<td>boolean</td>\n<td><code>false</code></td>\n<td>no</td>\n</tr>\n<tr>\n<td>open</td>\n<td>Whether to open Popup</td>\n<td>boolean</td>\n<td><code>false</code></td>\n<td>no</td>\n</tr>\n</tbody>\n</table>\n<p>Trigger can pass parameter changes by changing the props of Popup by calling <code>this.props.onChange({...})</code>.</p>'}))}}]),a}(O.Component)}}]);