Skip to content

Commit

Permalink
refactor(drawing/DrawingManager): rewrite with enhanceElement and cle…
Browse files Browse the repository at this point in the history
…aner interfaces

BREAKING CHANGE: Naming convention for event handlers has tweaked to follow React's convention.

Before:

```js
<DrawingManager
  onCirclecomplete={_.noop}
  onOverlaycomplete={_.noop}
/>
```

After:

```js
<DrawingManager
  onCircleComplete={_.noop}
  onOverlayComplete={_.noop}
/>
```
  • Loading branch information
tomchentw committed Oct 4, 2016
1 parent 3226508 commit 1b6a937
Show file tree
Hide file tree
Showing 4 changed files with 91 additions and 141 deletions.
2 changes: 2 additions & 0 deletions src/lib/constants.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,3 +23,5 @@ export const ANCHOR = `__SECRET_ANCHOR_DO_NOT_USE_OR_YOU_WILL_BE_FIRED`;
export const INFO_WINDOW = `__SECRET_INFO_WINDOW_DO_NOT_USE_OR_YOU_WILL_BE_FIRED`;

export const OVERLAY_VIEW = `__SECRET_OVERLAY_VIEW_DO_NOT_USE_OR_YOU_WILL_BE_FIRED`;

export const DRAWING_MANAGER = `__SECRET_DRAWING_MANAGER_DO_NOT_USE_OR_YOU_WILL_BE_FIRED`;
73 changes: 0 additions & 73 deletions src/lib/creators/DrawingManagerCreator.js

This file was deleted.

147 changes: 89 additions & 58 deletions src/lib/drawing/DrawingManager.js
Original file line number Diff line number Diff line change
@@ -1,80 +1,111 @@
/* global google */
import _ from "lodash";

import {
default as React,
Component,
PropTypes,
} from "react";

import {
default as canUseDOM,
} from "can-use-dom";
MAP,
DRAWING_MANAGER,
} from "../constants";

import {
default as DrawingManagerCreator,
drawingManagerDefaultPropTypes,
drawingManagerControlledPropTypes,
drawingManagerEventPropTypes,
} from "./creators/DrawingManagerCreator";

import { default as GoogleMapHolder } from "./creators/GoogleMapHolder";

/*
* Original author: @idolize
* Original PR: https://github.com/tomchentw/react-google-maps/pull/46
*/
export default class DrawingManager extends Component {
static propTypes = {
// Uncontrolled default[props] - used only in componentDidMount
...drawingManagerDefaultPropTypes,
// Controlled [props] - used in componentDidMount/componentDidUpdate
...drawingManagerControlledPropTypes,
// Event [onEventName]
...drawingManagerEventPropTypes,
}

static contextTypes = {
mapHolderRef: PropTypes.instanceOf(GoogleMapHolder),
}
addDefaultPrefixToPropTypes,
collectUncontrolledAndControlledProps,
default as enhanceElement,
} from "../enhanceElement";

const controlledPropTypes = {
// NOTICE!!!!!!
//
// Only expose those with getters & setters in the table as controlled props.
//
// [].map.call($0.querySelectorAll("tr>td>code", function(it){ return it.textContent; })
// .filter(function(it){ return it.match(/^set/) && !it.match(/^setMap/); })
//
// https://developers.google.com/maps/documentation/javascript/3.exp/reference#DrawingManager
drawingMode: PropTypes.any,
options: PropTypes.object,
};

const defaultUncontrolledPropTypes = addDefaultPrefixToPropTypes(controlledPropTypes);

const eventMap = {
// https://developers.google.com/maps/documentation/javascript/3.exp/reference#DrawingManager
// [].map.call($0.querySelectorAll("tr>td>code"), function(it){ return it.textContent; })
onCircleComplete: `circlecomplete`,

onMarkerComplete: `markercomplete`,

onOverlayComplete: `overlaycomplete`,

onPolygonComplete: `polygoncomplete`,

onPolylineComplete: `polylinecomplete`,

onRectangleComplete: `rectanglecomplete`,
};

const publicMethodMap = {
// Public APIs
//
// https://developers.google.com/maps/documentation/javascript/3.exp/reference#DrawingManager
//
// [].map.call($0.querySelectorAll("tr>td>code"), function(it){ return it.textContent; })
// .filter(function(it){ return it.match(/^get/) && !it.match(/^getMap/); })
getDrawingMode() { return this.state.drawingManager.getDrawingMode(); }
// .filter(function(it){ return it.match(/^get/) && !it.match(/Map$/); })
getDrawingMode(drawingManager) { return drawingManager.getDrawingMode(); },
// END - Public APIs
//
// https://developers.google.com/maps/documentation/javascript/3.exp/reference#DrawingManager
};

state = {
}
const controlledPropUpdaterMap = {
drawingMode(drawingManager, drawingMode) { drawingManager.setDrawingMode(drawingMode); },
options(drawingManager, options) { drawingManager.setOptions(options); },
};

componentWillMount() {
const { mapHolderRef } = this.context;
function getInstanceFromComponent(component) {
return component.state[DRAWING_MANAGER];
}

if (!canUseDOM) {
return;
}
const drawingManager = DrawingManagerCreator._createDrawingManager({
...this.props,
mapHolderRef,
export default _.flowRight(
React.createClass,
enhanceElement(getInstanceFromComponent, publicMethodMap, eventMap, controlledPropUpdaterMap),
)({
displayName: `DrawingManager`,

propTypes: {
...controlledPropTypes,
...defaultUncontrolledPropTypes,
},

contextTypes: {
[MAP]: PropTypes.object,
},

getInitialState() {
// https://developers.google.com/maps/documentation/javascript/3.exp/reference#DrawingManager
const drawingManager = new google.maps.drawing.DrawingManager({
map: this.context[MAP],
...collectUncontrolledAndControlledProps(
defaultUncontrolledPropTypes,
controlledPropTypes,
this.props
),
});
return {
[DRAWING_MANAGER]: drawingManager,
};
},

this.setState({ drawingManager });
}
componentWillUnmount() {
const drawingManager = getInstanceFromComponent(this);
if (drawingManager) {
drawingManager.setMap(null);
}
},

render() {
if (this.state.drawingManager) {
return (
<DrawingManagerCreator
drawingManager={this.state.drawingManager}
{...this.props}
>
{this.props.children}
</DrawingManagerCreator>
);
} else {
return (<noscript />);
}
}
}
return false;
},
});
10 changes: 0 additions & 10 deletions src/lib/eventLists/DrawingManagerEventList.js

This file was deleted.

0 comments on commit 1b6a937

Please sign in to comment.