mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 09:30:31 +03:00
Code Issues Projects Releases Packages Wiki Activity

Created custom react hook that can be used to handle toggles

Browse source
This commit is contained in:
Alejandro Celaya 2019-03-17 18:35:47 +01:00
parent 977e143b4e
commit ce0f036bef
2 changed files with 10 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/short-urls/UseExistingIfFoundInfoIcon.js
View file

@ -1,8 +1,9 @@
import React, { useState } from 'react'; import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons'; import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons';
import { Modal, ModalBody, ModalHeader } from 'reactstrap'; import { Modal, ModalBody, ModalHeader } from 'reactstrap';
import './UseExistingIfFoundInfoIcon.scss'; import './UseExistingIfFoundInfoIcon.scss';
import { useToggle } from '../utils/utils';
const renderInfoModal = (isOpen, toggle) => ( const renderInfoModal = (isOpen, toggle) => (
<Modal isOpen={isOpen} toggle={toggle} centered size="lg"> <Modal isOpen={isOpen} toggle={toggle} centered size="lg">
@ -40,8 +41,7 @@ const renderInfoModal = (isOpen, toggle) => (
); );
const UseExistingIfFoundInfoIcon = () => { const UseExistingIfFoundInfoIcon = () => {
const [ isModalOpen, setIsModalOpen ] = useState(false); const [ isModalOpen, toggleModal ] = useToggle(false);
const toggleModal = () => setIsModalOpen(!isModalOpen);
return ( return (
<React.Fragment> <React.Fragment>

7
src/utils/utils.js
View file

@ -3,6 +3,7 @@ import marker2x from 'leaflet/dist/images/marker-icon-2x.png';
import marker from 'leaflet/dist/images/marker-icon.png'; import marker from 'leaflet/dist/images/marker-icon.png';
import markerShadow from 'leaflet/dist/images/marker-shadow.png'; import markerShadow from 'leaflet/dist/images/marker-shadow.png';
import { range } from 'ramda'; import { range } from 'ramda';
import { useState } from 'react';
const TEN_ROUNDING_NUMBER = 10; const TEN_ROUNDING_NUMBER = 10;
const DEFAULT_TIMEOUT_DELAY = 2000; const DEFAULT_TIMEOUT_DELAY = 2000;
@ -44,3 +45,9 @@ export const fixLeafletIcons = () => {
export const rangeOf = (size, mappingFn, startAt = 1) => range(startAt, size + 1).map(mappingFn); export const rangeOf = (size, mappingFn, startAt = 1) => range(startAt, size + 1).map(mappingFn);
export const roundTen = (number) => ceil(number / TEN_ROUNDING_NUMBER) * TEN_ROUNDING_NUMBER; export const roundTen = (number) => ceil(number / TEN_ROUNDING_NUMBER) * TEN_ROUNDING_NUMBER;
export const useToggle = (initialValue = false) => {
const [ flag, setFlag ] = useState(initialValue);
return [ flag, () => setFlag(!flag) ];
};