@momo-kits/slider 0.89.5 → 0.89.6-rc.1

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,95 +115,103 @@ export interface SliderProps extends ViewProps {
   onSliderTouchEnd?: (low: number, high: number) => void;
 }
 
-const Slider: React.FC<SliderProps> = memo(({
-  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;
+    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,
+      min,
+      max,
+      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 gestureStateRef = useRef({
+      isLow: true,
+      lastValue: 0,
+      lastPosition: 0,
+    });
+    const [isPressed, setPressed] = useState(false);
 
-  const containerWidthRef = useRef(0);
-  const [thumbWidth, setThumbWidth] = useState(0);
+    const containerWidthRef = useRef(0);
+    const [thumbWidth, setThumbWidth] = useState(0);
 
-  const [selectedRailStyle, updateSelectedRail] = useSelectedRail(
+    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 =
+      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 =
+        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,
-    thumbWidth,
-    updateSelectedRail,
-  ]);
+      lowThumbX.setValue(lowPosition);
+      typeof updateSelectedRail === 'function' && updateSelectedRail();
+      onValueChanged?.(low, high, false);
+    }, [
+      disableRange,
+      inPropsRef,
+      max,
+      min,
+      onValueChanged,
+      thumbWidth,
+      updateSelectedRail,
+    ]);
 
-  useEffect(() => {
-    const {lowPrev, highPrev} = inPropsRefPrev;
-    if (
+    useEffect(() => {
+      const {lowPrev, highPrev} = inPropsRefPrev;
+      if (
         (lowProp !== undefined && lowProp !== lowPrev) ||
         (highProp !== undefined && highProp !== highPrev)
-    ) {
-      updateThumbs();
-    }
-  }, [highProp, inPropsRefPrev.lowPrev, inPropsRefPrev.highPrev, lowProp]);
+      ) {
+        updateThumbs();
+      }
+    }, [highProp, inPropsRefPrev.lowPrev, inPropsRefPrev.highPrev, lowProp]);
 
-  useEffect(() => {
-    updateThumbs();
-  }, [updateThumbs]);
+    useEffect(() => {
+      updateThumbs();
+    }, [updateThumbs]);
 
-  const handleContainerLayout = useWidthLayout(containerWidthRef, updateThumbs);
-  const handleThumbLayout = useCallback(
+    const handleContainerLayout = useWidthLayout(
+      containerWidthRef,
+      updateThumbs
+    );
+    const handleThumbLayout = useCallback(
       ({nativeEvent}) => {
         const {
           layout: {width},
@@ -212,170 +220,170 @@ const Slider: React.FC<SliderProps> = memo(({
           setThumbWidth(width);
         }
       },
-      [thumbWidth],
-  );
+      [thumbWidth]
+    );
 
-  const lowStyles = useMemo(() => {
-    return {transform: [{translateX: lowThumbX}]};
-  }, [lowThumbX]);
+    const lowStyles = useMemo(() => {
+      return {transform: [{translateX: lowThumbX}]};
+    }, [lowThumbX]);
 
-  const highStyles = useMemo(() => {
-    return disableRange
+    const highStyles = useMemo(() => {
+      return disableRange
         ? null
         : [styles.highThumbContainer, {transform: [{translateX: highThumbX}]}];
-  }, [disableRange, highThumbX]);
+    }, [disableRange, highThumbX]);
 
-  const railContainerStyles = useMemo(() => {
-    return [styles.railsContainer, {marginHorizontal: thumbWidth / 2}];
-  }, [thumbWidth]);
+    const railContainerStyles = useMemo(() => {
+      return [styles.railsContainer, {marginHorizontal: thumbWidth / 2}];
+    }, [thumbWidth]);
 
-  const [labelView, labelUpdate] = useThumbFollower(
+    const [labelView, labelUpdate] = useThumbFollower(
       containerWidthRef,
       gestureStateRef,
       isPressed,
       allowLabelOverflow,
       disabledLow,
-      disabledHigh,
-  );
+      disabledHigh
+    );
 
-  const renderThumb = (name: string) => {
-    const isDisabled =
+    const renderThumb = (name: string) => {
+      const isDisabled =
         (name === 'low' && disabledLow) || (name === 'high' && disabledHigh);
 
-    const thumbColor = isDisabled
+      const thumbColor = isDisabled
         ? theme.colors.text.disable
         : theme.colors.primary;
 
-    return (
+      return (
         <View
-            style={[
-              Shadow.Light,
-              {
-                width: 20,
-                height: 20,
-                borderRadius: Radius.M,
-                borderWidth: 4,
-                borderColor: theme.colors.background.surface,
-                backgroundColor: thumbColor,
-              },
-            ]}
+          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 lowThumb = renderThumb('low');
+    const highThumb = renderThumb('high');
 
-  const labelContainerProps = useLabelContainerProps(floatingLabel);
+    const labelContainerProps = useLabelContainerProps(floatingLabel);
 
-  const {panHandlers} = useMemo(
+    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)) {
+        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 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 &&
+              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);
-            },
-          }),
+              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,
@@ -388,28 +396,28 @@ const Slider: React.FC<SliderProps> = memo(({
         setHigh,
         labelUpdate,
         updateSelectedRail,
-      ],
-  );
+      ]
+    );
 
-  const renderTrack = (color: string) => {
-    return (
+    const renderTrack = (color: string) => {
+      return (
         <View
-            style={{
-              width: '100%',
-              height: 4,
-              borderRadius: Radius.L,
-              backgroundColor: color,
-            }}
+          style={{
+            width: '100%',
+            height: 4,
+            borderRadius: Radius.L,
+            backgroundColor: color,
+          }}
         />
-    );
-  };
+      );
+    };
 
-  const trackColor =
+    const trackColor =
       disabledHigh && disabledLow
-          ? theme.colors.text.disable
-          : theme.colors.primary;
+        ? theme.colors.text.disable
+        : theme.colors.primary;
 
-  return (
+    return (
       <View {...restProps}>
         <View {...labelContainerProps}>{labelView}</View>
         <View onLayout={handleContainerLayout} style={styles.controlsContainer}>
@@ -423,16 +431,17 @@ const Slider: React.FC<SliderProps> = memo(({
             {lowThumb}
           </Animated.View>
           {!disableRange && (
-              <Animated.View style={highStyles}>{highThumb}</Animated.View>
+            <Animated.View style={highStyles}>{highThumb}</Animated.View>
           )}
           <View
-              {...panHandlers}
-              style={styles.touchableArea}
-              collapsable={false}
+            {...panHandlers}
+            style={styles.touchableArea}
+            collapsable={false}
           />
         </View>
       </View>
-  );
-})
+    );
+  }
+);
 
 export {Slider};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/slider",
-    "version": "0.89.5",
+    "version": "0.89.6-rc.1",
     "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"}'