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

Jon/fix/empty-search #5393

Merged
merged 3 commits into from
Dec 13, 2024
Merged

Jon/fix/empty-search #5393

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e5d42ef
Add `selected` prop to `SimpleTextInput`
samholmes Dec 13, 2024
f4725a8
Update `SearchFooter` logic
Jon-edge Nov 29, 2024
6c51af2
Reduce "Cancel" tappable area
Jon-edge Dec 11, 2024
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
Next Next commit
Add selected prop to SimpleTextInput
  • Loading branch information
@samholmes
samholmes committed Dec 13, 2024
commit e5d42ef73e8f487bd60b83b905b20b8652b50ad8
30 changes: 24 additions & 6 deletions src/components/themed/SimpleTextInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,12 +52,21 @@ export interface SimpleTextInputProps extends MarginRemProps {
secureTextEntry?: boolean // Defaults to 'false'
testID?: string

// Unless 'autoFocus' is passed explicitly in the props, Search Bars 'autoFocus' and 'regular' text inputs don't.
/** Unless 'autoFocus' is passed explicitly in the props, Search Bars
'autoFocus' and 'regular' text inputs don't. */
autoFocus?: boolean // Defaults to 'true'

// Unless 'blurOnClear' is passed explicitly in the props, Search Bars calls 'blur' when cleared and text inputs don't call 'blur' when cleared.
/** Unless 'blurOnClear' is passed explicitly in the props, Search Bars calls
* 'blur' when cleared and text inputs don't call 'blur' when cleared. */
blurOnClear?: boolean // Defaults to 'false'

/**
* Manually control whether the input appears selected. This is only a
* visual change. It's mutually exclusive with the text input's true
* blur/focus state.
* */
active?: boolean

// Whether the text input is disabled. If 'true', the component will be grayed out.
disabled?: boolean // Defaults to 'false'
}
Expand Down Expand Up @@ -104,6 +113,7 @@ export const SimpleTextInput = React.forwardRef<SimpleTextInputRef, SimpleTextIn
maxLength,
returnKeyType,
secureTextEntry,
active,
testID,
...marginRemProps
} = props
Expand Down Expand Up @@ -154,7 +164,8 @@ export const SimpleTextInput = React.forwardRef<SimpleTextInputRef, SimpleTextIn
const animationDelay = 0.4 * baseDuration

const handleBlur = useHandler(() => {
focusAnimation.value = withDelay(animationDelay, withTiming(0, { duration: baseDuration }))
if (active == null) focusAnimation.value = withDelay(animationDelay, withTiming(0, { duration: baseDuration }))

if (onBlur != null) onBlur()
setIsFocused(false)
})
Expand All @@ -166,7 +177,7 @@ export const SimpleTextInput = React.forwardRef<SimpleTextInputRef, SimpleTextIn
blur()
})
const handleFocus = useHandler(() => {
focusAnimation.value = withTiming(1, { duration: baseDuration })
if (active == null) focusAnimation.value = withTiming(1, { duration: baseDuration })
if (onFocus != null) onFocus()
setIsFocused(true)
})
Expand All @@ -175,7 +186,9 @@ export const SimpleTextInput = React.forwardRef<SimpleTextInputRef, SimpleTextIn
})

const backIconSize = useDerivedValue(() => (isIos ? 0 : interpolate(focusAnimation.value, [0, 1], [0, themeRem])))
const leftIconSize = useDerivedValue(() => (hasIcon ? (hasValue ? 0 : interpolate(focusAnimation.value, [0, 1], [themeRem, 0])) : 0))
const leftIconSize = useDerivedValue(() =>
hasIcon ? (hasValue && (active == null || !active) ? 0 : interpolate(focusAnimation.value, [0, 1], [themeRem, 0])) : 0
)
const rightIconSize = useDerivedValue(() => (hasValue ? themeRem : focusAnimation.value * themeRem))

const scale = useDerivedValue(() => scaleProp?.value ?? 1)
Expand All @@ -187,6 +200,11 @@ export const SimpleTextInput = React.forwardRef<SimpleTextInputRef, SimpleTextIn
return disabled ? theme.textInputPlaceholderColorDisabled : isFocused ? theme.textInputPlaceholderColorFocused : theme.textInputPlaceholderColor
}, [disabled, isFocused, theme.textInputPlaceholderColor, theme.textInputPlaceholderColorDisabled, theme.textInputPlaceholderColorFocused])

React.useEffect(() => {
if (active == null) return
focusAnimation.value = active ? withTiming(1, { duration: baseDuration }) : withDelay(animationDelay, withTiming(0, { duration: baseDuration }))
}, [active, focusAnimation, baseDuration, animationDelay])

return (
<ContainerView marginRemProps={marginRemProps}>
<EdgeTouchableWithoutFeedback accessible={false} testID={testID} onPress={() => focus()}>
Expand Down Expand Up @@ -236,7 +254,7 @@ export const SimpleTextInput = React.forwardRef<SimpleTextInputRef, SimpleTextIn
</TouchContainer>
</InputContainerView>
</EdgeTouchableWithoutFeedback>
{isIos && isFocused && (
{isIos && (isFocused || active === true) && (
<TouchContainer hitSlop={theme.rem(0.75)} accessible onPress={handleDonePress} testID={`${testID}.cancelButton`}>
<CancelButton>
<CancelText numberOfLines={1} ellipsizeMode="clip">
Expand Down