forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-04-20 13:36:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improved useToggle hook so that it also returns enabler and disabler

Browse Source
This commit is contained in:
Alejandro Celaya
2020-04-05 12:18:41 +02:00
parent 66bf26f1dc
commit 94c5b2c471
7 changed files with 36 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/visits/helpers/OpenMapModalBtn.js
View File

@@ -3,6 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faMapMarkedAlt as mapIcon } from '@fortawesome/free-solid-svg-icons';
import { Dropdown, DropdownItem, DropdownMenu, UncontrolledTooltip } from 'reactstrap';
import * as PropTypes from 'prop-types';
import { useToggle } from '../../utils/helpers/hooks';
import './OpenMapModalBtn.scss';
const propTypes = {
@@ -13,26 +14,25 @@ const propTypes = {
const OpenMapModalBtn = (MapModal) => {
const OpenMapModalBtn = ({ modalTitle, locations = [], activeCities }) => {
const [ mapIsOpened, setMapIsOpened ] = useState(false);
const [ dropdownIsOpened, setDropdownIsOpened ] = useState(false);
const [ mapIsOpened, , openMap, closeMap ] = useToggle();
const [ dropdownIsOpened, toggleDropdown, openDropdown ] = useToggle();
const [ locationsToShow, setLocationsToShow ] = useState([]);
const buttonRef = React.createRef();
const filterLocations = (locations) => locations.filter(({ cityName }) => activeCities.includes(cityName));
const toggleMap = () => setMapIsOpened(!mapIsOpened);
const onClick = () => {
if (!activeCities) {
setLocationsToShow(locations);
setMapIsOpened(true);
openMap();
return;
}
setDropdownIsOpened(true);
openDropdown();
};
const openMapWithLocations = (filtered) => () => {
setLocationsToShow(filtered ? filterLocations(locations) : locations);
setMapIsOpened(true);
openMap();
};
return (
@@ -41,13 +41,13 @@ const OpenMapModalBtn = (MapModal) => {
<FontAwesomeIcon icon={mapIcon} />
</button>
<UncontrolledTooltip placement="left" target={() => buttonRef.current}>Show in map</UncontrolledTooltip>
<Dropdown isOpen={dropdownIsOpened} toggle={() => setDropdownIsOpened(!dropdownIsOpened)} inNavbar>
<Dropdown isOpen={dropdownIsOpened} toggle={toggleDropdown} inNavbar>
<DropdownMenu right>
<DropdownItem onClick={openMapWithLocations(false)}>Show all locations</DropdownItem>
<DropdownItem onClick={openMapWithLocations(true)}>Show locations in current page</DropdownItem>
</DropdownMenu>
</Dropdown>
<MapModal toggle={toggleMap} isOpen={mapIsOpened} title={modalTitle} locations={locationsToShow} />
<MapModal toggle={closeMap} isOpen={mapIsOpened} title={modalTitle} locations={locationsToShow} />
</React.Fragment>
);
};