@selfcommunity/react-ui 0.1.2-alpha.0

package/lib/cjs/components/FeedObject/Actions/Actions.js

@@ -0,0 +1,138 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = Actions;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styles = require("@mui/material/styles");
+
+var _material = require("@mui/material");
+
+var _Vote = _interopRequireDefault(require("./Vote"));
+
+var _Comment = _interopRequireDefault(require("./Comment"));
+
+var _Share = _interopRequireDefault(require("./Share"));
+
+var _types = require("@selfcommunity/types");
+
+var _reactCore = require("@selfcommunity/react-core");
+
+var _feedObject = require("../../../types/feedObject");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _useThemeProps = _interopRequireDefault(require("@mui/material/styles/useThemeProps"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const PREFIX = 'SCFeedObjectActions';
+const classes = {
+  root: `${PREFIX}-root`,
+  action: `${PREFIX}-action`
+};
+const Root = (0, _styles.styled)(_material.Grid, {
+  name: PREFIX,
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})(() => ({
+  margin: '0px 0px',
+  color: '#3A3A3A',
+  [`& .${classes.action}`]: {
+    textAlign: 'center'
+  }
+}));
+
+function Actions(inProps) {
+  // PROPS
+  const props = (0, _useThemeProps.default)({
+    props: inProps,
+    name: PREFIX
+  });
+  const {
+    className,
+    feedObjectId,
+    feedObject,
+    feedObjectType = _types.SCFeedObjectTypologyType.POST,
+    feedObjectTemplate = _feedObject.SCFeedObjectTemplateType.PREVIEW,
+    hideVoteAction = false,
+    hideShareAction = false,
+    hideCommentAction = false,
+    handleExpandActivities,
+    VoteActionProps = {
+      inlineAction: false
+    },
+    CommentActionProps = {
+      inlineAction: false
+    },
+    ShareActionProps = {
+      inlineAction: false
+    }
+  } = props; // STATE
+
+  const {
+    obj,
+    setObj
+  } = (0, _reactCore.useSCFetchFeedObject)({
+    id: feedObjectId,
+    feedObject,
+    feedObjectType
+  });
+
+  if (!obj) {
+    return null;
+  }
+  /**
+   * Calculate column width
+   */
+
+
+  function getColumnWidth() {
+    let width = 4;
+
+    if (hideShareAction && hideCommentAction) {
+      width = 12;
+    } else if (hideCommentAction || hideCommentAction) {
+      width = 6;
+    }
+
+    return width;
+  }
+  /**
+   * Renders action section
+   */
+
+
+  const columnWidth = getColumnWidth();
+  return /*#__PURE__*/_react.default.createElement(Root, {
+    container: true,
+    className: (0, _classnames.default)(classes.root, className)
+  }, !hideVoteAction && /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    xs: columnWidth,
+    className: classes.action
+  }, /*#__PURE__*/_react.default.createElement(_Vote.default, _extends({
+    feedObject: obj,
+    feedObjectType: feedObjectType
+  }, VoteActionProps))), !hideCommentAction && /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    xs: columnWidth,
+    className: classes.action
+  }, /*#__PURE__*/_react.default.createElement(_Comment.default, _extends({
+    feedObject: obj,
+    feedObjectType: feedObjectType,
+    feedObjectTemplate: feedObjectTemplate,
+    onCommentAction: handleExpandActivities
+  }, CommentActionProps))), !hideShareAction && /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    xs: columnWidth,
+    className: classes.action
+  }, /*#__PURE__*/_react.default.createElement(_Share.default, _extends({
+    feedObject: obj,
+    feedObjectType: feedObjectType,
+    id: feedObjectId
+  }, ShareActionProps))));
+}

package/lib/cjs/components/FeedObject/Actions/Comment/Comment.js

@@ -0,0 +1,203 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = Comment;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactIntl = require("react-intl");
+
+var _material = require("@mui/material");
+
+var _Icon = _interopRequireDefault(require("@mui/material/Icon"));
+
+var _reactCore = require("@selfcommunity/react-core");
+
+var _types = require("@selfcommunity/types");
+
+var _styles = require("@mui/material/styles");
+
+var _feedObject = require("../../../../types/feedObject");
+
+var _contribution = require("../../../../utils/contribution");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Skeleton = _interopRequireDefault(require("@mui/material/Skeleton"));
+
+var _useThemeProps = _interopRequireDefault(require("@mui/material/styles/useThemeProps"));
+
+const _excluded = ["className", "feedObjectId", "feedObject", "feedObjectType", "feedObjectTemplate", "withAction", "withAudience", "inlineAction", "onViewCommentsAction", "onCommentAction"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+const messages = (0, _reactIntl.defineMessages)({
+  comments: {
+    id: 'ui.feedObject.comment.comments',
+    defaultMessage: 'ui.feedObject.comment.comments'
+  },
+  comment: {
+    id: 'ui.feedObject.comment.comment',
+    defaultMessage: 'ui.feedObject.comment.comment'
+  }
+});
+const PREFIX = 'SCCommentObject';
+const classes = {
+  root: `${PREFIX}-root`,
+  divider: `${PREFIX}-divider`,
+  inline: `${PREFIX}-inline`,
+  actionButton: `${PREFIX}-action-button`,
+  inlineActionButton: `${PREFIX}-inline-action-button`,
+  viewAudienceButton: `${PREFIX}-view-audience-button`
+};
+const Root = (0, _styles.styled)(_material.Box, {
+  name: PREFIX,
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})(({
+  theme
+}) => ({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  flexDirection: 'column',
+  [`&.${classes.inline}`]: {
+    flexDirection: 'row-reverse'
+  },
+  [`& .${classes.inlineActionButton}`]: {
+    minWidth: 30
+  },
+  [`& .${classes.divider}`]: {
+    width: '100%',
+    borderBottom: 0
+  },
+  [`& .${classes.viewAudienceButton}`]: {
+    height: 32,
+    fontSize: 15,
+    textTransform: 'capitalize',
+    '& p': {
+      fontSize: '0.9rem'
+    }
+  }
+}));
+
+function Comment(inProps) {
+  const props = (0, _useThemeProps.default)({
+    props: inProps,
+    name: PREFIX
+  }); // PROPS
+
+  const {
+    className,
+    feedObjectId,
+    feedObject,
+    feedObjectType = _types.SCFeedObjectTypologyType.POST,
+    feedObjectTemplate = _feedObject.SCFeedObjectTemplateType,
+    withAction = true,
+    withAudience = true,
+    inlineAction = true,
+    onViewCommentsAction,
+    onCommentAction
+  } = props,
+        rest = _objectWithoutPropertiesLoose(props, _excluded); // STATE
+
+
+  const {
+    obj,
+    setObj
+  } = (0, _reactCore.useSCFetchFeedObject)({
+    id: feedObjectId,
+    feedObject,
+    feedObjectType
+  }); // CONTEXT
+
+  const scRoutingContext = (0, _reactCore.useSCRouting)(); // INTL
+
+  const intl = (0, _reactIntl.useIntl)();
+  /**
+   * Renders comments counter
+   * @return {JSX.Element}
+   */
+
+  function renderAudience() {
+    let audience;
+
+    if (withAudience) {
+      if (!obj) {
+        audience = /*#__PURE__*/_react.default.createElement(_material.Button, {
+          variant: "text",
+          size: "small",
+          disabled: true,
+          color: "inherit"
+        }, /*#__PURE__*/_react.default.createElement(_Skeleton.default, {
+          animation: "wave",
+          height: 18,
+          width: 50
+        }));
+      } else {
+        audience = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, onViewCommentsAction ? /*#__PURE__*/_react.default.createElement(_material.Button, {
+          variant: "text",
+          size: "small",
+          onClick: onViewCommentsAction,
+          color: "inherit"
+        }, `${intl.formatMessage(messages.comments, {
+          total: obj.comment_count
+        })}`) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, feedObjectTemplate === _feedObject.SCFeedObjectTemplateType.DETAIL ? /*#__PURE__*/_react.default.createElement(_material.Typography, {
+          variant: 'body2'
+        }, `${intl.formatMessage(messages.comments, {
+          total: obj.comment_count
+        })}`) : /*#__PURE__*/_react.default.createElement(_material.Button, {
+          color: "inherit",
+          variant: "text",
+          size: "small",
+          component: _reactCore.Link,
+          to: scRoutingContext.url((0, _contribution.getContributionRouteName)(obj), (0, _contribution.getRouteData)(obj)),
+          classes: {
+            root: classes.viewAudienceButton
+          }
+        }, `${intl.formatMessage(messages.comments, {
+          total: obj.comment_count
+        })}`)));
+      }
+    }
+
+    return audience;
+  }
+  /**
+   * Renders commentsCounter
+   * @return {JSX.Element}
+   */
+
+
+  function renderCommentButton() {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, withAction && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !inlineAction && withAudience && /*#__PURE__*/_react.default.createElement(_material.Divider, {
+      className: classes.divider
+    }), /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
+      title: `${intl.formatMessage(messages.comment)}`
+    }, /*#__PURE__*/_react.default.createElement(_material.Button, {
+      onClick: onCommentAction,
+      color: "inherit",
+      classes: {
+        root: (0, _classnames.default)(classes.actionButton, {
+          [classes.inlineActionButton]: inlineAction
+        })
+      }
+    }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      fontSize: 'large'
+    }, "chat_bubble_outline")))));
+  }
+  /**
+   * Renders comment action
+   */
+
+
+  return /*#__PURE__*/_react.default.createElement(Root, _extends({
+    className: (0, _classnames.default)(classes.root, className, {
+      [classes.inline]: inlineAction
+    })
+  }, rest), renderAudience(), renderCommentButton());
+}

package/lib/cjs/components/FeedObject/Actions/Comment/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _Comment = _interopRequireWildcard(require("./Comment"));
+
+exports.CommentProps = _Comment.CommentProps;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+
+var _default = _Comment.default;
+exports.default = _default;

package/lib/cjs/components/FeedObject/Actions/Follow/Follow.js

@@ -0,0 +1,201 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = Follow;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactIntl = require("react-intl");
+
+var _LoadingButton = _interopRequireDefault(require("@mui/lab/LoadingButton"));
+
+var _styles = require("@mui/material/styles");
+
+var _material = require("@mui/material");
+
+var _Errors = require("../../../../constants/Errors");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _notistack = require("notistack");
+
+var _Icon = _interopRequireDefault(require("@mui/material/Icon"));
+
+var _types = require("@selfcommunity/types");
+
+var _apiServices = require("@selfcommunity/api-services");
+
+var _reactCore = require("@selfcommunity/react-core");
+
+var _useThemeProps = _interopRequireDefault(require("@mui/material/styles/useThemeProps"));
+
+const _excluded = ["className", "feedObjectId", "feedObject", "feedObjectType", "handleFollow", "iconizedButton"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+const PREFIX = 'SCFollowObject';
+const classes = {
+  root: `${PREFIX}-root`,
+  followButton: `${PREFIX}-follow-button`,
+  iconizedButton: `${PREFIX}-button-iconized`
+};
+const Root = (0, _styles.styled)(_material.Box, {
+  name: PREFIX,
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})(({
+  theme
+}) => ({
+  [`& .${classes.followButton}`]: {
+    backgroundColor: theme.palette.grey[100],
+    color: theme.palette.grey[700],
+    boxShadow: 'none',
+    '&:hover': {
+      backgroundColor: theme.palette.grey[300],
+      boxShadow: 'none'
+    }
+  },
+  [`& .${classes.iconizedButton}`]: {
+    minWidth: 45
+  }
+}));
+
+function Follow(inProps) {
+  // PROPS
+  const props = (0, _useThemeProps.default)({
+    props: inProps,
+    name: PREFIX
+  });
+
+  const {
+    className = null,
+    feedObjectId = null,
+    feedObject = null,
+    feedObjectType = _types.SCFeedObjectTypologyType.POST,
+    handleFollow,
+    iconizedButton = true
+  } = props,
+        rest = _objectWithoutPropertiesLoose(props, _excluded); // STATE
+
+
+  const {
+    obj,
+    setObj
+  } = (0, _reactCore.useSCFetchFeedObject)({
+    id: feedObjectId,
+    feedObject,
+    feedObjectType
+  });
+  const [isFollowing, setIsFollowing] = (0, _react.useState)(false); // CONTEXT
+
+  const scContext = (0, _reactCore.useSCContext)();
+  const scUserContext = (0, _reactCore.useSCUser)();
+  const {
+    enqueueSnackbar
+  } = (0, _notistack.useSnackbar)();
+  /**
+   * Perform follow/unfollow
+   * Post, Discussion, Status
+   */
+
+  const performFollow = (0, _react.useMemo)(() => () => {
+    return _apiServices.http.request({
+      url: _apiServices.Endpoints.FollowContribution.url({
+        type: obj.type,
+        id: obj.id
+      }),
+      method: _apiServices.Endpoints.FollowContribution.method
+    }).then(res => {
+      if (res.status >= 300) {
+        return Promise.reject(res);
+      }
+
+      return Promise.resolve(res.data);
+    });
+  }, [obj]);
+  /**
+   * Handle follow object
+   * Even if a user is blocked, can perform this action
+   */
+
+  function follow() {
+    if (!scUserContext.user) {
+      scContext.settings.handleAnonymousAction();
+    } else {
+      setIsFollowing(true);
+      performFollow().then(data => {
+        const isFollow = !obj.followed;
+        setObj(Object.assign({}, obj, {
+          followed: isFollow
+        }));
+        setIsFollowing(false);
+        handleFollow && handleFollow(isFollow);
+      }).catch(error => {
+        _reactCore.Logger.error(_Errors.SCOPE_SC_UI, error);
+
+        enqueueSnackbar( /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
+          id: "ui.common.error.action",
+          defaultMessage: "ui.common.error.action"
+        }), {
+          variant: 'error',
+          autoHideDuration: 3000
+        });
+      });
+    }
+  }
+  /**
+   * Renders vote action if withAction==true
+   * @return {JSX.Element}
+   */
+
+
+  function renderFollowButton() {
+    let btnLabel = /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
+      id: "ui.feedObject.follow",
+      defaultMessage: "ui.feedObject.follow"
+    });
+
+    if (obj.followed) {
+      btnLabel = /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
+        id: "ui.feedObject.unfollow",
+        defaultMessage: "ui.feedObject.unfollow"
+      });
+    }
+
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, scUserContext.user && obj.author.id !== scUserContext.user.id && !obj.deleted && /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
+      title: btnLabel
+    }, /*#__PURE__*/_react.default.createElement(_LoadingButton.default, {
+      classes: {
+        root: (0, _classnames.default)(classes.followButton, {
+          [classes.iconizedButton]: classes.iconizedButton
+        })
+      },
+      loading: isFollowing,
+      variant: iconizedButton ? 'text' : 'contained',
+      size: "small",
+      disabled: isFollowing,
+      onClick: follow
+    }, obj.followed ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, iconizedButton ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      fontSize: "large",
+      color: "primary"
+    }, "bookmark_added") : btnLabel) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, iconizedButton ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      fontSize: "large"
+    }, "bookmark_border") : btnLabel))));
+  }
+  /**
+   * Renders share action
+   */
+
+
+  return /*#__PURE__*/_react.default.createElement(Root, _extends({
+    className: (0, _classnames.default)(classes.root, className)
+  }, rest), renderFollowButton());
+}

package/lib/cjs/components/FeedObject/Actions/Follow/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _Follow = _interopRequireWildcard(require("./Follow"));
+
+exports.FollowProps = _Follow.FollowProps;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+
+var _default = _Follow.default;
+exports.default = _default;