diff options
7 files changed, 43 insertions, 0 deletions
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/ListItem.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/ListItem.tsx index b52bc51d53..7b234e1a62 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/ListItem.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/ListItem.tsx @@ -8,6 +8,7 @@ import { ListItemItem, ListItemLabel, ListItemText, + ListItemTextField, ListItemTrigger, } from './components'; import { levels } from './levels'; @@ -39,6 +40,7 @@ const ListItemNamespace = Object.assign(ListItem, { Item: ListItemItem, Footer: ListItemFooter, Icon: ListItemIcon, + TextField: ListItemTextField, }); export { ListItemNamespace as ListItem }; diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/index.ts index 1b7906d8a1..0ed8151241 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/index.ts +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/index.ts @@ -6,3 +6,4 @@ export * from './list-item-label'; export * from './list-item-text'; export * from './list-item-trigger'; export * from './list-item-footer'; +export * from './list-item-text-field'; diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-text-field/ListItemTextField.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-text-field/ListItemTextField.tsx new file mode 100644 index 0000000000..05c9b828f1 --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-text-field/ListItemTextField.tsx @@ -0,0 +1,22 @@ +import { TextField, TextFieldProps } from '../../../text-field'; +import { ListItemTextFieldInput } from './components'; + +export type ListItemTextFieldProps = TextFieldProps & { + onSubmit?: (event: React.FormEvent) => Promise<void>; +}; + +function ListItemTextField({ invalid, onSubmit, children, ...props }: ListItemTextFieldProps) { + return ( + <form onSubmit={onSubmit}> + <TextField invalid={invalid} {...props}> + {children} + </TextField> + </form> + ); +} + +const ListItemTextFieldNamespace = Object.assign(ListItemTextField, { + Input: ListItemTextFieldInput, +}); + +export { ListItemTextFieldNamespace as ListItemTextField }; diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-text-field/components/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-text-field/components/index.ts new file mode 100644 index 0000000000..28509d072d --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-text-field/components/index.ts @@ -0,0 +1 @@ +export * from './list-item-text-field-input'; diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-text-field/components/list-item-text-field-input/ListItemTextFieldInput.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-text-field/components/list-item-text-field-input/ListItemTextFieldInput.tsx new file mode 100644 index 0000000000..3eb3342ffc --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-text-field/components/list-item-text-field-input/ListItemTextFieldInput.tsx @@ -0,0 +1,15 @@ +import styled from 'styled-components'; + +import { TextField } from '../../../../../text-field'; +import { TextFieldInputProps } from '../../../../../text-field/components'; + +export type ListItemTextFieldInputProps = TextFieldInputProps; + +const StyledTextFieldInput = styled(TextField.Input)` + box-sizing: border-box; + width: 102px; +`; + +export function ListItemTextFieldInput({ children, ...props }: ListItemTextFieldInputProps) { + return <StyledTextFieldInput {...props}>{children}</StyledTextFieldInput>; +} diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-text-field/components/list-item-text-field-input/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-text-field/components/list-item-text-field-input/index.ts new file mode 100644 index 0000000000..a9da3a4bb4 --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-text-field/components/list-item-text-field-input/index.ts @@ -0,0 +1 @@ +export * from './ListItemTextFieldInput'; diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-text-field/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-text-field/index.ts new file mode 100644 index 0000000000..7f6a499cfb --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-text-field/index.ts @@ -0,0 +1 @@ +export * from './ListItemTextField'; |