diff options
| -rw-r--r-- | desktop/packages/mullvad-vpn/src/renderer/components/AppButton.tsx | 204 | ||||
| -rw-r--r-- | desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettingsStyles.tsx | 5 |
2 files changed, 0 insertions, 209 deletions
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/AppButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/AppButton.tsx index ceec46c62f..e69de29bb2 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/AppButton.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/AppButton.tsx @@ -1,204 +0,0 @@ -import React, { useCallback, useContext, useMemo, useState } from 'react'; -import styled from 'styled-components'; - -import log from '../../shared/logging'; -import { Colors } from '../lib/foundations'; -import { useMounted } from '../lib/utility-hooks'; -import { - StyledButtonContent, - StyledHiddenSide, - StyledLabel, - StyledLeft, - StyledRight, - StyledVisibleSide, - transparentButton, -} from './AppButtonStyles'; -import { measurements } from './common-styles'; - -interface ILabelProps { - textOffset?: number; - children?: React.ReactNode; -} - -export function Label(props: ILabelProps) { - return <StyledLabel $textOffset={props.textOffset ?? 0}>{props.children}</StyledLabel>; -} - -export interface IProps extends React.HTMLAttributes<HTMLButtonElement> { - children?: React.ReactNode; - className?: string; - disabled?: boolean; - onClick?: () => void; - textOffset?: number; -} - -type ChildrenGroups = { left: React.ReactNode[]; label: React.ReactNode; right: React.ReactNode[] }; - -const BaseButton = React.memo(function BaseButtonT(props: IProps) { - const { children, textOffset, ...otherProps } = props; - - const groupedChildren = useMemo(() => { - return React.Children.toArray(children).reduce( - (groups: ChildrenGroups, child) => { - if (groups.label === undefined && typeof child === 'string') { - return { ...groups, label: <Label textOffset={textOffset}>{child}</Label> }; - } else if (React.isValidElement(child) && child.type === Label) { - return { - ...groups, - label: React.cloneElement(child as React.ReactElement<ILabelProps>, { textOffset }), - }; - } else if (groups.label === undefined) { - return { ...groups, left: [...groups.left, child] }; - } else { - return { ...groups, right: [...groups.right, child] }; - } - }, - { left: [], label: undefined, right: [] }, - ); - }, [children, textOffset]); - - return ( - <StyledSimpleButton {...otherProps}> - <StyledButtonContent> - <StyledLeft> - <StyledVisibleSide>{groupedChildren.left}</StyledVisibleSide> - <StyledHiddenSide>{groupedChildren.right}</StyledHiddenSide> - </StyledLeft> - - {groupedChildren.label ?? <Label />} - - <StyledRight> - <StyledVisibleSide>{groupedChildren.right}</StyledVisibleSide> - <StyledHiddenSide>{groupedChildren.left}</StyledHiddenSide> - </StyledRight> - </StyledButtonContent> - </StyledSimpleButton> - ); -}); - -function SimpleButtonT(props: React.ButtonHTMLAttributes<HTMLButtonElement>) { - const blockingContext = useContext(BlockingContext); - - return ( - <button - {...props} - disabled={props.disabled || blockingContext.disabled} - onClick={blockingContext.onClick ?? props.onClick}> - {props.children} - </button> - ); -} - -export const SimpleButton = React.memo(SimpleButtonT); - -const StyledSimpleButton = styled(SimpleButton)({ - display: 'flex', - cursor: 'default', - borderRadius: 4, - border: 'none', - padding: 0, - '&&:disabled': { - opacity: 0.5, - }, -}); - -interface IBlockingContext { - disabled?: boolean; - onClick?: () => Promise<void>; -} - -const BlockingContext = React.createContext<IBlockingContext>({}); - -interface IBlockingProps { - children?: React.ReactNode; - onClick: () => Promise<void>; - disabled?: boolean; -} - -export function BlockingButton(props: IBlockingProps) { - const { onClick: propsOnClick } = props; - - const isMounted = useMounted(); - const [isBlocked, setIsBlocked] = useState(false); - - const onClick = useCallback(async () => { - setIsBlocked(true); - try { - await propsOnClick(); - } catch (error) { - log.error(`onClick() failed - ${error}`); - } - - if (isMounted()) { - setIsBlocked(false); - } - }, [isMounted, propsOnClick]); - - const contextValue = useMemo( - () => ({ - disabled: isBlocked || props.disabled, - onClick, - }), - [isBlocked, props.disabled, onClick], - ); - - return <BlockingContext.Provider value={contextValue}>{props.children}</BlockingContext.Provider>; -} - -export const RedButton = styled(BaseButton)({ - backgroundColor: Colors.red, - '&&:not(:disabled):hover': { - backgroundColor: Colors.red95, - }, -}); - -export const GreenButton = styled(BaseButton)({ - backgroundColor: Colors.green, - '&&:not(:disabled):hover': { - backgroundColor: Colors.green90, - }, -}); - -export const BlueButton = styled(BaseButton)({ - backgroundColor: Colors.blue80, - '&&:not(:disabled):hover': { - backgroundColor: Colors.blue60, - }, -}); - -export const TransparentButton = styled(BaseButton)(transparentButton, { - backgroundColor: Colors.white20, - '&&:not(:disabled):hover': { - backgroundColor: Colors.white40, - }, -}); - -export const RedTransparentButton = styled(BaseButton)(transparentButton, { - backgroundColor: Colors.red60, - '&&:not(:disabled):hover': { - backgroundColor: Colors.red80, - }, -}); - -const StyledButtonWrapper = styled.div({ - display: 'flex', - flexDirection: 'column', - flex: 0, - '&&:not(:last-child)': { - marginBottom: measurements.buttonVerticalMargin, - }, -}); - -interface IButtonGroupProps { - children: React.ReactNode | React.ReactNode[]; -} - -export function ButtonGroup(props: IButtonGroupProps) { - return ( - <> - {React.Children.map(props.children, (button, index) => ( - <StyledButtonWrapper key={index}>{button}</StyledButtonWrapper> - ))} - </> - ); -} diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettingsStyles.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettingsStyles.tsx index 9cdc24ff31..b054fe8e6d 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettingsStyles.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettingsStyles.tsx @@ -1,7 +1,6 @@ import styled from 'styled-components'; import { Colors, spacings } from '../lib/foundations'; -import * as AppButton from './AppButton'; import * as Cell from './cell'; import { measurements, normalText } from './common-styles'; import { NavigationScrollbars } from './NavigationScrollbars'; @@ -70,10 +69,6 @@ export const StyledSpinnerRow = styled(Cell.CellButton)({ background: Colors.blue40, }); -export const StyledBrowseButton = styled(AppButton.BlueButton)({ - margin: `0 ${measurements.horizontalViewMargin} ${measurements.verticalViewMargin}`, -}); - export const StyledNoResult = styled(Cell.CellFooter)({ display: 'flex', flexDirection: 'column', |