@momo-kits/slider 0.89.1-rc.5 → 0.89.2

package/index.tsx

@@ -115,7 +115,7 @@ export interface SliderProps extends ViewProps {
   onSliderTouchEnd?: (low: number, high: number) => void;
 }
 
-const Slider: React.FC<SliderProps> = ({
+const Slider: React.FC<SliderProps> = memo(({
   min,
   max,
   minRange = 0,
@@ -154,10 +154,10 @@ const Slider: React.FC<SliderProps> = ({
   const [thumbWidth, setThumbWidth] = useState(0);
 
   const [selectedRailStyle, updateSelectedRail] = useSelectedRail(
-    inPropsRef,
-    containerWidthRef,
-    thumbWidth,
-    disableRange,
+      inPropsRef,
+      containerWidthRef,
+      thumbWidth,
+      disableRange,
   );
 
   const updateThumbs = useCallback(() => {
@@ -169,12 +169,12 @@ const Slider: React.FC<SliderProps> = ({
     if (!disableRange) {
       const {current: highThumbX} = highThumbXRef;
       const highPosition =
-        ((high - min) / (max - min)) * (containerWidth - thumbWidth);
+          ((high - min) / (max - min)) * (containerWidth - thumbWidth);
       highThumbX.setValue(highPosition);
     }
     const {current: lowThumbX} = lowThumbXRef;
     const lowPosition =
-      ((low - min) / (max - min)) * (containerWidth - thumbWidth);
+        ((low - min) / (max - min)) * (containerWidth - thumbWidth);
     lowThumbX.setValue(lowPosition);
     typeof updateSelectedRail === 'function' && updateSelectedRail();
     onValueChanged?.(low, high, false);
@@ -191,8 +191,8 @@ const Slider: React.FC<SliderProps> = ({
   useEffect(() => {
     const {lowPrev, highPrev} = inPropsRefPrev;
     if (
-      (lowProp !== undefined && lowProp !== lowPrev) ||
-      (highProp !== undefined && highProp !== highPrev)
+        (lowProp !== undefined && lowProp !== lowPrev) ||
+        (highProp !== undefined && highProp !== highPrev)
     ) {
       updateThumbs();
     }
@@ -204,15 +204,15 @@ const Slider: React.FC<SliderProps> = ({
 
   const handleContainerLayout = useWidthLayout(containerWidthRef, updateThumbs);
   const handleThumbLayout = useCallback(
-    ({nativeEvent}) => {
-      const {
-        layout: {width},
-      } = nativeEvent;
-      if (thumbWidth !== width) {
-        setThumbWidth(width);
-      }
-    },
-    [thumbWidth],
+      ({nativeEvent}) => {
+        const {
+          layout: {width},
+        } = nativeEvent;
+        if (thumbWidth !== width) {
+          setThumbWidth(width);
+        }
+      },
+      [thumbWidth],
   );
 
   const lowStyles = useMemo(() => {
@@ -221,8 +221,8 @@ const Slider: React.FC<SliderProps> = ({
 
   const highStyles = useMemo(() => {
     return disableRange
-      ? null
-      : [styles.highThumbContainer, {transform: [{translateX: highThumbX}]}];
+        ? null
+        : [styles.highThumbContainer, {transform: [{translateX: highThumbX}]}];
   }, [disableRange, highThumbX]);
 
   const railContainerStyles = useMemo(() => {
@@ -230,36 +230,36 @@ const Slider: React.FC<SliderProps> = ({
   }, [thumbWidth]);
 
   const [labelView, labelUpdate] = useThumbFollower(
-    containerWidthRef,
-    gestureStateRef,
-    isPressed,
-    allowLabelOverflow,
-    disabledLow,
-    disabledHigh,
+      containerWidthRef,
+      gestureStateRef,
+      isPressed,
+      allowLabelOverflow,
+      disabledLow,
+      disabledHigh,
   );
 
   const renderThumb = (name: string) => {
     const isDisabled =
-      (name === 'low' && disabledLow) || (name === 'high' && disabledHigh);
+        (name === 'low' && disabledLow) || (name === 'high' && disabledHigh);
 
     const thumbColor = isDisabled
-      ? theme.colors.text.disable
-      : theme.colors.primary;
+        ? 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,
-          },
-        ]}
-      />
+        <View
+            style={[
+              Shadow.Light,
+              {
+                width: 20,
+                height: 20,
+                borderRadius: Radius.M,
+                borderWidth: 4,
+                borderColor: theme.colors.background.surface,
+                backgroundColor: thumbColor,
+              },
+            ]}
+        />
     );
   };
 
@@ -269,170 +269,170 @@ const Slider: React.FC<SliderProps> = ({
   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,
-    ],
+      () =>
+          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,
-        }}
-      />
+        <View
+            style={{
+              width: '100%',
+              height: 4,
+              borderRadius: Radius.L,
+              backgroundColor: color,
+            }}
+        />
     );
   };
 
   const trackColor =
-    disabledHigh && disabledLow
-      ? theme.colors.text.disable
-      : theme.colors.primary;
+      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)}
+      <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>
-        <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>
   );
-};
+})
 
-export default memo(Slider);
+export {Slider};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/slider",
-    "version": "0.89.1-rc.5",
+    "version": "0.89.2",
     "private": false,
     "main": "index.tsx",
     "dependencies": {},