diff options
Diffstat (limited to 'desktop')
23 files changed, 64 insertions, 101 deletions
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/daita-settings/DaitaSettingsView.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/daita-settings/DaitaSettingsView.tsx index 5a0899a728..9df8e1e143 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/views/daita-settings/DaitaSettingsView.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/daita-settings/DaitaSettingsView.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useRef } from 'react'; +import React, { useCallback } from 'react'; import { sprintf } from 'sprintf-js'; import styled from 'styled-components'; @@ -153,10 +153,8 @@ function DaitaToggle() { const daita = useSelector((state) => state.settings.wireguard.daita?.enabled ?? false); const directOnly = useSelector((state) => state.settings.wireguard.daita?.directOnly ?? false); - const enableId = 'daita-enable-setting'; - const ref = useRef<HTMLDivElement>(null); - const scrollToEnable = useScrollToListItem(ref, enableId); - const scrollToDirectOnly = useScrollToListItem(); + const { ref, animation: enableAnimation } = useScrollToListItem('daita-enable-setting'); + const { animation: directOnlyAnimation } = useScrollToListItem(); const [confirmationDialogVisible, showConfirmationDialog, hideConfirmationDialog] = useBoolean(); @@ -195,7 +193,7 @@ function DaitaToggle() { disabled={unavailable} checked={daita && !unavailable} onCheckedChange={setDaita} - animation={scrollToEnable?.animation}> + animation={enableAnimation}> <ToggleListItem.Label>{messages.gettext('Enable')}</ToggleListItem.Label> <ToggleListItem.Switch /> </ToggleListItem> @@ -203,7 +201,7 @@ function DaitaToggle() { disabled={!daita || unavailable} checked={directOnly && !unavailable} onCheckedChange={setDirectOnly} - animation={scrollToDirectOnly?.animation}> + animation={directOnlyAnimation}> <ToggleListItem.Label>{directOnlyString}</ToggleListItem.Label> <ToggleListItem.Group> <InfoButton> diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/multihop-settings/MultihopSettingsView.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/multihop-settings/MultihopSettingsView.tsx index 3a1ea69375..b61a7e0681 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/views/multihop-settings/MultihopSettingsView.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/multihop-settings/MultihopSettingsView.tsx @@ -1,4 +1,4 @@ -import { useCallback, useRef } from 'react'; +import { useCallback } from 'react'; import { sprintf } from 'sprintf-js'; import styled from 'styled-components'; @@ -70,9 +70,7 @@ function MultihopSetting() { const relaySettings = useSelector((state) => state.settings.relaySettings); const relaySettingsUpdater = useRelaySettingsUpdater(); - const id = 'multihop-setting'; - const ref = useRef<HTMLDivElement>(null); - const scrollTo = useScrollToListItem(ref, id); + const { ref, animation } = useScrollToListItem('multihop-setting'); const multihop = 'normal' in relaySettings ? relaySettings.normal.wireguard.useMultihop : false; const unavailable = @@ -97,7 +95,7 @@ function MultihopSetting() { <> <ToggleListItem ref={ref} - animation={scrollTo?.animation} + animation={animation} disabled={unavailable} checked={multihop && !unavailable} onCheckedChange={setMultihop}> diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/open-vpn-settings/components/bridge-mode-setting/BridgeModeSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/open-vpn-settings/components/bridge-mode-setting/BridgeModeSetting.tsx index eaa246d2cb..f49a70e8d2 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/views/open-vpn-settings/components/bridge-mode-setting/BridgeModeSetting.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/open-vpn-settings/components/bridge-mode-setting/BridgeModeSetting.tsx @@ -24,9 +24,7 @@ export function BridgeModeSetting() { const bridgeState = useSelector((state) => state.settings.bridgeState); - const id = 'bridge-mode-setting'; - const ref = React.useRef<HTMLDivElement>(null); - const scrollToAnchor = useScrollToListItem(ref, id); + const { ref, animation } = useScrollToListItem('bridge-mode-setting'); const tunnelProtocol = useMemo(() => { const protocol = 'normal' in relaySettings ? relaySettings.normal.tunnelProtocol : 'any'; @@ -60,10 +58,7 @@ export function BridgeModeSetting() { const footerText = bridgeModeFooterText(bridgeState === 'on', tunnelProtocol, transportProtocol); return ( - <Listbox - value={bridgeState} - onValueChange={onSelectBridgeState} - animation={scrollToAnchor?.animation}> + <Listbox value={bridgeState} onValueChange={onSelectBridgeState} animation={animation}> <Listbox.Item ref={ref}> <Listbox.Content> <Listbox.Label> diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/open-vpn-settings/components/mss-fix-setting/MssFixSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/open-vpn-settings/components/mss-fix-setting/MssFixSetting.tsx index 0107faca44..5119933d67 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/views/open-vpn-settings/components/mss-fix-setting/MssFixSetting.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/open-vpn-settings/components/mss-fix-setting/MssFixSetting.tsx @@ -18,9 +18,7 @@ export function MssFixSetting() { const { setOpenVpnMssfix: setOpenVpnMssfixImpl } = useAppContext(); const mssfix = useSelector((state) => state.settings.openVpn.mssfix); - const id = 'mss-fix-setting'; - const ref = React.useRef<HTMLDivElement>(null); - const scrollToAnchor = useScrollToListItem(ref, id); + const { ref, animation } = useScrollToListItem('mss-fix-setting'); const inputRef = React.useRef<HTMLInputElement>(null); const labelId = React.useId(); @@ -76,7 +74,7 @@ export function MssFixSetting() { ); return ( - <ListItem animation={scrollToAnchor?.animation}> + <ListItem animation={animation}> <ListItem.Item ref={ref}> <ListItem.Content> <ListItem.Label id={labelId}> diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/open-vpn-settings/components/transport-protocol-setting/TransportProtocolSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/open-vpn-settings/components/transport-protocol-setting/TransportProtocolSetting.tsx index 6fc8fffbb5..68751368cc 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/views/open-vpn-settings/components/transport-protocol-setting/TransportProtocolSetting.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/open-vpn-settings/components/transport-protocol-setting/TransportProtocolSetting.tsx @@ -13,7 +13,7 @@ export function TransportProtocolSetting() { const relaySettingsUpdater = useRelaySettingsUpdater(); const relaySettings = useSelector((state) => state.settings.relaySettings); const bridgeState = useSelector((state) => state.settings.bridgeState); - const scrollToListItem = useScrollToListItem(); + const { animation } = useScrollToListItem(); const descriptionId = React.useId(); @@ -34,7 +34,7 @@ export function TransportProtocolSetting() { ); return ( - <Listbox animation={scrollToListItem?.animation} value={protocol} onValueChange={onSelect}> + <Listbox animation={animation} value={protocol} onValueChange={onSelect}> <Listbox.Item> <Listbox.Content> <Listbox.Label> diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/allow-lan-setting/AllowLanSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/allow-lan-setting/AllowLanSetting.tsx index b814d5631f..d86e8d5352 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/allow-lan-setting/AllowLanSetting.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/allow-lan-setting/AllowLanSetting.tsx @@ -1,4 +1,3 @@ -import { useRef } from 'react'; import styled from 'styled-components'; import { messages } from '../../../../../../shared/gettext'; @@ -18,14 +17,12 @@ const LanIpRanges = styled.ul({ export function AllowLanSetting() { const allowLan = useSelector((state) => state.settings.allowLan); const { setAllowLan } = useAppContext(); - const id = 'allow-lan-setting'; - const ref = useRef<HTMLDivElement>(null); - const scrollToAnchor = useScrollToListItem(ref, id); + const { ref, animation } = useScrollToListItem('allow-lan-setting'); return ( <ToggleListItem ref={ref} - animation={scrollToAnchor?.animation} + animation={animation} checked={allowLan} onCheckedChange={setAllowLan}> <ToggleListItem.Label> diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/auto-connect-setting/AutoConnectSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/auto-connect-setting/AutoConnectSetting.tsx index 4883f41dc8..7c58b09bf2 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/auto-connect-setting/AutoConnectSetting.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/auto-connect-setting/AutoConnectSetting.tsx @@ -7,7 +7,7 @@ import { ToggleListItem } from '../../../../toggle-list-item'; export function AutoConnectSetting() { const autoConnect = useSelector((state) => state.settings.guiSettings.autoConnect); const { setAutoConnect } = useAppContext(); - const scrollToAnchor = useScrollToListItem(); + const { animation } = useScrollToListItem(); const footer = messages.pgettext( 'vpn-settings-view', @@ -16,7 +16,7 @@ export function AutoConnectSetting() { return ( <ToggleListItem - animation={scrollToAnchor?.animation} + animation={animation} checked={autoConnect} onCheckedChange={setAutoConnect} footer={footer}> diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/auto-start-setting/AutoStartSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/auto-start-setting/AutoStartSetting.tsx index e18a249a77..388781ba7f 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/auto-start-setting/AutoStartSetting.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/auto-start-setting/AutoStartSetting.tsx @@ -10,7 +10,7 @@ import { ToggleListItem } from '../../../../toggle-list-item'; export function AutoStartSetting() { const autoStart = useSelector((state) => state.settings.autoStart); const { setAutoStart: setAutoStartImpl } = useAppContext(); - const scrollToAnchor = useScrollToListItem(); + const { animation } = useScrollToListItem(); const setAutoStart = useCallback( async (autoStart: boolean) => { @@ -25,10 +25,7 @@ export function AutoStartSetting() { ); return ( - <ToggleListItem - animation={scrollToAnchor?.animation} - checked={autoStart} - onCheckedChange={setAutoStart}> + <ToggleListItem animation={animation} checked={autoStart} onCheckedChange={setAutoStart}> <ToggleListItem.Label> {messages.pgettext('vpn-settings-view', 'Launch app on start-up')} </ToggleListItem.Label> diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/custom-dns-settings/CustomDnsSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/custom-dns-settings/CustomDnsSettings.tsx index 84d5975199..4bbd7a6ebc 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/custom-dns-settings/CustomDnsSettings.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/custom-dns-settings/CustomDnsSettings.tsx @@ -36,9 +36,7 @@ export function CustomDnsSettings() { const [savingEdit, setSavingEdit] = useState(false); const willShowConfirmationDialog = useRef(false); - const id = 'custom-dns-settings'; - const ref = useRef<HTMLDivElement>(null); - const scrollToAnchor = useScrollToListItem(ref, id); + const { ref, animation } = useScrollToListItem('custom-dns-settings'); const featureAvailable = useMemo( () => @@ -195,7 +193,7 @@ export function CustomDnsSettings() { ref={ref} checked={dns.state === 'custom' || inputVisible} onCheckedChange={setCustomDnsEnabled} - animation={scrollToAnchor?.animation} + animation={animation} disabled={!featureAvailable}> <ToggleListItem.Label> {messages.pgettext('vpn-settings-view', 'Use custom DNS server')} diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/dns-blocker-settings/DnsBlockerSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/dns-blocker-settings/DnsBlockerSetting.tsx index e525e4f5a6..253c425647 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/dns-blocker-settings/DnsBlockerSetting.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/dns-blocker-settings/DnsBlockerSetting.tsx @@ -1,4 +1,3 @@ -import { useRef } from 'react'; import { sprintf } from 'sprintf-js'; import { messages } from '../../../../../../shared/gettext'; @@ -24,9 +23,7 @@ export function DnsBlockerSettings() { const dns = useSelector((state) => state.settings.dns); const customDnsFeatureName = messages.pgettext('vpn-settings-view', 'Use custom DNS server'); const [expanded, , , toggleExpanded] = useBoolean(); - const id = 'dns-blocker-setting'; - const ref = useRef<HTMLDivElement>(null); - const scrollToAnchor = useScrollToListItem(ref, id); + const { ref, animation } = useScrollToListItem('dns-blocker-setting'); return ( <> @@ -35,7 +32,7 @@ export function DnsBlockerSettings() { expanded={expanded} onExpandedChange={toggleExpanded} disabled={dns.state === 'custom'} - animation={scrollToAnchor?.animation}> + animation={animation}> <Accordion.Header> <Accordion.Title> {messages.pgettext('vpn-settings-view', 'DNS content blockers')} diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/enable-ipv6-setting/EnableIpv6Setting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/enable-ipv6-setting/EnableIpv6Setting.tsx index 15626f7a88..34c4362926 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/enable-ipv6-setting/EnableIpv6Setting.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/enable-ipv6-setting/EnableIpv6Setting.tsx @@ -12,7 +12,7 @@ import { ToggleListItem } from '../../../../toggle-list-item'; export function EnableIpv6Setting() { const enableIpv6 = useSelector((state) => state.settings.enableIpv6); const { setEnableIpv6: setEnableIpv6Impl } = useAppContext(); - const scrollToAnchor = useScrollToListItem(); + const { animation } = useScrollToListItem(); const setEnableIpv6 = useCallback( async (enableIpv6: boolean) => { @@ -27,10 +27,7 @@ export function EnableIpv6Setting() { ); return ( - <ToggleListItem - animation={scrollToAnchor?.animation} - checked={enableIpv6} - onCheckedChange={setEnableIpv6}> + <ToggleListItem animation={animation} checked={enableIpv6} onCheckedChange={setEnableIpv6}> <ToggleListItem.Label> {messages.pgettext('vpn-settings-view', 'Enable IPv6')} </ToggleListItem.Label> diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/kill-switch-setting/KillSwitchSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/kill-switch-setting/KillSwitchSetting.tsx index bd650c84bd..f8596643ca 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/kill-switch-setting/KillSwitchSetting.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/kill-switch-setting/KillSwitchSetting.tsx @@ -6,10 +6,10 @@ import InfoButton from '../../../../InfoButton'; import { ModalMessage } from '../../../../Modal'; export function KillSwitchSetting() { - const scrollToAnchor = useScrollToListItem(); + const { animation } = useScrollToListItem(); return ( - <ListItem animation={scrollToAnchor?.animation}> + <ListItem animation={animation}> <ListItem.Item> <ListItem.Content> <ListItem.Label>{messages.pgettext('vpn-settings-view', 'Kill switch')}</ListItem.Label> diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/lockdown-mode-setting/LockdownModeSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/lockdown-mode-setting/LockdownModeSetting.tsx index 6fbef43645..5115dc9964 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/lockdown-mode-setting/LockdownModeSetting.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/lockdown-mode-setting/LockdownModeSetting.tsx @@ -1,4 +1,4 @@ -import { useCallback, useRef } from 'react'; +import { useCallback } from 'react'; import { messages } from '../../../../../../shared/gettext'; import log from '../../../../../../shared/logging'; @@ -14,9 +14,7 @@ import { ToggleListItem } from '../../../../toggle-list-item'; export function LockdownModeSetting() { const blockWhenDisconnected = useSelector((state) => state.settings.blockWhenDisconnected); const { setBlockWhenDisconnected: setBlockWhenDisconnectedImpl } = useAppContext(); - const id = 'lockdown-mode-setting'; - const ref = useRef<HTMLDivElement>(null); - const scrollToAnchor = useScrollToListItem(ref, id); + const { ref, animation } = useScrollToListItem('lockdown-mode-setting'); const [confirmationDialogVisible, showConfirmationDialog, hideConfirmationDialog] = useBoolean(false); @@ -52,7 +50,7 @@ export function LockdownModeSetting() { return ( <ToggleListItem ref={ref} - animation={scrollToAnchor?.animation} + animation={animation} checked={blockWhenDisconnected} onCheckedChange={setLockDownMode}> <ToggleListItem.Label> diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/open-vpn-settings/OpenVpnSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/open-vpn-settings/OpenVpnSettings.tsx index 149bca6d98..d7acc15fcf 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/open-vpn-settings/OpenVpnSettings.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/open-vpn-settings/OpenVpnSettings.tsx @@ -9,13 +9,13 @@ import { NavigationListItem } from '../../../../NavigationListItem'; export function OpenVpnSettings() { const tunnelProtocol = useTunnelProtocol(); - const scrollToAnchor = useScrollToListItem(); + const { animation } = useScrollToListItem(); return ( <NavigationListItem to={RoutePath.openVpnSettings} disabled={tunnelProtocol === 'wireguard'} - animation={scrollToAnchor?.animation}> + animation={animation}> <NavigationListItem.Label> {sprintf( // TRANSLATORS: %(openvpn)s will be replaced with the string "OpenVPN" diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/tunnel-protocol-setting/TunnelProtocol.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/tunnel-protocol-setting/TunnelProtocol.tsx index fa52864e29..b26bfc6f58 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/tunnel-protocol-setting/TunnelProtocol.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/tunnel-protocol-setting/TunnelProtocol.tsx @@ -24,7 +24,7 @@ export function TunnelProtocolSetting() { const quantumResistant = useSelector((state) => state.settings.wireguard.quantumResistant); const openVpnDisabled = daita || multihop || quantumResistant; - const scrollToAnchor = useScrollToListItem(); + const { animation } = useScrollToListItem(); const featuresToDisableForOpenVpn = []; if (daita) { @@ -66,7 +66,7 @@ export function TunnelProtocolSetting() { <Listbox onValueChange={setTunnelProtocol} value={tunnelProtocol} - animation={scrollToAnchor?.animation} + animation={animation} aria-description={openVpnDisabled ? openVpnDisabledFooter : undefined}> <Listbox.Item> <Listbox.Content> diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/wireguard-settings/WireguardSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/wireguard-settings/WireguardSettings.tsx index 37013cf132..82efa3410e 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/wireguard-settings/WireguardSettings.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/wireguard-settings/WireguardSettings.tsx @@ -22,7 +22,7 @@ function mapRelaySettingsToProtocol(relaySettings: RelaySettingsRedux) { } export function WireguardSettings() { - const scrollToAnchor = useScrollToListItem(); + const { animation } = useScrollToListItem(); const tunnelProtocol = useSelector((state) => mapRelaySettingsToProtocol(state.settings.relaySettings), ); @@ -31,7 +31,7 @@ export function WireguardSettings() { <NavigationListItem to={RoutePath.wireguardSettings} disabled={tunnelProtocol === 'openvpn'} - animation={scrollToAnchor?.animation}> + animation={animation}> <NavigationListItem.Label> {sprintf( // TRANSLATORS: %(wireguard)s will be replaced with the string "WireGuard" diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/ip-version-setting/IpVersionSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/ip-version-setting/IpVersionSetting.tsx index 4ff48fdc88..c6d59011d6 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/ip-version-setting/IpVersionSetting.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/ip-version-setting/IpVersionSetting.tsx @@ -19,7 +19,7 @@ export function IpVersionSetting() { return ipVersion === 'any' ? null : ipVersion; }, [relaySettings]); - const scrollToAnchor = useScrollToListItem(); + const { animation } = useScrollToListItem(); const setIpVersion = useCallback( async (ipVersion: IpVersion | null) => { @@ -37,7 +37,7 @@ export function IpVersionSetting() { ); return ( - <Listbox value={ipVersion} onValueChange={setIpVersion} animation={scrollToAnchor?.animation}> + <Listbox value={ipVersion} onValueChange={setIpVersion} animation={animation}> <Listbox.Item> <Listbox.Content> <Listbox.Label> diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/mtu-setting/MtuSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/mtu-setting/MtuSetting.tsx index 4b4acbb929..a432351834 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/mtu-setting/MtuSetting.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/mtu-setting/MtuSetting.tsx @@ -26,9 +26,7 @@ export function MtuSetting() { const { setWireguardMtu: setWireguardMtuImpl } = useAppContext(); const mtu = useSelector((state) => state.settings.wireguard.mtu); - const id = 'mtu-setting'; - const ref = React.useRef<HTMLDivElement>(null); - const scrollToAnchor = useScrollToListItem(ref, id); + const { ref, animation } = useScrollToListItem('mtu-setting'); const inputRef = React.useRef<HTMLInputElement>(null); const labelId = React.useId(); @@ -84,7 +82,7 @@ export function MtuSetting() { ); return ( - <ListItem animation={scrollToAnchor?.animation}> + <ListItem animation={animation}> <ListItem.Item ref={ref}> <ListItem.Content> <ListItem.Label id={labelId}> diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/obfuscation-settings/ObfuscationSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/obfuscation-settings/ObfuscationSettings.tsx index 7a9f70590c..630a94fa93 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/obfuscation-settings/ObfuscationSettings.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/obfuscation-settings/ObfuscationSettings.tsx @@ -1,5 +1,4 @@ import { useCallback } from 'react'; -import React from 'react'; import { sprintf } from 'sprintf-js'; import { Constraint, ObfuscationType } from '../../../../../../shared/daemon-rpc-types'; @@ -24,9 +23,7 @@ export function ObfuscationSettings() { const { setObfuscationSettings } = useAppContext(); const obfuscationSettings = useSelector((state) => state.settings.obfuscationSettings); - const id = 'obfuscation-setting'; - const ref = React.useRef<HTMLDivElement>(null); - const scrollToAnchor = useScrollToListItem(ref, id); + const { ref, animation } = useScrollToListItem('obfuscation-setting'); // TRANSLATORS: Text showing currently selected port. // TRANSLATORS: Available placeholders: @@ -46,10 +43,7 @@ export function ObfuscationSettings() { ); return ( - <Listbox - onValueChange={selectObfuscationType} - value={obfuscationType} - animation={scrollToAnchor?.animation}> + <Listbox onValueChange={selectObfuscationType} value={obfuscationType} animation={animation}> <Listbox.Item ref={ref}> <Listbox.Content> <Listbox.Label> diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/port-setting/PortSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/port-setting/PortSetting.tsx index 79f3294c73..33819dec18 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/port-setting/PortSetting.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/port-setting/PortSetting.tsx @@ -1,5 +1,4 @@ import { useCallback, useMemo } from 'react'; -import React from 'react'; import { sprintf } from 'sprintf-js'; import { wrapConstraint } from '../../../../../../shared/daemon-rpc-types'; @@ -27,9 +26,7 @@ export function PortSetting() { const relaySettingsUpdater = useRelaySettingsUpdater(); const allowedPortRanges = useSelector((state) => state.settings.wireguardEndpointData.portRanges); - const id = 'port-setting'; - const ref = React.useRef<HTMLDivElement>(null); - const scrollToAnchor = useScrollToListItem(ref, id); + const { ref, animation } = useScrollToListItem('port-setting'); const wireguardPortItems = useMemo<Array<SelectorItem<number>>>( () => WIREUGARD_UDP_PORTS.map(mapPortToSelectorItem), @@ -90,10 +87,7 @@ export function PortSetting() { .join(', '); return ( - <Listbox - value={selectedOption.value} - onValueChange={setWireguardPort} - animation={scrollToAnchor?.animation}> + <Listbox value={selectedOption.value} onValueChange={setWireguardPort} animation={animation}> <Listbox.Item ref={ref}> <Listbox.Content> <Listbox.Label> diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/quantum-resistant-setting/QuantumResistantSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/quantum-resistant-setting/QuantumResistantSetting.tsx index 8b5450b66e..9507376879 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/quantum-resistant-setting/QuantumResistantSetting.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/quantum-resistant-setting/QuantumResistantSetting.tsx @@ -1,5 +1,4 @@ import { useCallback } from 'react'; -import React from 'react'; import { messages } from '../../../../../../shared/gettext'; import { useAppContext } from '../../../../../context'; @@ -14,9 +13,7 @@ export function QuantumResistantSetting() { const { setWireguardQuantumResistant } = useAppContext(); const quantumResistant = useSelector((state) => state.settings.wireguard.quantumResistant); - const id = 'quantum-resistant-setting'; - const ref = React.useRef<HTMLDivElement>(null); - const scrollToListItem = useScrollToListItem(ref, id); + const { ref, animation } = useScrollToListItem('quantum-resistant-setting'); const selectQuantumResistant = useCallback( async (quantumResistant: boolean | null) => { @@ -27,7 +24,7 @@ export function QuantumResistantSetting() { return ( <Listbox - animation={scrollToListItem?.animation} + animation={animation} value={quantumResistant ?? null} onValueChange={selectQuantumResistant}> <Listbox.Item ref={ref}> diff --git a/desktop/packages/mullvad-vpn/src/renderer/hooks/useScrollToAnchor.ts b/desktop/packages/mullvad-vpn/src/renderer/hooks/useScrollToAnchor.ts index 649fb4cce1..9c376a66f8 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/hooks/useScrollToAnchor.ts +++ b/desktop/packages/mullvad-vpn/src/renderer/hooks/useScrollToAnchor.ts @@ -1,7 +1,7 @@ import { useEffect } from 'react'; -export const useScrollToReference = ( - ref?: React.RefObject<HTMLDivElement | null>, +export const useScrollToReference = <T extends Element = HTMLDivElement>( + ref?: React.RefObject<T | null>, scroll?: boolean, ) => { useEffect(() => { diff --git a/desktop/packages/mullvad-vpn/src/renderer/hooks/useScrollToListItem.ts b/desktop/packages/mullvad-vpn/src/renderer/hooks/useScrollToListItem.ts index b4acae7e58..f2fc7c8486 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/hooks/useScrollToListItem.ts +++ b/desktop/packages/mullvad-vpn/src/renderer/hooks/useScrollToListItem.ts @@ -1,16 +1,17 @@ +import React from 'react'; + import { ScrollToAnchorId } from '../../shared/ipc-types'; import { ListItemAnimation } from '../lib/components/list-item'; import { useHistory } from '../lib/history'; import { useScrollToReference } from '.'; -export const useScrollToListItem = ( - ref?: React.RefObject<HTMLDivElement | null>, +export const useScrollToListItem = <T extends Element = HTMLDivElement>( id?: ScrollToAnchorId, -): - | { - animation: ListItemAnimation; - } - | undefined => { +): { + ref?: React.RefObject<T | null>; + animation?: ListItemAnimation; +} => { + const ref = React.useRef<T>(null); const { location, action } = useHistory(); const { state } = location; @@ -19,8 +20,14 @@ export const useScrollToListItem = ( const scroll = id === anchorId && !isPop; useScrollToReference(ref, scroll); - if (anchorId === undefined || isPop) return undefined; + if (anchorId === undefined || isPop) { + return { + ref: undefined, + animation: undefined, + }; + } return { + ref, animation: scroll ? 'flash' : 'dim', }; }; |