fetch upstream

.github/ISSUE_TEMPLATE.md

@@ -0,0 +1,30 @@
+<!--
+  Thanks for reporting a issue!
+
+  In order to be able to help out I need you to provide a
+  reproduction repository. That means you should provide a reachable repository which reproduces the issue you're experiencing.
+
+  This will greatly improve the chance for you to get the bug fixed and me to be able to find it.
+-->
+
+- [ ] I have searched [existing issues](https://github.com/ptomasroos/react-native-multi-slider/issues)
+- [ ] I am using the [latest multi slider version](https://www.npmjs.com/package/@ptomasroos/react-native-multi-slider)
+
+<!--
+  Describe your issue in detail.
+-->
+
+## Steps to Reproduce
+<!--
+  Required. Let us know how to reproduce the issue. Include a code sample or issue will be closed.
+-->
+
+## Expected Behavior
+<!--
+  Write what you thought would happen.
+-->
+
+## Actual Behavior
+<!--
+  Write what happened. Include screenshots if needed.
+-->

.gitignore

@@ -26,3 +26,5 @@ project.xcworkspace
 #
 node_modules/
 npm-debug.log
+.idea/
+*.lock

.npmignore

@@ -1,2 +1,4 @@
 docs/
-example/
+examples/
+.idea/
+node_modules/

.prettierrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  bracketSpacing: true,
+  singleQuote: true,
+  trailingComma: 'all',
+};

CHANGELOG

@@ -1,3 +1,30 @@
+# 1.0.0
+- Vertically centered slider 
+
+# 0.0.14
+ - RTL support
+
+# 0.0.13
+ - Pass currentValue to Markers
+ - Missing var statement
+ - Allow different types of left and right markers in a single slider
+ - Improvements on marker alignment on large gaps
+
+# 0.0.12
+
+Various updates:
+
+- modernize converters code
+- valueToPosition uses closest index function
+- improve cWRP to handle min, max properly changes
+- fix wierd bug on multiple values
+- fixed valueToPosition again
+- ignore termination request
+
+# 0.0.11
+
+Updated ViewProps to support older versions
+
 # 0.0.10
 
 BREAKING: Updated PropTypes imports for React 16

DefaultLabel.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { View, Text, StyleSheet } from 'react-native';
+
+const sliderRadius = 3;
+const width = 50;
+export default class DefaultLabel extends React.Component {
+  static propTypes = {
+    oneMarkerValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    twoMarkerValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+    oneMarkerLeftPosition: PropTypes.number,
+    twoMarkerLeftPosition: PropTypes.number,
+
+    oneMarkerPressed: PropTypes.bool,
+    twoMarkerPressed: PropTypes.bool,
+  };
+
+  render() {
+    const {
+      oneMarkerValue,
+      twoMarkerValue,
+      oneMarkerLeftPosition,
+      twoMarkerLeftPosition,
+      oneMarkerPressed,
+      twoMarkerPressed,
+    } = this.props;
+
+    return (
+      <View style={{ position: 'relative' }}>
+        {Number.isFinite(oneMarkerLeftPosition) &&
+          Number.isFinite(oneMarkerValue) && (
+            <View
+              style={[
+                styles.sliderLabel,
+                { left: oneMarkerLeftPosition - width / 2 },
+                oneMarkerPressed && styles.markerPressed,
+              ]}
+            >
+              <Text style={styles.sliderLabelText}>{oneMarkerValue}</Text>
+            </View>
+          )}
+
+        {Number.isFinite(twoMarkerLeftPosition) &&
+          Number.isFinite(twoMarkerValue) && (
+            <View
+              style={[
+                styles.sliderLabel,
+                { left: twoMarkerLeftPosition - width / 2 },
+                twoMarkerPressed && styles.markerPressed,
+              ]}
+            >
+              <Text style={styles.sliderLabelText}>{twoMarkerValue}</Text>
+            </View>
+          )}
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  sliderLabel: {
+    position: 'absolute',
+    bottom: 0,
+    minWidth: width,
+    padding: 8,
+    backgroundColor: '#f1f1f1',
+  },
+  sliderLabelText: {
+    alignItems: 'center',
+    textAlign: 'center',
+    fontStyle: 'normal',
+    fontSize: 11,
+  },
+  markerPressed: {
+    borderWidth: 2,
+    borderColor: '#999',
+  },
+});

DefaultMarker.js

@@ -1,30 +1,25 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-
 import { View, StyleSheet, Platform, TouchableHighlight } from 'react-native';
 
-const ViewPropTypes = require('react-native').ViewPropTypes || View.propTypes;
-
-export default class DefaultMarker extends React.Component {
-  static propTypes = {
-    pressed: PropTypes.bool,
-    pressedMarkerStyle: ViewPropTypes.style,
-    markerStyle: ViewPropTypes.style,
-    enabled: PropTypes.bool,
-    valuePrefix: PropTypes.string,
-    valueSuffix: PropTypes.string,
-  };
-
+class DefaultMarker extends React.Component {
   render() {
     return (
       <TouchableHighlight>
         <View
-          style={this.props.enabled ? [
-            styles.markerStyle,
-            this.props.markerStyle,
-            this.props.pressed && styles.pressedMarkerStyle,
-            this.props.pressed && this.props.pressedMarkerStyle,
-          ] : [styles.markerStyle, styles.disabled]}
+          style={
+            this.props.enabled
+              ? [
+                  styles.markerStyle,
+                  this.props.markerStyle,
+                  this.props.pressed && styles.pressedMarkerStyle,
+                  this.props.pressed && this.props.pressedMarkerStyle,
+                ]
+              : [
+                  styles.markerStyle,
+                  styles.disabled,
+                  this.props.disabledMarkerStyle,
+                ]
+          }
         />
       </TouchableHighlight>
     );
@@ -55,10 +50,26 @@ const styles = StyleSheet.create({
         borderRadius: 12,
         backgroundColor: '#0D8675',
       },
+      web: {
+        height: 30,
+        width: 30,
+        borderRadius: 30,
+        borderWidth: 1,
+        borderColor: '#DDDDDD',
+        backgroundColor: '#FFFFFF',
+        shadowColor: '#000000',
+        shadowOffset: {
+          width: 0,
+          height: 3,
+        },
+        shadowRadius: 1,
+        shadowOpacity: 0.2,
+      },
     }),
   },
   pressedMarkerStyle: {
     ...Platform.select({
+      web: {},
       ios: {},
       android: {
         height: 20,
@@ -71,3 +82,5 @@ const styles = StyleSheet.create({
     backgroundColor: '#d3d3d3',
   },
 });
+
+export default DefaultMarker;

LICENSE

@@ -1,6 +1,7 @@
 The MIT License (MIT)
 
-Copyright (c) Tomas Roos 2016.
+Copyright (c) jrans 2015-2016.
+Copyright (c) Tomas Roos.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal