@stokr/components-library
Version:
STOKR - Components Library
70 lines (69 loc) • 4.86 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _Background = _interopRequireDefault(require("../Background/Background"));
var _ComponentWrapper = _interopRequireDefault(require("../ComponentWrapper/ComponentWrapper.styles"));
var _Button = _interopRequireDefault(require("../Button/Button.styles"));
var _LearnMore = require("./LearnMore");
var _LearnMoreItem = require("./LearnMoreItem.styles");
var _LearnMoreShared = require("./LearnMore.shared.styles");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const LearnMoreItem = _ref => {
let {
postItem,
activeTabObject,
onMarkComplete
} = _ref;
return /*#__PURE__*/_react.default.createElement(_LearnMoreItem.ArticleWrapper, {
postType: postItem.postType
}, postItem.postType === 'video' && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_LearnMoreItem.VideoCover, null, /*#__PURE__*/_react.default.createElement(_Background.default, {
src: postItem.cover
}, /*#__PURE__*/_react.default.createElement(_LearnMoreItem.VideoPlay, null, /*#__PURE__*/_react.default.createElement(_LearnMoreItem.VideoPlayIcon, null)))), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
noPaddingRight: true,
noPaddingBottom: true
}, /*#__PURE__*/_react.default.createElement(_LearnMoreItem.VideoTitleRow, null, /*#__PURE__*/_react.default.createElement(_LearnMoreItem.TitleText, {
postType: postItem.postType
}, /*#__PURE__*/_react.default.createElement("h3", null, postItem.title)), /*#__PURE__*/_react.default.createElement(_LearnMoreItem.CompleteWrapper, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
primary: !activeTabObject.complete,
secondary: activeTabObject.complete,
onClick: () => onMarkComplete(activeTabObject.id)
}, activeTabObject.complete ? 'Watched' : 'Mark as watched'), /*#__PURE__*/_react.default.createElement(_LearnMoreShared.CompleteMarkContainer, {
large: true,
inProgress: activeTabObject.inProgress,
complete: activeTabObject.complete
}, /*#__PURE__*/_react.default.createElement(_LearnMoreShared.CompleteMark, null))))), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, null, /*#__PURE__*/_react.default.createElement(_LearnMoreItem.ContentText, {
dangerouslySetInnerHTML: {
__html: postItem.content
}
}))), postItem.postType === 'text' && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
noPaddingRight: true,
noPaddingBottom: true
}, /*#__PURE__*/_react.default.createElement(_LearnMoreItem.TitleText, {
postType: postItem.postType
}, /*#__PURE__*/_react.default.createElement("h3", null, postItem.title))), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, null, /*#__PURE__*/_react.default.createElement(_LearnMoreItem.ContentText, {
dangerouslySetInnerHTML: {
__html: postItem.content
}
})), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, null, /*#__PURE__*/_react.default.createElement(_LearnMoreItem.CompleteWrapper, {
center: true
}, /*#__PURE__*/_react.default.createElement(_Button.default, {
primary: !activeTabObject.complete,
secondary: activeTabObject.complete,
onClick: () => onMarkComplete(activeTabObject.id)
}, activeTabObject.complete ? 'Already Read' : 'Mark as read'), /*#__PURE__*/_react.default.createElement(_LearnMoreShared.CompleteMarkContainer, {
large: true,
inProgress: activeTabObject.inProgress,
complete: activeTabObject.complete
}, /*#__PURE__*/_react.default.createElement(_LearnMoreShared.CompleteMark, null))))));
};
LearnMoreItem.propTypes = {
postItem: _propTypes.default.shape(_LearnMore.learnMorePostPropTypes).isRequired,
activeTabObject: _propTypes.default.shape(_LearnMore.learnMoreCategoryPropTypes).isRequired,
onMarkComplete: _propTypes.default.func.isRequired
};
var _default = exports.default = LearnMoreItem;