Skip to content

Commit 0b8e33a

Browse files
lidord-wixlidord-wix
committed
Merge branch 'master' into release
2 parents 5da37a7 + eb77e3c commit 0b8e33a

Some content is hidden

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

59 files changed

+1700
-605
lines changed

‎demo/src/screens/ExampleScreenPresenter.tsx

-3
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,6 @@ export function renderBooleanOption(title: string,
5353
{title}
5454
</Text>
5555
<Switch
56-
useCustomTheme
5756
key={key}
5857
testID={key}
5958
value={value}
@@ -84,7 +83,6 @@ export function renderBooleanGroup(title: string, options: string[]) {
8483
<View spread centerH row key={key}>
8584
<Checkbox
8685
marginR-s2
87-
useCustomTheme
8886
key={key}
8987
testID={key}
9088
value={value}
@@ -125,7 +123,6 @@ export function renderRadioGroup(title: string,
125123
{_.map(options, (value, key) => {
126124
return (
127125
<RadioButton
128-
useCustomTheme
129126
testID={key}
130127
key={key}
131128
marginB-s2

‎demo/src/screens/__tests__/__snapshots__/AvatarScreen.spec.js.snap

+22-22
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ exports[`AvatarScreen renders screen 1`] = `
3636
{
3737
"backgroundColor": "transparent",
3838
"color": "#20303C",
39-
"textAlign": "left",
39+
"writingDirection": "ltr",
4040
},
4141
undefined,
4242
{
@@ -159,7 +159,7 @@ exports[`AvatarScreen renders screen 1`] = `
159159
{
160160
"backgroundColor": "transparent",
161161
"color": "#20303C",
162-
"textAlign": "left",
162+
"writingDirection": "ltr",
163163
},
164164
undefined,
165165
{
@@ -289,7 +289,7 @@ exports[`AvatarScreen renders screen 1`] = `
289289
{
290290
"backgroundColor": "transparent",
291291
"color": "#20303C",
292-
"textAlign": "left",
292+
"writingDirection": "ltr",
293293
},
294294
{
295295
"fontFamily": "System",
@@ -342,7 +342,7 @@ exports[`AvatarScreen renders screen 1`] = `
342342
{
343343
"backgroundColor": "transparent",
344344
"color": "#20303C",
345-
"textAlign": "left",
345+
"writingDirection": "ltr",
346346
},
347347
undefined,
348348
{
@@ -444,7 +444,7 @@ exports[`AvatarScreen renders screen 1`] = `
444444
{
445445
"backgroundColor": "transparent",
446446
"color": "#20303C",
447-
"textAlign": "left",
447+
"writingDirection": "ltr",
448448
},
449449
undefined,
450450
undefined,
@@ -514,7 +514,7 @@ exports[`AvatarScreen renders screen 1`] = `
514514
{
515515
"backgroundColor": "transparent",
516516
"color": "#20303C",
517-
"textAlign": "left",
517+
"writingDirection": "ltr",
518518
},
519519
{
520520
"fontFamily": "System",
@@ -567,7 +567,7 @@ exports[`AvatarScreen renders screen 1`] = `
567567
{
568568
"backgroundColor": "transparent",
569569
"color": "#20303C",
570-
"textAlign": "left",
570+
"writingDirection": "ltr",
571571
},
572572
undefined,
573573
{
@@ -669,7 +669,7 @@ exports[`AvatarScreen renders screen 1`] = `
669669
{
670670
"backgroundColor": "transparent",
671671
"color": "#20303C",
672-
"textAlign": "left",
672+
"writingDirection": "ltr",
673673
},
674674
undefined,
675675
undefined,
@@ -797,7 +797,7 @@ exports[`AvatarScreen renders screen 1`] = `
797797
{
798798
"backgroundColor": "transparent",
799799
"color": "#20303C",
800-
"textAlign": "left",
800+
"writingDirection": "ltr",
801801
},
802802
undefined,
803803
{
@@ -1048,7 +1048,7 @@ exports[`AvatarScreen renders screen 1`] = `
10481048
{
10491049
"backgroundColor": "transparent",
10501050
"color": "#20303C",
1051-
"textAlign": "left",
1051+
"writingDirection": "ltr",
10521052
},
10531053
undefined,
10541054
{
@@ -1299,7 +1299,7 @@ exports[`AvatarScreen renders screen 1`] = `
12991299
{
13001300
"backgroundColor": "transparent",
13011301
"color": "#20303C",
1302-
"textAlign": "left",
1302+
"writingDirection": "ltr",
13031303
},
13041304
undefined,
13051305
{
@@ -1501,7 +1501,7 @@ exports[`AvatarScreen renders screen 1`] = `
15011501
{
15021502
"backgroundColor": "transparent",
15031503
"color": "#20303C",
1504-
"textAlign": "left",
1504+
"writingDirection": "ltr",
15051505
},
15061506
undefined,
15071507
{
@@ -1752,7 +1752,7 @@ exports[`AvatarScreen renders screen 1`] = `
17521752
{
17531753
"backgroundColor": "transparent",
17541754
"color": "#20303C",
1755-
"textAlign": "left",
1755+
"writingDirection": "ltr",
17561756
},
17571757
undefined,
17581758
{
@@ -2047,7 +2047,7 @@ exports[`AvatarScreen renders screen 1`] = `
20472047
{
20482048
"backgroundColor": "transparent",
20492049
"color": "#20303C",
2050-
"textAlign": "left",
2050+
"writingDirection": "ltr",
20512051
},
20522052
undefined,
20532053
{
@@ -2231,7 +2231,7 @@ exports[`AvatarScreen renders screen 1`] = `
22312231
{
22322232
"backgroundColor": "transparent",
22332233
"color": "#20303C",
2234-
"textAlign": "left",
2234+
"writingDirection": "ltr",
22352235
},
22362236
undefined,
22372237
{
@@ -2338,7 +2338,7 @@ exports[`AvatarScreen renders screen 1`] = `
23382338
{
23392339
"backgroundColor": "transparent",
23402340
"color": "#20303C",
2341-
"textAlign": "left",
2341+
"writingDirection": "ltr",
23422342
},
23432343
undefined,
23442344
undefined,
@@ -2457,7 +2457,7 @@ exports[`AvatarScreen renders screen 1`] = `
24572457
{
24582458
"backgroundColor": "transparent",
24592459
"color": "#20303C",
2460-
"textAlign": "left",
2460+
"writingDirection": "ltr",
24612461
},
24622462
undefined,
24632463
{
@@ -2564,7 +2564,7 @@ exports[`AvatarScreen renders screen 1`] = `
25642564
{
25652565
"backgroundColor": "transparent",
25662566
"color": "#20303C",
2567-
"textAlign": "left",
2567+
"writingDirection": "ltr",
25682568
},
25692569
undefined,
25702570
undefined,
@@ -2683,7 +2683,7 @@ exports[`AvatarScreen renders screen 1`] = `
26832683
{
26842684
"backgroundColor": "transparent",
26852685
"color": "#20303C",
2686-
"textAlign": "left",
2686+
"writingDirection": "ltr",
26872687
},
26882688
undefined,
26892689
{
@@ -2867,7 +2867,7 @@ exports[`AvatarScreen renders screen 1`] = `
28672867
{
28682868
"backgroundColor": "transparent",
28692869
"color": "#20303C",
2870-
"textAlign": "left",
2870+
"writingDirection": "ltr",
28712871
},
28722872
undefined,
28732873
{
@@ -2969,7 +2969,7 @@ exports[`AvatarScreen renders screen 1`] = `
29692969
{
29702970
"backgroundColor": "transparent",
29712971
"color": "#20303C",
2972-
"textAlign": "left",
2972+
"writingDirection": "ltr",
29732973
},
29742974
undefined,
29752975
undefined,
@@ -3079,7 +3079,7 @@ exports[`AvatarScreen renders screen 1`] = `
30793079
{
30803080
"backgroundColor": "transparent",
30813081
"color": "#20303C",
3082-
"textAlign": "left",
3082+
"writingDirection": "ltr",
30833083
},
30843084
undefined,
30853085
undefined,

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

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import _ from 'lodash';
22
import React, {Component} from 'react';
33
import {StyleSheet, ScrollView} from 'react-native';
4-
import {Colors, View, Text, ColorPicker, ColorPalette, ColorName} from 'react-native-ui-lib';
4+
import {Colors, View, Text, ColorPicker, ColorPalette, ColorName, ColorInfo} from 'react-native-ui-lib';
55
import {renderMultipleSegmentOptions} from '../ExampleScreenPresenter';
66

7-
interface Props {}
87
interface State {
98
color: string;
109
textColor?: string;
@@ -14,6 +13,7 @@ interface State {
1413
}
1514

1615
const INITIAL_COLOR = Colors.$backgroundPrimaryHeavy;
16+
// prettier-ignore
1717
const colors = [
1818
'#20303C', '#43515C', '#66737C', '#858F96', '#A3ABB0', '#C2C7CB', '#E0E3E5', '#F2F4F5',
1919
'#3182C8', '#4196E0', '#459FED', '#57a8ef', '#8fc5f4', '#b5d9f8', '#daecfb', '#ecf5fd',
@@ -25,7 +25,7 @@ const colors = [
2525
'#8B1079', '#A0138E', '#B13DAC', '#C164BD', '#D08BCD', '#E0B1DE', '#EFD8EE', '#F7EBF7'
2626
];
2727

28-
export default class ColorPickerScreen extends Component<Props, State> {
28+
export default class ColorPickerScreen extends Component<{}, State> {
2929
state: State = {
3030
color: INITIAL_COLOR,
3131
textColor: Colors.$textDefaultLight,
@@ -44,12 +44,12 @@ export default class ColorPickerScreen extends Component<Props, State> {
4444
this.setState({color, textColor, customColors: _.clone(customColors), paletteChange: false});
4545
};
4646

47-
onValueChange = (value: string, options: object) => {
48-
this.setState({color: value, textColor: options ? _.get(options, 'tintColor') : undefined, paletteChange: false});
47+
onValueChange = (value: string, colorInfo: ColorInfo) => {
48+
this.setState({color: value, textColor: colorInfo?.tintColor, paletteChange: false});
4949
};
5050

51-
onPaletteValueChange = (value: string, options: object) => {
52-
this.setState({color: value, textColor: options ? _.get(options, 'tintColor') : undefined, paletteChange: true});
51+
onPaletteValueChange = (value: string, colorInfo: ColorInfo) => {
52+
this.setState({color: value, textColor: colorInfo?.tintColor, paletteChange: true});
5353
};
5454

5555
render() {

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

+23-32
Original file line numberDiff line numberDiff line change
@@ -41,9 +41,6 @@ const NumberInputScreen = () => {
4141
case 'valid':
4242
newText = currentData.current.formattedNumber;
4343
break;
44-
case 'empty':
45-
newText = 'Empty';
46-
break;
4744
case 'error':
4845
newText = `Error: value '${currentData.current.userInput}' is invalid`;
4946
break;
@@ -73,18 +70,6 @@ const NumberInputScreen = () => {
7370
}
7471
}, [showLabel, exampleType]);
7572

76-
const placeholder = useMemo(() => {
77-
switch (exampleType) {
78-
case 'price':
79-
default:
80-
return 'Price';
81-
case 'percentage':
82-
return 'Discount';
83-
case 'number':
84-
return 'Any number';
85-
}
86-
}, [exampleType]);
87-
8873
const fractionDigits = useMemo(() => {
8974
switch (exampleType) {
9075
case 'price':
@@ -158,9 +143,26 @@ const NumberInputScreen = () => {
158143
}
159144
}, [exampleType]);
160145

146+
const textStyle = useMemo(() => {
147+
return [styles.mainText, !leadingText && {marginLeft: Spacings.s4}, !trailingText && {marginRight: Spacings.s4}];
148+
}, [leadingText, trailingText]);
149+
150+
const textFieldProps = useMemo(() => {
151+
return {
152+
label,
153+
labelStyle: styles.label,
154+
style: textStyle,
155+
validate,
156+
validationMessage,
157+
validationMessageStyle: Typography.text80M,
158+
validateOnChange: true,
159+
centered: true
160+
};
161+
}, [label, textStyle, validate, validationMessage]);
162+
161163
return (
162-
<TouchableWithoutFeedback onPress={RNKeyboard.dismiss}>
163-
<View flex centerH>
164+
<TouchableWithoutFeedback style={{flex: 1}} onPress={RNKeyboard.dismiss}>
165+
<View centerH flex>
164166
<Text text40 margin-s10>
165167
Number Input
166168
</Text>
@@ -174,30 +176,19 @@ const NumberInputScreen = () => {
174176
],
175177
{state: exampleType, setState: setExampleType})}
176178

177-
<View flex center>
179+
<View marginT-50 centerH>
178180
<NumberInput
179181
key={exampleType}
180-
// initialNumber={100}
181-
label={label}
182-
labelStyle={styles.label}
183-
placeholder={placeholder}
182+
// initialNumber={12.1}
183+
// contextMenuHidden={false}
184+
textFieldProps={textFieldProps}
184185
fractionDigits={fractionDigits}
185186
onChangeNumber={onChangeNumber}
186187
leadingText={leadingText}
187188
leadingTextStyle={leadingText && [styles.infoText, {marginLeft: Spacings.s4}]}
188189
trailingText={trailingText}
189190
trailingTextStyle={trailingText && [styles.infoText, {marginRight: Spacings.s4}]}
190-
style={[
191-
styles.mainText,
192-
!leadingText && {marginLeft: Spacings.s4},
193-
!trailingText && {marginRight: Spacings.s4}
194-
]}
195191
containerStyle={styles.containerStyle}
196-
validate={validate}
197-
validationMessage={validationMessage}
198-
validationMessageStyle={Typography.text80M}
199-
validateOnChange
200-
centered
201192
/>
202193
<Text marginT-s5>{text}</Text>
203194
</View>

0 commit comments

Comments
 (0)