From ace28c2eaf920fbd162ebd663d7e61c68221810d Mon Sep 17 00:00:00 2001 From: Yakup Malikov Date: Mon, 2 Sep 2024 19:29:36 +0300 Subject: [PATCH 1/3] formatted TurkeyMap component --- package-lock.json | 4 +- src/TurkeyMap.jsx | 122 ++++++++++++++++++++++------------------------ 2 files changed, 61 insertions(+), 65 deletions(-) diff --git a/package-lock.json b/package-lock.json index d988e9b..0049f40 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "react-turkey-map", - "version": "1.0.11", + "version": "1.0.19", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "react-turkey-map", - "version": "1.0.11", + "version": "1.0.19", "license": "MIT", "devDependencies": { "@babel/core": "^7.24.6", diff --git a/src/TurkeyMap.jsx b/src/TurkeyMap.jsx index 250f79d..734a015 100644 --- a/src/TurkeyMap.jsx +++ b/src/TurkeyMap.jsx @@ -1,46 +1,51 @@ /** @jsxImportSource @emotion/react */ -import React, { useState } from 'react' +import React, { useState } from "react"; -import cities from './cities' -import styles from './styles' +import cities from "./cities"; +import styles from "./styles"; -export default ({ colorData: _colorData, showTooltip: _showTooltip, tooltipData: _tooltipData }) => { - const colorData = _colorData || {} - const showTooltip = _showTooltip !== undefined ? _showTooltip : true - const tooltipData = _tooltipData || {} +export default ({ + colorData: _colorData, + showTooltip: _showTooltip, + tooltipData: _tooltipData, +}) => { + const colorData = _colorData || {}; + const showTooltip = _showTooltip !== undefined ? _showTooltip : true; + const tooltipData = _tooltipData || {}; - const [tooltip, setTooltip] = useState('') - const [position, setPosition] = useState({ top: 0, left: 0 }) + const [tooltip, setTooltip] = useState(""); + const [position, setPosition] = useState({ top: 0, left: 0 }); - const handleMouseOver = event => { - if (event.target.tagName === 'path') { - const city = event.target.parentNode.getAttribute('data-city') - const plate = event.target.parentNode.getAttribute('data-plate') + const handleMouseOver = (event) => { + if (event.target.tagName === "path") { + const city = event.target.parentNode.getAttribute("data-city"); + const plate = event.target.parentNode.getAttribute("data-plate"); const TooltipComponent = (
- {city}{tooltipData[plate] ? `: ${tooltipData[plate]}` : ''} + {city} + {tooltipData[plate] ? `: ${tooltipData[plate]}` : ""}
- ) - setTooltip(TooltipComponent) + ); + setTooltip(TooltipComponent); } - } + }; - const handleMouseMove = event => { - setPosition({ top: event.pageY + 25, left: event.pageX }) - } + const handleMouseMove = (event) => { + setPosition({ top: event.pageY + 25, left: event.pageX }); + }; const handleMouseOut = () => { - setTooltip('') - } + setTooltip(""); + }; - const handleClick = event => { - if (event.target.tagName === 'path') { - const parent = event.target.parentNode - const city = parent.getAttribute('data-city') - const plate = parent.getAttribute('data-plate') - console.log({ city, plate }) + const handleClick = (event) => { + if (event.target.tagName === "path") { + const parent = event.target.parentNode; + const city = parent.getAttribute("data-city"); + const plate = parent.getAttribute("data-plate"); + console.log({ city, plate }); } - } + }; return (
@@ -53,48 +58,39 @@ export default ({ colorData: _colorData, showTooltip: _showTooltip, tooltipData:
- { - cities.map((city, key) => { - return ( - - { - colorData[city.plate] - ? ( - - ) - : ( - - ) - } - - ) - }) - } + {cities.map((city, key) => { + return ( + + {colorData[city.plate] ? ( + + ) : ( + + )} + + ); + })}
- ) -} + ); +}; From 66c21587f782509b72f9899ccca6d1979e46c88f Mon Sep 17 00:00:00 2001 From: Yakup Malikov Date: Mon, 2 Sep 2024 19:38:01 +0300 Subject: [PATCH 2/3] formatted components --- example/MapComponent.jsx | 11 +++-------- example/index.jsx | 31 ++++++++++++------------------- 2 files changed, 15 insertions(+), 27 deletions(-) diff --git a/example/MapComponent.jsx b/example/MapComponent.jsx index 8163296..690d6b0 100644 --- a/example/MapComponent.jsx +++ b/example/MapComponent.jsx @@ -1,15 +1,10 @@ // development -import TurkeyMap from './../src/TurkeyMap' +import TurkeyMap from "./../src/TurkeyMap"; // build test // import TurkeyMap from './../build/TurkeyMap' // npm test // import TurkeyMap from 'react-turkey-map' export default ({ colorData, tooltipData }) => { - return ( - - ) -} + return ; +}; diff --git a/example/index.jsx b/example/index.jsx index ad6c053..178306a 100644 --- a/example/index.jsx +++ b/example/index.jsx @@ -1,29 +1,22 @@ /** @jsxImportSource @emotion/react */ -import { useState } from 'react' -import { createRoot } from 'react-dom/client' +import { useState } from "react"; +import { createRoot } from "react-dom/client"; -import styles from './styles' -import Buttons from './Buttons' -import MapComponent from './MapComponent' +import styles from "./styles"; +import Buttons from "./Buttons"; +import MapComponent from "./MapComponent"; const App = () => { - const [colorData, setColorData] = useState({}) - const [tooltipData, setTooltipData] = useState({}) + const [colorData, setColorData] = useState({}); + const [tooltipData, setTooltipData] = useState({}); return (
- + - +
- ) -} + ); +}; -createRoot(document.getElementById('app')) - .render() +createRoot(document.getElementById("app")).render(); From ee1433db85713e19baf7602ba57fa180fb70e141 Mon Sep 17 00:00:00 2001 From: Yakup Malikov Date: Mon, 2 Sep 2024 19:44:45 +0300 Subject: [PATCH 3/3] added onClick city instead of consoling --- example/MapComponent.jsx | 10 ++++++++-- example/index.jsx | 10 +++++++++- src/TurkeyMap.jsx | 9 +++++++-- 3 files changed, 24 insertions(+), 5 deletions(-) diff --git a/example/MapComponent.jsx b/example/MapComponent.jsx index 690d6b0..44d1830 100644 --- a/example/MapComponent.jsx +++ b/example/MapComponent.jsx @@ -5,6 +5,12 @@ import TurkeyMap from "./../src/TurkeyMap"; // npm test // import TurkeyMap from 'react-turkey-map' -export default ({ colorData, tooltipData }) => { - return ; +export default ({ colorData, tooltipData, onClick }) => { + return ( + + ); }; diff --git a/example/index.jsx b/example/index.jsx index 178306a..2cd0890 100644 --- a/example/index.jsx +++ b/example/index.jsx @@ -10,11 +10,19 @@ const App = () => { const [colorData, setColorData] = useState({}); const [tooltipData, setTooltipData] = useState({}); + const handleOnClick = (city, plate) => { + console.log(`City: ${city}, Plate: ${plate}`); + }; + return (
- +
); }; diff --git a/src/TurkeyMap.jsx b/src/TurkeyMap.jsx index 734a015..da4f364 100644 --- a/src/TurkeyMap.jsx +++ b/src/TurkeyMap.jsx @@ -1,5 +1,5 @@ /** @jsxImportSource @emotion/react */ -import React, { useState } from "react"; +import { useState } from "react"; import cities from "./cities"; import styles from "./styles"; @@ -8,10 +8,12 @@ export default ({ colorData: _colorData, showTooltip: _showTooltip, tooltipData: _tooltipData, + onClick: _onClick, }) => { const colorData = _colorData || {}; const showTooltip = _showTooltip !== undefined ? _showTooltip : true; const tooltipData = _tooltipData || {}; + const onClick = _onClick; const [tooltip, setTooltip] = useState(""); const [position, setPosition] = useState({ top: 0, left: 0 }); @@ -43,7 +45,10 @@ export default ({ const parent = event.target.parentNode; const city = parent.getAttribute("data-city"); const plate = parent.getAttribute("data-plate"); - console.log({ city, plate }); + + if (onClick) { + onClick(city, plate); + } } };