Skip to content

Commit 7c648e0

Browse files
PaulLeCamPaulLeCam
committed
Popup component
1 parent 793c39e commit 7c648e0

File tree

6 files changed

+115
-19
lines changed

6 files changed

+115
-19
lines changed

‎example/simple.coffee

+6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
react = require "react"
22
L = require "../src"
33

4+
{p, strong, em} = react.DOM
5+
46
SimpleExample = react.createClass
57
displayName: "SimpleExample"
68
render: ->
@@ -12,5 +14,9 @@ SimpleExample = react.createClass
1214
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
1315
L.Marker
1416
position: [51.505, -0.09]
17+
L.Popup null,
18+
p null,
19+
strong null, "Hello"
20+
em null, " World"
1521

1622
react.renderComponent SimpleExample(), document.getElementById "content"

‎example/simple.js

+73-15
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
2-
var L, SimpleExample, react;
2+
var L, SimpleExample, em, p, react, strong, _ref;
33

44
react = require("react");
55

66
L = require("../src");
77

8+
_ref = react.DOM, p = _ref.p, strong = _ref.strong, em = _ref.em;
9+
810
SimpleExample = react.createClass({
911
displayName: "SimpleExample",
1012
render: function() {
@@ -14,17 +16,17 @@ SimpleExample = react.createClass({
1416
}, L.TileLayer({
1517
url: "http://{s}.tile.osm.org/{z}/{x}/{y}.png",
1618
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
17-
}), L.Marker({
19+
}, L.Marker({
1820
position: [51.505, -0.09]
19-
}));
21+
}, L.Popup(null, p(null, strong(null, "Hello"), em(null, " World"))))));
2022
}
2123
});
2224

2325
react.renderComponent(SimpleExample(), document.getElementById("content"));
2426

2527

2628

27-
},{"../src":168,"react":164}],2:[function(require,module,exports){
29+
},{"../src":169,"react":164}],2:[function(require,module,exports){
2830
// shim for using process in browser
2931

3032
var process = module.exports = {};
@@ -29737,8 +29739,8 @@ module.exports = Map;
2973729739

2973829740

2973929741

29740-
},{"./types/latlng":169,"./types/latlngBounds":170,"leaflet":3,"lodash-node/modern/utilities/uniqueId":4,"react/addons":5}],166:[function(require,module,exports){
29741-
var Type, latlngType, leaflet, react;
29742+
},{"./types/latlng":170,"./types/latlngBounds":171,"leaflet":3,"lodash-node/modern/utilities/uniqueId":4,"react/addons":5}],166:[function(require,module,exports){
29743+
var Type, latlngType, leaflet, noscript, react;
2974229744

2974329745
react = require("react");
2974429746

@@ -29748,6 +29750,8 @@ Type = react.PropTypes;
2974829750

2974929751
latlngType = require("./types/latlng");
2975029752

29753+
noscript = react.DOM.noscript;
29754+
2975129755
module.exports = react.createClass({
2975229756
displayName: "Marker",
2975329757
propTypes: {
@@ -29762,42 +29766,95 @@ module.exports = react.createClass({
2976229766
if (this.props.map) {
2976329767
this.state.marker.addTo(this.props.map);
2976429768
}
29769+
return noscript(null, react.Children.map(this.props.children, (function(_this) {
29770+
return function(child) {
29771+
return react.addons.cloneWithProps(child, {
29772+
map: _this.props.map,
29773+
layer: _this.props.layer,
29774+
marker: _this.state.marker
29775+
});
29776+
};
29777+
})(this)));
29778+
}
29779+
});
29780+
29781+
29782+
29783+
},{"./types/latlng":170,"leaflet":3,"react":164}],167:[function(require,module,exports){
29784+
var leaflet, react;
29785+
29786+
react = require("react");
29787+
29788+
leaflet = require("leaflet");
29789+
29790+
module.exports = react.createClass({
29791+
displayName: "Popup",
29792+
getInitialState: function() {
29793+
return {
29794+
popup: leaflet.popup(this.props, this.props.layer)
29795+
};
29796+
},
29797+
render: function() {
29798+
var content;
29799+
if (this.props.children) {
29800+
content = react.renderComponentToString(this.props.children);
29801+
if (this.props.marker) {
29802+
this.props.marker.bindPopup(content);
29803+
} else {
29804+
this.state.popup.setContent(content);
29805+
if (this.props.position) {
29806+
this.state.popup.setLatLng(this.props.position);
29807+
}
29808+
if (this.props.map) {
29809+
this.state.popup.openOn(this.props.map);
29810+
}
29811+
}
29812+
}
2976529813
return null;
2976629814
}
2976729815
});
2976829816

2976929817

2977029818

29771-
},{"./types/latlng":169,"leaflet":3,"react":164}],167:[function(require,module,exports){
29772-
var Type, leaflet, react;
29819+
},{"leaflet":3,"react":164}],168:[function(require,module,exports){
29820+
var Type, leaflet, noscript, react;
2977329821

2977429822
react = require("react");
2977529823

2977629824
leaflet = require("leaflet");
2977729825

2977829826
Type = react.PropTypes;
2977929827

29828+
noscript = react.DOM.noscript;
29829+
2978029830
module.exports = react.createClass({
2978129831
displayName: "TileLayer",
2978229832
propTypes: {
2978329833
url: Type.string.isRequired
2978429834
},
2978529835
getInitialState: function() {
2978629836
return {
29787-
tile: leaflet.tileLayer(this.props.url, this.props)
29837+
tileLayer: leaflet.tileLayer(this.props.url, this.props)
2978829838
};
2978929839
},
2979029840
render: function() {
2979129841
if (this.props.map) {
29792-
this.state.tile.addTo(this.props.map);
29842+
this.state.tileLayer.addTo(this.props.map);
2979329843
}
29794-
return null;
29844+
return noscript(null, react.Children.map(this.props.children, (function(_this) {
29845+
return function(child) {
29846+
return react.addons.cloneWithProps(child, {
29847+
map: _this.props.map,
29848+
layer: _this.state.tileLayer
29849+
});
29850+
};
29851+
})(this)));
2979529852
}
2979629853
});
2979729854

2979829855

2979929856

29800-
},{"leaflet":3,"react":164}],168:[function(require,module,exports){
29857+
},{"leaflet":3,"react":164}],169:[function(require,module,exports){
2980129858
var leaflet, setIconDefaultImagePath;
2980229859

2980329860
leaflet = require("leaflet");
@@ -29812,12 +29869,13 @@ module.exports = {
2981229869
setIconDefaultImagePath: setIconDefaultImagePath,
2981329870
Marker: require("./Marker"),
2981429871
Map: require("./Map"),
29872+
Popup: require("./Popup"),
2981529873
TileLayer: require("./TileLayer")
2981629874
};
2981729875

2981829876

2981929877

29820-
},{"./Map":165,"./Marker":166,"./TileLayer":167,"leaflet":3}],169:[function(require,module,exports){
29878+
},{"./Map":165,"./Marker":166,"./Popup":167,"./TileLayer":168,"leaflet":3}],170:[function(require,module,exports){
2982129879
var Type, react;
2982229880

2982329881
react = require("react");
@@ -29836,7 +29894,7 @@ module.exports = Type.oneOfType([
2983629894

2983729895

2983829896

29839-
},{"react":164}],170:[function(require,module,exports){
29897+
},{"react":164}],171:[function(require,module,exports){
2984029898
var Type, latlng, react;
2984129899

2984229900
react = require("react");
@@ -29849,4 +29907,4 @@ module.exports = Type.arrayOf(latlng);
2984929907

2985029908

2985129909

29852-
},{"./latlng":169,"react":164}]},{},[1]);
29910+
},{"./latlng":170,"react":164}]},{},[1]);

‎src/Marker.coffee

+7-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ leaflet = require "leaflet"
44
Type = react.PropTypes
55
latlngType = require "./types/latlng"
66

7+
{noscript} = react.DOM
8+
79
module.exports = react.createClass
810
displayName: "Marker"
911

@@ -15,4 +17,8 @@ module.exports = react.createClass
1517

1618
render: ->
1719
@state.marker.addTo @props.map if @props.map
18-
null
20+
noscript null, react.Children.map @props.children, (child) =>
21+
react.addons.cloneWithProps child,
22+
map: @props.map
23+
layer: @props.layer
24+
marker: @state.marker

‎src/Popup.coffee

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
react = require "react"
2+
leaflet = require "leaflet"
3+
4+
module.exports = react.createClass
5+
displayName: "Popup"
6+
7+
getInitialState: ->
8+
popup: leaflet.popup @props, @props.layer
9+
10+
render: ->
11+
if @props.children
12+
content = react.renderComponentToString @props.children
13+
# Attach to a Marker
14+
if @props.marker then @props.marker.bindPopup content
15+
# Attach to a Map
16+
else
17+
@state.popup.setContent content
18+
@state.popup.setLatLng @props.position if @props.position
19+
@state.popup.openOn @props.map if @props.map
20+
null

‎src/TileLayer.coffee

+8-3
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,20 @@ leaflet = require "leaflet"
33

44
Type = react.PropTypes
55

6+
{noscript} = react.DOM
7+
68
module.exports = react.createClass
79
displayName: "TileLayer"
810

911
propTypes:
1012
url: Type.string.isRequired
1113

1214
getInitialState: ->
13-
tile: leaflet.tileLayer @props.url, @props
15+
tileLayer: leaflet.tileLayer @props.url, @props
1416

1517
render: ->
16-
@state.tile.addTo @props.map if @props.map
17-
null
18+
@state.tileLayer.addTo @props.map if @props.map
19+
noscript null, react.Children.map @props.children, (child) =>
20+
react.addons.cloneWithProps child,
21+
map: @props.map
22+
layer: @state.tileLayer

‎src/index.coffee

+1
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,5 @@ module.exports =
99
setIconDefaultImagePath: setIconDefaultImagePath
1010
Marker: require "./Marker"
1111
Map: require "./Map"
12+
Popup: require "./Popup"
1213
TileLayer: require "./TileLayer"

0 commit comments

Comments
 (0)