132-a28f22da2d828c0b81f9.js

webpackJsonp([132],{1593:function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}function a(e){return w.default.createElement(e.tag,(0,v.default)({},e.attributes,{dangerouslySetInnerHTML:{__html:e.html}}))}function c(e){return w.default.createElement(a,{tag:"section",html:e.html,attributes:{className:"zandoc-react-markdown"}})}function i(e){return w.default.createElement(a,{tag:"style",html:e.style})}function r(e,t){for(;e;)return e.offsetTop&&"static"!==getComputedStyle(e).position&&(t+=e.offsetTop),r(e.parentNode,t);return t}Object.defineProperty(t,"__esModule",{value:!0});var s=n(1),d=o(s),l=n(4),p=o(l),h=n(2),u=o(h),m=n(3),f=o(m),g=n(7),v=o(g),y=n(0),w=o(y),b=n(232),_=o(b),E=(function(e){function t(){var e,n,o,a;(0,d.default)(this,t);for(var c=arguments.length,i=Array(c),r=0;r<c;r++)i[r]=arguments[r];return n=o=(0,u.default)(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(i))),o.state={showCode:!1},o.toggle=function(){o.setState({showCode:!o.state.showCode})},a=n,(0,u.default)(o,a)}(0,f.default)(t,e),(0,p.default)(t,[{key:"render",value:function(){var e=this.state.showCode,t=this.props,n=t.title,o=t.src,c=t.children;return w.default.createElement("div",{className:"zandoc-react-demo"},w.default.createElement("div",{className:"zandoc-react-demo__preview"},c),w.default.createElement("div",{className:"zandoc-react-demo__bottom",onClick:this.toggle},w.default.createElement("div",{className:"zandoc-react-demo__title"},w.default.createElement("p",null,n||"")),w.default.createElement("i",{className:"zenticon zenticon-caret-up zandoc-react-demo__toggle "+(e?"zandoc-react-demo__toggle-on":"zandoc-react-demo__toggle-off")})),e&&w.default.createElement("pre",{className:"zandoc-react-demo__code"},w.default.createElement(a,{tag:"code",html:o,attributes:{className:"language-jsx"}})))}}])}(y.Component),function(e){function t(){return(0,d.default)(this,t),(0,u.default)(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return(0,f.default)(t,e),(0,p.default)(t,[{key:"componentDidMount",value:function(){var e=location.hash;if(e){var t=document.querySelector('a[href="'+e+'"]');t&&(0,_.default)(document.documentElement,0,r(t,-9))}}},{key:"render",value:function(){return w.default.createElement("div",{className:"zandoc-react-container",key:null},w.default.createElement(i,{style:""}),w.default.createElement(c,{html:'<h2 class="anchor-heading"><a href="#how-to-contribute">¶</a><a href="javascript:void(0)" id="how-to-contribute" class="anchor-point"></a>How to Contribute</h2>\n<h4 class="anchor-heading"><a href="#setup-environment">¶</a><a href="javascript:void(0)" id="setup-environment" class="anchor-point"></a>Setup Environment</h4>\n<pre><code class="language-bash">yarn bootstrap</code></pre>\n<h4 class="anchor-heading"><a href="#code-structure">¶</a><a href="javascript:void(0)" id="code-structure" class="anchor-point"></a>Code Structure</h4>\n<ul>\n<li>There\'re two npm packages within Zent\'s repository: <code>babel-plugin-zent</code> and <code>zent</code>.</li>\n<li>This site\'s source is in <code>site</code>, run <code>yarn dev</code> within <code>site</code> to view docs locally.</li>\n</ul>\n<p>Source code for all components is in <code>packages/zent</code>:</p>\n<pre><code class="language-text">packages<span class="token operator">/</span>zent\n├── __tests__       # unit tests\n├── assets          # styles\n├── docs            # documentations\n├── scripts         # scripts <span class="token keyword">for</span> testing<span class="token punctuation">,</span> building<span class="token punctuation">,</span> etc<span class="token punctuation">.</span>\n├── src             # JavaScript source code\n├── typings         # TypeScript definitions</code></pre>\n<h4 class="anchor-heading"><a href="#add-a-new-component">¶</a><a href="javascript:void(0)" id="add-a-new-component" class="anchor-point"></a>Add a New Component</h4>\n<p>Steps:</p>\n<ul>\n<li>Add JavaScript code</li>\n<li>Add styles</li>\n<li>Add tests</li>\n<li>Add documentation</li>\n<li>Add TypeScript definition</li>\n</ul>\n<p>The boring part is automated, just run <code>yarn new-component YOUR-COMPONENT-NAME</code> in <code>packages/zent</code>, all necessary boilerplates are created for you.</p>\n<p>Remember to add TypeScript definitions in <code>packages/zent/typings</code> for your new component.</p>\n<h4 class="anchor-heading"><a href="#naming">¶</a><a href="javascript:void(0)" id="naming" class="anchor-point"></a>Naming</h4>\n<ul>\n<li>Component file name should be camel case，e.g. <code>ActionButton</code>\'s file name should be <code>ActionsButton.js</code></li>\n<li>Files export functions should be camel case(first letter is lower case), e.g. <code>withPop</code></li>\n<li>Directory name should be lower case separated by -, e.g. <code>number-input</code></li>\n<li>file name in demos should be lower case separated by -, e.g <code>with-close-btn</code></li>\n</ul>\n<h4 class="anchor-heading"><a href="#testing">¶</a><a href="javascript:void(0)" id="testing" class="anchor-point"></a>Testing</h4>\n<p>Beside the unit tests in <code>__tests__</code>, remember to update documentation whenever you make a change.</p>\n<pre><code class="language-bash">yarn dev</code></pre>\n<p>There\'s a separate command to run tests for only one component at a time.</p>\n<pre><code class="language-bash">yarn test-componet button</code></pre>\n<h2 class="anchor-heading"><a href="#how-to-write-documentation">¶</a><a href="javascript:void(0)" id="how-to-write-documentation" class="anchor-point"></a>How to Write Documentation</h2>\n<p>There\'re two READMEs in each component directory, <code>README_zh-CN.md</code> is Chinese documentaion and <code>README_en-US.md</code> is English documentation. These docs are written in Markdown format.</p>\n<p>You can find detailed <a href="markdown">instructions here</a>.</p>\n<h2 class="anchor-heading"><a href="#tips">¶</a><a href="javascript:void(0)" id="tips" class="anchor-point"></a>Tips</h2>\n<h4 class="anchor-heading"><a href="#component-dependency-within-ze">¶</a><a href="javascript:void(0)" id="component-dependency-within-ze" class="anchor-point"></a>Component Dependency within Zent</h4>\n<p>For example, in order to import <code>Portal</code> within <code>Dialog</code>, you can just write <code>import Portal from \'portal\';</code>, no relative path required.</p>\n<h4 class="anchor-heading"><a href="#export-component">¶</a><a href="javascript:void(0)" id="export-component" class="anchor-point"></a>Export Component</h4>\n<ul>\n<li>Each component can have only one export: the default export. Please attach all other variables to the default export variable if you have multiple exports.</li>\n<li>Don\'t use <a href="https://facebook.github.io/react/docs/refs-and-the-dom.html#refs-and-functional-components">Functional Component</a> when exporting a component. Functional components can\'t have <code>ref</code>s and <code>ref</code>s are discouraged, we should not forbid the use of <code>ref</code>s on our componet anyway.</li>\n</ul>\n<h4 class="anchor-heading"><a href="#styles">¶</a><a href="javascript:void(0)" id="styles" class="anchor-point"></a>Styles</h4>\n<p>Component styles are written in <code>precss</code>, please refer to <a href="https://github.com/jonathantneal/precss">precss documentation</a>.</p>\n<h4 class="anchor-heading"><a href="#z-index">¶</a><a href="javascript:void(0)" id="z-index" class="anchor-point"></a>z-index</h4>\n<p>We have rules for <code>z-index</code> within Zent, <code>z-index</code> priorities(from high to low) are defined as:</p>\n<ul>\n<li>Special：Notify is always on top，[10000, +∞)</li>\n<li>Popups：Pop, Select, Datetimepicker, ColorPicker, Cascader etc. [2000, 3000)</li>\n<li>Fullscreen components：Dialog, image-preview etc. [1000, 2000)</li>\n<li>Others：Used with one component to control layers, [-10, 10] is recommended, the lower the better.</li>\n</ul>'}))}}]),t}(y.Component));t.default=E}});