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

react-native UI组件库

import React from 'react';
import { Animated as RNAnimated, StyleSheet } from 'react-native';
import { RectButton } from 'react-native-gesture-handler';
import Swipeable from 'react-native-gesture-handler/Swipeable';
import Animated from 'react-native-reanimated';
import { useTheme } from '@shopify/restyle';
import Flex from '../flex';
import helpers from '../helpers';
import Text from '../text';
import { SwipeRowContextProvider } from './context';
import useSwipeRow from './useSwipeRow';
const {
  px
} = helpers;
const SwipeRow = _ref => {
  let {
    anchor,
    actions = [],
    actionWidth,
    onRemove,
    overwriteDefaultActions = false,
    children,
    containerStyle,
    contentContainerStyle
  } = _ref;
  const theme = useTheme();
  const {
    swipeableRef,
    animatedStyle,
    changeState,
    handleLayout,
    handleRemove
  } = useSwipeRow({
    anchor,
    onRemove
  });
  const renderRightAction = props => {
    const styles = StyleSheet.create({
      container: {
        flex: 1
      },
      rect: {
        flex: 1,
        backgroundColor: props.backgroundColor,
        justifyContent: 'center',
        alignItems: 'center'
      }
    });
    const trans = props.progress.interpolate({
      inputRange: [0, 1],
      outputRange: [props.x, 0],
      extrapolate: 'clamp'
    });
    return /*#__PURE__*/React.createElement(RNAnimated.View, {
      key: props.x,
      style: [styles.container, {
        transform: [{
          translateX: trans
        }]
      }]
    }, /*#__PURE__*/React.createElement(RectButton, {
      style: styles.rect,
      onPress: props.onPress
    }, /*#__PURE__*/React.createElement(Text, {
      fontSize: px(16),
      color: "white",
      style: props.textStyle
    }, props.label)));
  };

  /** 操作按钮 */
  const actionButtons = overwriteDefaultActions ? actions : actions.concat({
    label: '删除',
    onPress: handleRemove,
    backgroundColor: theme.colors.func600
  });
  const renderRightActions = (progress, _dragAnimatedValue) => /*#__PURE__*/React.createElement(Flex, {
    width: actionWidth * actionButtons.length
  }, actionButtons.map((item, index) => {
    const x = (actionButtons.length - index) * actionWidth;
    return renderRightAction({
      ...item,
      progress,
      x
    });
  }));
  if (!children) return null;
  return /*#__PURE__*/React.createElement(Swipeable, {
    ref: swipeableRef,
    friction: 1,
    overshootFriction: 10,
    useNativeAnimations: true,
    enableTrackpadTwoFingerGesture: true,
    rightThreshold: 60,
    renderRightActions: renderRightActions,
    onSwipeableWillOpen: () => changeState(anchor),
    containerStyle: containerStyle
  }, /*#__PURE__*/React.createElement(Animated.View, {
    style: [contentContainerStyle, animatedStyle],
    onLayout: handleLayout
  }, children));
};
SwipeRow.displayName = 'SwipeRow';
export default Object.assign(SwipeRow, {
  Provider: SwipeRowContextProvider
});
//# sourceMappingURL=index.js.map