unicorn-demo-app 6.17.2 → 6.18.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/src/screens/componentScreens/PickerScreen.tsx +40 -0
  3. package/src/screens/componentScreens/SliderScreen.tsx +64 -24
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "unicorn-demo-app",
3
- "version": "6.17.2",
3
+ "version": "6.18.0",
4
4
  "main": "src/index.js",
5
5
  "author": "Ethan Sharabi <ethan.shar@gmail.com>",
6
6
  "license": "MIT",
package/src/screens/componentScreens/PickerScreen.tsx CHANGED
@@ -40,6 +40,12 @@ const filters = [
40
40
  {label: 'Scheduled', value: 3}
41
41
  ];
42
42
 
43
+ const schemes = [
44
+ {label: 'Default', value: 1},
45
+ {label: 'Light', value: 2},
46
+ {label: 'Dark', value: 3}
47
+ ];
48
+
43
49
  export default class PickerScreen extends Component {
44
50
  picker = React.createRef<PickerMethods>();
45
51
  state = {
@@ -51,6 +57,7 @@ export default class PickerScreen extends Component {
51
57
  nativePickerValue: 'java',
52
58
  customModalValues: [],
53
59
  filter: filters[0],
60
+ scheme: schemes[0].value,
54
61
  contact: 0
55
62
  };
56
63
 
@@ -299,6 +306,39 @@ export default class PickerScreen extends Component {
299
306
  style={{alignSelf: 'flex-start'}}
300
307
  onPress={() => this.picker.current?.openExpandable?.()}
301
308
  />
309
+
310
+ <Text text60 marginT-s5>
311
+ Different Field Types
312
+ </Text>
313
+ <Text text80 marginB-s5>(Form/Filter/Settings)</Text>
314
+
315
+ <Picker
316
+ migrate
317
+ migrateTextField
318
+ value={this.state.filter}
319
+ onChange={value => this.setState({filter: value})}
320
+ placeholder="Filter posts"
321
+ fieldType={Picker.fieldTypes.filter}
322
+ marginB-s3
323
+ >
324
+ {filters.map(filter => (
325
+ <Picker.Item key={filter.value} {...filter}/>
326
+ ))}
327
+ </Picker>
328
+
329
+ <Picker
330
+ migrate
331
+ migrateTextField
332
+ value={this.state.scheme}
333
+ onChange={value => this.setState({scheme: value})}
334
+ label="Color Scheme"
335
+ placeholder="Filter posts"
336
+ fieldType={Picker.fieldTypes.settings}
337
+ >
338
+ {schemes.map(scheme => (
339
+ <Picker.Item key={scheme.value} {...scheme}/>
340
+ ))}
341
+ </Picker>
302
342
  </View>
303
343
  </ScrollView>
304
344
  );
package/src/screens/componentScreens/SliderScreen.tsx CHANGED
@@ -1,9 +1,7 @@
1
1
  import React, {Component} from 'react';
2
2
  import {StyleSheet, ScrollView} from 'react-native';
3
3
  import {Colors, View, Text, Icon, Slider, GradientSlider, ColorSliderGroup, Constants} from 'react-native-ui-lib';
4
-
5
- const INITIAL_VALUE = 0;
6
- const COLOR = Colors.blue30;
4
+ import {renderBooleanOption} from '../ExampleScreenPresenter';
7
5
 
8
6
  interface SliderScreenProps {
9
7
  componentId: string;
@@ -13,18 +11,28 @@ interface SliderScreenState {
13
11
  alpha: number;
14
12
  color: string;
15
13
  sliderValue: number;
14
+ sliderMinValue: number;
15
+ sliderMaxValue: number;
16
+ forceLTR: boolean;
16
17
  }
17
18
 
19
+ const INITIAL_VALUE = 0;
20
+ const COLOR = Colors.blue30;
21
+
18
22
  export default class SliderScreen extends Component<SliderScreenProps, SliderScreenState> {
19
- constructor(props: SliderScreenProps) {
20
- super(props);
21
-
22
- this.state = {
23
- alpha: 1,
24
- color: COLOR,
25
- sliderValue: INITIAL_VALUE
26
- };
27
- }
23
+ state = {
24
+ alpha: 1,
25
+ color: COLOR,
26
+ sliderValue: INITIAL_VALUE,
27
+ sliderMinValue: 0,
28
+ sliderMaxValue: 100,
29
+ forceLTR: false
30
+ };
31
+
32
+ onSliderRangeChange = (values: {min: number, max: number}) => {
33
+ const {min, max} = values;
34
+ this.setState({sliderMinValue: min, sliderMaxValue: max});
35
+ };
28
36
 
29
37
  onSliderValueChange = (value: number) => {
30
38
  this.setState({sliderValue: value});
@@ -38,17 +46,26 @@ export default class SliderScreen extends Component<SliderScreenProps, SliderScr
38
46
  console.warn('onGroupValueChange: ', value);
39
47
  };
40
48
 
49
+ getReverseStyle = () => {
50
+ return Constants.isRTL && this.state.forceLTR && styles.ltr;
51
+ }
52
+
41
53
  render() {
42
- const {color, alpha, sliderValue} = this.state;
54
+ const {color, alpha, sliderValue, sliderMinValue, sliderMaxValue, forceLTR} = this.state;
43
55
 
44
56
  return (
45
57
  <ScrollView showsVerticalScrollIndicator={false}>
46
58
  <View flex padding-20>
47
- <Text titleHuge $textDefault marginB-20>
59
+ <Text text40 $textDefault marginB-20>
48
60
  Sliders
49
61
  </Text>
50
62
 
51
- <View row centerV style={Constants.isRTL && styles.ltr}>
63
+ {Constants.isRTL && renderBooleanOption.call(this, 'Force LTR', 'forceLTR')}
64
+
65
+ <Text $textDefault text70BO marginB-10>
66
+ Default slider
67
+ </Text>
68
+ <View row centerV style={this.getReverseStyle()}>
52
69
  <Icon assetName={'search'} style={styles.image}/>
53
70
  <Slider
54
71
  onValueChange={this.onSliderValueChange}
@@ -57,14 +74,14 @@ export default class SliderScreen extends Component<SliderScreenProps, SliderScr
57
74
  maximumValue={100}
58
75
  step={1}
59
76
  containerStyle={styles.sliderContainer}
60
- disableRTL
77
+ disableRTL={forceLTR}
61
78
  />
62
- <Text bodySmall $textNeutral style={styles.text}>
63
- {sliderValue}%
79
+ <Text bodySmall $textNeutral style={styles.text} numberOfLines={1}>
80
+ ${sliderValue}
64
81
  </Text>
65
82
  </View>
66
83
 
67
- <Text $textDefault marginT-30>
84
+ <Text $textDefault text70BO marginT-30>
68
85
  Negatives
69
86
  </Text>
70
87
  <Slider
@@ -84,12 +101,12 @@ export default class SliderScreen extends Component<SliderScreenProps, SliderScr
84
101
  containerStyle={styles.slider}
85
102
  />
86
103
 
87
- <Text $textDefault marginT-20>
104
+ <Text $textDefault text70BO marginT-20>
88
105
  Disabled
89
106
  </Text>
90
107
  <Slider minimumValue={100} maximumValue={200} value={120} containerStyle={styles.slider} disabled/>
91
108
 
92
- <Text $textDefault marginT-15>
109
+ <Text $textDefault text70BO marginT-15>
93
110
  Custom with Steps
94
111
  </Text>
95
112
  <Slider
@@ -106,7 +123,28 @@ export default class SliderScreen extends Component<SliderScreenProps, SliderScr
106
123
  maximumTrackTintColor={Colors.violet70}
107
124
  />
108
125
 
109
- <Text $textDefault marginT-15>
126
+ <Text $textDefault text70BO marginV-15>
127
+ Range slider
128
+ </Text>
129
+ <View row spread style={this.getReverseStyle()}>
130
+ <Text bodySmall $textNeutral>
131
+ min. {sliderMinValue}%
132
+ </Text>
133
+ <Text bodySmall $textNeutral>
134
+ max. {sliderMaxValue}%
135
+ </Text>
136
+ </View>
137
+ <Slider
138
+ useRange
139
+ onRangeChange={this.onSliderRangeChange}
140
+ value={INITIAL_VALUE}
141
+ minimumValue={0}
142
+ maximumValue={100}
143
+ step={1}
144
+ disableRTL={forceLTR}
145
+ />
146
+
147
+ <Text $textDefault text70BO marginT-15>
110
148
  Gradient Sliders
111
149
  </Text>
112
150
  <View row centerV>
@@ -137,7 +175,7 @@ export default class SliderScreen extends Component<SliderScreenProps, SliderScr
137
175
  </View>
138
176
  </View>
139
177
 
140
- <Text $textDefault marginT-25 marginB-20>
178
+ <Text $textDefault text70BO marginV-15>
141
179
  Color Slider Group
142
180
  </Text>
143
181
  <ColorSliderGroup
@@ -189,7 +227,9 @@ const styles = StyleSheet.create({
189
227
  activeThumb: {
190
228
  width: 40,
191
229
  height: 40,
192
- borderRadius: 20
230
+ borderRadius: 20,
231
+ borderColor: Colors.yellow30,
232
+ borderWidth: 2
193
233
  },
194
234
  box: {
195
235
  width: 20,