Skip to content

Commit

Permalink
Merge pull request #6 from zsjjs/v1.0.0
Browse files Browse the repository at this point in the history
功能优化
  • Loading branch information
shaojun427 authored Jul 29, 2019
2 parents 2dd50d9 + abd5c3a commit 13c7eb7
Show file tree
Hide file tree
Showing 12 changed files with 370 additions and 194 deletions.
125 changes: 70 additions & 55 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,114 +7,129 @@

#### 基于react的表字段映射组件

### View the <a href="https://codepen.io/godIsMe/pen/NEOdXJ">Demo</a> and its <a href="https://github.com/zsjjs/react-field-mapping/blob/master/example/test.js">source</a> for more.
### View the <a href="https://codepen.io/godIsMe/pen/xvgYdx">Demo</a> and its <a href="https://github.com/zsjjs/react-field-mapping/blob/master/example/test.js">source</a> for more.

``` js
import FieldMapping from 'react-field-mapping';
const sourceData = new Array(7).fill().map((item, idx) => ({
name: `field${idx + 1}`,
type: 'string'
}));
const targetData = new Array(11).fill().map((item, idx) => ({
name: `field${idx + 4}`,
type: 'string'
}));
class App extends React.Component {
render() {
const option = {
sourceData: sourceData,
targetData: targetData,
onChange: () => {
this.setState({
sourceData: this.mapping.current.state.sourceData,
targetData: this.mapping.current.state.targetData
});
}
};
return <FieldMapping {...option} />
}
};
```

##### API
### API

#### FieldMapping

<table border="1">
<tr>
<th>参数</th>
<th colspan="2">参数</th>
<th>说明</th>
<th align="center">类型</th>
<th align="center">默认值</th>
</tr>
<tr>
<td>className</td>
<td colspan="2">className</td>
<td>自定义class</td>
<td align="center">string</td>
<td align="center">""</td>
</tr>
<tr>
<td>style</td>
<td colspan="2">style</td>
<td>自定义style</td>
<td align="center">object</td>
<td align="center">{}</td>
</tr>
<tr>
<td>sourceTitle</td>
<td>源数据表头</td>
<td align="center">object{name, type}]</td>
<td align="center">{name:"源表字段",type:"类型"}</td>
</tr>
<tr>
<td>sourceData</td>
<td>源数据表</td>
<td align="center">array[{name, type}]</td>
<td rowspan="3">source</td>
<td>data</td>
<td align="center">源表数据(受控)</td>
<td align="center">array</td>
<td align="center">[]</td>
</tr>
<tr>
<td>targetTitle</td>
<td>目标数据表头</td>
<td align="center">object{name, type}]</td>
<td align="center">{name:"目标表字段",type:"类型"}</td>
<td>columns</td>
<td>表格列的配置描述,具体项见下表</td>
<td align="center">ColumnProps[]</td>
<td align="center">[]</td>
</tr>
<tr>
<td>targetData</td>
<td>目标数据表</td>
<td align="center">array[{name, type}]</td>
<td align="center">[]</td>
<td>onChange</td>
<td>
表数据change监听,目前只有sort会触发,且开启sort时必须同步源表数据后,sort才会生效
</td>
<td align="center">function</td>
<td align="center">(sourceData) => {}</td>
</tr>
<tr>
<td>isSort</td>
<td colspan="2">isSort</td>
<td>是否开启字段排序</td>
<td align="center">boolean</td>
<td align="center">true</td>
</tr>
<tr>
<td>relation</td>
<td colspan="2">relation</td>
<td>默认已映射数据</td>
<td align="center">array[{source:{name,type}, target:{name,type}}]</td>
<td align="center">[]</td>
</tr>
<tr>
<td>onChange</td>
<td>映射变化监听</td>
<td colspan="2">onChange</td>
<td>关联变化监听</td>
<td align="center">function(relation)</td>
<td align="center">-</td>
</tr>
<tr>
<td>onDrawStart</td>
<td colspan="2">onDrawStart</td>
<td>开始关联监听</td>
<td align="center">function(source, relation)</td>
<td align="center">-</td>
</tr>
<tr>
<td>onDrawing</td>
<td colspan="2">onDrawing</td>
<td>关联进行中监听</td>
<td align="center">object</td>
<td align="center">-</td>
</tr>
<tr>
<td>onDrawEnd</td>
<td colspan="2">onDrawEnd</td>
<td>关联结束监听</td>
<td align="center">function(source, relation)</td>
<td align="center">-</td>
</tr>
</table>

####Column

#####列描述数据对象,是 columns 中的一项,Column 使用相同的 API。

<table border="1">
<tr>
<th colspan="2">参数</th>
<th>说明</th>
<th align="center">类型</th>
<th align="center">默认值</th>
</tr>
<tr>
<td colspan="2">align</td>
<td>设置列的对齐方式</td>
<td align="center">'left' | 'right' | 'center'</td>
<td align="center">‘left</td>
</tr><tr>
<td colspan="2">key</td>
<td>列数据在数据项中对应的 key</td>
<td align="center">string</td>
<td align="center"></td>
</tr><tr>
<td colspan="2">render</td>
<td>生成复杂数据的渲染函数,参数分别为当前行的值</td>
<td align="center">
Function(text, record, index) {} | string | Element
</td>
<td align="center"></td>
</tr><tr>
<td colspan="2">title</td>
<td>列头显示文字</td>
<td align="center">string</td>
<td align="center"></td>
</tr>
<tr>
<td colspan="2">width</td>
<td>列宽度</td>
<td align="center">string</td>
<td align="center">'100px'</td>
</tr>
</table>
79 changes: 54 additions & 25 deletions example/test.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,25 @@
* @Author: yanjun.zsj
* @LastEditors: yanjun.zsj
* @Date: 2019-03-11 16:43:26
* @LastEditTime: 2019-05-09 15:02:33
* @LastEditTime: 2019-07-29 17:05:54
*/
const sourceData = new Array(7).fill().map((item, idx) => ({
name: `field${idx + 1}`,
type: 'string'
}));
const targetData = new Array(11).fill().map((item, idx) => ({
name: `field${idx + 4}`,
type: 'string'
}));

/* global React, ReactDOM */
const sourceCols = [
{ title: '源表字段', key: 'name', width: '80px' },
{ title: '类型', key: 'type', width: '100px' },
{ title: '描述', key: 'desc', width: '150px' },
{ title: '操作', key: 'operate', width: '80px', align: 'center', render: (value, record) => {
return <a href="javascript:void(0);" onClick={
() => {
alert(JSON.stringify(record));
}
}>查看详情</a>;
}}
];
const targetCols = [
{ title: '目标表字段', key: 'name', width: '50%' },
{ title: '类型', key: 'type', width: '50%' }
];
class App extends React.PureComponent {
mapping = React.createRef();
constructor(props) {
Expand All @@ -28,8 +36,18 @@ class App extends React.PureComponent {
type: "xxxxxx"
}
}],
sourceData,
targetData
sourceData: new Array(7).fill().map((item, idx) => ({
name: `field${idx + 1}`,
type: 'string',
key: `field${idx + 1}`,
desc: `这是表字段field${idx + 1}`,
operate: `测试${idx}`
})),
targetData: new Array(11).fill().map((item, idx) => ({
name: `field${idx + 4}`,
type: 'string',
key: `field${idx + 4}`
}))
};
}
getRelation() {
Expand Down Expand Up @@ -78,30 +96,41 @@ class App extends React.PureComponent {
});
}
render() {
const { sourceData, targetData } = this.state;
const option = {
ref: this.mapping,
sourceData: sourceData,
targetTitle: {
name: "自定义表头1",
type: "自定义表头2"
source: {
data: sourceData,
onChange: (data) => { // isSort开启后,必须开启才会生效
this.setState({
sourceData: data
});
},
columns: sourceCols
},
target: {
data: targetData,
onChange: (data) => {
this.setState({
targetData: data
});
},
columns: targetCols
},
targetData: targetData,
relation: this.state.relation,
// onDrawStart: (source, relation) => {
// console.log("onDrawStart: ", source, relation);
// },
// onDrawing: (source, relation) => {
// console.log("onDrawing: ", source, relation);
// },
// onDrawEnd: (source, relation) => {
// onDrawEnd: (source, target, relation) => {
// console.log("onDrawEnd: ", source, relation);
// },
onChange: () => {
this.setState({
sourceData: this.mapping.current.state.sourceData,
targetData: this.mapping.current.state.targetData
});
}
// onChange(relation) {
// console.log(relation);
// },
isSort: true
};
return <div>
<div>
Expand All @@ -118,7 +147,7 @@ class App extends React.PureComponent {
</div>
</div>;
}
};
}

ReactDOM.render(
<App />,
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-field-mapping",
"version": "0.1.4",
"version": "1.0.0",
"description": "基于react的表字段映射组件",
"scripts": {
"check": "jsinspect ./src",
Expand Down
46 changes: 46 additions & 0 deletions src/Columns.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import {Component} from 'react';
import { isElement } from 'react-dom/test-utils';

class Columns extends Component {
constructor(props) {
super(props);
}
customRender(opts, data, idx) {
const { key, render } = opts;
let result = false;
if(isElement(render) || typeof render === 'string') {
result = render;
} else if (typeof render === 'function') {
result = render(data[key], data, idx);
}
return result;
}
render() {
const { item, index, columnOpt, sorting, columns, type } = this.props;
return <li {...columnOpt(item, index)} >
{
columns.map((column, idx) => {
return (
<span
key={column.key}
className="column-item"
style={{
width: column.width,
textAlign: column.align
}}
title={item[column.key] || ''}
>
{
this.customRender(column, item, idx) ||
item[column.key]
}
</span>
);
})
}
<div style={{visibility: item.iconShow}} className={`column-icon ${type}-column-icon ${sorting ? "sorting" : ""}`}></div>
</li>;
}
}

export default Columns;
8 changes: 4 additions & 4 deletions src/drawLines.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ class DrawLines extends Component {
let scrollEle = box;
document.body.classList.add("user-select-none");
const sourceData = _.find(me.props.sourceData, (o) => {
return o.name === this.domOperate(eventDom).fieldName;
return o.name === this.domOperate(eventDom).key;
});
me.props.onDrawStart && me.props.onDrawStart(sourceData, me.props.relation);
me.props.changeIconStatus(sourceData);
Expand Down Expand Up @@ -80,14 +80,14 @@ class DrawLines extends Component {
if (className && typeof className === "string" && className.indexOf("target-column-icon") > -1) {
const relation = _.assign([], me.props.relation);
if(_.find(relation, (o) => {
return o.target.name === me.domOperate(eventDom).fieldName;
return o.target.name === me.domOperate(eventDom).key;
})) {
me.props.changeIconStatus();
me.setState({...defaultState});
return;
}
const targetData = _.find(me.props.targetData, (o) => {
return o.name === me.domOperate(eventDom).fieldName;
return o.name === me.domOperate(eventDom).key;
});
relation.push({
source: {
Expand All @@ -114,7 +114,7 @@ class DrawLines extends Component {
return {
left: getOffset(eventDom).left - this.state.baseXY.left + 6,
top: getOffset(eventDom).top - this.state.baseXY.top + 6,
fieldName: eventDom.offsetParent.getAttribute('data-key')
key: eventDom.offsetParent.getAttribute('data-key')
};
}
removeRelation(removeNode) {
Expand Down
Loading

0 comments on commit 13c7eb7

Please sign in to comment.