[Threadgate] Tweak threadgate buttons (#9173)
* tweak in-post threadgate button * tweak composer threadgate button * reduce date length slightly * pressed styles * make date length depend on breakpoint * add chevron to label btn * add tiny chevron, special-case button icon width * [Threadgate] Add hint (#9350) * get tooltip working on web * add compatibility layer for working in iOS sheets * add timeout to profile tooltip now that it appears instantly * rm debug code * Update ThreadgateBtn.tsx Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> * remeasure when keyboard changes --------- Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> * fix types * [Threadgate] Refresh dialog (#9342) * wip new ui * update threadgate dialog with new designs * restore nobody option * relayout android sheet when ratio changes * fix ratio changing case in bottom sheet * timebox reached, use setTimeout * update panel styles * missing imports * extract out Panel * tweak layout animation * fix icon color * use same color mechamism for icon as text * restore the header * refreshed toggle styles (#9343) * [Threadgate] Persist settings (#9341) * add persist toggle to threadgate dialog * move state back down * sort out spacing * wire up query * @surfdude29 tweaks * use tiny chevron in WhoCanReply * wait for prefetch before opening * move Panel into the Toggle namespace * default -> pref * use medium date length * rm hover state from web selects, fix border radius * fix key issue in Selects --------- Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>
This commit is contained in:
Samuel Newman
@@ -0,0 +1,120 @@
|
||||
import {createContext, useContext} from 'react'
|
||||
import {View, type ViewStyle} from 'react-native'
|
||||
|
||||
import {atoms as a, tokens, useTheme} from '#/alf'
|
||||
import {type Props as SVGIconProps} from '#/components/icons/common'
|
||||
import {Text} from '#/components/Typography'
|
||||
|
||||
const PanelContext = createContext<{active: boolean}>({active: false})
|
||||
|
||||
/**
|
||||
* A nice container for Toggles. See the Threadgate dialog for an example.
|
||||
*/
|
||||
export function Panel({
|
||||
children,
|
||||
active = false,
|
||||
adjacent,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
active?: boolean
|
||||
adjacent?: 'leading' | 'trailing' | 'both'
|
||||
}) {
|
||||
const t = useTheme()
|
||||
|
||||
const leading = adjacent === 'leading' || adjacent === 'both'
|
||||
const trailing = adjacent === 'trailing' || adjacent === 'both'
|
||||
const rounding = {
|
||||
borderTopLeftRadius: leading
|
||||
? tokens.borderRadius.xs
|
||||
: tokens.borderRadius.md,
|
||||
borderTopRightRadius: leading
|
||||
? tokens.borderRadius.xs
|
||||
: tokens.borderRadius.md,
|
||||
borderBottomLeftRadius: trailing
|
||||
? tokens.borderRadius.xs
|
||||
: tokens.borderRadius.md,
|
||||
borderBottomRightRadius: trailing
|
||||
? tokens.borderRadius.xs
|
||||
: tokens.borderRadius.md,
|
||||
} satisfies ViewStyle
|
||||
|
||||
return (
|
||||
<View
|
||||
style={[
|
||||
a.w_full,
|
||||
a.flex_row,
|
||||
a.align_center,
|
||||
a.gap_sm,
|
||||
a.px_md,
|
||||
a.py_md,
|
||||
{minHeight: tokens.space._2xl + tokens.space.md * 2},
|
||||
rounding,
|
||||
active
|
||||
? {backgroundColor: t.palette.primary_50}
|
||||
: t.atoms.bg_contrast_50,
|
||||
]}>
|
||||
<PanelContext value={{active}}>{children}</PanelContext>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export function PanelText({
|
||||
children,
|
||||
icon,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
icon?: React.ComponentType<SVGIconProps>
|
||||
}) {
|
||||
const t = useTheme()
|
||||
const ctx = useContext(PanelContext)
|
||||
|
||||
const text = (
|
||||
<Text
|
||||
style={[
|
||||
a.text_md,
|
||||
a.flex_1,
|
||||
ctx.active
|
||||
? [a.font_medium, t.atoms.text]
|
||||
: [t.atoms.text_contrast_medium],
|
||||
]}>
|
||||
{children}
|
||||
</Text>
|
||||
)
|
||||
|
||||
if (icon) {
|
||||
// eslint-disable-next-line bsky-internal/avoid-unwrapped-text
|
||||
return (
|
||||
<View style={[a.flex_row, a.align_center, a.gap_xs, a.flex_1]}>
|
||||
<PanelIcon icon={icon} />
|
||||
{text}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
return text
|
||||
}
|
||||
|
||||
export function PanelIcon({
|
||||
icon: Icon,
|
||||
}: {
|
||||
icon: React.ComponentType<SVGIconProps>
|
||||
}) {
|
||||
const t = useTheme()
|
||||
const ctx = useContext(PanelContext)
|
||||
return (
|
||||
<Icon
|
||||
style={[
|
||||
ctx.active ? t.atoms.text : t.atoms.text_contrast_medium,
|
||||
a.flex_shrink_0,
|
||||
]}
|
||||
size="md"
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* A group of panels. TODO: auto-leading/trailing
|
||||
*/
|
||||
export function PanelGroup({children}: {children: React.ReactNode}) {
|
||||
return <View style={[a.w_full, a.gap_2xs]}>{children}</View>
|
||||
}
|
||||
@@ -0,0 +1,550 @@
|
||||
import {createContext, useCallback, useContext, useMemo} from 'react'
|
||||
import {
|
||||
Pressable,
|
||||
type PressableProps,
|
||||
type StyleProp,
|
||||
View,
|
||||
type ViewStyle,
|
||||
} from 'react-native'
|
||||
import Animated, {Easing, LinearTransition} from 'react-native-reanimated'
|
||||
|
||||
import {HITSLOP_10} from '#/lib/constants'
|
||||
import {useHaptics} from '#/lib/haptics'
|
||||
import {isNative} from '#/platform/detection'
|
||||
import {
|
||||
atoms as a,
|
||||
native,
|
||||
platform,
|
||||
type TextStyleProp,
|
||||
useTheme,
|
||||
type ViewStyleProp,
|
||||
} from '#/alf'
|
||||
import {useInteractionState} from '#/components/hooks/useInteractionState'
|
||||
import {CheckThick_Stroke2_Corner0_Rounded as Checkmark} from '#/components/icons/Check'
|
||||
import {Text} from '#/components/Typography'
|
||||
|
||||
export * from './Panel'
|
||||
|
||||
export type ItemState = {
|
||||
name: string
|
||||
selected: boolean
|
||||
disabled: boolean
|
||||
isInvalid: boolean
|
||||
hovered: boolean
|
||||
pressed: boolean
|
||||
focused: boolean
|
||||
}
|
||||
|
||||
const ItemContext = createContext<ItemState>({
|
||||
name: '',
|
||||
selected: false,
|
||||
disabled: false,
|
||||
isInvalid: false,
|
||||
hovered: false,
|
||||
pressed: false,
|
||||
focused: false,
|
||||
})
|
||||
ItemContext.displayName = 'ToggleItemContext'
|
||||
|
||||
const GroupContext = createContext<{
|
||||
values: string[]
|
||||
disabled: boolean
|
||||
type: 'radio' | 'checkbox'
|
||||
maxSelectionsReached: boolean
|
||||
setFieldValue: (props: {name: string; value: boolean}) => void
|
||||
}>({
|
||||
type: 'checkbox',
|
||||
values: [],
|
||||
disabled: false,
|
||||
maxSelectionsReached: false,
|
||||
setFieldValue: () => {},
|
||||
})
|
||||
GroupContext.displayName = 'ToggleGroupContext'
|
||||
|
||||
export type GroupProps = React.PropsWithChildren<{
|
||||
type?: 'radio' | 'checkbox'
|
||||
values: string[]
|
||||
maxSelections?: number
|
||||
disabled?: boolean
|
||||
onChange: (value: string[]) => void
|
||||
label: string
|
||||
style?: StyleProp<ViewStyle>
|
||||
}>
|
||||
|
||||
export type ItemProps = ViewStyleProp & {
|
||||
type?: 'radio' | 'checkbox'
|
||||
name: string
|
||||
label: string
|
||||
value?: boolean
|
||||
disabled?: boolean
|
||||
onChange?: (selected: boolean) => void
|
||||
isInvalid?: boolean
|
||||
children: ((props: ItemState) => React.ReactNode) | React.ReactNode
|
||||
hitSlop?: PressableProps['hitSlop']
|
||||
}
|
||||
|
||||
export function useItemContext() {
|
||||
return useContext(ItemContext)
|
||||
}
|
||||
|
||||
export function Group({
|
||||
children,
|
||||
values: providedValues,
|
||||
onChange,
|
||||
disabled = false,
|
||||
type = 'checkbox',
|
||||
maxSelections,
|
||||
label,
|
||||
style,
|
||||
}: GroupProps) {
|
||||
const groupRole = type === 'radio' ? 'radiogroup' : undefined
|
||||
const values = type === 'radio' ? providedValues.slice(0, 1) : providedValues
|
||||
|
||||
const setFieldValue = useCallback<
|
||||
(props: {name: string; value: boolean}) => void
|
||||
>(
|
||||
({name, value}) => {
|
||||
if (type === 'checkbox') {
|
||||
const pruned = values.filter(v => v !== name)
|
||||
const next = value ? pruned.concat(name) : pruned
|
||||
onChange(next)
|
||||
} else {
|
||||
onChange([name])
|
||||
}
|
||||
},
|
||||
[type, onChange, values],
|
||||
)
|
||||
|
||||
const maxReached = !!(
|
||||
type === 'checkbox' &&
|
||||
maxSelections &&
|
||||
values.length >= maxSelections
|
||||
)
|
||||
|
||||
const context = useMemo(
|
||||
() => ({
|
||||
values,
|
||||
type,
|
||||
disabled,
|
||||
maxSelectionsReached: maxReached,
|
||||
setFieldValue,
|
||||
}),
|
||||
[values, disabled, type, maxReached, setFieldValue],
|
||||
)
|
||||
|
||||
return (
|
||||
<GroupContext.Provider value={context}>
|
||||
<View
|
||||
style={[a.w_full, style]}
|
||||
role={groupRole}
|
||||
{...(groupRole === 'radiogroup'
|
||||
? {
|
||||
'aria-label': label,
|
||||
accessibilityLabel: label,
|
||||
accessibilityRole: groupRole,
|
||||
}
|
||||
: {})}>
|
||||
{children}
|
||||
</View>
|
||||
</GroupContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
export function Item({
|
||||
children,
|
||||
name,
|
||||
value = false,
|
||||
disabled: itemDisabled = false,
|
||||
onChange,
|
||||
isInvalid,
|
||||
style,
|
||||
type = 'checkbox',
|
||||
label,
|
||||
...rest
|
||||
}: ItemProps) {
|
||||
const {
|
||||
values: selectedValues,
|
||||
type: groupType,
|
||||
disabled: groupDisabled,
|
||||
setFieldValue,
|
||||
maxSelectionsReached,
|
||||
} = useContext(GroupContext)
|
||||
const {
|
||||
state: hovered,
|
||||
onIn: onHoverIn,
|
||||
onOut: onHoverOut,
|
||||
} = useInteractionState()
|
||||
const {
|
||||
state: pressed,
|
||||
onIn: onPressIn,
|
||||
onOut: onPressOut,
|
||||
} = useInteractionState()
|
||||
const {state: focused, onIn: onFocus, onOut: onBlur} = useInteractionState()
|
||||
const playHaptic = useHaptics()
|
||||
|
||||
const role = groupType === 'radio' ? 'radio' : type
|
||||
const selected = selectedValues.includes(name) || !!value
|
||||
const disabled =
|
||||
groupDisabled || itemDisabled || (!selected && maxSelectionsReached)
|
||||
|
||||
const onPress = useCallback(() => {
|
||||
playHaptic('Light')
|
||||
const next = !selected
|
||||
setFieldValue({name, value: next})
|
||||
onChange?.(next)
|
||||
}, [playHaptic, name, selected, onChange, setFieldValue])
|
||||
|
||||
const state = useMemo(
|
||||
() => ({
|
||||
name,
|
||||
selected,
|
||||
disabled: disabled ?? false,
|
||||
isInvalid: isInvalid ?? false,
|
||||
hovered,
|
||||
pressed,
|
||||
focused,
|
||||
}),
|
||||
[name, selected, disabled, hovered, pressed, focused, isInvalid],
|
||||
)
|
||||
|
||||
return (
|
||||
<ItemContext.Provider value={state}>
|
||||
<Pressable
|
||||
accessibilityHint={undefined} // optional
|
||||
hitSlop={HITSLOP_10}
|
||||
{...rest}
|
||||
disabled={disabled}
|
||||
aria-disabled={disabled ?? false}
|
||||
aria-checked={selected}
|
||||
aria-invalid={isInvalid}
|
||||
aria-label={label}
|
||||
role={role}
|
||||
accessibilityRole={role}
|
||||
accessibilityState={{
|
||||
disabled: disabled ?? false,
|
||||
selected: selected,
|
||||
}}
|
||||
accessibilityLabel={label}
|
||||
onPress={onPress}
|
||||
onHoverIn={onHoverIn}
|
||||
onHoverOut={onHoverOut}
|
||||
onPressIn={onPressIn}
|
||||
onPressOut={onPressOut}
|
||||
onFocus={onFocus}
|
||||
onBlur={onBlur}
|
||||
style={[a.flex_row, a.align_center, a.gap_sm, style]}>
|
||||
{typeof children === 'function' ? children(state) : children}
|
||||
</Pressable>
|
||||
</ItemContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
export function LabelText({
|
||||
children,
|
||||
style,
|
||||
}: React.PropsWithChildren<TextStyleProp>) {
|
||||
const t = useTheme()
|
||||
const {disabled} = useItemContext()
|
||||
return (
|
||||
<Text
|
||||
style={[
|
||||
a.font_semi_bold,
|
||||
a.leading_tight,
|
||||
a.user_select_none,
|
||||
{
|
||||
color: disabled
|
||||
? t.atoms.text_contrast_low.color
|
||||
: t.atoms.text_contrast_high.color,
|
||||
},
|
||||
native({
|
||||
paddingTop: 2,
|
||||
}),
|
||||
style,
|
||||
]}>
|
||||
{children}
|
||||
</Text>
|
||||
)
|
||||
}
|
||||
|
||||
// TODO(eric) refactor to memoize styles without knowledge of state
|
||||
export function createSharedToggleStyles({
|
||||
theme: t,
|
||||
hovered,
|
||||
selected,
|
||||
disabled,
|
||||
isInvalid,
|
||||
}: {
|
||||
theme: ReturnType<typeof useTheme>
|
||||
selected: boolean
|
||||
hovered: boolean
|
||||
focused: boolean
|
||||
disabled: boolean
|
||||
isInvalid: boolean
|
||||
}) {
|
||||
const base: ViewStyle[] = []
|
||||
const baseHover: ViewStyle[] = []
|
||||
const indicator: ViewStyle[] = []
|
||||
|
||||
if (selected) {
|
||||
base.push({
|
||||
backgroundColor: t.palette.primary_500,
|
||||
borderColor: t.palette.primary_500,
|
||||
})
|
||||
|
||||
if (hovered) {
|
||||
baseHover.push({
|
||||
backgroundColor: t.palette.primary_400,
|
||||
borderColor: t.palette.primary_400,
|
||||
})
|
||||
}
|
||||
} else {
|
||||
base.push({
|
||||
backgroundColor: t.palette.contrast_25,
|
||||
borderColor: t.palette.contrast_100,
|
||||
})
|
||||
|
||||
if (hovered) {
|
||||
baseHover.push({
|
||||
backgroundColor: t.palette.contrast_50,
|
||||
borderColor: t.palette.contrast_200,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
if (isInvalid) {
|
||||
base.push({
|
||||
backgroundColor: t.palette.negative_25,
|
||||
borderColor: t.palette.negative_300,
|
||||
})
|
||||
|
||||
if (hovered) {
|
||||
baseHover.push({
|
||||
backgroundColor: t.palette.negative_25,
|
||||
borderColor: t.palette.negative_600,
|
||||
})
|
||||
}
|
||||
|
||||
if (selected) {
|
||||
base.push({
|
||||
backgroundColor: t.palette.negative_500,
|
||||
borderColor: t.palette.negative_500,
|
||||
})
|
||||
|
||||
if (hovered) {
|
||||
baseHover.push({
|
||||
backgroundColor: t.palette.negative_400,
|
||||
borderColor: t.palette.negative_400,
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (disabled) {
|
||||
base.push({
|
||||
backgroundColor: t.palette.contrast_100,
|
||||
borderColor: t.palette.contrast_400,
|
||||
})
|
||||
|
||||
if (selected) {
|
||||
base.push({
|
||||
backgroundColor: t.palette.primary_100,
|
||||
borderColor: t.palette.contrast_400,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
baseStyles: base,
|
||||
baseHoverStyles: disabled ? [] : baseHover,
|
||||
indicatorStyles: indicator,
|
||||
}
|
||||
}
|
||||
|
||||
export function Checkbox() {
|
||||
const t = useTheme()
|
||||
const {selected, hovered, focused, disabled, isInvalid} = useItemContext()
|
||||
const {baseStyles, baseHoverStyles} = createSharedToggleStyles({
|
||||
theme: t,
|
||||
hovered,
|
||||
focused,
|
||||
selected,
|
||||
disabled,
|
||||
isInvalid,
|
||||
})
|
||||
return (
|
||||
<View
|
||||
style={[
|
||||
a.justify_center,
|
||||
a.align_center,
|
||||
t.atoms.border_contrast_high,
|
||||
a.transition_color,
|
||||
{
|
||||
borderWidth: 1,
|
||||
height: 24,
|
||||
width: 24,
|
||||
borderRadius: 6,
|
||||
},
|
||||
baseStyles,
|
||||
hovered ? baseHoverStyles : {},
|
||||
]}>
|
||||
{selected && <Checkmark width={14} fill={t.palette.white} />}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export function Switch() {
|
||||
const t = useTheme()
|
||||
const {selected, hovered, disabled, isInvalid} = useItemContext()
|
||||
const {baseStyles, baseHoverStyles, indicatorStyles} = useMemo(() => {
|
||||
const base: ViewStyle[] = []
|
||||
const baseHover: ViewStyle[] = []
|
||||
const indicator: ViewStyle[] = []
|
||||
|
||||
if (selected) {
|
||||
base.push({
|
||||
backgroundColor: t.palette.primary_500,
|
||||
})
|
||||
|
||||
if (hovered) {
|
||||
baseHover.push({
|
||||
backgroundColor: t.palette.primary_400,
|
||||
})
|
||||
}
|
||||
} else {
|
||||
base.push({
|
||||
backgroundColor: t.palette.contrast_200,
|
||||
})
|
||||
|
||||
if (hovered) {
|
||||
baseHover.push({
|
||||
backgroundColor: t.palette.contrast_100,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
if (isInvalid) {
|
||||
base.push({
|
||||
backgroundColor: t.palette.negative_200,
|
||||
})
|
||||
|
||||
if (hovered) {
|
||||
baseHover.push({
|
||||
backgroundColor: t.palette.negative_100,
|
||||
})
|
||||
}
|
||||
|
||||
if (selected) {
|
||||
base.push({
|
||||
backgroundColor: t.palette.negative_500,
|
||||
})
|
||||
|
||||
if (hovered) {
|
||||
baseHover.push({
|
||||
backgroundColor: t.palette.negative_400,
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (disabled) {
|
||||
base.push({
|
||||
backgroundColor: t.palette.contrast_50,
|
||||
})
|
||||
|
||||
if (selected) {
|
||||
base.push({
|
||||
backgroundColor: t.palette.primary_100,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
baseStyles: base,
|
||||
baseHoverStyles: disabled ? [] : baseHover,
|
||||
indicatorStyles: indicator,
|
||||
}
|
||||
}, [t, hovered, disabled, selected, isInvalid])
|
||||
|
||||
return (
|
||||
<View
|
||||
style={[
|
||||
a.relative,
|
||||
a.rounded_full,
|
||||
t.atoms.bg,
|
||||
{
|
||||
height: 28,
|
||||
width: 48,
|
||||
padding: 3,
|
||||
},
|
||||
a.transition_color,
|
||||
baseStyles,
|
||||
hovered ? baseHoverStyles : {},
|
||||
]}>
|
||||
<Animated.View
|
||||
layout={LinearTransition.duration(
|
||||
platform({
|
||||
web: 100,
|
||||
default: 200,
|
||||
}),
|
||||
).easing(Easing.inOut(Easing.cubic))}
|
||||
style={[
|
||||
a.rounded_full,
|
||||
{
|
||||
backgroundColor: t.palette.white,
|
||||
height: 22,
|
||||
width: 22,
|
||||
},
|
||||
selected ? {alignSelf: 'flex-end'} : {alignSelf: 'flex-start'},
|
||||
indicatorStyles,
|
||||
]}
|
||||
/>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export function Radio() {
|
||||
const t = useTheme()
|
||||
const {selected, hovered, focused, disabled, isInvalid} =
|
||||
useContext(ItemContext)
|
||||
const {baseStyles, baseHoverStyles, indicatorStyles} =
|
||||
createSharedToggleStyles({
|
||||
theme: t,
|
||||
hovered,
|
||||
focused,
|
||||
selected,
|
||||
disabled,
|
||||
isInvalid,
|
||||
})
|
||||
return (
|
||||
<View
|
||||
style={[
|
||||
a.justify_center,
|
||||
a.align_center,
|
||||
a.rounded_full,
|
||||
t.atoms.border_contrast_high,
|
||||
a.transition_color,
|
||||
{
|
||||
borderWidth: 1,
|
||||
height: 25,
|
||||
width: 25,
|
||||
margin: -1,
|
||||
},
|
||||
baseStyles,
|
||||
hovered ? baseHoverStyles : {},
|
||||
]}>
|
||||
{selected && (
|
||||
<View
|
||||
style={[
|
||||
a.absolute,
|
||||
a.rounded_full,
|
||||
{height: 12, width: 12},
|
||||
{backgroundColor: t.palette.white},
|
||||
indicatorStyles,
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export const Platform = isNative ? Switch : Checkbox
|
||||
Reference in New Issue
Block a user