@momo-kits/slider 0.73.3-beta.4 → 0.74.2-react-native.1

package/index.tsx

@@ -0,0 +1,438 @@
+import React, {
+  memo,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import {
+  Animated,
+  GestureResponderEvent,
+  PanResponder,
+  PanResponderGestureState,
+  View,
+  ViewProps,
+  ViewStyle,
+} from 'react-native';
+
+import styles from './styles';
+import {
+  useLabelContainerProps,
+  useLowHigh,
+  useSelectedRail,
+  useThumbFollower,
+  useWidthLayout,
+} from './hooks';
+import {clamp, getValueForPosition, isLowCloser} from './helpers';
+import {ApplicationContext, Radius, Shadow} from '@momo-kits/foundation';
+
+const trueFunc = () => true;
+const falseFunc = () => false;
+
+export interface SliderProps extends ViewProps {
+  /**
+   * Specifies the minimum value permitted for selection in the slider. This value sets the lower
+   * bound for the component.
+   */
+  min: number;
+
+  /**
+   * Specifies the maximum value allowed for selection. This value sets the upper bound for the component.
+   */
+  max: number;
+
+  /**
+   * Optional. Defines the minimum permitted range between the low and high values of the slider.
+   * Particularly useful when 'low' and 'high' values both exist, ensuring a certain spread between them.
+   */
+  minRange?: number;
+
+  /**
+   * Specifies the interval between individual step values. The slider's handle will move only in these increments.
+   */
+  step: number;
+
+  /**
+   * Optional. Represents the initial lower value of the range when the component is used as a range slider.
+   * This value is part of the selected range, between 'min' and 'high'.
+   */
+  low?: number;
+
+  /**
+   * Optional. Represents the initial upper value of the range when used as a range slider.
+   * This value is part of the selected range, between 'low' and 'max'.
+   */
+  high?: number;
+
+  /**
+   * Optional. If `true`, allows the label to extend beyond the width of the Slider component itself,
+   * rather than being clipped at the component boundaries. Defaults to `false` if not provided.
+   */
+  allowLabelOverflow?: boolean;
+
+  /**
+   * Optional. If `true`, disables the range functionality of the slider, turning it into a regular
+   * single-value slider. Defaults to `false` if not provided.
+   */
+  disableRange?: boolean;
+
+  /**
+   * Optional. If `true`, the 'high' handle of the slider will be disabled and cannot be moved.
+   * Useful for setting a maximum limit that users cannot increase. Defaults to `false` if not provided.
+   */
+  disabledHigh?: boolean;
+
+  /**
+   * Optional. If `true`, the 'low' handle of the slider will be disabled and cannot be moved.
+   * Useful for setting a minimum limit that users cannot decrease. Defaults to `false` if not provided.
+   */
+  disabledLow?: boolean;
+
+  /**
+   * Optional. If `true`, labels will be displayed in a floating manner above the slider handles,
+   * typically used to display the current value. Defaults to `false` if not provided.
+   */
+  floatingLabel?: boolean;
+
+  /**
+   * Optional. A callback function triggered when the slider value changes, either by the user or programmatically.
+   * It receives the new low and high values of the slider, as well as a boolean indicating if the change was made by the user.
+   */
+  onValueChanged?: (low: number, high: number, byUser: boolean) => void;
+
+  /**
+   * Optional. A callback function triggered when the user starts touching the slider's draggable area.
+   * It receives the current low and high values of the slider.
+   */
+  onSliderTouchStart?: (low: number, high: number) => void;
+
+  /**
+   * Optional. A callback function triggered when the user releases the slider's draggable area.
+   * It receives the current low and high values of the slider.
+   */
+  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,
+    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 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,
+    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,
+              },
+            ]}
+        />
+    );
+  };
+
+  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>
+  );
+})
+
+export {Slider};

package/package.json

@@ -1,16 +1,17 @@
 {
     "name": "@momo-kits/slider",
-    "version": "0.73.3-beta.4",
+    "version": "0.74.2-react-native.1",
     "private": false,
-    "main": "index.js",
-    "dependencies": {},
+    "main": "index.tsx",
     "peerDependencies": {
-        "@momo-kits/core-v2": ">=0.0.5-beta",
-        "lodash": "^4.17.15",
-        "prop-types": "^15.7.2",
-        "react": "16.9.0",
-        "react-native": ">=0.55"
+        "@momo-kits/foundation": "latest",
+        "react": "*",
+        "react-native": "*",
+        "prop-types": "15.7.2"
     },
-    "devDependencies": {},
-    "license": "MoMo"
+    "devDependencies": {
+        "@momo-platform/versions": "4.1.11"
+    },
+    "license": "MoMo",
+    "dependencies": {}
 }

package/publish.sh

@@ -26,4 +26,4 @@ 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/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/slider new version release: '*"$VERSION"*' https://www.npmjs.com/package/@momo-kits/slider"}'

package/styles.ts

@@ -0,0 +1,36 @@
+import {I18nManager, StyleSheet} from 'react-native';
+import {Colors, Radius, Spacing} from '@momo-kits/foundation';
+
+export default StyleSheet.create({
+  controlsContainer: {
+    flexDirection: 'row',
+    justifyContent: I18nManager.isRTL ? 'flex-end' : 'flex-start',
+    alignItems: 'center',
+  },
+  highThumbContainer: {
+    position: 'absolute',
+  },
+  railsContainer: {
+    ...StyleSheet.absoluteFillObject,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  labelFixedContainer: {
+    alignItems: I18nManager.isRTL ? 'flex-end' : 'flex-start',
+  },
+  labelFloatingContainer: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    alignItems: I18nManager.isRTL ? 'flex-end' : 'flex-start',
+  },
+  touchableArea: {
+    ...StyleSheet.absoluteFillObject,
+  },
+  label: {
+    backgroundColor: Colors.black_01,
+    paddingVertical: Spacing.XXS,
+    paddingHorizontal: Spacing.XS,
+    borderRadius: Radius.XS,
+  },
+});

package/DefaultLabel.js

@@ -1,83 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {View, StyleSheet} from 'react-native';
-import {Text} from '@momo-kits/core-v2';
-
-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 style={styles.sliderLabelText}>{oneMarkerValue}</Text>
-            </View>
-          )}
-
-        {Number.isFinite(twoMarkerLeftPosition) &&
-          Number.isFinite(twoMarkerValue) && (
-            <View
-              style={[
-                styles.sliderLabel,
-                {
-                  left: twoMarkerLeftPosition - width / 2 + sliderRadius,
-                },
-                twoMarkerPressed && styles.markerPressed,
-              ]}>
-              <Text style={styles.sliderLabelText}>{twoMarkerValue}</Text>
-            </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/DefaultLabel.web.js

@@ -1,83 +0,0 @@
-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 style={styles.sliderLabelText}>{oneMarkerValue}</Text>
-            </View>
-          )}
-
-        {Number.isFinite(twoMarkerLeftPosition) &&
-          Number.isFinite(twoMarkerValue) && (
-            <View
-              style={[
-                styles.sliderLabel,
-                {
-                  left: twoMarkerLeftPosition - width / 2 + sliderRadius,
-                },
-                twoMarkerPressed && styles.markerPressed,
-              ]}>
-              <Text style={styles.sliderLabelText}>{twoMarkerValue}</Text>
-            </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,
-};