acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Remove old input

Browse Source
This commit is contained in:
Eric Bailey
2024-01-18 11:19:23 -06:00
parent 43dc77491e
commit 7faaf1996a
2 changed files with 0 additions and 277 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/forms/InputText.tsx
-248
View File
@@ -1,248 +0,0 @@
import React from 'react'
import {
View,
TextInput,
TextInputProps,
TextStyle,
LayoutChangeEvent,
} from 'react-native'
import {useTheme, atoms as a, web, tokens} from '#/alf'
import {Text} from '#/components/Typography'
import {useInteractionState} from '#/components/hooks/useInteractionState'
import {BaseProps} from '#/components/forms/types'
type Props = BaseProps &
Omit<TextInputProps, 'placeholder'> & {
placeholder?: Required<TextInputProps>['placeholder']
icon?: React.FunctionComponent<any>
suffix?: React.FunctionComponent<any>
}
export function createTextInput(Input: typeof TextInput) {
return function InputText({
value: initialValue,
onChange,
testID,
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 {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 (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])
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,
})
}
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],
)
return (
<View style={[a.relative, a.w_full]}>
{label && (
<Text
nativeID={labelId}
style={[
a.text_sm,
a.font_bold,
t.atoms.text_contrast_600,
a.mb_sm,
]}>
{label}
</Text>
)}
<Input
accessibilityHint={undefined}
{...props}
value={value}
testID={testID}
aria-labelledby={labelId}
aria-label={label}
aria-invalid={hasError}
aria-placeholder={props.placeholder}
accessibilityLabel={label}
placeholderTextColor={t.atoms.text_contrast_400.color}
onFocus={onFocus}
onBlur={onBlur}
onChange={handleOnChange}
{...web({
onMouseEnter: onHoverIn,
onMouseLeave: onHoverOut,
})}
style={[
t.atoms.bg_contrast_50,
a.w_full,
a.px_lg,
a.py_md,
a.rounded_sm,
a.text_md,
t.atoms.text,
web({
paddingTop: a.pt_md.paddingTop - 1,
}),
{borderColor: 'transparent', paddingRight: suffixPadding},
{borderWidth: 2, lineHeight: a.text_md.lineHeight * 1.1875},
...inputBaseStyles,
...(hovered ? inputHoverStyles : []),
...(focused ? inputFocusStyles : []),
...(Array.isArray(props.style) ? props.style : [props.style]),
]}
/>
{Icon && (
<View
style={[
a.absolute,
a.inset_0,
a.align_center,
a.justify_center,
a.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={[
a.absolute,
a.inset_0,
a.align_center,
a.justify_center,
a.pr_lg,
{left: 'auto'},
]}>
<Suffix />
</View>
)}
</View>
)
}
}
export const InputText = createTextInput(TextInput)
src/view/screens/Storybook/Forms.tsx
-29
View File
@@ -3,10 +3,8 @@ import {View} from 'react-native'
import {atoms as a} from '#/alf'
import {H1, H3} from '#/components/Typography'
import {InputText} from '#/components/forms/InputText'
import TextField from '#/components/forms/TextField'
import {InputDate, utils} from '#/components/forms/InputDate'
import {InputGroup} from '#/components/forms/InputGroup'
import Toggle from '#/components/forms/Toggle'
import ToggleButton from '#/components/forms/ToggleButton'
import {Button} from '#/components/Button'
@@ -67,33 +65,6 @@ export function Forms() {
/>
</View>
<View style={[a.gap_md, a.align_start, a.w_full]}>
<H3>InputGroup (WIP)</H3>
<InputGroup>
<InputText
testID="input"
label="Input"
placeholder="Type here"
value=""
onChange={text => console.log(text)}
/>
<InputText
testID="input"
label="Input"
placeholder="Type here"
value=""
onChange={text => console.log(text)}
/>
<InputText
testID="input"
label="Input"
placeholder="Type here"
value=""
onChange={text => console.log(text)}
/>
</InputGroup>
</View>
<View style={[a.gap_md, a.align_start, a.w_full]}>
<H3>Toggles</H3>