@readr-media/react-feedback/lib/react-components/form/comments/comments.js

## Installation `yarn install`

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = Comments;

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

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _commentItem = _interopRequireDefault(require("./comment-item"));

var _jsxRuntime = require("react/jsx-runtime");

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

// eslint-disable-line
const Wrapper = _styledComponents.default.div.withConfig({
  displayName: "comments__Wrapper",
  componentId: "sc-lkwr4p-0"
})(["display:flex;flex-direction:column;margin:80px 0 60px 0;width:100%;@media (max-width:767px){margin:40px 0 32px 0;}"]);

const Title = _styledComponents.default.p.withConfig({
  displayName: "comments__Title",
  componentId: "sc-lkwr4p-1"
})(["margin:0 0 4px 0;font-size:32px;line-height:48px;font-weight:700;"]);

const DefaultText = _styledComponents.default.p.withConfig({
  displayName: "comments__DefaultText",
  componentId: "sc-lkwr4p-2"
})([""]);

const ButtonWrapper = _styledComponents.default.div.withConfig({
  displayName: "comments__ButtonWrapper",
  componentId: "sc-lkwr4p-3"
})(["margin-top:24px;text-align:center;"]);

const Button = _styledComponents.default.button.withConfig({
  displayName: "comments__Button",
  componentId: "sc-lkwr4p-4"
})(["margin-top:12px;width:280px;background-color:none;color:#04295e;border:1px solid #04295e;border-radius:6px;padding:12px;font:inherit;cursor:pointer;outline:inherit;font-size:18px;line-height:27px;&:hover,&:active{background-color:#edeff2;}"]);
/**
 * @typedef {import('../../../typedef').Comment} Comment
 * @typedef {import('../../../typedef').CommentManager} CommentManager
 * @typedef {CommentManager['loadMoreComments']} ExpandFunc
 *
 * @param {Object}      props
 * @param {Comment[]}   props.comments
 * @param {ExpandFunc}  props.onExpand
 * @param {boolean}     props.noMoreComment
 * @param {string}      [props.listTitle='網友回饋']
 * @param {boolean}     [props.shouldShowControl=true]
 * @param {string}      [props.defaultText]
 * @return {JSX.Element}
 */


function Comments({
  comments,
  onExpand,
  noMoreComment,
  listTitle = '網友回饋',
  shouldShowControl = true,
  defaultText
}) {
  const clickHandler = e => {
    e.preventDefault();
    onExpand();
  };

  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
    className: "list-container",
    children: [listTitle && /*#__PURE__*/(0, _jsxRuntime.jsx)(Title, {
      className: "list-title",
      children: listTitle
    }), comments.map(comment => /*#__PURE__*/(0, _jsxRuntime.jsx)(_commentItem.default, {
      comment: comment,
      shouldShowControl: shouldShowControl
    }, comment.id)), comments.length === 0 && defaultText && /*#__PURE__*/(0, _jsxRuntime.jsx)(DefaultText, {
      className: "default-text",
      children: defaultText
    }), !noMoreComment && /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonWrapper, {
      className: "list-control",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Button, {
        onClick: clickHandler,
        children: "\u5C55\u958B\u66F4\u591A"
      })
    })]
  });
}