114-9c128e7e1f8e9241073d.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[114],{990:function(n,a,s){"use strict";s.r(a),s.d(a,"default",(function(){return U}));var t=s(846),p=s.n(t),e=s(847),o=s.n(e),c=s(840),l=s.n(c),u=s(841),i=s.n(u),k=s(521),r=s.n(k),d=s(842),m=s.n(d),g=s(843),y=s.n(g),h=s(844),f=s.n(h),v=s(845),w=s.n(v),b=s(0),O=s.n(b),x=s(210),S=s(145);function E(n){var a=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(n){return!1}}();return function(){var s,t=f()(n);if(a){var p=f()(this).constructor;s=Reflect.construct(t,arguments,p)}else s=t.apply(this,arguments);return y()(this,s)}}var D=function(){var n=S.Select.Option;return O.a.createElement(S.Select,null,O.a.createElement(n,{value:"1"},"Option 1"),O.a.createElement(n,{value:"2"},"Option 2"),O.a.createElement(n,{value:"3"},"Option 3"))},C=function(){S.Select.Option;var n=[{value:"1",text:"Option 1"},{value:"2",text:"Option 2"},{value:"3",text:"Option 3"}],a=function(a){m()(t,a);var s=E(t);function t(){var n;l()(this,t);for(var a=arguments.length,p=new Array(a),e=0;e<a;e++)p[e]=arguments[e];return n=s.call.apply(s,[this].concat(p)),w()(r()(n),"state",{selectedValue:"2"}),w()(r()(n),"reRender",(function(){n.forceUpdate()})),w()(r()(n),"selectChangeHandler",(function(a,s){n.setState({selectedValue:s.value})})),w()(r()(n),"reset",(function(){n.setState({selectedValue:""})})),n}return i()(t,[{key:"render",value:function(){return O.a.createElement("div",null,O.a.createElement("span",null,"External state: ",this.state.selectedValue),O.a.createElement("br",null),O.a.createElement("br",null),O.a.createElement(S.Select,{placeholder:"Select an option..",data:n,onChange:this.selectChangeHandler,value:this.state.selectedValue}),O.a.createElement(S.Button,{onClick:this.reset},"Reset"),O.a.createElement(S.Button,{onClick:this.reRender},"Rerender"))}}]),t}(b.Component);return O.a.createElement(a,null)},_=function(){S.Select.Option;var n=function(n){m()(s,n);var a=E(s);function s(){var n;l()(this,s);for(var t=arguments.length,p=new Array(t),e=0;e<t;e++)p[e]=arguments[e];return n=a.call.apply(a,[this].concat(p)),w()(r()(n),"state",{selectedValue:"2",selectData:[{value:"1",text:"Option 1"},{value:"2",text:"Option 2"},{value:"3",text:"Option 3"}]}),w()(r()(n),"reRender",(function(){n.forceUpdate()})),w()(r()(n),"selectChangeHandler",(function(a,s){n.setState({selectedValue:s.value})})),w()(r()(n),"reset",(function(){n.setState({selectData:[]})})),w()(r()(n),"refill",(function(){n.setState({selectData:[{value:"1",text:"Option 1"},{value:"2",text:"Option 2"},{value:"3",text:"Option 3"}]})})),n}return i()(s,[{key:"render",value:function(){return O.a.createElement("div",null,O.a.createElement(S.Select,{data:this.state.selectData,onChange:this.selectChangeHandler,value:this.state.selectedValue}),O.a.createElement(S.Button,{onClick:this.reset},"Empty option array"),O.a.createElement(S.Button,{onClick:this.refill},"Reset"))}}]),s}(b.Component);return O.a.createElement(n,null)},T=function(){return O.a.createElement(S.Select,{resetOption:!0,resetText:"...",data:["Option 1","Option 2","Option 3"]})},j=function(){return O.a.createElement(S.Select,{data:[{id:1,name:"Option 1"},{id:2,name:"Option 2"},{id:3,name:"Option 3"}],optionValue:"id",optionText:"name"})},N=function(){return O.a.createElement(S.Select,{data:[{value:0,text:"Option 1"},{value:2,text:"Option 2"},{value:3,text:"Option 3"}]})},R=function(){return O.a.createElement(S.Select,{data:[{id:1,name:"Option 1"},{id:2,name:"Option 2"},{id:3,name:"Option 3"}],optionValue:"id",optionText:"name",onChange:function(n,a){S.Dialog.openDialog({children:"".concat(a.name," was selected, and its value is ").concat(a.id)})}})},V=function(){return O.a.createElement(S.Select,{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=S.Select.Option;return O.a.createElement(S.Select,{autoWidth:!0,open:!0,className:"zent-select-demo-auto-width"},O.a.createElement(n,{value:"1"},"Option 1"),O.a.createElement(n,{value:"2"},"Option 2"),O.a.createElement(n,{value:"3"},"Option 3"))},q=function(){return O.a.createElement(S.Select,{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){m()(t,a);var s=E(t);function t(){var a;l()(this,t);for(var p=arguments.length,e=new Array(p),c=0;c<p;c++)e[c]=arguments[c];return a=s.call.apply(s,[this].concat(e)),w()(r()(a),"state",{selected:{value:""},tags:[],options:n("origin")}),w()(r()(a),"onAsyncFilter",(function(s){setTimeout((function(){a.setState({options:n(s)})}),1e3)})),w()(r()(a),"onTagsAsyncFilter",(function(s){var t=a.state.tags;setTimeout((function(){a.setState({options:(t.length?t:[]).concat(n(s).filter((function(n){return!t.find((function(a){return a.value===n.value}))})))})}),1e3)})),w()(r()(a),"onChange",(function(n,s){a.setState({selected:s})})),w()(r()(a),"onTagChange",(function(n,s){a.setState({tags:[].concat(o()(a.state.tags),[s])})})),w()(r()(a),"onTagDelete",(function(n){var s=a.state.tags.slice(0);a.setState({tags:s.filter((function(a){return a.value!==n.value}))})})),a}return i()(t,[{key:"render",value:function(){var n=this.state,a=n.selected,s=n.options,t=n.tags;return O.a.createElement("div",{className:"async-filter__wrapper"},O.a.createElement(S.Select,{data:s,value:a.value,onChange:this.onChange,onAsyncFilter:this.onAsyncFilter,onEmptySelected:function(n){return console.log(n)}}),O.a.createElement("br",null),O.a.createElement("br",null),O.a.createElement(S.Select,{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)}}))}}]),t}(b.Component);return O.a.createElement(a,null)},B=function(){return O.a.createElement(S.Select,{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 O.a.createElement(S.Select,{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){m()(s,n);var a=E(s);function s(){var n;l()(this,s);for(var t=arguments.length,p=new Array(t),e=0;e<t;e++)p[e]=arguments[e];return n=a.call.apply(a,[this].concat(p)),w()(r()(n),"state",{selected:["1"],data:[{value:"1",text:"Option 1"},{value:"2",text:"Option 2"},{value:"3",text:"Option 3"}]}),w()(r()(n),"reset",(function(){n.setState({selected:[]})})),w()(r()(n),"upgradeData",(function(){n.setState({data:[{value:"1",text:"Option 1"},{value:"2",text:"Option 2"},{value:"3",text:"Option 3"},{value:"4",text:"Option 4"}]})})),w()(r()(n),"increaseHandler",(function(a,s){n.setState({value:n.state.selected.push(s.value)}),S.Notify.success(O.a.createElement("span",null,"The value of new added option is ",s.value))})),w()(r()(n),"deleteHandler",(function(a){var s=n.state.selected.filter((function(n){return n!==a.value}));n.setState({selected:s}),S.Notify.success(O.a.createElement("span",null,"The value of new deleted option is ",a.value))})),n}return i()(s,[{key:"render",value:function(){return O.a.createElement("div",null,O.a.createElement("span",null,"External state: ",this.state.selected.join(",")),O.a.createElement("br",null),O.a.createElement("br",null),O.a.createElement(S.Select,{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}),O.a.createElement(S.Button,{onClick:this.reset},"Reset"),O.a.createElement(S.Button,{onClick:this.upgradeData},"Fill Data"))}}]),s}(b.Component);return O.a.createElement(n,null)},H=function(){return O.a.createElement(S.Select,{retainNullOption:!0,data:[{text:"Value is null",value:null},"Option 2","Option 3"],onChange:function(n,a){console.log(a.value)}})};function W(n){return O.a.createElement(n.tag,p()({},n.attributes,{dangerouslySetInnerHTML:{__html:n.html}}))}function P(n){return O.a.createElement(W,{tag:"section",html:n.html,attributes:{className:"zandoc-react-markdown"}})}function $(n){return O.a.createElement(W,{tag:"style",html:n.style})}var I=function(n){m()(s,n);var a=E(s);function s(){var n;l()(this,s);for(var t=arguments.length,p=new Array(t),e=0;e<t;e++)p[e]=arguments[e];return n=a.call.apply(a,[this].concat(p)),w()(r()(n),"state",{showCode:!1}),w()(r()(n),"toggle",(function(){n.setState({showCode:!n.state.showCode})})),n}return i()(s,[{key:"render",value:function(){var n=this.state.showCode,a=this.props,s=a.title,t=a.src,p=a.children;return O.a.createElement("div",{className:"zandoc-react-demo"},O.a.createElement("div",{className:"zandoc-react-demo__preview"},p),O.a.createElement("div",{className:"zandoc-react-demo__bottom",onClick:this.toggle},O.a.createElement("div",{className:"zandoc-react-demo__title"},O.a.createElement("p",null,s||"")),O.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&&O.a.createElement("pre",{className:"zandoc-react-demo__code"},O.a.createElement(W,{tag:"code",html:t,attributes:{className:"language-jsx"}})))}}]),s}(b.Component),U=function(n){m()(s,n);var a=E(s);function s(){return l()(this,s),a.apply(this,arguments)}return i()(s,[{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 O.a.createElement("div",{className:"zandoc-react-container",key:null},O.a.createElement($,{style:".zent-select-demo-auto-width {\n\twidth: 300px;\n}\n\n.async-filter__tags {\n\twidth: 400px;\n}"}),O.a.createElement(P,{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>'}),O.a.createElement(I,{title:"Basic Usage",id:"Demobasic",src:'<span class="token keyword module">import</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">Select</span> <span class="token punctuation">}</span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token maybe-class-name">Option</span> <span class="token operator">=</span> <span class="token maybe-class-name">Select</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Option</span></span><span class="token punctuation">;</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Select</span></span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Option</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Option</span> <span class="token number">1</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Option</span></span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Option</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Option</span> <span class="token number">2</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Option</span></span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Option</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Option</span> <span class="token number">3</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Option</span></span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Select</span></span><span class="token punctuation">></span></span><span class="token punctuation">,</span>\n  mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},O.a.createElement(D)),O.a.createElement(I,{title:"Controlled Mode",id:"Democontrolled",src:'<span class="token keyword module">import</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">Select</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Button</span> <span class="token punctuation">}</span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token maybe-class-name">Option</span> <span class="token operator">=</span> <span class="token maybe-class-name">Select</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Option</span></span><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 operator">:</span> <span class="token string">\'1\'</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Option 1\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token string">\'2\'</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Option 2\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token string">\'3\'</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Option 3\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">]</span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">Demo</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>\n  state <span class="token operator">=</span> <span class="token punctuation">{</span>\n    selectedValue<span class="token operator">:</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 arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">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><span class="token parameter">event<span class="token punctuation">,</span> selected</span><span class="token punctuation">)</span> <span class="token arrow 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 method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      selectedValue<span class="token operator">:</span> selected<span class="token punctuation">.</span><span class="token property-access">value</span> <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 arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      selectedValue<span class="token operator">:</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">&lt;</span>div</span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span><span class="token maybe-class-name">External</span> state<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">selectedValue</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Select</span></span>\n          <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option..<span class="token punctuation">"</span></span>\n          <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token script-punctuation 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 script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">selectChangeHandler</span><span class="token punctuation">}</span></span>\n          <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">selectedValue</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">reset</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Reset</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">reRender</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Rerender</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n    <span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Demo</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span>\n  mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},O.a.createElement(C)),O.a.createElement(I,{title:"Modify the option data dynamically",id:"Demodynamic",src:'<span class="token keyword module">import</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">Select</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Button</span> <span class="token punctuation">}</span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token maybe-class-name">Option</span> <span class="token operator">=</span> <span class="token maybe-class-name">Select</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Option</span></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 operator">:</span> <span class="token string">\'2\'</span><span class="token punctuation">,</span>\n    selectData<span class="token operator">:</span> <span class="token punctuation">[</span>\n      <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token string">\'1\'</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Option 1\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n      <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token string">\'2\'</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Option 2\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n      <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token string">\'3\'</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Option 3\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n    <span class="token punctuation">]</span>\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 arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">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><span class="token parameter">event<span class="token punctuation">,</span> selected</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      selectedValue<span class="token operator">:</span> selected<span class="token punctuation">.</span><span class="token property-access">value</span>\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n  <span class="token function-variable function">reset</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      selectData<span class="token operator">:</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 arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      selectData<span class="token operator">:</span> <span class="token punctuation">[</span>\n        <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token string">\'1\'</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Option 1\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n        <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token string">\'2\'</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Option 2\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n        <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token string">\'3\'</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Option 3\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n      <span class="token punctuation">]</span>\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">&lt;</span>div</span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Select</span></span>\n          <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">selectData</span><span class="token punctuation">}</span></span>\n          <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">selectChangeHandler</span><span class="token punctuation">}</span></span>\n          <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">selectedValue</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">reset</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Empty</span> option array<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">refill</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Reset</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n    <span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Demo</span></span> <span class="token punctuation">/></span></span>\n  <span class="token punctuation">,</span> mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},O.a.createElement(_)),O.a.createElement(I,{title:"String Array with reset option",id:"Demoreset",src:'<span class="token keyword module">import</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">Select</span> <span class="token punctuation">}</span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> 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\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Select</span></span> <span class="token attr-name">resetOption</span> <span class="token attr-name">resetText</span><span class="token attr-value"><span class="token punctuation attr-equals">=</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 script-punctuation 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>'},O.a.createElement(T)),O.a.createElement(I,{title:"Custom Key",id:"Democustom",src:'<span class="token keyword module">import</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">Select</span> <span class="token punctuation">}</span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span>\n  <span class="token punctuation">{</span>id<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">\'Option 1\'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>id<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">\'Option 2\'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>id<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">\'Option 3\'</span><span class="token punctuation">}</span>\n<span class="token punctuation">]</span><span class="token punctuation">;</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Select</span></span>\n    <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token script-punctuation 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 attr-equals">=</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 attr-equals">=</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>'},O.a.createElement(j)),O.a.createElement(I,{title:"Object Array",id:"Demoobjectarray",src:'<span class="token keyword module">import</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">Select</span> <span class="token punctuation">}</span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span>\n  <span class="token punctuation">{</span>value<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Option 1\'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>value<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Option 2\'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>value<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Option 3\'</span><span class="token punctuation">}</span>\n<span class="token punctuation">]</span><span class="token punctuation">;</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Select</span></span> <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token script-punctuation 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>'},O.a.createElement(N)),O.a.createElement(I,{title:"Custom Callback",id:"Democallback",src:'<span class="token keyword module">import</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">Select</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Dialog</span> <span class="token punctuation">}</span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span>\n     <span class="token punctuation">{</span>id<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">\'Option 1\'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n     <span class="token punctuation">{</span>id<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">\'Option 2\'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n     <span class="token punctuation">{</span>id<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">\'Option 3\'</span><span class="token punctuation">}</span>\n<span class="token punctuation">]</span><span class="token punctuation">;</span>\n\n<span class="token keyword">function</span> <span class="token function">showOption</span><span class="token punctuation">(</span><span class="token parameter">ev<span class="token punctuation">,</span> data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  <span class="token maybe-class-name">Dialog</span><span class="token punctuation">.</span><span class="token method function property-access">openDialog</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n    children<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span><span class="token property-access">name</span><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><span class="token property-access">id</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation 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\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Select</span></span>\n    <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token script-punctuation 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 attr-equals">=</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 attr-equals">=</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 script-punctuation 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>'},O.a.createElement(R)),O.a.createElement(I,{title:"Disabled",id:"Demodisable",src:'<span class="token keyword module">import</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">Select</span> <span class="token punctuation">}</span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span>\n  <span class="token punctuation">{</span>id<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">\'Option 1\'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>id<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">\'Option 2\'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>id<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">\'Option 3\'</span><span class="token punctuation">}</span>\n<span class="token punctuation">]</span><span class="token punctuation">;</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Select</span></span>\n    <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token script-punctuation 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 attr-equals">=</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 attr-equals">=</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>'},O.a.createElement(V)),O.a.createElement(I,{title:"Auto Width",id:"Demoautowidth",src:'<span class="token keyword module">import</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">Select</span> <span class="token punctuation">}</span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token maybe-class-name">Option</span> <span class="token operator">=</span> <span class="token maybe-class-name">Select</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Option</span></span><span class="token punctuation">;</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Select</span></span>\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 attr-equals">=</span><span class="token punctuation">"</span>zent-select-demo-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">&lt;</span><span class="token class-name">Option</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Option</span> <span class="token number">1</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Option</span></span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Option</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Option</span> <span class="token number">2</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Option</span></span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Option</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Option</span> <span class="token number">3</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Option</span></span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Select</span></span><span class="token punctuation">></span></span><span class="token punctuation">,</span>\n  mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},O.a.createElement(z)),O.a.createElement(I,{title:"With Option Filter",id:"Demofilter",src:'<span class="token keyword module">import</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">Select</span> <span class="token punctuation">}</span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span>\n  <span class="token punctuation">{</span>id<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">\'Option 1\'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>id<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">\'Option 2\'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>id<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">\'Option 3\'</span><span class="token punctuation">}</span>\n<span class="token punctuation">]</span><span class="token punctuation">;</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Select</span></span>\n    <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token script-punctuation 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 attr-equals">=</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 attr-equals">=</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 script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">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 script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> keyword</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> item<span class="token punctuation">.</span><span class="token property-access">name</span><span class="token punctuation">.</span><span class="token method function property-access">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>'},O.a.createElement(q)),O.a.createElement(I,{title:"With Async Option Filter",id:"Demoasyncfilter",src:'<span class="token keyword module">import</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">Select</span> <span class="token punctuation">}</span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token function-variable function">createOptions</span> <span class="token operator">=</span> <span class="token parameter">keyword</span> <span class="token arrow operator">=></span> <span class="token punctuation">[</span>\n  <span class="token punctuation">{</span>text<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation 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 class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation 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 class="token template-punctuation string">`</span></span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>text<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation 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 class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation 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 class="token template-punctuation string">`</span></span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>text<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation 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 class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation 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 class="token template-punctuation string">`</span></span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>text<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation 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 class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation 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 class="token template-punctuation string">`</span></span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>text<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation 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 class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation 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 class="token template-punctuation string">`</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 operator">:</span> <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token string">\'\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n    tags<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n    options<span class="token operator">:</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> <span class="token parameter">keyword</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n        options<span class="token operator">:</span> <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> <span class="token parameter">keyword</span> <span class="token arrow 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><span class="token property-access">state</span><span class="token punctuation">;</span>\n    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n        <span class="token comment">/*\n         * 为了确保多选的选中状态不丢失\n         * 需要对异步操作进行特殊处理\n         *\n         * 将已选中的项添加进新 options, 同时做去重\n         */</span>\n        options<span class="token operator">:</span> <span class="token punctuation">(</span>tags<span class="token punctuation">.</span><span class="token property-access">length</span> <span class="token operator">?</span> tags <span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">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 method function property-access">filter</span><span class="token punctuation">(</span><span class="token parameter">newOption</span> <span class="token arrow operator">=></span>\n            <span class="token operator">!</span>tags<span class="token punctuation">.</span><span class="token method function property-access">find</span><span class="token punctuation">(</span><span class="token parameter">tag</span> <span class="token arrow operator">=></span> tag<span class="token punctuation">.</span><span class="token property-access">value</span> <span class="token operator">===</span> newOption<span class="token punctuation">.</span><span class="token property-access">value</span><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><span class="token parameter">e<span class="token punctuation">,</span> selected</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      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><span class="token parameter">e<span class="token punctuation">,</span> selected</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      tags<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token spread operator">...</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">tags</span><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> <span class="token parameter">deleted</span> <span class="token arrow 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><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">tags</span><span class="token punctuation">.</span><span class="token method function property-access">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 method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      tags<span class="token operator">:</span> tags<span class="token punctuation">.</span><span class="token method function property-access">filter</span><span class="token punctuation">(</span><span class="token parameter">tag</span> <span class="token arrow operator">=></span> tag<span class="token punctuation">.</span><span class="token property-access">value</span> <span class="token operator">!==</span> deleted<span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">)</span>\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">const</span> <span class="token punctuation">{</span> 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><span class="token property-access">state</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">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>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">&lt;</span><span class="token class-name">Select</span></span>\n          <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>options<span class="token punctuation">}</span></span>\n          <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>selected<span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">}</span></span>\n          <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChange</span><span class="token punctuation">}</span></span>\n          <span class="token attr-name">onAsyncFilter</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onAsyncFilter</span><span class="token punctuation">}</span></span>\n          <span class="token attr-name">onEmptySelected</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">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">&lt;</span>br</span> <span class="token punctuation">/></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Select</span></span>\n          <span class="token attr-name">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 attr-equals">=</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 script-punctuation 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 script-punctuation punctuation">=</span><span class="token punctuation">{</span>tags<span class="token punctuation">.</span><span class="token method function property-access">map</span><span class="token punctuation">(</span><span class="token parameter">tag</span> <span class="token arrow operator">=></span> tag<span class="token punctuation">.</span><span class="token property-access">value</span><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 script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onTagChange</span><span class="token punctuation">}</span></span>\n          <span class="token attr-name">onDelete</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onTagDelete</span><span class="token punctuation">}</span></span>\n          <span class="token attr-name">onAsyncFilter</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onTagsAsyncFilter</span><span class="token punctuation">}</span></span>\n          <span class="token attr-name">onEmptySelected</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">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">&lt;/</span>div</span><span class="token punctuation">></span></span>\n    <span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">AsyncFilterDemo</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span>\n  mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},O.a.createElement(A)),O.a.createElement(I,{title:"Custom Search Text",id:"Democustomtext",src:'<span class="token keyword module">import</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">Select</span> <span class="token punctuation">}</span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span>\n  <span class="token punctuation">{</span>id<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">\'Option 1\'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>id<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">\'Option 2\'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>id<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">\'Option 3\'</span><span class="token punctuation">}</span>\n<span class="token punctuation">]</span><span class="token punctuation">;</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Select</span></span>\n    <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token script-punctuation 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 attr-equals">=</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 attr-equals">=</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 attr-equals">=</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 script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> keyword</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> item<span class="token punctuation">.</span><span class="token property-access">name</span><span class="token punctuation">.</span><span class="token method function property-access">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>'},O.a.createElement(B)),O.a.createElement(I,{title:"Custom No Match Text",id:"Demoemptytext",src:'<span class="token keyword module">import</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">Select</span> <span class="token punctuation">}</span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span>\n  <span class="token punctuation">{</span>value<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Option 1\'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>value<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Option 2\'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>value<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Option 3\'</span><span class="token punctuation">}</span>\n<span class="token punctuation">]</span><span class="token punctuation">;</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Select</span></span>\n    <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token script-punctuation 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 attr-equals">=</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 script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> keyword</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> item<span class="token punctuation">.</span><span class="token property-access">text</span><span class="token punctuation">.</span><span class="token method function property-access">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>'},O.a.createElement(F)),O.a.createElement(I,{title:"Multiple Select with Tag",id:"Demotag",src:'<span class="token keyword module">import</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">Select</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Button</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Notify</span> <span class="token punctuation">}</span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">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 operator">:</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 operator">:</span> <span class="token punctuation">[</span>\n      <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token string">\'1\'</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Option 1\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n      <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token string">\'2\'</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Option 2\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n      <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token string">\'3\'</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Option 3\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n    <span class="token punctuation">]</span>\n  <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n  <span class="token function-variable function">reset</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      selected<span class="token operator">:</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 arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      data<span class="token operator">:</span> <span class="token punctuation">[</span>\n        <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token string">\'1\'</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Option 1\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n        <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token string">\'2\'</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Option 2\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n        <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token string">\'3\'</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Option 3\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n        <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token string">\'4\'</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Option 4\'</span> <span class="token punctuation">}</span>\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><span class="token parameter">event<span class="token punctuation">,</span> item</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      value<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">selected</span><span class="token punctuation">.</span><span class="token method function property-access">push</span><span class="token punctuation">(</span>item<span class="token punctuation">.</span><span class="token property-access">value</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 maybe-class-name">Notify</span><span class="token punctuation">.</span><span class="token method function property-access">success</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span><span class="token maybe-class-name">The</span> 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><span class="token property-access">value</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span><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><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token arrow 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><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">selected</span><span class="token punctuation">.</span><span class="token method function property-access">filter</span><span class="token punctuation">(</span><span class="token parameter">value</span> <span class="token arrow 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><span class="token property-access">value</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 keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      selected<span class="token operator">:</span> newSelected\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token maybe-class-name">Notify</span><span class="token punctuation">.</span><span class="token method function property-access">success</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span><span class="token maybe-class-name">The</span> 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><span class="token property-access">value</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span><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">&lt;</span>div</span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span><span class="token maybe-class-name">External</span> state<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">selected</span><span class="token punctuation">.</span><span class="token method function property-access">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">&lt;/</span>span</span><span class="token punctuation">></span></span>\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/></span></span>\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Select</span></span>\n          <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">data</span><span class="token punctuation">}</span></span>\n          <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">increaseHandler</span><span class="token punctuation">}</span></span>\n          <span class="token attr-name">onDelete</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">deleteHandler</span><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 script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> keyword</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> item<span class="token punctuation">.</span><span class="token property-access">text</span><span class="token punctuation">.</span><span class="token method function property-access">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 script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">selected</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">reset</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Reset</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">upgradeData</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Fill</span> <span class="token maybe-class-name">Data</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n    <span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">TagsDemo</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>'},O.a.createElement(M)),O.a.createElement(I,{title:"Select option with null value",id:"Demoretainnulloption",src:'<span class="token keyword module">import</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">Select</span> <span class="token punctuation">}</span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> text<span class="token operator">:</span> <span class="token string">\'Value is null\'</span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token keyword null nil">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><span class="token parameter">evt<span class="token punctuation">,</span> item</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>item<span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Select</span></span> <span class="token attr-name">retainNullOption</span> <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token script-punctuation 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 script-punctuation 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>'},O.a.createElement(H)),O.a.createElement(P,{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</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>'}))}}]),s}(b.Component)}}]);