Skip to content

Commit 30f2b49

Browse files
adids1221adids1221
committed
Merge branch 'master' into release
2 parents e26b401 + 825189c commit 30f2b49

19 files changed

+899
-21
lines changed

‎demo/src/screens/MenuStructure.js

+1
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@ export const navigationData = {
6969
},
7070
{title: 'Stepper', tags: 'stepper form', screen: 'unicorn.components.StepperScreen'},
7171
{title: 'Slider', tags: 'slider', screen: 'unicorn.components.SliderScreen'},
72+
{title: 'Slider (Incubator)', tags: 'slider', screen: 'unicorn.components.IncubatorSliderScreen'},
7273
{title: 'Switch', tags: 'switch toggle', screen: 'unicorn.components.SwitchScreen'},
7374
{title: 'Masked Inputs', tags: 'text input form mask', screen: 'unicorn.components.MaskedInputScreen'},
7475
{

‎demo/src/screens/PlaygroundScreen.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import _ from 'lodash';
21
import React, {Component} from 'react';
32
import {StyleSheet} from 'react-native';
43
import {View, Text, Card, TextField, Button} from 'react-native-ui-lib'; //eslint-disable-line
@@ -8,7 +7,7 @@ export default class PlaygroundScreen extends Component {
87
return (
98
<View bg-grey80 flex padding-20>
109
<View marginT-20>
11-
<TextField migrate placeholder="Placeholder" />
10+
<TextField migrate placeholder="Placeholder"/>
1211
</View>
1312
<Card height={100} center padding-20>
1413
<Text text50>Playground Screen</Text>
@@ -22,5 +21,5 @@ export default class PlaygroundScreen extends Component {
2221
}
2322

2423
const styles = StyleSheet.create({
25-
container: {},
24+
container: {}
2625
});

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

+221
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,221 @@
1+
import React, {useState, useRef, useCallback} from 'react';
2+
import {StyleSheet, ScrollView} from 'react-native';
3+
import {Constants, Colors, View, Text, Button, Incubator} from 'react-native-ui-lib'; //eslint-disable-line
4+
import {renderBooleanOption} from '../ExampleScreenPresenter';
5+
6+
const VALUE = 20;
7+
const NEGATIVE_VALUE = -30;
8+
const MIN = 0;
9+
const MAX = 100;
10+
const INITIAL_MIN = 10;
11+
const INITIAL_MAX = 70;
12+
13+
const IncubatorSliderScreen = () => {
14+
const [disableRTL, setDisableRTL] = useState<boolean>(false);
15+
16+
const [sliderValue, setSliderValue] = useState(0);
17+
const [customSliderValue, setCustomSliderValue] = useState(VALUE);
18+
const [negativeSliderValue, setNegativeSliderValue] = useState(NEGATIVE_VALUE);
19+
const [sliderMinValue, setSliderMinValue] = useState(INITIAL_MIN);
20+
const [sliderMaxValue, setSliderMaxValue] = useState(INITIAL_MAX);
21+
22+
const slider = useRef<typeof Incubator.Slider>();
23+
const customSlider = useRef<typeof Incubator.Slider>();
24+
const negativeSlider = useRef<typeof Incubator.Slider>();
25+
const rangeSlider = useRef<typeof Incubator.Slider>();
26+
27+
const resetSliders = useCallback(() => {
28+
slider.current?.reset();
29+
customSlider.current?.reset();
30+
rangeSlider.current?.reset();
31+
negativeSlider.current?.reset();
32+
}, []);
33+
34+
const onValueChange = useCallback((value: number) => {
35+
setSliderValue(value);
36+
}, []);
37+
38+
const onCustomValueChange = useCallback((value: number) => {
39+
setCustomSliderValue(value);
40+
}, []);
41+
42+
const onNegativeValueChange = useCallback((value: number) => {
43+
setNegativeSliderValue(value);
44+
}, []);
45+
46+
const onRangeChange = useCallback((value: {min: number; max: number}) => {
47+
setSliderMaxValue(value.max);
48+
setSliderMinValue(value.min);
49+
}, []);
50+
51+
const renderValuesBox = (min: number, max?: number) => {
52+
if (max !== undefined) {
53+
return (
54+
<View row spread marginB-20>
55+
<Text bodySmall $textNeutral>
56+
min. {min}
57+
</Text>
58+
<Text bodySmall $textNeutral>
59+
max. {max}
60+
</Text>
61+
</View>
62+
);
63+
} else {
64+
return (
65+
<View center marginB-20>
66+
<Text bodySmall $textNeutral>
67+
value: {min}
68+
</Text>
69+
</View>
70+
);
71+
}
72+
};
73+
74+
const renderDefaultSliderExample = () => {
75+
return (
76+
<View>
77+
<Text margin-10 text70BL $textDefault>
78+
Default Slider values 0 to 1
79+
</Text>
80+
{renderValuesBox(sliderValue)}
81+
<Incubator.Slider
82+
ref={slider}
83+
onValueChange={onValueChange}
84+
containerStyle={styles.container}
85+
disableRTL={disableRTL}
86+
// maximumValue={0}
87+
// maximumValue={50}
88+
step={0.1}
89+
/>
90+
</View>
91+
);
92+
};
93+
94+
const renderDisabledSliderExample = () => {
95+
return (
96+
<View marginT-20>
97+
<Text margin-10 text70BL $textDefault>
98+
Disabled Slider
99+
</Text>
100+
<Incubator.Slider value={0.4} containerStyle={styles.container} disableRTL={disableRTL} disabled/>
101+
</View>
102+
);
103+
};
104+
105+
const renderCustomSliderExample = () => {
106+
return (
107+
<View marginT-20 marginH-40>
108+
<Text margin-10 text70BL $textDefault>
109+
Custom Slider
110+
</Text>
111+
{renderValuesBox(customSliderValue)}
112+
<Incubator.Slider
113+
ref={customSlider}
114+
onValueChange={onCustomValueChange}
115+
value={20}
116+
minimumValue={0}
117+
maximumValue={100}
118+
containerStyle={styles.container}
119+
trackStyle={styles.customTrack}
120+
minimumTrackTintColor={Colors.grey30}
121+
maximumTrackTintColor={Colors.grey70}
122+
// thumbTintColor={Colors.orange30}
123+
thumbStyle={styles.customThumb}
124+
activeThumbStyle={styles.customActiveThumb}
125+
disableRTL={disableRTL}
126+
// disableActiveStyling
127+
/>
128+
</View>
129+
);
130+
};
131+
132+
const renderNegativeSliderExample = () => {
133+
return (
134+
<View marginT-20>
135+
<Text margin-10 text70BL $textDefault>
136+
Negative values -20 to -100 initial -30
137+
</Text>
138+
{renderValuesBox(negativeSliderValue)}
139+
<Incubator.Slider
140+
ref={negativeSlider}
141+
onValueChange={onNegativeValueChange}
142+
value={-30}
143+
minimumValue={-100}
144+
maximumValue={-20}
145+
// step={10}
146+
containerStyle={styles.container}
147+
disableRTL={disableRTL}
148+
/>
149+
</View>
150+
);
151+
};
152+
153+
const renderRangeSliderExample = () => {
154+
return (
155+
<View marginT-20>
156+
<Text margin-10 text70BL $textDefault>
157+
Range Slider values 0 to 100
158+
</Text>
159+
<View marginH-20>
160+
{renderValuesBox(sliderMinValue, sliderMaxValue)}
161+
<Incubator.Slider
162+
ref={rangeSlider}
163+
useRange
164+
useGap
165+
onRangeChange={onRangeChange}
166+
minimumValue={MIN}
167+
maximumValue={MAX}
168+
initialMinimumValue={INITIAL_MIN}
169+
initialMaximumValue={INITIAL_MAX}
170+
step={1}
171+
disableRTL={disableRTL}
172+
/>
173+
</View>
174+
</View>
175+
);
176+
};
177+
178+
return (
179+
<ScrollView showsVerticalScrollIndicator={false} style={{backgroundColor: Colors.$backgroundDefault}}>
180+
<View row spread margin-20>
181+
<Text h1 $textDefault>
182+
Slider
183+
</Text>
184+
<Button link label="Reset Sliders" onPress={resetSliders}/>
185+
</View>
186+
<View marginL-20>
187+
{Constants.isRTL &&
188+
renderBooleanOption('Disable RTL', 'disableRTL', {spread: false, state: disableRTL, setState: setDisableRTL})}
189+
</View>
190+
{renderDefaultSliderExample()}
191+
{renderDisabledSliderExample()}
192+
{renderCustomSliderExample()}
193+
{renderNegativeSliderExample()}
194+
{renderRangeSliderExample()}
195+
</ScrollView>
196+
);
197+
};
198+
199+
export default IncubatorSliderScreen;
200+
201+
const styles = StyleSheet.create({
202+
container: {
203+
marginHorizontal: 20
204+
},
205+
customTrack: {
206+
borderRadius: 1.5,
207+
height: 3
208+
},
209+
customThumb: {
210+
width: 14,
211+
height: 14,
212+
borderRadius: 7,
213+
backgroundColor: Colors.black,
214+
borderColor: Colors.black
215+
},
216+
customActiveThumb: {
217+
backgroundColor: Colors.red30,
218+
borderWidth: 2,
219+
borderColor: Colors.red70
220+
}
221+
});

‎demo/src/screens/incubatorScreens/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -8,4 +8,5 @@ export function registerScreens(registrar) {
88
registrar('unicorn.components.IncubatorExpandableOverlayScreen', () => require('./IncubatorExpandableOverlayScreen').default);
99
registrar('unicorn.components.IncubatorToastScreen', () => require('./IncubatorToastScreen').default);
1010
registrar('unicorn.incubator.PanViewScreen', () => require('./PanViewScreen').default);
11+
registrar('unicorn.components.IncubatorSliderScreen', () => gestureHandlerRootHOC(require('./IncubatorSliderScreen').default));
1112
}

‎jest-setup.js

+12-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {NativeModules, AccessibilityInfo} from 'react-native';
1+
import {NativeModules, AccessibilityInfo, Animated} from 'react-native';
22
global._UILIB_TESTING = true;
33

44
NativeModules.StatusBarManager = {getHeight: jest.fn()};
@@ -49,6 +49,17 @@ jest.mock('react-native', () => {
4949
return reactNative;
5050
});
5151

52+
Animated.timing = (value, config) => ({
53+
start: callback => {
54+
value.setValue(config.toValue);
55+
callback?.();
56+
}
57+
});
58+
Animated.parallel = () => ({
59+
start: () => {}
60+
});
61+
Animated.event = () => {};
62+
5263
if (typeof String.prototype.replaceAll === 'undefined') {
5364
// eslint-disable-next-line no-extend-native
5465
String.prototype.replaceAll = function (match, replace) {

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-native-ui-lib",
3-
"version": "5.0.0",
3+
"version": "7.0.0",
44
"main": "src/index.ts",
55
"types": "src/index.d.ts",
66
"author": "Ethan Sharabi <[email protected]>",

‎src/components/chipsInput/chipsInput.api.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{
22
"name": "ChipsInput",
3-
"category": "incubator",
3+
"category": "form",
44
"description": "A chips input",
5-
"extends": ["Incubator/TextField"],
5+
"extends": ["form/TextField"],
66
"modifiers": ["margin", "color", "typography"],
77
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/incubatorScreens/IncubatorChipsInputScreen.tsx",
88
"images": [],

‎src/components/dateTimePicker/dateTimePicker.api.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"category": "form",
44
"description": "Date and Time Picker Component that wraps RNDateTimePicker for date and time modes. See: https://github.com/react-native-community/react-native-datetimepicker#react-native-datetimepicker",
55
"note": "DateTimePicker uses a native library. You MUST add and link the native library to both iOS and Android projects",
6-
"extends": ["incubator/TextField"],
6+
"extends": ["form/TextField"],
77
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/DateTimePickerScreen.tsx",
88
"images": [
99
"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/DateTimePicker/DateTimePicker_iOS.gif?raw=true, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/DateTimePicker/DateTimePicker_Android.gif?raw=true"

‎src/components/numberInput/numberInput.api.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"category": "form",
44
"description": "Number Input to create an input with a formatted number",
55
"note": "This requires RN67 to work on Android.",
6-
"extends": ["incubator/TextField"],
6+
"extends": ["form/TextField"],
77
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/NumberInputScreen.tsx",
88
"props": [
99
{

‎src/components/picker/PickerItem.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ const PickerItem = (props: PickerItemProps) => {
2525
disabled,
2626
selectedIcon = Assets.icons.check,
2727
selectedIconColor = Colors.$iconPrimary,
28+
onPress,
2829
testID
2930
} = props;
3031
const context = useContext(PickerContext);
@@ -62,13 +63,14 @@ const PickerItem = (props: PickerItemProps) => {
6263
}, [isItemDisabled, labelStyle]);
6364

6465
const _onPress = useCallback(() => {
66+
onPress?.();
6567
if (migrate) {
6668
context.onPress(value);
6769
} else {
6870
// @ts-expect-error TODO: fix after removing migrate prop completely
6971
context.onPress(typeof value === 'object' || context.isMultiMode ? value : ({value, label: itemLabel}) as PickerSingleValue);
7072
}
71-
}, [migrate, value, context.onPress]);
73+
}, [migrate, value, context.onPress, onPress]);
7274

7375
const onSelectedLayout = useCallback((...args: any[]) => {
7476
_.invoke(context, 'onSelectedLayout', ...args);

‎src/components/picker/api/pickerItem.api.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
{"name": "selectedIcon", "type": "string", "description": "Pass to change the selected icon"},
2424
{"name": "selectedIconColor", "type": "ImageSource", "description": "Pass to change the selected icon color"},
2525
{"name": "disabled", "type": "boolean", "description": "Is the item disabled"},
26-
{"name": "onPress", "type": "(value: string | number) => void", "description": "Callback for onPress action"},
26+
{"name": "onPress", "type": "() => void", "description": "Callback for onPress action"},
2727
{
2828
"name": "onSelectedLayout",
2929
"type": "(event: LayoutChangeEvent) => void",

‎src/components/textField/textField.api.json

-9
This file was deleted.

0 commit comments

Comments
 (0)