@livelike/react-native
Version:
LiveLike React Native package
84 lines (83 loc) • 3.53 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.LLReactionPicker = LLReactionPicker;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _hooks = require("../../hooks");
var _LLReactionPickerItem = require("./LLReactionPickerItem");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
/**
* @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.
*/
function LLReactionPicker(_ref) {
let {
visible,
styles: stylesProp,
reactionSpaceId,
onPress,
ReactionItemComponentStyles,
ReactionItemComponent = _LLReactionPickerItem.LLReactionPickerItem,
onReactionPanelOpen,
onReactionPanelClose
} = _ref;
const {
reactionPacks
} = (0, _hooks.useReactionPacks)({
reactionSpaceId
});
const reactionPickerStyles = (0, _hooks.useStyles)({
componentStylesFn: getReactionPickerStyles,
stylesProp
});
(0, _react.useEffect)(() => {
onReactionPanelOpen === null || onReactionPanelOpen === void 0 || onReactionPanelOpen();
return () => {
onReactionPanelClose === null || onReactionPanelClose === void 0 || onReactionPanelClose();
};
}, []);
const reactions = (0, _react.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.default.createElement(_reactNative.ScrollView, {
horizontal: true,
keyboardShouldPersistTaps: 'always',
style: reactionPickerStyles.pickerContainer
}, reactions.map(reaction => /*#__PURE__*/_react.default.createElement(ReactionItemComponent, {
key: reaction.id,
reaction: reaction,
styles: ReactionItemComponentStyles,
onPress: onPress
})));
}
const getReactionPickerStyles = _ref2 => {
let {
theme
} = _ref2;
return _reactNative.StyleSheet.create({
pickerContainer: {
position: 'absolute',
bottom: -17,
right: -5,
flexDirection: 'row',
borderRadius: 10,
backgroundColor: theme.popoverBackground,
maxWidth: 200,
minWidth: 80
}
});
};
//# sourceMappingURL=LLReactionPicker.js.map