Dialog text input
This commit is contained in:
Eric Bailey
@@ -3,12 +3,14 @@ import {View, Dimensions} from 'react-native'
|
||||
import BottomSheet, {
|
||||
BottomSheetBackdrop,
|
||||
BottomSheetScrollView,
|
||||
BottomSheetTextInput,
|
||||
BottomSheetView,
|
||||
} from '@gorhom/bottom-sheet'
|
||||
import {useSafeAreaInsets} from 'react-native-safe-area-context'
|
||||
|
||||
import {useTheme, atoms as a} from '#/alf'
|
||||
import {Portal} from '#/components/Portal'
|
||||
import {createTextInput} from '#/components/forms/InputText'
|
||||
|
||||
import {
|
||||
DialogOuterProps,
|
||||
@@ -19,6 +21,8 @@ import {Context} from '#/components/Dialog/context'
|
||||
|
||||
export {useDialogControl, useDialogContext} from '#/components/Dialog/context'
|
||||
export * from '#/components/Dialog/types'
|
||||
// @ts-ignore
|
||||
export const InputText = createTextInput(BottomSheetTextInput)
|
||||
|
||||
export function Outer({
|
||||
children,
|
||||
|
||||
@@ -13,6 +13,7 @@ import {Context, useDialogContext} from '#/components/Dialog/context'
|
||||
|
||||
export {useDialogControl, useDialogContext} from '#/components/Dialog/context'
|
||||
export * from '#/components/Dialog/types'
|
||||
export {InputText} from '#/components/forms/InputText'
|
||||
|
||||
const stopPropagation = (e: any) => e.stopPropagation()
|
||||
|
||||
|
||||
+212
-204
@@ -20,221 +20,229 @@ type Props = BaseProps &
|
||||
suffix?: React.FunctionComponent<any>
|
||||
}
|
||||
|
||||
export function InputText({
|
||||
value: initialValue,
|
||||
onChange,
|
||||
testID,
|
||||
accessibilityLabel,
|
||||
accessibilityHint,
|
||||
label,
|
||||
hasError,
|
||||
icon: Icon,
|
||||
suffix: Suffix,
|
||||
...props
|
||||
}: Props) {
|
||||
const labelId = React.useId()
|
||||
const t = useTheme()
|
||||
const [value, setValue] = React.useState<string>(initialValue)
|
||||
const [suffixPadding, setSuffixPadding] = React.useState(0)
|
||||
const {
|
||||
state: hovered,
|
||||
onIn: onHoverIn,
|
||||
onOut: onHoverOut,
|
||||
} = useInteractionState()
|
||||
const {state: focused, onIn: onFocus, onOut: onBlur} = useInteractionState()
|
||||
const hasIcon = !!Icon
|
||||
export function createTextInput(Input: typeof TextInput) {
|
||||
return function InputText({
|
||||
value: initialValue,
|
||||
onChange,
|
||||
testID,
|
||||
accessibilityLabel,
|
||||
accessibilityHint,
|
||||
label,
|
||||
hasError,
|
||||
icon: Icon,
|
||||
suffix: Suffix,
|
||||
...props
|
||||
}: Props) {
|
||||
const labelId = React.useId()
|
||||
const t = useTheme()
|
||||
const [value, setValue] = React.useState<string>(initialValue)
|
||||
const [suffixPadding, setSuffixPadding] = React.useState(0)
|
||||
const {
|
||||
state: hovered,
|
||||
onIn: onHoverIn,
|
||||
onOut: onHoverOut,
|
||||
} = useInteractionState()
|
||||
const {state: focused, onIn: onFocus, onOut: onBlur} = useInteractionState()
|
||||
const hasIcon = !!Icon
|
||||
|
||||
const handleSuffixLayout = React.useCallback(
|
||||
(e: LayoutChangeEvent) => {
|
||||
setSuffixPadding(e.nativeEvent.layout.width + 16)
|
||||
},
|
||||
[setSuffixPadding],
|
||||
)
|
||||
const handleSuffixLayout = React.useCallback(
|
||||
(e: LayoutChangeEvent) => {
|
||||
setSuffixPadding(e.nativeEvent.layout.width + 16)
|
||||
},
|
||||
[setSuffixPadding],
|
||||
)
|
||||
|
||||
const {inputBaseStyles, inputHoverStyles, inputFocusStyles} =
|
||||
React.useMemo(() => {
|
||||
const base: TextStyle[] = []
|
||||
const hover: TextStyle[] = [
|
||||
{
|
||||
borderColor: t.palette.contrast_300,
|
||||
},
|
||||
]
|
||||
const focus: TextStyle[] = [
|
||||
{
|
||||
backgroundColor: t.palette.contrast_50,
|
||||
borderColor: t.palette.primary_500,
|
||||
},
|
||||
]
|
||||
const {inputBaseStyles, inputHoverStyles, inputFocusStyles} =
|
||||
React.useMemo(() => {
|
||||
const base: TextStyle[] = []
|
||||
const hover: TextStyle[] = [
|
||||
{
|
||||
borderColor: t.palette.contrast_300,
|
||||
},
|
||||
]
|
||||
const focus: TextStyle[] = [
|
||||
{
|
||||
backgroundColor: t.palette.contrast_50,
|
||||
borderColor: t.palette.primary_500,
|
||||
},
|
||||
]
|
||||
|
||||
if (hasIcon) {
|
||||
base.push({
|
||||
paddingLeft: 40,
|
||||
})
|
||||
}
|
||||
if (hasIcon) {
|
||||
base.push({
|
||||
paddingLeft: 40,
|
||||
})
|
||||
}
|
||||
|
||||
if (hasError) {
|
||||
base.push({
|
||||
backgroundColor:
|
||||
t.name === 'light' ? t.palette.negative_25 : t.palette.negative_900,
|
||||
borderColor:
|
||||
t.name === 'light'
|
||||
? t.palette.negative_300
|
||||
: t.palette.negative_800,
|
||||
})
|
||||
hover.push({
|
||||
borderColor: tokens.color.red_500,
|
||||
})
|
||||
focus.push({
|
||||
backgroundColor:
|
||||
t.name === 'light' ? t.palette.negative_25 : t.palette.negative_900,
|
||||
borderColor: tokens.color.red_500,
|
||||
})
|
||||
}
|
||||
if (hasError) {
|
||||
base.push({
|
||||
backgroundColor:
|
||||
t.name === 'light'
|
||||
? t.palette.negative_25
|
||||
: t.palette.negative_900,
|
||||
borderColor:
|
||||
t.name === 'light'
|
||||
? t.palette.negative_300
|
||||
: t.palette.negative_800,
|
||||
})
|
||||
hover.push({
|
||||
borderColor: tokens.color.red_500,
|
||||
})
|
||||
focus.push({
|
||||
backgroundColor:
|
||||
t.name === 'light'
|
||||
? t.palette.negative_25
|
||||
: t.palette.negative_900,
|
||||
borderColor: tokens.color.red_500,
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
inputBaseStyles: base,
|
||||
inputHoverStyles: hover,
|
||||
inputFocusStyles: focus,
|
||||
}
|
||||
}, [t, hasError, hasIcon])
|
||||
return {
|
||||
inputBaseStyles: base,
|
||||
inputHoverStyles: hover,
|
||||
inputFocusStyles: focus,
|
||||
}
|
||||
}, [t, hasError, hasIcon])
|
||||
|
||||
const {iconBaseStyles, iconHoverStyles, iconFocusStyles} =
|
||||
React.useMemo(() => {
|
||||
const base: TextStyle[] = []
|
||||
const hover: TextStyle[] = [
|
||||
{
|
||||
color: t.palette.contrast_500,
|
||||
},
|
||||
]
|
||||
const focus: TextStyle[] = [
|
||||
{
|
||||
color: t.palette.primary_500,
|
||||
},
|
||||
]
|
||||
const {iconBaseStyles, iconHoverStyles, iconFocusStyles} =
|
||||
React.useMemo(() => {
|
||||
const base: TextStyle[] = []
|
||||
const hover: TextStyle[] = [
|
||||
{
|
||||
color: t.palette.contrast_500,
|
||||
},
|
||||
]
|
||||
const focus: TextStyle[] = [
|
||||
{
|
||||
color: t.palette.primary_500,
|
||||
},
|
||||
]
|
||||
|
||||
if (hasError) {
|
||||
base.push({
|
||||
color: t.palette.negative_400,
|
||||
})
|
||||
hover.push({
|
||||
color: t.palette.negative_500,
|
||||
})
|
||||
focus.push({
|
||||
color: t.palette.negative_500,
|
||||
})
|
||||
}
|
||||
if (hasError) {
|
||||
base.push({
|
||||
color: t.palette.negative_400,
|
||||
})
|
||||
hover.push({
|
||||
color: t.palette.negative_500,
|
||||
})
|
||||
focus.push({
|
||||
color: t.palette.negative_500,
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
iconBaseStyles: base,
|
||||
iconHoverStyles: hover,
|
||||
iconFocusStyles: focus,
|
||||
}
|
||||
}, [t, hasError])
|
||||
return {
|
||||
iconBaseStyles: base,
|
||||
iconHoverStyles: hover,
|
||||
iconFocusStyles: focus,
|
||||
}
|
||||
}, [t, hasError])
|
||||
|
||||
const handleOnChange = React.useCallback(
|
||||
(e: any) => {
|
||||
const value = e.currentTarget.value
|
||||
onChange(value)
|
||||
setValue(value)
|
||||
},
|
||||
[onChange, setValue],
|
||||
)
|
||||
const handleOnChange = React.useCallback(
|
||||
(e: any) => {
|
||||
const value = e.currentTarget.value
|
||||
onChange(value)
|
||||
setValue(value)
|
||||
},
|
||||
[onChange, setValue],
|
||||
)
|
||||
|
||||
return (
|
||||
<View style={[atoms.relative, atoms.w_full]}>
|
||||
{label && (
|
||||
<Text
|
||||
nativeID={labelId}
|
||||
style={[
|
||||
atoms.text_sm,
|
||||
atoms.font_bold,
|
||||
t.atoms.text_contrast_600,
|
||||
atoms.mb_sm,
|
||||
]}>
|
||||
{label}
|
||||
</Text>
|
||||
)}
|
||||
|
||||
<TextInput
|
||||
{...props}
|
||||
value={value}
|
||||
testID={testID}
|
||||
aria-labelledby={labelId}
|
||||
aria-label={label}
|
||||
accessibilityLabel={accessibilityLabel}
|
||||
accessibilityHint={accessibilityHint}
|
||||
placeholderTextColor={t.atoms.text_contrast_400.color}
|
||||
onFocus={onFocus}
|
||||
onBlur={onBlur}
|
||||
onChange={handleOnChange}
|
||||
{...web({
|
||||
onMouseEnter: onHoverIn,
|
||||
onMouseLeave: onHoverOut,
|
||||
})}
|
||||
style={[
|
||||
t.atoms.bg_contrast_50,
|
||||
atoms.w_full,
|
||||
atoms.px_lg,
|
||||
atoms.py_md,
|
||||
atoms.rounded_sm,
|
||||
atoms.text_md,
|
||||
t.atoms.text,
|
||||
web({
|
||||
paddingTop: atoms.pt_md.paddingTop - 1,
|
||||
}),
|
||||
{borderColor: 'transparent', paddingRight: suffixPadding},
|
||||
{borderWidth: 2, lineHeight: atoms.text_md.lineHeight * 1.1875},
|
||||
...inputBaseStyles,
|
||||
...(hovered ? inputHoverStyles : []),
|
||||
...(focused ? inputFocusStyles : []),
|
||||
...(Array.isArray(props.style) ? props.style : [props.style]),
|
||||
]}
|
||||
/>
|
||||
|
||||
{Icon && (
|
||||
<View
|
||||
style={[
|
||||
atoms.absolute,
|
||||
atoms.inset_0,
|
||||
atoms.align_center,
|
||||
atoms.justify_center,
|
||||
atoms.pl_md,
|
||||
{right: 'auto'},
|
||||
]}>
|
||||
<Icon
|
||||
return (
|
||||
<View style={[atoms.relative, atoms.w_full]}>
|
||||
{label && (
|
||||
<Text
|
||||
nativeID={labelId}
|
||||
style={[
|
||||
{
|
||||
color:
|
||||
t.name === 'light'
|
||||
? t.palette.contrast_400
|
||||
: t.palette.contrast_700,
|
||||
},
|
||||
{
|
||||
width: 20,
|
||||
pointerEvents: 'none',
|
||||
},
|
||||
...iconBaseStyles,
|
||||
...(hovered ? iconHoverStyles : []),
|
||||
...(focused ? iconFocusStyles : []),
|
||||
]}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
atoms.text_sm,
|
||||
atoms.font_bold,
|
||||
t.atoms.text_contrast_600,
|
||||
atoms.mb_sm,
|
||||
]}>
|
||||
{label}
|
||||
</Text>
|
||||
)}
|
||||
|
||||
{Suffix && (
|
||||
<View
|
||||
onLayout={handleSuffixLayout}
|
||||
<Input
|
||||
{...props}
|
||||
value={value}
|
||||
testID={testID}
|
||||
aria-labelledby={labelId}
|
||||
aria-label={label}
|
||||
accessibilityLabel={accessibilityLabel}
|
||||
accessibilityHint={accessibilityHint}
|
||||
placeholderTextColor={t.atoms.text_contrast_400.color}
|
||||
onFocus={onFocus}
|
||||
onBlur={onBlur}
|
||||
onChange={handleOnChange}
|
||||
{...web({
|
||||
onMouseEnter: onHoverIn,
|
||||
onMouseLeave: onHoverOut,
|
||||
})}
|
||||
style={[
|
||||
atoms.absolute,
|
||||
atoms.inset_0,
|
||||
atoms.align_center,
|
||||
atoms.justify_center,
|
||||
atoms.pr_lg,
|
||||
{left: 'auto'},
|
||||
]}>
|
||||
<Suffix />
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
)
|
||||
t.atoms.bg_contrast_50,
|
||||
atoms.w_full,
|
||||
atoms.px_lg,
|
||||
atoms.py_md,
|
||||
atoms.rounded_sm,
|
||||
atoms.text_md,
|
||||
t.atoms.text,
|
||||
web({
|
||||
paddingTop: atoms.pt_md.paddingTop - 1,
|
||||
}),
|
||||
{borderColor: 'transparent', paddingRight: suffixPadding},
|
||||
{borderWidth: 2, lineHeight: atoms.text_md.lineHeight * 1.1875},
|
||||
...inputBaseStyles,
|
||||
...(hovered ? inputHoverStyles : []),
|
||||
...(focused ? inputFocusStyles : []),
|
||||
...(Array.isArray(props.style) ? props.style : [props.style]),
|
||||
]}
|
||||
/>
|
||||
|
||||
{Icon && (
|
||||
<View
|
||||
style={[
|
||||
atoms.absolute,
|
||||
atoms.inset_0,
|
||||
atoms.align_center,
|
||||
atoms.justify_center,
|
||||
atoms.pl_md,
|
||||
{right: 'auto'},
|
||||
]}>
|
||||
<Icon
|
||||
style={[
|
||||
{
|
||||
color:
|
||||
t.name === 'light'
|
||||
? t.palette.contrast_400
|
||||
: t.palette.contrast_700,
|
||||
},
|
||||
{
|
||||
width: 20,
|
||||
pointerEvents: 'none',
|
||||
},
|
||||
...iconBaseStyles,
|
||||
...(hovered ? iconHoverStyles : []),
|
||||
...(focused ? iconFocusStyles : []),
|
||||
]}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{Suffix && (
|
||||
<View
|
||||
onLayout={handleSuffixLayout}
|
||||
style={[
|
||||
atoms.absolute,
|
||||
atoms.inset_0,
|
||||
atoms.align_center,
|
||||
atoms.justify_center,
|
||||
atoms.pr_lg,
|
||||
{left: 'auto'},
|
||||
]}>
|
||||
<Suffix />
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export const InputText = createTextInput(TextInput)
|
||||
|
||||
@@ -56,6 +56,14 @@ export function Dialogs() {
|
||||
<View style={[a.relative, a.gap_md, a.w_full]}>
|
||||
<H3 nativeID="dialog-title">Dialog</H3>
|
||||
<P nativeID="dialog-description">Description</P>
|
||||
<Dialog.InputText
|
||||
testID=""
|
||||
value=""
|
||||
onChange={() => {}}
|
||||
placeholder="Type here"
|
||||
accessibilityLabel="Type"
|
||||
accessibilityHint="Type"
|
||||
/>
|
||||
<View style={{height: 1000}} />
|
||||
<View style={[a.flex_row, a.justify_end]}>
|
||||
<Button
|
||||
|
||||
Reference in New Issue
Block a user