github/h5-Dooring
1
0
Fork 0
mirror of https://github.com/MrXujiang/h5-Dooring.git synced 2025-12-13 02:52:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

upgrade typescript eslint

Browse Source
This commit is contained in:
yehuozhili 2020-09-03 10:56:16 +08:00
parent f9a808d668
commit f84da1bfd8
11 changed files with 888 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.eslintrc
View File

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

18
package.json
View File

@ -16,7 +16,9 @@
"react-dnd", "react-dnd",
"web visible" "web visible"
], ],
"contributors": ["yehuozhili <yehuozhili@outlook.com> (https://github.com/yehuozhili))"], "contributors": [
"yehuozhili <yehuozhili@outlook.com> (https://github.com/yehuozhili))"
],
"scripts": { "scripts": {
"start": "umi dev", "start": "umi dev",
"build": "umi build", "build": "umi build",
@ -74,5 +76,17 @@
"yorkie": "^2.0.0", "yorkie": "^2.0.0",
"zarm": "^2.5.1" "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"
}
} }

34
src/components/BackTop/index.js
View File

@ -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

36
src/components/BackTop/index.tsx Normal file
View File

@ -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;

88
src/components/Calibration/index.js
View File

@ -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>
)
}

96
src/components/Calibration/index.tsx Normal file
View File

@ -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>;
}

3
src/components/DynamicEngine/index.js
View File

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

4
src/global.css
View File

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

1
src/utils/req.ts
View File

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

7
tsconfig.json
View File

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

746
yarn.lock
View File

File diff suppressed because it is too large Load Diff