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

Extracted InfoTooltip to its own component

Browse Source
This commit is contained in:
Alejandro Celaya
2021-08-22 11:05:07 +02:00
parent e7a969a78d
commit 410d372755
4 changed files with 39 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/domains/helpers/EditDomainRedirectsModal.tsx
View File

@@ -1,10 +1,9 @@
import { FC, useState } from 'react';
import { Button, Modal, ModalBody, ModalFooter, ModalHeader, UncontrolledTooltip } from 'reactstrap';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons';
import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
import { ShlinkDomain, ShlinkDomainRedirects } from '../../api/types';
import { FormGroupContainer } from '../../utils/FormGroupContainer';
import { handleEventPreventingDefault, nonEmptyValueOrNull } from '../../utils/utils';
import { InfoTooltip } from '../../utils/InfoTooltip';
interface EditDomainRedirectsModalProps {
domain: ShlinkDomain;
@@ -13,13 +12,6 @@ interface EditDomainRedirectsModalProps {
editDomainRedirects: (domain: string, redirects: Partial<ShlinkDomainRedirects>) => Promise<void>;
}
const InfoTooltip: FC<{ id: string }> = ({ id, children }) => (
<>
<FontAwesomeIcon icon={infoIcon} className="mr-2" id={id} />
<UncontrolledTooltip target={id} placement="bottom">{children}</UncontrolledTooltip>
</>
);
const FormGroup: FC<{ value: string; onChange: (newValue: string) => void; isLast?: boolean }> = (
{ value, onChange, isLast, children },
) => (
@@ -50,25 +42,23 @@ export const EditDomainRedirectsModal: FC<EditDomainRedirectsModalProps> = (
return (
<Modal isOpen={isOpen} toggle={toggle} centered>
<form onSubmit={handleSubmit}>
<ModalHeader toggle={toggle}>
Edit redirects for <b>{domain.domain}</b>
</ModalHeader>
<ModalHeader toggle={toggle}>Edit redirects for <b>{domain.domain}</b></ModalHeader>
<ModalBody>
<FormGroup value={baseUrlRedirect} onChange={setBaseUrlRedirect}>
<InfoTooltip id="baseUrlInfo">
<InfoTooltip className="mr-2" placement="bottom">
Visitors accessing the base url, as in <b>https://{domain.domain}/</b>, will be redirected to this URL.
</InfoTooltip>
Base URL
</FormGroup>
<FormGroup value={regular404Redirect} onChange={setRegular404Redirect}>
<InfoTooltip id="regularNotFoundInfo">
<InfoTooltip className="mr-2" placement="bottom">
Visitors accessing a url not matching a short URL pattern, as in <b>https://{domain.domain}/???/[...]</b>,
will be redirected to this URL.
</InfoTooltip>
Regular 404
</FormGroup>
<FormGroup value={invalidShortUrlRedirect} isLast onChange={setInvalidShortUrlRedirect}>
<InfoTooltip id="invalidShortUrlInfo">
<InfoTooltip className="mr-2" placement="bottom">
Visitors accessing a url matching a short URL pattern, but not matching an existing short code, will be
redirected to this URL.
</InfoTooltip>