diff options
| author | Oskar Nyberg <oskar@mullvad.net> | 2024-01-02 08:09:48 +0100 |
|---|---|---|
| committer | Oskar Nyberg <oskar@mullvad.net> | 2024-01-05 16:51:03 +0100 |
| commit | d6d627355035774c11b26bab58eb14d4a2ce13dd (patch) | |
| tree | a1f3f7a80f6f2ec15d4eb098fc51c10fcb459e81 | |
| parent | f501c34baae5bafdca5d5f0ce7d511db7e470a82 (diff) | |
| download | mullvadvpn-d6d627355035774c11b26bab58eb14d4a2ce13dd.tar.xz mullvadvpn-d6d627355035774c11b26bab58eb14d4a2ce13dd.zip | |
Add back action for custom list add input
| -rw-r--r-- | gui/src/renderer/components/select-location/CustomLists.tsx | 59 |
1 files changed, 31 insertions, 28 deletions
diff --git a/gui/src/renderer/components/select-location/CustomLists.tsx b/gui/src/renderer/components/select-location/CustomLists.tsx index 6799a34867..737d66bf89 100644 --- a/gui/src/renderer/components/select-location/CustomLists.tsx +++ b/gui/src/renderer/components/select-location/CustomLists.tsx @@ -10,6 +10,7 @@ import { useBoolean, useStyledRef } from '../../lib/utilityHooks'; import Accordion from '../Accordion'; import * as Cell from '../cell'; import { measurements } from '../common-styles'; +import { BackAction } from '../KeyboardNavigation'; import SimpleInput from '../SimpleInput'; import { StyledLocationRowIcon } from './LocationRow'; import { useRelayListContext } from './RelayListContext'; @@ -169,35 +170,37 @@ function AddListForm(props: AddListFormProps) { }, [props.visible]); return ( - <Accordion expanded={props.visible} onTransitionEnd={onTransitionEnd}> - <StyledCellContainer ref={containerRef}> - <StyledInputContainer> - <StyledInput - ref={inputRef} - value={name} - onChangeValue={onChange} - onSubmitValue={createList} - onBlur={onBlur} - maxLength={30} - $error={error} - autoFocus - /> - </StyledInputContainer> + <BackAction disabled={!props.visible} action={props.cancel}> + <Accordion expanded={props.visible} onTransitionEnd={onTransitionEnd}> + <StyledCellContainer ref={containerRef}> + <StyledInputContainer> + <StyledInput + ref={inputRef} + value={name} + onChangeValue={onChange} + onSubmitValue={createList} + onBlur={onBlur} + maxLength={30} + $error={error} + autoFocus + /> + </StyledInputContainer> - <StyledAddListCellButton - $backgroundColor={colors.blue} - $backgroundColorHover={colors.blue80} - disabled={!nameValid} - onClick={createList}> - <StyledSideButtonIcon source="icon-check" tintColor={colors.white60} width={18} /> - </StyledAddListCellButton> - </StyledCellContainer> - <Cell.CellFooter> - <Cell.CellFooterText> - {messages.pgettext('select-location-view', 'List names must be unique.')} - </Cell.CellFooterText> - </Cell.CellFooter> - </Accordion> + <StyledAddListCellButton + $backgroundColor={colors.blue} + $backgroundColorHover={colors.blue80} + disabled={!nameValid} + onClick={createList}> + <StyledSideButtonIcon source="icon-check" tintColor={colors.white60} width={18} /> + </StyledAddListCellButton> + </StyledCellContainer> + <Cell.CellFooter> + <Cell.CellFooterText> + {messages.pgettext('select-location-view', 'List names must be unique.')} + </Cell.CellFooterText> + </Cell.CellFooter> + </Accordion> + </BackAction> ); } |