Merge pull request #20 from zsjjs/v1.1.1

V1.1.1

.eslintrc.js

@@ -2,15 +2,16 @@
  * @date 2018.11
 */
 module.exports = {
+  "parser":  "@typescript-eslint/parser",
   "env": {
     "browser": true,
     "commonjs": true,
     "es6": true
   },
   "extends": [
-    "eslint:recommended"
+    "eslint:recommended",
+    'plugin:@typescript-eslint/recommended'
   ],
-  "parser": "babel-eslint",
   "parserOptions": {
     "ecmaFeatures": {
       "jsx": true
@@ -19,7 +20,8 @@ module.exports = {
     "sourceType": "module"
   },
   "plugins": [
-    "react"
+    "react",
+    "@typescript-eslint"
   ],
   "rules": {
     //可以使用console
@@ -70,7 +72,7 @@ module.exports = {
     "prefer-const": 2,
     //要求使用模板字面量而非字符串连接
     "prefer-template": 2,
-    //在定义对象或数组时，最后一项不能加逗号
-    "comma-dangle": [2, "never"]
+    "@typescript-eslint/no-var-requires": 0,
+    "@typescript-eslint/no-empty-function": 0
   }
 };

README.md

@@ -101,7 +101,7 @@
   </tr>
   <tr>
     <td colspan="2">relation</td>
-    <td>默认已映射数据</td>
+    <td>映射数据（不受控，但是不等同default，可以update）</td>
     <td align="center">array[{source:{name,type}, target:{name,type}}]</td>
     <td align="center">[]</td>
   </tr>

example/test.js

@@ -4,7 +4,7 @@
  * @Date: 2019-03-11 16:43:26
  * @LastEditTime : 2020-01-19 15:21:57
  */
-/* global React, ReactDOM  */
+/* eslint-disable */
 const sourceCols = [
   { title: '源表字段', key: 'name', width: '80px' },
   { title: '类型', key: 'type', width: '100px' },

global.d.ts

@@ -0,0 +1,9 @@
+declare interface Window {
+  FieldMapping: any
+}
+
+declare module '*.less' {
+  const content: {[className: string]: string};
+  export default content;
+}
+

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-field-mapping",
-  "version": "1.0.6",
+  "version": "1.1.1",
   "description": "基于react的表字段映射组件",
   "scripts": {
     "check": "jsinspect ./src",
@@ -12,6 +12,8 @@
     "react",
     "drag",
     "js",
+    "ts",
+    "typeScript",
     "npm",
     "field",
     "table",
@@ -22,7 +24,6 @@
   "author": "yanjun",
   "license": "MIT",
   "main": "dist/fieldmapping.js",
-  "jsnext:main": "src/index.js",
   "repository": "https://github.com/zsjjs/react-field-mapping.git",
   "files": [
     "dist",
@@ -31,29 +32,34 @@
     "LICENSE"
   ],
   "devDependencies": {
+    "@babel/core": "^7.6.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/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",
+    "@types/react": "^16.9.32",
+    "@types/react-dom": "^16.9.6",
+    "@typescript-eslint/eslint-plugin": "^2.27.0",
+    "@typescript-eslint/parser": "^2.27.0",
     "babel-eslint": "^10.0.3",
+    "babel-loader": "^8.0.6",
     "eslint": "^6.4.0",
-    "eslint-loader": "^3.0.0",
+    "eslint-loader": "^4.0.0",
     "eslint-plugin-react": "^7.14.3",
+    "fork-ts-checker-webpack-plugin": "^4.1.3",
     "jsinspect": "^0.12.7",
     "less": "^3.10.3",
     "webpack-dev-server": "^3.8.1"
   },
   "dependencies": {
-    "@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",
@@ -62,6 +68,8 @@
     "react-dom": "^16.8.4",
     "sortablejs": "^1.7.0",
     "style-loader": "^1.0.0",
+    "ts-loader": "^6.2.2",
+    "typescript": "^3.8.3",
     "url-loader": "^2.1.0",
     "webpack": "^4.40.2",
     "webpack-cli": "^3.3.9"

src/Columns.jsx → src/Columns.tsx

@@ -1,22 +1,24 @@
-import {Component} from 'react';
-import PropTypes from 'prop-types';
+import React from 'react';
 import { isElement } from 'react-dom/test-utils';
+import { ColumnsProps } from './types';
 
-class Columns extends Component {
+class Columns extends React.Component<ColumnsProps, null> {
   constructor(props) {
     super(props);
   }
-  customRender(opts, data, idx) {
+
+  customRender(opts, data, idx): boolean {
     const { key, render } = opts;
     let result = false;
-    if(isElement(render) || typeof render === 'string') {
+    if (isElement(render) || typeof render === 'string') {
       result = render;
     } else if (typeof render === 'function') {
       result = render(data[key], data, idx);
     }
     return result;
   }
-  render() {
+
+  render(): React.ReactElement {
     const { item, index, columnOpt, sorting, columns, type, edit } = this.props;
     return <li {...columnOpt(item, index)} >
       {
@@ -28,7 +30,7 @@ class Columns extends Component {
               style={{
                 width: column.width,
                 textAlign: column.align
-              }}
+              } as React.CSSProperties}
               title={item[column.key] || ''}
             >
               {
@@ -39,18 +41,9 @@ class Columns extends Component {
           );
         })
       }
-      <div style={{visibility: edit && item.iconShow}} className={`column-icon ${type}-column-icon ${sorting ? "sorting" : ""} ${edit ? "" : "disabled"}`}></div>
+      <div style={{visibility: edit && item.iconShow}} className={`column-icon ${type}-column-icon ${sorting ? "sorting" : ""} ${edit ? "" : "disabled"}`} />
     </li>;
   }
 }
 
-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;
+export default Columns;