Skip to content

Commit fc9847b

Browse files
daybrushdaybrush
committed
fix: fix waitToChangeTarget method daybrush#714 
1 parent 89f1be1 commit fc9847b

File tree

5 files changed

+82
-38
lines changed

5 files changed

+82
-38
lines changed

‎packages/react-moveable/src/react-moveable/InitialMoveable.tsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import styled from "react-css-styled";
1515
import { getRefTargets, getElementTargets } from "./utils";
1616
import IndividualGroupable from "./ables/IndividualGroupable";
1717
import MoveableIndividualGroup from "./MoveableIndividualGroup";
18+
import ChildrenDiffer from "@egjs/children-differ";
1819

1920

2021
export class InitialMoveable<T = {}>
@@ -46,6 +47,9 @@ export class InitialMoveable<T = {}>
4647
public moveable!: MoveableManager | MoveableGroup | MoveableIndividualGroup;
4748
public refTargets: Array<HTMLElement | SVGElement | string | undefined | null> = [];
4849
public selectorMap: IObject<Array<HTMLElement | SVGElement>> = {};
50+
private _differ: ChildrenDiffer<HTMLElement | SVGElement> = new ChildrenDiffer();
51+
private _elementTargets: Array<HTMLElement | SVGElement> = [];
52+
private _onChangetarget: (() => void) | null = null;
4953
public render() {
5054
const moveableContructor = (this.constructor as typeof InitialMoveable);
5155

@@ -74,6 +78,7 @@ export class InitialMoveable<T = {}>
7478
customStyledMap: moveableContructor.customStyledMap,
7579
};
7680

81+
this._elementTargets = elementTargets;
7782
if (isGroup) {
7883
if (props.individualGroupable) {
7984
return <MoveableIndividualGroup key="individual-group" ref={ref(this, "moveable")}
@@ -95,12 +100,60 @@ export class InitialMoveable<T = {}>
95100
this._updateRefs();
96101
}
97102
public componentDidUpdate() {
103+
const { added, removed } = this._differ.update(this._elementTargets);
104+
const isTargetChanged = added.length || removed.length;
105+
106+
if (isTargetChanged && this._onChangetarget) {
107+
this._onChangetarget();
108+
}
109+
98110
this._updateRefs();
99111
}
100112
public componentWillUnmount() {
101113
this.selectorMap = {};
102114
this.refTargets = [];
103115
}
116+
117+
/**
118+
* User changes target and waits for target to change.
119+
* @method Moveable#waitToChangeTarget
120+
* @example
121+
* import Moveable from "moveable";
122+
*
123+
* const moveable = new Moveable(document.body);
124+
*
125+
* document.querySelector(".target").addEventListener("mousedown", e => {
126+
* moveable.waitToChangeTarget().then(() => {
127+
* moveable.dragStart(e.currentTarget);
128+
* });
129+
* moveable.target = e.currentTarget;
130+
* });
131+
*/
132+
public waitToChangeTarget(): Promise<void> {
133+
// let resolvePromise: (e: OnChangeTarget) => void;
134+
135+
// this._onChangetarget = () => {
136+
// this._onChangetarget = null;
137+
// resolvePromise({
138+
// moveable: this.getManager(),
139+
// targets: this._elementTargets,
140+
// });
141+
// };
142+
143+
// return new Promise<OnChangeTarget>(resolve => {
144+
// resolvePromise = resolve;
145+
// });
146+
let resolvePromise: () => void;
147+
148+
this._onChangetarget = () => {
149+
this._onChangetarget = null;
150+
resolvePromise();
151+
};
152+
153+
return new Promise(resolve => {
154+
resolvePromise = resolve;
155+
});
156+
}
104157
public getManager(): MoveableManagerInterface<any, any> {
105158
return this.moveable;
106159
}

‎packages/react-moveable/src/react-moveable/MoveableManager.tsx‎

Lines changed: 1 addition & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,6 @@ export default class MoveableManager<T = {}>
9494
protected _emitter: EventEmitter = new EventEmitter();
9595
protected _prevTarget: HTMLElement | SVGElement | null | undefined = null;
9696
protected _prevDragArea = false;
97-
protected _onChangetarget: (() => void) | null = null;
9897
protected _isPropTargetChanged = false;
9998

10099
private _observer: ResizeObserver | null = null;
@@ -173,10 +172,6 @@ export default class MoveableManager<T = {}>
173172
this._updateTargets();
174173
this.updateCheckInput();
175174
this._updateObserver(prevProps);
176-
177-
if (this._isPropTargetChanged) {
178-
this._onChangetarget?.();
179-
}
180175
}
181176
public componentWillUnmount() {
182177
this.isUnmounted = true;
@@ -615,32 +610,8 @@ export default class MoveableManager<T = {}>
615610
}
616611
this._isPropTargetChanged = isTargetChanged;
617612
}
618-
/**
619-
* User changes target and waits for target to change.
620-
* @method Moveable#waitToChangeTarget
621-
* @example
622-
* import Moveable from "moveable";
623-
*
624-
* const moveable = new Moveable(document.body);
625-
*
626-
* document.querySelector(".target").addEventListener("mousedown", e => {
627-
* moveable.waitToChangeTarget().then(() => {
628-
* moveable.dragStart(e.currentTarget);
629-
* });
630-
* moveable.target = e.currentTarget;
631-
* });
632-
*/
633613
public waitToChangeTarget(): Promise<void> {
634-
let resolvePromise: () => void;
635-
636-
this._onChangetarget = () => {
637-
this._onChangetarget = null;
638-
resolvePromise();
639-
};
640-
641-
return new Promise<void>(resolve => {
642-
resolvePromise = resolve;
643-
});
614+
return new Promise(() => {});
644615
}
645616
public triggerEvent(name: string, e: any): any {
646617
this._emitter.trigger(name, e);

‎packages/react-moveable/src/react-moveable/types.ts‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -616,6 +616,22 @@ export interface AbleRequester {
616616
requestEnd(): IObject<any>;
617617
}
618618

619+
620+
/**
621+
* @typedef
622+
* @memberof Moveable
623+
*/
624+
export interface OnChangeTarget {
625+
/**
626+
* The Moveable instance
627+
*/
628+
moveable: MoveableManagerInterface<any, any>;
629+
/**
630+
* The Moveable's targets
631+
*/
632+
targets: Array<HTMLElement | SVGElement>;
633+
}
634+
619635
/**
620636
* @typedef
621637
* @memberof Moveable.Pinchable
@@ -1629,7 +1645,7 @@ export interface DraggableOptions {
16291645
* Whether to move by dragging the edge line
16301646
* @default false
16311647
*/
1632-
edgeDraggable?: boolean | Array<LineDirection>;
1648+
edgeDraggable?: boolean | Array<LineDirection>;
16331649
}
16341650
export interface DraggableEvents {
16351651
onDragStart: OnDragStart;
@@ -1640,6 +1656,7 @@ export interface DraggableEvents {
16401656
onDragGroup: OnDragGroup;
16411657
onDragGroupEnd: OnDragGroupEnd;
16421658
}
1659+
16431660
export interface DraggableProps extends DraggableOptions, EventInterface<DraggableEvents> {
16441661
}
16451662

‎packages/react-moveable/stories/9A-Components/1-Selecto.stories.tsx‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
import "./scroll.css";
22
import App from "./apps/ReactSelectoApp";
3+
import RawApp from "!!raw-loader!./apps/ReactSelectoApp";
4+
import { DEFAULT_REACT_CODESANDBOX } from "storybook-addon-preview";
5+
import { convertReactTemplate, convertPath } from "../utils";
36

47
export const SelectoTemplate = App as any;
58

@@ -15,12 +18,12 @@ SelectoTemplate.parameters = {
1518
// template: DEFAULT_CSS_TEMPLATE + "\n" + SCROLL_CSS_TEMPLATE,
1619
// language: "css",
1720
// },
18-
// {
19-
// tab: "React",
20-
// template: convertReactTemplate(convertPath(RawApp)),
21-
// codesandbox: DEFAULT_REACT_CODESANDBOX(["react-moveable", "react-selecto"]),
22-
// language: "tsx",
23-
// },
21+
{
22+
tab: "React",
23+
template: convertReactTemplate(convertPath(RawApp)),
24+
codesandbox: DEFAULT_REACT_CODESANDBOX(["react-moveable", "react-selecto"]),
25+
language: "tsx",
26+
},
2427
],
2528
};
2629

‎packages/react-moveable/stories/9A-Components/apps/ReactSelectoApp.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ export default function App() {
5757
e.inputEvent.preventDefault();
5858

5959
moveable.waitToChangeTarget().then(() => {
60-
moveable.dragStart(e.inputEvent)
60+
moveable.dragStart(e.inputEvent);
6161
});
6262
}
6363
setTargets(e.selected);

0 commit comments

Comments
 (0)