Skip to content

Commit 587a5ad

Browse files
ethansharethanshar
committed
Merge branch 'master' into infra/completeTSMigration
2 parents 4260016 + 9944aa5 commit 587a5ad

File tree

3 files changed

+84
-86
lines changed

3 files changed

+84
-86
lines changed

‎demo/src/screens/componentScreens/RadioButtonScreen.js

Lines changed: 76 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, {Component} from 'react';
22
import {TouchableOpacity, ScrollView} from 'react-native';
3-
import {Assets, RadioButton, Colors, Shadows, RadioGroup, View, Text} from 'react-native-ui-lib'; //eslint-disable-line
3+
import {Assets, Colors, View, Text, RadioButton, RadioGroup} from 'react-native-ui-lib'; //eslint-disable-line
44
const starIcon = require('../../assets/icons/star.png');
55

66
const COLORS = {
@@ -11,8 +11,10 @@ const COLORS = {
1111

1212
export default class RadioButtonScreen extends Component {
1313
static colors = COLORS;
14+
1415
constructor(props) {
1516
super(props);
17+
1618
this.state = {
1719
color: undefined,
1820
messageType: undefined,
@@ -61,89 +63,85 @@ export default class RadioButtonScreen extends Component {
6163

6264
render() {
6365
return (
64-
<View flex useSafeArea bg-grey80>
65-
<ScrollView>
66-
<View padding-page>
67-
<Text h1 marginB-s5>
68-
Radio Buttons
69-
</Text>
70-
71-
<RadioGroup initialValue={this.state.color || null} onValueChange={value => this.setState({color: value})}>
72-
<Text marginB-20 text60 grey10>
73-
Select a color{'\n'}
74-
(enum with default value)
75-
</Text>
76-
{this.renderRadioButton(null, 'Default')}
77-
{this.renderRadioButtonForColorEnum(RadioButtonScreen.colors.ORANGE)}
78-
{this.renderRadioButtonForColorEnum(RadioButtonScreen.colors.PURPLE)}
79-
{this.renderRadioButtonForColorEnum(RadioButtonScreen.colors.GREEN)}
80-
<Text marginT-10>You chose: {this.state.color ? this.state.color : 'Default'}</Text>
81-
</RadioGroup>
66+
<View flex useSafeArea>
67+
<ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{padding: 20}}>
68+
<Text h1 marginB-s5 $textDefault>
69+
Radio Buttons
70+
</Text>
8271

83-
<RadioGroup
84-
marginT-30
85-
initialValue={this.state.textSide}
86-
onValueChange={value => this.setState({textSide: value})}
87-
>
88-
<Text marginB-20 text60 grey10>
89-
Alignments
90-
</Text>
91-
{this.renderRadioButtonWithImageAndText('right-icon', 'Text on right')}
92-
{this.renderRadioButtonWithImageAndText('left-icon', 'Text on left', true)}
93-
{this.renderRadioButton('left-content', 'Content on left', true)}
94-
{this.renderRadioButton('right-content', 'Content on right', {contentOnRight: true})}
95-
<Text marginT-10>You chose: {this.state.textSide}</Text>
96-
</RadioGroup>
72+
<RadioGroup initialValue={this.state.color || null} onValueChange={value => this.setState({color: value})}>
73+
<Text marginB-20 text60 $textDefault>
74+
Select a color{'\n'}
75+
(enum with default value)
76+
</Text>
77+
{this.renderRadioButton(null, 'Default')}
78+
{this.renderRadioButtonForColorEnum(RadioButtonScreen.colors.ORANGE)}
79+
{this.renderRadioButtonForColorEnum(RadioButtonScreen.colors.PURPLE)}
80+
{this.renderRadioButtonForColorEnum(RadioButtonScreen.colors.GREEN)}
81+
<Text marginT-10>You chose: {this.state.color ? this.state.color : 'Default'}</Text>
82+
</RadioGroup>
9783

98-
<RadioGroup marginT-30 initialValue={this.state.value} onValueChange={value => this.setState({value})}>
99-
<Text marginB-20 text60 grey10>
100-
Yes or No?
101-
</Text>
102-
<View row>
103-
{this.renderRadioButtonWithImage('yes', Assets.icons.check, {tintColor: 'green'})}
104-
{this.renderRadioButtonWithImage('no', Assets.icons.x, {tintColor: 'red'})}
105-
</View>
106-
<Text marginT-10>You chose: {this.state.value}</Text>
107-
</RadioGroup>
84+
<RadioGroup
85+
marginT-30
86+
initialValue={this.state.textSide}
87+
onValueChange={value => this.setState({textSide: value})}
88+
>
89+
<Text marginB-20 text60 $textDefault>
90+
Alignments
91+
</Text>
92+
{this.renderRadioButtonWithImageAndText('right-icon', 'Text on right')}
93+
{this.renderRadioButtonWithImageAndText('left-icon', 'Text on left', true)}
94+
{this.renderRadioButton('left-content', 'Content on left', true)}
95+
{this.renderRadioButton('right-content', 'Content on right', {contentOnRight: true})}
96+
<Text marginT-10>You chose: {this.state.textSide}</Text>
97+
</RadioGroup>
10898

109-
<Text marginV-20 text60 grey10>
110-
Use it without RadioGroup
99+
<RadioGroup marginT-30 initialValue={this.state.value} onValueChange={value => this.setState({value})}>
100+
<Text marginB-20 text60 $textDefault>
101+
Yes or No?
111102
</Text>
112-
<View row centerV marginB-10>
113-
<RadioButton
114-
selected={this.state.individualValue2}
115-
onPress={() => this.setState({individualValue2: !this.state.individualValue2})}
116-
label="Individual Radio Button (with style)"
117-
labelStyle={{fontSize: 16, fontWeight: 'bold'}}
118-
/>
119-
</View>
120-
<TouchableOpacity
121-
activeOpacity={1}
122-
onPress={() => this.setState({individualValue: !this.state.individualValue})}
123-
accessible={false}
124-
>
125-
<View row centerV>
126-
<RadioButton selected={this.state.individualValue} label="Individual Radio Button (wrapped)"/>
127-
</View>
128-
</TouchableOpacity>
129-
<View row centerV marginT-10>
130-
<RadioButton
131-
disabled
132-
selected={this.state.disabledValue}
133-
onPress={() => this.setState({disabledValue: !this.state.disabledValue})}
134-
label="Disabled Radio Button"
135-
/>
136-
</View>
137-
<View row centerV marginT-10>
138-
<RadioButton
139-
disabled
140-
selected={this.state.disabledSelectedValue}
141-
onPress={() => this.setState({disabledSelectedValue: !this.state.disabledSelectedValue})}
142-
label="Disabled Selected Radio Button"
143-
/>
103+
<View row>
104+
{this.renderRadioButtonWithImage('yes', Assets.icons.check, {tintColor: 'green'})}
105+
{this.renderRadioButtonWithImage('no', Assets.icons.x, {tintColor: 'red'})}
144106
</View>
107+
<Text marginT-10>You chose: {this.state.value}</Text>
108+
</RadioGroup>
145109

146-
<View style={{height: 30}}/>
110+
<Text marginV-20 text60 $textDefault>
111+
Use it without RadioGroup
112+
</Text>
113+
<View row centerV marginB-10>
114+
<RadioButton
115+
selected={this.state.individualValue2}
116+
onPress={() => this.setState({individualValue2: !this.state.individualValue2})}
117+
label="Individual Radio Button (with style)"
118+
labelStyle={{fontSize: 16, fontWeight: 'bold'}}
119+
/>
120+
</View>
121+
<TouchableOpacity
122+
activeOpacity={1}
123+
onPress={() => this.setState({individualValue: !this.state.individualValue})}
124+
accessible={false}
125+
>
126+
<View row centerV>
127+
<RadioButton selected={this.state.individualValue} label="Individual Radio Button (wrapped)"/>
128+
</View>
129+
</TouchableOpacity>
130+
<View row centerV marginT-10>
131+
<RadioButton
132+
disabled
133+
selected={this.state.disabledValue}
134+
onPress={() => this.setState({disabledValue: !this.state.disabledValue})}
135+
label="Disabled Radio Button"
136+
/>
137+
</View>
138+
<View row centerV marginT-10>
139+
<RadioButton
140+
disabled
141+
selected={this.state.disabledSelectedValue}
142+
onPress={() => this.setState({disabledSelectedValue: !this.state.disabledSelectedValue})}
143+
label="Disabled Selected Radio Button"
144+
/>
147145
</View>
148146
</ScrollView>
149147
</View>

‎src/components/radioButton/index.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import asRadioGroupChild from '../radioGroup/asRadioGroupChild';
2020
import {RadioGroupContextProps} from '../radioGroup/RadioGroupContext';
2121

2222
const DEFAULT_SIZE = 24;
23-
const DEFAULT_COLOR = Colors.primary;
23+
const DEFAULT_COLOR = Colors.$backgroundPrimaryHeavy;
2424

2525
export type RadioButtonProps = RadioGroupContextProps &
2626
ViewProps & {
@@ -195,7 +195,7 @@ class RadioButton extends PureComponent<Props, RadioButtonState> {
195195
style.push({borderRadius});
196196
}
197197
if (color) {
198-
style.push({borderColor: disabled ? Colors.grey70 : color});
198+
style.push({borderColor: disabled ? Colors.$backgroundDisabled : color});
199199
}
200200

201201
style.push(propsStyle);
@@ -210,7 +210,7 @@ class RadioButton extends PureComponent<Props, RadioButtonState> {
210210
style.push({borderRadius});
211211
}
212212
if (color) {
213-
style.push({backgroundColor: disabled ? Colors.grey70 : color});
213+
style.push({backgroundColor: disabled ? Colors.$backgroundDisabled : color});
214214
}
215215

216216
return style;
@@ -220,7 +220,7 @@ class RadioButton extends PureComponent<Props, RadioButtonState> {
220220
const {label, labelStyle, contentOnRight} = this.props;
221221
return (
222222
label && (
223-
<Text marginL-10={!contentOnRight} marginR-10={contentOnRight} style={labelStyle}>
223+
<Text marginL-10={!contentOnRight} marginR-10={contentOnRight} $textDefault style={labelStyle}>
224224
{label}
225225
</Text>
226226
)
@@ -278,14 +278,14 @@ function createStyles(props: RadioButtonProps) {
278278
return StyleSheet.create({
279279
radioButtonOutline: {
280280
borderWidth: 2,
281-
borderColor: disabled ? Colors.grey70 : color,
281+
borderColor: disabled ? Colors.$backgroundDisabled : color,
282282
width: size,
283283
height: size,
284284
borderRadius,
285285
padding: 3
286286
},
287287
radioButtonInner: {
288-
backgroundColor: disabled ? Colors.grey70 : color,
288+
backgroundColor: disabled ? Colors.$backgroundDisabled : color,
289289
flex: 1,
290290
borderRadius
291291
},

‎src/style/scheme.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {Appearance} from 'react-native';
2-
import {remove, xor, isEmpty} from 'lodash';
2+
import {remove, xor, isEmpty, merge} from 'lodash';
33

44
export type Schemes = {light: {[key: string]: string}; dark: {[key: string]: string}};
55
export type SchemeType = 'default' | 'light' | 'dark';
@@ -61,7 +61,7 @@ class Scheme {
6161
throw new Error(`There is a mismatch in scheme keys: ${missingKeys.join(', ')}`);
6262
}
6363

64-
this.schemes = schemes;
64+
merge(this.schemes, schemes);
6565
}
6666

6767
/**

0 commit comments

Comments
 (0)