Skip to content

Commit d62d88d

Browse files
Update example to 0.61.5 (ptomasroos#158)
* Refreshed the example project * Switch to functional component * Symlink working through metro bundle process * Fix: Labels would always crash if only one slider used * Styles were never passed to labels, so removing * Add xMarkerPressed bools as props to customLabel * Animated CustomLabel for example project * Adjust for sliderRadius in DefaultLabel * Add back in bottom positioning for example label * One line fix for iOS example slider wonky-ness * Ignore lock/pod files, include ios project files * Fixed some weird artifacts with the default labels * fixed some alignment offset
1 parent e254be2 commit d62d88d

Some content is hidden

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

44 files changed

+919
-7270
lines changed

.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -27,3 +27,4 @@ project.xcworkspace
2727
node_modules/
2828
npm-debug.log
2929
.idea/
30+
*.lock

DefaultLabel.js

+51-29
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,66 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
33

4-
import { View, Text, StyleSheet, Platform, TouchableHighlight } from 'react-native';
5-
6-
const ViewPropTypes = require('react-native').ViewPropTypes || ViewPropTypes;
4+
import { View, Text, StyleSheet } from 'react-native';
75

6+
const sliderRadius = 3;
7+
const width = 50;
88
export default class DefaultLabel extends React.Component {
99
static propTypes = {
1010
leftDiff: PropTypes.number,
1111

12-
labelStyle: ViewPropTypes.style,
13-
labelTextStyle: ViewPropTypes.style,
14-
15-
oneMarkerValue: PropTypes.oneOfType([
16-
PropTypes.string,
17-
PropTypes.number
18-
]),
19-
twoMarkerValue: PropTypes.oneOfType([
20-
PropTypes.string,
21-
PropTypes.number
22-
]),
12+
oneMarkerValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
13+
twoMarkerValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
2314

2415
oneMarkerLeftPosition: PropTypes.number,
25-
twoMarkerLeftPosition: PropTypes.number
16+
twoMarkerLeftPosition: PropTypes.number,
17+
18+
oneMarkerPressed: PropTypes.bool,
19+
twoMarkerPressed: PropTypes.bool,
2620
};
2721

2822
static defaultProps = {
2923
leftDiff: 0,
30-
labelStyle: {},
31-
labelTextStyle: {}
3224
};
3325

3426
render() {
35-
const {leftDiff, labelStyle, labelTextStyle, oneMarkerValue, twoMarkerValue, oneMarkerLeftPosition, twoMarkerLeftPosition} = this.props;
27+
const {
28+
leftDiff,
29+
oneMarkerValue,
30+
twoMarkerValue,
31+
oneMarkerLeftPosition,
32+
twoMarkerLeftPosition,
33+
oneMarkerPressed,
34+
twoMarkerPressed,
35+
} = this.props;
3636

3737
return (
38-
<View style={{position: 'relative'}}>
39-
<View style={[styles.sliderLabel, {left: (oneMarkerLeftPosition - leftDiff)}, labelStyle]}>
40-
<Text style={[styles.sliderLabelText, labelTextStyle]}>{oneMarkerValue}</Text>
41-
</View>
38+
<View style={{ position: 'relative' }}>
39+
{Number.isFinite(oneMarkerLeftPosition) &&
40+
Number.isFinite(oneMarkerValue) && (
41+
<View
42+
style={[
43+
styles.sliderLabel,
44+
{ left: oneMarkerLeftPosition - width / 2 + sliderRadius },
45+
oneMarkerPressed && styles.markerPressed,
46+
]}
47+
>
48+
<Text style={styles.sliderLabelText}>{oneMarkerValue}</Text>
49+
</View>
50+
)}
4251

43-
<View style={[styles.sliderLabel, {left: (twoMarkerLeftPosition - leftDiff)}, labelStyle]}>
44-
<Text style={[styles.sliderLabelText, labelTextStyle]}>{twoMarkerValue}</Text>
45-
</View>
52+
{Number.isFinite(twoMarkerLeftPosition) &&
53+
Number.isFinite(twoMarkerValue) && (
54+
<View
55+
style={[
56+
styles.sliderLabel,
57+
{ left: twoMarkerLeftPosition - width / 2 + sliderRadius },
58+
twoMarkerPressed && styles.markerPressed,
59+
]}
60+
>
61+
<Text style={styles.sliderLabelText}>{twoMarkerValue}</Text>
62+
</View>
63+
)}
4664
</View>
4765
);
4866
}
@@ -51,15 +69,19 @@ export default class DefaultLabel extends React.Component {
5169
const styles = StyleSheet.create({
5270
sliderLabel: {
5371
position: 'absolute',
54-
top: -24,
55-
minWidth: 51,
72+
bottom: 0,
73+
minWidth: width,
5674
padding: 8,
57-
backgroundColor: '#fff',
75+
backgroundColor: '#f1f1f1',
5876
},
5977
sliderLabelText: {
6078
alignItems: 'center',
6179
textAlign: 'center',
6280
fontStyle: 'normal',
63-
fontSize: 11
81+
fontSize: 11,
82+
},
83+
markerPressed: {
84+
borderWidth: 2,
85+
borderColor: '#999',
6486
},
6587
});

DefaultMarker.js

+5-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,11 @@ class DefaultMarker extends React.Component {
1414
this.props.pressed && styles.pressedMarkerStyle,
1515
this.props.pressed && this.props.pressedMarkerStyle,
1616
]
17-
: [styles.markerStyle, styles.disabled, this.props.disabledMarkerStyle]
17+
: [
18+
styles.markerStyle,
19+
styles.disabled,
20+
this.props.disabledMarkerStyle,
21+
]
1822
}
1923
/>
2024
</TouchableHighlight>

MultiSlider.js

+2
Original file line numberDiff line numberDiff line change
@@ -563,6 +563,8 @@ export default class MultiSlider extends React.Component {
563563
twoMarkerValue={this.state.valueTwo}
564564
oneMarkerLeftPosition={positionOne}
565565
twoMarkerLeftPosition={positionTwo}
566+
oneMarkerPressed={this.state.onePressed}
567+
twoMarkerPressed={this.state.twoPressed}
566568
/>
567569
{this.props.imageBackgroundSource && (
568570
<ImageBackground

examples/Basic/.babelrc

-3
This file was deleted.

examples/Basic/.eslintrc.js

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
module.exports = {
2+
root: true,
3+
extends: '@react-native-community',
4+
};

examples/Basic/.flowconfig

+40-35
Original file line numberDiff line numberDiff line change
@@ -5,66 +5,71 @@
55
; Ignore "BUCK" generated dirs
66
<PROJECT_ROOT>/\.buckd/
77

8-
; Ignore unexpected extra "@providesModule"
9-
.*/node_modules/.*/node_modules/fbjs/.*
8+
; Ignore polyfills
9+
node_modules/react-native/Libraries/polyfills/.*
1010

11-
; Ignore duplicate module providers
12-
; For RN Apps installed via npm, "Libraries" folder is inside
13-
; "node_modules/react-native" but in the source repo it is in the root
14-
.*/Libraries/react-native/React.js
11+
; These should not be required directly
12+
; require from fbjs/lib instead: require('fbjs/lib/warning')
13+
node_modules/warning/.*
1514

16-
; Ignore polyfills
17-
.*/Libraries/polyfills/.*
15+
; Flow doesn't support platforms
16+
.*/Libraries/Utilities/LoadingView.js
1817

19-
; Ignore metro
20-
.*/node_modules/metro/.*
18+
[untyped]
19+
.*/node_modules/@react-native-community/cli/.*/.*
2120

2221
[include]
2322

2423
[libs]
2524
node_modules/react-native/Libraries/react-native/react-native-interface.js
2625
node_modules/react-native/flow/
27-
node_modules/react-native/flow-github/
2826

2927
[options]
3028
emoji=true
3129

3230
esproposal.optional_chaining=enable
3331
esproposal.nullish_coalescing=enable
3432

35-
module.system=haste
36-
module.system.haste.use_name_reducers=true
37-
# get basename
38-
module.system.haste.name_reducers='^.*/\([a-zA-Z0-9$_.-]+\.js\(\.flow\)?\)$' -> '\1'
39-
# strip .js or .js.flow suffix
40-
module.system.haste.name_reducers='^\(.*\)\.js\(\.flow\)?$' -> '\1'
41-
# strip .ios suffix
42-
module.system.haste.name_reducers='^\(.*\)\.ios$' -> '\1'
43-
module.system.haste.name_reducers='^\(.*\)\.android$' -> '\1'
44-
module.system.haste.name_reducers='^\(.*\)\.native$' -> '\1'
45-
module.system.haste.paths.blacklist=.*/__tests__/.*
46-
module.system.haste.paths.blacklist=.*/__mocks__/.*
47-
module.system.haste.paths.blacklist=<PROJECT_ROOT>/node_modules/react-native/Libraries/Animated/src/polyfills/.*
48-
module.system.haste.paths.whitelist=<PROJECT_ROOT>/node_modules/react-native/Libraries/.*
33+
module.file_ext=.js
34+
module.file_ext=.json
35+
module.file_ext=.ios.js
4936

5037
munge_underscores=true
5138

52-
module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'
53-
54-
module.file_ext=.js
55-
module.file_ext=.jsx
56-
module.file_ext=.json
57-
module.file_ext=.native.js
39+
module.name_mapper='^react-native$' -> '<PROJECT_ROOT>/node_modules/react-native/Libraries/react-native/react-native-implementation'
40+
module.name_mapper='^react-native/\(.*\)$' -> '<PROJECT_ROOT>/node_modules/react-native/\1'
41+
module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> '<PROJECT_ROOT>/node_modules/react-native/Libraries/Image/RelativeImageStub'
5842

5943
suppress_type=$FlowIssue
6044
suppress_type=$FlowFixMe
6145
suppress_type=$FlowFixMeProps
6246
suppress_type=$FlowFixMeState
6347

64-
suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
65-
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
66-
suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
48+
suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native\\(_ios\\)?_\\(oss\\|fb\\)[a-z,_]*\\)?)\\)
49+
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native\\(_ios\\)?_\\(oss\\|fb\\)[a-z,_]*\\)?)\\)?:? #[0-9]+
6750
suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
6851

52+
[lints]
53+
sketchy-null-number=warn
54+
sketchy-null-mixed=warn
55+
sketchy-number=warn
56+
untyped-type-import=warn
57+
nonstrict-import=warn
58+
deprecated-type=warn
59+
unsafe-getters-setters=warn
60+
inexact-spread=warn
61+
unnecessary-invariant=warn
62+
signature-verification-failure=warn
63+
deprecated-utility=error
64+
65+
[strict]
66+
deprecated-type
67+
nonstrict-import
68+
sketchy-null
69+
unclear-type
70+
unsafe-getters-setters
71+
untyped-import
72+
untyped-type-import
73+
6974
[version]
70-
^0.78.0
75+
^0.105.0

examples/Basic/.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
# OSX
22
#
33
.DS_Store
4+
Pods
45

56
# Xcode
67
#

examples/Basic/.prettierrc.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
bracketSpacing: false,
3+
jsxBracketSameLine: true,
4+
singleQuote: true,
5+
trailingComma: 'all',
6+
};

0 commit comments

Comments
 (0)