Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: Add useRef to expose focus on SearchInput component #287

Merged
merged 1 commit into from
Jun 12, 2024
Merged

chore: Add useRef to expose focus on SearchInput component #287

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
325 changes: 175 additions & 150 deletions src/components/searchInput/SearchInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
/* eslint-disable functional/immutable-data */
import React, { useCallback, useRef, useState } from "react";
import React, {
forwardRef,
useCallback,
useImperativeHandle,
useRef,
useState
} from "react";
import {
ColorValue,
Dimensions,
Expand Down Expand Up @@ -78,6 +84,10 @@ type SearchInputProps = WithTestID<{
}> &
SearchInputActionProps;

export type SearchInputRef = {
focus: () => void;
};

const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
const AnimatedPressable = Animated.createAnimatedComponent(Pressable);

Expand All @@ -86,178 +96,193 @@ const inputWithTimingConfig = {
easing: Easing.inOut(Easing.cubic)
};

export const SearchInput = ({
accessibilityLabel,
cancelButtonLabel,
clearAccessibilityLabel,
onCancel,
onChangeText,
placeholder,
value = "",
autoFocus,
pressable,
testID
}: SearchInputProps) => {
const searchInputRef = useRef<TextInput>(null);

/* Component visual attributes */
const theme = useIOTheme();
const { isExperimental } = useIOExperimentalDesign();
const inputCaretColor = IOColors[theme["interactiveElem-default"]];
export const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
(
{
accessibilityLabel,
cancelButtonLabel,
clearAccessibilityLabel,
onCancel,
onChangeText,
placeholder,
value = "",
autoFocus,
pressable,
testID
},
ref
) => {
const searchInputRef = useRef<TextInput>(null);

/* Widths used for the transition:
- `SearchInput` entire width
- `Cancel` button */
const inputWidth: number =
Dimensions.get("window").width - IOVisualCostants.appMarginDefault * 2;
/* Component visual attributes */
const theme = useIOTheme();
const { isExperimental } = useIOExperimentalDesign();
const inputCaretColor = IOColors[theme["interactiveElem-default"]];

const [cancelButtonWidth, setCancelButtonWidth] =
useState<LayoutRectangle["width"]>(0);
/* Widths used for the transition:
- `SearchInput` entire width
- `Cancel` button */
const inputWidth: number =
Dimensions.get("window").width - IOVisualCostants.appMarginDefault * 2;

const getCancelButtonWidth = ({ nativeEvent }: LayoutChangeEvent) => {
setCancelButtonWidth(nativeEvent.layout.width);
};
const [cancelButtonWidth, setCancelButtonWidth] =
useState<LayoutRectangle["width"]>(0);

const inputWidthWithCancel: number = inputWidth - cancelButtonWidth;
const getCancelButtonWidth = ({ nativeEvent }: LayoutChangeEvent) => {
setCancelButtonWidth(nativeEvent.layout.width);
};

/* Reanimated styles */
const inputAnimatedWidth = useSharedValue<number>(inputWidth);
const isFocused = useSharedValue(0);
const inputWidthWithCancel: number = inputWidth - cancelButtonWidth;

/* Applied to the `SearchInput` */
const animatedStyle = useAnimatedStyle(() => ({
width: withTiming(inputAnimatedWidth.value, inputWithTimingConfig),
backgroundColor: interpolateColor(
isFocused.value,
[0, 1],
[inputBgColorDefault, inputBgColorFocused]
)
}));
useImperativeHandle(
ref,
() => ({
focus() {
searchInputRef.current?.focus();
}
}),
[]
);

/* Applied to the `Cancel` button */
const cancelButtonAnimatedStyle = useAnimatedStyle(() => ({
transform: [
{
translateX: interpolate(
isFocused.value,
[0, 1],
[cancelButtonWidth + IOVisualCostants.appMarginDefault, 0],
Extrapolate.CLAMP
)
}
],
opacity: interpolate(isFocused.value, [0, 1], [0.5, 1])
}));
/* Reanimated styles */
const inputAnimatedWidth = useSharedValue<number>(inputWidth);
const isFocused = useSharedValue(0);

/* Applied to the `Clear` button inside the `SearchInput` */
const clearButtonAnimatedStyle = useAnimatedStyle(() => {
const showClearButton = value.length > 0;
/* Applied to the `SearchInput` */
const animatedStyle = useAnimatedStyle(() => ({
width: withTiming(inputAnimatedWidth.value, inputWithTimingConfig),
backgroundColor: interpolateColor(
isFocused.value,
[0, 1],
[inputBgColorDefault, inputBgColorFocused]
)
}));

return {
/* Applied to the `Cancel` button */
const cancelButtonAnimatedStyle = useAnimatedStyle(() => ({
transform: [
{
scale: showClearButton
? withTiming(1, inputWithTimingConfig)
: withTiming(0.5, inputWithTimingConfig)
translateX: interpolate(
isFocused.value,
[0, 1],
[cancelButtonWidth + IOVisualCostants.appMarginDefault, 0],
Extrapolate.CLAMP
)
}
],
opacity: withTiming(showClearButton ? 1 : 0, inputWithTimingConfig)
opacity: interpolate(isFocused.value, [0, 1], [0.5, 1])
}));

/* Applied to the `Clear` button inside the `SearchInput` */
const clearButtonAnimatedStyle = useAnimatedStyle(() => {
const showClearButton = value.length > 0;

return {
transform: [
{
scale: showClearButton
? withTiming(1, inputWithTimingConfig)
: withTiming(0.5, inputWithTimingConfig)
}
],
opacity: withTiming(showClearButton ? 1 : 0, inputWithTimingConfig)
};
}, [value]);

/* Related event handlers */
const handleFocus = () => {
isFocused.value = withTiming(1, inputWithTimingConfig);
inputAnimatedWidth.value = inputWidthWithCancel;
};
}, [value]);

/* Related event handlers */
const handleFocus = () => {
isFocused.value = withTiming(1, inputWithTimingConfig);
inputAnimatedWidth.value = inputWidthWithCancel;
};
const handleBlur = () => {
isFocused.value = withTiming(0, inputWithTimingConfig);
inputAnimatedWidth.value = inputWidth;
};

const handleBlur = () => {
isFocused.value = withTiming(0, inputWithTimingConfig);
inputAnimatedWidth.value = inputWidth;
};
const cancel = useCallback(
(event: GestureResponderEvent) => {
onChangeText?.("");
onCancel?.(event);
},
[onCancel, onChangeText]
);

const cancel = useCallback(
(event: GestureResponderEvent) => {
const clear = useCallback(() => {
onChangeText?.("");
onCancel?.(event);
},
[onCancel, onChangeText]
);

const clear = useCallback(() => {
onChangeText?.("");
searchInputRef.current?.clear();
}, [onChangeText]);
searchInputRef.current?.clear();
}, [onChangeText]);

const handleChangeText = useCallback(
(text: string) => onChangeText?.(text),
[onChangeText]
);
const handleChangeText = useCallback(
(text: string) => onChangeText?.(text),
[onChangeText]
);

const renderSearchBar = () => (
<Animated.View style={styles.searchBar}>
<Animated.View
style={[styles.searchInput, animatedStyle]}
pointerEvents={pressable ? "none" : "auto"}
>
<View style={styles.iconContainer}>
<Icon name="search" size={iconSize} color={iconColor} />
</View>
<AnimatedTextInput
testID={testID}
ref={searchInputRef}
inputMode="search"
returnKeyType="search"
accessibilityRole={"search"}
accessibilityLabel={accessibilityLabel}
style={[
styles.textInput,
Platform.OS === "ios"
? styles.textInputIOS
: styles.textInputAndroid,
isExperimental ? styles.placeholder : styles.placeholderLegacy
]}
selectionColor={inputCaretColor}
cursorColor={inputCaretColor}
placeholder={placeholder}
placeholderTextColor={inputColorPlaceholder}
onFocus={handleFocus}
onBlur={handleBlur}
onChangeText={handleChangeText}
value={value}
autoFocus={autoFocus}
/>
<AnimatedPressable
style={[styles.clearButton, clearButtonAnimatedStyle]}
onPress={clear}
accessibilityLabel={clearAccessibilityLabel}
accessibilityRole="button"
hitSlop={16}
const renderSearchBar = () => (
<Animated.View style={styles.searchBar}>
<Animated.View
style={[styles.searchInput, animatedStyle]}
pointerEvents={pressable ? "none" : "auto"}
>
<Icon name="closeSmall" size={iconCloseSize} color={iconColor} />
</AnimatedPressable>
</Animated.View>
<Animated.View
onLayout={getCancelButtonWidth}
style={[styles.cancelButton, cancelButtonAnimatedStyle]}
>
<ButtonLink label={cancelButtonLabel} onPress={cancel} />
<View style={styles.iconContainer}>
<Icon name="search" size={iconSize} color={iconColor} />
</View>
<AnimatedTextInput
testID={testID}
ref={searchInputRef}
inputMode="search"
returnKeyType="search"
accessibilityRole={"search"}
accessibilityLabel={accessibilityLabel}
style={[
styles.textInput,
Platform.OS === "ios"
? styles.textInputIOS
: styles.textInputAndroid,
isExperimental ? styles.placeholder : styles.placeholderLegacy
]}
selectionColor={inputCaretColor}
cursorColor={inputCaretColor}
placeholder={placeholder}
placeholderTextColor={inputColorPlaceholder}
onFocus={handleFocus}
onBlur={handleBlur}
onChangeText={handleChangeText}
value={value}
autoFocus={autoFocus}
/>
<AnimatedPressable
style={[styles.clearButton, clearButtonAnimatedStyle]}
onPress={clear}
accessibilityLabel={clearAccessibilityLabel}
accessibilityRole="button"
hitSlop={16}
>
<Icon name="closeSmall" size={iconCloseSize} color={iconColor} />
</AnimatedPressable>
</Animated.View>
<Animated.View
onLayout={getCancelButtonWidth}
style={[styles.cancelButton, cancelButtonAnimatedStyle]}
>
<ButtonLink label={cancelButtonLabel} onPress={cancel} />
</Animated.View>
</Animated.View>
</Animated.View>
);
);

return pressable ? (
<Pressable
accessibilityRole="button"
accessibilityLabel={placeholder}
onPress={pressable?.onPress}
>
{renderSearchBar()}
</Pressable>
) : (
renderSearchBar()
);
};
return pressable ? (
<Pressable
accessibilityRole="button"
accessibilityLabel={placeholder}
onPress={pressable?.onPress}
>
{renderSearchBar()}
</Pressable>
) : (
renderSearchBar()
);
}
);

const styles = StyleSheet.create({
searchBar: {
Expand Down
Loading