Add support for ImageButton in ZoomToMaxExtentButton component

web/client/components/buttons/ImageButton.jsx

@@ -12,35 +12,35 @@ var ImageButton = React.createClass({
     propTypes: {
         id: React.PropTypes.string,
         image: React.PropTypes.string,
-        onClick: React.PropTypes.func
+        onClick: React.PropTypes.func,
+        style: React.PropTypes.object
     },
     getStyle() {
-        var style = {
+        var finalStyle = {
             cursor: "pointer",
             margin: 0,
             padding: 0,
             display: "inline-block"
         };
-        if (this.props.image && this.props.image !== "") {
-            assign(style, {
+        if (this.props.image) {
+            assign(finalStyle, {
                 overflow: "hidden"
             });
         } else {
-            assign(style, {
+            assign(finalStyle, {
                 height: "48px",
                 width: "48px",
                 border: "1px solid grey",
                 borderRadius: "4px",
                 backgroundColor: "rgb(250, 250, 250)"
             });
         }
-        return style;
+        assign(finalStyle, this.props.style);
+        return finalStyle;
     },
     render() {
         return (
-            <div id={this.props.id} style={this.getStyle()} onClick={this.props.onClick}>
-                <img src={this.props.image}></img>
-            </div>
+            <img id={this.props.id} style={this.getStyle()} src={this.props.image} onClick={this.props.onClick}></img>
         );
     }
 });

web/client/components/buttons/ZoomToMaxExtentButton.jsx

@@ -10,6 +10,7 @@ var React = require('react');
 var BootstrapReact = require('react-bootstrap');
 var Button = BootstrapReact.Button;
 var Glyphicon = BootstrapReact.Glyphicon;
+var ImageButton = require('./ImageButton');
 
 const mapUtils = require('../../utils/MapUtils');
 const configUtils = require('../../utils/ConfigUtils');
@@ -28,35 +29,42 @@ var ZoomToMaxExtentButton = React.createClass({
     propTypes: {
         id: React.PropTypes.string,
         style: React.PropTypes.object,
+        image: React.PropTypes.string,
         glyphicon: React.PropTypes.string,
         text: React.PropTypes.string,
         btnSize: React.PropTypes.oneOf(['large', 'medium', 'small', 'xsmall']),
         mapConfig: React.PropTypes.object,
         actions: React.PropTypes.shape({
             changeMapView: React.PropTypes.func
-        })
+        }),
+        btnType: React.PropTypes.oneOf(['normal', 'image'])
     },
     getDefaultProps() {
         return {
             id: "mapstore-zoomtomaxextent",
             style: undefined,
             glyphicon: "resize-full",
             text: undefined,
-            btnSize: 'xsmall'
+            btnSize: 'xsmall',
+            btnType: 'normal'
         };
     },
     render() {
-        return (
-            <Button
-                id={this.props.id}
-                bsStyle="default"
-                bsSize={this.props.btnSize}
-                onClick={() => this.zoomToMaxExtent()}>
-                {this.props.glyphicon ? <Glyphicon glyph={this.props.glyphicon}/> : null}
-                {this.props.glyphicon && this.props.text ? "\u00A0" : null}
-                {this.props.text}
-            </Button>
-        );
+        if (this.props.btnType === 'normal') {
+            return (
+                <Button
+                    id={this.props.id}
+                    bsStyle="default"
+                    bsSize={this.props.btnSize}
+                    onClick={() => this.zoomToMaxExtent()}>
+                    {this.props.glyphicon ? <Glyphicon glyph={this.props.glyphicon}/> : null}
+                    {this.props.glyphicon && this.props.text ? "\u00A0" : null}
+                    {this.props.text}
+                </Button>
+            );
+        }
+        return (<ImageButton id={this.props.id} image={this.props.image}
+            onClick={() => this.zoomToMaxExtent()} style={this.props.style}/>);
     },
     zoomToMaxExtent() {
         var mapConfig = this.props.mapConfig;
@@ -85,7 +93,6 @@ var ZoomToMaxExtentButton = React.createClass({
         // adapt the map view by calling the corresponding action
         this.props.actions.changeMapView(newCenter, newZoom,
             this.props.mapConfig.bbox, this.props.mapConfig.size);
-
     }
 });
 

web/client/components/buttons/__tests__/ImageButton-test.jsx

@@ -34,6 +34,24 @@ describe('ImageButton', () => {
         expect(btnDiv.style.backgroundColor).toBe("rgb(250, 250, 250)");
     });
 
+    it('creates an empty button with a custom style', () => {
+        const btn = React.render(<ImageButton
+            style={{margin: "4px", border: "1px solid black"}}/>, document.body);
+        expect(btn).toExist();
+
+        const btnDiv = React.findDOMNode(btn);
+        expect(btnDiv.style.cursor).toBe("pointer");
+        expect(btnDiv.style.margin).toBe("4px");
+        expect(btnDiv.style.padding).toBe("0px");
+        expect(btnDiv.style.display).toBe("inline-block");
+
+        expect(btnDiv.style.height).toBe("48px");
+        expect(btnDiv.style.width).toBe("48px");
+        expect(btnDiv.style.border).toBe("1px solid black");
+        expect(btnDiv.style.borderRadius).toBe("4px");
+        expect(btnDiv.style.backgroundColor).toBe("rgb(250, 250, 250)");
+    });
+
     it('create a button with image', () => {
         const btn = React.render(<ImageButton image="fake"/>, document.body);
         expect(btn).toExist();

web/client/components/buttons/__tests__/InfoButton-test.jsx

@@ -204,8 +204,6 @@ describe('This test for InfoButton', () => {
         expect(about).toExist();
         const aboutDom = React.findDOMNode(about);
         expect(aboutDom.getElementsByTagName('button').length).toBe(0);
-        expect(aboutDom.getElementsByTagName('div').length).toBe(1);
-        const imgButtonDom = aboutDom.getElementsByTagName('div')[0];
-        expect(imgButtonDom.getElementsByTagName('img').length).toBe(1);
+        expect(aboutDom.getElementsByTagName('img').length).toBe(1);
     });
 });

web/client/components/buttons/__tests__/ZoomToMaxExtentButton-test.jsx

@@ -74,42 +74,55 @@ describe('This test for ZoomToMaxExtentButton', () => {
     });
 
     it('test if click on button launches the proper action', () => {
-        let actions = {
-            changeMapView: (c, z, mb, ms) => {
-                return {c, z, mb, ms};
-            }
-        };
-        let spy = expect.spyOn(actions, "changeMapView");
-        var cmp = React.render(
-            <ZoomToMaxExtentButton
-                actions={actions}
-                mapConfig={{
-                    maxExtent: [-110, -110, 90, 90],
-                    zoom: 10,
-                    bbox: {
-                        crs: 'EPSG:4326',
-                        bounds: {
-                            minx: "-15",
-                            miny: "-15",
-                            maxx: "5",
-                            maxy: "5"
+
+        let genericTest = function(btnType) {
+            let actions = {
+                changeMapView: (c, z, mb, ms) => {
+                    return {c, z, mb, ms};
+                }
+            };
+            let spy = expect.spyOn(actions, "changeMapView");
+            var cmp = React.render(
+                <ZoomToMaxExtentButton
+                    actions={actions} btnType={btnType}
+                    mapConfig={{
+                        maxExtent: [-110, -110, 90, 90],
+                        zoom: 10,
+                        bbox: {
+                            crs: 'EPSG:4326',
+                            bounds: {
+                                minx: "-15",
+                                miny: "-15",
+                                maxx: "5",
+                                maxy: "5"
+                            }
+                        },
+                        size: {
+                            height: 100,
+                            width: 100
                         }
-                    },
-                    size: {
-                        height: 100,
-                        width: 100
-                    }
-                }}
-            />
-        , document.body);
-        expect(cmp).toExist();
-
-        const cmpDom = document.getElementById("mapstore-zoomtomaxextent");
-        expect(cmpDom).toExist();
-
-        cmpDom.click();
-        expect(spy.calls.length).toBe(1);
-        expect(spy.calls[0].arguments.length).toBe(4);
+                    }}
+                />
+            , document.body);
+            expect(cmp).toExist();
+
+            const cmpDom = document.getElementById("mapstore-zoomtomaxextent");
+            expect(cmpDom).toExist();
+
+            cmpDom.click();
+            expect(spy.calls.length).toBe(1);
+            expect(spy.calls[0].arguments.length).toBe(4);
+        };
+
+        genericTest("normal");
+        genericTest("image");
     });
 
+    it('creates the component with a ImageButton', () => {
+        const zmeBtn = React.render(<ZoomToMaxExtentButton btnType="image"/>, document.body);
+        expect(zmeBtn).toExist();
+        const zmeBtnNode = React.findDOMNode(zmeBtn);
+        expect(zmeBtnNode).toExist();
+        expect(zmeBtnNode.localName).toBe("img");
+    });
 });