react-native-story-component
Version:
Story component for React Native.
86 lines • 3.06 kB
JavaScript
/* eslint-disable react-native/no-inline-styles */
import React, { useState, useEffect } from 'react';
import { View, Image, TouchableOpacity, Text, StyleSheet, Platform } from 'react-native';
import { isUrl } from '../helpers/ValidationHelpers';
import usePrevious from '../helpers/usePrevious';
const StoryCircleListItem = props => {
var _props$item, _props$item2, _props$item5;
const {
item,
unPressedBorderColor,
pressedBorderColor,
avatarSize,
showText,
textStyle,
handleStoryItemPress
} = props;
const [isPressed, setIsPressed] = useState(props === null || props === void 0 ? void 0 : (_props$item = props.item) === null || _props$item === void 0 ? void 0 : _props$item.seen);
const prevSeen = usePrevious(props === null || props === void 0 ? void 0 : (_props$item2 = props.item) === null || _props$item2 === void 0 ? void 0 : _props$item2.seen);
useEffect(() => {
var _props$item3;
if (prevSeen !== (props === null || props === void 0 ? void 0 : (_props$item3 = props.item) === null || _props$item3 === void 0 ? void 0 : _props$item3.seen)) {
var _props$item4;
setIsPressed(props === null || props === void 0 ? void 0 : (_props$item4 = props.item) === null || _props$item4 === void 0 ? void 0 : _props$item4.seen);
}
}, [prevSeen, props === null || props === void 0 ? void 0 : (_props$item5 = props.item) === null || _props$item5 === void 0 ? void 0 : _props$item5.seen]);
const _handleItemPress = story => {
if (handleStoryItemPress) handleStoryItemPress(story);
setIsPressed(true);
};
const size = avatarSize ?? 60;
return /*#__PURE__*/React.createElement(View, {
style: styles.container
}, /*#__PURE__*/React.createElement(TouchableOpacity, {
onPress: () => _handleItemPress(item),
style: [styles.avatarWrapper, {
height: size + 4,
width: size + 4
}, !isPressed ? {
borderColor: unPressedBorderColor ? unPressedBorderColor : '#FF0000'
} : {
borderColor: pressedBorderColor ? pressedBorderColor : '#808080'
}]
}, /*#__PURE__*/React.createElement(Image, {
style: {
height: size,
width: size,
borderRadius: size / 2
},
source: isUrl(item.avatar) ? {
uri: item.avatar
} : item.avatar,
defaultSource: Platform.OS === 'ios' ? require('../assets/images/no_avatar.png') : null
})), showText && /*#__PURE__*/React.createElement(Text, {
numberOfLines: 1,
ellipsizeMode: "tail",
style: {
width: size + 4,
...styles.text,
...textStyle
}
}, item.name));
};
const styles = StyleSheet.create({
container: {
marginVertical: 5,
marginRight: 10
},
avatarWrapper: {
borderWidth: 2,
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'center',
borderColor: '#FF0000',
borderRadius: 100,
height: 64,
width: 64
},
text: {
marginTop: 3,
textAlign: 'center',
alignItems: 'center',
fontSize: 11
}
});
export default StoryCircleListItem;
//# sourceMappingURL=StoryCircleListItem.js.map