3481-0b46e87347e4ac5fed41.js

(self.webpackChunkzent_docs=self.webpackChunkzent_docs||[]).push([[3481],{93481:(n,t,s)=>{"use strict";s.r(t),s.d(t,{default:()=>g});var e=s(73450),a=s(27378),o=s(57318),c=s(89522),p=s(3454),r=s(24246);function l(n,t){var s=Object.keys(n);if(Object.getOwnPropertySymbols){var e=Object.getOwnPropertySymbols(n);t&&(e=e.filter((function(t){return Object.getOwnPropertyDescriptor(n,t).enumerable}))),s.push.apply(s,e)}return s}function i(n){for(var t=1;t<arguments.length;t++){var s=null!=arguments[t]?arguments[t]:{};t%2?l(Object(s),!0).forEach((function(t){(0,e.Z)(n,t,s[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(s)):l(Object(s)).forEach((function(t){Object.defineProperty(n,t,Object.getOwnPropertyDescriptor(s,t))}))}return n}var u=function(){return(0,r.jsx)(c.q,{text:"basic usage"})},d=function(){return(0,r.jsx)(c.q,{text:"customize usage",onCopySuccess:"Copied！",children:(0,r.jsx)(p.z,{type:"primary",children:"Click！"})})};function m(n){return(0,r.jsx)(n.tag,i(i({},n.attributes),{},{dangerouslySetInnerHTML:{__html:n.html}}))}function h(n){return(0,r.jsx)(m,{tag:"section",html:n.html,attributes:{className:"zandoc-react-markdown"}})}function y(n){return(0,r.jsx)(m,{tag:"style",html:n.style})}function k(n,t){for(;n;)return n.offsetTop&&"static"!==getComputedStyle(n).position&&(t+=n.offsetTop),k(n.parentNode,t);return t}class f extends a.Component{constructor(...n){super(...n),(0,e.Z)(this,"state",{showCode:!1}),(0,e.Z)(this,"toggle",(()=>{this.setState({showCode:!this.state.showCode})}))}render(){var n=this.state.showCode,t=this.props,s=t.title,e=t.src,a=t.children;return(0,r.jsxs)("div",{className:"zandoc-react-demo",children:[(0,r.jsx)("div",{className:"zandoc-react-demo__preview",children:a}),(0,r.jsxs)("div",{className:"zandoc-react-demo__bottom",onClick:this.toggle,children:[(0,r.jsx)("div",{className:"zandoc-react-demo__title",children:(0,r.jsx)("p",{children:s||""})}),(0,r.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,r.jsx)("pre",{className:"zandoc-react-demo__code",children:(0,r.jsx)(m,{tag:"code",html:e,attributes:{className:"language-jsx"}})})]})}}class g extends a.Component{componentDidMount(){var n=location.hash;if(n){var t=document.querySelector('a[href="'.concat(n,'"]'));t&&(0,o.l)(document.documentElement,0,k(t,-9))}}render(){return a.createElement("div",{className:"zandoc-react-container"},a.createElement(y,{style:""}),a.createElement(h,{html:'<h2 class="anchor-heading"><a href="#copybutton">¶</a><a href="javascript:void(0)" id="copybutton" class="anchor-point"></a>CopyButton</h2>\n<p>Copy button will copy the specified text to the system clipboard when clicked.</p>\n<h3 class="anchor-heading"><a href="#guides">¶</a><a href="javascript:void(0)" id="guides" class="anchor-point"></a>Guides</h3>\n<ul>\n<li>When you need to copy some text, you can use this component.</li>\n<li>This component may fail in some older version browsers since it doesn\'t rely on Flash.</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>'}),a.createElement(f,{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">CopyButton</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><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">CopyButton</span></span> <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>basic usage<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},a.createElement(u)),a.createElement(f,{title:"Customize usage",id:"Democustomize",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">CopyButton</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Button</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token 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">CopyButton</span></span> <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>customize usage<span class="token punctuation">"</span></span> <span class="token attr-name">onCopySuccess</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Copied！<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">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Click！</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">CopyButton</span></span><span class="token punctuation">></span></span>\n  <span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},a.createElement(d)),a.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</tr>\n</thead>\n<tbody>\n<tr>\n<td>text</td>\n<td>The next need to be copied</td>\n<td><code>string</code>\n \n|\n \n<code>() => string</code></td>\n<td></td>\n</tr>\n<tr>\n<td>onCopySuccess</td>\n<td>The callback function that is triggered when copy successful. If this property is string, it will show in \n<code>Notify.info</code>\n.</td>\n<td>function \n|\n string</td>\n<td><code>\'Copied\'</code></td>\n</tr>\n<tr>\n<td>onCopyError</td>\n<td>The callback function that is triggered when copy failed. If this property is string, it will show in \n<code>Notify.error</code>\n.</td>\n<td>function \n|\n string</td>\n<td><code>\'Copy failed\'</code></td>\n</tr>\n</tbody>\n</table>'}))}}},89522:(n,t,s)=>{"use strict";s.d(t,{q:()=>m});var e=s(59312),a=s(24246),o=s(27378),c=s(90347),p=s(23476),r=s(52074),l=s(42690),i=s(14805),u=function(n){var t,s,e,a,o=!1;try{if(t=function(){var n=document.getSelection();if(!n.rangeCount)return l.Z;for(var t=document.activeElement,s=[],e=0;e<n.rangeCount;e++)s.push(n.getRangeAt(e));switch(t.tagName.toUpperCase()){case"INPUT":case"TEXTAREA":t.blur();break;default:t=null}return n.removeAllRanges(),function(){"Caret"===n.type&&n.removeAllRanges(),n.rangeCount||s.forEach((function(t){n.addRange(t)})),t&&t.focus()}}(),s=document.createRange(),e=document.getSelection(),(a=(0,i.Z)("span")).textContent=n,a.style.all="unset",a.style.position="fixed",a.style.top="0",a.style.clip="rect(0, 0, 0, 0)",a.style.whiteSpace="pre",a.style.webkitUserSelect="text",a.style.MozUserSelect="text",a.style.msUserSelect="text",a.style.userSelect="text",document.body.appendChild(a),s.selectNodeContents(a),e.addRange(s),!document.execCommand("copy"))throw new Error("copy command was unsuccessful");o=!0}catch(t){try{window.clipboardData.setData("text",n),o=!0}catch(n){console.error(n)}}finally{e&&("function"==typeof e.removeRange?e.removeRange(s):e.removeAllRanges()),a&&document.body.removeChild(a),t()}return o},d=function(n){function t(){var t=null!==n&&n.apply(this,arguments)||this;return t.onClick=function(n){var s=t.props,e=s.text,a=s.onCopy,c=s.children,p=o.Children.only(c),r=u(e);a&&a(e,r),p&&p.props&&"function"==typeof p.props.onClick&&p.props.onClick(n)},t}return(0,e.ZT)(t,n),t.prototype.render=function(){var n=this.props,t=(n.text,n.onCopy,n.children),s=(0,e._T)(n,["text","onCopy","children"]),a=o.Children.only(t);return(0,o.cloneElement)(a,(0,e.pi)((0,e.pi)({},s),{onClick:this.onClick}))},t}(o.Component),m=function(n){function t(){var t=null!==n&&n.apply(this,arguments)||this;return t.onCopyCallback=function(n,t){"string"==typeof t?p.Z[n](t):t()},t.onCopy=function(n){return function(s,e){var a=t.props,o=a.onCopySuccess,c=a.onCopyError;e?t.onCopyCallback("success",o||n.success):t.onCopyCallback("error",c||n.error)}},t}return(0,e.ZT)(t,n),t.prototype.render=function(){var n=this,t=this.props,s=t.text,p=t.children,l=t.onClick,i="function"==typeof s?s():s;return(0,a.jsx)(r.Z,(0,e.pi)({componentName:"CopyButton"},{children:function(t){return(0,a.jsx)(d,(0,e.pi)({text:i,onCopy:n.onCopy(t)},{children:p?o.Children.only(p):(0,a.jsx)(c.ZP,(0,e.pi)({onClick:l,type:"primary"},{children:t.copy}),void 0)}),void 0)}}),void 0)},t.defaultProps={onCopySuccess:"",onCopyError:""},t}(o.Component)}}]);