stream-chat-react-native-core/lib/module/components/UIComponents/SwipableWrapper.js

The official React Native and Expo components for Stream Chat, a service for building chat applications

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.getRightActionsLayout = exports.SwipableWrapper = exports.RightActions = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _reactNativeGestureHandler = require("react-native-gesture-handler");
var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
var _ReanimatedSwipeable = _interopRequireDefault(require("react-native-gesture-handler/ReanimatedSwipeable"));
var _SwipeRegistryContext = require("../../contexts/swipeableContext/SwipeRegistryContext");
var _hooks = require("../../hooks");
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["overshootLeft", "overshootRight", "renderLeftActions", "renderRightActions"];
var _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/UIComponents/SwipableWrapper.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var ACTION_WIDTH = 80;
var MAX_RIGHT_ACTIONS_WIDTH = 240;
var animationOptions = {
  damping: 24,
  mass: 1,
  overshootClamping: false,
  stiffness: 180
};
var getRightActionsLayout = itemCount => {
  if (!itemCount) {
    return {
      containerWidth: 0,
      itemWidth: 0
    };
  }
  var containerWidth = Math.min(itemCount * ACTION_WIDTH, MAX_RIGHT_ACTIONS_WIDTH);
  var itemWidth = containerWidth / itemCount;
  return {
    containerWidth,
    itemWidth
  };
};
exports.getRightActionsLayout = getRightActionsLayout;
var RightActions = ({
  items,
  side,
  translation
}) => {
  var resolvedSide = side ?? (_reactNative.I18nManager.isRTL ? 'left' : 'right');
  var _useMemo = (0, _react.useMemo)(() => getRightActionsLayout(items.length), [items.length]),
    containerWidth = _useMemo.containerWidth,
    itemWidth = _useMemo.itemWidth;
  var actionItems = (0, _react.useMemo)(() => resolvedSide === 'left' ? [...items].reverse() : items, [items, resolvedSide]);
  var translationDirection = resolvedSide === 'right' ? -1 : 1;
  var animatedActionWidthStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
    width: (0, _reactNativeReanimated.interpolate)(translationDirection * translation.value, [0, containerWidth, containerWidth + 40], [0, itemWidth, itemWidth + 8], _reactNativeReanimated.Extrapolation.CLAMP)
  }));
  var animatedIconScaleStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
    transform: [{
      scale: (0, _reactNativeReanimated.interpolate)(translationDirection * translation.value, [0, containerWidth, containerWidth + 40], [0, 1, 1], _reactNativeReanimated.Extrapolation.CLAMP)
    }]
  }));
  return (0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
    style: [resolvedSide === 'left' ? styles.leftActionsContainer : styles.rightActionsContainer, {
      width: containerWidth
    }],
    children: actionItems.map(item => {
      var Content = item.Content;
      return (0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
        style: [styles.action, animatedActionWidthStyle],
        children: (0, _jsxRuntime.jsx)(_reactNativeGestureHandler.Pressable, {
          onPress: item.action,
          style: _reactNative.StyleSheet.absoluteFill,
          children: (0, _jsxRuntime.jsx)(_reactNative.View, {
            style: item.contentContainerStyle,
            children: (0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
              style: animatedIconScaleStyle,
              children: (0, _jsxRuntime.jsx)(Content, {})
            })
          })
        })
      }, item.id);
    })
  });
};
exports.RightActions = RightActions;
var SwipableWrapper = ({
  children,
  swipeableId,
  swipableProps
}) => {
  var isRTL = _reactNative.I18nManager.isRTL;
  var swipeRegistry = (0, _SwipeRegistryContext.useSwipeRegistryContext)();
  var swipeableRef = (0, _react.useRef)(null);
  (0, _react.useEffect)(() => {
    if (!swipeRegistry || !swipeableId) {
      return;
    }
    return swipeRegistry.registerSwipeable(swipeableId, () => {
      swipeableRef.current?.close();
    });
  }, [swipeRegistry, swipeableId]);
  var onSwipeableOpenStartDrag = (0, _hooks.useStableCallback)(direction => {
    if (swipeRegistry && swipeableId) {
      swipeRegistry.notifyWillOpen(swipeableId);
    }
    swipableProps?.onSwipeableOpenStartDrag?.(direction);
  });
  var onSwipeableWillClose = (0, _hooks.useStableCallback)(direction => {
    if (swipeableId) {
      swipeRegistry?.updateOpenTracker(swipeableId, false);
    }
    swipableProps?.onSwipeableWillClose?.(direction);
  });
  var rtlAwareSwipeableProps = (0, _react.useMemo)(() => {
    var _ref = swipableProps ?? {},
      overshootLeft = _ref.overshootLeft,
      overshootRight = _ref.overshootRight,
      renderLeftActions = _ref.renderLeftActions,
      renderRightActions = _ref.renderRightActions,
      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
    return {
      ...rest,
      overshootLeft: isRTL ? overshootRight ?? true : overshootLeft ?? false,
      overshootRight: isRTL ? overshootLeft ?? false : overshootRight ?? true,
      renderLeftActions: isRTL ? renderRightActions : renderLeftActions,
      renderRightActions: isRTL ? renderLeftActions : renderRightActions
    };
  }, [isRTL, swipableProps]);
  return (0, _jsxRuntime.jsx)(_ReanimatedSwipeable.default, {
    ref: swipeableRef,
    animationOptions: animationOptions,
    friction: 1.5,
    onSwipeableOpenStartDrag: onSwipeableOpenStartDrag,
    onSwipeableWillClose: onSwipeableWillClose,
    overshootFriction: 16,
    ...rtlAwareSwipeableProps,
    children: children
  });
};
exports.SwipableWrapper = SwipableWrapper;
var styles = _reactNative.StyleSheet.create({
  leftActionsContainer: {
    direction: 'ltr',
    flexDirection: 'row',
    justifyContent: 'flex-start',
    overflow: 'visible'
  },
  rightActionsContainer: {
    direction: 'ltr',
    flexDirection: 'row',
    justifyContent: 'flex-end',
    overflow: 'visible'
  },
  action: {
    overflow: 'hidden',
    width: 0
  }
});
//# sourceMappingURL=SwipableWrapper.js.map