diff options
Diffstat (limited to 'packages/renderer/src/components/locationBar/LocationTextField.tsx')
-rw-r--r-- | packages/renderer/src/components/locationBar/LocationTextField.tsx | 21 |
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 | ||
21 | import FilledInput from '@mui/material/FilledInput'; | 21 | import FilledInput from '@mui/material/FilledInput'; |
22 | import { styled } from '@mui/material/styles'; | 22 | import { styled } from '@mui/material/styles'; |
23 | import { SecurityLabelKind } from '@sophie/shared'; | ||
24 | import { autorun } from 'mobx'; | 23 | import { autorun } from 'mobx'; |
25 | import { observer } from 'mobx-react-lite'; | 24 | import { observer } from 'mobx-react-lite'; |
26 | import React, { useCallback, useEffect, useState } from 'react'; | 25 | import React, { useCallback, useEffect, useState } from 'react'; |
@@ -44,19 +43,15 @@ const LocationTextFieldRoot = styled(FilledInput, { | |||
44 | }, | 43 | }, |
45 | })); | 44 | })); |
46 | 45 | ||
47 | function LocationTextField({ | 46 | function 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} |