381-b6a3c1eb7bf7cfcb1ee3.js

(self.webpackChunkzent_docs=self.webpackChunkzent_docs||[]).push([[381],{50381:(e,n,o)=>{"use strict";o.r(n),o.d(n,{default:()=>u});var t=o(73450),a=o(27378),s=o(57318),c=o(24246);function r(e,n){var o=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n&&(t=t.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),o.push.apply(o,t)}return o}function i(e){for(var n=1;n<arguments.length;n++){var o=null!=arguments[n]?arguments[n]:{};n%2?r(Object(o),!0).forEach((function(n){(0,t.Z)(e,n,o[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(o)):r(Object(o)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(o,n))}))}return e}function d(e){return(0,c.jsx)(e.tag,i(i({},e.attributes),{},{dangerouslySetInnerHTML:{__html:e.html}}))}function l(e){return(0,c.jsx)(d,{tag:"section",html:e.html,attributes:{className:"zandoc-react-markdown"}})}function p(e){return(0,c.jsx)(d,{tag:"style",html:e.style})}function h(e,n){for(;e;)return e.offsetTop&&"static"!==getComputedStyle(e).position&&(n+=e.offsetTop),h(e.parentNode,n);return n}class u extends a.Component{componentDidMount(){var e=location.hash;if(e){var n=document.querySelector('a[href="'.concat(e,'"]'));n&&(0,s.l)(document.documentElement,0,h(n,-9))}}render(){return a.createElement("div",{className:"zandoc-react-container"},a.createElement(p,{style:""}),a.createElement(l,{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"><span class="token comment"># Make sure to install coreutils first</span>\n<span class="token function">yarn</span> 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 control-flow">for</span> testing<span class="token punctuation">,</span> building<span class="token punctuation">,</span> etc<span class="token punctuation">.</span>\n<span class="token property-access">├──</span> src             # <span class="token maybe-class-name">JavaScript</span> source code</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</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<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"><span class="token function">yarn</span> 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"><span class="token function">yarn</span> 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, DatePicker, 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>'}))}}}}]);