mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2025-01-11 10:47:27 +03:00
Improved QR code component
This commit is contained in:
parent
e9cef8a029
commit
556495ea7e
4 changed files with 108 additions and 20 deletions
src/short-urls
test/short-urls/helpers
|
@ -1,19 +1,87 @@
|
|||
import { Modal, ModalBody, ModalHeader } from 'reactstrap';
|
||||
import { useMemo, useState } from 'react';
|
||||
import { DropdownItem, FormGroup, Modal, ModalBody, ModalHeader, Row } from 'reactstrap';
|
||||
import { ExternalLink } from 'react-external-link';
|
||||
import CopyToClipboard from 'react-copy-to-clipboard';
|
||||
import { faCopy as copyIcon } from '@fortawesome/free-regular-svg-icons';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { ShortUrlModalProps } from '../data';
|
||||
import { ReachableServer } from '../../servers/data';
|
||||
import { versionMatch } from '../../utils/helpers/version';
|
||||
import { DropdownBtn } from '../../utils/DropdownBtn';
|
||||
import './QrCodeModal.scss';
|
||||
|
||||
const QrCodeModal = ({ shortUrl: { shortUrl }, toggle, isOpen }: ShortUrlModalProps) => (
|
||||
<Modal isOpen={isOpen} toggle={toggle} centered>
|
||||
<ModalHeader toggle={toggle}>
|
||||
QR code for <ExternalLink href={shortUrl}>{shortUrl}</ExternalLink>
|
||||
</ModalHeader>
|
||||
<ModalBody>
|
||||
<div className="text-center">
|
||||
<img src={`${shortUrl}/qr-code`} className="qr-code-modal__img" alt="QR code" />
|
||||
</div>
|
||||
</ModalBody>
|
||||
</Modal>
|
||||
);
|
||||
interface QrCodeModalConnectProps extends ShortUrlModalProps {
|
||||
selectedServer: ReachableServer;
|
||||
}
|
||||
|
||||
type QrCodeFormat = 'svg' | 'png';
|
||||
|
||||
const buildQrCodeUrl = (shortUrl: string, size: number, format: QrCodeFormat, version: string): string => {
|
||||
const useSizeInPath = !versionMatch(version, { minVersion: '2.5.0' });
|
||||
const svgIsSupported = versionMatch(version, { minVersion: '2.4.0' });
|
||||
const sizeFragment = useSizeInPath ? `/${size}?` : `?size=${size}&`;
|
||||
const formatFragment = !svgIsSupported ? '' : `format=${format}`;
|
||||
|
||||
return `${shortUrl}/qr-code${sizeFragment}${formatFragment}`;
|
||||
};
|
||||
|
||||
const QrCodeModal = ({ shortUrl: { shortUrl }, toggle, isOpen, selectedServer }: QrCodeModalConnectProps) => {
|
||||
const [ size, setSize ] = useState(300);
|
||||
const [ format, setFormat ] = useState<QrCodeFormat>('png');
|
||||
const qrCodeUrl = useMemo(
|
||||
() => buildQrCodeUrl(shortUrl, size, format, selectedServer.version),
|
||||
[ shortUrl, size, format, selectedServer ],
|
||||
);
|
||||
const modalSize = useMemo(() => {
|
||||
if (size < 500) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
return size < 800 ? 'lg' : 'xl';
|
||||
}, [ size ]);
|
||||
|
||||
return (
|
||||
<Modal isOpen={isOpen} toggle={toggle} centered size={modalSize}>
|
||||
<ModalHeader toggle={toggle}>
|
||||
QR code for <ExternalLink href={shortUrl}>{shortUrl}</ExternalLink>
|
||||
</ModalHeader>
|
||||
<ModalBody>
|
||||
<Row className="mb-2">
|
||||
<div className="col-md-6">
|
||||
<FormGroup>
|
||||
<label className="mb-0">Size: {size}px</label>
|
||||
<input
|
||||
type="range"
|
||||
className="form-control-range"
|
||||
value={size}
|
||||
step={10}
|
||||
min={50}
|
||||
max={1000}
|
||||
onChange={(e) => setSize(Number(e.target.value))}
|
||||
/>
|
||||
</FormGroup>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<DropdownBtn text={`Format (${format})`}>
|
||||
<DropdownItem active={format === 'png'} onClick={() => setFormat('png')}>PNG</DropdownItem>
|
||||
<DropdownItem active={format === 'svg'} onClick={() => setFormat('svg')}>SVG</DropdownItem>
|
||||
</DropdownBtn>
|
||||
</div>
|
||||
</Row>
|
||||
<div className="text-center">
|
||||
<div className="mb-3">
|
||||
<div>QR code URL:</div>
|
||||
<ExternalLink className="indivisible" href={qrCodeUrl} />
|
||||
<CopyToClipboard text={qrCodeUrl}>
|
||||
<FontAwesomeIcon icon={copyIcon} className="ml-2" />
|
||||
</CopyToClipboard>
|
||||
</div>
|
||||
<img src={qrCodeUrl} className="qr-code-modal__img" alt="QR code" />
|
||||
<div className="mt-2">{size}x{size}</div>
|
||||
</div>
|
||||
</ModalBody>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default QrCodeModal;
|
||||
|
|
|
@ -14,7 +14,6 @@ import { useToggle } from '../../utils/helpers/hooks';
|
|||
import { ShortUrl, ShortUrlModalProps } from '../data';
|
||||
import { Versions } from '../../utils/helpers/version';
|
||||
import { SelectedServer } from '../../servers/data';
|
||||
import QrCodeModal from './QrCodeModal';
|
||||
import VisitStatsLink from './VisitStatsLink';
|
||||
import './ShortUrlsRowMenu.scss';
|
||||
|
||||
|
@ -29,6 +28,7 @@ const ShortUrlsRowMenu = (
|
|||
EditTagsModal: ShortUrlModal,
|
||||
EditMetaModal: ShortUrlModal,
|
||||
EditShortUrlModal: ShortUrlModal,
|
||||
QrCodeModal: ShortUrlModal,
|
||||
ForServerVersion: FC<Versions>,
|
||||
) => ({ shortUrl, selectedServer }: ShortUrlsRowMenuProps) => {
|
||||
const [ isOpen, toggle ] = useToggle();
|
||||
|
|
|
@ -19,6 +19,7 @@ import { resetShortUrlParams } from '../reducers/shortUrlsListParams';
|
|||
import { editShortUrl } from '../reducers/shortUrlEdition';
|
||||
import { ConnectDecorator } from '../../container/types';
|
||||
import { ShortUrlsTable } from '../ShortUrlsTable';
|
||||
import QrCodeModal from '../helpers/QrCodeModal';
|
||||
|
||||
const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
|
||||
// Components
|
||||
|
@ -40,6 +41,7 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
|
|||
'EditTagsModal',
|
||||
'EditMetaModal',
|
||||
'EditShortUrlModal',
|
||||
'QrCodeModal',
|
||||
'ForServerVersion',
|
||||
);
|
||||
bottle.serviceFactory('CreateShortUrlResult', CreateShortUrlResult, 'useStateFlagTimeout');
|
||||
|
@ -69,6 +71,9 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
|
|||
bottle.serviceFactory('EditShortUrlModal', () => EditShortUrlModal);
|
||||
bottle.decorator('EditShortUrlModal', connect([ 'shortUrlEdition' ], [ 'editShortUrl' ]));
|
||||
|
||||
bottle.serviceFactory('QrCodeModal', () => QrCodeModal);
|
||||
bottle.decorator('QrCodeModal', connect([ 'selectedServer' ]));
|
||||
|
||||
// Services
|
||||
bottle.serviceFactory('SearchBar', SearchBar, 'ColorGenerator');
|
||||
bottle.decorator('SearchBar', connect([ 'shortUrlsListParams' ], [ 'listShortUrls' ]));
|
||||
|
|
|
@ -1,26 +1,41 @@
|
|||
import { shallow, ShallowWrapper } from 'enzyme';
|
||||
import { ExternalLink } from 'react-external-link';
|
||||
import { ModalHeader } from 'reactstrap';
|
||||
import { Mock } from 'ts-mockery';
|
||||
import QrCodeModal from '../../../src/short-urls/helpers/QrCodeModal';
|
||||
import { ShortUrl } from '../../../src/short-urls/data';
|
||||
import { ReachableServer } from '../../../src/servers/data';
|
||||
|
||||
describe('<QrCodeModal />', () => {
|
||||
let wrapper: ShallowWrapper;
|
||||
const shortUrl = 'https://doma.in/abc123';
|
||||
const createWrapper = (version = '2.5.0') => {
|
||||
const selectedServer = Mock.of<ReachableServer>({ version });
|
||||
|
||||
beforeEach(() => {
|
||||
wrapper = shallow(<QrCodeModal shortUrl={Mock.of<ShortUrl>({ shortUrl })} isOpen={true} toggle={() => {}} />);
|
||||
});
|
||||
afterEach(() => wrapper.unmount());
|
||||
wrapper = shallow(
|
||||
<QrCodeModal
|
||||
shortUrl={Mock.of<ShortUrl>({ shortUrl })}
|
||||
isOpen={true}
|
||||
toggle={() => {}}
|
||||
selectedServer={selectedServer}
|
||||
/>,
|
||||
);
|
||||
|
||||
it('shows an external link to the URL', () => {
|
||||
const externalLink = wrapper.find(ExternalLink);
|
||||
return wrapper;
|
||||
};
|
||||
|
||||
afterEach(() => wrapper?.unmount());
|
||||
|
||||
it('shows an external link to the URL in the header', () => {
|
||||
const wrapper = createWrapper();
|
||||
const externalLink = wrapper.find(ModalHeader).find(ExternalLink);
|
||||
|
||||
expect(externalLink).toHaveLength(1);
|
||||
expect(externalLink.prop('href')).toEqual(shortUrl);
|
||||
});
|
||||
|
||||
it('displays an image with the QR code of the URL', () => {
|
||||
const wrapper = createWrapper();
|
||||
const img = wrapper.find('img');
|
||||
|
||||
expect(img).toHaveLength(1);
|
||||
|
|
Loading…
Reference in a new issue