diff options
Diffstat (limited to 'desktop')
3 files changed, 54 insertions, 24 deletions
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/settings-accordion/SettingsAccordion.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/settings-accordion/SettingsAccordion.tsx new file mode 100644 index 0000000000..b4aa0129e9 --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/components/settings-accordion/SettingsAccordion.tsx @@ -0,0 +1,38 @@ +import React from 'react'; + +import { ScrollToAnchorId } from '../../../shared/ipc-types'; +import { useScrollToListItem } from '../../hooks'; +import { Accordion, AccordionProps } from '../../lib/components/accordion'; +import { useHistory } from '../../lib/history'; + +export type SettingsAccordion = Omit<AccordionProps, 'animation'> & { + accordionId: string; + anchorId?: ScrollToAnchorId; +}; + +function SettingsAccordion({ accordionId, anchorId, ...props }: SettingsAccordion) { + const { location } = useHistory(); + const initialExpanded = location.state.expandedSections[accordionId]; + const [expanded, setExpanded] = React.useState(initialExpanded); + const { ref, animation } = useScrollToListItem(anchorId); + + return ( + <Accordion + ref={ref} + animation={animation} + expanded={expanded} + onExpandedChange={setExpanded} + {...props} + /> + ); +} + +const SettingsAccordionNamespace = Object.assign(SettingsAccordion, { + Trigger: Accordion.Trigger, + Header: Accordion.Header, + Content: Accordion.Content, + Title: Accordion.Title, + Icon: Accordion.Icon, +}); + +export { SettingsAccordionNamespace as SettingsAccordion }; diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/settings-accordion/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/settings-accordion/index.ts new file mode 100644 index 0000000000..60f9bc00d3 --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/components/settings-accordion/index.ts @@ -0,0 +1 @@ +export * from './SettingsAccordion'; 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 c49b953fb1..2c086d4a5b 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,15 +1,12 @@ -import React from 'react'; import { sprintf } from 'sprintf-js'; import { messages } from '../../../../../../shared/gettext'; -import { useScrollToListItem } from '../../../../../hooks'; -import { Accordion } from '../../../../../lib/components/accordion'; import { FlexRow } from '../../../../../lib/components/flex-row'; -import { useHistory } from '../../../../../lib/history'; import { formatHtml } from '../../../../../lib/html-formatter'; import { useSelector } from '../../../../../redux/store'; import InfoButton from '../../../../InfoButton'; import { ModalMessage } from '../../../../Modal'; +import { SettingsAccordion } from '../../../../settings-accordion'; import { BlockAdsSetting, BlockAdultContentSetting, @@ -22,24 +19,18 @@ import { export function DnsBlockerSettings() { const dns = useSelector((state) => state.settings.dns); - const { location } = useHistory(); - const initialExpanded = location.state.expandedSections['dns-blocker-setting']; const customDnsFeatureName = messages.pgettext('vpn-settings-view', 'Use custom DNS server'); - const [expanded, setExpanded] = React.useState(initialExpanded); - const { ref, animation } = useScrollToListItem('dns-blocker-setting'); return ( <> - <Accordion - ref={ref} - expanded={expanded} - onExpandedChange={setExpanded} - disabled={dns.state === 'custom'} - animation={animation}> - <Accordion.Header> - <Accordion.Title> + <SettingsAccordion + accordionId="dns-blocker-setting" + anchorId="dns-blocker-setting" + disabled={dns.state === 'custom'}> + <SettingsAccordion.Header> + <SettingsAccordion.Title> {messages.pgettext('vpn-settings-view', 'DNS content blockers')} - </Accordion.Title> + </SettingsAccordion.Title> <FlexRow $gap="medium"> <InfoButton> <ModalMessage> @@ -66,20 +57,20 @@ export function DnsBlockerSettings() { )} </ModalMessage> </InfoButton> - <Accordion.Trigger> - <Accordion.Icon /> - </Accordion.Trigger> + <SettingsAccordion.Trigger> + <SettingsAccordion.Icon /> + </SettingsAccordion.Trigger> </FlexRow> - </Accordion.Header> - <Accordion.Content> + </SettingsAccordion.Header> + <SettingsAccordion.Content> <BlockAdsSetting /> <BlockTrackersSetting /> <BlockMalwareSetting /> <BlockGamblingSetting /> <BlockAdultContentSetting /> <BlockSocialMediaSetting /> - </Accordion.Content> - </Accordion> + </SettingsAccordion.Content> + </SettingsAccordion> {dns.state === 'custom' && <CustomDnsEnabledFooter />} </> ); |