131-a28f22da2d828c0b81f9.js

webpackJsonp([131],{1525:function(e,a,n){"use strict";function t(e){return e&&e.__esModule?e:{default:e}}function o(e){return y.default.createElement(e.tag,(0,v.default)({},e.attributes,{dangerouslySetInnerHTML:{__html:e.html}}))}function c(e){return y.default.createElement(o,{tag:"section",html:e.html,attributes:{className:"zandoc-react-markdown"}})}function i(e){return y.default.createElement(o,{tag:"style",html:e.style})}function d(e,a){for(;e;)return e.offsetTop&&"static"!==getComputedStyle(e).position&&(a+=e.offsetTop),d(e.parentNode,a);return a}Object.defineProperty(a,"__esModule",{value:!0});var r=n(1),s=t(r),l=n(4),h=t(l),u=n(2),p=t(u),f=n(3),m=t(f),g=n(7),v=t(g),_=n(0),y=t(_),z=n(232),j=t(z),b=(function(e){function a(){var e,n,t,o;(0,s.default)(this,a);for(var c=arguments.length,i=Array(c),d=0;d<c;d++)i[d]=arguments[d];return n=t=(0,p.default)(this,(e=a.__proto__||Object.getPrototypeOf(a)).call.apply(e,[this].concat(i))),t.state={showCode:!1},t.toggle=function(){t.setState({showCode:!t.state.showCode})},o=n,(0,p.default)(t,o)}(0,m.default)(a,e),(0,h.default)(a,[{key:"render",value:function(){var e=this.state.showCode,a=this.props,n=a.title,t=a.src,c=a.children;return y.default.createElement("div",{className:"zandoc-react-demo"},y.default.createElement("div",{className:"zandoc-react-demo__preview"},c),y.default.createElement("div",{className:"zandoc-react-demo__bottom",onClick:this.toggle},y.default.createElement("div",{className:"zandoc-react-demo__title"},y.default.createElement("p",null,n||"")),y.default.createElement("i",{className:"zenticon zenticon-caret-up zandoc-react-demo__toggle "+(e?"zandoc-react-demo__toggle-on":"zandoc-react-demo__toggle-off")})),e&&y.default.createElement("pre",{className:"zandoc-react-demo__code"},y.default.createElement(o,{tag:"code",html:t,attributes:{className:"language-jsx"}})))}}])}(_.Component),function(e){function a(){return(0,s.default)(this,a),(0,p.default)(this,(a.__proto__||Object.getPrototypeOf(a)).apply(this,arguments))}return(0,m.default)(a,e),(0,h.default)(a,[{key:"componentDidMount",value:function(){var e=location.hash;if(e){var a=document.querySelector('a[href="'+e+'"]');a&&(0,j.default)(document.documentElement,0,d(a,-9))}}},{key:"render",value:function(){return y.default.createElement("div",{className:"zandoc-react-container",key:null},y.default.createElement(i,{style:""}),y.default.createElement(c,{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">yarn 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             # 组件源码\n├── typings         # typescript 的定义文件</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<li>添加 Typescript 的定义</li>\n</ul>\n<p>我们提供了一个脚本来自动化大部分初始化工作，在 <code>packages/zent</code> 目录下执行 <code>yarn new-component YOUR-COMPONENT-NAME</code>，脚本会自动创建组件需要的目录和样板代码。</p>\n<p>代码写完之后还需要在 <code>packages/zent/typings</code> 目录下添加新组建对应的 Typescript 类型定义。</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">yarn dev</code></pre>\n<p>我们另外提供了一个命令用来运行单个组件的测试用例，传入组件在 <code>__tests__</code> 下的目录名或者文件名即可。</p>\n<pre><code class="language-bash">yarn 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}(_.Component));a.default=b}});