@td-design/react-native/lib/module/swipe-row/useSwipeRow.js

react-native UI组件库

import { useContext, useEffect, useRef } from 'react';
import { interpolate, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
import { useMemoizedFn, useSafeState } from '@td-design/rn-hooks';
import { SwipeRowContext } from './context';
export default function useSwipeRow(_ref) {
  let {
    anchor,
    onRemove
  } = _ref;
  const swipeableRef = useRef(null);
  const isRemoving = useSharedValue(0);
  const [height, setHeight] = useSafeState(0);
  const {
    changeState,
    id,
    multiple
  } = useContext(SwipeRowContext);
  useEffect(() => {
    if (anchor === id && !multiple) {
      var _swipeableRef$current;
      (_swipeableRef$current = swipeableRef.current) === null || _swipeableRef$current === void 0 ? void 0 : _swipeableRef$current.close();
    }
  }, [anchor, id, multiple]);
  const handleRemove = async () => {
    var _swipeableRef$current2;
    await (onRemove === null || onRemove === void 0 ? void 0 : onRemove());
    isRemoving.value = withTiming(1, {
      duration: 200
    });
    (_swipeableRef$current2 = swipeableRef.current) === null || _swipeableRef$current2 === void 0 ? void 0 : _swipeableRef$current2.close();
  };
  const handleLayout = e => {
    setHeight(e.nativeEvent.layout.height);
  };
  const animatedStyle = useAnimatedStyle(() => {
    if (isRemoving.value) {
      return {
        height: interpolate(isRemoving.value, [0, 1], [height, 0])
      };
    }
    return {};
  });
  return {
    swipeableRef,
    animatedStyle,
    changeState,
    handleLayout: useMemoizedFn(handleLayout),
    handleRemove: useMemoizedFn(handleRemove)
  };
}
//# sourceMappingURL=useSwipeRow.js.map