Skip to content

Commit d969388

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

Some content is hidden

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

56 files changed

+1027
-790
lines changed

‎demo/src/screens/MenuStructure.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ export const navigationData = {
5151
title: 'Form',
5252
screens: [
5353
{title: 'Checkbox', tags: 'checkbox toggle controls', screen: 'unicorn.components.CheckboxScreen'},
54-
{title: 'Color Picker', tags: 'color picker control', screen: 'unicorn.components.ColorPickerScreen'},
54+
{title: 'ColorPicker', tags: 'color picker control', screen: 'unicorn.components.ColorPickerScreen'},
5555
{title: 'Color Swatch', tags: 'color swatch and palette', screen: 'unicorn.components.ColorSwatchScreen'},
5656
{title: 'TextField', tags: 'text input field form', screen: 'unicorn.components.TextFieldScreen'},
5757
{title: 'NumberInput', tags: 'number input', screen: 'unicorn.components.NumberInputScreen'},

‎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/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/componentScreens/SliderScreen.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,6 @@ export default class SliderScreen extends Component<SliderScreenProps, SliderScr
112112
step={1}
113113
containerStyle={styles.sliderContainer}
114114
disableRTL={forceLTR}
115-
// @ts-expect-error
116115
ref={this.slider}
117116
onReset={this.onSliderReset}
118117
/>
@@ -208,7 +207,6 @@ export default class SliderScreen extends Component<SliderScreenProps, SliderScr
208207
maximumValue={100}
209208
step={1}
210209
disableRTL={forceLTR}
211-
// @ts-expect-error
212210
ref={this.rangeSlider}
213211
onReset={this.onRangeSliderReset}
214212
/>

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

Lines changed: 22 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ const contents = [
77
'SUCCESS state with label.',
88
'ERROR state with icon.',
99
'Custom color with icon and outline.\nAligned to title',
10+
'Icon without background.',
1011
'NEXT state with outline.',
1112
'NEXT state with circle point and entry point.'
1213
];
@@ -27,8 +28,10 @@ const TimelineScreen = () => {
2728
const renderExtraContent = () => {
2829
return (
2930
<View style={{flex: 1, marginTop: 10, backgroundColor: Colors.grey70}}>
30-
<Text>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
31-
Lorem Ipsum is simply dummy text of the printing and typesetting industry</Text>
31+
<Text>
32+
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of
33+
the printing and typesetting industry
34+
</Text>
3235
</View>
3336
);
3437
};
@@ -62,7 +65,7 @@ const TimelineScreen = () => {
6265
<Timeline
6366
// key={String(expand)}
6467
// topLine={{
65-
// type: Timeline.lineTypes.DASHED,
68+
// type: Timeline.lineTypes.DASHED,
6669
// entry: true
6770
// }}
6871
bottomLine={{type: Timeline.lineTypes.DASHED}}
@@ -107,10 +110,23 @@ const TimelineScreen = () => {
107110
>
108111
{renderContent(3)}
109112
</Timeline>
113+
<Timeline
114+
topLine={{type: Timeline.lineTypes.DASHED, color: Colors.purple30}}
115+
bottomLine={{
116+
type: Timeline.lineTypes.DASHED,
117+
color: Colors.blue30
118+
}}
119+
point={{
120+
icon: Assets.icons.demo.camera,
121+
removeIconBackground: true
122+
}}
123+
>
124+
{renderContent(4)}
125+
</Timeline>
110126
<Timeline
111127
topLine={{
112128
type: Timeline.lineTypes.DASHED,
113-
color: Colors.purple30
129+
color: Colors.blue30
114130
}}
115131
bottomLine={{
116132
state: Timeline.states.NEXT,
@@ -121,7 +137,7 @@ const TimelineScreen = () => {
121137
type: Timeline.pointTypes.OUTLINE
122138
}}
123139
>
124-
{renderContent(4)}
140+
{renderContent(5)}
125141
</Timeline>
126142

127143
<Timeline
@@ -138,7 +154,7 @@ const TimelineScreen = () => {
138154
type: Timeline.pointTypes.CIRCLE
139155
}}
140156
>
141-
{renderContent(5)}
157+
{renderContent(6)}
142158
</Timeline>
143159
</ScrollView>
144160
</>

‎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>

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ const IncubatorSliderScreen = () => {
2121
const [sliderMaxValue, setSliderMaxValue] = useState(INITIAL_MAX);
2222

2323
const [color, setColor] = useState(COLOR);
24+
const [groupColor, setGroupColor] = useState(Colors.yellow30);
2425
const [alpha, setAlpha] = useState(1);
2526

2627
const slider = useRef<Incubator.SliderRef>(null);
@@ -58,7 +59,7 @@ const IncubatorSliderScreen = () => {
5859
}, []);
5960

6061
const onGroupValueChange = (value: string) => {
61-
console.log('onGroupValueChange: ', value);
62+
setGroupColor(value);
6263
};
6364

6465
const renderValuesBox = (min: number, max?: number) => {
@@ -235,9 +236,9 @@ const IncubatorSliderScreen = () => {
235236
Color Slider Group
236237
</Text>
237238
<ColorSliderGroup
238-
initialColor={color}
239+
initialColor={groupColor}
239240
sliderContainerStyle={styles.slider}
240-
containerStyle={styles.group}
241+
containerStyle={[styles.group, {borderWidth: 12, borderColor: groupColor}]}
241242
showLabels
242243
onValueChange={onGroupValueChange}
243244
migrate

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,8 @@
102102
"object-hash": "^3.0.0",
103103
"postcss": "^8.4.21",
104104
"postcss-js": "^4.0.0",
105-
"prettier-eslint": "12.0.0",
105+
"prettier": "^3.2.5",
106+
"prettier-eslint": "16.3.0",
106107
"react": "18.2.0",
107108
"react-autobind": "^1.0.6",
108109
"react-dom": "^18.2.0",

‎src/commons/modifiers.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ export type CustomModifier = {[key: string]: boolean};
104104
// TODO: migrate other modifiers to the same new structure as Margin modifier, using template literals
105105
export type TypographyModifiers = Modifier<TypographyLiterals> | CustomModifier;
106106
export type ColorsModifiers = Modifier<ColorLiterals> | CustomModifier;
107-
export type BackgroundColorModifier = Modifier<'bg'>;
107+
export type BackgroundColorModifier = Modifier<`bg-${ColorLiterals}`>;
108108
export type AlignmentModifiers = Modifier<AlignmentLiterals>;
109109
export type PositionModifiers = Modifier<PositionLiterals>;
110110
export type PaddingModifiers = Modifier<PaddingLiterals>;

‎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)