Merge pull request #15 from zsjjs/v1.0.4

V1.0.4

Author: shaojun427

.babelrc

@@ -1,6 +1,14 @@
 {
-  "presets": ["react", "es2015", "stage-3"],
+  "presets": ["@babel/preset-react", "@babel/preset-env"],
   "plugins": [
-    "transform-runtime"
+    "@babel/plugin-transform-runtime",
+    ["@babel/plugin-proposal-class-properties", { "loose": true }],
+    // Stage 1
+    "@babel/plugin-proposal-export-default-from",
+    "@babel/plugin-proposal-logical-assignment-operators",
+    ["@babel/plugin-proposal-optional-chaining", { "loose": false }],
+    ["@babel/plugin-proposal-pipeline-operator", { "proposal": "minimal" }],
+    ["@babel/plugin-proposal-nullish-coalescing-operator", { "loose": false }],
+    "@babel/plugin-proposal-do-expressions"
   ]
 }

README.md

@@ -81,6 +81,12 @@
     <td align="center">boolean</td>
     <td align="center">true</td>
   </tr>
+  <tr>
+    <td colspan="2">edit</td>
+    <td>线条是否可以拖动/删除（如果需要预览态，isSort不能为true）</td>
+    <td align="center">boolean</td>
+    <td align="center">true</td>
+  </tr>
   <tr>
     <td colspan="2">relation</td>
     <td>默认已映射数据</td>

example/test.js

@@ -2,7 +2,7 @@
  * @Author: yanjun.zsj
  * @LastEditors: yanjun.zsj
  * @Date: 2019-03-11 16:43:26
- * @LastEditTime: 2019-09-04 11:57:46
+ * @LastEditTime: 2019-11-21 17:51:13
  */
 /* global React, ReactDOM  */
 const sourceCols = [
@@ -128,7 +128,8 @@ class App extends React.PureComponent {
           relation
         });
       },
-      isSort: true
+      isSort: true,
+
     };
     return <div>
       <div>

package.json

@@ -31,32 +31,39 @@
     "LICENSE"
   ],
   "devDependencies": {
-    "babel-eslint": "^10.0.1",
-    "eslint": "^5.0.1",
-    "eslint-loader": "^2.0.0",
-    "eslint-plugin-react": "^7.10.0",
+    "@babel/plugin-proposal-class-properties": "^7.7.0",
+    "@babel/plugin-proposal-do-expressions": "^7.6.0",
+    "@babel/plugin-proposal-export-default-from": "^7.5.2",
+    "@babel/plugin-proposal-logical-assignment-operators": "^7.2.0",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.4.4",
+    "@babel/plugin-proposal-optional-chaining": "^7.6.0",
+    "@babel/plugin-proposal-pipeline-operator": "^7.5.0",
+    "babel-eslint": "^10.0.3",
+    "eslint": "^6.4.0",
+    "eslint-loader": "^3.0.0",
+    "eslint-plugin-react": "^7.14.3",
     "jsinspect": "^0.12.7",
-    "less": "^3.8.1",
-    "webpack-dev-server": "^3.1.5"
+    "less": "^3.10.3",
+    "webpack-dev-server": "^3.8.1"
   },
   "dependencies": {
-    "babel-core": "^6.26.3",
-    "babel-loader": "^7.1.2",
-    "babel-plugin-transform-runtime": "^6.23.0",
-    "babel-preset-env": "^1.6.0",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-react": "^6.24.1",
-    "babel-preset-stage-3": "^6.24.1",
-    "cross-env": "^5.1.1",
-    "css-loader": "^0.28.7",
-    "less-loader": "^4.0.5",
+    "@babel/core": "^7.6.0",
+    "@babel/plugin-transform-runtime": "^7.6.0",
+    "@babel/polyfill": "^7.6.0",
+    "@babel/preset-env": "^7.6.0",
+    "@babel/preset-react": "^7.0.0",
+    "@babel/runtime": "^7.6.0",
+    "babel-loader": "^8.0.6",
+    "cross-env": "^6.0.0",
+    "css-loader": "^3.2.0",
+    "less-loader": "^5.0.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",
-    "style-loader": "^0.19.0",
-    "url-loader": "^0.6.2",
-    "webpack": "^4.16.5",
-    "webpack-cli": "^3.1.0"
+    "sortablejs": "^1.7.0"
   }
 }

src/Columns.jsx

@@ -16,7 +16,7 @@ class Columns extends Component {
     return result;
   }
   render() {
-    const { item, index, columnOpt, sorting, columns, type } = this.props;
+    const { item, index, columnOpt, sorting, columns, type, edit } = this.props;
     return <li {...columnOpt(item, index)} >
       {
         columns.map((column, idx) => {
@@ -38,7 +38,7 @@ class Columns extends Component {
           );
         })
       }
-      <div style={{visibility: item.iconShow}} className={`column-icon ${type}-column-icon ${sorting ? "sorting" : ""}`}></div>
+      <div style={{visibility: edit && item.iconShow}} className={`column-icon ${type}-column-icon ${sorting ? "sorting" : ""} ${edit ? "" : "disabled"}`}></div>
     </li>;
   }
 }

src/drawLines.jsx

@@ -16,30 +16,30 @@ const defaultState = {
 };
 
 class DrawLines extends Component {
+  baseXY = {
+    left: 0,
+    top: 0
+  }
   constructor(props) {
     super(props);
     this.state = {
-      baseXY:{
-        left: 0,
-        top: 0
-      },
       ...defaultState
     };
   }
   componentDidMount() {
     const me = this;
-    const baseXY = getOffset(this.drawEle);
+    this.baseXY = getOffset(this.drawEle);
     const box = document.querySelector('.react-field-mapping-box');
     let scrollTop = 0;
     let scrollLeft = 0;
-    this.setState({
-      baseXY
-    });
     document.documentElement.onmousedown = (event) => {
       const eventDom = event.target;
       const className = eventDom && eventDom.className;
       if (className && typeof className === "string" && className.indexOf("source-column-icon") > -1) {
         event.preventDefault();
+        if(this.baseXY !== getOffset(this.drawEle)) {
+          this.baseXY = getOffset(this.drawEle);
+        }
         let scrollEle = box;
         document.body.classList.add("user-select-none");
         const sourceData = _.find(me.props.sourceData, (o) => {
@@ -66,8 +66,8 @@ class DrawLines extends Component {
       if (this.state.drawing) {
         me.props.onDrawing && me.props.onDrawing(me.state.sourceData, me.props.relation);
         me.setState({
-          endX: event.pageX - baseXY.left + scrollLeft,
-          endY: event.pageY - baseXY.top + scrollTop
+          endX: event.pageX - this.baseXY.left + scrollLeft,
+          endY: event.pageY - this.baseXY.top + scrollTop
         });
       }
     };
@@ -111,8 +111,8 @@ class DrawLines extends Component {
   }
   domOperate(eventDom) {
     return {
-      left: getOffset(eventDom).left - this.state.baseXY.left + 6,
-      top: getOffset(eventDom).top - this.state.baseXY.top + 6,
+      left: getOffset(eventDom).left - this.baseXY.left + 3,
+      top: getOffset(eventDom).top - this.baseXY.top + 6,
       key: eventDom.offsetParent.getAttribute('data-key')
     };
   }
@@ -133,7 +133,7 @@ class DrawLines extends Component {
   }
   render() {
     const { startX, startY, drawing, endX, endY } = this.state;
-    const { relation, currentRelation } = this.props;
+    const { relation, currentRelation, edit } = 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">
@@ -159,6 +159,7 @@ class DrawLines extends Component {
             endX={item.target.x}
             endY={item.target.y}
             data={item}
+            edit={edit}
             toTop={this.topLine.bind(this)}
             currentRelation={currentRelation}
             removeRelation={this.removeRelation.bind(this)}

src/fieldMapping.jsx

@@ -108,15 +108,14 @@ class FieldMapping extends Component {
       target: {
         data: targetData,
         columns: targetCols
-      }
-    } = this.props;
-    const {
+      },
       className = "",
       style = {},
       isSort = false,
       onDrawStart,
       onDrawing,
-      onDrawEnd
+      onDrawEnd,
+      edit
     } = this.props;
 
     const sourceOpt = {
@@ -127,6 +126,7 @@ class FieldMapping extends Component {
       data: sourceData,
       currentRelation,
       isSort,
+      edit,
       changeData: this.changeSource.bind(this),
       overActive: this.overActive.bind(this)
     };
@@ -138,6 +138,7 @@ class FieldMapping extends Component {
       data: targetData,
       currentRelation,
       isSort,
+      edit,
       changeData: this.changeTarget.bind(this),
       overActive: this.overActive.bind(this)
     };
@@ -148,6 +149,7 @@ class FieldMapping extends Component {
       onDrawing,
       onDrawEnd,
       relation,
+      edit,
       currentRelation,
       onChange: this.changeRelation.bind(this),
       changeIconStatus: this.changeIconStatus.bind(this)
@@ -198,7 +200,8 @@ FieldMapping.propTypes = {
   onChange: PropTypes.func, // function(param= relation)
   onDrawStart: PropTypes.func,// function(params=source, relation)
   onDrawing: PropTypes.func,// function(params=source, relation)
-  onDrawEnd: PropTypes.func// function(params=source, relation)
+  onDrawEnd: PropTypes.func,// function(params=source, relation)
+  edit: PropTypes.bool // 是否能操作线条编辑 default true
 };
 FieldMapping.defaultProps = {
   relation: [],
@@ -211,6 +214,7 @@ FieldMapping.defaultProps = {
     data: [],
     onChange: () => {},
     columns: []
-  }
+  },
+  edit: true
 };
 export default FieldMapping;

src/fieldMapping.less

@@ -97,6 +97,9 @@ body {
               &.sorting {
                 visibility: hidden!important;
               }
+              &.disabled {
+                visibility: hidden!important;
+              }
             }
           }
         }
@@ -137,7 +140,8 @@ body {
         .icon-remove {
           opacity: 0;
         }
-        &.path-end:hover, &.path-end.active {
+        &.path-end:hover,
+        &.path-end.active {
           fill: #00A2CA;
           cursor: pointer;
           .line {
@@ -148,6 +152,16 @@ body {
             opacity: 1;
           }
         }
+        &.path-end.disabled {
+          cursor: initial;
+          .line {
+            stroke: #33B5D4;
+            stroke-width: 2px;
+          }
+          .icon-remove {
+            opacity: 0;
+          }
+        }
       }
     }
   }

src/line.jsx

@@ -17,11 +17,14 @@ class Line extends Component {
       endX = 0,
       endY = 0,
       currentRelation,
-      data
+      data,
+      edit
     } = this.props;
-    return <g className={`path-end ${(currentRelation === data) ? "active" : ""}`} onMouseOver={() => {
-      this.props.toTop(this.props.data);
-    }} onClick={this.removeHandle.bind(this)}>
+    return <g className={`path-end ${(currentRelation === data) ? "active" : ""} ${edit ? '' : 'disabled'}`} onMouseOver={() => {
+      edit && this.props.toTop(this.props.data);
+    }} onClick={() => {
+      edit && this.removeHandle();
+    }}>
       <path
         className="line"
         d={`M${startX}, ${startY} L${endX}, ${endY}`}

src/sourceData.jsx

@@ -68,7 +68,8 @@ class SourceData extends Component {
       data,
       iconStatus,
       overActive,
-      relation
+      relation,
+      edit
     } = this.props;
     const { sorting } = this.state;
     const columnOpt = (item, index) => {
@@ -125,6 +126,7 @@ class SourceData extends Component {
                 item={item}
                 index={index}
                 type="source"
+                edit={edit}
               />
             );
           })