Add a design system (#34)
* Add theming system * Add standard Button control and update RadioButtons * Unify radiobutton with design system * Update debug screen to have multiple views * Add ToggleButton * Update error controls to use design system * Add typography to <Text> element * Move DropdownButton into the design system * Clean out old code * Move Text into design system * Add 'inverted' color palette * Move LoadingPlaceholder into the design system
This commit is contained in:
parent
cc63660982
commit
7e31645e9a
78 changed files with 1431 additions and 375 deletions
|
@ -1,6 +1,7 @@
|
|||
import React, {useState} from 'react'
|
||||
import {View} from 'react-native'
|
||||
import {RadioButton} from './RadioButton'
|
||||
import {ButtonType} from './Button'
|
||||
|
||||
export interface RadioGroupItem {
|
||||
label: string
|
||||
|
@ -8,22 +9,28 @@ export interface RadioGroupItem {
|
|||
}
|
||||
|
||||
export function RadioGroup({
|
||||
type,
|
||||
items,
|
||||
initialSelection = '',
|
||||
onSelect,
|
||||
}: {
|
||||
type?: ButtonType
|
||||
items: RadioGroupItem[]
|
||||
initialSelection?: string
|
||||
onSelect: (key: string) => void
|
||||
}) {
|
||||
const [selection, setSelection] = useState<string>('')
|
||||
const [selection, setSelection] = useState<string>(initialSelection)
|
||||
const onSelectInner = (key: string) => {
|
||||
setSelection(key)
|
||||
onSelect(key)
|
||||
}
|
||||
return (
|
||||
<View>
|
||||
{items.map(item => (
|
||||
{items.map((item, i) => (
|
||||
<RadioButton
|
||||
key={item.key}
|
||||
style={i !== 0 ? {marginTop: 2} : undefined}
|
||||
type={type}
|
||||
label={item.label}
|
||||
isSelected={item.key === selection}
|
||||
onPress={() => onSelectInner(item.key)}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue