@livelike/react-native
Version:
LiveLike React Native package
146 lines (145 loc) • 6.4 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.LLUserReactionCounts = LLUserReactionCounts;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _javascript = require("@livelike/javascript");
var _hooks = require("../../hooks");
var _LLReactionPicker = require("./LLReactionPicker");
var _LLUserReactionCountDetail = require("./LLUserReactionCountDetail");
var _LLText = require("../LLText");
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; }
const DEFAULT_REACTIONS_LIMIT = 4;
const DUMMY_USER_REACTION_ID = 'DUMMY_USER_REACTION_ID';
function LLUserReactionCounts(_ref) {
let {
targetGroupId,
targetId,
showReactionPicker,
onReactionItemPress,
styles: stylesProp,
MessageReactionPickerComponentStyles,
UserReactionCountDetailComponentStyles,
reactionsLimit = DEFAULT_REACTIONS_LIMIT,
UserReactionCountDetailComponent = _LLUserReactionCountDetail.LLUserReactionCountDetail,
MessageReactionPickerComponent = _LLReactionPicker.LLReactionPicker
} = _ref;
const [showAllReactions, setShowAllReactions] = (0, _react.useState)(false);
const {
reactionSpace
} = (0, _hooks.useReactionSpace)({
targetGroupId
});
const reactionSpaceId = reactionSpace === null || reactionSpace === void 0 ? void 0 : reactionSpace.id;
const {
userReactions
} = (0, _hooks.useUserReactions)({
reactionSpaceId,
targetId
});
const userReactionCountStyles = (0, _hooks.useStyles)({
componentStylesFn: getRUserReactionCountStyles,
stylesProp
});
const {
addReaction,
removeReaction
} = (0, _hooks.useUserReactionActions)({
targetGroupId,
targetId
});
const {
trackEvent
} = (0, _hooks.useAnalytics)();
const onReactionItemPressHandler = (0, _react.useCallback)(async reactionId => {
var _userReactions$reacti;
const selfReactionId = userReactions === null || userReactions === void 0 || (_userReactions$reacti = userReactions[reactionId]) === null || _userReactions$reacti === void 0 ? void 0 : _userReactions$reacti.self_reacted_user_reaction_id;
const actionArgs = {
reactionSpaceId: reactionSpace === null || reactionSpace === void 0 ? void 0 : reactionSpace.id,
userReaction: {
target_id: targetId,
reaction_id: reactionId,
reacted_by_id: _javascript.userProfile.id,
id: DUMMY_USER_REACTION_ID
},
profileId: _javascript.userProfile.id
};
if (selfReactionId) {
removeReaction(actionArgs, selfReactionId);
} else {
addReaction(actionArgs);
}
onReactionItemPress === null || onReactionItemPress === void 0 || onReactionItemPress();
}, [userReactions, reactionSpaceId, targetId, addReaction, removeReaction]);
const onReactionPanelOpen = (0, _react.useCallback)(() => {
trackEvent('Reaction Panel Opened', {
targetId,
targetGroupId
});
}, []);
const onReactionPanelClose = (0, _react.useCallback)(() => {
trackEvent('Reaction Panel Closed', {
targetId,
targetGroupId
});
}, [targetId, targetGroupId, trackEvent]);
const userReactionValues = (0, _react.useMemo)(() => Object.values(userReactions), [userReactions]);
const reactionsRenderer = (0, _react.useMemo)(() => limit => userReactionValues.map((reaction, index) => (!limit || index < limit) && reaction.count > 0 && /*#__PURE__*/_react.default.createElement(UserReactionCountDetailComponent, {
reaction: reaction,
onPress: onReactionItemPressHandler,
key: reaction.reaction_id,
styles: UserReactionCountDetailComponentStyles
})), [userReactions]);
const onShowAllReactionCounts = (0, _react.useCallback)(() => {
setShowAllReactions(true);
}, [setShowAllReactions]);
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: userReactionCountStyles.reactionCountsContainer
}, reactionsRenderer(showAllReactions ? userReactionValues.length : reactionsLimit), !showAllReactions && userReactionValues.length > reactionsLimit && /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
onPress: onShowAllReactionCounts,
accessibilityLabel: "More reactions",
style: userReactionCountStyles.moreReactionsView
}, /*#__PURE__*/_react.default.createElement(_LLText.LLText, {
style: userReactionCountStyles.moreReactionsText
}, `+${userReactionValues.length - reactionsLimit} more`))), showReactionPicker && /*#__PURE__*/_react.default.createElement(MessageReactionPickerComponent, {
visible: showReactionPicker,
onReactionPanelOpen: onReactionPanelOpen,
onReactionPanelClose: onReactionPanelClose,
reactionSpaceId: reactionSpace === null || reactionSpace === void 0 ? void 0 : reactionSpace.id,
onPress: onReactionItemPressHandler,
styles: MessageReactionPickerComponentStyles
}));
}
const getRUserReactionCountStyles = _ref2 => {
let {
theme
} = _ref2;
return _reactNative.StyleSheet.create({
reactionCountsContainer: {
flexDirection: 'row',
flexWrap: 'wrap',
marginHorizontal: 3,
flex: 1
},
moreReactionsView: {
flexDirection: 'row',
alignItems: 'center',
backgroundColor: theme.popoverBackground,
marginHorizontal: 3,
marginBottom: 4,
paddingHorizontal: 5,
paddingVertical: 2,
borderRadius: 4
},
moreReactionsText: {
color: theme.text,
fontSize: 11,
lineHeight: 22,
fontWeight: 'bold'
}
});
};
//# sourceMappingURL=LLUserReactionCounts.js.map