Skip to content

Commit 3a0cf9b

Browse files
Inbal-TishInbal-Tish
committed
Merge branch 'master' of github.com:wix/react-native-ui-lib into release
2 parents 7901361 + 2cef442 commit 3a0cf9b

File tree

360 files changed

+1435
-13632
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

360 files changed

+1435
-13632
lines changed

‎demo/src/screens/ExampleScreenPresenter.tsx

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,11 @@ interface RadioGroupOptions {
2222
useValueAsLabel?: boolean;
2323
}
2424

25+
interface BooleanGroupOptions {
26+
spread?: boolean;
27+
afterValueChanged?: () => void;
28+
}
29+
2530
export function renderHeader(title: string, others?: TextProps) {
2631
return (
2732
<Text text30 $textDefault {...others}>
@@ -30,19 +35,19 @@ export function renderHeader(title: string, others?: TextProps) {
3035
);
3136
}
3237

33-
export function renderBooleanOption(title: string, key: string) {
38+
export function renderBooleanOption(title: string, key: string, {spread, afterValueChanged}: BooleanGroupOptions = {spread: true}) {
3439
// @ts-ignore
3540
const value = this.state[key];
3641
return (
37-
<View row centerV spread marginB-s4 key={key}>
38-
<Text $textDefault flex>{title}</Text>
42+
<View row centerV spread={spread} marginB-s4 key={key}>
43+
<Text $textDefault flex={spread} marginR-s4={!spread}>{title}</Text>
3944
<Switch
4045
useCustomTheme
4146
key={key}
4247
testID={key}
4348
value={value}
4449
// @ts-ignore
45-
onValueChange={value => this.setState({[key]: value})}
50+
onValueChange={value => this.setState({[key]: value}, afterValueChanged)}
4651
/>
4752
</View>
4853
);

‎demo/src/screens/componentScreens/BadgesScreen.tsx

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -56,23 +56,23 @@ export default class BadgesScreen extends Component {
5656
label={'999'}
5757
labelFormatterLimit={2}
5858
borderWidth={2}
59-
borderColor={Colors.white}
59+
borderColor={Colors.$outlineInverted}
6060
/>
6161
<Badge labelFormatterLimit={1} size={16} label={'99999999'}/>
6262
</View>
6363

6464
<View row spread marginV-20>
65-
<Badge size={20} label={value.toString()} backgroundColor={Colors.red30}/>
65+
<Badge size={20} label={value.toString()} backgroundColor={Colors.$backgroundDangerHeavy}/>
6666
<Badge
6767
label={value.toString()}
68-
backgroundColor={Colors.red30}
68+
backgroundColor={Colors.$backgroundDangerHeavy}
6969
borderWidth={1}
7070
borderColor={Colors.$outlinePrimary}
7171
/>
7272
<Badge
7373
size={16}
7474
label={value.toString()}
75-
backgroundColor={Colors.red30}
75+
backgroundColor={Colors.$backgroundDangerHeavy}
7676
/>
7777
</View>
7878
<View center>
@@ -94,9 +94,9 @@ export default class BadgesScreen extends Component {
9494
</Text>
9595
</View>
9696
<View center style={{justifyContent: 'space-around', width: 40, height: 140}}>
97-
<Badge containerStyle={{marginLeft: BadgesSpace}} backgroundColor={Colors.green30} size={6}/>
98-
<Badge containerStyle={{marginLeft: BadgesSpace}} backgroundColor={Colors.red30} size={10}/>
99-
<Badge containerStyle={{marginLeft: BadgesSpace}} backgroundColor={Colors.blue30} size={14}/>
97+
<Badge containerStyle={{marginLeft: BadgesSpace}} backgroundColor={Colors.$backgroundSuccessHeavy} size={6}/>
98+
<Badge containerStyle={{marginLeft: BadgesSpace}} backgroundColor={Colors.$backgroundDangerHeavy} size={10}/>
99+
<Badge containerStyle={{marginLeft: BadgesSpace}} backgroundColor={Colors.$backgroundGeneralHeavy} size={14}/>
100100
</View>
101101
</View>
102102

@@ -109,30 +109,30 @@ export default class BadgesScreen extends Component {
109109
size={16}
110110
icon={star}
111111
borderWidth={1}
112-
borderColor={Colors.red30}
113-
iconStyle={{tintColor: Colors.red30}}
112+
borderColor={Colors.$outlineDanger}
113+
iconStyle={{tintColor: Colors.$iconDangerLight}}
114114
/>
115115
<Text $textDefault text80 style={{marginTop: 10}}>
116116
small(16)
117117
</Text>
118118
</View>
119119

120120
<View center>
121-
<Badge icon={star} iconStyle={{tintColor: Colors.red30}}/>
121+
<Badge icon={star} iconStyle={{tintColor: Colors.$iconDangerLight}}/>
122122
<Text $textDefault text80 style={{marginTop: 10}}>
123123
default(20)
124124
</Text>
125125
</View>
126126

127127
<View center>
128-
<Badge size={24} icon={star} iconStyle={{backgroundColor: Colors.red30}}/>
128+
<Badge size={24} icon={star} iconStyle={{backgroundColor: Colors.$iconDangerLight}}/>
129129
<Text $textDefault text80 style={{marginTop: 10}}>
130130
large(24)
131131
</Text>
132132
</View>
133133

134134
<View center>
135-
<Badge icon={star} borderRadius={6} iconStyle={{backgroundColor: Colors.red30}}/>
135+
<Badge icon={star} borderRadius={6} iconStyle={{backgroundColor: Colors.$iconDangerLight}}/>
136136
<Text $textDefault text80 style={{marginTop: 10}}>
137137
border radius
138138
</Text>
@@ -143,16 +143,16 @@ export default class BadgesScreen extends Component {
143143
Counter Icon Badges
144144
</Text>
145145
<View row spread marginH-50>
146-
<Badge marginR-10 label={'9999'} labelFormatterLimit={3} icon={bell} backgroundColor={Colors.red30}/>
147-
<Badge marginR-10 label={'4'} icon={bell} backgroundColor={Colors.red30}/>
146+
<Badge marginR-10 label={'9999'} labelFormatterLimit={3} icon={bell} backgroundColor={Colors.$backgroundDangerHeavy}/>
147+
<Badge marginR-10 label={'4'} icon={bell} backgroundColor={Colors.$backgroundDangerHeavy}/>
148148
</View>
149149

150150
<Text row center text50 $textDefault margin-25>
151151
Custom Element Badges
152152
</Text>
153153
<View row spread marginH-50>
154154
<Badge marginR-10 label={'17'} customElement={this.customElement1}/>
155-
<Badge marginR-10 customElement={this.customElement2} backgroundColor={Colors.grey30}/>
155+
<Badge marginR-10 customElement={this.customElement2} backgroundColor={Colors.$backgroundNeutralHeavy}/>
156156
</View>
157157
</ScrollView>
158158
</View>

0 commit comments

Comments
 (0)