react-native-story-component
Version:
Story component for React Native.
230 lines (229 loc) • 8.99 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _reactNativeModalbox = _interopRequireDefault(require("react-native-modalbox"));
var _StoryListItem = _interopRequireDefault(require("./StoryListItem"));
var _StoryCircleListView = _interopRequireDefault(require("./StoryCircleListView"));
var _AndroidCubeEffect = _interopRequireDefault(require("../animations/AndroidCubeEffect"));
var _CubeNavigationHorizontal = _interopRequireDefault(require("../animations/CubeNavigationHorizontal"));
var _ValidationHelpers = require("../helpers/ValidationHelpers");
var _useMountEffect = _interopRequireDefault(require("../helpers/useMountEffect"));
var _index = require("../index");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
const Story = props => {
const {
data,
unPressedBorderColor,
pressedBorderColor,
storyListStyle,
onStart,
onClose,
duration,
swipeText,
customSwipeUpButton,
customCloseButton,
customStoryList,
customProfileBanner,
customStoryImage,
avatarSize,
showAvatarText,
showProfileBanner,
avatarTextStyle,
prefetchImages,
onImagesPrefetched
} = props;
const cubeRef = (0, _react.useRef)(null);
const [dataState, setDataState] = (0, _react.useState)(data);
const [isModalOpen, setIsModalOpen] = (0, _react.useState)(false);
const [currentPage, setCurrentPage] = (0, _react.useState)(0);
const [selectedData, setSelectedData] = (0, _react.useState)([]);
const _handleStoryItemPress = (item, index) => {
const newData = dataState.slice(index);
if (onStart) onStart(item);
setCurrentPage(0);
setSelectedData(newData);
setIsModalOpen(true);
};
const handleSeen = (0, _react.useCallback)(() => {
const seen = selectedData[currentPage];
const seenIndex = dataState.indexOf(seen);
if (seenIndex > 0) {
var _dataState$seenIndex;
if (!((_dataState$seenIndex = dataState[seenIndex]) !== null && _dataState$seenIndex !== void 0 && _dataState$seenIndex.seen)) {
let tempData = dataState;
dataState[seenIndex] = {
...dataState[seenIndex],
seen: true
};
setDataState(tempData);
}
}
}, [currentPage, dataState, selectedData]);
(0, _useMountEffect.default)(() => {
if (prefetchImages) {
let preFetchTasks = [];
const images = data.flatMap(story => {
const storyImages = story.stories.map(storyItem => {
return storyItem.image;
});
return storyImages;
});
images.forEach(image => {
preFetchTasks.push(_reactNative.Image.prefetch(image));
});
Promise.all(preFetchTasks).then(results => {
let downloadedAll = true;
results.forEach(result => {
if (!result) {
//error occurred downloading a pic
downloadedAll = false;
}
});
if (onImagesPrefetched) {
onImagesPrefetched(downloadedAll);
}
});
}
});
(0, _react.useEffect)(() => {
handleSeen();
}, [currentPage, handleSeen]);
const onStoryFinish = state => {
if (!(0, _ValidationHelpers.isNullOrWhitespace)(state)) {
if (state === _index.ActionStates.NEXT) {
const newPage = currentPage + 1;
if (newPage < selectedData.length) {
var _cubeRef$current;
setCurrentPage(newPage);
//@ts-ignore
cubeRef === null || cubeRef === void 0 ? void 0 : (_cubeRef$current = cubeRef.current) === null || _cubeRef$current === void 0 ? void 0 : _cubeRef$current.scrollTo(newPage);
} else {
setIsModalOpen(false);
setCurrentPage(0);
if (onClose) {
onClose(selectedData[selectedData.length - 1]);
}
}
} else if (state === _index.ActionStates.PREVIOUS) {
const newPage = currentPage - 1;
if (newPage < 0) {
setIsModalOpen(false);
setCurrentPage(0);
} else {
var _cubeRef$current2;
setCurrentPage(newPage);
//@ts-ignore
cubeRef === null || cubeRef === void 0 ? void 0 : (_cubeRef$current2 = cubeRef.current) === null || _cubeRef$current2 === void 0 ? void 0 : _cubeRef$current2.scrollTo(newPage);
}
}
}
};
const onClosePress = story => {
setIsModalOpen(false);
if (onClose) onClose(story);
};
const renderStoryList = () => {
return selectedData.map((story, i) => {
if (props.customStoryView) return props.customStoryView({
index: i,
data: story,
currentPage,
changeStory: onStoryFinish,
close: () => onClosePress(story)
});
return /*#__PURE__*/_react.default.createElement(_StoryListItem.default, {
key: `story-${story.id}`,
index: i,
duration: duration ? duration * 1000 : undefined,
profileName: story.name,
profileImage: (0, _ValidationHelpers.isUrl)(story.avatar) ? {
uri: story.avatar
} : story.avatar,
stories: story.stories,
currentPage: currentPage,
onFinish: onStoryFinish,
swipeText: swipeText,
customSwipeUpButton: customSwipeUpButton,
customCloseButton: customCloseButton,
customProfileBanner: customProfileBanner,
customStoryImage: customStoryImage,
showProfileBanner: showProfileBanner,
onClosePress: () => onClosePress(story)
});
});
};
const renderStoryCircleList = () => {
if (customStoryList) {
return customStoryList({
data: dataState,
onStoryPress: _handleStoryItemPress
});
}
return /*#__PURE__*/_react.default.createElement(_StoryCircleListView.default, {
handleStoryItemPress: _handleStoryItemPress,
data: dataState,
avatarSize: avatarSize,
unPressedBorderColor: unPressedBorderColor,
pressedBorderColor: pressedBorderColor,
showText: showAvatarText,
textStyle: avatarTextStyle
});
};
const renderCube = () => {
if (_reactNative.Platform.OS === 'ios') {
return /*#__PURE__*/_react.default.createElement(_CubeNavigationHorizontal.default, {
ref: cubeRef,
callBackAfterSwipe: x => {
if (parseInt(`${x}`, 10) !== currentPage) {
setCurrentPage(parseInt(`${x}`, 10));
}
}
}, renderStoryList());
}
return /*#__PURE__*/_react.default.createElement(_AndroidCubeEffect.default
//@ts-ignore
, {
ref: cubeRef,
callBackAfterSwipe: x => {
if (parseInt(`${x}`, 10) !== currentPage) {
setCurrentPage(parseInt(`${x}`, 10));
}
}
}, renderStoryList());
};
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: storyListStyle
}, renderStoryCircleList()), /*#__PURE__*/_react.default.createElement(_reactNativeModalbox.default, {
style: styles.modal,
isOpen: isModalOpen,
onClosed: () => setIsModalOpen(false),
position: "center",
swipeToClose: true,
swipeArea: 250,
backButtonClose: true,
coverScreen: true
}, /*#__PURE__*/_react.default.createElement(_reactNative.StatusBar, {
barStyle: "light-content"
}), renderCube()));
};
Story.defaultProps = {
showAvatarText: true,
showProfileBanner: true,
prefetchImages: true
};
const styles = _reactNative.StyleSheet.create({
modal: {
flex: 1,
height: _reactNative.Dimensions.get('window').height,
width: _reactNative.Dimensions.get('window').width
}
});
var _default = Story;
exports.default = _default;
//# sourceMappingURL=Story.js.map