Page MenuHomePhorge
Files F33129423

D7895.1768497729.diff
No OneTemporary
Actions

Size
5 KB
Referenced Files
None
Subscribers
None

D7895.1768497729.diff
View Options

diff --git a/native/account/registration/keyserver-selection.react.js b/native/account/registration/keyserver-selection.react.js
--- a/native/account/registration/keyserver-selection.react.js
+++ b/native/account/registration/keyserver-selection.react.js
@@ -2,13 +2,14 @@
import invariant from 'invariant';
import * as React from 'react';
-import { Text, TextInput } from 'react-native';
+import { Text } from 'react-native';
import RegistrationButtonContainer from './registration-button-container.react.js';
import RegistrationButton from './registration-button.react.js';
import RegistrationContainer from './registration-container.react.js';
import RegistrationContentContainer from './registration-content-container.react.js';
import type { RegistrationNavigationProp } from './registration-navigator.react.js';
+import RegistrationTextInput from './registration-text-input.react.js';
import {
RegistrationTile,
RegistrationTileHeader,
@@ -50,15 +51,8 @@
customKeyserverTextInputRef.current?.focus();
}
}, [customKeyserverEmpty]);
-
- const [customKeyserverInputFocused, setCustomKeyserverInputFocused] =
- React.useState(false);
const onCustomKeyserverFocus = React.useCallback(() => {
setCurrentSelection('custom');
- setCustomKeyserverInputFocused(true);
- }, []);
- const onCustomKeyserverBlur = React.useCallback(() => {
- setCustomKeyserverInputFocused(false);
}, []);
let keyserverUsername;
@@ -84,18 +78,6 @@
}, [navigate, coolOrNerdMode, keyserverUsername]);
const styles = useStyles(unboundStyles);
- const keyserverInputStyle = React.useMemo(
- () =>
- customKeyserverInputFocused
- ? [styles.keyserverInput, styles.focusedKeyserverInput]
- : styles.keyserverInput,
- [
- customKeyserverInputFocused,
- styles.keyserverInput,
- styles.focusedKeyserverInput,
- ],
- );
-
const colors = useColors();
return (
<RegistrationContainer>
@@ -134,14 +116,11 @@
<RegistrationTileHeader>
<Text style={styles.tileTitleText}>Enter a keyserver</Text>
</RegistrationTileHeader>
- <TextInput
+ <RegistrationTextInput
value={customKeyserver}
onChangeText={setCustomKeyserver}
- style={keyserverInputStyle}
- placeholderTextColor={colors.panelSecondaryForegroundBorder}
placeholder="Keyserver"
onFocus={onCustomKeyserverFocus}
- onBlur={onCustomKeyserverBlur}
ref={customKeyserverTextInputRef}
/>
</RegistrationTile>
@@ -181,16 +160,6 @@
cloud: {
marginRight: 8,
},
- keyserverInput: {
- color: 'panelForegroundLabel',
- borderColor: 'panelSecondaryForegroundBorder',
- borderWidth: 1,
- borderRadius: 4,
- padding: 12,
- },
- focusedKeyserverInput: {
- borderColor: 'panelForegroundLabel',
- },
};
export default KeyserverSelection;
diff --git a/native/account/registration/registration-text-input.react.js b/native/account/registration/registration-text-input.react.js
new file mode 100644
--- /dev/null
+++ b/native/account/registration/registration-text-input.react.js
@@ -0,0 +1,80 @@
+// @flow
+
+import * as React from 'react';
+import { TextInput } from 'react-native';
+
+import { useStyles, useColors } from '../../themes/colors.js';
+
+type Props = React.ElementConfig<typeof TextInput>;
+
+function ForwardedRegistrationTextInput(props: Props, ref): React.Node {
+ const { onFocus, onBlur, style, placeholderTextColor, ...rest } = props;
+
+ const [focused, setFocused] = React.useState(false);
+ const ourOnFocus = React.useCallback(
+ event => {
+ setFocused(true);
+ onFocus?.(event);
+ },
+ [onFocus],
+ );
+ const ourOnBlur = React.useCallback(
+ event => {
+ setFocused(false);
+ onBlur?.(event);
+ },
+ [onBlur],
+ );
+
+ const styles = useStyles(unboundStyles);
+ const ourStyle = React.useMemo(
+ () =>
+ focused
+ ? [styles.textInput, styles.focusedTextInput, style]
+ : [styles.textInput, style],
+ [focused, styles.textInput, styles.focusedTextInput, style],
+ );
+
+ const colors = useColors();
+ const ourPlaceholderTextColor =
+ placeholderTextColor ?? colors.panelSecondaryForegroundBorder;
+
+ return (
+ <TextInput
+ {...rest}
+ style={ourStyle}
+ placeholderTextColor={ourPlaceholderTextColor}
+ onFocus={ourOnFocus}
+ onBlur={ourOnBlur}
+ ref={ref}
+ />
+ );
+}
+
+const unboundStyles = {
+ textInput: {
+ color: 'panelForegroundLabel',
+ borderColor: 'panelSecondaryForegroundBorder',
+ borderWidth: 1,
+ borderRadius: 4,
+ padding: 12,
+ },
+ focusedTextInput: {
+ borderColor: 'panelForegroundLabel',
+ },
+};
+
+const RegistrationTextInput: React.AbstractComponent<
+ Props,
+ React.ElementRef<typeof TextInput>,
+> = React.forwardRef<Props, React.ElementRef<typeof TextInput>>(
+ ForwardedRegistrationTextInput,
+);
+RegistrationTextInput.displayName = 'RegistrationTextInput';
+
+const MemoizedRegistrationTextInput: typeof RegistrationTextInput = React.memo<
+ Props,
+ React.ElementRef<typeof TextInput>,
+>(RegistrationTextInput);
+
+export default MemoizedRegistrationTextInput;

File Metadata

Mime Type
text/plain
Expires
Thu, Jan 15, 5:22 PM (14 h, 54 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5939039
Default Alt Text
D7895.1768497729.diff (5 KB)

Event Timeline