From e15ec7a81e80e4d71428d00fcf2e5791351fc37a Mon Sep 17 00:00:00 2001 From: orzorzorzorz Date: Fri, 12 Apr 2019 22:09:18 +0800 Subject: [PATCH] feat: get all datas when dragging (#44) * feat: get all datas when dragging * chore: update missing deps * fix: unexpected call of setState * chore: simplify demo * fix: TagGroup unexpected call of setState * break: onChange required --- package.json | 3 +- src/canvas/__tests__/Canvas.test.tsx | 8 +- src/canvas/core.tsx | 40 ++++++---- .../__snapshots__/demo.test.tsx.snap | 14 +--- src/demo/__tests__/demo.test.tsx | 76 ------------------- src/demo/index.tsx | 19 ++--- src/tools/TagGroup.tsx | 22 +++--- 7 files changed, 54 insertions(+), 128 deletions(-) diff --git a/package.json b/package.json index de414695..5c85f5cd 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,8 @@ "dekko": "^0.2.1", "gh-pages": "^2.0.1", "lint-staged": "^8.1.5", - "nino-cli": "^0.7.2" + "nino-cli": "^0.7.2", + "typescript": "^3.4.3" }, "pre-commit": [ "lint-staged" diff --git a/src/canvas/__tests__/Canvas.test.tsx b/src/canvas/__tests__/Canvas.test.tsx index 621a314a..2070ad08 100644 --- a/src/canvas/__tests__/Canvas.test.tsx +++ b/src/canvas/__tests__/Canvas.test.tsx @@ -13,8 +13,9 @@ import Listener from '../../utils/GlobalListener'; import { mapping } from '../../mock/mapping'; import 'nino-cli/scripts/setup'; -const createWrapper = (...props: Array) => - mount(); +const createWrapper = (...props: Array) => { + return mount(); +}; describe('Canvas', () => { beforeEach(() => { @@ -41,6 +42,7 @@ describe('Canvas', () => { const wrapper = createWrapper(); wrapper.setProps({ data: mapping }); + expect(Object.keys(wrapper.state('linesProps')).length).toBe(2); const blocks = wrapper.find('.block-group'); blocks.at(0).simulate('click'); blocks.at(1).simulate('click'); @@ -50,7 +52,7 @@ describe('Canvas', () => { blocks.at(0).simulate('click'); blocks.at(2).simulate('click'); - expect(wrapper.find('.stepped-line-to').length).toBe(3); + expect(Object.keys(wrapper.state('linesProps')).length).toBe(3); }); it('should not render redundant Line', () => { diff --git a/src/canvas/core.tsx b/src/canvas/core.tsx index 0279fc32..232b05f5 100644 --- a/src/canvas/core.tsx +++ b/src/canvas/core.tsx @@ -17,6 +17,7 @@ export interface CanvasProps { blockClassName?: string; tagClassName?: string; lineClassName?: string; + onChange: (item: any) => void; } export interface CanvasState { blockProps?: any; @@ -25,7 +26,16 @@ export interface CanvasState { position: { x: number; y: number }; } +let dataCollector: any = {}; + export default class Canvas extends Component { + state: CanvasState = { + blockProps: {}, + linesProps: {}, + tagProps: {}, + position: { x: 0, y: 0 }, + }; + static defaultProps = { style: {}, className: '', @@ -44,6 +54,7 @@ export default class Canvas extends Component { let position = nextState.position; if (position.x == 0 && position.y == 0 && CanvasPosition) { position = CanvasPosition; + dataCollector['CanvasPosition'] = CanvasPosition; } return { @@ -56,27 +67,29 @@ export default class Canvas extends Component { return null; } - constructor(props: CanvasProps) { - super(props); - - this.state = { - blockProps: {}, - linesProps: {}, - tagProps: {}, - position: { x: 0, y: 0 }, - }; - } - // to repaint Line instantly handleBlockChange = (blockProps: any, linesProps: any) => { - this.setState({ blockProps }); + const { onChange } = this.props; + this.handleUnityAllDatas(blockProps, 'BlockGroup'); + this.handleUnityAllDatas(linesProps, 'LineGroup'); + if (!onChange) { + this.setState({ blockProps }); + } if (linesProps) { this.setState({ linesProps }); } }; handleTagChange = (tagProps: any) => { - this.setState({ tagProps }); + this.handleUnityAllDatas(tagProps, 'TagGroup'); + }; + + handleUnityAllDatas = (data: any, type: string) => { + const { onChange } = this.props; + dataCollector[type] = data; + if (onChange) { + onChange(dataCollector); + } }; onDrop = (e: any) => { @@ -118,6 +131,7 @@ export default class Canvas extends Component { }; handleDrag = (_: any, { x, y }: { x: number; y: number }) => { + this.handleUnityAllDatas({ x, y }, 'CanvasPosition'); this.setState({ position: { x, y } }); }; diff --git a/src/demo/__tests__/__snapshots__/demo.test.tsx.snap b/src/demo/__tests__/__snapshots__/demo.test.tsx.snap index 77eefb37..79abdab0 100644 --- a/src/demo/__tests__/__snapshots__/demo.test.tsx.snap +++ b/src/demo/__tests__/__snapshots__/demo.test.tsx.snap @@ -261,6 +261,7 @@ exports[`demo render correctly 1`] = ` }, } } + onChange={[Function]} orientation="h" style={Object {}} > @@ -426,6 +427,7 @@ exports[`demo render correctly 1`] = ` }, } } + onChange={[Function]} onDragOver={[Function]} onDrop={[Function]} onMouseDown={[Function]} @@ -1780,18 +1782,6 @@ exports[`demo render correctly 1`] = ` - `; diff --git a/src/demo/__tests__/demo.test.tsx b/src/demo/__tests__/demo.test.tsx index fbd68cd1..f1eb02e8 100644 --- a/src/demo/__tests__/demo.test.tsx +++ b/src/demo/__tests__/demo.test.tsx @@ -1,87 +1,11 @@ import React from 'react'; import { mount } from 'enzyme'; import Demo from '..'; -import Listener from '../../utils/GlobalListener'; import 'nino-cli/scripts/setup'; -// eslint-disable-next-line -const log = console.log; describe('demo', () => { - beforeEach(() => { - (window as any).DataCollector = new Listener(); - // eslint-disable-next-line - console.log = function() {}; - }); - - afterEach(() => { - (window as any).DataCollector = null; - // eslint-disable-next-line - console.log = log; - }); - it('render correctly', () => { const wrapper = mount(); expect(wrapper).toMatchSnapshot(); }); - - it('when button is clicked, it should return layout info', () => { - const wrapper = mount(); - const instance: any = wrapper.instance(); - const data = instance.outputData(); - const mapping = { - BlockGroup: { - 'block-623187': { x: 132, y: 118 }, - 'block-624018': { x: 426, y: -50 }, - 'block-73377': { x: 428, y: 306 }, - }, - CanvasPosition: { x: -67, y: 230 }, - LineGroup: { - 'line-592694': { - from: { bottom: 0, height: 0, left: 0, right: 0, top: 0, width: 0 }, - fromKey: 'block-623187', - to: { bottom: 0, height: 0, left: 0, right: 0, top: 0, width: 0 }, - toKey: 'block-624018', - }, - 'line-77619': { - from: { bottom: 0, height: 0, left: 0, right: 0, top: 0, width: 0 }, - fromKey: 'block-73377', - to: { bottom: 0, height: 0, left: 0, right: 0, top: 0, width: 0 }, - toKey: 'block-623187', - }, - }, - TagGroup: { - 'tag-626505': { - editable: false, - input: 'test', - style: { height: 32, width: 100 }, - x: 169, - y: 144, - }, - 'tag-629962': { - editable: false, - input: 'test2', - style: { height: 32, width: 100 }, - x: 462, - y: -23, - }, - 'tag-80986': { - editable: false, - input: 'test3', - style: { height: 32, width: 100 }, - x: 463, - y: 333, - }, - }, - }; - expect(mapping).toEqual(data); - }); - - it('when state changed, Line should render correctly', () => { - const wrapper = mount(); - const instance: any = wrapper.instance(); - const data = instance.outputData(); - wrapper.setState({ data }); - wrapper.update(); - expect(wrapper.find('.stepped-line-to').length).toBe(2); - }); }); diff --git a/src/demo/index.tsx b/src/demo/index.tsx index aeb93afb..e2bac945 100644 --- a/src/demo/index.tsx +++ b/src/demo/index.tsx @@ -39,13 +39,8 @@ export default class Demo extends Component { this.setState({ data: mapping }); }; - outputData = () => { - const data = (window as any).DataCollector.getAll(); + handleChange = (data: any) => { this.setState({ data }); - const treeData = JSON.stringify(data); - // eslint-disable-next-line - console.log(treeData); - return data; }; render = () => { @@ -54,13 +49,11 @@ export default class Demo extends Component { return (
- - +
); }; diff --git a/src/tools/TagGroup.tsx b/src/tools/TagGroup.tsx index 6f0e1efb..027ebfb3 100644 --- a/src/tools/TagGroup.tsx +++ b/src/tools/TagGroup.tsx @@ -15,21 +15,23 @@ export interface TagGroupState { } export default class TagGroup extends Component { - static getDerivedStateFromProps(nextProps: TagGroupProps) { + state: TagGroupState = { + data: {}, + }; + + static getDerivedStateFromProps( + nextProps: TagGroupProps, + nextState: TagGroupState, + ) { + if (Object.keys(nextState.data).length === 0 && nextProps.onChange) { + nextProps.onChange(nextProps.data); + } if (!nextProps.data) { return { data: {} }; } return { data: nextProps.data }; } - constructor(props: TagGroupProps) { - super(props); - - this.state = { - data: {}, - }; - } - handleStop = ({ x, y }: { x: number; y: number }, key: string) => { const { data, onChange } = this.props; @@ -57,7 +59,7 @@ export default class TagGroup extends Component { handleDrag = () => { const { onChange } = this.props; - onChange && onChange(this.props.data); + onChange && onChange(this.state.data); }; render = () => {