@arpitbhalla/rneui-base-dev
Version:
Cross Platform React Native UI Toolkit
134 lines (133 loc) • 6.12 kB
JavaScript
;
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ListItemSwipeable = void 0;
var react_1 = __importDefault(require("react"));
var react_native_1 = require("react-native");
var ListItem_1 = require("./ListItem");
var helpers_1 = require("../helpers");
var ListItemSwipeable = function (_a) {
var children = _a.children, leftStyle = _a.leftStyle, rightStyle = _a.rightStyle, leftContent = _a.leftContent, rightContent = _a.rightContent, _b = _a.leftWidth, leftWidth = _b === void 0 ? helpers_1.ScreenWidth / 3 : _b, _c = _a.rightWidth, rightWidth = _c === void 0 ? helpers_1.ScreenWidth / 3 : _c, onSwipeBegin = _a.onSwipeBegin, onSwipeEnd = _a.onSwipeEnd, _d = _a.animation, animation = _d === void 0 ? { type: 'spring', duration: 200 } : _d, rest = __rest(_a, ["children", "leftStyle", "rightStyle", "leftContent", "rightContent", "leftWidth", "rightWidth", "onSwipeBegin", "onSwipeEnd", "animation"]);
var translateX = react_1.default.useRef(new react_native_1.Animated.Value(0));
var panX = react_1.default.useRef(0);
var slideAnimation = react_1.default.useCallback(function (toValue) {
panX.current = toValue;
react_native_1.Animated[animation.type || 'spring'](translateX.current, {
toValue: toValue,
useNativeDriver: true,
duration: animation.duration || 200,
}).start();
}, [animation.duration, animation.type]);
var resetCallBack = react_1.default.useCallback(function () {
slideAnimation(0);
}, [slideAnimation]);
var onMove = react_1.default.useCallback(function (_, _a) {
var dx = _a.dx;
translateX.current.setValue(panX.current + dx);
}, []);
var onRelease = react_1.default.useCallback(function (_, _a) {
var dx = _a.dx;
if (Math.abs(panX.current + dx) >= helpers_1.ScreenWidth / 3) {
slideAnimation(panX.current + dx > 0 ? leftWidth : -rightWidth);
}
else {
slideAnimation(0);
}
}, [leftWidth, rightWidth, slideAnimation]);
var shouldSlide = react_1.default.useCallback(function (_, _a) {
var dx = _a.dx, dy = _a.dy, vx = _a.vx, vy = _a.vy;
if (dx > 0 && !leftContent && !panX.current) {
return false;
}
if (dx < 0 && !rightContent && !panX.current) {
return false;
}
return (Math.abs(dx) > Math.abs(dy) * 2 && Math.abs(vx) > Math.abs(vy) * 2.5);
}, [leftContent, rightContent]);
var _panResponder = react_1.default.useMemo(function () {
return react_native_1.PanResponder.create({
onMoveShouldSetPanResponder: shouldSlide,
onPanResponderGrant: function (_event, _a) {
var vx = _a.vx;
onSwipeBegin === null || onSwipeBegin === void 0 ? void 0 : onSwipeBegin(vx > 0 ? 'left' : 'right');
},
onPanResponderMove: onMove,
onPanResponderRelease: onRelease,
onPanResponderReject: onRelease,
onPanResponderTerminate: onRelease,
onPanResponderEnd: function () {
onSwipeEnd === null || onSwipeEnd === void 0 ? void 0 : onSwipeEnd();
},
});
}, [onMove, onRelease, onSwipeBegin, onSwipeEnd, shouldSlide]);
return (react_1.default.createElement(react_native_1.View, { style: {
justifyContent: 'center',
} },
react_1.default.createElement(react_native_1.View, { style: styles.actions },
react_1.default.createElement(react_native_1.View, { style: [
{
width: leftWidth,
zIndex: 1,
},
leftStyle,
] }, typeof leftContent === 'function'
? leftContent(resetCallBack)
: leftContent),
react_1.default.createElement(react_native_1.View, { style: { flex: 0 } }),
react_1.default.createElement(react_native_1.View, { style: [
{
width: rightWidth,
zIndex: 1,
},
rightStyle,
] }, typeof rightContent === 'function'
? rightContent(resetCallBack)
: rightContent)),
react_1.default.createElement(react_native_1.Animated.View, __assign({ style: {
transform: [
{
translateX: translateX.current,
},
],
} }, _panResponder.panHandlers),
react_1.default.createElement(ListItem_1.ListItemBase, __assign({}, rest), children))));
};
exports.ListItemSwipeable = ListItemSwipeable;
var styles = react_native_1.StyleSheet.create({
actions: {
bottom: 0,
left: 0,
overflow: 'hidden',
position: 'absolute',
right: 0,
top: 0,
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
},
});
exports.ListItemSwipeable.displayName = 'ListItem.Swipeable';