@momo-kits/native-kits 0.157.1-beta.9-debug → 0.157.1-com.1-debug

package/src/libs/Slider/hooks.tsx

@@ -0,0 +1,218 @@
+import React, {
+  RefObject,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import {Animated} from 'react-native';
+import {clamp} from './helpers';
+import styles from './styles';
+import FollowerContainer, {LabelRef} from './Label';
+import {Spacing} from '@momo-kits/foundation';
+
+/**
+ * low and high state variables are fallbacks for props (props are not required).
+ * This hook ensures that current low and high are not out of [min, max] range.
+ * It returns an object which contains:
+ * - ref containing correct low, high, min, max and step to work with.
+ * - setLow and setHigh setters
+ * @param lowProp
+ * @param highProp
+ * @param min
+ * @param max
+ * @param step
+ * @returns {{inPropsRef: React.MutableRefObject<{high: (*|number), low: (*|number)}>, setLow: (function(number): undefined), setHigh: (function(number): undefined)}}
+ */
+export const useLowHigh = (
+  lowProp: number | undefined,
+  highProp: number | undefined,
+  min: number,
+  max: number,
+  step: number
+) => {
+  const validLowProp = lowProp === undefined ? min : clamp(lowProp, min, max);
+  const validHighProp =
+    highProp === undefined ? max : clamp(highProp, min, max);
+  const inPropsRef = useRef({
+    low: validLowProp,
+    high: validHighProp,
+    step,
+    // These 2 fields will be overwritten below.
+    min: validLowProp,
+    max: validHighProp,
+  });
+  const {low: lowState, high: highState} = inPropsRef.current;
+  const inPropsRefPrev = {lowPrev: lowState, highPrev: highState};
+
+  // Props have higher priority.
+  // If no props are passed, use internal state variables.
+  const low = clamp(lowProp === undefined ? lowState : lowProp, min, max);
+  const high = clamp(highProp === undefined ? highState : highProp, min, max);
+
+  // Always update values of refs so pan responder will have updated values
+  Object.assign(inPropsRef.current, {low, high, min, max});
+
+  const setLow = (value: number) => (inPropsRef.current.low = value);
+  const setHigh = (value: number) => (inPropsRef.current.high = value);
+  return {inPropsRef, inPropsRefPrev, setLow, setHigh};
+};
+
+/**
+ * Sets the current value of widthRef and calls the callback with new width parameter.
+ * @param widthRef
+ * @param callback
+ * @returns {function({nativeEvent: *}): void}
+ */
+export const useWidthLayout = (
+  widthRef: RefObject<number>,
+  callback?: (width: number) => void
+) => {
+  return useCallback(
+    ({nativeEvent}: {nativeEvent: {layout: {width: number}}}) => {
+      const {
+        layout: {width},
+      } = nativeEvent;
+      const {current: w} = widthRef;
+      if (w !== width) {
+        widthRef.current = width;
+        if (callback) {
+          callback(width);
+        }
+      }
+    },
+    [callback, widthRef]
+  );
+};
+
+/**
+ * This hook creates a component which follows the thumb.
+ * Content renderer is passed to FollowerContainer which re-renders only it's content with setValue method.
+ * This allows to re-render only follower, instead of the whole slider with all children (thumb, rail, etc.).
+ * Returned update function should be called every time follower should be updated.
+ * @param containerWidthRef
+ * @param gestureStateRef
+ * @param isPressed
+ * @param allowOverflow
+ * @param disabledLow
+ * @param disabledHigh
+ * @returns {[JSX.Element, function(*, *=): void]|*[]}
+ */
+export const useThumbFollower = (
+  containerWidthRef: RefObject<number>,
+  gestureStateRef: RefObject<{
+    isLow: boolean;
+    lastValue: number;
+    lastPosition: number;
+  }>,
+  isPressed: boolean,
+  allowOverflow: boolean,
+  disabledLow: boolean,
+  disabledHigh: boolean
+): [React.ReactElement, (thumbPositionInView: number, value: number) => void] => {
+  const xRef = useRef(new Animated.Value(0));
+  const widthRef = useRef(0);
+  const contentContainerRef = useRef<LabelRef>(null);
+
+  const {current: x} = xRef;
+
+  const update = useCallback(
+    (thumbPositionInView: number, value: number) => {
+      if (
+        (gestureStateRef.current.isLow && disabledLow) ||
+        (!gestureStateRef.current.isLow && disabledHigh)
+      ) {
+        return;
+      }
+
+      const {current: width} = widthRef;
+      const {current: containerWidth} = containerWidthRef;
+      const position = thumbPositionInView - width / 2;
+      xRef.current.setValue(
+        allowOverflow ? position : clamp(position, 0, containerWidth - width)
+      );
+      contentContainerRef.current?.setValue(value);
+    },
+    [widthRef, containerWidthRef, allowOverflow, disabledLow, disabledHigh, gestureStateRef] // Include dependencies here.
+  );
+
+  const handleLayout = useWidthLayout(widthRef, () => {
+    update(
+      gestureStateRef.current.lastPosition,
+      gestureStateRef.current.lastValue
+    );
+  });
+
+  const transform = {transform: [{translateX: x}]};
+
+  const shouldDisplayLabel =
+    isPressed &&
+    ((gestureStateRef.current.isLow && !disabledLow) ||
+      (!gestureStateRef.current.isLow && !disabledHigh));
+
+  const follower = (
+    <Animated.View style={[transform, {opacity: shouldDisplayLabel ? 1 : 0}]}>
+      <FollowerContainer onLayout={handleLayout} ref={contentContainerRef} />
+    </Animated.View>
+  );
+  return [follower, update];
+};
+
+interface InProps {
+  low: number;
+  high: number;
+  min: number;
+  max: number;
+  step: number;
+}
+
+export const useSelectedRail = (
+  inPropsRef: RefObject<InProps>,
+  containerWidthRef: RefObject<number>,
+  thumbWidth: number,
+  disableRange: boolean
+) => {
+  const {current: left} = useRef(new Animated.Value(0));
+  const {current: right} = useRef(new Animated.Value(0));
+  const update = useCallback(() => {
+    const {low, high, min, max} = inPropsRef.current;
+    const {current: containerWidth} = containerWidthRef;
+    const fullScale = (max - min) / (containerWidth - thumbWidth);
+    const leftValue = (low - min) / fullScale;
+    const rightValue = (max - high) / fullScale;
+    left.setValue(disableRange ? 0 : leftValue);
+    right.setValue(
+      disableRange ? containerWidth - thumbWidth - leftValue : rightValue
+    );
+  }, [inPropsRef, containerWidthRef, disableRange, thumbWidth, left, right]);
+  const styles = useMemo(
+    () => ({
+      position: 'absolute',
+      left: left,
+      right: right,
+    }),
+    [left, right]
+  );
+  return [styles, update];
+};
+
+/**
+ * @param floating
+ * @returns {{onLayout: ((function({nativeEvent: *}): void)|undefined), style: [*, {top}]}}
+ */
+export const useLabelContainerProps = (floating: boolean) => {
+  const [labelContainerHeight, setLabelContainerHeight] = useState(0);
+  const onLayout = useCallback(({nativeEvent}: {nativeEvent: {layout: {height: number}}}) => {
+    const {
+      layout: {height},
+    } = nativeEvent;
+    setLabelContainerHeight(height);
+  }, []);
+
+  const top = floating ? -(labelContainerHeight + Spacing.XS) : Spacing.XS;
+  const style = [
+    floating ? styles.labelFloatingContainer : styles.labelFixedContainer,
+    {top},
+  ];
+  return {style, onLayout: onLayout};
+};

package/src/libs/Slider/index.tsx

@@ -0,0 +1,453 @@
+import React, {
+  memo,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import {
+  Animated,
+  GestureResponderEvent,
+  LayoutChangeEvent,
+  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, lowProp, updateThumbs]);
+
+    useEffect(() => {
+      updateThumbs();
+    }, [updateThumbs]);
+
+    const handleContainerLayout = useWidthLayout(
+      containerWidthRef,
+      updateThumbs
+    );
+    const handleThumbLayout = useCallback(
+      ({
+        nativeEvent,
+      }: LayoutChangeEvent) => {
+        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,
+          minRange,
+          onSliderTouchEnd,
+          onSliderTouchStart,
+      ]
+    );
+
+    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/src/libs/Slider/package.json

@@ -0,0 +1,16 @@
+{
+    "name": "@momo-kits/slider",
+    "version": "0.157.1-beta.4",
+    "private": false,
+    "main": "index.tsx",
+    "peerDependencies": {
+        "@momo-kits/foundation": "latest",
+        "react": "*",
+        "react-native": "*"
+    },
+    "license": "MoMo",
+    "publishConfig": {
+        "registry": "https://registry.npmjs.org/"
+    },
+    "dependencies": {}
+}

package/src/libs/Slider/publish.sh

@@ -0,0 +1,18 @@
+#!/bin/bash
+
+
+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 publish --tag latest --access=public
+elif [ "$1" == "beta" ]; then
+  npm publish --tag beta --access=public
+else
+  npm publish --tag alpha --access=public
+fi
+
+PACKAGE_NAME=$(npm pkg get name)
+NEW_PACKAGE_VERSION=$(npm pkg get version)
+