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

package/Label.tsx

@@ -0,0 +1,33 @@
+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';
+
+export type LabelRef = {
+  setValue: (value: number) => void;
+};
+
+const Label: ForwardRefRenderFunction<LabelRef, ViewProps> = (props, ref) => {
+  const [value, _setValue] = useState(Number.NaN);
+
+  useImperativeHandle(ref, () => ({
+    setValue,
+  }));
+
+  const setValue = (newValue: number) => {
+    _setValue(newValue);
+  };
+
+  return (
+    <View {...props} style={[styles.label, Shadow.Light]}>
+      <Text typography={'label_s_medium'}>{value}</Text>
+    </View>
+  );
+};
+
+export default forwardRef(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,218 @@
+import React, {
+  MutableRefObject,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import {Animated, I18nManager, ViewStyle} 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: 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
+ * @param disabledLow
+ * @param disabledHigh
+ * @returns {[JSX.Element, function(*, *=): void]|*[]}
+ */
+export const useThumbFollower = (
+  containerWidthRef: MutableRefObject<number>,
+  gestureStateRef: MutableRefObject<{
+    isLow: boolean;
+    lastValue: number;
+    lastPosition: number;
+  }>,
+  isPressed: boolean,
+  allowOverflow: boolean,
+  disabledLow: boolean,
+  disabledHigh: boolean,
+) => {
+  const xRef = useRef(new Animated.Value(0));
+  const widthRef = useRef(0);
+  const contentContainerRef = useRef<LabelRef>(null);
+
+  const {current: x} = xRef;
+
+  const update = useCallback(
+    (thumbPositionInView, value) => {
+      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], // 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: 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: 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}) => {
+    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};
+};