From 655247e0dfd5873a58afe849fba0013c5c5e1357 Mon Sep 17 00:00:00 2001 From: orzorzorzorz Date: Sat, 13 Apr 2019 10:13:28 +0800 Subject: [PATCH] chore: check lint (#48) * chore: check lint * chore: add missing type definition * fix: undefined lineData in BlockGroup --- package.json | 100 ++++++++++++------------ src/canvas/core.tsx | 38 +++++---- src/demo/index.tsx | 1 + src/line/LineTo.tsx | 11 +-- src/line/__tests__/SteppedLine.test.tsx | 57 ++++++-------- src/tools/BlockGroup.tsx | 67 +++++++++------- src/tools/LineGroup.tsx | 4 +- src/tools/TagGroup.tsx | 15 ++-- src/utils/__tests__/LineUtil.test.tsx | 2 + tslint.json | 91 +++++++++++++++++++++ 10 files changed, 247 insertions(+), 139 deletions(-) create mode 100644 tslint.json diff --git a/package.json b/package.json index 75834f4d..0c3ab58a 100644 --- a/package.json +++ b/package.json @@ -1,48 +1,52 @@ -{ - "name": "mini-xmind", - "version": "1.1.3", - "scripts": { - "start": "nino go -e ./src/go", - "test": "nino test", - "build": "tsc && nino koei -c scripts/nino.koei.js", - "compile": "tsc && nino compile", - "codecov": "nino test -d", - "lint": "npx eslint .", - "prettier": "nino prettier", - "lint-staged": "lint-staged", - "backup": "npm config set registry=https://registry.npmjs.org && npm publish && npm config set registry=https://registry.npm.taobao.org", - "pub": "npm run build && npm run compile && git push origin master && npm publish", - "pre-deploy": "node scripts/copyCircleCiConfig.js", - "deploy": "npm run build && npm run pre-deploy && bash scripts/gh-pages.sh" - }, - "description": "A tool to make mind-mapping easier", - "files": [ - "lib", - "dist" - ], - "license": "MIT", - "main": "lib/index", - "dependencies": { - "antd": "^3.16.2", - "react-draggable": "^3.2.1" - }, - "devDependencies": { - "@types/classnames": "^2.2.7", - "@types/enzyme": "^3.9.1", - "@types/react": "^16.8.13", - "@types/react-dom": "^16.8.3", - "dekko": "^0.2.1", - "lint-staged": "^8.1.5", - "nino-cli": "^0.7.2", - "typescript": "^3.4.3" - }, - "pre-commit": [ - "lint-staged" - ], - "lint-staged": { - "*.{ts,tsx}": [ - "npm run prettier", - "git add" - ] - } -} +{ + "name": "mini-xmind", + "version": "1.1.3", + "scripts": { + "start": "nino go -e ./src/go", + "test": "nino test", + "build": "tsc && nino koei -c scripts/nino.koei.js", + "compile": "tsc && nino compile", + "codecov": "nino test -d", + "lint": "tslint -c tslint.json 'src/**/*.ts[x]'", + "prettier": "nino prettier", + "lint-staged": "lint-staged", + "backup": "npm config set registry=https://registry.npmjs.org && npm publish && npm config set registry=https://registry.npm.taobao.org", + "pub": "npm run build && npm run compile && git push origin master && npm publish", + "pre-deploy": "node scripts/copyCircleCiConfig.js", + "deploy": "npm run build && npm run pre-deploy && bash scripts/gh-pages.sh" + }, + "description": "A tool to make mind-mapping easier", + "files": [ + "lib", + "dist" + ], + "license": "MIT", + "main": "lib/index", + "dependencies": { + "antd": "^3.16.2", + "react-draggable": "^3.2.1" + }, + "devDependencies": { + "@types/classnames": "^2.2.7", + "@types/enzyme": "^3.9.1", + "@types/react": "^16.8.13", + "@types/react-dom": "^16.8.3", + "dekko": "^0.2.1", + "lint-staged": "^8.1.5", + "nino-cli": "^0.7.2", + "tslint": "^5.15.0", + "tslint-config-prettier": "^1.18.0", + "tslint-eslint-rules": "^5.4.0", + "tslint-react": "^4.0.0", + "typescript": "^3.4.3" + }, + "pre-commit": [ + "lint-staged" + ], + "lint-staged": { + "*.{ts,tsx}": [ + "npm run prettier", + "git add" + ] + } +} diff --git a/src/canvas/core.tsx b/src/canvas/core.tsx index 5cdebc1e..a78a7731 100644 --- a/src/canvas/core.tsx +++ b/src/canvas/core.tsx @@ -26,16 +26,9 @@ export interface CanvasState { position: { x: number; y: number }; } -let dataCollector: any = {}; +const dataCollector: any = {}; export default class Canvas extends Component { - state: CanvasState = { - blockProps: {}, - linesProps: {}, - tagProps: {}, - position: { x: 0, y: 0 }, - }; - static defaultProps = { style: {}, className: '', @@ -50,7 +43,7 @@ export default class Canvas extends Component { const data = nextProps.data || {}; // hack // don't know why when change Input in TagGroup, - // it would return a event object that unexpected + // it would return an event object that unexpected if (Object.keys(data).length > 4) { return { blockProps: dataCollector.BlockGroup, @@ -60,23 +53,34 @@ export default class Canvas extends Component { }; } if (Object.keys(data).length !== 0) { - const { BlockGroup, TagGroup, LineGroup, CanvasPosition } = data; + const { + BlockGroup: blockProps, + TagGroup: tagProps, + LineGroup: linesProps, + CanvasPosition, + } = data; let position = nextState.position; - if (position.x == 0 && position.y == 0 && CanvasPosition) { + if (position.x === 0 && position.y === 0 && CanvasPosition) { position = CanvasPosition; - dataCollector['CanvasPosition'] = CanvasPosition; + dataCollector.CanvasPosition = CanvasPosition; } return { - blockProps: BlockGroup, - tagProps: TagGroup, - linesProps: LineGroup, + blockProps, + tagProps, + linesProps, position, }; } return null; } + state: CanvasState = { + blockProps: {}, + linesProps: {}, + tagProps: {}, + position: { x: 0, y: 0 }, + }; // to repaint Line instantly handleBlockChange = (blockProps: any, linesProps: any) => { @@ -107,7 +111,7 @@ export default class Canvas extends Component { } dragItem = dragItem ? JSON.parse(dragItem) : {}; const { value } = dragItem; - let { blockProps, tagProps, position } = this.state; + const { blockProps, tagProps, position } = this.state; const { clientX, clientY } = e; let defaultWidth = 100; let defaultHeight = 80; @@ -131,6 +135,8 @@ export default class Canvas extends Component { }; this.setState({ tagProps }); break; + default: + break; } return { x: clientX - defaultWidth / 2 - position.x, diff --git a/src/demo/index.tsx b/src/demo/index.tsx index d15de76e..5e9b37d9 100644 --- a/src/demo/index.tsx +++ b/src/demo/index.tsx @@ -52,6 +52,7 @@ export default class Demo extends Component { }; useDebounce(data: any) { + // tslint:disable-next-line console.log(data); } diff --git a/src/line/LineTo.tsx b/src/line/LineTo.tsx index e5a45c2a..1eb781d0 100644 --- a/src/line/LineTo.tsx +++ b/src/line/LineTo.tsx @@ -34,6 +34,8 @@ export function parseAnchorText(value: string) { return { y: 1 }; case 'right': return { x: 1 }; + default: + break; } return null; } @@ -60,11 +62,6 @@ export interface LineToState { } export default class LineTo extends Component { - state = { - offsetX: 0, - offsetY: 0, - }; - static defaultProps = { className: '', style: {}, @@ -85,6 +82,10 @@ export default class LineTo extends Component { } return null; } + state: LineToState = { + offsetX: 0, + offsetY: 0, + }; detect = () => { const { from, to, offset = { x: 0, y: 0 } } = this.props; diff --git a/src/line/__tests__/SteppedLine.test.tsx b/src/line/__tests__/SteppedLine.test.tsx index 6b78bd05..c3eee1a2 100644 --- a/src/line/__tests__/SteppedLine.test.tsx +++ b/src/line/__tests__/SteppedLine.test.tsx @@ -16,43 +16,38 @@ describe('SteppedLine', () => { ); expect(wrapper).toMatchSnapshot(); expect(wrapper.find('.line-core').length).toBe(3); - console.log(getTargetIndexProps(wrapper, 'Line', 0)); - expect(getTargetIndexProps(wrapper, 'Line', 0)['orientation']).toBe( + expect(getTargetIndexProps(wrapper, 'Line', 0).orientation).toBe( 'vertical', ); - expect(getTargetIndexProps(wrapper, '.line-core', 0)['style'].left).toBe( + expect(getTargetIndexProps(wrapper, '.line-core', 0).style.left).toBe( '1px', ); - expect(getTargetIndexProps(wrapper, '.line-core', 0)['style'].top).toBe( - '1px', - ); - expect(getTargetIndexProps(wrapper, '.line-core', 0)['style'].width).toBe( + expect(getTargetIndexProps(wrapper, '.line-core', 0).style.top).toBe('1px'); + expect(getTargetIndexProps(wrapper, '.line-core', 0).style.width).toBe( '0.5px', ); - expect(getTargetIndexProps(wrapper, 'Line', 1)['orientation']).toBe( + expect(getTargetIndexProps(wrapper, 'Line', 1).orientation).toBe( 'vertical', ); - expect(getTargetIndexProps(wrapper, '.line-core', 1)['style'].left).toBe( - '0px', - ); - expect(getTargetIndexProps(wrapper, '.line-core', 1)['style'].top).toBe( + expect(getTargetIndexProps(wrapper, '.line-core', 1).style.left).toBe( '0px', ); - expect(getTargetIndexProps(wrapper, '.line-core', 1)['style'].width).toBe( + expect(getTargetIndexProps(wrapper, '.line-core', 1).style.top).toBe('0px'); + expect(getTargetIndexProps(wrapper, '.line-core', 1).style.width).toBe( '0.5px', ); - expect(getTargetIndexProps(wrapper, 'Line', 2)['orientation']).toBe( + expect(getTargetIndexProps(wrapper, 'Line', 2).orientation).toBe( 'vertical', ); - expect(getTargetIndexProps(wrapper, '.line-core', 2)['style'].left).toBe( + expect(getTargetIndexProps(wrapper, '.line-core', 2).style.left).toBe( '0px', ); - expect(getTargetIndexProps(wrapper, '.line-core', 2)['style'].top).toBe( + expect(getTargetIndexProps(wrapper, '.line-core', 2).style.top).toBe( '0.5px', ); - expect(getTargetIndexProps(wrapper, '.line-core', 2)['style'].width).toBe( + expect(getTargetIndexProps(wrapper, '.line-core', 2).style.width).toBe( '1px', ); }); @@ -64,42 +59,38 @@ describe('SteppedLine', () => { expect(wrapper).toMatchSnapshot(); expect(wrapper.find('.line-core').length).toBe(3); - expect(getTargetIndexProps(wrapper, 'Line', 0)['orientation']).toBe( + expect(getTargetIndexProps(wrapper, 'Line', 0).orientation).toBe( 'horizonal', ); - expect(getTargetIndexProps(wrapper, '.line-core', 0)['style'].left).toBe( + expect(getTargetIndexProps(wrapper, '.line-core', 0).style.left).toBe( '1px', ); - expect(getTargetIndexProps(wrapper, '.line-core', 0)['style'].top).toBe( - '1px', - ); - expect(getTargetIndexProps(wrapper, '.line-core', 0)['style'].width).toBe( + expect(getTargetIndexProps(wrapper, '.line-core', 0).style.top).toBe('1px'); + expect(getTargetIndexProps(wrapper, '.line-core', 0).style.width).toBe( '0.5px', ); - expect(getTargetIndexProps(wrapper, 'Line', 1)['orientation']).toBe( + expect(getTargetIndexProps(wrapper, 'Line', 1).orientation).toBe( 'horizonal', ); - expect(getTargetIndexProps(wrapper, '.line-core', 1)['style'].left).toBe( - '0px', - ); - expect(getTargetIndexProps(wrapper, '.line-core', 1)['style'].top).toBe( + expect(getTargetIndexProps(wrapper, '.line-core', 1).style.left).toBe( '0px', ); - expect(getTargetIndexProps(wrapper, '.line-core', 1)['style'].width).toBe( + expect(getTargetIndexProps(wrapper, '.line-core', 1).style.top).toBe('0px'); + expect(getTargetIndexProps(wrapper, '.line-core', 1).style.width).toBe( '0.5px', ); - expect(getTargetIndexProps(wrapper, 'Line', 2)['orientation']).toBe( + expect(getTargetIndexProps(wrapper, 'Line', 2).orientation).toBe( 'horizonal', ); - expect(getTargetIndexProps(wrapper, '.line-core', 2)['style'].left).toBe( + expect(getTargetIndexProps(wrapper, '.line-core', 2).style.left).toBe( '0.5px', ); - expect(getTargetIndexProps(wrapper, '.line-core', 2)['style'].top).toBe( + expect(getTargetIndexProps(wrapper, '.line-core', 2).style.top).toBe( '-1px', ); - expect(getTargetIndexProps(wrapper, '.line-core', 2)['style'].width).toBe( + expect(getTargetIndexProps(wrapper, '.line-core', 2).style.width).toBe( '2px', ); }); diff --git a/src/tools/BlockGroup.tsx b/src/tools/BlockGroup.tsx index 8fdce117..56af2771 100644 --- a/src/tools/BlockGroup.tsx +++ b/src/tools/BlockGroup.tsx @@ -9,21 +9,20 @@ import './css/BlockGroup.css'; // to record it here let mapping: any = {}; // to save refs -let blockDOM: any = {}; +const blockDOM: any = {}; const keysLength = (obj: object) => Object.keys(obj).length; -const addBlockDom = (lineData: any, blockDOM: any) => { - for (let key in lineData) { +const addBlockDom = (lineData: any, targetBlockDOM: any) => { + for (const key of Object.keys(lineData || {})) { const { fromKey, toKey } = lineData[key]; + for (const blockKey of Object.keys(targetBlockDOM)) { + const value = targetBlockDOM[blockKey]; - for (let blockKey in blockDOM) { - const value = blockDOM[blockKey]; - - if (fromKey == blockKey) { + if (fromKey === blockKey) { lineData[key].from = value; } - if (toKey == blockKey) { + if (toKey === blockKey) { lineData[key].to = value; } } @@ -58,6 +57,13 @@ export default class BlockGroup extends Component< BlockGroupProps, BlockGroupState > { + static getDerivedStateFromProps(nextProps: BlockGroupProps) { + mapping = Object.assign({}, mapping, nextProps.lineData); + return { + data: nextProps.data, + lineData: nextProps.lineData, + }; + } private checkBlockClickList: any; constructor(props: BlockGroupProps) { @@ -72,24 +78,18 @@ export default class BlockGroup extends Component< this.checkBlockClickList = {}; } - static getDerivedStateFromProps(nextProps: BlockGroupProps) { - mapping = Object.assign({}, mapping, nextProps.lineData); - return { - data: nextProps.data, - lineData: nextProps.lineData, - }; - } - componentDidUpdate = (prevProps: BlockGroupProps) => { const { lineData, onChange, data } = this.props; if (!lineData) { return; } const firstLine: any = Object.values(lineData)[0]; - const hasNewLine = keysLength(lineData) != keysLength(prevProps.lineData); + const hasNewLine = keysLength(lineData) !== keysLength(prevProps.lineData); if (!(firstLine && firstLine.from)) { - if (hasNewLine || keysLength(lineData) != 0) { - onChange && onChange(data, addBlockDom(lineData, blockDOM)); + if (hasNewLine || keysLength(lineData) !== 0) { + if (onChange) { + onChange(data, addBlockDom(lineData, blockDOM)); + } } } // it's a hack @@ -101,7 +101,9 @@ export default class BlockGroup extends Component< this.props.offset.x !== prevProps.offset.x || this.props.offset.y !== prevProps.offset.y ) { - onChange && onChange(data, addBlockDom(lineData, blockDOM)); + if (onChange) { + onChange(data, addBlockDom(lineData, blockDOM)); + } } } }; @@ -109,14 +111,16 @@ export default class BlockGroup extends Component< handleDrag = ({ x, y }: { x: number; y: number }, blockKey: string) => { const { data, onChange, lineData } = this.props; data[blockKey] = Object.assign({}, data[blockKey], { x, y }); - onChange && onChange(data, addBlockDom(lineData, blockDOM)); + if (onChange) { + onChange(data, addBlockDom(lineData, blockDOM)); + } }; // when Block clicked twice, generate a Line // and clear checkBlockClickList handleBlockClick = (blockKey: string) => { - let { checkBlockClickList } = this; - let { onChange } = this.props; + const { checkBlockClickList } = this; + const { onChange } = this.props; const { lineData, data } = this.state; const lineKey = generateKey('line'); @@ -127,7 +131,7 @@ export default class BlockGroup extends Component< checkBlockClickList[blockKey].time = new Date().getTime(); } - if (keysLength(checkBlockClickList) == 2) { + if (keysLength(checkBlockClickList) === 2) { if (!this.shouldPaintLine(checkBlockClickList, lineData)) { this.checkBlockClickList = {}; return; @@ -138,7 +142,9 @@ export default class BlockGroup extends Component< lineKey, ); - onChange && onChange(data, result); + if (onChange) { + onChange(data, result); + } this.checkBlockClickList = {}; // record mapping for arrow @@ -151,7 +157,10 @@ export default class BlockGroup extends Component< generateLineData = (lineData: any, lineKey: string) => { const { checkBlockClickList } = this; - let fromNode, toNode, fromKey, toKey; + let fromNode; + let toNode; + let fromKey; + let toKey; const keys = Object.keys(checkBlockClickList); if (checkBlockClickList[keys[0]] > checkBlockClickList[keys[1]]) { @@ -193,9 +202,9 @@ export default class BlockGroup extends Component< } const blocks = Object.keys(checkBlockClickList).toString(); - for (let key of Object.keys(mapping)) { - let fromFlag = false, - toFlag = false; + for (const key of Object.keys(mapping)) { + let fromFlag = false; + let toFlag = false; const { fromKey, toKey } = mapping[key]; if (blocks.includes(fromKey)) { diff --git a/src/tools/LineGroup.tsx b/src/tools/LineGroup.tsx index 51884705..cea69ee6 100644 --- a/src/tools/LineGroup.tsx +++ b/src/tools/LineGroup.tsx @@ -23,7 +23,7 @@ export default class LineGroup extends Component< static getDerivedStateFromProps(nextProps: LineGroupProps) { const data = nextProps.data; const newState: any = {}; - for (let key in data) { + for (const key of Object.keys(data)) { const { from, to } = data[key]; if (from && to) { @@ -64,7 +64,7 @@ export default class LineGroup extends Component< render = () => { const { data } = this.state; - if (Object.keys(data).length == 0) { + if (Object.keys(data).length === 0) { return null; } diff --git a/src/tools/TagGroup.tsx b/src/tools/TagGroup.tsx index 7917bd75..05e7f40b 100644 --- a/src/tools/TagGroup.tsx +++ b/src/tools/TagGroup.tsx @@ -15,10 +15,6 @@ export interface TagGroupState { } export default class TagGroup extends Component { - state: TagGroupState = { - data: {}, - }; - static getDerivedStateFromProps( nextProps: TagGroupProps, nextState: TagGroupState, @@ -31,11 +27,16 @@ export default class TagGroup extends Component { } return { data: nextProps.data }; } + state: TagGroupState = { + data: {}, + }; handleStop = ({ x, y }: { x: number; y: number }, key: string) => { const { data, onChange } = this.props; data[key] = Object.assign({}, data[key], { x, y }); - onChange && onChange(data); + if (onChange) { + onChange(data); + } }; handleChange = ( @@ -61,7 +62,9 @@ export default class TagGroup extends Component { handleDrag = () => { const { onChange } = this.props; - onChange && onChange(this.state.data); + if (onChange) { + onChange(this.state.data); + } }; render = () => { diff --git a/src/utils/__tests__/LineUtil.test.tsx b/src/utils/__tests__/LineUtil.test.tsx index 191bd8e1..0fd06daf 100644 --- a/src/utils/__tests__/LineUtil.test.tsx +++ b/src/utils/__tests__/LineUtil.test.tsx @@ -78,6 +78,7 @@ describe('LineUtil', () => { .find('button') .at(0) .simulate('click', () => { + // tslint:disable-next-line preventDefault: () => { defaultEvent(); }; @@ -95,6 +96,7 @@ describe('LineUtil', () => { .find('button') .at(0) .simulate('click', () => { + // tslint:disable-next-line stopPropagation: () => { defaultEvent(); }; diff --git a/tslint.json b/tslint.json new file mode 100644 index 00000000..7466e054 --- /dev/null +++ b/tslint.json @@ -0,0 +1,91 @@ +{ + "extends": ["tslint-react", "tslint-eslint-rules", "tslint-config-prettier"], + "rules": { + "class-name": true, + "eofline": true, + "forin": true, + "jsdoc-format": false, + "label-position": true, + "member-ordering": [ + true, + { + "order": "statics-first" + } + ], + "new-parens": true, + "no-arg": true, + "no-bitwise": true, + "no-conditional-assignment": true, + "no-consecutive-blank-lines": true, + "no-console": [true, "debug", "info", "log", "time", "timeEnd", "trace"], + "no-construct": true, + "no-debugger": true, + "no-duplicate-variable": true, + "no-eval": true, + "no-internal-module": true, + "no-multi-spaces": true, + "no-namespace": true, + "no-reference": true, + "no-shadowed-variable": true, + "no-string-literal": true, + "no-trailing-whitespace": true, + "no-unused-expression": true, + "no-var-keyword": true, + "one-variable-per-declaration": [true, "ignore-for-loop"], + "prefer-const": [true, { "destructuring": "all" }], + "radix": true, + "space-in-parens": true, + "switch-default": true, + "trailing-comma": [ + true, + { + "singleline": "never", + "multiline": "always", + "esSpecCompliant": true + } + ], + "triple-equals": [true, "allow-null-check"], + "typedef-whitespace": [ + true, + { + "call-signature": "nospace", + "index-signature": "nospace", + "parameter": "nospace", + "property-declaration": "nospace", + "variable-declaration": "nospace" + }, + { + "call-signature": "onespace", + "index-signature": "onespace", + "parameter": "onespace", + "property-declaration": "onespace", + "variable-declaration": "onespace" + } + ], + "use-isnan": true, + "variable-name": [ + true, + "allow-leading-underscore", + "ban-keywords", + "check-format", + "allow-pascal-case" + ], + "jsx-no-lambda": false, + "jsx-no-string-ref": false, + "jsx-boolean-value": [true, "never"], + "jsx-no-multiline-js": false, + "whitespace": [ + true, + "check-branch", + "check-decl", + "check-operator", + "check-module", + "check-separator", + "check-rest-spread", + "check-type", + "check-typecast", + "check-type-operator", + "check-preblock" + ] + } +}