@r3l/app
Version:
252 lines (221 loc) • 9.68 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _reactRedux = require("react-redux");
var _styled = require("../../styled");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _postbuttons = _interopRequireDefault(require("../../post/vote-buttons/postbuttons.container"));
var _commentForm = _interopRequireDefault(require("./commentForm.component"));
var _commentBody = require("../commentBody");
var _styles = require("../../../styles");
var _buttonRow = _interopRequireDefault(require("../../post/web/buttonRow.component"));
var _comment = _interopRequireDefault(require("../comment.author"));
var _comment2 = require("./comment.popup");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
Comment.propTypes = {
comment: _propTypes.default.object,
activeComment: _propTypes.default.string,
setActiveComment: _propTypes.default.func,
parentPost: _propTypes.default.object,
childComments: _propTypes.default.object,
posts: _propTypes.default.object,
nestingLevel: _propTypes.default.number,
hidePostButtons: _propTypes.default.bool,
hideReplyButtons: _propTypes.default.bool,
condensedView: _propTypes.default.bool,
hideBorder: _propTypes.default.bool,
post: _propTypes.default.object,
hideAvatar: _propTypes.default.bool,
noLink: _propTypes.default.bool,
avatarText: _propTypes.default.func,
focusedComment: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
scrollTo: _propTypes.default.func,
preview: _propTypes.default.bool,
inMainFeed: _propTypes.default.bool,
additionalNesting: _propTypes.default.number,
orphan: _propTypes.default.bool
};
Comment.defaultProps = {
additionalNesting: 0
};
function Comment(props) {
var comment = props.comment,
activeComment = props.activeComment,
childComments = props.childComments,
posts = props.posts,
nestingLevel = props.nestingLevel,
hidePostButtons = props.hidePostButtons,
hideReplyButtons = props.hideReplyButtons,
hideBorder = props.hideBorder,
hideAvatar = props.hideAvatar,
noLink = props.noLink,
avatarText = props.avatarText,
preview = props.preview,
inMainFeed = props.inMainFeed,
additionalNesting = props.additionalNesting,
parentPost = props.parentPost,
scrollTo = props.scrollTo,
focusedComment = props.focusedComment,
setActiveComment = props.setActiveComment,
orphan = props.orphan;
var _useState = (0, _react.useState)(false),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
editing = _useState2[0],
setEditing = _useState2[1];
var embeddedUser = comment === null || comment === void 0 ? void 0 : comment.embeddedUser;
var hideVerticalButton = !(comment !== null && comment !== void 0 && comment.parentPost);
var user = (0, _reactRedux.useSelector)(function (state) {
var userId = state.user.handleToId[embeddedUser === null || embeddedUser === void 0 ? void 0 : embeddedUser.handle];
return state.user.users[userId];
}) || embeddedUser;
var screenSize = (0, _reactRedux.useSelector)(function (state) {
return state.navigation.screenSize;
});
var el = /*#__PURE__*/(0, _react.createRef)();
(0, _react.useEffect)(function () {
var scrollIfFocused = function scrollIfFocused() {
if (comment && focusedComment === comment._id) {
var _el$current;
el === null || el === void 0 ? void 0 : (_el$current = el.current) === null || _el$current === void 0 ? void 0 : _el$current.measureInWindow(function (x, y) {
scrollTo && scrollTo(0, y);
});
}
};
scrollIfFocused();
}, [focusedComment]); // eslint-disable-line
var cancel = function cancel() {
setActiveComment(null);
setEditing(false);
};
if (!comment) return /*#__PURE__*/_react.default.createElement(_styled.Box, null, /*#__PURE__*/_react.default.createElement(_styled.BodyText, null, "[deleted]"), commentChildren.map(function (childId) {
return /*#__PURE__*/_react.default.createElement(Comment, (0, _extends2.default)({}, props, {
comment: posts.posts[childId],
key: childId,
nestingLevel: nestingLevel + 1
}));
}));
var isActive = activeComment === comment.id;
var body = /*#__PURE__*/_react.default.createElement(_commentBody.CommentBody, {
comment: comment,
inMainFeed: inMainFeed,
preview: preview,
avatarText: avatarText,
noLink: noLink
});
var commentChildren = (childComments === null || childComments === void 0 ? void 0 : childComments[comment === null || comment === void 0 ? void 0 : comment.id]) || [];
var borderMargin = hidePostButtons || screenSize || !hideVerticalButton ? nestingLevel && !screenSize && -3 || 0 : _styles.layout.POST_BUTTONS_WIDTH / 3;
var popup = /*#__PURE__*/_react.default.createElement(_comment2.CommentPopup, {
comment: comment,
setEditing: setEditing
});
return /*#__PURE__*/_react.default.createElement(_styled.Box, {
ref: el
}, /*#__PURE__*/_react.default.createElement(_styled.Spacer, {
nestingLevel: nestingLevel,
additionalNesting: additionalNesting,
screenSize: screenSize
}, /*#__PURE__*/_react.default.createElement(_styled.Box, {
sx: {
m: [preview ? 0 : 2, 0],
mr: [2, 3],
mt: 0
}
}, !hideBorder && /*#__PURE__*/_react.default.createElement(_styled.DividerLine, {
sx: {
height: 0.99,
ml: borderMargin
}
}), orphan ? /*#__PURE__*/_react.default.createElement(_styled.BodyText, {
sx: {
mt: 1,
mb: -2,
ml: [0, -3]
}
}, "[deleted]") : null, /*#__PURE__*/_react.default.createElement(_styled.Row, {
sx: {
mt: 4
}
}, !hidePostButtons && hideVerticalButton && !screenSize ? /*#__PURE__*/_react.default.createElement(_styled.View, {
sx: {
width: _styles.layout.POST_BUTTONS_WIDTH * 8
}
}, /*#__PURE__*/_react.default.createElement(_postbuttons.default, {
post: comment
})) : null, nestingLevel > 0 ? /*#__PURE__*/_react.default.createElement(_styled.Image, {
sx: {
height: 3,
width: 2,
ml: [0, -3],
mr: 1
},
resizeMode: 'contain',
source: require("../../../../public/img/reply.png")
}) : null, /*#__PURE__*/_react.default.createElement(_styled.View, {
sx: {
flex: 1
}
}, /*#__PURE__*/_react.default.createElement(_comment.default, {
user: user,
comment: comment,
hideAvatar: hideAvatar,
avatarText: avatarText,
noLink: noLink,
popup: !preview && popup,
preview: preview
}), /*#__PURE__*/_react.default.createElement(_styled.Box, {
sx: {
mt: 1
}
}), editing ? /*#__PURE__*/_react.default.createElement(_styled.Box, {
sx: {
mt: 2
}
}, /*#__PURE__*/_react.default.createElement(_commentForm.default, {
edit: true,
sx: {
p: [2, 0],
pb: [2, 4]
},
parentPost: parentPost,
comment: comment,
buttonText: 'Update',
cancel: cancel // nestingLevel={nestingLevel}
,
autoFocus: true
})) : body, editing || hideReplyButtons || hidePostButtons && preview ? null : /*#__PURE__*/_react.default.createElement(_styled.Box, {
sx: {
mt: 1,
mb: [2, 4]
}
}, /*#__PURE__*/_react.default.createElement(_buttonRow.default, (0, _extends2.default)({}, props, {
post: comment
}))))))), isActive && !editing && /*#__PURE__*/_react.default.createElement(_commentForm.default, {
parentPost: parentPost,
nestingLevel: nestingLevel,
sx: {
p: [2, 4]
},
buttonText: 'Comment',
additionalNesting: additionalNesting + (hidePostButtons || !hideVerticalButton ? 0 : _styles.layout.POST_BUTTONS_NESTING_UNITS),
parentComment: comment,
cancel: cancel,
autoFocus: true
}), commentChildren.map(function (childId) {
return /*#__PURE__*/_react.default.createElement(Comment, (0, _extends2.default)({}, props, {
comment: posts.posts[childId],
key: childId,
nestingLevel: nestingLevel + 1
}));
}));
}
var _default = Comment;
exports.default = _default;
//# sourceMappingURL=comment.component.js.map