@momo-kits/slider 0.81.1-beta.6 → 0.81.1-rc.0

package/Label.tsx

@@ -25,7 +25,7 @@ const Label: ForwardRefRenderFunction<LabelRef, ViewProps> = (props, ref) => {
 
   return (
     <View {...props} style={[styles.label, Shadow.Light]}>
-      <Text typography={'label_s'}>{value}</Text>
+      <Text typography={'label_s_medium'}>{value}</Text>
     </View>
   );
 };

package/hooks.tsx

@@ -5,7 +5,7 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import {Animated, I18nManager, ViewStyle} from 'react-native';
+import {Animated} from 'react-native';
 import {clamp} from './helpers';
 import styles from './styles';
 import FollowerContainer, {LabelRef} from './Label';
@@ -29,7 +29,7 @@ export const useLowHigh = (
   highProp: number | undefined,
   min: number,
   max: number,
-  step: number,
+  step: number
 ) => {
   const validLowProp = lowProp === undefined ? min : clamp(lowProp, min, max);
   const validHighProp =
@@ -66,7 +66,7 @@ export const useLowHigh = (
  */
 export const useWidthLayout = (
   widthRef: MutableRefObject<number>,
-  callback?: (width: number) => void,
+  callback?: (width: number) => void
 ) => {
   return useCallback(
     ({nativeEvent}) => {
@@ -81,7 +81,7 @@ export const useWidthLayout = (
         }
       }
     },
-    [callback, widthRef],
+    [callback, widthRef]
   );
 };
 
@@ -108,7 +108,7 @@ export const useThumbFollower = (
   isPressed: boolean,
   allowOverflow: boolean,
   disabledLow: boolean,
-  disabledHigh: boolean,
+  disabledHigh: boolean
 ) => {
   const xRef = useRef(new Animated.Value(0));
   const widthRef = useRef(0);
@@ -129,17 +129,17 @@ export const useThumbFollower = (
       const {current: containerWidth} = containerWidthRef;
       const position = thumbPositionInView - width / 2;
       xRef.current.setValue(
-        allowOverflow ? position : clamp(position, 0, containerWidth - width),
+        allowOverflow ? position : clamp(position, 0, containerWidth - width)
       );
       contentContainerRef.current?.setValue(value);
     },
-    [widthRef, containerWidthRef, allowOverflow, disabledLow, disabledHigh], // Include dependencies here.
+    [widthRef, containerWidthRef, allowOverflow, disabledLow, disabledHigh] // Include dependencies here.
   );
 
   const handleLayout = useWidthLayout(widthRef, () => {
     update(
       gestureStateRef.current.lastPosition,
-      gestureStateRef.current.lastValue,
+      gestureStateRef.current.lastValue
     );
   });
 
@@ -170,7 +170,7 @@ export const useSelectedRail = (
   inPropsRef: MutableRefObject<InProps>,
   containerWidthRef: MutableRefObject<number>,
   thumbWidth: number,
-  disableRange: boolean,
+  disableRange: boolean
 ) => {
   const {current: left} = useRef(new Animated.Value(0));
   const {current: right} = useRef(new Animated.Value(0));
@@ -182,7 +182,7 @@ export const useSelectedRail = (
     const rightValue = (max - high) / fullScale;
     left.setValue(disableRange ? 0 : leftValue);
     right.setValue(
-      disableRange ? containerWidth - thumbWidth - leftValue : rightValue,
+      disableRange ? containerWidth - thumbWidth - leftValue : rightValue
     );
   }, [inPropsRef, containerWidthRef, disableRange, thumbWidth, left, right]);
   const styles = useMemo(
@@ -191,7 +191,7 @@ export const useSelectedRail = (
       left: left,
       right: right,
     }),
-    [left, right],
+    [left, right]
   );
   return [styles, update];
 };

package/index.tsx

@@ -115,324 +115,333 @@ export interface SliderProps extends ViewProps {
   onSliderTouchEnd?: (low: number, high: number) => void;
 }
 
-const Slider: React.FC<SliderProps> = ({
-  min,
-  max,
-  minRange = 0,
-  step,
-  low: lowProp,
-  high: highProp,
-  floatingLabel = false,
-  allowLabelOverflow = false,
-  disableRange = false,
-  disabledHigh = false,
-  disabledLow = false,
-  onValueChanged,
-  onSliderTouchStart,
-  onSliderTouchEnd,
-  ...restProps
-}) => {
-  const {theme} = useContext(ApplicationContext);
-
-  const {inPropsRef, inPropsRefPrev, setLow, setHigh} = useLowHigh(
-    lowProp,
-    disableRange ? max : highProp,
+const Slider: React.FC<SliderProps> = memo(
+  ({
     min,
     max,
+    minRange = 0,
     step,
-  );
-  const lowThumbXRef = useRef(new Animated.Value(0));
-  const highThumbXRef = useRef(new Animated.Value(0));
-  const pointerX = useRef(new Animated.Value(0)).current;
-  const {current: lowThumbX} = lowThumbXRef;
-  const {current: highThumbX} = highThumbXRef;
-
-  const gestureStateRef = useRef({isLow: true, lastValue: 0, lastPosition: 0});
-  const [isPressed, setPressed] = useState(false);
-
-  const containerWidthRef = useRef(0);
-  const [thumbWidth, setThumbWidth] = useState(0);
-
-  const [selectedRailStyle, updateSelectedRail] = useSelectedRail(
-    inPropsRef,
-    containerWidthRef,
-    thumbWidth,
-    disableRange,
-  );
-
-  const updateThumbs = useCallback(() => {
-    const {current: containerWidth} = containerWidthRef;
-    if (!thumbWidth || !containerWidth) {
-      return;
-    }
-    const {low, high} = inPropsRef.current;
-    if (!disableRange) {
-      const {current: highThumbX} = highThumbXRef;
-      const highPosition =
-        ((high - min) / (max - min)) * (containerWidth - thumbWidth);
-      highThumbX.setValue(highPosition);
-    }
-    const {current: lowThumbX} = lowThumbXRef;
-    const lowPosition =
-      ((low - min) / (max - min)) * (containerWidth - thumbWidth);
-    lowThumbX.setValue(lowPosition);
-    typeof updateSelectedRail === 'function' && updateSelectedRail();
-    onValueChanged?.(low, high, false);
-  }, [
-    disableRange,
-    inPropsRef,
-    max,
-    min,
+    low: lowProp,
+    high: highProp,
+    floatingLabel = false,
+    allowLabelOverflow = false,
+    disableRange = false,
+    disabledHigh = false,
+    disabledLow = false,
     onValueChanged,
-    thumbWidth,
-    updateSelectedRail,
-  ]);
-
-  useEffect(() => {
-    const {lowPrev, highPrev} = inPropsRefPrev;
-    if (
-      (lowProp !== undefined && lowProp !== lowPrev) ||
-      (highProp !== undefined && highProp !== highPrev)
-    ) {
-      updateThumbs();
-    }
-  }, [highProp, inPropsRefPrev.lowPrev, inPropsRefPrev.highPrev, lowProp]);
-
-  useEffect(() => {
-    updateThumbs();
-  }, [updateThumbs]);
-
-  const handleContainerLayout = useWidthLayout(containerWidthRef, updateThumbs);
-  const handleThumbLayout = useCallback(
-    ({nativeEvent}) => {
-      const {
-        layout: {width},
-      } = nativeEvent;
-      if (thumbWidth !== width) {
-        setThumbWidth(width);
-      }
-    },
-    [thumbWidth],
-  );
-
-  const lowStyles = useMemo(() => {
-    return {transform: [{translateX: lowThumbX}]};
-  }, [lowThumbX]);
-
-  const highStyles = useMemo(() => {
-    return disableRange
-      ? null
-      : [styles.highThumbContainer, {transform: [{translateX: highThumbX}]}];
-  }, [disableRange, highThumbX]);
-
-  const railContainerStyles = useMemo(() => {
-    return [styles.railsContainer, {marginHorizontal: thumbWidth / 2}];
-  }, [thumbWidth]);
-
-  const [labelView, labelUpdate] = useThumbFollower(
-    containerWidthRef,
-    gestureStateRef,
-    isPressed,
-    allowLabelOverflow,
-    disabledLow,
-    disabledHigh,
-  );
-
-  const renderThumb = (name: string) => {
-    const isDisabled =
-      (name === 'low' && disabledLow) || (name === 'high' && disabledHigh);
-
-    const thumbColor = isDisabled
-      ? theme.colors.text.disable
-      : theme.colors.primary;
-
-    return (
-      <View
-        style={[
-          Shadow.Light,
-          {
-            width: 20,
-            height: 20,
-            borderRadius: Radius.M,
-            borderWidth: 4,
-            borderColor: theme.colors.background.surface,
-            backgroundColor: thumbColor,
-          },
-        ]}
-      />
+    onSliderTouchStart,
+    onSliderTouchEnd,
+    ...restProps
+  }) => {
+    const {theme} = useContext(ApplicationContext);
+
+    const {inPropsRef, inPropsRefPrev, setLow, setHigh} = useLowHigh(
+      lowProp,
+      disableRange ? max : highProp,
+      min,
+      max,
+      step
     );
-  };
-
-  const lowThumb = renderThumb('low');
-  const highThumb = renderThumb('high');
-
-  const labelContainerProps = useLabelContainerProps(floatingLabel);
-
-  const {panHandlers} = useMemo(
-    () =>
-      PanResponder.create({
-        onStartShouldSetPanResponderCapture: falseFunc,
-        onMoveShouldSetPanResponderCapture: falseFunc,
-        onPanResponderTerminationRequest: falseFunc,
-        onPanResponderTerminate: trueFunc,
-        onShouldBlockNativeResponder: trueFunc,
-
-        onMoveShouldSetPanResponder: (
-          evt: GestureResponderEvent,
-          gestureState: PanResponderGestureState,
-        ) => Math.abs(gestureState.dx) > 2 * Math.abs(gestureState.dy),
-
-        onPanResponderGrant: ({nativeEvent}, gestureState) => {
-          const {numberActiveTouches} = gestureState;
-          if (numberActiveTouches > 1) {
-            return;
-          }
-          setPressed(true);
-          const {current: lowThumbX} = lowThumbXRef;
-          const {current: highThumbX} = highThumbXRef;
-          const {locationX: downX, pageX} = nativeEvent;
-          const containerX = pageX - downX;
-
-          const {low, high, min, max} = inPropsRef.current;
-          onSliderTouchStart?.(low, high);
-          const containerWidth = containerWidthRef.current;
-
-          const lowPosition =
-            thumbWidth / 2 +
-            ((low - min) / (max - min)) * (containerWidth - thumbWidth);
-          const highPosition =
-            thumbWidth / 2 +
-            ((high - min) / (max - min)) * (containerWidth - thumbWidth);
-
-          const isLow =
-            disableRange || isLowCloser(downX, lowPosition, highPosition);
-          gestureStateRef.current.isLow = isLow;
-
-          if ((isLow && disabledLow) || (!isLow && disabledHigh)) {
-            return;
-          }
-
-          const handlePositionChange = (positionInView: number) => {
-            const {low, high, min, max, step} = inPropsRef.current;
-            const minValue = isLow ? min : low + minRange;
-            const maxValue = isLow ? high - minRange : max;
-            const value = clamp(
-              getValueForPosition(
-                positionInView,
-                containerWidth,
-                thumbWidth,
-                min,
-                max,
-                step,
-              ),
-              minValue,
-              maxValue,
-            );
-            if (gestureStateRef.current.lastValue === value) {
-              return;
-            }
-            const availableSpace = containerWidth - thumbWidth;
-            const absolutePosition =
-              ((value - min) / (max - min)) * availableSpace;
-            gestureStateRef.current.lastValue = value;
-            gestureStateRef.current.lastPosition =
-              absolutePosition + thumbWidth / 2;
-            (isLow ? lowThumbX : highThumbX).setValue(absolutePosition);
-            onValueChanged?.(isLow ? value : low, isLow ? high : value, true);
-            (isLow ? setLow : setHigh)(value);
-            labelUpdate &&
-              typeof labelUpdate === 'function' &&
-              labelUpdate(gestureStateRef.current.lastPosition, value);
-
-            typeof updateSelectedRail === 'function' && updateSelectedRail();
-          };
-          handlePositionChange(downX);
-          pointerX.removeAllListeners();
-          pointerX.addListener(({value: pointerPosition}) => {
-            const positionInView = pointerPosition - containerX;
-            handlePositionChange(positionInView);
-          });
-        },
-
-        onPanResponderMove: (evt, gestureState) => {
-          if (gestureStateRef.current.isLow ? disabledLow : disabledHigh) {
-            return;
-          }
-
-          Animated.event([null, {moveX: pointerX}], {
-            useNativeDriver: false,
-          })(evt, gestureState);
-        },
-
-        onPanResponderRelease: () => {
-          setPressed(false);
-          const {low, high} = inPropsRef.current;
-          if (
-            (gestureStateRef.current.isLow && disabledLow) ||
-            (!gestureStateRef.current.isLow && disabledHigh)
-          ) {
-            return;
-          }
-          onSliderTouchEnd?.(low, high);
-        },
-      }),
-    [
-      pointerX,
+    const lowThumbXRef = useRef(new Animated.Value(0));
+    const highThumbXRef = useRef(new Animated.Value(0));
+    const pointerX = useRef(new Animated.Value(0)).current;
+    const {current: lowThumbX} = lowThumbXRef;
+    const {current: highThumbX} = highThumbXRef;
+
+    const gestureStateRef = useRef({
+      isLow: true,
+      lastValue: 0,
+      lastPosition: 0,
+    });
+    const [isPressed, setPressed] = useState(false);
+
+    const containerWidthRef = useRef(0);
+    const [thumbWidth, setThumbWidth] = useState(0);
+
+    const [selectedRailStyle, updateSelectedRail] = useSelectedRail(
       inPropsRef,
+      containerWidthRef,
       thumbWidth,
+      disableRange
+    );
+
+    const updateThumbs = useCallback(() => {
+      const {current: containerWidth} = containerWidthRef;
+      if (!thumbWidth || !containerWidth) {
+        return;
+      }
+      const {low, high} = inPropsRef.current;
+      if (!disableRange) {
+        const {current: highThumbX} = highThumbXRef;
+        const highPosition =
+          ((high - min) / (max - min)) * (containerWidth - thumbWidth);
+        highThumbX.setValue(highPosition);
+      }
+      const {current: lowThumbX} = lowThumbXRef;
+      const lowPosition =
+        ((low - min) / (max - min)) * (containerWidth - thumbWidth);
+      lowThumbX.setValue(lowPosition);
+      typeof updateSelectedRail === 'function' && updateSelectedRail();
+      onValueChanged?.(low, high, false);
+    }, [
       disableRange,
+      inPropsRef,
+      max,
+      min,
       onValueChanged,
-      disabledHigh,
-      disabledLow,
-      setLow,
-      setHigh,
-      labelUpdate,
+      thumbWidth,
       updateSelectedRail,
-    ],
-  );
+    ]);
+
+    useEffect(() => {
+      const {lowPrev, highPrev} = inPropsRefPrev;
+      if (
+        (lowProp !== undefined && lowProp !== lowPrev) ||
+        (highProp !== undefined && highProp !== highPrev)
+      ) {
+        updateThumbs();
+      }
+    }, [highProp, inPropsRefPrev.lowPrev, inPropsRefPrev.highPrev, lowProp]);
 
-  const renderTrack = (color: string) => {
-    return (
-      <View
-        style={{
-          width: '100%',
-          height: 4,
-          borderRadius: Radius.L,
-          backgroundColor: color,
-        }}
-      />
+    useEffect(() => {
+      updateThumbs();
+    }, [updateThumbs]);
+
+    const handleContainerLayout = useWidthLayout(
+      containerWidthRef,
+      updateThumbs
     );
-  };
-
-  const trackColor =
-    disabledHigh && disabledLow
-      ? theme.colors.text.disable
-      : theme.colors.primary;
-
-  return (
-    <View {...restProps}>
-      <View {...labelContainerProps}>{labelView}</View>
-      <View onLayout={handleContainerLayout} style={styles.controlsContainer}>
-        <View style={railContainerStyles}>
-          {renderTrack(theme.colors.background.default)}
-          <Animated.View style={selectedRailStyle as ViewStyle}>
-            {renderTrack(trackColor)}
-          </Animated.View>
-        </View>
-        <Animated.View style={lowStyles} onLayout={handleThumbLayout}>
-          {lowThumb}
-        </Animated.View>
-        {!disableRange && (
-          <Animated.View style={highStyles}>{highThumb}</Animated.View>
-        )}
+    const handleThumbLayout = useCallback(
+      ({nativeEvent}) => {
+        const {
+          layout: {width},
+        } = nativeEvent;
+        if (thumbWidth !== width) {
+          setThumbWidth(width);
+        }
+      },
+      [thumbWidth]
+    );
+
+    const lowStyles = useMemo(() => {
+      return {transform: [{translateX: lowThumbX}]};
+    }, [lowThumbX]);
+
+    const highStyles = useMemo(() => {
+      return disableRange
+        ? null
+        : [styles.highThumbContainer, {transform: [{translateX: highThumbX}]}];
+    }, [disableRange, highThumbX]);
+
+    const railContainerStyles = useMemo(() => {
+      return [styles.railsContainer, {marginHorizontal: thumbWidth / 2}];
+    }, [thumbWidth]);
+
+    const [labelView, labelUpdate] = useThumbFollower(
+      containerWidthRef,
+      gestureStateRef,
+      isPressed,
+      allowLabelOverflow,
+      disabledLow,
+      disabledHigh
+    );
+
+    const renderThumb = (name: string) => {
+      const isDisabled =
+        (name === 'low' && disabledLow) || (name === 'high' && disabledHigh);
+
+      const thumbColor = isDisabled
+        ? theme.colors.text.disable
+        : theme.colors.primary;
+
+      return (
         <View
-          {...panHandlers}
-          style={styles.touchableArea}
-          collapsable={false}
+          style={[
+            Shadow.Light,
+            {
+              width: 20,
+              height: 20,
+              borderRadius: Radius.M,
+              borderWidth: 4,
+              borderColor: theme.colors.background.surface,
+              backgroundColor: thumbColor,
+            },
+          ]}
         />
+      );
+    };
+
+    const lowThumb = renderThumb('low');
+    const highThumb = renderThumb('high');
+
+    const labelContainerProps = useLabelContainerProps(floatingLabel);
+
+    const {panHandlers} = useMemo(
+      () =>
+        PanResponder.create({
+          onStartShouldSetPanResponderCapture: falseFunc,
+          onMoveShouldSetPanResponderCapture: falseFunc,
+          onPanResponderTerminationRequest: falseFunc,
+          onPanResponderTerminate: trueFunc,
+          onShouldBlockNativeResponder: trueFunc,
+
+          onMoveShouldSetPanResponder: (
+            evt: GestureResponderEvent,
+            gestureState: PanResponderGestureState
+          ) => Math.abs(gestureState.dx) > 2 * Math.abs(gestureState.dy),
+
+          onPanResponderGrant: ({nativeEvent}, gestureState) => {
+            const {numberActiveTouches} = gestureState;
+            if (numberActiveTouches > 1) {
+              return;
+            }
+            setPressed(true);
+            const {current: lowThumbX} = lowThumbXRef;
+            const {current: highThumbX} = highThumbXRef;
+            const {locationX: downX, pageX} = nativeEvent;
+            const containerX = pageX - downX;
+
+            const {low, high, min, max} = inPropsRef.current;
+            onSliderTouchStart?.(low, high);
+            const containerWidth = containerWidthRef.current;
+
+            const lowPosition =
+              thumbWidth / 2 +
+              ((low - min) / (max - min)) * (containerWidth - thumbWidth);
+            const highPosition =
+              thumbWidth / 2 +
+              ((high - min) / (max - min)) * (containerWidth - thumbWidth);
+
+            const isLow =
+              disableRange || isLowCloser(downX, lowPosition, highPosition);
+            gestureStateRef.current.isLow = isLow;
+
+            if ((isLow && disabledLow) || (!isLow && disabledHigh)) {
+              return;
+            }
+
+            const handlePositionChange = (positionInView: number) => {
+              const {low, high, min, max, step} = inPropsRef.current;
+              const minValue = isLow ? min : low + minRange;
+              const maxValue = isLow ? high - minRange : max;
+              const value = clamp(
+                getValueForPosition(
+                  positionInView,
+                  containerWidth,
+                  thumbWidth,
+                  min,
+                  max,
+                  step
+                ),
+                minValue,
+                maxValue
+              );
+              if (gestureStateRef.current.lastValue === value) {
+                return;
+              }
+              const availableSpace = containerWidth - thumbWidth;
+              const absolutePosition =
+                ((value - min) / (max - min)) * availableSpace;
+              gestureStateRef.current.lastValue = value;
+              gestureStateRef.current.lastPosition =
+                absolutePosition + thumbWidth / 2;
+              (isLow ? lowThumbX : highThumbX).setValue(absolutePosition);
+              onValueChanged?.(isLow ? value : low, isLow ? high : value, true);
+              (isLow ? setLow : setHigh)(value);
+              labelUpdate &&
+                typeof labelUpdate === 'function' &&
+                labelUpdate(gestureStateRef.current.lastPosition, value);
+
+              typeof updateSelectedRail === 'function' && updateSelectedRail();
+            };
+            handlePositionChange(downX);
+            pointerX.removeAllListeners();
+            pointerX.addListener(({value: pointerPosition}) => {
+              const positionInView = pointerPosition - containerX;
+              handlePositionChange(positionInView);
+            });
+          },
+
+          onPanResponderMove: (evt, gestureState) => {
+            if (gestureStateRef.current.isLow ? disabledLow : disabledHigh) {
+              return;
+            }
+
+            Animated.event([null, {moveX: pointerX}], {
+              useNativeDriver: false,
+            })(evt, gestureState);
+          },
+
+          onPanResponderRelease: () => {
+            setPressed(false);
+            const {low, high} = inPropsRef.current;
+            if (
+              (gestureStateRef.current.isLow && disabledLow) ||
+              (!gestureStateRef.current.isLow && disabledHigh)
+            ) {
+              return;
+            }
+            onSliderTouchEnd?.(low, high);
+          },
+        }),
+      [
+        pointerX,
+        inPropsRef,
+        thumbWidth,
+        disableRange,
+        onValueChanged,
+        disabledHigh,
+        disabledLow,
+        setLow,
+        setHigh,
+        labelUpdate,
+        updateSelectedRail,
+      ]
+    );
+
+    const renderTrack = (color: string) => {
+      return (
+        <View
+          style={{
+            width: '100%',
+            height: 4,
+            borderRadius: Radius.L,
+            backgroundColor: color,
+          }}
+        />
+      );
+    };
+
+    const trackColor =
+      disabledHigh && disabledLow
+        ? theme.colors.text.disable
+        : theme.colors.primary;
+
+    return (
+      <View {...restProps}>
+        <View {...labelContainerProps}>{labelView}</View>
+        <View onLayout={handleContainerLayout} style={styles.controlsContainer}>
+          <View style={railContainerStyles}>
+            {renderTrack(theme.colors.background.default)}
+            <Animated.View style={selectedRailStyle as ViewStyle}>
+              {renderTrack(trackColor)}
+            </Animated.View>
+          </View>
+          <Animated.View style={lowStyles} onLayout={handleThumbLayout}>
+            {lowThumb}
+          </Animated.View>
+          {!disableRange && (
+            <Animated.View style={highStyles}>{highThumb}</Animated.View>
+          )}
+          <View
+            {...panHandlers}
+            style={styles.touchableArea}
+            collapsable={false}
+          />
+        </View>
       </View>
-    </View>
-  );
-};
+    );
+  }
+);
 
-export default memo(Slider);
+export {Slider};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/slider",
-    "version": "0.81.1-beta.6",
+    "version": "0.81.1-rc.0",
     "private": false,
     "main": "index.tsx",
     "dependencies": {},
@@ -14,4 +14,4 @@
         "@momo-platform/versions": "4.1.11"
     },
     "license": "MoMo"
-}
+}

package/publish.sh

@@ -1,29 +1,27 @@
 #!/bin/bash
+
+# Prepare dist files
 rm -rf dist
 mkdir dist
-
-cp . ./dist
-
-# GET VERSION from mck_package.json
-VERSIONSTRING=( v$(jq .version package.json) )
-VERSION=(${VERSIONSTRING//[\"]/})
-echo VERSION: $VERSION
-
-rsync -r --verbose --exclude '*.mdx' --exclude '*Demo.js'  --exclude 'props-type.js' --exclude 'prop-types.js' ./* dist
-
-# #babel component to dist
-#babel ./dist -d dist --copy-files
-
-#copy option
-#cp -r ./src/ dist
-
-
-#npm login
-#publish dist to npm
+rsync -r --exclude=/dist ./* dist
 cd dist
-npm publish --tag beta --access=public
+
+if [ "$1" == "stable" ]; then
+  npm version $(npm view @momo-kits/foundation@stable version)
+  npm version patch
+  npm publish --tag stable --access=public
+elif [ "$1" == "latest" ]; then
+  npm version $(npm view @momo-kits/foundation@latest version)
+  npm publish --tag latest --access=public
+else
+  npm version $(npm view @momo-kits/slider@beta version)
+  npm version prerelease --preid=beta
+  npm publish --tag beta --access=public
+fi
+
+PACKAGE_NAME=$(npm pkg get name)
+NEW_PACKAGE_VERSION=$(npm pkg get version)
+
+# Clean up
 cd ..
 rm -rf dist
-
-
-##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/slider new version release: '*"$VERSION"*' https://www.npmjs.com/package/@momo-kits/slider"}'