11-9c128e7e1f8e9241073d.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[11],{882:function(n,e,a){"use strict";a.r(e),a.d(e,"default",(function(){return E}));var o=a(840),c=a.n(o),t=a(841),i=a.n(t),r=a(521),s=a.n(r),d=a(842),h=a.n(d),l=a(843),p=a.n(l),u=a(844),f=a.n(u),g=a(845),m=a.n(g),v=a(846),y=a.n(v),j=a(0),z=a.n(j),b=a(210);function k(n){var e=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 a,o=f()(n);if(e){var c=f()(this).constructor;a=Reflect.construct(o,arguments,c)}else a=o.apply(this,arguments);return p()(this,a)}}function x(n){return z.a.createElement(n.tag,y()({},n.attributes,{dangerouslySetInnerHTML:{__html:n.html}}))}function w(n){return z.a.createElement(x,{tag:"section",html:n.html,attributes:{className:"zandoc-react-markdown"}})}function _(n){return z.a.createElement(x,{tag:"style",html:n.style})}j.Component;var E=function(n){h()(a,n);var e=k(a);function a(){return c()(this,a),e.apply(this,arguments)}return i()(a,[{key:"componentDidMount",value:function(){var n=location.hash;if(n){var e=document.querySelector('a[href="'.concat(n,'"]'));e&&Object(b.a)(document.documentElement,0,function n(e,a){for(;e;)return e.offsetTop&&"static"!==getComputedStyle(e).position&&(a+=e.offsetTop),n(e.parentNode,a);return a}(e,-9))}}},{key:"render",value:function(){return z.a.createElement("div",{className:"zandoc-react-container",key:null},z.a.createElement(_,{style:""}),z.a.createElement(w,{html:'<h2 class="anchor-heading"><a href="#ru-he-can-yu-zent-de-kai-fa">¶</a><a href="javascript:void(0)" id="ru-he-can-yu-zent-de-kai-fa" class="anchor-point"></a>如何参与 Zent 的开发</h2>\n<h4 class="anchor-heading"><a href="#chu-shi-hua-xiang-mu">¶</a><a href="javascript:void(0)" id="chu-shi-hua-xiang-mu" class="anchor-point"></a>初始化项目:</h4>\n<pre><code class="language-bash"><span class="token function">yarn</span> bootstrap</code></pre>\n<h4 class="anchor-heading"><a href="#dai-ma-mu-lu-jie-gou">¶</a><a href="javascript:void(0)" id="dai-ma-mu-lu-jie-gou" class="anchor-point"></a>代码目录结构</h4>\n<ul>\n<li>仓库包含两个 npm 包，代码都在 <code>packages</code> 目录下：<code>babel-plugin-zent</code> 以及 <code>zent</code>。</li>\n<li><code>site</code> 目录下是文档网站的代码，本地开发时可以在 <code>site</code> 目录下运行 <code>yarn dev</code> 开启文档网站。</li>\n</ul>\n<p>组件代码都在 <code>packages/zent</code> 目录下：</p>\n<pre><code class="language-text">packages<span class="token operator">/</span>zent\n├── __tests__       # 测试\n├── assets          # 样式代码\n├── docs            # 一些文档\n├── scripts         # 一些脚本，用于测试、发布等\n├── src             # 组件源码</code></pre>\n<h4 class="anchor-heading"><a href="#tian-jia-xin-zu-jian">¶</a><a href="javascript:void(0)" id="tian-jia-xin-zu-jian" class="anchor-point"></a>添加新组件</h4>\n<p>主要步骤：</p>\n<ul>\n<li>添加 Javascript 代码</li>\n<li>添加样式代码</li>\n<li>添加测试代码</li>\n<li>添加文档</li>\n</ul>\n<p>我们提供了一个脚本来自动化大部分初始化工作，在 <code>packages/zent</code> 目录下执行 <code>yarn new-component YOUR-COMPONENT-NAME</code>，脚本会自动创建组件需要的目录和样板代码。</p>\n<h4 class="anchor-heading"><a href="#wen-jian-ming-ming">¶</a><a href="javascript:void(0)" id="wen-jian-ming-ming" class="anchor-point"></a>文件命名</h4>\n<ul>\n<li>组件文件名字驼峰，例如 <code>ActionButton</code> 组件的文件名就是 <code>ActionsButton.js</code></li>\n<li>导出函数的文件名驼峰（首字母小写），一般和函数名字保持一致，例如 <code>withPop</code></li>\n<li>文件夹名字用 - 隔开，例如 <code>number-input</code></li>\n<li>demos文件夹中的Md文件名字用 - 隔开，例如 <code>with-close-btn</code></li>\n</ul>\n<h4 class="anchor-heading"><a href="#ben-di-ce-shi">¶</a><a href="javascript:void(0)" id="ben-di-ce-shi" class="anchor-point"></a>本地测试</h4>\n<p><code>__tests__</code> 里面只是单元测试，本地测试请在本地运行文档网站，确保每次修改代码文档都会有相应的更新。</p>\n<p>我们的原则是：文档即代码。</p>\n<pre><code class="language-bash"><span class="token function">yarn</span> dev</code></pre>\n<p>我们另外提供了一个命令用来运行单个组件的测试用例，传入组件在 <code>__tests__</code> 下的目录名或者文件名即可。</p>\n<pre><code class="language-bash"><span class="token function">yarn</span> test-component button</code></pre>\n<h2 class="anchor-heading"><a href="#zu-jian-wen-dang-ru-he-bian-xie">¶</a><a href="javascript:void(0)" id="zu-jian-wen-dang-ru-he-bian-xie" class="anchor-point"></a>组件文档如何编写</h2>\n<p>每个组件根目录下都有两个 README 文件，<code>README_zh-CN.md</code> (注意名称大写) 是中文文档，<code>README_en-US.md</code> 是英文文档。组件文档采用 Markdown 格式，具体书写规范请参考 <a href="markdown">组件文档书写规范</a>。</p>\n<h2 class="anchor-heading"><a href="#yi-xie-shi-yong-ji-qiao">¶</a><a href="javascript:void(0)" id="yi-xie-shi-yong-ji-qiao" class="anchor-point"></a>一些实用技巧</h2>\n<h4 class="anchor-heading"><a href="#zu-jian-hu-xiang-yin-yong">¶</a><a href="javascript:void(0)" id="zu-jian-hu-xiang-yin-yong" class="anchor-point"></a>组件互相引用</h4>\n<p>比如说 <code>Dialog</code> 里面引用了 <code>Portal</code> 组件，代码里支持 <code>import Portal from \'portal\';</code> 这样去引用，不需要写相对路径。</p>\n<h4 class="anchor-heading"><a href="#zu-jian-dao-chu">¶</a><a href="javascript:void(0)" id="zu-jian-dao-chu" class="anchor-point"></a>组件导出</h4>\n<p>为了统一管理，每个组件只能 <code>export default</code> 一个东西，如果需要导出多个变量，请把其余变量挂载在 <code>export default</code> 的变量上。</p>\n<p>导出的组件不要写成 <a href="https://facebook.github.io/react/docs/refs-and-the-dom.html#refs-and-functional-components">Functional Component</a>，这样子使用的时候没法加 <code>ref</code>，虽然不推荐用 <code>ref</code>，但是我们应该支持在组件上加 <code>ref</code>。</p>\n<h4 class="anchor-heading"><a href="#yang-shi">¶</a><a href="javascript:void(0)" id="yang-shi" class="anchor-point"></a>样式</h4>\n<p>组件样式使用 <code>precss</code>，语法请参考 <a href="https://github.com/jonathantneal/precss">precss 文档</a>.</p>\n<h4 class="anchor-heading"><a href="#guan-yu-z-index">¶</a><a href="javascript:void(0)" id="guan-yu-z-index" class="anchor-point"></a>关于 z-index</h4>\n<p>为了防止 <code>z-index</code> 滥用，我们规定了组件库内部的 <code>z-index</code> 使用规范。</p>\n<p><code>z-index</code> 优先级（从高到低）：</p>\n<ul>\n<li>特殊组件：Notify 永远在最上面，[10000, +∞)</li>\n<li>小范围的 ‘用完就关’ 的组件：Pop, Select, Datetimepicker, ColorPicker, Cascader 等 [2000, 3000)</li>\n<li>全屏幕的组件：Dialog, image-preview 等 [1000, 2000)</li>\n<li>其他：组件内部用来控制层次的 z-index 的区间 [-10, 10]，尽可能写小，一般1，2，3这种就够了。</li>\n</ul>'}))}}]),a}(j.Component)}}]);