@momo-kits/slider 0.0.33-beta → 0.0.39-beta

package/DefaultLabel.web.js

@@ -0,0 +1,86 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { View, StyleSheet } from 'react-native';
+import Text from '../../core/components/typography';
+
+const sliderRadius = 3;
+const width = 50;
+export default class DefaultLabel extends React.Component {
+    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 + sliderRadius },
+                            oneMarkerPressed && styles.markerPressed,
+                        ]}
+                    >
+                        <Text.SubTitle style={styles.sliderLabelText}>{oneMarkerValue}</Text.SubTitle>
+                    </View>
+                )
+                }
+
+                {
+                    Number.isFinite(twoMarkerLeftPosition)
+                  && Number.isFinite(twoMarkerValue)
+                  && (
+                      <View
+                          style={[
+                              styles.sliderLabel,
+                              { left: twoMarkerLeftPosition - width / 2 + sliderRadius },
+                              twoMarkerPressed && styles.markerPressed,
+                          ]}
+                      >
+                          <Text.SubTitle style={styles.sliderLabelText}>{twoMarkerValue}</Text.SubTitle>
+                      </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',
+    },
+});
+
+DefaultLabel.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,
+};

package/DefaultMarker.web.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import {
+    View, StyleSheet, Platform, TouchableHighlight
+} from 'react-native';
+import Colors from '../../core/colors';
+
+class DefaultMarker extends React.Component {
+    render() {
+        const {
+            enabled,
+            markerStyle,
+            pressed,
+            pressedMarkerStyle,
+            disabledMarkerStyle
+        } = this.props;
+        return (
+            <TouchableHighlight>
+                <View
+                    style={
+                        enabled
+                            ? [
+                                styles.markerStyle,
+                                markerStyle,
+                                pressed && styles.pressedMarkerStyle,
+                                pressed && pressedMarkerStyle,
+                            ]
+                            : [
+                                styles.markerStyle,
+                                styles.disabled,
+                                disabledMarkerStyle,
+                            ]
+                    }
+                />
+            </TouchableHighlight>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    markerStyle: {
+        height: 24,
+        width: 24,
+        borderRadius: 12,
+        borderWidth: 2,
+        borderColor: Colors.pink_03,
+        backgroundColor: '#FFFFFF',
+        shadowColor: '#000000',
+        shadowOffset: {
+            width: 0,
+            height: 3,
+        },
+        shadowRadius: 1,
+        shadowOpacity: 0.2,
+        elevation: 3
+    },
+    pressedMarkerStyle: {
+        ...Platform.select({
+            web: {},
+            ios: {},
+            android: {
+                height: 20,
+                width: 20,
+                borderRadius: 20,
+            },
+        }),
+    },
+    disabled: {
+        backgroundColor: '#d3d3d3',
+    },
+});
+
+export default DefaultMarker;

package/Slider.web.js

@@ -11,7 +11,7 @@ import { get } from 'lodash';
 import DefaultMarker from './DefaultMarker';
 import DefaultLabel from './DefaultLabel';
 import { createArray, valueToPosition, positionToValue } from './converters';
-import Colors from '../../colors';
+import Colors from '../../core/colors';
 
 export default class Slider extends Component {
     constructor(props) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/slider",
-  "version": "0.0.33-beta",
+  "version": "0.0.39-beta",
   "private": false,
   "main": "index.js",
   "dependencies": {},
@@ -11,13 +11,6 @@
     "lodash": "^4.17.15",
     "@momo-kits/core": ">=0.0.5-beta"
   },
-  "devDependencies": {
-    "metro-react-native-babel-preset": "^0.64.0",
-    "@babel/core": "^7.12.9",
-    "@babel/runtime": "^7.12.5"
-  },
-  "license": "MoMo",
-  "jest": {
-    "preset": "react-native"
-  }
+  "devDependencies": {},
+  "license": "MoMo"
 }

package/publish.sh

@@ -26,4 +26,4 @@ cd ..
 rm -rf dist
 
 
-echo  '{"text": "@momo-kits/stepper new version release: '*"$VERSION"*' https://www.npmjs.com/package/@momo-kits/stepper"}'
+curl -X POST -H 'Content-Type: application/json' 'https://chat.googleapis.com/v1/spaces/AAAAbP8987c/messages?key=AIzaSyDdI0hCZtE6vySjMm-WEfRq3CPzqKqqsHI&token=UGSFRvk_oYb9uGsAgs31bVvMm6jDkmD8zihGm3eyaQA%3D&threadKey=JoaXTEYaNNkl' -d '{"text": "@momo-kits/stepper new version release: '*"$VERSION"*' https://www.npmjs.com/package/@momo-kits/stepper"}'

package/babel.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-    presets: ['module:metro-react-native-babel-preset'],
-};