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

Date inputs

Browse Source
This commit is contained in:
Eric Bailey
2024-01-10 14:33:11 -06:00
parent 214254b410
commit 1ea20b3a05
9 changed files with 476 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
bskyweb/templates/base.html
+4
View File
@@ -39,6 +39,10 @@
height: calc(100% + env(safe-area-inset-top));
}
input::-webkit-date-and-time-value {
text-align: left;
}
/* Color theming */
:root {
--text: black;
src/view/com/forms/InputDate/index.android.tsx
+162
View File
@@ -0,0 +1,162 @@
import React from 'react'
import {View, TextInputProps, TextStyle, Pressable} from 'react-native'
import DateTimePicker, {
BaseProps as DateTimePickerProps,
} from '@react-native-community/datetimepicker'
import {Logo} from '#/view/icons/Logo'
import {useTheme, atoms, tokens} from '#/alf'
import {Text} from '#/view/com/Typography'
import {useInteractionState} from '#/view/com/util/hooks/useInteractionState'
import {BaseProps} from '#/view/com/forms/types'
import {
localizeDate,
toSimpleDateString,
} from '#/view/com/forms/InputDate/utils'
type Props = Omit<TextInputProps, 'placeholder' | 'value'> & BaseProps
export * as utils from '#/view/com/forms/InputDate/utils'
export function InputDate({
value: initialValue,
onChange,
testID,
label,
hasError,
accessibilityLabel,
accessibilityHint,
...props
}: Props) {
const labelId = React.useId()
const t = useTheme()
const [open, setOpen] = React.useState(false)
const [value, setValue] = React.useState(initialValue)
const {state: focused, onIn: onFocus, onOut: onBlur} = useInteractionState()
const {inputStyles, iconStyles} = React.useMemo(() => {
const input: TextStyle[] = [
{
paddingLeft: 40,
},
]
const icon: TextStyle[] = []
if (hasError) {
input.push({
borderColor: tokens.color.red_200,
})
icon.push({
color: tokens.color.red_400,
})
}
if (focused) {
input.push({
borderColor: t.atoms.border_contrast_500.borderColor,
})
if (hasError) {
input.push({
borderColor: tokens.color.red_500,
})
}
}
return {inputStyles: input, iconStyles: icon}
}, [t, focused, hasError])
const onChangeInternal = React.useCallback<
Required<DateTimePickerProps>['onChange']
>(
(_event, date) => {
setOpen(false)
if (date) {
const formatted = toSimpleDateString(date)
onChange(formatted)
setValue(formatted)
}
},
[onChange, setOpen, setValue],
)
return (
<View style={[atoms.relative, atoms.w_full]}>
{label && (
<Text
nativeID={labelId}
style={[
atoms.text_sm,
atoms.font_semibold,
t.atoms.text_contrast_700,
atoms.mb_sm,
]}>
{label}
</Text>
)}
<Pressable
{...props}
aria-labelledby={labelId}
aria-label={label}
accessibilityLabelledBy={labelId}
accessibilityLabel={accessibilityLabel}
accessibilityHint={accessibilityHint}
onPress={() => setOpen(true)}
onFocus={onFocus}
onBlur={onBlur}
style={[
{
paddingTop: atoms.pt_md.paddingTop + 2,
},
atoms.w_full,
atoms.px_lg,
atoms.pb_md,
atoms.rounded_sm,
t.atoms.bg_contrast_100,
...inputStyles,
]}>
<Text style={[atoms.text_md, t.atoms.text]}>{localizeDate(value)}</Text>
</Pressable>
<View
style={[
atoms.absolute,
atoms.inset_0,
atoms.align_center,
atoms.justify_center,
atoms.pl_md,
{right: 'auto'},
]}>
<Logo
style={[
{color: t.atoms.border_contrast_500.borderColor},
{
width: 20,
pointerEvents: 'none',
},
...iconStyles,
]}
/>
</View>
{open && (
<DateTimePicker
testID={`${testID}-datepicker`}
mode="date"
timeZoneName={'Etc/UTC'}
display="spinner"
// @ts-ignore applies in iOS only -prf
themeVariant={t.name === 'dark' ? 'dark' : 'light'}
value={new Date(value)}
onChange={onChangeInternal}
accessibilityLabel={accessibilityLabel}
accessibilityHint={accessibilityHint}
aria-labelledby={labelId}
aria-label={label}
/>
)}
</View>
)
}
src/view/com/forms/InputDate/index.tsx
+77
View File
@@ -0,0 +1,77 @@
import React from 'react'
import {View, TextInputProps} from 'react-native'
import DateTimePicker, {
DateTimePickerEvent,
} from '@react-native-community/datetimepicker'
import {useTheme, atoms} from '#/alf'
import {Text} from '#/view/com/Typography'
import {BaseProps} from '#/view/com/forms/types'
import {toSimpleDateString} from '#/view/com/forms/InputDate/utils'
type Props = Omit<TextInputProps, 'placeholder' | 'value'> & BaseProps
export * as utils from '#/view/com/forms/InputDate/utils'
/**
* Date-only input. Accepts a date in the format YYYY-MM-DD, and reports date
* changes in the same format.
*
* For dates of unknown format, convert with the
* `utils.toSimpleDateString(Date)` export of this file.
*/
export function InputDate({
value: initialValue,
onChange,
testID,
label,
accessibilityLabel,
accessibilityHint,
}: Props) {
const labelId = React.useId()
const t = useTheme()
const [value, setValue] = React.useState(initialValue)
const onChangeInternal = React.useCallback(
(event: DateTimePickerEvent, date: Date | undefined) => {
if (date) {
const formatted = toSimpleDateString(date)
onChange(formatted)
setValue(formatted)
}
},
[onChange],
)
return (
<View style={[atoms.relative, atoms.w_full]}>
{label && (
<Text
nativeID={labelId}
style={[
atoms.text_sm,
atoms.font_semibold,
t.atoms.text_contrast_700,
atoms.mb_sm,
]}>
{label}
</Text>
)}
<DateTimePicker
testID={`${testID}-datepicker`}
mode="date"
timeZoneName={'Etc/UTC'}
display="spinner"
// @ts-ignore applies in iOS only -prf
themeVariant={t.name === 'dark' ? 'dark' : 'light'}
value={new Date(value)}
onChange={onChangeInternal}
accessibilityLabel={accessibilityLabel}
accessibilityHint={accessibilityHint}
aria-labelledby={labelId}
aria-label={label}
/>
</View>
)
}
src/view/com/forms/InputDate/index.web.tsx
+154
View File
@@ -0,0 +1,154 @@
import React from 'react'
import {View, TextStyle} from 'react-native'
// @ts-ignore
import {unstable_createElement} from 'react-native-web'
import {Logo} from '#/view/icons/Logo'
import {useTheme, atoms, tokens} from '#/alf'
import {Text} from '#/view/com/Typography'
import {useInteractionState} from '#/view/com/util/hooks/useInteractionState'
import {BaseProps} from '#/view/com/forms/types'
import {toSimpleDateString} from '#/view/com/forms/InputDate/utils'
type Props = BaseProps
export * as utils from '#/view/com/forms/InputDate/utils'
export function InputDate({
label,
hasError,
testID,
value: initialValue,
onChange,
accessibilityLabel,
accessibilityHint,
...props
}: Props) {
const labelId = React.useId()
const t = useTheme()
const [value, setValue] = React.useState<string>(initialValue)
const {
state: hovered,
onIn: onHoverIn,
onOut: onHoverOut,
} = useInteractionState()
const {state: focused, onIn: onFocus, onOut: onBlur} = useInteractionState()
const {inputStyles, iconStyles} = React.useMemo(() => {
const input: TextStyle[] = [
{
paddingLeft: 40,
},
]
const icon: TextStyle[] = []
if (hasError) {
input.push({
borderColor: tokens.color.red_200,
})
icon.push({
color: tokens.color.red_400,
})
}
if (hovered || focused) {
input.push({
borderColor: t.atoms.border_contrast_500.borderColor,
})
if (hasError) {
input.push({
borderColor: tokens.color.red_500,
})
}
}
return {inputStyles: input, iconStyles: icon}
}, [t, hovered, focused, hasError])
const handleOnChange = React.useCallback(
(e: any) => {
const date = e.currentTarget.valueAsDate
if (date) {
const formatted = toSimpleDateString(date)
onChange(formatted)
setValue(formatted)
}
},
[onChange, setValue],
)
return (
<View style={[atoms.relative, atoms.w_full]}>
{label && (
<Text
nativeID={labelId}
style={[
atoms.text_sm,
atoms.font_semibold,
t.atoms.text_contrast_700,
atoms.mb_sm,
]}>
{label}
</Text>
)}
{unstable_createElement('input', {
...props,
testID: `${testID}-datepicker`,
'aria-labelledby': labelId,
'aria-label': label,
accessibilityLabel: accessibilityLabel,
accessibilityHint: accessibilityHint,
type: 'date',
value: value,
onFocus: onFocus,
onBlur: onBlur,
onChange: handleOnChange,
onMouseEnter: onHoverIn,
onMouseLeave: onHoverOut,
style: [
{
outline: 0,
border: 0,
appearance: 'none',
boxSizing: 'border-box',
lineHeight: atoms.text_md.lineHeight * 1.1875,
paddingTop: atoms.pt_md.paddingTop - 1,
},
atoms.w_full,
atoms.px_lg,
atoms.pb_md,
atoms.rounded_sm,
atoms.text_md,
t.atoms.bg_contrast_100,
t.atoms.text,
...inputStyles,
],
})}
<View
style={[
atoms.absolute,
atoms.inset_0,
atoms.align_center,
atoms.justify_center,
atoms.pl_md,
{right: 'auto'},
]}>
<Logo
style={[
{color: t.atoms.border_contrast_500.borderColor},
{
width: 20,
pointerEvents: 'none',
},
...iconStyles,
]}
/>
</View>
</View>
)
}
src/view/com/forms/InputDate/utils.ts
+16
View File
@@ -0,0 +1,16 @@
import {getLocales} from 'expo-localization'
const LOCALE = getLocales()[0]
// we need the date in the form yyyy-MM-dd to pass to the input
export function toSimpleDateString(date: Date | string): string {
const _date = typeof date === 'string' ? new Date(date) : date
return _date.toISOString().split('T')[0]
}
export function localizeDate(date: Date | string): string {
const _date = typeof date === 'string' ? new Date(date) : date
return new Intl.DateTimeFormat(LOCALE.languageTag, {
timeZone: 'UTC',
}).format(_date)
}
src/view/com/forms/types.ts
+22
View File
@@ -0,0 +1,22 @@
import {AccessibilityProps, TextInputProps} from 'react-native'
export type RequiredAccessibilityProps = Required<AccessibilityProps>
export type BaseProps<T = string> = Omit<
AccessibilityProps,
'accessibilityLabel' | 'accessibilityHint'
> &
Pick<
RequiredAccessibilityProps,
'accessibilityLabel' | 'accessibilityHint'
> & {
value: T
onChange: (value: T) => void
testID: string
label?: string
hasError?: boolean
/**
* **NOTE:** Available only on web
*/
autoFocus?: TextInputProps['autoFocus']
}
src/view/com/util/hooks/useInteractionState.ts
+21
View File
@@ -0,0 +1,21 @@
import React from 'react'
export function useInteractionState() {
const [state, setState] = React.useState(false)
const onIn = React.useCallback(() => {
setState(true)
}, [setState])
const onOut = React.useCallback(() => {
setState(false)
}, [setState])
return React.useMemo(
() => ({
state,
onIn,
onOut,
}),
[state, onIn, onOut],
)
}
src/view/screens/DebugNew.tsx
+16
View File
@@ -10,6 +10,7 @@ import {Button, ButtonText} from '#/view/com/Button'
import {Link} from '#/view/com/Link'
import {Text, H1, H2, H3, H4, H5, H6} from '#/view/com/Typography'
import {InputText} from '#/view/com/forms/InputText'
import {InputDate, utils} from '#/view/com/forms/InputDate'
import {Logo} from '#/view/icons/Logo'
function ThemeSelector() {
@@ -226,6 +227,21 @@ function Forms() {
icon={Logo}
suffix={() => <Text>.bksy.social</Text>}
/>
<InputDate
testID="date"
value={'2001-01-01'}
onChange={date => console.log(date)}
accessibilityLabel="Date"
accessibilityHint="Enter a date"
/>
<InputDate
testID="date"
value={utils.toSimpleDateString(new Date())}
onChange={date => console.log(date)}
accessibilityLabel="Date"
accessibilityHint="Enter a date"
/>
</View>
)
}
web/index.html
+4
View File
@@ -43,6 +43,10 @@
height: calc(100% + env(safe-area-inset-top));
}
input::-webkit-date-and-time-value {
text-align: left;
}
/* Color theming */
:root {
--text: black;