@r3l/app
Version:
219 lines (183 loc) • 8.37 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _reactNativeWeb = require("react-native-web");
var _reactRedux = require("react-redux");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _pills = _interopRequireDefault(require("../../ui/mobile/pills.component"));
var _styled = require("../../styled");
var _reactNativeGestureHandler = require("react-native-gesture-handler");
var _navigation = require("../../navigation/navigation.actions");
var _reactNavigationDrawer = require("react-navigation-drawer");
var _discoverTabContext = require("../../discover/mobile/discoverTabContext");
var _comment = _interopRequireDefault(require("./comment"));
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
var styles;
Commentary.propTypes = {
link: _propTypes.default.object,
singlePost: _propTypes.default.bool,
focusInput: _propTypes.default.func,
commentary: _propTypes.default.array,
preview: _propTypes.default.bool,
avatarText: _propTypes.default.func,
isReply: _propTypes.default.bool
};
function Commentary(props) {
var commentary = props.commentary,
preview = props.preview,
isReply = props.isReply,
link = props.link,
singlePost = props.singlePost,
focusInput = props.focusInput,
avatarText = props.avatarText;
var scrollToPage = function scrollToPage(p) {
return scrollView.current.scrollToIndex({
index: p
});
};
var _useState = (0, _react.useState)(0),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
currentIndex = _useState2[0],
setCurrentIndex = _useState2[1];
var _useState3 = (0, _react.useState)(true),
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
scrollEnabled = _useState4[0],
setScrollEnabled = _useState4[1];
var _useState5 = (0, _react.useState)(0),
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
scrollOffset = _useState6[0],
setScrollOffset = _useState6[1];
var _useState7 = (0, _react.useState)(10000),
_useState8 = (0, _slicedToArray2.default)(_useState7, 2),
maxOffset = _useState8[0],
setMaxOffset = _useState8[1];
var scrollView = (0, _react.useRef)();
var panRef = (0, _react.useRef)();
var listRef = (0, _react.useRef)();
var gesture = (0, _reactRedux.useSelector)(function (state) {
return state.navigation.gesture;
});
var dispatch = (0, _reactRedux.useDispatch)();
var onScrollEnd = function onScrollEnd(e) {
var contentOffset = e.nativeEvent.contentOffset;
var viewSize = e.nativeEvent.layoutMeasurement; // Divide the horizontal offset by the width of the view to see which page is visible
var pageNum = Math.floor(contentOffset.x / viewSize.width);
setCurrentIndex(pageNum);
};
var handleGesture = function handleGesture(e) {
var _e$nativeEvent = e.nativeEvent,
translationX = _e$nativeEvent.translationX,
state = _e$nativeEvent.state;
if (gesture !== listRef && state === 2) {
dispatch((0, _navigation.registerGesture)(listRef));
}
if (state === 2) return;
var offset = translationX;
var leftEnd = scrollOffset - offset <= 0 && offset > 0;
var rightEnd = scrollOffset - offset >= maxOffset;
var shouldDisableScroll = leftEnd || rightEnd;
var shouldEnableScroll = !shouldDisableScroll || state === 5;
shouldDisableScroll && scrollEnabled && setScrollEnabled(false);
shouldEnableScroll && !scrollEnabled && setScrollEnabled(true);
};
var pills = /*#__PURE__*/_react.default.createElement(_styled.Box, {
style: {
mt: 2
}
}, /*#__PURE__*/_react.default.createElement(_pills.default, {
currentIndex: currentIndex,
slides: commentary.map(function (c, i) {
return i + 1;
}),
scrollToPage: scrollToPage
}));
return /*#__PURE__*/_react.default.createElement(_styled.Box, {
style: {
mb: !preview ? 2 : 0
}
}, isReply && !preview ? /*#__PURE__*/_react.default.createElement(_styled.DividerLine, {
sx: {
mx: 2
}
}) : null, /*#__PURE__*/_react.default.createElement(_discoverTabContext.TabViewContext.Consumer, null, function (tabView) {
return /*#__PURE__*/_react.default.createElement(_reactNavigationDrawer.DrawerGestureContext.Consumer, null, function (drawer) {
return /*#__PURE__*/_react.default.createElement(_reactNativeGestureHandler.PanGestureHandler, {
enabled: commentary.length > 1,
ref: panRef,
activeOffsetX: [-5, 5],
onHandlerStateChange: handleGesture,
onGestureEvent: handleGesture,
simultaneousHandlers: [drawer, tabView, listRef].filter(function (h) {
return h;
})
}, /*#__PURE__*/_react.default.createElement(_reactNativeGestureHandler.NativeViewGestureHandler, {
enabled: commentary.length > 1 && scrollEnabled,
ref: listRef // shouldRecognizeSimultaneously
,
simultaneousHandlers: [drawer, tabView, panRef].filter(function (h) {
return h;
})
}, /*#__PURE__*/_react.default.createElement(_reactNativeWeb.FlatList, {
style: {
marginTop: !preview ? 16 : 0
},
ref: scrollView,
shouldActivateOnStart: false,
scrollEnabled: commentary.length > 1 && scrollEnabled,
scrollEventThrottle: 30,
scrollToOverflowEnabled: false,
alwaysBounceHorizontal: false,
bounces: false,
onScroll: function onScroll(e) {
var x = e.nativeEvent.contentOffset.x;
var length = e.nativeEvent.layoutMeasurement.width;
setScrollOffset(x);
setMaxOffset(length * (commentary.length - 1));
},
keyExtractor: function keyExtractor(item, index) {
return index.toString();
},
horizontal: !preview,
data: commentary,
renderItem: function renderItem(_ref) {
var post = _ref.item,
index = _ref.index;
return /*#__PURE__*/_react.default.createElement(_comment.default, {
post: post,
index: index,
preview: preview,
singlePost: singlePost,
focusInput: focusInput,
link: link,
avatarText: avatarText
});
},
pagingEnabled: true,
contentContainerStyle: [!preview ? styles.postScroll : null],
showsHorizontalScrollIndicator: false,
onMomentumScrollEnd: onScrollEnd
})));
});
}), commentary.length > 1 ? pills : null);
}
var localStyles = _reactNativeWeb.StyleSheet.create({
postScroll: {
flexDirection: 'row',
alignItems: 'flex-start',
flexWrap: 'nowrap',
justifyContent: 'flex-start',
marginLeft: 0,
marginRight: 0
}
});
styles = localStyles;
var _default = /*#__PURE__*/(0, _react.memo)(Commentary);
exports.default = _default;
//# sourceMappingURL=commentary.component.js.map