mirror of
https://github.com/stablyai/orca.git
synced 2026-11-01 09:37:33 +00:00
Kelvin Amoaba
f87a746200
* feat(mobile): light and dark themes with desktop's palettes Settings → Appearance offers System, Light and Dark. The shell passes the resolved scheme to over-the-air pages in its init frame. Fixes #22184 * fix(mobile): draw your chat messages in desktop's user bubble Desktop uses a faint surface with a hairline border in both themes; the inverted fill went black in light. * test(mobile): re-measure the page script sweep after the shared theme hooks Every route now imports the theme hooks while the entry does not, so they emit one shared script (96 for the tree). Re-swept every route prefix; the worst route step is now 15. * test(mobile): read themed stylesheets in the text-input font-size census The census only unwrapped StyleSheet.create({...}); inputs styled through themedStyleSheet(() => ({...})) came back unread.
77 lines
2.8 KiB
TypeScript
77 lines
2.8 KiB
TypeScript
import { Pressable, Text, View, type StyleProp, type ViewStyle } from 'react-native'
|
|
import { colors, radii, spacing, typography } from '../theme/mobile-theme'
|
|
import { themedStyleSheet } from '../theme/themed-styles'
|
|
import { useMobileColorScheme } from '../theme/use-mobile-color-scheme'
|
|
|
|
export type MobileSegment<Value extends string> = { value: Value; label: string }
|
|
|
|
type Props<Value extends string> = {
|
|
segments: readonly MobileSegment<Value>[]
|
|
/** A value outside the segments selects none, e.g. one a newer host sent. */
|
|
selected: string | undefined
|
|
onSelect: (value: Value) => void
|
|
/** Prefixes each segment's testID with this, then the segment's value. */
|
|
testIDPrefix?: string
|
|
/** Segments share the full width instead of sizing to their labels. */
|
|
fill?: boolean
|
|
/** The track; its default color suits a panel-colored row. */
|
|
style?: StyleProp<ViewStyle>
|
|
/** Shown but not pickable, e.g. while the value it sets is locked. */
|
|
disabled?: boolean
|
|
}
|
|
|
|
/** A pick-one pill control; each segment reads as a radio button. */
|
|
export function MobileSegmentedControl<Value extends string>(props: Props<Value>) {
|
|
useMobileColorScheme()
|
|
return (
|
|
<View style={[styles.segmented, props.style]} accessibilityRole="radiogroup">
|
|
{props.segments.map((segment) => {
|
|
const active = segment.value === props.selected
|
|
return (
|
|
<Pressable
|
|
key={segment.value}
|
|
accessibilityRole="radio"
|
|
aria-checked={active}
|
|
accessibilityState={{ disabled: props.disabled === true }}
|
|
disabled={props.disabled}
|
|
accessibilityLabel={segment.label}
|
|
testID={props.testIDPrefix ? `${props.testIDPrefix}${segment.value}` : undefined}
|
|
onPress={() => props.onSelect(segment.value)}
|
|
style={[
|
|
styles.segment,
|
|
props.fill && styles.segmentFill,
|
|
active && styles.segmentActive
|
|
]}
|
|
>
|
|
<Text
|
|
style={[styles.segmentText, active && styles.segmentTextActive]}
|
|
numberOfLines={1}
|
|
>
|
|
{segment.label}
|
|
</Text>
|
|
</Pressable>
|
|
)
|
|
})}
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const styles = themedStyleSheet(() => ({
|
|
segmented: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
backgroundColor: colors.bgBase,
|
|
borderRadius: radii.button,
|
|
padding: 2
|
|
},
|
|
segment: {
|
|
paddingHorizontal: spacing.md,
|
|
paddingVertical: 6,
|
|
borderRadius: radii.button - 1
|
|
},
|
|
segmentFill: { flex: 1, alignItems: 'center', paddingHorizontal: spacing.xs },
|
|
segmentActive: { backgroundColor: colors.bgRaised },
|
|
segmentText: { fontSize: typography.metaSize, color: colors.textSecondary, fontWeight: '600' },
|
|
segmentTextActive: { color: colors.textPrimary }
|
|
}))
|