From c12abf5706058af95ce2a166ab28d2508e14dbae Mon Sep 17 00:00:00 2001 From: Mitchell McCaffrey Date: Sat, 18 Apr 2020 23:31:40 +1000 Subject: [PATCH] Added map controls component and moved to seperate files for icons --- src/components/AddMapButton.js | 16 ++------ src/components/AddPartyMemberButton.js | 12 +----- src/components/ChangeNicknameButton.js | 12 +----- src/components/Map.js | 18 +-------- src/components/MapControls.js | 56 ++++++++++++++++++++++++++ src/icons/AddMapIcon.js | 18 +++++++++ src/icons/AddPartyMemberIcon.js | 18 +++++++++ src/icons/BrushToolIcon.js | 18 +++++++++ src/icons/ChangeNicknameIcon.js | 18 +++++++++ src/icons/EraseToolIcon.js | 23 +++++++++++ src/icons/ExpandMoreIcon.js | 18 +++++++++ src/icons/PanToolIcon.js | 18 +++++++++ src/icons/RedoIcon.js | 18 +++++++++ src/icons/UndoIcon.js | 18 +++++++++ 14 files changed, 233 insertions(+), 48 deletions(-) create mode 100644 src/components/MapControls.js create mode 100644 src/icons/AddMapIcon.js create mode 100644 src/icons/AddPartyMemberIcon.js create mode 100644 src/icons/BrushToolIcon.js create mode 100644 src/icons/ChangeNicknameIcon.js create mode 100644 src/icons/EraseToolIcon.js create mode 100644 src/icons/ExpandMoreIcon.js create mode 100644 src/icons/PanToolIcon.js create mode 100644 src/icons/RedoIcon.js create mode 100644 src/icons/UndoIcon.js diff --git a/src/components/AddMapButton.js b/src/components/AddMapButton.js index 5e67203..ecb1bb7 100644 --- a/src/components/AddMapButton.js +++ b/src/components/AddMapButton.js @@ -2,10 +2,11 @@ import React, { useRef, useState, useEffect } from "react"; import { IconButton } from "theme-ui"; import AddMapModal from "../modals/AddMapModal"; +import AddMapIcon from "../icons/AddMapIcon"; const defaultMapSize = 22; -function AddMapButton({ onMapChanged }) { +function AddMapButton({ onMapChange }) { const [isAddModalOpen, setIsAddModalOpen] = useState(false); function openModal() { setIsAddModalOpen(true); @@ -37,7 +38,7 @@ function AddMapButton({ onMapChanged }) { function handleDone() { if (mapDataRef.current && mapSource) { - onMapChanged(mapDataRef.current, mapSource); + onMapChange(mapDataRef.current, mapSource); } closeModal(); } @@ -54,16 +55,7 @@ function AddMapButton({ onMapChanged }) { return ( <> - - - - + - - - - + - - - - + ); - const mapActions = ( - - - - ); - return ( <> - {mapActions} + + ); + return ( + + + + + + {divider} + + + + + + + + + + {divider} + + + + + + + + ); +} + +export default MapControls; diff --git a/src/icons/AddMapIcon.js b/src/icons/AddMapIcon.js new file mode 100644 index 0000000..aebdf6a --- /dev/null +++ b/src/icons/AddMapIcon.js @@ -0,0 +1,18 @@ +import React from "react"; + +function AddMapIcon() { + return ( + + + + + ); +} + +export default AddMapIcon; diff --git a/src/icons/AddPartyMemberIcon.js b/src/icons/AddPartyMemberIcon.js new file mode 100644 index 0000000..596e40b --- /dev/null +++ b/src/icons/AddPartyMemberIcon.js @@ -0,0 +1,18 @@ +import React from "react"; + +function AddPartyMemberIcon() { + return ( + + + + + ); +} + +export default AddPartyMemberIcon; diff --git a/src/icons/BrushToolIcon.js b/src/icons/BrushToolIcon.js new file mode 100644 index 0000000..e9a9c68 --- /dev/null +++ b/src/icons/BrushToolIcon.js @@ -0,0 +1,18 @@ +import React from "react"; + +function BrushToolIcon() { + return ( + + + + + ); +} + +export default BrushToolIcon; diff --git a/src/icons/ChangeNicknameIcon.js b/src/icons/ChangeNicknameIcon.js new file mode 100644 index 0000000..3c5d1a8 --- /dev/null +++ b/src/icons/ChangeNicknameIcon.js @@ -0,0 +1,18 @@ +import React from "react"; + +function ChangeNicknameIcon() { + return ( + + + + + ); +} + +export default ChangeNicknameIcon; diff --git a/src/icons/EraseToolIcon.js b/src/icons/EraseToolIcon.js new file mode 100644 index 0000000..710ccbf --- /dev/null +++ b/src/icons/EraseToolIcon.js @@ -0,0 +1,23 @@ +import React from "react"; + +function EraseToolIcon() { + return ( + + + + + + + ); +} + +export default EraseToolIcon; diff --git a/src/icons/ExpandMoreIcon.js b/src/icons/ExpandMoreIcon.js new file mode 100644 index 0000000..35e4078 --- /dev/null +++ b/src/icons/ExpandMoreIcon.js @@ -0,0 +1,18 @@ +import React from "react"; + +function ExpandMoreIcon() { + return ( + + + + + ); +} + +export default ExpandMoreIcon; diff --git a/src/icons/PanToolIcon.js b/src/icons/PanToolIcon.js new file mode 100644 index 0000000..479d197 --- /dev/null +++ b/src/icons/PanToolIcon.js @@ -0,0 +1,18 @@ +import React from "react"; + +function PanToolIcon() { + return ( + + + + + ); +} + +export default PanToolIcon; diff --git a/src/icons/RedoIcon.js b/src/icons/RedoIcon.js new file mode 100644 index 0000000..6f0896b --- /dev/null +++ b/src/icons/RedoIcon.js @@ -0,0 +1,18 @@ +import React from "react"; + +function RedoIcon() { + return ( + + + + + ); +} + +export default RedoIcon; diff --git a/src/icons/UndoIcon.js b/src/icons/UndoIcon.js new file mode 100644 index 0000000..da08de0 --- /dev/null +++ b/src/icons/UndoIcon.js @@ -0,0 +1,18 @@ +import React from "react"; + +function UndoIcon() { + return ( + + + + + ); +} + +export default UndoIcon;