upgrade typescript eslint

.eslintrc

@@ -1,3 +1,6 @@
 {
-  "extends": "eslint-config-umi"
+  "extends": "react-app",
+  "rules": {
+    "react/react-in-jsx-scope": "off"
+  }
 }

package.json

@@ -16,7 +16,9 @@
     "react-dnd",
     "web visible"
   ],
-  "contributors": ["yehuozhili <yehuozhili@outlook.com> (https://github.com/yehuozhili))"],
+  "contributors": [
+    "yehuozhili <yehuozhili@outlook.com> (https://github.com/yehuozhili))"
+  ],
   "scripts": {
     "start": "umi dev",
     "build": "umi build",
@@ -74,5 +76,17 @@
     "yorkie": "^2.0.0",
     "zarm": "^2.5.1"
   },
-  "license": "MIT"
+  "license": "MIT",
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "2.x",
+    "@typescript-eslint/parser": "2.x",
+    "babel-eslint": "10.x",
+    "eslint": "6.x",
+    "eslint-config-react-app": "^5.2.1",
+    "eslint-plugin-flowtype": "4.x",
+    "eslint-plugin-import": "2.x",
+    "eslint-plugin-jsx-a11y": "6.x",
+    "eslint-plugin-react": "7.x",
+    "eslint-plugin-react-hooks": "2.x"
+  }
 }

src/components/BackTop/index.js

@@ -1,34 +0,0 @@
-import { memo } from 'react'
-import { BackToTop, Icon } from 'zarm'
-
-const themeObj = {
-  simple: { bgColor: '#fff', color: '#999' },
-  black: { bgColor: '#000', color: '#fff' },
-  danger: { bgColor: '#ff5050', color: '#fff' },
-  primary: { bgColor: '#00bc71', color: '#fff' },
-  blue: { bgColor: '#06c', color: '#fff' }
-}
-const BackTop = memo((props) => {
-  const {
-   theme = 'simple'
-  } = props
-  
-  return <BackToTop>
-            <div style={{
-              width: 48,
-              height: 48,
-              lineHeight: '48px',
-              textAlign: 'center',
-              backgroundColor: themeObj[theme].bgColor,
-              color: themeObj[theme].color,
-              fontSize: 20,
-              borderRadius: 30,
-              boxShadow: '0 2px 10px 0 rgba(0, 0, 0, 0.2)',
-              cursor: 'pointer',
-            }}>
-              <Icon type="arrow-top" />
-            </div>
-          </BackToTop>
-})
-
-export default BackTop

src/components/BackTop/index.tsx

@@ -0,0 +1,36 @@
+import { memo } from 'react';
+import { BackToTop, Icon } from 'zarm';
+
+const themeObj = {
+  simple: { bgColor: '#fff', color: '#999' },
+  black: { bgColor: '#000', color: '#fff' },
+  danger: { bgColor: '#ff5050', color: '#fff' },
+  primary: { bgColor: '#00bc71', color: '#fff' },
+  blue: { bgColor: '#06c', color: '#fff' },
+};
+const BackTop = memo((props: { theme: any }) => {
+  const { theme = 'simple' } = props;
+
+  return (
+    <BackToTop>
+      <div
+        style={{
+          width: 48,
+          height: 48,
+          lineHeight: '48px',
+          textAlign: 'center',
+          backgroundColor: themeObj[theme].bgColor,
+          color: themeObj[theme].color,
+          fontSize: 20,
+          borderRadius: 30,
+          boxShadow: '0 2px 10px 0 rgba(0, 0, 0, 0.2)',
+          cursor: 'pointer',
+        }}
+      >
+        <Icon type="arrow-top" />
+      </div>
+    </BackToTop>
+  );
+});
+
+export default BackTop;

src/components/Calibration/index.js

@@ -1,88 +0,0 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import React, { useState, useEffect, useRef } from 'react'
-
-import styles from './index.less'
-
-export default function Calibration(props) {
-  const { direction, multiple } = props
-  const [ calibrationLength, setCalibration ] = useState({})
-  const calibrationRef = useRef(null)
-
-  useEffect(() => {
-    let calibration = calibrationRef.current.getBoundingClientRect()
-    setCalibration({width: calibration.width, height: calibration.height})
-    let length = direction === 'up' ?  (calibration.width) : calibration.height
-    for(let i=0; i<(length / 5 ) ; i++){
-      if(i % 10 === 0){
-        generateElement(true, i)
-      }else {
-        generateElement()
-      }
-    }
-  }, [direction])
-
-  const generateElement = (item, num) => {
-    let createSpan = document.createElement('div')
-    createSpan.className = 'calibrationLine'
-    createSpan.style.backgroundColor = '#ccc'
-    calibrationRef.current.style.display = 'flex'
-    calibrationRef.current.style.justifyContent = 'space-between'
-    if(direction === 'up'){
-      calibrationRef.current.style.marginLeft = '50px'
-      createSpan.style.width = '1px'
-      createSpan.style.height = '6px'
-      createSpan.style.display = 'inline-block'
-    }else {
-      calibrationRef.current.style.flexDirection = 'column'
-      createSpan.style.height = '1px'
-      createSpan.style.width = '6px'
-    }
-    if(item){
-      let createSpanContent = document.createElement('span')
-      if(direction === 'up') { 
-        createSpan.style.height = '12px'
-        createSpanContent.style.transform = 'translate3d(-4px, 20px, 0px)'
-        createSpan.style.transform = 'translateY(0px)'
-      }else {
-        createSpan.style.width = '12px'
-        createSpanContent.style.paddingLeft = '20px'
-      }
-      createSpanContent.style.display = 'block'
-      createSpanContent.className = 'calibrationNumber'
-      createSpanContent.innerHTML = num * 5
-      createSpan.appendChild(createSpanContent)
-    }
-    calibrationRef.current.appendChild(createSpan)
-  }
-
-  useEffect(() => {
-    let width = calibrationLength.width ? calibrationLength.width : (calibrationRef.current.getBoundingClientRect().width)
-    let height = calibrationLength.height ? calibrationLength.height : (calibrationRef.current.getBoundingClientRect().height)
-    let arr = [...calibrationRef.current.querySelectorAll('.calibrationLine')]
-    if(arr.length) {
-      if(direction === 'up'){
-        calibrationRef.current.style.width = (multiple.toFixed(1) * (width)) + 'px'
-        arr.forEach((el) => {
-          let dom = [...el.querySelectorAll('.calibrationNumber')][0]
-          if(dom){
-            dom.style.transform = `translate3d(-4px, 16px, 0px) scale(${(multiple + 0.1).toFixed(1)})`
-          }
-        })
-      }else {
-        calibrationRef.current.style.height = (multiple.toFixed(1) * (height)) + 'px'
-        arr.forEach((el) => {
-          let dom = [...el.querySelectorAll('.calibrationNumber')][0]
-          if(dom){
-            dom.style.transform = `translate3d(-4px, -8px, 0px) scale(${(multiple + 0.1).toFixed(1)})`
-          }
-        })
-      } 
-    }
-    
-  }, [calibrationLength.height, calibrationLength.width, direction, multiple])
-
-  return (
-    <div className={styles.calibration} ref={calibrationRef}>
-    </div>
-  )
-}

src/components/Calibration/index.tsx

@@ -0,0 +1,96 @@
+import React, { useState, useEffect, useRef } from 'react';
+
+import styles from './index.less';
+
+export interface calibrationTypes {
+  width: number;
+  height: number;
+}
+
+export default function Calibration(props) {
+  const { direction, multiple } = props;
+  const [calibrationLength, setCalibration] = useState<calibrationTypes>({ width: 0, height: 0 });
+  const calibrationRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    let calibration = calibrationRef.current.getBoundingClientRect();
+    setCalibration({ width: calibration.width, height: calibration.height });
+    let length = direction === 'up' ? calibration.width : calibration.height;
+    for (let i = 0; i < length / 5; i++) {
+      if (i % 10 === 0) {
+        generateElement(true, i);
+      } else {
+        generateElement();
+      }
+    }
+  }, [direction]);
+
+  const generateElement = (item?: boolean, num?: number) => {
+    let createSpan = document.createElement('div');
+    createSpan.className = 'calibrationLine';
+    createSpan.style.backgroundColor = '#ccc';
+    calibrationRef.current.style.display = 'flex';
+    calibrationRef.current.style.justifyContent = 'space-between';
+    if (direction === 'up') {
+      calibrationRef.current.style.marginLeft = '50px';
+      createSpan.style.width = '1px';
+      createSpan.style.height = '6px';
+      createSpan.style.display = 'inline-block';
+    } else {
+      calibrationRef.current.style.flexDirection = 'column';
+      createSpan.style.height = '1px';
+      createSpan.style.width = '6px';
+    }
+    if (item) {
+      let createSpanContent = document.createElement('span');
+      if (direction === 'up') {
+        createSpan.style.height = '12px';
+        createSpanContent.style.transform = 'translate3d(-4px, 20px, 0px)';
+        createSpan.style.transform = 'translateY(0px)';
+      } else {
+        createSpan.style.width = '12px';
+        createSpanContent.style.paddingLeft = '20px';
+      }
+      createSpanContent.style.display = 'block';
+      createSpanContent.className = 'calibrationNumber';
+      createSpanContent.innerHTML = num * 5 + '';
+      createSpan.appendChild(createSpanContent);
+    }
+    calibrationRef.current.appendChild(createSpan);
+  };
+
+  useEffect(() => {
+    let width = calibrationLength.width
+      ? calibrationLength.width
+      : calibrationRef.current.getBoundingClientRect().width;
+    let height = calibrationLength.height
+      ? calibrationLength.height
+      : calibrationRef.current.getBoundingClientRect().height;
+    let arr = [...calibrationRef.current.querySelectorAll('.calibrationLine')];
+    if (arr.length) {
+      if (direction === 'up') {
+        calibrationRef.current.style.width = multiple.toFixed(1) * width + 'px';
+        arr.forEach(el => {
+          let dom = [...el.querySelectorAll('.calibrationNumber')][0] as HTMLElement;
+          if (dom) {
+            dom.style.transform = `translate3d(-4px, 16px, 0px) scale(${(multiple + 0.1).toFixed(
+              1,
+            )})`;
+          }
+        });
+      } else {
+        calibrationRef.current.style.height = multiple.toFixed(1) * height + 'px';
+        arr.forEach(el => {
+          let dom = [...el.querySelectorAll('.calibrationNumber')][0] as HTMLElement;
+          if (dom) {
+            dom.style.transform = `translate3d(-4px, -8px, 0px) scale(${(multiple + 0.1).toFixed(
+              1,
+            )})`;
+          }
+        });
+      }
+    }
+  }, [calibrationLength.height, calibrationLength.width, direction, multiple]);
+
+  return <div className={styles.calibration} ref={calibrationRef}></div>;
+}

src/components/DynamicEngine/index.js

@@ -2,7 +2,7 @@ import { dynamic } from 'umi';
 import Loading from '../LoadingCp';
 import { useMemo, memo } from 'react';
 
-const needList = ['Tab', 'Carousel', 'Upload', 'Video'];
+const needList = ['Tab', 'Carousel', 'Upload', 'Video', 'Icon'];
 
 const DynamicFunc = type =>
   dynamic({
@@ -32,6 +32,7 @@ const DynamicEngine = memo(props => {
   const { type, config, isTpl } = props;
   const Dynamic = useMemo(() => {
     return DynamicFunc(type);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [type, config]);
   return <Dynamic type={type} config={config} isTpl={isTpl} />;
 });

src/global.css

@@ -13,3 +13,7 @@ body {
 
 @import '~react-grid-layout/css/styles.css'; 
 @import '~react-resizable/css/styles.css';
+
+.react-grid-item{
+  overflow: hidden;
+}

src/utils/req.ts

@@ -31,6 +31,7 @@ instance.interceptors.response.use(
   function(response) {
     // 对响应数据做点什么
     // 你的业务数据
+    return response;
   },
   function(error) {
     // 对响应错误做点什么

tsconfig.json

@@ -8,6 +8,7 @@
     "strict": true,
     "importHelpers": true,
     "sourceMap": true,
+    "lib": ["dom", "dom.iterable", "esnext"],
     "paths": {
       "@/*": ["src/*"],
       "@@/*": ["src/.umi/*"],
@@ -15,6 +16,10 @@
       "utils/*": ["src/utils/*"],
       "assets/*": ["src/assets/*"]
     },
-    "allowSyntheticDefaultImports": true
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "skipLibCheck": true
   }
 }