diff options
4 files changed, 83 insertions, 76 deletions
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/shadowsocks-settings/ShadowsocksSettingsView.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/shadowsocks-settings/ShadowsocksSettingsView.tsx index 6d3c5be792..20b1070e23 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/views/shadowsocks-settings/ShadowsocksSettingsView.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/shadowsocks-settings/ShadowsocksSettingsView.tsx @@ -1,25 +1,15 @@ -import { useCallback } from 'react'; -import { sprintf } from 'sprintf-js'; import styled from 'styled-components'; -import { wrapConstraint } from '../../../../shared/daemon-rpc-types'; import { messages } from '../../../../shared/gettext'; -import { removeNonNumericCharacters } from '../../../../shared/string-helpers'; -import { useAppContext } from '../../../context'; import { useHistory } from '../../../lib/history'; -import { useSelector } from '../../../redux/store'; import { AppNavigationHeader } from '../..'; -import { AriaDescription, AriaInputGroup } from '../../AriaGroup'; import * as Cell from '../../cell'; -import { SelectorItem, SelectorWithCustomItem } from '../../cell/Selector'; import { BackAction } from '../../KeyboardNavigation'; import { Layout, SettingsContainer } from '../../Layout'; import { NavigationContainer } from '../../NavigationContainer'; import { NavigationScrollbars } from '../../NavigationScrollbars'; import SettingsHeader, { HeaderTitle } from '../../SettingsHeader'; - -const PORTS: Array<SelectorItem<number>> = []; -const ALLOWED_RANGE = [1, 65535]; +import { ShadowsocksPortSelector } from './components'; const StyledContent = styled.div({ display: 'flex', @@ -28,10 +18,6 @@ const StyledContent = styled.div({ marginBottom: '2px', }); -const StyledSelectorContainer = styled.div({ - flex: 0, -}); - export function ShadowsocksSettingsView() { const { pop } = useHistory(); @@ -66,64 +52,3 @@ export function ShadowsocksSettingsView() { </BackAction> ); } - -function ShadowsocksPortSelector() { - const { setObfuscationSettings } = useAppContext(); - const obfuscationSettings = useSelector((state) => state.settings.obfuscationSettings); - - const port = - obfuscationSettings.shadowsocksSettings.port === 'any' - ? null - : obfuscationSettings.shadowsocksSettings.port.only; - - const setShadowsocksPort = useCallback( - async (port: number | null) => { - await setObfuscationSettings({ - ...obfuscationSettings, - shadowsocksSettings: { - ...obfuscationSettings.shadowsocksSettings, - port: wrapConstraint(port), - }, - }); - }, - [setObfuscationSettings, obfuscationSettings], - ); - - const parseValue = useCallback((port: string) => parseInt(port), []); - - const validateValue = useCallback( - (value: number) => value >= ALLOWED_RANGE[0] && value <= ALLOWED_RANGE[1], - [], - ); - - return ( - <AriaInputGroup> - <StyledSelectorContainer> - <SelectorWithCustomItem - // TRANSLATORS: The title for the WireGuard port selector. - title={messages.pgettext('wireguard-settings-view', 'Port')} - items={PORTS} - value={port} - onSelect={setShadowsocksPort} - inputPlaceholder={messages.pgettext('wireguard-settings-view', 'Port')} - automaticValue={null} - parseValue={parseValue} - modifyValue={removeNonNumericCharacters} - validateValue={validateValue} - maxLength={`${ALLOWED_RANGE[1]}`.length} - /> - </StyledSelectorContainer> - <Cell.CellFooter> - <AriaDescription> - <Cell.CellFooterText> - {sprintf( - // TRANSLATORS: Text describing the valid port range for a port selector. - messages.pgettext('wireguard-settings-view', 'Valid range: %(min)s - %(max)s'), - { min: ALLOWED_RANGE[0], max: ALLOWED_RANGE[1] }, - )} - </Cell.CellFooterText> - </AriaDescription> - </Cell.CellFooter> - </AriaInputGroup> - ); -} diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/shadowsocks-settings/components/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/shadowsocks-settings/components/index.ts new file mode 100644 index 0000000000..ac69d11d9e --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/shadowsocks-settings/components/index.ts @@ -0,0 +1 @@ +export * from './shadowsocks-port-setting'; diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/shadowsocks-settings/components/shadowsocks-port-setting/ShadowSocksPortSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/shadowsocks-settings/components/shadowsocks-port-setting/ShadowSocksPortSetting.tsx new file mode 100644 index 0000000000..c8f62d2595 --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/shadowsocks-settings/components/shadowsocks-port-setting/ShadowSocksPortSetting.tsx @@ -0,0 +1,80 @@ +import { useCallback } from 'react'; +import { sprintf } from 'sprintf-js'; +import styled from 'styled-components'; + +import { wrapConstraint } from '../../../../../../shared/daemon-rpc-types'; +import { messages } from '../../../../../../shared/gettext'; +import { removeNonNumericCharacters } from '../../../../../../shared/string-helpers'; +import { useAppContext } from '../../../../../context'; +import { useSelector } from '../../../../../redux/store'; +import { AriaDescription, AriaInputGroup } from '../../../../AriaGroup'; +import * as Cell from '../../../../cell'; +import { SelectorItem, SelectorWithCustomItem } from '../../../../cell/Selector'; + +const PORTS: Array<SelectorItem<number>> = []; +const ALLOWED_RANGE = [1, 65535]; + +const StyledSelectorContainer = styled.div({ + flex: 0, +}); + +export function ShadowsocksPortSelector() { + const { setObfuscationSettings } = useAppContext(); + const obfuscationSettings = useSelector((state) => state.settings.obfuscationSettings); + + const port = + obfuscationSettings.shadowsocksSettings.port === 'any' + ? null + : obfuscationSettings.shadowsocksSettings.port.only; + + const setShadowsocksPort = useCallback( + async (port: number | null) => { + await setObfuscationSettings({ + ...obfuscationSettings, + shadowsocksSettings: { + ...obfuscationSettings.shadowsocksSettings, + port: wrapConstraint(port), + }, + }); + }, + [setObfuscationSettings, obfuscationSettings], + ); + + const parseValue = useCallback((port: string) => parseInt(port), []); + + const validateValue = useCallback( + (value: number) => value >= ALLOWED_RANGE[0] && value <= ALLOWED_RANGE[1], + [], + ); + + return ( + <AriaInputGroup> + <StyledSelectorContainer> + <SelectorWithCustomItem + // TRANSLATORS: The title for the WireGuard port selector. + title={messages.pgettext('wireguard-settings-view', 'Port')} + items={PORTS} + value={port} + onSelect={setShadowsocksPort} + inputPlaceholder={messages.pgettext('wireguard-settings-view', 'Port')} + automaticValue={null} + parseValue={parseValue} + modifyValue={removeNonNumericCharacters} + validateValue={validateValue} + maxLength={`${ALLOWED_RANGE[1]}`.length} + /> + </StyledSelectorContainer> + <Cell.CellFooter> + <AriaDescription> + <Cell.CellFooterText> + {sprintf( + // TRANSLATORS: Text describing the valid port range for a port selector. + messages.pgettext('wireguard-settings-view', 'Valid range: %(min)s - %(max)s'), + { min: ALLOWED_RANGE[0], max: ALLOWED_RANGE[1] }, + )} + </Cell.CellFooterText> + </AriaDescription> + </Cell.CellFooter> + </AriaInputGroup> + ); +} diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/shadowsocks-settings/components/shadowsocks-port-setting/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/shadowsocks-settings/components/shadowsocks-port-setting/index.ts new file mode 100644 index 0000000000..a7857e9ba5 --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/shadowsocks-settings/components/shadowsocks-port-setting/index.ts @@ -0,0 +1 @@ +export * from './ShadowSocksPortSetting'; |