aboutsummaryrefslogtreecommitdiffstats
path: root/packages/renderer/src/components/locationBar/LocationTextField.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/renderer/src/components/locationBar/LocationTextField.tsx')
-rw-r--r--packages/renderer/src/components/locationBar/LocationTextField.tsx21
1 files changed, 8 insertions, 13 deletions
diff --git a/packages/renderer/src/components/locationBar/LocationTextField.tsx b/packages/renderer/src/components/locationBar/LocationTextField.tsx
index 85cf794..1d6b561 100644
--- a/packages/renderer/src/components/locationBar/LocationTextField.tsx
+++ b/packages/renderer/src/components/locationBar/LocationTextField.tsx
@@ -20,7 +20,6 @@
20 20
21import FilledInput from '@mui/material/FilledInput'; 21import FilledInput from '@mui/material/FilledInput';
22import { styled } from '@mui/material/styles'; 22import { styled } from '@mui/material/styles';
23import { SecurityLabelKind } from '@sophie/shared';
24import { autorun } from 'mobx'; 23import { autorun } from 'mobx';
25import { observer } from 'mobx-react-lite'; 24import { observer } from 'mobx-react-lite';
26import React, { useCallback, useEffect, useState } from 'react'; 25import React, { useCallback, useEffect, useState } from 'react';
@@ -44,19 +43,15 @@ const LocationTextFieldRoot = styled(FilledInput, {
44 }, 43 },
45})); 44}));
46 45
47function LocationTextField({ 46function LocationTextField({ service }: { service: Service }): JSX.Element {
48 service,
49}: {
50 service: Service | undefined;
51}): JSX.Element {
52 const [inputFocused, setInputFocused] = useState(false); 47 const [inputFocused, setInputFocused] = useState(false);
53 const [changed, setChanged] = useState(false); 48 const [changed, setChanged] = useState(false);
54 const [value, setValue] = useState(''); 49 const [value, setValue] = useState('');
55 50
56 const resetValue = useCallback(() => { 51 const resetValue = useCallback(() => {
57 setValue(service?.currentUrl ?? ''); 52 setValue(service.currentUrl ?? '');
58 setChanged(false); 53 setChanged(false);
59 }, [service, setChanged, setValue]); 54 }, [service]);
60 55
61 useEffect( 56 useEffect(
62 () => 57 () =>
@@ -84,8 +79,8 @@ function LocationTextField({
84 overlayVisible: !inputFocused && !changed, 79 overlayVisible: !inputFocused && !changed,
85 overlay: ( 80 overlay: (
86 <UrlOverlay 81 <UrlOverlay
87 url={service?.currentUrl ?? ''} 82 url={service.currentUrl ?? ''}
88 alert={service?.hasSecurityLabelWarning ?? false} 83 alert={service.hasSecurityLabelWarning ?? false}
89 /> 84 />
90 ), 85 ),
91 }} 86 }}
@@ -102,7 +97,7 @@ function LocationTextField({
102 resetValue(); 97 resetValue();
103 break; 98 break;
104 case 'Enter': 99 case 'Enter':
105 service?.go(value); 100 service.go(value);
106 break; 101 break;
107 default: 102 default:
108 // Nothing to do, let the key event through. 103 // Nothing to do, let the key event through.
@@ -117,14 +112,14 @@ function LocationTextField({
117 disableUnderline 112 disableUnderline
118 startAdornment={ 113 startAdornment={
119 <SecurityLabel 114 <SecurityLabel
120 kind={service?.securityLabel ?? SecurityLabelKind.Empty} 115 kind={service.securityLabel}
121 changed={changed} 116 changed={changed}
122 position="start" 117 position="start"
123 /> 118 />
124 } 119 }
125 endAdornment={ 120 endAdornment={
126 changed ? ( 121 changed ? (
127 <GoButton onClick={() => service?.go(value)} position="end" /> 122 <GoButton onClick={() => service.go(value)} position="end" />
128 ) : undefined 123 ) : undefined
129 } 124 }
130 value={value} 125 value={value}