Skip to content

Commit

Permalink
Merge branch 'master' into release
Browse files Browse the repository at this point in the history
  • Loading branch information
@lidord-wix
lidord-wix committed Jul 20, 2023
2 parents 5da37a7 + eb77e3c commit 0b8e33a
Show file tree
Hide file tree
Showing 59 changed files with 1,700 additions and 605 deletions.
3 changes: 0 additions & 3 deletions demo/src/screens/ExampleScreenPresenter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,6 @@ export function renderBooleanOption(title: string,
{title}
</Text>
<Switch
useCustomTheme
key={key}
testID={key}
value={value}
Expand Down Expand Up @@ -84,7 +83,6 @@ export function renderBooleanGroup(title: string, options: string[]) {
<View spread centerH row key={key}>
<Checkbox
marginR-s2
useCustomTheme
key={key}
testID={key}
value={value}
Expand Down Expand Up @@ -125,7 +123,6 @@ export function renderRadioGroup(title: string,
{_.map(options, (value, key) => {
return (
<RadioButton
useCustomTheme
testID={key}
key={key}
marginB-s2
Expand Down
44 changes: 22 additions & 22 deletions demo/src/screens/__tests__/__snapshots__/AvatarScreen.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ exports[`AvatarScreen renders screen 1`] = `
{
"backgroundColor": "transparent",
"color": "#20303C",
"textAlign": "left",
"writingDirection": "ltr",
},
undefined,
{
Expand Down Expand Up @@ -159,7 +159,7 @@ exports[`AvatarScreen renders screen 1`] = `
{
"backgroundColor": "transparent",
"color": "#20303C",
"textAlign": "left",
"writingDirection": "ltr",
},
undefined,
{
Expand Down Expand Up @@ -289,7 +289,7 @@ exports[`AvatarScreen renders screen 1`] = `
{
"backgroundColor": "transparent",
"color": "#20303C",
"textAlign": "left",
"writingDirection": "ltr",
},
{
"fontFamily": "System",
Expand Down Expand Up @@ -342,7 +342,7 @@ exports[`AvatarScreen renders screen 1`] = `
{
"backgroundColor": "transparent",
"color": "#20303C",
"textAlign": "left",
"writingDirection": "ltr",
},
undefined,
{
Expand Down Expand Up @@ -444,7 +444,7 @@ exports[`AvatarScreen renders screen 1`] = `
{
"backgroundColor": "transparent",
"color": "#20303C",
"textAlign": "left",
"writingDirection": "ltr",
},
undefined,
undefined,
Expand Down Expand Up @@ -514,7 +514,7 @@ exports[`AvatarScreen renders screen 1`] = `
{
"backgroundColor": "transparent",
"color": "#20303C",
"textAlign": "left",
"writingDirection": "ltr",
},
{
"fontFamily": "System",
Expand Down Expand Up @@ -567,7 +567,7 @@ exports[`AvatarScreen renders screen 1`] = `
{
"backgroundColor": "transparent",
"color": "#20303C",
"textAlign": "left",
"writingDirection": "ltr",
},
undefined,
{
Expand Down Expand Up @@ -669,7 +669,7 @@ exports[`AvatarScreen renders screen 1`] = `
{
"backgroundColor": "transparent",
"color": "#20303C",
"textAlign": "left",
"writingDirection": "ltr",
},
undefined,
undefined,
Expand Down Expand Up @@ -797,7 +797,7 @@ exports[`AvatarScreen renders screen 1`] = `
{
"backgroundColor": "transparent",
"color": "#20303C",
"textAlign": "left",
"writingDirection": "ltr",
},
undefined,
{
Expand Down Expand Up @@ -1048,7 +1048,7 @@ exports[`AvatarScreen renders screen 1`] = `
{
"backgroundColor": "transparent",
"color": "#20303C",
"textAlign": "left",
"writingDirection": "ltr",
},
undefined,
{
Expand Down Expand Up @@ -1299,7 +1299,7 @@ exports[`AvatarScreen renders screen 1`] = `
{
"backgroundColor": "transparent",
"color": "#20303C",
"textAlign": "left",
"writingDirection": "ltr",
},
undefined,
{
Expand Down Expand Up @@ -1501,7 +1501,7 @@ exports[`AvatarScreen renders screen 1`] = `
{
"backgroundColor": "transparent",
"color": "#20303C",
"textAlign": "left",
"writingDirection": "ltr",
},
undefined,
{
Expand Down Expand Up @@ -1752,7 +1752,7 @@ exports[`AvatarScreen renders screen 1`] = `
{
"backgroundColor": "transparent",
"color": "#20303C",
"textAlign": "left",
"writingDirection": "ltr",
},
undefined,
{
Expand Down Expand Up @@ -2047,7 +2047,7 @@ exports[`AvatarScreen renders screen 1`] = `
{
"backgroundColor": "transparent",
"color": "#20303C",
"textAlign": "left",
"writingDirection": "ltr",
},
undefined,
{
Expand Down Expand Up @@ -2231,7 +2231,7 @@ exports[`AvatarScreen renders screen 1`] = `
{
"backgroundColor": "transparent",
"color": "#20303C",
"textAlign": "left",
"writingDirection": "ltr",
},
undefined,
{
Expand Down Expand Up @@ -2338,7 +2338,7 @@ exports[`AvatarScreen renders screen 1`] = `
{
"backgroundColor": "transparent",
"color": "#20303C",
"textAlign": "left",
"writingDirection": "ltr",
},
undefined,
undefined,
Expand Down Expand Up @@ -2457,7 +2457,7 @@ exports[`AvatarScreen renders screen 1`] = `
{
"backgroundColor": "transparent",
"color": "#20303C",
"textAlign": "left",
"writingDirection": "ltr",
},
undefined,
{
Expand Down Expand Up @@ -2564,7 +2564,7 @@ exports[`AvatarScreen renders screen 1`] = `
{
"backgroundColor": "transparent",
"color": "#20303C",
"textAlign": "left",
"writingDirection": "ltr",
},
undefined,
undefined,
Expand Down Expand Up @@ -2683,7 +2683,7 @@ exports[`AvatarScreen renders screen 1`] = `
{
"backgroundColor": "transparent",
"color": "#20303C",
"textAlign": "left",
"writingDirection": "ltr",
},
undefined,
{
Expand Down Expand Up @@ -2867,7 +2867,7 @@ exports[`AvatarScreen renders screen 1`] = `
{
"backgroundColor": "transparent",
"color": "#20303C",
"textAlign": "left",
"writingDirection": "ltr",
},
undefined,
{
Expand Down Expand Up @@ -2969,7 +2969,7 @@ exports[`AvatarScreen renders screen 1`] = `
{
"backgroundColor": "transparent",
"color": "#20303C",
"textAlign": "left",
"writingDirection": "ltr",
},
undefined,
undefined,
Expand Down Expand Up @@ -3079,7 +3079,7 @@ exports[`AvatarScreen renders screen 1`] = `
{
"backgroundColor": "transparent",
"color": "#20303C",
"textAlign": "left",
"writingDirection": "ltr",
},
undefined,
undefined,
Expand Down
14 changes: 7 additions & 7 deletions demo/src/screens/componentScreens/ColorPickerScreen.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
import _ from 'lodash';
import React, {Component} from 'react';
import {StyleSheet, ScrollView} from 'react-native';
import {Colors, View, Text, ColorPicker, ColorPalette, ColorName} from 'react-native-ui-lib';
import {Colors, View, Text, ColorPicker, ColorPalette, ColorName, ColorInfo} from 'react-native-ui-lib';
import {renderMultipleSegmentOptions} from '../ExampleScreenPresenter';

interface Props {}
interface State {
color: string;
textColor?: string;
Expand All @@ -14,6 +13,7 @@ interface State {
}

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

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

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

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

render() {
Expand Down
55 changes: 23 additions & 32 deletions demo/src/screens/componentScreens/NumberInputScreen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,9 +41,6 @@ const NumberInputScreen = () => {
case 'valid':
newText = currentData.current.formattedNumber;
break;
case 'empty':
newText = 'Empty';
break;
case 'error':
newText = `Error: value '${currentData.current.userInput}' is invalid`;
break;
Expand Down Expand Up @@ -73,18 +70,6 @@ const NumberInputScreen = () => {
}
}, [showLabel, exampleType]);

const placeholder = useMemo(() => {
switch (exampleType) {
case 'price':
default:
return 'Price';
case 'percentage':
return 'Discount';
case 'number':
return 'Any number';
}
}, [exampleType]);

const fractionDigits = useMemo(() => {
switch (exampleType) {
case 'price':
Expand Down Expand Up @@ -158,9 +143,26 @@ const NumberInputScreen = () => {
}
}, [exampleType]);

const textStyle = useMemo(() => {
return [styles.mainText, !leadingText && {marginLeft: Spacings.s4}, !trailingText && {marginRight: Spacings.s4}];
}, [leadingText, trailingText]);

const textFieldProps = useMemo(() => {
return {
label,
labelStyle: styles.label,
style: textStyle,
validate,
validationMessage,
validationMessageStyle: Typography.text80M,
validateOnChange: true,
centered: true
};
}, [label, textStyle, validate, validationMessage]);

return (
<TouchableWithoutFeedback onPress={RNKeyboard.dismiss}>
<View flex centerH>
<TouchableWithoutFeedback style={{flex: 1}} onPress={RNKeyboard.dismiss}>
<View centerH flex>
<Text text40 margin-s10>
Number Input
</Text>
Expand All @@ -174,30 +176,19 @@ const NumberInputScreen = () => {
],
{state: exampleType, setState: setExampleType})}

<View flex center>
<View marginT-50 centerH>
<NumberInput
key={exampleType}
// initialNumber={100}
label={label}
labelStyle={styles.label}
placeholder={placeholder}
// initialNumber={12.1}
// contextMenuHidden={false}
textFieldProps={textFieldProps}
fractionDigits={fractionDigits}
onChangeNumber={onChangeNumber}
leadingText={leadingText}
leadingTextStyle={leadingText && [styles.infoText, {marginLeft: Spacings.s4}]}
trailingText={trailingText}
trailingTextStyle={trailingText && [styles.infoText, {marginRight: Spacings.s4}]}
style={[
styles.mainText,
!leadingText && {marginLeft: Spacings.s4},
!trailingText && {marginRight: Spacings.s4}
]}
containerStyle={styles.containerStyle}
validate={validate}
validationMessage={validationMessage}
validationMessageStyle={Typography.text80M}
validateOnChange
centered
/>
<Text marginT-s5>{text}</Text>
</View>
Expand Down
Loading

0 comments on commit 0b8e33a

Please sign in to comment.