@momo-kits/slider 0.77.2 → 0.77.3

package/Label.tsx

@@ -0,0 +1,36 @@
+import React, {PureComponent} from 'react';
+import {View} from 'react-native';
+import {Shadow, Text, Colors, Spacing, Radius} from '@momo-kits/foundation';
+
+class Label extends PureComponent {
+  state = {
+    value: Number.NaN,
+  };
+
+  setValue = (value: number) => {
+    this.setState({value});
+  };
+
+  render() {
+    const {...props} = this.props;
+    const {value} = this.state;
+
+    return (
+      <View
+        {...props}
+        style={[
+          {
+            backgroundColor: Colors.black_01,
+            paddingVertical: Spacing.XS,
+            paddingHorizontal: Spacing.S,
+            borderRadius: Radius.XS,
+          },
+          Shadow.Light,
+        ]}>
+        <Text typography={'description_xs'}>{value}</Text>
+      </View>
+    );
+  }
+}
+
+export default Label;

package/helpers.ts

@@ -0,0 +1,35 @@
+export const isLowCloser = (
+  downX: number,
+  lowPosition: number,
+  highPosition: number,
+): boolean => {
+  if (lowPosition === highPosition) {
+    return downX < lowPosition;
+  }
+  const distanceFromLow = Math.abs(downX - lowPosition);
+  const distanceFromHigh = Math.abs(downX - highPosition);
+  return distanceFromLow < distanceFromHigh;
+};
+
+export const clamp = (value: number, min: number, max: number): number => {
+  return Math.min(Math.max(value, min), max);
+};
+
+export const getValueForPosition = (
+  positionInView: number,
+  containerWidth: number,
+  thumbWidth: number,
+  min: number,
+  max: number,
+  step: number,
+): number => {
+  const availableSpace = containerWidth - thumbWidth;
+  const relStepUnit = step / (max - min);
+  let relPosition = (positionInView - thumbWidth / 2) / availableSpace;
+  const relOffset = relPosition % relStepUnit;
+  relPosition -= relOffset;
+  if (relOffset / relStepUnit >= 0.5) {
+    relPosition += relStepUnit;
+  }
+  return clamp(min + Math.round(relPosition / relStepUnit) * step, min, max);
+};

package/hooks.tsx

@@ -0,0 +1,198 @@
+import React, {
+  useCallback,
+  useState,
+  useRef,
+  useMemo,
+  MutableRefObject,
+  ReactNode,
+} from 'react';
+import {Animated, I18nManager, View} from 'react-native';
+import {clamp} from './helpers';
+import styles from './styles';
+import FollowerContainer from './Label';
+import {Text} 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: MutableRefObject<number>,
+  callback?: (width: number) => void,
+) => {
+  return useCallback(
+    ({nativeEvent}) => {
+      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
+ * @returns {[JSX.Element, function(*, *=): void]|*[]}
+ */
+export const useThumbFollower = (
+  containerWidthRef: MutableRefObject<number>,
+  gestureStateRef: MutableRefObject<{lastValue: number; lastPosition: number}>,
+  isPressed: boolean,
+  allowOverflow: boolean,
+) => {
+  const xRef = useRef(new Animated.Value(0));
+  const widthRef = useRef(0);
+  const contentContainerRef = useRef<FollowerContainer | null>(null);
+
+  const {current: x} = xRef;
+
+  const update = useCallback(
+    (thumbPositionInView, value) => {
+      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],
+  );
+
+  const handleLayout = useWidthLayout(widthRef, () => {
+    update(
+      gestureStateRef.current.lastPosition,
+      gestureStateRef.current.lastValue,
+    );
+  });
+
+  const transform = {transform: [{translateX: x}]};
+  const follower = (
+    <Animated.View style={[transform, {opacity: isPressed ? 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: MutableRefObject<InProps>,
+  containerWidthRef: MutableRefObject<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: I18nManager.isRTL ? right : left,
+      right: I18nManager.isRTL ? left : 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}) => {
+    const {
+      layout: {height},
+    } = nativeEvent;
+    setLabelContainerHeight(height);
+  }, []);
+
+  const top = floating ? -labelContainerHeight : 0;
+  const style = [
+    floating ? styles.labelFloatingContainer : styles.labelFixedContainer,
+    {top},
+  ];
+  return {style, onLayout: onLayout};
+};

package/index.tsx

@@ -0,0 +1,344 @@
+import React, {
+  memo,
+  ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import {
+  Animated,
+  GestureResponderEvent,
+  PanResponder,
+  PanResponderGestureState,
+  View,
+  ViewProps,
+} 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 {
+  min: number;
+  max: number;
+  minRange?: number;
+  step: number;
+  low?: number;
+  high?: number;
+  allowLabelOverflow?: boolean;
+  disableRange?: boolean;
+  disabled?: boolean;
+  floatingLabel?: boolean;
+  renderRail: () => ReactNode;
+  renderRailSelected: () => ReactNode;
+  onValueChanged?: (low: number, high: number, byUser: boolean) => void;
+  onSliderTouchStart?: (low: number, high: number) => void;
+  onSliderTouchEnd?: (low: number, high: number) => void;
+}
+
+const Slider: React.FC<SliderProps> = ({
+  min,
+  max,
+  minRange = 0,
+  step,
+  low: lowProp,
+  high: highProp,
+  floatingLabel = false,
+  allowLabelOverflow = false,
+  disableRange = false,
+  disabled = false,
+  onValueChanged,
+  onSliderTouchStart,
+  onSliderTouchEnd,
+  renderRail,
+  renderRailSelected,
+  ...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);
+    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,
+  );
+
+  const renderThumb = (name: string) => {
+    return (
+      <View
+        style={[
+          Shadow.Light,
+          {
+            width: 20,
+            height: 20,
+            borderRadius: Radius.M,
+            borderWidth: 4,
+            borderColor: theme.colors.background.surface,
+            backgroundColor: theme.colors.primary,
+          },
+        ]}
+      />
+    );
+  };
+
+  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) => {
+          if (disabled) {
+            return;
+          }
+          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;
+
+          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 &&
+              labelUpdate(gestureStateRef.current.lastPosition, value);
+
+            updateSelectedRail();
+          };
+          handlePositionChange(downX);
+          pointerX.removeAllListeners();
+          pointerX.addListener(({value: pointerPosition}) => {
+            const positionInView = pointerPosition - containerX;
+            handlePositionChange(positionInView);
+          });
+        },
+
+        onPanResponderMove: disabled
+          ? undefined
+          : Animated.event([null, {moveX: pointerX}], {useNativeDriver: false}),
+
+        onPanResponderRelease: () => {
+          setPressed(false);
+          const {low, high} = inPropsRef.current;
+          onSliderTouchEnd?.(low, high);
+        },
+      }),
+    [
+      pointerX,
+      inPropsRef,
+      thumbWidth,
+      disableRange,
+      disabled,
+      onValueChanged,
+      setLow,
+      setHigh,
+      labelUpdate,
+      updateSelectedRail,
+    ],
+  );
+
+  const renderTrack = (color: string) => {
+    return (
+      <View
+        style={{
+          width: '100%',
+          height: 4,
+          borderRadius: Radius.L,
+          backgroundColor: color,
+        }}
+      />
+    );
+  };
+
+  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}>
+            {renderTrack(theme.colors.primary)}
+          </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 default memo(Slider);

package/package.json

@@ -1,12 +1,11 @@
 {
     "name": "@momo-kits/slider",
-    "version": "0.77.2",
+    "version": "0.77.3",
     "private": false,
-    "main": "index.js",
+    "main": "index.tsx",
     "dependencies": {},
     "peerDependencies": {
-        "@momo-kits/core-v2": ">=0.0.5-beta",
-        "lodash": "^4.17.15",
+        "@momo-kits/foundation": "latest",
         "prop-types": "^15.7.2",
         "react": "16.9.0",
         "react-native": ">=0.55"

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,29 @@
+import {I18nManager, StyleSheet} from 'react-native';
+
+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,
+  },
+});