✨ SegmentedControl component (#8606)
* new segmented control * fix type error * convert server input, use CSS for web * add segmented control to storybook * use segmented control in embed dialog * add to suggested text wrappers * update change handle dialog * update styles since button changes * fix atom * style updates to segmented control, add size prop * update state in layout effect rather than in render * set type = 'radio' as default * prevent expansion in server dialog on iOS * use non reactive callback in needsUpdate effect
This commit is contained in:
Samuel Newman
@@ -10,8 +10,8 @@ import {toShareUrl} from '#/lib/strings/url-helpers'
|
||||
import {atoms as a, useTheme} from '#/alf'
|
||||
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
|
||||
import * as Dialog from '#/components/Dialog'
|
||||
import * as SegmentedControl from '#/components/forms/SegmentedControl'
|
||||
import * as TextField from '#/components/forms/TextField'
|
||||
import * as ToggleButton from '#/components/forms/ToggleButton'
|
||||
import {Check_Stroke2_Corner0_Rounded as CheckIcon} from '#/components/icons/Check'
|
||||
import {
|
||||
ChevronBottom_Stroke2_Corner0_Rounded as ChevronBottomIcon,
|
||||
@@ -150,26 +150,27 @@ function EmbedDialogInner({
|
||||
<Text style={[t.atoms.text_contrast_medium, a.font_semi_bold]}>
|
||||
<Trans>Color theme</Trans>
|
||||
</Text>
|
||||
<ToggleButton.Group
|
||||
<SegmentedControl.Root
|
||||
label={_(msg`Color mode`)}
|
||||
values={[colorMode]}
|
||||
onChange={([value]) => setColorMode(value as ColorModeValues)}>
|
||||
<ToggleButton.Button name="system" label={_(msg`System`)}>
|
||||
<ToggleButton.ButtonText>
|
||||
type="radio"
|
||||
value={colorMode}
|
||||
onChange={setColorMode}>
|
||||
<SegmentedControl.Item value="system" label={_(msg`System`)}>
|
||||
<SegmentedControl.ItemText>
|
||||
<Trans>System</Trans>
|
||||
</ToggleButton.ButtonText>
|
||||
</ToggleButton.Button>
|
||||
<ToggleButton.Button name="light" label={_(msg`Light`)}>
|
||||
<ToggleButton.ButtonText>
|
||||
</SegmentedControl.ItemText>
|
||||
</SegmentedControl.Item>
|
||||
<SegmentedControl.Item value="light" label={_(msg`Light`)}>
|
||||
<SegmentedControl.ItemText>
|
||||
<Trans>Light</Trans>
|
||||
</ToggleButton.ButtonText>
|
||||
</ToggleButton.Button>
|
||||
<ToggleButton.Button name="dark" label={_(msg`Dark`)}>
|
||||
<ToggleButton.ButtonText>
|
||||
</SegmentedControl.ItemText>
|
||||
</SegmentedControl.Item>
|
||||
<SegmentedControl.Item value="dark" label={_(msg`Dark`)}>
|
||||
<SegmentedControl.ItemText>
|
||||
<Trans>Dark</Trans>
|
||||
</ToggleButton.ButtonText>
|
||||
</ToggleButton.Button>
|
||||
</ToggleButton.Group>
|
||||
</SegmentedControl.ItemText>
|
||||
</SegmentedControl.Item>
|
||||
</SegmentedControl.Root>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
@@ -0,0 +1,249 @@
|
||||
import {useCallback, useImperativeHandle, useRef, useState} from 'react'
|
||||
import {View} from 'react-native'
|
||||
import {useWindowDimensions} from 'react-native'
|
||||
import {msg, Trans} from '@lingui/macro'
|
||||
import {useLingui} from '@lingui/react'
|
||||
|
||||
import {BSKY_SERVICE} from '#/lib/constants'
|
||||
import {logger} from '#/logger'
|
||||
import * as persisted from '#/state/persisted'
|
||||
import {useSession} from '#/state/session'
|
||||
import {atoms as a, platform, useBreakpoints, useTheme, web} from '#/alf'
|
||||
import {Admonition} from '#/components/Admonition'
|
||||
import {Button, ButtonText} from '#/components/Button'
|
||||
import * as Dialog from '#/components/Dialog'
|
||||
import * as SegmentedControl from '#/components/forms/SegmentedControl'
|
||||
import * as TextField from '#/components/forms/TextField'
|
||||
import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe'
|
||||
import {InlineLinkText} from '#/components/Link'
|
||||
import {Text} from '#/components/Typography'
|
||||
|
||||
type SegmentedControlOptions = typeof BSKY_SERVICE | 'custom'
|
||||
|
||||
export function ServerInputDialog({
|
||||
control,
|
||||
onSelect,
|
||||
}: {
|
||||
control: Dialog.DialogOuterProps['control']
|
||||
onSelect: (url: string) => void
|
||||
}) {
|
||||
const {height} = useWindowDimensions()
|
||||
const formRef = useRef<DialogInnerRef>(null)
|
||||
|
||||
// persist these options between dialog open/close
|
||||
const [fixedOption, setFixedOption] =
|
||||
useState<SegmentedControlOptions>(BSKY_SERVICE)
|
||||
const [previousCustomAddress, setPreviousCustomAddress] = useState('')
|
||||
|
||||
const onClose = useCallback(() => {
|
||||
const result = formRef.current?.getFormState()
|
||||
if (result) {
|
||||
onSelect(result)
|
||||
if (result !== BSKY_SERVICE) {
|
||||
setPreviousCustomAddress(result)
|
||||
}
|
||||
}
|
||||
logger.metric('signin:hostingProviderPressed', {
|
||||
hostingProviderDidChange: fixedOption !== BSKY_SERVICE,
|
||||
})
|
||||
}, [onSelect, fixedOption])
|
||||
|
||||
return (
|
||||
<Dialog.Outer
|
||||
control={control}
|
||||
onClose={onClose}
|
||||
nativeOptions={platform({
|
||||
android: {minHeight: height / 2},
|
||||
ios: {preventExpansion: true},
|
||||
})}>
|
||||
<Dialog.Handle />
|
||||
<DialogInner
|
||||
formRef={formRef}
|
||||
fixedOption={fixedOption}
|
||||
setFixedOption={setFixedOption}
|
||||
initialCustomAddress={previousCustomAddress}
|
||||
/>
|
||||
</Dialog.Outer>
|
||||
)
|
||||
}
|
||||
|
||||
type DialogInnerRef = {getFormState: () => string | null}
|
||||
|
||||
function DialogInner({
|
||||
formRef,
|
||||
fixedOption,
|
||||
setFixedOption,
|
||||
initialCustomAddress,
|
||||
}: {
|
||||
formRef: React.Ref<DialogInnerRef>
|
||||
fixedOption: SegmentedControlOptions
|
||||
setFixedOption: (opt: SegmentedControlOptions) => void
|
||||
initialCustomAddress: string
|
||||
}) {
|
||||
const control = Dialog.useDialogContext()
|
||||
const {_} = useLingui()
|
||||
const t = useTheme()
|
||||
const {accounts} = useSession()
|
||||
const {gtMobile} = useBreakpoints()
|
||||
const [customAddress, setCustomAddress] = useState(initialCustomAddress)
|
||||
const [pdsAddressHistory, setPdsAddressHistory] = useState<string[]>(
|
||||
persisted.get('pdsAddressHistory') || [],
|
||||
)
|
||||
|
||||
useImperativeHandle(
|
||||
formRef,
|
||||
() => ({
|
||||
getFormState: () => {
|
||||
let url
|
||||
if (fixedOption === 'custom') {
|
||||
url = customAddress.trim().toLowerCase()
|
||||
if (!url) {
|
||||
return null
|
||||
}
|
||||
} else {
|
||||
url = fixedOption
|
||||
}
|
||||
if (!url.startsWith('http://') && !url.startsWith('https://')) {
|
||||
if (url === 'localhost' || url.startsWith('localhost:')) {
|
||||
url = `http://${url}`
|
||||
} else {
|
||||
url = `https://${url}`
|
||||
}
|
||||
}
|
||||
|
||||
if (fixedOption === 'custom') {
|
||||
if (!pdsAddressHistory.includes(url)) {
|
||||
const newHistory = [url, ...pdsAddressHistory.slice(0, 4)]
|
||||
setPdsAddressHistory(newHistory)
|
||||
persisted.write('pdsAddressHistory', newHistory)
|
||||
}
|
||||
}
|
||||
|
||||
return url
|
||||
},
|
||||
}),
|
||||
[customAddress, fixedOption, pdsAddressHistory],
|
||||
)
|
||||
|
||||
const isFirstTimeUser = accounts.length === 0
|
||||
|
||||
return (
|
||||
<Dialog.ScrollableInner
|
||||
accessibilityDescribedBy="dialog-description"
|
||||
accessibilityLabelledBy="dialog-title"
|
||||
style={web({maxWidth: 500})}>
|
||||
<View style={[a.relative, a.gap_md, a.w_full]}>
|
||||
<Text nativeID="dialog-title" style={[a.text_2xl, a.font_bold]}>
|
||||
<Trans>Choose your account provider</Trans>
|
||||
</Text>
|
||||
<SegmentedControl.Root
|
||||
type="tabs"
|
||||
label={_(msg`Account provider`)}
|
||||
value={fixedOption}
|
||||
onChange={setFixedOption}>
|
||||
<SegmentedControl.Item
|
||||
testID="bskyServiceSelectBtn"
|
||||
value={BSKY_SERVICE}
|
||||
label={_(msg`Bluesky`)}>
|
||||
<SegmentedControl.ItemText>
|
||||
{_(msg`Bluesky`)}
|
||||
</SegmentedControl.ItemText>
|
||||
</SegmentedControl.Item>
|
||||
<SegmentedControl.Item
|
||||
testID="customSelectBtn"
|
||||
value="custom"
|
||||
label={_(msg`Custom`)}>
|
||||
<SegmentedControl.ItemText>
|
||||
{_(msg`Custom`)}
|
||||
</SegmentedControl.ItemText>
|
||||
</SegmentedControl.Item>
|
||||
</SegmentedControl.Root>
|
||||
|
||||
{fixedOption === BSKY_SERVICE && isFirstTimeUser && (
|
||||
<View role="tabpanel">
|
||||
<Admonition type="tip">
|
||||
<Trans>
|
||||
Bluesky is an open network where you can choose your own
|
||||
provider. If you're new here, we recommend sticking with the
|
||||
default Bluesky Social option.
|
||||
</Trans>
|
||||
</Admonition>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{fixedOption === 'custom' && (
|
||||
<View role="tabpanel">
|
||||
<TextField.LabelText nativeID="address-input-label">
|
||||
<Trans>Server address</Trans>
|
||||
</TextField.LabelText>
|
||||
<TextField.Root>
|
||||
<TextField.Icon icon={Globe} />
|
||||
<Dialog.Input
|
||||
testID="customServerTextInput"
|
||||
value={customAddress}
|
||||
onChangeText={setCustomAddress}
|
||||
label="my-server.com"
|
||||
accessibilityLabelledBy="address-input-label"
|
||||
autoCapitalize="none"
|
||||
keyboardType="url"
|
||||
/>
|
||||
</TextField.Root>
|
||||
{pdsAddressHistory.length > 0 && (
|
||||
<View style={[a.flex_row, a.flex_wrap, a.mt_xs]}>
|
||||
{pdsAddressHistory.map(uri => (
|
||||
<Button
|
||||
key={uri}
|
||||
variant="ghost"
|
||||
color="primary"
|
||||
label={uri}
|
||||
style={[a.px_sm, a.py_xs, a.rounded_sm, a.gap_sm]}
|
||||
onPress={() => setCustomAddress(uri)}>
|
||||
<ButtonText>{uri}</ButtonText>
|
||||
</Button>
|
||||
))}
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
|
||||
<View style={[a.py_xs]}>
|
||||
<Text
|
||||
style={[t.atoms.text_contrast_medium, a.text_sm, a.leading_snug]}>
|
||||
{isFirstTimeUser ? (
|
||||
<Trans>
|
||||
If you're a developer, you can host your own server.
|
||||
</Trans>
|
||||
) : (
|
||||
<Trans>
|
||||
Bluesky is an open network where you can choose your hosting
|
||||
provider. If you're a developer, you can host your own server.
|
||||
</Trans>
|
||||
)}{' '}
|
||||
<InlineLinkText
|
||||
label={_(msg`Learn more about self hosting your PDS.`)}
|
||||
to="https://atproto.com/guides/self-hosting">
|
||||
<Trans>Learn more.</Trans>
|
||||
</InlineLinkText>
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<View style={gtMobile && [a.flex_row, a.justify_end]}>
|
||||
<Button
|
||||
testID="doneBtn"
|
||||
variant="solid"
|
||||
color="primary"
|
||||
size={platform({
|
||||
native: 'large',
|
||||
web: 'small',
|
||||
})}
|
||||
onPress={() => control.close()}
|
||||
label={_(msg`Done`)}>
|
||||
<ButtonText>
|
||||
<Trans>Done</Trans>
|
||||
</ButtonText>
|
||||
</Button>
|
||||
</View>
|
||||
</View>
|
||||
</Dialog.ScrollableInner>
|
||||
)
|
||||
}
|
||||
@@ -4,10 +4,10 @@ import {msg, Trans} from '@lingui/macro'
|
||||
import {useLingui} from '@lingui/react'
|
||||
|
||||
import {toNiceDomain} from '#/lib/strings/url-helpers'
|
||||
import {ServerInputDialog} from '#/view/com/auth/server-input'
|
||||
import {atoms as a, tokens, useTheme} from '#/alf'
|
||||
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
|
||||
import {useDialogControl} from '#/components/Dialog'
|
||||
import {ServerInputDialog} from '#/components/dialogs/ServerInput'
|
||||
import {Globe_Stroke2_Corner0_Rounded as GlobeIcon} from '#/components/icons/Globe'
|
||||
import {PencilLine_Stroke2_Corner0_Rounded as PencilIcon} from '#/components/icons/Pencil'
|
||||
import {Text} from '#/components/Typography'
|
||||
|
||||
@@ -0,0 +1,284 @@
|
||||
import {
|
||||
createContext,
|
||||
useCallback,
|
||||
useContext,
|
||||
useLayoutEffect,
|
||||
useMemo,
|
||||
useState,
|
||||
} from 'react'
|
||||
import {type StyleProp, View, type ViewStyle} from 'react-native'
|
||||
import Animated, {Easing, LinearTransition} from 'react-native-reanimated'
|
||||
|
||||
import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
|
||||
import {atoms as a, native, platform, useTheme} from '#/alf'
|
||||
import {
|
||||
Button,
|
||||
type ButtonProps,
|
||||
ButtonText,
|
||||
type ButtonTextProps,
|
||||
} from '../Button'
|
||||
|
||||
const InternalContext = createContext<{
|
||||
type: 'tabs' | 'radio'
|
||||
size: 'small' | 'large'
|
||||
selectedValue: string
|
||||
selectedPosition: {width: number; x: number} | null
|
||||
onSelectValue: (
|
||||
value: string,
|
||||
position: {width: number; x: number} | null,
|
||||
) => void
|
||||
updatePosition: (position: {width: number; x: number}) => void
|
||||
} | null>(null)
|
||||
|
||||
/**
|
||||
* Segmented control component.
|
||||
*
|
||||
* @example
|
||||
* ```tsx
|
||||
* <SegmentedControl.Root value={value} onChange={setValue}>
|
||||
* <SegmentedControl.Item value="one">
|
||||
* <SegmentedControl.ItemText value="one">
|
||||
* One
|
||||
* </SegmentedControl.ItemText>
|
||||
* </SegmentedControl.Item>
|
||||
* <SegmentedControl.Item value="two">
|
||||
* <SegmentedControl.ItemText value="two">
|
||||
* Two
|
||||
* </SegmentedControl.ItemText>
|
||||
* </SegmentedControl.Item>
|
||||
* </SegmentedControl.Root>
|
||||
* ```
|
||||
*/
|
||||
export function Root<T extends string>({
|
||||
label,
|
||||
type = 'radio',
|
||||
size = 'large',
|
||||
value,
|
||||
onChange,
|
||||
children,
|
||||
style,
|
||||
accessibilityHint,
|
||||
}: {
|
||||
label: string
|
||||
type: 'tabs' | 'radio'
|
||||
size?: 'small' | 'large'
|
||||
value: T
|
||||
onChange: (value: T) => void
|
||||
children: React.ReactNode
|
||||
style?: StyleProp<ViewStyle>
|
||||
accessibilityHint?: string
|
||||
}) {
|
||||
const t = useTheme()
|
||||
const [selectedPosition, setSelectedPosition] = useState<{
|
||||
width: number
|
||||
x: number
|
||||
} | null>(null)
|
||||
|
||||
const contextValue = useMemo(() => {
|
||||
return {
|
||||
type,
|
||||
size,
|
||||
selectedValue: value,
|
||||
selectedPosition,
|
||||
onSelectValue: (
|
||||
val: string,
|
||||
position: {width: number; x: number} | null,
|
||||
) => {
|
||||
onChange(val as T)
|
||||
if (position) setSelectedPosition(position)
|
||||
},
|
||||
updatePosition: (position: {width: number; x: number}) => {
|
||||
setSelectedPosition(currPos => {
|
||||
if (
|
||||
currPos &&
|
||||
currPos.width === position.width &&
|
||||
currPos.x === position.x
|
||||
) {
|
||||
return currPos
|
||||
}
|
||||
return position
|
||||
})
|
||||
},
|
||||
}
|
||||
}, [value, selectedPosition, setSelectedPosition, onChange, type, size])
|
||||
|
||||
return (
|
||||
<View
|
||||
accessibilityLabel={label}
|
||||
accessibilityHint={accessibilityHint ?? ''}
|
||||
style={[
|
||||
a.w_full,
|
||||
a.flex_1,
|
||||
a.relative,
|
||||
a.flex_row,
|
||||
t.atoms.bg_contrast_50,
|
||||
{borderRadius: 14},
|
||||
a.curve_continuous,
|
||||
a.p_xs,
|
||||
style,
|
||||
]}
|
||||
role={type === 'tabs' ? 'tablist' : 'radiogroup'}>
|
||||
{selectedPosition !== null && (
|
||||
<Slider x={selectedPosition.x} width={selectedPosition.width} />
|
||||
)}
|
||||
<InternalContext.Provider value={contextValue}>
|
||||
{children}
|
||||
</InternalContext.Provider>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const InternalItemContext = createContext<{
|
||||
active: boolean
|
||||
pressed: boolean
|
||||
hovered: boolean
|
||||
focused: boolean
|
||||
} | null>(null)
|
||||
|
||||
export function Item({
|
||||
value,
|
||||
style,
|
||||
children,
|
||||
onPress: onPressProp,
|
||||
...props
|
||||
}: {value: string; children: React.ReactNode} & Omit<ButtonProps, 'children'>) {
|
||||
const [position, setPosition] = useState<{x: number; width: number} | null>(
|
||||
null,
|
||||
)
|
||||
|
||||
const ctx = useContext(InternalContext)
|
||||
if (!ctx)
|
||||
throw new Error(
|
||||
'SegmentedControl.Item must be used within a SegmentedControl.Root',
|
||||
)
|
||||
|
||||
const active = ctx.selectedValue === value
|
||||
|
||||
// update position if change was external, and not due to onPress
|
||||
const needsUpdate =
|
||||
active &&
|
||||
position &&
|
||||
(ctx.selectedPosition?.x !== position.x ||
|
||||
ctx.selectedPosition?.width !== position.width)
|
||||
|
||||
// can't wait for `useEffectEvent`
|
||||
const update = useNonReactiveCallback(() => {
|
||||
if (position) ctx.updatePosition(position)
|
||||
})
|
||||
|
||||
useLayoutEffect(() => {
|
||||
if (needsUpdate) {
|
||||
update()
|
||||
}
|
||||
}, [needsUpdate, update])
|
||||
|
||||
const onPress = useCallback(
|
||||
(evt: any) => {
|
||||
ctx.onSelectValue(value, position)
|
||||
onPressProp?.(evt)
|
||||
},
|
||||
[ctx, value, position, onPressProp],
|
||||
)
|
||||
|
||||
return (
|
||||
<View
|
||||
style={[a.flex_1, a.flex_row]}
|
||||
onLayout={evt => {
|
||||
const measuredPosition = {
|
||||
x: evt.nativeEvent.layout.x,
|
||||
width: evt.nativeEvent.layout.width,
|
||||
}
|
||||
if (!ctx.selectedPosition && active) {
|
||||
ctx.onSelectValue(value, measuredPosition)
|
||||
}
|
||||
setPosition(measuredPosition)
|
||||
}}>
|
||||
<Button
|
||||
{...props}
|
||||
onPress={onPress}
|
||||
role={ctx.type === 'tabs' ? 'tab' : 'radio'}
|
||||
accessibilityState={{selected: active}}
|
||||
style={[
|
||||
a.flex_1,
|
||||
a.bg_transparent,
|
||||
a.px_sm,
|
||||
a.py_xs,
|
||||
{minHeight: ctx.size === 'large' ? 40 : 32},
|
||||
style,
|
||||
]}>
|
||||
{({pressed, hovered, focused}) => (
|
||||
<InternalItemContext.Provider
|
||||
value={{active, pressed, hovered, focused}}>
|
||||
{children}
|
||||
</InternalItemContext.Provider>
|
||||
)}
|
||||
</Button>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export function ItemText({style, ...props}: ButtonTextProps) {
|
||||
const t = useTheme()
|
||||
const ctx = useContext(InternalItemContext)
|
||||
if (!ctx)
|
||||
throw new Error(
|
||||
'SegmentedControl.ItemText must be used within a SegmentedControl.Item',
|
||||
)
|
||||
return (
|
||||
<ButtonText
|
||||
{...props}
|
||||
style={[
|
||||
a.text_center,
|
||||
a.text_md,
|
||||
a.font_medium,
|
||||
a.px_xs,
|
||||
ctx.active
|
||||
? t.atoms.text
|
||||
: ctx.focused || ctx.hovered || ctx.pressed
|
||||
? t.atoms.text_contrast_medium
|
||||
: t.atoms.text_contrast_low,
|
||||
style,
|
||||
]}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function Slider({x, width}: {x: number; width: number}) {
|
||||
const t = useTheme()
|
||||
|
||||
return (
|
||||
<Animated.View
|
||||
layout={native(LinearTransition.easing(Easing.out(Easing.exp)))}
|
||||
style={[
|
||||
a.absolute,
|
||||
a.curve_continuous,
|
||||
t.atoms.bg,
|
||||
{
|
||||
top: 4,
|
||||
bottom: 4,
|
||||
left: 0,
|
||||
width,
|
||||
borderRadius: 10,
|
||||
},
|
||||
// TODO: new arch supports boxShadow on native
|
||||
// in the meantime this is an attempt to get close
|
||||
platform({
|
||||
web: {
|
||||
boxShadow: '0px 2px 4px 0px #0000000D',
|
||||
},
|
||||
ios: {
|
||||
shadowColor: '#000',
|
||||
shadowOffset: {width: 0, height: 2},
|
||||
shadowOpacity: 0x0d / 0xff,
|
||||
shadowRadius: 4,
|
||||
},
|
||||
android: {elevation: 0.25},
|
||||
}),
|
||||
platform({
|
||||
native: [{left: x}],
|
||||
web: [{transform: [{translateX: x}]}, a.transition_transform],
|
||||
}),
|
||||
]}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
import React from 'react'
|
||||
import {useMemo} from 'react'
|
||||
import {
|
||||
type AccessibilityProps,
|
||||
type TextStyle,
|
||||
@@ -20,6 +20,9 @@ export type GroupProps = Omit<Toggle.GroupProps, 'style' | 'type'> & {
|
||||
multiple?: boolean
|
||||
}
|
||||
|
||||
/**
|
||||
* @deprecated - use SegmentedControl
|
||||
*/
|
||||
export function Group({children, multiple, ...props}: GroupProps) {
|
||||
const t = useTheme()
|
||||
return (
|
||||
@@ -39,6 +42,9 @@ export function Group({children, multiple, ...props}: GroupProps) {
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* @deprecated - use SegmentedControl
|
||||
*/
|
||||
export function Button({children, ...props}: ItemProps) {
|
||||
return (
|
||||
<Toggle.Item {...props} style={[a.flex_grow, a.flex_1]}>
|
||||
@@ -51,7 +57,7 @@ function ButtonInner({children}: React.PropsWithChildren<{}>) {
|
||||
const t = useTheme()
|
||||
const state = Toggle.useItemContext()
|
||||
|
||||
const {baseStyles, hoverStyles, activeStyles} = React.useMemo(() => {
|
||||
const {baseStyles, hoverStyles, activeStyles} = useMemo(() => {
|
||||
const base: ViewStyle[] = []
|
||||
const hover: ViewStyle[] = []
|
||||
const active: ViewStyle[] = []
|
||||
@@ -112,11 +118,14 @@ function ButtonInner({children}: React.PropsWithChildren<{}>) {
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* @deprecated - use SegmentedControl
|
||||
*/
|
||||
export function ButtonText({children}: {children: React.ReactNode}) {
|
||||
const t = useTheme()
|
||||
const state = Toggle.useItemContext()
|
||||
|
||||
const textStyles = React.useMemo(() => {
|
||||
const textStyles = useMemo(() => {
|
||||
const text: TextStyle[] = []
|
||||
if (state.selected) {
|
||||
text.push(t.atoms.text_inverted)
|
||||
|
||||
Reference in New Issue
Block a user