react-cm-ui/core/dataDisplay/comment/comment.js

React UI for Healthy Church

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _lodash = _interopRequireDefault(require("lodash"));

var _classnames = _interopRequireDefault(require("classnames"));

var _momentTimezone = _interopRequireDefault(require("moment-timezone"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _react = _interopRequireDefault(require("react"));

var _dropdown = _interopRequireDefault(require("../../inputs/dropdown"));

var _image = _interopRequireDefault(require("../image"));

var _prompt = _interopRequireDefault(require("../../inputs/prompt"));

var _textArea = _interopRequireDefault(require("../../inputs/textArea"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

var Comment = /*#__PURE__*/function (_React$Component) {
  _inherits(Comment, _React$Component);

  var _super = _createSuper(Comment);

  function Comment(props) {
    var _this;

    _classCallCheck(this, Comment);

    _this = _super.call(this, props);
    _this.state = {
      isEditMode: false,
      showDeleteConfirmation: false,
      updatedCommentText: props.text || ''
    };
    _this.onActionMenuClick = _this.onActionMenuClick.bind(_assertThisInitialized(_this));
    _this.onCancelEditClick = _this.onCancelEditClick.bind(_assertThisInitialized(_this));
    _this.onCommentChange = _this.onCommentChange.bind(_assertThisInitialized(_this));
    _this.onDeletePromptNoClick = _this.onDeletePromptNoClick.bind(_assertThisInitialized(_this));
    _this.onDeletePromptYesClick = _this.onDeletePromptYesClick.bind(_assertThisInitialized(_this));
    _this.onEditKeyDown = _this.onEditKeyDown.bind(_assertThisInitialized(_this));
    _this.onEditOrDeletePromptClick = _this.onEditOrDeletePromptClick.bind(_assertThisInitialized(_this));
    _this.onSaveClick = _this.onSaveClick.bind(_assertThisInitialized(_this));
    return _this;
  }

  _createClass(Comment, [{
    key: "onActionMenuClick",
    value: function onActionMenuClick(menuIsOpen) {
      var onActionMenuClick = this.props.onActionMenuClick;

      if (_lodash["default"].isFunction(onActionMenuClick)) {
        onActionMenuClick(menuIsOpen);
      }
    }
  }, {
    key: "onCancelEditClick",
    value: function onCancelEditClick() {
      this.setState({
        isEditMode: false,
        updatedCommentText: this.props.text || ''
      });
    }
  }, {
    key: "onCommentChange",
    value: function onCommentChange(value) {
      this.setState({
        updatedCommentText: value
      });
    }
  }, {
    key: "onDeletePromptNoClick",
    value: function onDeletePromptNoClick() {
      this.setState({
        showDeleteConfirmation: false
      });
    }
  }, {
    key: "onDeletePromptYesClick",
    value: function onDeletePromptYesClick() {
      var onDelete = this.props.onDelete;

      if (_lodash["default"].isFunction(onDelete)) {
        onDelete();
      }

      this.setState({
        showDeleteConfirmation: false
      });
    }
  }, {
    key: "onEditOrDeletePromptClick",
    value: function onEditOrDeletePromptClick(selectedOption) {
      switch (selectedOption.id) {
        case 'delete':
          this.setState({
            showDeleteConfirmation: true
          });
          break;

        case 'edit':
          this.setState({
            isEditMode: true
          });
          var onActionMenuClick = this.props.onActionMenuClick;

          if (_lodash["default"].isFunction(onActionMenuClick)) {
            onActionMenuClick(false);
          }

          break;
      }
    }
  }, {
    key: "onEditKeyDown",
    value: function onEditKeyDown(event) {
      if (event.keyCode === 13 && !event.shiftKey) {
        event.preventDefault();
        this.onSaveClick();
      }
    }
  }, {
    key: "onSaveClick",
    value: function onSaveClick() {
      var onSaveEdit = this.props.onSaveEdit;

      if (_lodash["default"].isFunction(onSaveEdit)) {
        onSaveEdit(this.editableCommentTextArea.textArea.value);
      }

      this.setState({
        isEditMode: false
      });
    }
  }, {
    key: "_renderTime",
    value: function _renderTime() {
      var time = this.props.time;
      return _momentTimezone["default"].unix(time).calendar(null, {
        sameDay: '[Today] - h:mm a',
        nextWeek: 'MMMM D, YYYY - h:mm a',
        nextDay: 'MMMM D, YYYY - h:mm a',
        lastDay: '[Yesterday] - h:mm a',
        lastWeek: 'MMMM D, YYYY - h:mm a',
        sameElse: 'MMMM D, YYYY - h:mm a'
      });
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var _this$props = this.props,
          avatarSrc = _this$props.avatarSrc,
          canDelete = _this$props.canDelete,
          canEdit = _this$props.canEdit,
          children = _this$props.children,
          className = _this$props.className,
          detailsPosition = _this$props.detailsPosition,
          isEditable = _this$props.isEditable,
          name = _this$props.name,
          style = _this$props.style,
          time = _this$props.time;
      var _this$state = this.state,
          isEditMode = _this$state.isEditMode,
          showDeleteConfirmation = _this$state.showDeleteConfirmation,
          updatedCommentText = _this$state.updatedCommentText;
      var containerClasses = (0, _classnames["default"])('ui', 'comment', className);
      var isRightAligned = detailsPosition === 'right';
      var editActionMenuAlignment = isRightAligned ? 'left' : 'right';
      var editMenuTitle = canDelete && canEdit ? 'Edit or Delete' : canEdit ? 'Edit' : canDelete ? 'Delete' : null;
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: containerClasses,
        style: style
      }, name && time || avatarSrc && time ? /*#__PURE__*/_react["default"].createElement("div", {
        className: "comment-details",
        style: {
          alignItems: 'center',
          display: 'flex',
          flexDirection: isRightAligned ? 'row-reverse' : 'row',
          justifyContent: 'flex-start'
        }
      }, /*#__PURE__*/_react["default"].createElement("div", {
        style: {
          flex: 'none'
        }
      }, /*#__PURE__*/_react["default"].createElement(_image["default"], {
        type: "user",
        name: name,
        size: 44,
        src: avatarSrc
      })), /*#__PURE__*/_react["default"].createElement("div", {
        style: {
          flex: '1 0 auto',
          margin: isRightAligned ? '0 11px 0 0' : '0 0 0 11px',
          textAlign: isRightAligned ? 'right' : 'left'
        }
      }, /*#__PURE__*/_react["default"].createElement("span", {
        className: "comment-name"
      }, name), /*#__PURE__*/_react["default"].createElement("span", {
        className: "comment-time"
      }, this._renderTime())), isEditable && (canEdit || canDelete) ? isEditMode ? /*#__PURE__*/_react["default"].createElement("div", {
        style: {
          flex: '1 0 auto',
          margin: 0,
          paddingTop: '19px',
          textAlign: editActionMenuAlignment
        }
      }, /*#__PURE__*/_react["default"].createElement("a", {
        className: "cancel-link font-size-xsmall color-text",
        onClick: this.onCancelEditClick,
        style: {
          display: 'inline-block'
        }
      }, "Cancel"), /*#__PURE__*/_react["default"].createElement("a", {
        className: "save-link font-size-xsmall",
        disabled: !canEdit,
        onClick: this.onSaveClick,
        style: {
          display: 'inline-block',
          marginLeft: '22px'
        }
      }, "Save")) : /*#__PURE__*/_react["default"].createElement("div", {
        style: {
          flex: '1 0 auto',
          margin: 0,
          textAlign: editActionMenuAlignment
        }
      }, /*#__PURE__*/_react["default"].createElement(_prompt["default"], {
        inline: true,
        inlineHorizontalAlign: editActionMenuAlignment,
        inlineMessageColor: "alert",
        message: "Delete?",
        onClick: this.onEditOrDeletePromptClick,
        onNoClick: this.onDeletePromptNoClick,
        onYesClick: this.onDeletePromptYesClick,
        show: showDeleteConfirmation
      }, /*#__PURE__*/_react["default"].createElement(_dropdown["default"], {
        button: true,
        buttonColor: "transparent",
        buttonCompact: true,
        collapseMenuOnChange: true,
        iconColor: "static",
        iconPosition: "right",
        iconTitle: editMenuTitle,
        iconType: "ellipsis-h",
        onClose: function onClose() {
          return _this2.onActionMenuClick(false);
        },
        onOpen: function onOpen() {
          return _this2.onActionMenuClick(true);
        },
        style: {
          margin: 0,
          padding: 0
        },
        theme: "dark"
      }, canEdit ? /*#__PURE__*/_react["default"].createElement(_dropdown["default"].Item, {
        className: "action-edit",
        iconInverse: true,
        iconType: "pencil",
        id: "edit",
        label: "Edit"
      }) : null, canDelete ? /*#__PURE__*/_react["default"].createElement(_dropdown["default"].Item, {
        className: "action-delete",
        iconInverse: true,
        iconType: "trash",
        id: "delete",
        label: "Delete"
      }) : null))) : null) : null, /*#__PURE__*/_react["default"].createElement("div", {
        className: "comment-bubble"
      }, isEditable && canEdit && isEditMode ? /*#__PURE__*/_react["default"].createElement(_textArea["default"], {
        fluid: true,
        onChange: this.onCommentChange,
        onKeyDown: this.onEditKeyDown,
        ref: function ref(_ref) {
          return _this2.editableCommentTextArea = _ref;
        },
        value: updatedCommentText
      }) : children));
    }
  }]);

  return Comment;
}(_react["default"].Component);

Comment.propTypes = {
  avatarSrc: _propTypes["default"].string,
  canDelete: _propTypes["default"].bool,
  canEdit: _propTypes["default"].bool,
  className: _propTypes["default"].string,
  detailsPosition: _propTypes["default"].oneOf(['left', 'right']),
  isEditable: _propTypes["default"].bool,
  name: _propTypes["default"].string,
  onActionMenuClick: _propTypes["default"].func,
  onDelete: _propTypes["default"].func,
  onSaveEdit: _propTypes["default"].func,
  style: _propTypes["default"].shape({}),
  text: _propTypes["default"].string,
  time: _propTypes["default"].number
};
Comment.defaultProps = {
  canDelete: false,
  canEdit: false,
  detailsPosition: 'left',
  isEditable: false
};
var _default = Comment;
exports["default"] = _default;