@momo-kits/slider 0.80.4 → 0.80.8-beta.10

package/Label.tsx

@@ -1,27 +1,33 @@
-import React, {PureComponent} from 'react';
-import {View} from 'react-native';
+import React, {
+  forwardRef,
+  ForwardRefRenderFunction,
+  useImperativeHandle,
+  useState,
+} from 'react';
+import {View, ViewProps} from 'react-native';
 import {Shadow, Text} from '@momo-kits/foundation';
 import styles from './styles';
 
-class Label extends PureComponent {
-  state = {
-    value: Number.NaN,
-  };
+export type LabelRef = {
+  setValue: (value: number) => void;
+};
 
-  setValue = (value: number) => {
-    this.setState({value});
-  };
+const Label: ForwardRefRenderFunction<LabelRef, ViewProps> = (props, ref) => {
+  const [value, _setValue] = useState(Number.NaN);
 
-  render() {
-    const {...props} = this.props;
-    const {value} = this.state;
+  useImperativeHandle(ref, () => ({
+    setValue,
+  }));
+
+  const setValue = (newValue: number) => {
+    _setValue(newValue);
+  };
 
-    return (
-      <View {...props} style={[styles.label, Shadow.Light]}>
-        <Text typography={'label_s'}>{value}</Text>
-      </View>
-    );
-  }
-}
+  return (
+    <View {...props} style={[styles.label, Shadow.Light]}>
+      <Text typography={'label_s'}>{value}</Text>
+    </View>
+  );
+};
 
-export default Label;
+export default forwardRef(Label);

package/hooks.tsx

@@ -5,10 +5,10 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import {Animated, I18nManager} from 'react-native';
+import {Animated, I18nManager, ViewStyle} from 'react-native';
 import {clamp} from './helpers';
 import styles from './styles';
-import FollowerContainer from './Label';
+import FollowerContainer, {LabelRef} from './Label';
 import {Spacing} from '@momo-kits/foundation';
 
 /**
@@ -112,7 +112,7 @@ export const useThumbFollower = (
 ) => {
   const xRef = useRef(new Animated.Value(0));
   const widthRef = useRef(0);
-  const contentContainerRef = useRef<FollowerContainer | null>(null);
+  const contentContainerRef = useRef<LabelRef>(null);
 
   const {current: x} = xRef;
 
@@ -188,8 +188,8 @@ export const useSelectedRail = (
   const styles = useMemo(
     () => ({
       position: 'absolute',
-      left: I18nManager.isRTL ? right : left,
-      right: I18nManager.isRTL ? left : right,
+      left: left,
+      right: right,
     }),
     [left, right],
   );

package/index.tsx

@@ -1,6 +1,5 @@
 import React, {
   memo,
-  ReactNode,
   useCallback,
   useContext,
   useEffect,
@@ -15,6 +14,7 @@ import {
   PanResponderGestureState,
   View,
   ViewProps,
+  ViewStyle,
 } from 'react-native';
 
 import styles from './styles';
@@ -176,7 +176,7 @@ const Slider: React.FC<SliderProps> = ({
     const lowPosition =
       ((low - min) / (max - min)) * (containerWidth - thumbWidth);
     lowThumbX.setValue(lowPosition);
-    updateSelectedRail();
+    typeof updateSelectedRail === 'function' && updateSelectedRail();
     onValueChanged?.(low, high, false);
   }, [
     disableRange,
@@ -341,9 +341,10 @@ const Slider: React.FC<SliderProps> = ({
             onValueChanged?.(isLow ? value : low, isLow ? high : value, true);
             (isLow ? setLow : setHigh)(value);
             labelUpdate &&
+              typeof labelUpdate === 'function' &&
               labelUpdate(gestureStateRef.current.lastPosition, value);
 
-            updateSelectedRail();
+            typeof updateSelectedRail === 'function' && updateSelectedRail();
           };
           handlePositionChange(downX);
           pointerX.removeAllListeners();
@@ -414,7 +415,7 @@ const Slider: React.FC<SliderProps> = ({
       <View onLayout={handleContainerLayout} style={styles.controlsContainer}>
         <View style={railContainerStyles}>
           {renderTrack(theme.colors.background.default)}
-          <Animated.View style={selectedRailStyle}>
+          <Animated.View style={selectedRailStyle as ViewStyle}>
             {renderTrack(trackColor)}
           </Animated.View>
         </View>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/slider",
-    "version": "0.80.4",
+    "version": "0.80.8-beta.10",
     "private": false,
     "main": "index.tsx",
     "dependencies": {},