@livelike/react-native
Version:
LiveLike React Native package
76 lines • 2.52 kB
JavaScript
import React, { useEffect, useMemo } from 'react';
import { ScrollView, StyleSheet } from 'react-native';
import { useStyles, useReactionPacks } from '../../hooks';
import { LLReactionPickerItem } from './LLReactionPickerItem';
/**
* @description Provides stock UI for the Reaction picker component.
* @param {Function} onPanelOpen - A callback function to be called when the panel opens. It is used for tracking analytics events when the component becomes visible.
* @param {Function} onPanelClose - A callback function to be called when the panel closes. It is used for tracking analytics events when the component is unmounted as it becomes invisible.
* @returns {JSX.Element} - Stock UI for the Reaction picker.
*/
export function LLReactionPicker(_ref) {
let {
visible,
styles: stylesProp,
reactionSpaceId,
onPress,
ReactionItemComponentStyles,
ReactionItemComponent = LLReactionPickerItem,
onReactionPanelOpen,
onReactionPanelClose
} = _ref;
const {
reactionPacks
} = useReactionPacks({
reactionSpaceId
});
const reactionPickerStyles = useStyles({
componentStylesFn: getReactionPickerStyles,
stylesProp
});
useEffect(() => {
onReactionPanelOpen === null || onReactionPanelOpen === void 0 || onReactionPanelOpen();
return () => {
onReactionPanelClose === null || onReactionPanelClose === void 0 || onReactionPanelClose();
};
}, []);
const reactions = useMemo(() => {
if (!reactionPacks.length) {
return [];
}
return reactionPacks.reduce((allReactions, reactionPack) => {
return [...allReactions, ...reactionPack.emojis];
}, []);
}, [reactionPacks]);
if (!visible || !reactionPacks.length || !reactionSpaceId) {
return null;
}
return /*#__PURE__*/React.createElement(ScrollView, {
horizontal: true,
keyboardShouldPersistTaps: 'always',
style: reactionPickerStyles.pickerContainer
}, reactions.map(reaction => /*#__PURE__*/React.createElement(ReactionItemComponent, {
key: reaction.id,
reaction: reaction,
styles: ReactionItemComponentStyles,
onPress: onPress
})));
}
const getReactionPickerStyles = _ref2 => {
let {
theme
} = _ref2;
return StyleSheet.create({
pickerContainer: {
position: 'absolute',
bottom: -17,
right: -5,
flexDirection: 'row',
borderRadius: 10,
backgroundColor: theme.popoverBackground,
maxWidth: 200,
minWidth: 80
}
});
};
//# sourceMappingURL=LLReactionPicker.js.map