Skip to content

Commit 0d8b608

Browse files
nitzanyiznitzanyiz
committed
Merge remote-tracking branch 'origin' into fix/SectionWheelPickerDriver_section_drivers
2 parents 5e55413 + 8bbe17c commit 0d8b608

File tree

37 files changed

+410
-212
lines changed

37 files changed

+410
-212
lines changed

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,12 +62,14 @@ export default class DateTimePickerScreen extends Component<{}, State> {
6262
<View padding-page>
6363
<Text text40>Date Time Picker</Text>
6464
<DateTimePicker
65+
migrateDialog
6566
containerStyle={{marginVertical: 20}}
6667
label={'Date'}
6768
placeholder={'Select a date'}
6869
// value={new Date('October 13, 2014')}
6970
/>
7071
<DateTimePicker
72+
migrateDialog
7173
mode={'time'}
7274
label={'Time'}
7375
placeholder={'Select time'}
@@ -78,12 +80,14 @@ export default class DateTimePickerScreen extends Component<{}, State> {
7880
Disabled
7981
</Text>
8082
<DateTimePicker
83+
migrateDialog
8184
containerStyle={{marginBottom: 20}}
8285
editable={false}
8386
label={'Date'}
8487
placeholder={'Select a date'}
8588
/>
8689
<DateTimePicker
90+
migrateDialog
8791
editable={false}
8892
mode={'time'}
8993
label={'Time'}
@@ -104,6 +108,7 @@ export default class DateTimePickerScreen extends Component<{}, State> {
104108
</View>
105109
</View>
106110
<DateTimePicker
111+
migrateDialog
107112
containerStyle={{marginVertical: 20}}
108113
renderInput={this.renderCustomInput}
109114
mode={mode}

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@ export default class FloatingButtonScreen extends Component<{}, State> {
1313
state = {
1414
showButton: true,
1515
showSecondary: true,
16-
showVertical: true
16+
showVertical: true,
17+
fullWidth: false
1718
};
1819

1920
notNow = () => {
@@ -34,6 +35,7 @@ export default class FloatingButtonScreen extends Component<{}, State> {
3435
Trigger Floating Button
3536
</Text>
3637
{renderBooleanOption.call(this, 'Show Floating Button', 'showButton')}
38+
{renderBooleanOption.call(this, 'Full Width Button', 'fullWidth')}
3739
{renderBooleanOption.call(this, 'Show Secondary Button', 'showSecondary')}
3840
{renderBooleanOption.call(this, 'Button Layout Vertical', 'showVertical')}
3941

@@ -64,6 +66,7 @@ export default class FloatingButtonScreen extends Component<{}, State> {
6466

6567
<FloatingButton
6668
visible={this.state.showButton}
69+
fullWidth={this.state.fullWidth}
6770
button={{
6871
label: 'Approve',
6972
onPress: this.close

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

Lines changed: 44 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,73 @@
11
import React, {useState} from 'react';
2-
import {Assets, View, Icon, Text, Slider, Switch, GradientSlider} from 'react-native-ui-lib';
2+
import {Assets, View, Icon, Text, Slider, GradientSlider, Colors} from 'react-native-ui-lib';
3+
import {renderBooleanOption} from '../ExampleScreenPresenter';
4+
5+
const DEFAULT_BADGE_SIZE = 20;
6+
const DEFAULT_PIMPLE_SIZE = 10;
37

48
const IconScreen = () => {
59
const [size, setSize] = useState(24);
10+
const [badgeSize, setBadgeSize] = useState(20);
611
const [customSize, setCustomSize] = useState(false);
12+
const [customBadgeSize, setCustomBadgeSize] = useState(false);
713
const [color, setColor] = useState<string | number>();
814
const [customColor, setCustomColor] = useState(false);
15+
const [useBadge, setUseBadge] = useState(false);
16+
const [usePimple, setUsePimple] = useState(false);
917

1018
return (
1119
<View padding-page>
1220
<Text h1 marginB-s4>
1321
Icon Screen
1422
</Text>
15-
<View center>
23+
<View center margin-page>
1624
<Icon
17-
margin-30
1825
size={customSize ? size : undefined}
19-
tintColor={customColor ? color as string : undefined}
26+
tintColor={customColor ? (color as string) : undefined}
2027
source={Assets.icons.search}
28+
badgeProps={
29+
useBadge
30+
? {
31+
size: customBadgeSize ? badgeSize : usePimple ? DEFAULT_PIMPLE_SIZE : DEFAULT_BADGE_SIZE,
32+
backgroundColor: Colors.red30,
33+
label: !usePimple ? '5' : undefined
34+
}
35+
: undefined
36+
}
2137
/>
2238
</View>
2339

24-
<View marginB-s3 row>
25-
<Text marginR-s2>Custom Size</Text>
26-
<Switch value={customSize} onValueChange={setCustomSize}/>
27-
</View>
40+
{renderBooleanOption('Custom Size', 'customSize', {spread: false, state: customSize, setState: setCustomSize})}
2841
<Slider maximumValue={100} value={24} step={1} onValueChange={setSize}/>
2942
<Text marginB-50 marginT-s2>
3043
Custom size: {size}
3144
</Text>
3245

33-
<View marginB-s3 row>
34-
<Text marginR-s2>Custom Color</Text>
35-
<Switch value={customColor} onValueChange={setCustomColor}/>
36-
</View>
46+
{renderBooleanOption('Custom Badge Size', 'customBadgeSize', {
47+
spread: false,
48+
state: customBadgeSize,
49+
setState: setCustomBadgeSize
50+
})}
51+
<Slider maximumValue={100} value={20} step={1} onValueChange={setBadgeSize}/>
52+
<Text marginB-50 marginT-s2>
53+
Custom badge size: {badgeSize}
54+
</Text>
55+
56+
{renderBooleanOption('Custom Color', 'customColor', {
57+
spread: false,
58+
state: customColor,
59+
setState: setCustomColor
60+
})}
3761
<GradientSlider type={GradientSlider.types.HUE} color={color as string} onValueChange={setColor}/>
3862
<Text marginT-s2>Custom color: {color || '#000000'}</Text>
63+
64+
<View marginV-s5>
65+
<Text marginR-s2 marginB-s2 text80BO>
66+
Badge Settings:
67+
</Text>
68+
{renderBooleanOption('Use Badge:', 'useBadge', {spread: false, state: useBadge, setState: setUseBadge})}
69+
{renderBooleanOption('Pimple Badge', 'showLabel', {spread: false, state: usePimple, setState: setUsePimple})}
70+
</View>
3971
</View>
4072
);
4173
};

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {
1313
PanningProvider,
1414
Typography,
1515
PickerProps,
16+
RenderCustomModalProps,
1617
PickerMethods,
1718
Button
1819
} from 'react-native-ui-lib'; //eslint-disable-line
@@ -73,15 +74,15 @@ export default class PickerScreen extends Component {
7374
contact: 0
7475
};
7576

76-
renderDialog: PickerProps['renderCustomModal'] = modalProps => {
77+
renderDialog: PickerProps['renderCustomModal'] = (modalProps: RenderCustomModalProps) => {
7778
const {visible, children, toggleModal, onDone} = modalProps;
7879

7980
return (
8081
<Incubator.Dialog
8182
visible={visible}
8283
onDismiss={() => {
8384
onDone();
84-
toggleModal(false);
85+
toggleModal();
8586
}}
8687
width="100%"
8788
height="45%"

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

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, {useCallback} from 'react';
22
import {StyleSheet} from 'react-native';
3-
import {Text, View, Colors, SegmentedControl, Assets, Spacings, BorderRadiuses} from 'react-native-ui-lib';
3+
import {Text, View, Colors, SegmentedControl, Assets, Spacings, BorderRadiuses, Typography} from 'react-native-ui-lib';
44

55
const segments = {
66
first: [{label: 'Left'}, {label: 'Right'}],
@@ -16,18 +16,21 @@ const segments = {
1616
],
1717
forth: [{label: 'With'}, {label: 'Custom'}, {label: 'Style'}],
1818
fifth: [{label: 'Full'}, {label: 'Width'}],
19-
sixth: [{label: 'Full'}, {label: 'Width'}, {label: 'With'}, {label: 'A'}, {label: 'Very Long Segment'}]
19+
sixth: [{label: 'Full'}, {label: 'Width'}, {label: 'With'}, {label: 'A'}, {label: 'Very Long Segment'}],
20+
seventh: [{label: '$'}, {label: '%'}]
2021
};
2122

2223
const SegmentedControlScreen = () => {
23-
2424
const onChangeIndex = useCallback((index: number) => {
2525
console.warn('Index ' + index + ' of the second segmentedControl was pressed');
2626
}, []);
2727

2828
return (
2929
<View flex bottom padding-page>
30-
<View flex centerV>
30+
<Text center text40 $textDefault>
31+
Segmented Control
32+
</Text>
33+
<View flex marginT-s8>
3134
<View center>
3235
<SegmentedControl segments={segments.first}/>
3336
<SegmentedControl
@@ -53,18 +56,17 @@ const SegmentedControlScreen = () => {
5356
segmentsStyle={styles.customSegmentsStyle}
5457
/>
5558
</View>
59+
<SegmentedControl containerStyle={styles.container} segments={segments.fifth}/>
60+
<SegmentedControl containerStyle={styles.container} segments={segments.sixth}/>
61+
<Text marginT-s4 center>
62+
Custom Typography
63+
</Text>
5664
<SegmentedControl
5765
containerStyle={styles.container}
58-
segments={segments.fifth}
59-
/>
60-
<SegmentedControl
61-
containerStyle={styles.container}
62-
segments={segments.sixth}
66+
segments={segments.seventh}
67+
segmentLabelStyle={styles.customTypography}
6368
/>
6469
</View>
65-
<Text text40 $textDefault>
66-
Segmented Control
67-
</Text>
6870
</View>
6971
);
7072
};
@@ -79,6 +81,9 @@ const styles = StyleSheet.create({
7981
},
8082
customSegmentsStyle: {
8183
height: 50
84+
},
85+
customTypography: {
86+
...Typography.text80BO
8287
}
8388
});
8489

‎demo/src/screens/incubatorScreens/IncubatorExpandableOverlayScreen.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,7 @@ export default class TextFieldScreen extends Component {
112112
useDialog
113113
expandableContent={this.renderPickerContent()}
114114
dialogProps={{bottom: true, onDismiss: () => console.warn('Dialog is dismissed')}}
115+
migrateDialog
115116
>
116117
{this.renderColorRow(selectedColor)}
117118
</Incubator.ExpandableOverlay>

‎docuilib/docusaurus.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const darkCodeTheme = require('prism-react-renderer/themes/dracula');
1717
trailingSlash: false,
1818
customFields: {
1919
docsMainEntry: 'getting-started/setup',
20-
expoSnackLink: 'https://snack.expo.io/@ethanshar/rnuilib_snack?platform=ios&supportedPlatforms=ios,android',
20+
expoSnackLink: 'https://snack.expo.io/@ethanshar/rnuilib_snack',
2121
stars: '4.7'
2222
},
2323
plugins: ['docusaurus-plugin-sass'],

‎src/components/badge/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -285,7 +285,7 @@ function createStyles(props: BadgeProps) {
285285
badge: {
286286
alignSelf: 'flex-start',
287287
borderRadius: BorderRadiuses.br100,
288-
backgroundColor: (!props.icon || props.customElement) ? Colors.$backgroundGeneralHeavy : undefined,
288+
backgroundColor: !props.icon || props.customElement ? Colors.$backgroundGeneralHeavy : undefined,
289289
alignItems: 'center',
290290
justifyContent: 'center',
291291
overflow: 'hidden'

0 commit comments

Comments
 (0)