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

Migrate tooltips from reactstrap to shlink-frontend-kit

Browse Source
This commit is contained in:
Alejandro Celaya
2025-06-08 12:54:54 +02:00
parent 531a61a57b
commit d3feee301e
3 changed files with 14 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/servers/helpers/ImportServersBtn.tsx
View File

@@ -1,10 +1,9 @@
import { faFileUpload as importIcon } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { useElementRef, useToggle } from '@shlinkio/shlink-frontend-kit';
import { Button } from '@shlinkio/shlink-frontend-kit/tailwind';
import { useToggle } from '@shlinkio/shlink-frontend-kit';
import { Button, Tooltip, useTooltip } from '@shlinkio/shlink-frontend-kit/tailwind';
import type { ChangeEvent, PropsWithChildren } from 'react';
import { useCallback, useRef , useState } from 'react';
import { UncontrolledTooltip } from 'reactstrap';
import { useCallback, useRef, useState } from 'react';
import type { FCWithDeps } from '../../container/utils';
import { componentFactory, useDependencies } from '../../container/utils';
import type { ServerData, ServersMap, ServerWithId } from '../data';
@@ -38,9 +37,10 @@ const ImportServersBtn: FCWithDeps<ImportServersBtnConnectProps, ImportServersBt
className = '',
}) => {
const { ServersImporter: serversImporter } = useDependencies(ImportServersBtn);
const ref = useElementRef<HTMLInputElement>();
const fileInputRef = useRef<HTMLInputElement>(null);
const { anchor, tooltip } = useTooltip({ placement: tooltipPlacement });
const [duplicatedServers, setDuplicatedServers] = useState<ServerData[]>([]);
const [isModalOpen,, showModal, hideModal] = useToggle();
const { flag: isModalOpen, setToTrue: showModal, setToFalse: hideModal } = useToggle(false, true);
const newServersCreatedRef = useRef(false);
const onFile = useCallback(
@@ -84,12 +84,12 @@ const ImportServersBtn: FCWithDeps<ImportServersBtnConnectProps, ImportServersBt
return (
<>
<Button variant="secondary" id="importBtn" className={className} onClick={() => ref.current?.click()}>
<Button variant="secondary" className={className} onClick={() => fileInputRef.current?.click()} {...anchor}>
<FontAwesomeIcon icon={importIcon} fixedWidth /> {children ?? 'Import from file'}
</Button>
<UncontrolledTooltip placement={tooltipPlacement} target="importBtn">
<Tooltip {...tooltip}>
You can create servers by importing a CSV file with <b>name</b>, <b>apiKey</b> and <b>url</b> columns.
</UncontrolledTooltip>
</Tooltip>
<input
type="file"
@@ -97,7 +97,7 @@ const ImportServersBtn: FCWithDeps<ImportServersBtnConnectProps, ImportServersBt
className="tw:hidden"
aria-hidden
tabIndex={-1}
ref={ref as any /* TODO Remove After updating to React 19 */}
ref={fileInputRef}
onChange={onFile}
data-testid="csv-file-input"
/>