feat(Marker): add drag and dragstart events (#173)

* feat(Marker): add drag and dragstart events (#173)
urbica · Mar 31, 2019 · 87313ed · 87313ed
1 parent e77ba81
commit 87313ed
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 2 deletions.
diff --git a/src/components/Marker/index.js b/src/components/Marker/index.js
@@ -33,7 +33,13 @@ type Props = {
   draggable?: boolean,
 
   /** Fired when the marker is finished being dragged */
-  onDragEnd?: (lngLat: LngLat) => any
+  onDragEnd?: (lngLat: LngLat) => any,
+
+  /** Fired when the marker is finished being dragged */
+  onDragStart?: (lngLat: LngLat) => any,
+
+  /** Fired when the marker is dragged */
+  onDrag?: (lngLat: LngLat) => any
 };
 
 class Marker extends PureComponent<Props> {
@@ -56,7 +62,15 @@ class Marker extends PureComponent<Props> {
   }
 
   componentDidMount() {
-    const { longitude, latitude, offset, draggable, onDragEnd } = this.props;
+    const {
+      longitude,
+      latitude,
+      offset,
+      draggable,
+      onDragEnd,
+      onDragStart,
+      onDrag
+    } = this.props;
 
     this._marker = new mapboxgl.Marker(this._el, {
       draggable,
@@ -68,6 +82,14 @@ class Marker extends PureComponent<Props> {
     if (onDragEnd) {
       this._marker.on('dragend', this._onDragEnd);
     }
+
+    if (onDragStart) {
+      this._marker.on('dragstart', this._onDragStart);
+    }
+
+    if (onDrag) {
+      this._marker.on('drag', this._onDrag);
+    }
   }
 
   componentDidUpdate(prevProps: Props) {
@@ -97,6 +119,16 @@ class Marker extends PureComponent<Props> {
     this.props.onDragEnd(this._marker.getLngLat());
   };
 
+  _onDragStart = (): void => {
+    // $FlowFixMe
+    this.props.onDragStart(this._marker.getLngLat());
+  };
+
+  _onDrag = (): void => {
+    // $FlowFixMe
+    this.props.onDrag(this._marker.getLngLat());
+  };
+
   render() {
     return createElement(MapContext.Consumer, {}, (map) => {
       if (map) {

diff --git a/src/components/Marker/index.test.js b/src/components/Marker/index.test.js
@@ -7,6 +7,8 @@ import MapGL, { Marker } from '../..';
 const Element = <div>ok</div>;
 test('render', () => {
   const onDragEnd = jest.fn();
+  const onDragStart = jest.fn();
+  const onDrag = jest.fn();
 
   const wrapper = mount(
     <MapGL latitude={0} longitude={0} zoom={0}>
@@ -15,6 +17,8 @@ test('render', () => {
         latitude={0}
         element={Element}
         onDragEnd={onDragEnd}
+        onDragStart={onDragStart}
+        onDrag={onDrag}
       />
     </MapGL>
   );