diff --git a/src/visits/ShortUrlVisits.js b/src/visits/ShortUrlVisits.js index 94e94347..1604b5bb 100644 --- a/src/visits/ShortUrlVisits.js +++ b/src/visits/ShortUrlVisits.js @@ -12,6 +12,7 @@ import { VisitsHeader } from './VisitsHeader'; import GraphCard from './GraphCard'; import { shortUrlDetailType } from './reducers/shortUrlDetail'; import './ShortUrlVisits.scss'; +import OpenMapModalBtn from './helpers/OpenMapModalBtn'; const ShortUrlVisits = ({ processOsStats, @@ -101,6 +102,7 @@ const ShortUrlVisits = ({ ]} sortingItems={{ name: 'City name', amount: 'Visits amount', diff --git a/src/visits/SortableBarGraph.js b/src/visits/SortableBarGraph.js index f1637487..a76bc5bf 100644 --- a/src/visits/SortableBarGraph.js +++ b/src/visits/SortableBarGraph.js @@ -3,7 +3,6 @@ import PropTypes from 'prop-types'; import { fromPairs, head, identity, keys, pipe, prop, reverse, sortBy, toLower, toPairs, type } from 'ramda'; import SortingDropdown from '../utils/SortingDropdown'; import GraphCard from './GraphCard'; -import MapModal from './helpers/MapModal'; const toLowerIfString = (value) => type(value) === 'String' ? toLower(value) : identity(value); @@ -12,16 +11,16 @@ export default class SortableBarGraph extends React.Component { stats: PropTypes.object.isRequired, title: PropTypes.string.isRequired, sortingItems: PropTypes.object.isRequired, + extraHeaderContent: PropTypes.arrayOf(PropTypes.func), }; state = { orderField: undefined, orderDir: undefined, - mapIsOpened: false, }; render() { - const { stats, sortingItems, title } = this.props; + const { stats, sortingItems, title, extraHeaderContent } = this.props; const sortStats = () => { if (!this.state.orderField) { return stats; @@ -38,14 +37,10 @@ export default class SortableBarGraph extends React.Component { return fromPairs(this.state.orderDir === 'ASC' ? sortedPairs : reverse(sortedPairs)); }; - const toggleMap = () => this.setState(({ mapIsOpened }) => ({ mapIsOpened: !mapIsOpened })); - return ( {title}
- - this.setState({ orderField, orderDir })} />
+ {extraHeaderContent && extraHeaderContent.map((content, index) => ( +
+ {content()} +
+ ))}
); } diff --git a/src/visits/helpers/MapModal.js b/src/visits/helpers/MapModal.js index 988c3564..5126f56a 100644 --- a/src/visits/helpers/MapModal.js +++ b/src/visits/helpers/MapModal.js @@ -10,28 +10,30 @@ const propTypes = { title: PropTypes.string, }; -const madridLat = 40.416775; -const madridLong = -3.703790; -const latLong = [ madridLat, madridLong ]; +const MapModal = ({ toggle, isOpen, title }) => { + const madridLat = 40.416775; + const madridLong = -3.703790; + const latLong = [ madridLat, madridLong ]; -const MapModal = ({ toggle, isOpen, title }) => ( - - {title} - - - - - - A pretty CSS3 popup.
Easily customizable. -
-
-
-
-
-); + return ( + + {title} + + + + + + A pretty CSS3 popup.
Easily customizable. +
+
+
+
+
+ ); +}; MapModal.propTypes = propTypes; diff --git a/src/visits/helpers/MapModal.scss b/src/visits/helpers/MapModal.scss index 7b2aed55..1a23bae4 100644 --- a/src/visits/helpers/MapModal.scss +++ b/src/visits/helpers/MapModal.scss @@ -15,11 +15,11 @@ } } -.map-modal__modal .modal-content { +.map-modal__modal-content { height: 100%; } -.map-modal__modal .modal-body { +.map-modal__modal-body { padding: 0; display: flex; overflow: hidden; diff --git a/src/visits/helpers/OpenMapModalBtn.js b/src/visits/helpers/OpenMapModalBtn.js new file mode 100644 index 00000000..c90fdc9d --- /dev/null +++ b/src/visits/helpers/OpenMapModalBtn.js @@ -0,0 +1,31 @@ +import React from 'react'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faMapMarkedAlt as mapIcon } from '@fortawesome/free-solid-svg-icons'; +import { UncontrolledTooltip } from 'reactstrap'; +import * as PropTypes from 'prop-types'; +import MapModal from './MapModal'; +import './OpenMapModalBtn.scss'; + +export default class OpenMapModalBtn extends React.Component { + static propTypes = { + title: PropTypes.string.isRequired, + }; + + state = { mapIsOpened: false }; + + render() { + const { title } = this.props; + const toggleMap = () => this.setState(({ mapIsOpened }) => ({ mapIsOpened: !mapIsOpened })); + const buttonRef = React.createRef(); + + return ( + + + buttonRef.current}>Show in map + + + ); + } +} diff --git a/src/visits/helpers/OpenMapModalBtn.scss b/src/visits/helpers/OpenMapModalBtn.scss new file mode 100644 index 00000000..1da946fe --- /dev/null +++ b/src/visits/helpers/OpenMapModalBtn.scss @@ -0,0 +1,4 @@ +.open-map-modal-btn__btn { + padding: 0; + margin-right: 1rem; +}