-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy path541-cf326336c37ed7081141.js
1 lines (1 loc) · 17 KB
/
541-cf326336c37ed7081141.js
1
(self.webpackChunkzent_docs=self.webpackChunkzent_docs||[]).push([[541],{20541:(n,s,a)=>{"use strict";a.r(s),a.d(s,{default:()=>b});var t=a(73450),e=a(27378),p=a(57318),c=a(56377),o=a(24246);function l(n,s){var a=Object.keys(n);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(n);s&&(t=t.filter((function(s){return Object.getOwnPropertyDescriptor(n,s).enumerable}))),a.push.apply(a,t)}return a}function i(n){for(var s=1;s<arguments.length;s++){var a=null!=arguments[s]?arguments[s]:{};s%2?l(Object(a),!0).forEach((function(s){(0,t.Z)(n,s,a[s])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(a)):l(Object(a)).forEach((function(s){Object.defineProperty(n,s,Object.getOwnPropertyDescriptor(a,s))}))}return n}var r=function(){class n extends e.Component{constructor(...n){super(...n),(0,t.Z)(this,"state",{checkedLarge:!0,checkedSmall:!0}),(0,t.Z)(this,"handleChangeLarge",(n=>{this.setState({checkedLarge:n})})),(0,t.Z)(this,"handleChangeSmall",(n=>{this.setState({checkedSmall:n})}))}render(){return(0,o.jsxs)("div",{children:[(0,o.jsx)(c.r,{checked:this.state.checkedLarge,onChange:this.handleChangeLarge})," ",(0,o.jsx)(c.r,{size:"small",checked:this.state.checkedSmall,onChange:this.handleChangeSmall})]})}}return(0,o.jsx)(n,{})},u=function(){return(0,o.jsxs)("div",{children:[(0,o.jsx)(c.r,{checked:!0,disabled:!0})," ",(0,o.jsx)(c.r,{checked:!1,disabled:!0})]})},k=function(){return(0,o.jsxs)("div",{children:[(0,o.jsx)(c.r,{checked:!0,loading:!0})," ",(0,o.jsx)(c.r,{loading:!0})," ",(0,o.jsx)(c.r,{checked:!0,size:"small",loading:!0})," ",(0,o.jsx)(c.r,{size:"small",loading:!0})]})};function d(n){return(0,o.jsx)(n.tag,i(i({},n.attributes),{},{dangerouslySetInnerHTML:{__html:n.html}}))}function h(n){return(0,o.jsx)(d,{tag:"section",html:n.html,attributes:{className:"zandoc-react-markdown"}})}function m(n){return(0,o.jsx)(d,{tag:"style",html:n.style})}function g(n,s){for(;n;)return n.offsetTop&&"static"!==getComputedStyle(n).position&&(s+=n.offsetTop),g(n.parentNode,s);return s}class y extends e.Component{constructor(...n){super(...n),(0,t.Z)(this,"state",{showCode:!1}),(0,t.Z)(this,"toggle",(()=>{this.setState({showCode:!this.state.showCode})}))}render(){var n=this.state.showCode,s=this.props,a=s.title,t=s.src,e=s.children;return(0,o.jsxs)("div",{className:"zandoc-react-demo",children:[(0,o.jsx)("div",{className:"zandoc-react-demo__preview",children:e}),(0,o.jsxs)("div",{className:"zandoc-react-demo__bottom",onClick:this.toggle,children:[(0,o.jsx)("div",{className:"zandoc-react-demo__title",children:(0,o.jsx)("p",{children:a||""})}),(0,o.jsx)("i",{className:"zenticon zenticon-caret-up zandoc-react-demo__toggle ".concat(n?"zandoc-react-demo__toggle-on":"zandoc-react-demo__toggle-off")})]}),n&&(0,o.jsx)("pre",{className:"zandoc-react-demo__code",children:(0,o.jsx)(d,{tag:"code",html:t,attributes:{className:"language-jsx"}})})]})}}class b extends e.Component{componentDidMount(){var n=location.hash;if(n){var s=document.querySelector('a[href="'.concat(n,'"]'));s&&(0,p.l)(document.documentElement,0,g(s,-9))}}render(){return e.createElement("div",{className:"zandoc-react-container"},e.createElement(m,{style:""}),e.createElement(h,{html:'<h2 class="anchor-heading"><a href="#switch">¶</a><a href="javascript:void(0)" id="switch" class="anchor-point"></a>Switch</h2>\n<p>Switch is a switching selector。</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>Switch is recommended to be used when you need to indicate the switch between two status.</p>\n<h3 class="anchor-heading"><a href="#demos">¶</a><a href="javascript:void(0)" id="demos" class="anchor-point"></a>Demos</h3>'}),e.createElement(y,{title:"Basic usage",id:"Demobasic",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Switch</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">Simple</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>\n state <span class="token operator">=</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">checkedLarge</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\n <span class="token literal-property property">checkedSmall</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function-variable function">handleChangeLarge</span> <span class="token operator">=</span> <span class="token parameter">checked</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">checkedLarge</span><span class="token operator">:</span> checked <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">handleChangeSmall</span> <span class="token operator">=</span> <span class="token parameter">checked</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">checkedSmall</span><span class="token operator">:</span> checked <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Switch</span></span>\n <span class="token attr-name">checked</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><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">checkedLarge</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">handleChangeLarge</span><span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span>\n <span class="token entity named-entity" title=" ">&nbsp;</span><span class="token entity named-entity" title=" ">&nbsp;</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Switch</span></span>\n <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span>\n <span class="token attr-name">checked</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><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">checkedSmall</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">handleChangeSmall</span><span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Simple</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},e.createElement(r)),e.createElement(y,{title:"disabled",id:"Demodisable",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Switch</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Switch</span></span> <span class="token attr-name">checked</span> <span class="token attr-name">disabled</span> <span class="token punctuation">/></span></span>\n <span class="token entity named-entity" title=" ">&nbsp;</span><span class="token entity named-entity" title=" ">&nbsp;</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Switch</span></span> <span class="token attr-name">checked</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span></span> <span class="token attr-name">disabled</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token punctuation">,</span> mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},e.createElement(u)),e.createElement(y,{title:"Switch with loading",id:"Demoloading",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Switch</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Switch</span></span> <span class="token attr-name">checked</span> <span class="token attr-name">loading</span> <span class="token punctuation">/></span></span>\n <span class="token entity named-entity" title=" ">&nbsp;</span><span class="token entity named-entity" title=" ">&nbsp;</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Switch</span></span> <span class="token attr-name">loading</span> <span class="token punctuation">/></span></span>\n <span class="token entity named-entity" title=" ">&nbsp;</span><span class="token entity named-entity" title=" ">&nbsp;</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Switch</span></span> <span class="token attr-name">checked</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span> <span class="token attr-name">loading</span> <span class="token punctuation">/></span></span>\n <span class="token entity named-entity" title=" ">&nbsp;</span><span class="token entity named-entity" title=" ">&nbsp;</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Switch</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span> <span class="token attr-name">loading</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">,</span>\n mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},e.createElement(k)),e.createElement(h,{html:'<h3 class="anchor-heading"><a href="#api">¶</a><a href="javascript:void(0)" id="api" class="anchor-point"></a>API</h3>\n<table class="table">\n<thead>\n<tr>\n<th>Property</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default</th>\n<th>Alternative</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>checked</td>\n<td>The current status</td>\n<td>bool</td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>The callback function that is triggered when the value of \n<code>checked</code>\n is changed.</td>\n<td>func(checked: bool)</td>\n<td><code>noop</code></td>\n<td></td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>Disable the switch</td>\n<td>bool</td>\n<td><code>false</code></td>\n<td><code>true</code></td>\n</tr>\n<tr>\n<td>size</td>\n<td>The size of the switch</td>\n<td>string</td>\n<td><code>\'default\'</code></td>\n<td><code>\'small\'</code></td>\n</tr>\n<tr>\n<td>className</td>\n<td>The custom classname</td>\n<td>string</td>\n<td><code>\'\'</code></td>\n<td></td>\n</tr>\n<tr>\n<td>loading</td>\n<td>The status of loading</td>\n<td>bool</td>\n<td><code>false</code></td>\n<td><code>true</code></td>\n</tr>\n</tbody>\n</table>'}))}}},56377:(n,s,a)=>{"use strict";a.d(s,{r:()=>i});var t=a(59312),e=a(24246),p=a(27378),c=a(60042),o=a.n(c),l=a(1348),i=function(n){function s(){var s=null!==n&&n.apply(this,arguments)||this;return s.toggle=function(){var n=s.props,a=n.onChange,t=n.checked;a&&a(!t)},s}return(0,t.ZT)(s,n),s.prototype.render=function(){var n,s=this.props,a=s.className,t=s.size,p=s.disabled,c=void 0===p?this.context.value:p,l=s.loading,i=s.checked,r=c||l,u=o()(((n={})["zent-switch-"+t]="default"!==t,n["zent-switch-disabled"]=r,n["zent-switch-loading"]=l,n["zent-switch-checked"]=i,n),"zent-switch",a);return(0,e.jsx)("div",{className:u,onClick:r?void 0:this.toggle,"data-zv":"10.0.10"},void 0)},s.defaultProps={size:"default"},s.contextType=l.d,s}(p.Component);s.Z=i}}]);