mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2024-12-23 09:30:31 +03:00
Improved useToggle hook so that it also returns enabler and disabler
This commit is contained in:
parent
66bf26f1dc
commit
94c5b2c471
7 changed files with 36 additions and 37 deletions
|
@ -1,4 +1,4 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import React, { useEffect } from 'react';
|
||||
import { Route, Switch } from 'react-router-dom';
|
||||
import { Swipeable } from 'react-swipeable';
|
||||
import { faBars as burgerIcon } from '@fortawesome/free-solid-svg-icons';
|
||||
|
@ -7,6 +7,7 @@ import classNames from 'classnames';
|
|||
import * as PropTypes from 'prop-types';
|
||||
import { serverType } from '../servers/prop-types';
|
||||
import { withSelectedServer } from '../servers/helpers/withSelectedServer';
|
||||
import { useToggle } from '../utils/helpers/hooks';
|
||||
import NotFound from './NotFound';
|
||||
import './MenuLayout.scss';
|
||||
|
||||
|
@ -18,43 +19,39 @@ const propTypes = {
|
|||
|
||||
const MenuLayout = (TagsList, ShortUrls, AsideMenu, CreateShortUrl, ShortUrlVisits, ShlinkVersions, ServerError) => {
|
||||
const MenuLayoutComp = ({ match, location, selectedServer }) => {
|
||||
const [ showSideBar, setShowSidebar ] = useState(false);
|
||||
const [ sidebarVisible, toggleSidebar, showSidebar, hideSidebar ] = useToggle();
|
||||
const { params: { serverId } } = match;
|
||||
|
||||
useEffect(() => setShowSidebar(false), [ location ]);
|
||||
useEffect(() => hideSidebar(), [ location ]);
|
||||
|
||||
if (selectedServer.serverNotReachable) {
|
||||
return <ServerError type="not-reachable" />;
|
||||
}
|
||||
|
||||
const burgerClasses = classNames('menu-layout__burger-icon', {
|
||||
'menu-layout__burger-icon--active': showSideBar,
|
||||
'menu-layout__burger-icon--active': sidebarVisible,
|
||||
});
|
||||
const swipeMenuIfNoModalExists = (showSideBar) => () => {
|
||||
const swipeMenuIfNoModalExists = (callback) => () => {
|
||||
if (document.querySelector('.modal')) {
|
||||
return;
|
||||
}
|
||||
|
||||
setShowSidebar(showSideBar);
|
||||
callback();
|
||||
};
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<FontAwesomeIcon
|
||||
icon={burgerIcon}
|
||||
className={burgerClasses}
|
||||
onClick={() => setShowSidebar(!showSideBar)}
|
||||
/>
|
||||
<FontAwesomeIcon icon={burgerIcon} className={burgerClasses} onClick={toggleSidebar} />
|
||||
|
||||
<Swipeable
|
||||
delta={40}
|
||||
className="menu-layout__swipeable"
|
||||
onSwipedLeft={swipeMenuIfNoModalExists(false)}
|
||||
onSwipedRight={swipeMenuIfNoModalExists(true)}
|
||||
onSwipedLeft={swipeMenuIfNoModalExists(hideSidebar)}
|
||||
onSwipedRight={swipeMenuIfNoModalExists(showSidebar)}
|
||||
>
|
||||
<div className="row menu-layout__swipeable-inner">
|
||||
<AsideMenu className="col-lg-2 col-md-3" selectedServer={selectedServer} showOnMobile={showSideBar} />
|
||||
<div className="col-lg-10 offset-lg-2 col-md-9 offset-md-3" onClick={() => setShowSidebar(false)}>
|
||||
<AsideMenu className="col-lg-2 col-md-3" selectedServer={selectedServer} showOnMobile={sidebarVisible} />
|
||||
<div className="col-lg-10 offset-lg-2 col-md-9 offset-md-3" onClick={() => hideSidebar()}>
|
||||
<div className="menu-layout__container">
|
||||
<Switch>
|
||||
<Route exact path="/server/:serverId/list-short-urls/:page" component={ShortUrls} />
|
||||
|
|
|
@ -1,7 +1,8 @@
|
|||
import React, { useState } from 'react';
|
||||
import React from 'react';
|
||||
import { faMinusCircle as deleteIcon } from '@fortawesome/free-solid-svg-icons';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import PropTypes from 'prop-types';
|
||||
import { useToggle } from '../utils/helpers/hooks';
|
||||
import { serverType } from './prop-types';
|
||||
|
||||
const propTypes = {
|
||||
|
@ -13,16 +14,16 @@ const propTypes = {
|
|||
|
||||
const DeleteServerButton = (DeleteServerModal) => {
|
||||
const DeleteServerButtonComp = ({ server, className, children, textClassName }) => {
|
||||
const [ isModalOpen, setModalOpen ] = useState(false);
|
||||
const [ isModalOpen, , showModal, hideModal ] = useToggle();
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<span className={className} onClick={() => setModalOpen(true)}>
|
||||
<span className={className} onClick={showModal}>
|
||||
{!children && <FontAwesomeIcon icon={deleteIcon} />}
|
||||
<span className={textClassName}>{children || 'Remove this server'}</span>
|
||||
</span>
|
||||
|
||||
<DeleteServerModal server={server} isOpen={isModalOpen} toggle={() => setModalOpen(!isModalOpen)} />
|
||||
<DeleteServerModal server={server} isOpen={isModalOpen} toggle={hideModal} />
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -36,7 +36,7 @@ const CreateShortUrl = (TagsSelector, CreateShortUrlResult, ForServerVersion) =>
|
|||
maxVisits: undefined,
|
||||
findIfExists: false,
|
||||
});
|
||||
const [ moreOptionsVisible, toggleMoreOptionsVisible ] = useToggle(false);
|
||||
const [ moreOptionsVisible, toggleMoreOptionsVisible ] = useToggle();
|
||||
|
||||
const changeTags = (tags) => setShortUrlCreation({ ...shortUrlCreation, tags: tags.map(normalizeTag) });
|
||||
const renderOptionalInput = (id, placeholder, type = 'text', props = {}) => (
|
||||
|
|
|
@ -38,7 +38,7 @@ const renderInfoModal = (isOpen, toggle) => (
|
|||
);
|
||||
|
||||
const UseExistingIfFoundInfoIcon = () => {
|
||||
const [ isModalOpen, toggleModal ] = useToggle(false);
|
||||
const [ isModalOpen, toggleModal ] = useToggle();
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
|
|
|
@ -26,13 +26,13 @@ const propTypes = {
|
|||
|
||||
const ShortUrlsRowMenu = (DeleteShortUrlModal, EditTagsModal, EditMetaModal, EditShortUrlModal, ForServerVersion) => {
|
||||
const ShortUrlsRowMenuComp = ({ shortUrl, selectedServer }) => {
|
||||
const [ isOpen, toggle ] = useToggle(false);
|
||||
const [ isQrModalOpen, toggleQrCode ] = useToggle(false);
|
||||
const [ isPreviewModalOpen, togglePreview ] = useToggle(false);
|
||||
const [ isTagsModalOpen, toggleTags ] = useToggle(false);
|
||||
const [ isMetaModalOpen, toggleMeta ] = useToggle(false);
|
||||
const [ isDeleteModalOpen, toggleDelete ] = useToggle(false);
|
||||
const [ isEditModalOpen, toggleEdit ] = useToggle(false);
|
||||
const [ isOpen, toggle ] = useToggle();
|
||||
const [ isQrModalOpen, toggleQrCode ] = useToggle();
|
||||
const [ isPreviewModalOpen, togglePreview ] = useToggle();
|
||||
const [ isTagsModalOpen, toggleTags ] = useToggle();
|
||||
const [ isMetaModalOpen, toggleMeta ] = useToggle();
|
||||
const [ isDeleteModalOpen, toggleDelete ] = useToggle();
|
||||
const [ isEditModalOpen, toggleEdit ] = useToggle();
|
||||
const completeShortUrl = shortUrl && shortUrl.shortUrl ? shortUrl.shortUrl : '';
|
||||
|
||||
return (
|
||||
|
|
|
@ -12,8 +12,9 @@ export const useStateFlagTimeout = (setTimeout) => (initialValue = true, delay =
|
|||
return [ flag, callback ];
|
||||
};
|
||||
|
||||
// Return [ flag, toggle, enable, disable ]
|
||||
export const useToggle = (initialValue = false) => {
|
||||
const [ flag, setFlag ] = useState(initialValue);
|
||||
|
||||
return [ flag, () => setFlag(!flag) ];
|
||||
return [ flag, () => setFlag(!flag), () => setFlag(true), () => setFlag(false) ];
|
||||
};
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
Loading…
Reference in a new issue