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

package/src/libs/Slider/hooks.tsx

@@ -1,218 +0,0 @@
-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

@@ -1,453 +0,0 @@
-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

@@ -1,16 +0,0 @@
-{
-    "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

@@ -1,18 +0,0 @@
-#!/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)
-