Merge pull request #17 from zsjjs/v1.0.5

V1.0.5

Author: shaojun427

README.md

@@ -5,7 +5,7 @@
 ![gzip size](http://img.badgesize.io/https://npmcdn.com/react-field-mapping/dist/fieldmapping.js?compression=gzip)
 [![license](https://img.shields.io/badge/license-MIT-blue.svg?style=flat)](https://raw.githubusercontent.com/zsjjs/react-field-mapping/master/LICENSE)
 
-#### 基于react的表字段映射组件
+#### 关系映射组件
 
 ### 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.
 
@@ -79,7 +79,7 @@
     <td colspan="2">isSort</td>
     <td>是否开启字段排序</td>
     <td align="center">boolean</td>
-    <td align="center">true</td>
+    <td align="center">false</td>
   </tr>
   <tr>
     <td colspan="2">edit</td>

example/test.html

@@ -1,8 +1,8 @@
 /*
  * @Author: yanjun.zsj
- * @LastEditors: yanjun.zsj
+ * @LastEditors  : yanjun.zsj
  * @Date: 2019-03-11 16:43:26
- * @LastEditTime: 2019-11-21 17:51:13
+ * @LastEditTime : 2020-01-19 15:21:57
  */
 /* global React, ReactDOM  */
 const sourceCols = [
@@ -102,7 +102,8 @@ class App extends React.PureComponent {
             sourceData: data
           });
         },
-        columns: sourceCols
+        columns: sourceCols,
+        mutiple: true
       },
       target: {
         data: targetData,
@@ -111,7 +112,8 @@ class App extends React.PureComponent {
             targetData: data
           });
         },
-        columns: targetCols
+        columns: targetCols,
+        mutiple: true
       },
       relation: this.state.relation,
       // onDrawStart: (source, relation) => {
@@ -128,7 +130,7 @@ class App extends React.PureComponent {
           relation
         });
       },
-      isSort: true,
+      isSort: true
 
     };
     return <div>

example/test.js

@@ -1,6 +1,6 @@
 {
   "name": "react-field-mapping",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "基于react的表字段映射组件",
   "scripts": {
     "check": "jsinspect ./src",
@@ -57,13 +57,13 @@
     "cross-env": "^6.0.0",
     "css-loader": "^3.2.0",
     "less-loader": "^5.0.0",
+    "lodash": "^4.17.15",
+    "react": "^16.8.4",
+    "react-dom": "^16.8.4",
+    "sortablejs": "^1.7.0",
     "style-loader": "^1.0.0",
     "url-loader": "^2.1.0",
     "webpack": "^4.40.2",
-    "webpack-cli": "^3.3.9",
-    "lodash": "^4.17.11",
-    "react": "^16.8.4",
-    "react-dom": "^16.8.4",
-    "sortablejs": "^1.7.0"
+    "webpack-cli": "^3.3.9"
   }
 }

package.json

@@ -1,4 +1,5 @@
 import {Component} from 'react';
+import PropTypes from 'prop-types';
 import { isElement } from 'react-dom/test-utils';
 
 class Columns extends Component {
@@ -43,4 +44,13 @@ class Columns extends Component {
   }
 }
 
+Columns.propTypes = {
+  columns: PropTypes.array.isRequired,
+  columnOpt: PropTypes.func.isRequired,
+  sorting: PropTypes.bool.isRequired,
+  item: PropTypes.object.isRequired,
+  index: PropTypes.number.isRequired,
+  type: PropTypes.string.isRequired,
+  edit: PropTypes.bool.isRequired
+};
 export default Columns;

src/Columns.jsx

@@ -2,6 +2,7 @@
  * @date 2018.11
 */
 import {Component} from 'react';
+import PropTypes from 'prop-types';
 import { getOffset } from './util.js';
 import Line from './line.jsx';
 import _ from 'lodash';
@@ -32,11 +33,19 @@ class DrawLines extends Component {
     const box = document.querySelector('.react-field-mapping-box');
     let scrollTop = 0;
     let scrollLeft = 0;
+    let sourceDom = null;
     document.documentElement.onmousedown = (event) => {
       const eventDom = event.target;
+      sourceDom = eventDom;
       const className = eventDom && eventDom.className;
       if (className && typeof className === "string" && className.indexOf("source-column-icon") > -1) {
         event.preventDefault();
+        const relation = _.assign([], me.props.relation);
+        if(!me.props.sourceMutiple && _.find(relation, (o) => {
+          return o.source.key === me.domOperate(eventDom).key;
+        })) {
+          return;
+        }
         if(this.baseXY !== getOffset(this.drawEle)) {
           this.baseXY = getOffset(this.drawEle);
         }
@@ -45,7 +54,7 @@ class DrawLines extends Component {
         const sourceData = _.find(me.props.sourceData, (o) => {
           return o.key === this.domOperate(eventDom).key;
         });
-        me.props.onDrawStart && me.props.onDrawStart(sourceData, me.props.relation);
+        me.props.onDrawStart(sourceData, me.props.relation);
         me.props.changeIconStatus(sourceData);
         me.setState({
           startX: this.domOperate(eventDom).left,
@@ -64,7 +73,7 @@ class DrawLines extends Component {
     };
     document.documentElement.onmousemove = (event) => {
       if (this.state.drawing) {
-        me.props.onDrawing && me.props.onDrawing(me.state.sourceData, me.props.relation);
+        me.props.onDrawing(me.state.sourceData, me.props.relation);
         me.setState({
           endX: event.pageX - this.baseXY.left + scrollLeft,
           endY: event.pageY - this.baseXY.top + scrollTop
@@ -78,11 +87,14 @@ class DrawLines extends Component {
       const className = eventDom && eventDom.className;
       if (className && typeof className === "string" && className.indexOf("target-column-icon") > -1) {
         const relation = _.assign([], me.props.relation);
-        if(_.find(relation, (o) => {
+        if(!me.props.targetMutiple && _.find(relation, (o) => {// target不允许映射多次
           return o.target.key === me.domOperate(eventDom).key;
+        }) || _.find(relation, (o) => { // 过滤连线已存在的情况
+          return o.target.key === me.domOperate(eventDom).key && o.source.key === me.domOperate(sourceDom).key;
         })) {
           me.props.changeIconStatus();
           me.setState({...defaultState});
+          sourceDom = null;
           return;
         }
         const targetData = _.find(me.props.targetData, (o) => {
@@ -100,8 +112,9 @@ class DrawLines extends Component {
             ...targetData
           }
         });
-        me.props.onDrawEnd && me.props.onDrawEnd(sourceData, targetData, relation);
+        me.props.onDrawEnd(sourceData, targetData, relation);
         me.props.onChange(relation);
+        sourceDom = null;
       }
       me.props.changeIconStatus();
       me.setState({...defaultState});
@@ -133,7 +146,7 @@ class DrawLines extends Component {
   }
   render() {
     const { startX, startY, drawing, endX, endY } = this.state;
-    const { relation, currentRelation, edit } = this.props;
+    const { relation, currentRelation, edit, closeIcon } = this.props;
     return <div className="lines-area" ref={me => {this.drawEle = me;}}>
       <svg width="100%" height="100%" version="1.1"
            xmlns="http://www.w3.org/2000/svg">
@@ -160,6 +173,7 @@ class DrawLines extends Component {
             endY={item.target.y}
             data={item}
             edit={edit}
+            closeIcon={closeIcon}
             toTop={this.topLine.bind(this)}
             currentRelation={currentRelation}
             removeRelation={this.removeRelation.bind(this)}
@@ -179,4 +193,24 @@ class DrawLines extends Component {
   }
 }
 
+DrawLines.propTypes = {
+  sourceData: PropTypes.array.isRequired,
+  targetData: PropTypes.array.isRequired,
+  sourceMutiple: PropTypes.bool.isRequired,
+  targetMutiple: PropTypes.bool.isRequired,
+  onDrawStart: PropTypes.func,
+  onDrawing: PropTypes.func,
+  onDrawEnd: PropTypes.func,
+  relation: PropTypes.array.isRequired,
+  edit: PropTypes.bool.isRequired,
+  currentRelation: PropTypes.object.isRequired,
+  onChange: PropTypes.func.isRequired,
+  changeIconStatus: PropTypes.func.isRequired,
+  closeIcon: PropTypes.string
+};
+DrawLines.defaultProps = {
+  onDrawStart: () => {},
+  onDrawing: () => {},
+  onDrawEnd: () => {}
+};
 export default DrawLines;

src/drawLines.jsx

@@ -67,8 +67,8 @@ class FieldMapping extends Component {
   changeSource(oldIndex, newIndex) {
     const {
       source: {
-        data: sourceData,
-        onChange
+        data: sourceData = [],
+        onChange = () => {}
       }
     } = this.props;
     let data = _.assign([], sourceData);
@@ -84,8 +84,8 @@ class FieldMapping extends Component {
   changeTarget(oldIndex, newIndex) {
     const {
       target: {
-        data: targetData,
-        onChange
+        data: targetData = [],
+        onChange = () => {}
       }
     } = this.props;
     let data = _.assign([], targetData);
@@ -102,22 +102,24 @@ class FieldMapping extends Component {
     const { relation, iconStatus, currentRelation } = this.state;
     const {
       source: {
-        data: sourceData,
-        columns: sourceCols
+        data: sourceData = [],
+        columns: sourceCols = [],
+        mutiple: sourceMutiple = false
       },
       target: {
-        data: targetData,
-        columns: targetCols
+        data: targetData = [],
+        columns: targetCols = [],
+        mutiple: targetMutiple = false
       },
       className = "",
       style = {},
       isSort = false,
       onDrawStart,
       onDrawing,
       onDrawEnd,
-      edit
+      edit,
+      closeIcon
     } = this.props;
-
     const sourceOpt = {
       ref: (me) => {this.sourceCom = me;},
       iconStatus,
@@ -145,11 +147,14 @@ class FieldMapping extends Component {
     const drawLinesOpt = {
       sourceData,
       targetData,
+      sourceMutiple,
+      targetMutiple,
       onDrawStart,
       onDrawing,
       onDrawEnd,
       relation,
       edit,
+      closeIcon,
       currentRelation,
       onChange: this.changeRelation.bind(this),
       changeIconStatus: this.changeIconStatus.bind(this)
@@ -168,6 +173,7 @@ FieldMapping.propTypes = {
   source: PropTypes.shape({
     data: PropTypes.array, // required param key
     onChange: PropTypes.func, // 源表data改变后触发，目前只有排序会触发。isSort开启后，必须在外层同步。
+    mutiple: PropTypes.bool, //是否允许一个source连接多个target
     columns: PropTypes.arrayOf(PropTypes.shape({
       title: PropTypes.string.isRequired,
       key: PropTypes.string.isRequired,
@@ -183,6 +189,7 @@ FieldMapping.propTypes = {
   target: PropTypes.shape({
     data: PropTypes.array, // required param key
     onChange: PropTypes.func, // 目标表data改变后触发，目前只有排序会触发。
+    mutiple: PropTypes.bool, //是否允许多个source连接一个target
     columns: PropTypes.arrayOf(PropTypes.shape({
       title: PropTypes.string.isRequired,
       key: PropTypes.string.isRequired,
@@ -201,19 +208,22 @@ FieldMapping.propTypes = {
   onDrawStart: PropTypes.func,// function(params=source, relation)
   onDrawing: PropTypes.func,// function(params=source, relation)
   onDrawEnd: PropTypes.func,// function(params=source, relation)
-  edit: PropTypes.bool // 是否能操作线条编辑 default true
+  edit: PropTypes.bool, // 是否能操作线条编辑 default true
+  closeIcon: PropTypes.string // 关闭线条的icon url，不传用默认的关闭按钮
 };
 FieldMapping.defaultProps = {
   relation: [],
   source: {
     data: [],
     onChange: () => {},
-    columns: []
+    columns: [],
+    mutiple: false
   },
   target: {
     data: [],
     onChange: () => {},
-    columns: []
+    columns: [],
+    mutiple: false
   },
   edit: true
 };

src/fieldMapping.jsx

@@ -2,6 +2,8 @@
  * @date 2018.11
 */
 import {Component} from 'react';
+import PropTypes from 'prop-types';
+
 const iconSize = [12, 12];
 class Line extends Component {
   constructor(props) {
@@ -18,7 +20,8 @@ class Line extends Component {
       endY = 0,
       currentRelation,
       data,
-      edit
+      edit,
+      closeIcon
     } = this.props;
     return <g className={`path-end ${(currentRelation === data) ? "active" : ""} ${edit ? '' : 'disabled'}`} onMouseOver={() => {
       edit && this.props.toTop(this.props.data);
@@ -36,9 +39,20 @@ class Line extends Component {
         y={(endY + startY - iconSize[1])/2}
         width={iconSize[0]}
         height={iconSize[1]}
-        xlinkHref="//img.alicdn.com/tfs/TB1laCNsXYqK1RjSZLeXXbXppXa-200-200.png" />
+        xlinkHref={closeIcon || "//img.alicdn.com/tfs/TB1laCNsXYqK1RjSZLeXXbXppXa-200-200.png"} />
     </g>;
   }
 }
-
+Line.propTypes = {
+  startX: PropTypes.number.isRequired,
+  startY: PropTypes.number.isRequired,
+  endX: PropTypes.number.isRequired,
+  endY: PropTypes.number.isRequired,
+  data: PropTypes.object.isRequired,
+  edit: PropTypes.bool.isRequired,
+  toTop: PropTypes.func.isRequired,
+  currentRelation: PropTypes.object.isRequired,
+  removeRelation: PropTypes.func.isRequired,
+  closeIcon: PropTypes.string
+};
 export default Line;