@beisen/tms-transfer

Transfer使用说明

使用示例

const props = {
  data: [{
    text: '',                     // 显示文本
    role: 'left',                 // 显示在左框
    IsCustomListNecessary:false
  }],
  title: {
    left: '隐藏字段', // 显示标题：左侧框
    right: '显示字段' // 显示标题：右侧框
  },
  style: {
    width: '284px'   // 指两侧单框的宽度
  },
  multiSelect: {
    left: true,      // 左侧框支持多选（可每次操作多项）
    right: false     // 设置右侧框单选（每次操作单项）
  },
  showAdjust: true,                       // 是否显示右侧上下调整按钮
  disableDropLastOne: true,               // 当右侧剩余一个数据时，禁止移动到左侧队列
  onDragLastOne: function(){},            // 当右侧移动的是最后一个数据时的回调
  onTransfer: function({left,right}){},   // 抛数据接口函数
  act: {
    isReset: false,                       // 是否更新数据
    callback: function (isReset) {}
  },
  treeMode:false,
  hiddenTip: false,  // tooltips visibles   默认显示
  sideTip: false,    // tooltips direction  默认方向 top-bottom  
}

关于更新

willreceiveprops里定义了

当且仅当,this.props.act.isReset为false 并且 nextProps.act.isRest为true时引起更新

更新日志

• 2016-11-11 19-21：　支持单选/多选设置(默认多选)，支持右侧单项上下调整，支持reset
• 2016-11-12 10-34：　可设置是否显示上下调整按钮，默认显示,showAdjust={true}
• 2016-11-20 10:59：　修复拖拽样式，修改更新逻辑以适配业务

Beisen-module-template

功能

React组件开发，并发布到北森cnpm服务器

使用方法

1)空项目使用

第一步：git clone [e-mail]:cnpm/beisen-module-template.git

第二步：cd beisen-module-template

第三步：./renew.js 项目路径/项目名称

如执行./renew.js ../testDemo/   //**testDemo**为新项目名称，与该空项目平级，新项目不带git信息，一个纯的项目

第四步：cd ../testDemo/   //此时不带git信息的新项目testDemo建立完成

2)修改package.json

package.json中不允许出现中文

"name": "@beisen/ComponentName",
"author": {
    "name": "name",
    "email": "[e-mail]"
},
"description": "",
"keywords": [
	"beisen",
    "react-component",
    "es6",
    "karma",
    "jasmine"
],
"maintainers": [
	{
		"name": "name",
		"email": "[e-mail]"
	}
]

**组件名称（必填）---应首字母大写，若为多个单词拼接，则使用驼峰格式，如TabComponent**

**组件作者（必填）**

**组件概述（必填）**

**组件关键词（必填）eg.Form,Icon,DropDown...**

**维护人员 （必填)**

3) 项目文件结构

ReactComponent

—— dist
  |
  |—— index.js （webpack打包后的js)
  |
—— examples
  |
  |—— preview
    |—— 预览图.png （组件截图）
  |
  |—— index.html （可直接打开的示例）
  |
—— lib (babel转换后的语法 es6 —> es5)
  |
—— src
  |
  |—— index.js （组件源码，webpack打包入口）
  |
—— tests (测试文件夹)
  |
  | —— index-spec.js （测试用例）
  |
—— index.html  （组件调用）
  |
—— index.js （组件调用）
  |
—— karma.conf.js (karma配置)
  |
—— webpack.config.js (webpack配置)
  |
—— package.json （如有依赖，必须写全）
  |
—— README.md （组件使用说明，配置参数）

4) 项目运行、打包

• cnpm install 或 npm install cnpm使用教程
• npm run dev （开发环境打包 port:8080）
• npm run test （测试用例）
• npm run build （生产环境打包）

5) 组件开发流程

• 新建项目
• 项目导出
• 向组织提出申请，将项目加入cnpm组
• 申请通过后，项目作者需打tag

打tag后，请同步更新package.json中的version版本号，服务器会自动将项目同步或更新到cnpm库中，并添加官方授权，Beisen前端组件库会自动添加或更新组件信息（包含文档，示例和预览图）

应该使用0.1.0作为初始化开发版本。

具体版本信息参考语义化版本 2.0.0

6) 组件开发要求

• 必须要有文档，包括组件使用说明，配置参数，版本信息
• 必须要有使用示例
• 必须要有预览图
• 必须编写单元测试

[组件接入story步骤]:(http://note.youdao.com/share/?id=413ccdc6cd3570e8cb202468ea0a3696&type=note#/)

7) 组件开发规范

• 一个项目只能对应一个组件
• 纯react组件，不需要redux相关内容
• 如有依赖其他组件，必须在package.json中写全
• 最外层index.js不能命名为其他
• 统一使用ES6语法
• css统一使用sass, 2个空格缩进
• 代码应有适当注释，包括函数、参数
• 测试文件统一以“-spec”为结尾命名，如app-spec.js
• 预览图必须命名为preview.png，可以上传多幅预览图（组件平台会以preview.png为主），命名依次为preview1.png、preview2.png依此类推
• PropTypes定义规范如下：

import React, {Component, PropTypes} from 'react'

class Demo extends Component {
  render() {
    return <h1>hello world</h1>
  }
}

Demo.propTypes = {
  total: PropTypes.number,
  next_text: PropTypes.string,
  callback: PropTypes.func
}

module.exports = Demo;

React书写规范

每个文件只包含一个React组件

使用JSX语法

Class vs React.createClass

// bad
const Listing = React.createClass({
  render() {
    return <div />;
  }
});

// good
class Listing extends React.Component {
  render() {
    return <div />;
  }
}

对于 JSX 使用双引号，对其它所有 JS 属性使用单引号

// bad
  <Foo style={{ left: '20px' }} />

  // good
  <Foo style={{ left: "20px" }} />

在自闭和标签之前留一个空格，若组件无子组件也应使用自闭标签

// bad
<Foo/>

// very bad
<Foo                 />

// bad
<Foo
 />

// good
<Foo />

如果组件有多行属性，闭合标签应写在新的一行上

// bad
<Foo
bar="bar"
baz="baz" />

// good
<Foo
  bar="bar"
  baz="baz"
/>

生命周期 Composite Component

* - constructor
*   - componentWillMount
*   - render
*   - [children's construtors]
*     - [children's componentWillMount and render]
*     - [children's componentDidMount]
*     - componentDidMount
*
*       Update Phase:
*       - componentWillReceiveProps (only called if parent updated)
*       - shouldComponentUpdate
*		  - componentWillUpdate
*           - render
* 			- [children's constructors or receive props phase]
*         - componentDidUpdate
*
* 	    - componentWillUnmount
*  		- [children's componentWillUnmount]
*	- [children's destroyed]
* - (destroyed)

执行顺序

constructor
optional static methods
getChildContext
componentWillMount
componentDidMount
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
componentDidUpdate
componentWillUnmount
clickHandlers or eventHandlers like onClickSubmit() or onChangeDescription()
getter methods for render like getSelectReason() or getFooterContent()
Optional render methods like renderNavigation() or renderProfilePicture()
render

参考资料

• 北森前端TalentUI开发文档

• React官方文档

• ES6语法

• Jasmine行为驱动测试官方文档