Merge pull request #9 from WiredSolutions/style-dump-example

myDump example style improvements

src/examples/MyDump/MyDump.tsx

@@ -1,4 +1,4 @@
-import React, {memo, useMemo, useState} from "react";
+import React, { memo, useMemo, useState } from "react";
 import {
     AzureMap,
     AzureMapDataSourceProvider,
@@ -9,7 +9,8 @@ import {
     IAzureMapHtmlMarkerEvent, IAzureMapLayerType,
     IAzureMapOptions
 } from "react-azure-maps";
-import {AuthenticationType, data, HtmlMarkerOptions} from "azure-maps-control";
+import { AuthenticationType, data, HtmlMarkerOptions } from "azure-maps-control";
+import { Button, Chip } from '@material-ui/core';
 
 const point1 = new data.Position(-100.01, 45.01);
 const point2 = new data.Position(-120.2, 45.1);
@@ -31,7 +32,7 @@ function azureHtmlMapMarkerOptions(coordinates: data.Position): HtmlMarkerOption
 };
 
 const eventToMarker: Array<IAzureMapHtmlMarkerEvent> = [
-    {eventName: "click", callback: onClick}
+    { eventName: "click", callback: onClick }
 ];
 
 const renderPoint = (coordinates: data.Position) => {
@@ -105,10 +106,10 @@ const MyDump: React.FC = () => {
     ), [markers])
 
     const memoizedHtmlMarkerRender: IAzureDataSourceChildren = useMemo((): any => (
-            htmlMarkers.map(marker =>
-                renderHTMLPoint(marker)
-            )
-        ), [htmlMarkers]
+        htmlMarkers.map(marker =>
+            renderHTMLPoint(marker)
+        )
+    ), [htmlMarkers]
     )
 
 
@@ -117,19 +118,16 @@ const MyDump: React.FC = () => {
         <>
             MAP {dump}
             <div style={styles.buttonContainer}>
-                <div>
-                    <div>
-                        Markers Point on map: {markers.length}
-                    </div>
-                    <div>
-                        Markers HTML on map: {htmlMarkers.length}
-                    </div>
-                </div>
-                <div style={styles.button} onClick={addRandomMarker}> MARKER POINT</div>
-                <div style={styles.button} onClick={addRandomHTMLMarker}> HTML MARKER</div>
-                <div style={styles.button} onClick={removeAllMarkers}> REMOVE ALL</div>
-                <div style={styles.button} onClick={() => setMarkersLayer('SymbolLayer')}> SET POINT</div>
-                <div style={styles.button} onClick={() => setMarkersLayer('HeatLayer')}> SET HEAT</div>
+
+                <Button size="small" variant="contained" color="primary" onClick={addRandomMarker}> MARKER POINT</Button>
+                <Button size="small" variant="contained" color="primary" onClick={addRandomHTMLMarker}> HTML MARKER</Button>
+                <Button size="small" variant="contained" color="primary" onClick={() => setMarkersLayer('SymbolLayer')}> SET POINT</Button>
+                <Button size="small" variant="contained" color="primary" onClick={() => setMarkersLayer('HeatLayer')}> SET HEAT</Button>
+                <Button size="small" variant="contained" color="primary" onClick={removeAllMarkers}> REMOVE ALL</Button>
+
+
+                <Chip label={`Markers Point on map: ${markers.length}`} />
+                <Chip label={`Markers HTML on map: ${htmlMarkers.length}`} />
             </div>
             <div>
                 <AzureMapsProvider>
@@ -170,10 +168,12 @@ const MyDump: React.FC = () => {
 
 const styles = {
     buttonContainer: {
-        height: 40,
-        display: 'flex',
-        justifyContent: 'space-around',
-        padding: 10
+        display: 'grid',
+        gridAutoFlow: 'column',
+        gridGap: '10px',
+        gridAutoColumns: 'max-content',
+        padding: '10px 0',
+        alignItems: 'center'
     },
     button: {
         height: 35,

src/examples/MyDump/MyDumpContainer.tsx

@@ -1,29 +1,26 @@
 // @flow
 import * as React from 'react';
 import MyDump from "./MyDump";
-import {MyDumpWrapper} from "./MyDumpWrapper";
+import { MyDumpWrapper } from "./MyDumpWrapper";
+import { Paper } from '@material-ui/core';
+
 
 type Props = {
 
 };
 export const MyDumpContainer = (props: Props) => {
     return (
-        <div>
-            <div style={styles.buttons}>
-                My Dump container
-                <MyDumpWrapper/>
-
-            </div>
-        </div>
+        <Paper elevation={2} style={styles.buttons} >
+            My Dump container
+                <MyDumpWrapper />
+        </Paper >
     );
 };
 
 
 export const styles = {
     buttons: {
-        border: "solid",
-        borderSize: "2px",
+        padding: '15px',
         flex: 1,
-        borderColor: '#885875'
     }
 }

src/examples/MyDump/MyDumpWrapper.tsx

@@ -1,6 +1,9 @@
 import * as React from 'react';
-import {useState} from "react";
+import { useState } from "react";
 import MyDump from "./MyDump";
+import { Button } from '@material-ui/core';
+import { Paper } from '@material-ui/core';
+
 
 export type DumpProps = {
     text?: String
@@ -9,33 +12,28 @@ export const MyDumpWrapper = (props: DumpProps) => {
     const [dump, setDump] = useState('START');
     console.log('Wrapper')
     return (
-        <div style={wrapperStyles.wrapper}>
+        <Paper elevation={3} style={wrapperStyles.wrapper}>
             Wrapper {dump}
             <div style={wrapperStyles.buttonContainer}>
-                <div style={wrapperStyles.button} onClick={() => setDump('FIRST BUTTON')} />
-                <div style={wrapperStyles.button} onClick={() => setDump('SECOND BUTTON')}/>
-                <div style={wrapperStyles.button}/>
+                <Button size="small" variant="contained" color="secondary" onClick={() => setDump('FIRST BUTTON')}>Button </Button>
+                <Button size="small" variant="contained" color="secondary" onClick={() => setDump('SECOND BUTTON')}>Button </Button>
+                <Button size="small" variant="contained" color="secondary" >Button </Button>
             </div>
             <MyDump />
-        </div>
+        </Paper>
     );
 };
 
 export const wrapperStyles = {
     wrapper: {
-        border: "solid",
-        borderSize: "2px",
-        borderColor: '#2113ab'
+        padding: '15px',
+        marginTop: '15px'
     },
     buttonContainer: {
-        height: 40,
-        display: 'flex',
-        justifyContent: 'space-around',
-        padding: 10
+        display: 'grid',
+        gridAutoFlow: 'column',
+        gridGap: '10px',
+        gridAutoColumns: 'max-content',
+        padding: '10px 0',
     },
-    button: {
-        height: 35,
-        width: 80,
-        backgroundColor: '#2213ab'
-    }
 }