@aliretail/react-materials-components/lib/RemarkList/index.js

B 端物料组件库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports["default"] = void 0;

var _dialog = _interopRequireDefault(require("@alifd/next/lib/dialog"));

var _pagination = _interopRequireDefault(require("@alifd/next/lib/pagination"));

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _table = _interopRequireDefault(require("@alifd/next/lib/table"));

var _button = _interopRequireDefault(require("@alifd/next/lib/button"));

var React = _interopRequireWildcard(require("react"));

var _utils = require("../utils");

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; }

/* eslint-disable react/prop-types */
var RemarkList = function RemarkList(props) {
  var _props$dataSource = props.dataSource,
      dataSource = _props$dataSource === void 0 ? [] : _props$dataSource,
      dialogTitle = props.dialogTitle;

  var _React$useState = React.useState(false),
      visible = _React$useState[0],
      setVisible = _React$useState[1];

  var _React$useState2 = React.useState({
    current: 1,
    pageSize: 10
  }),
      page = _React$useState2[0],
      setPage = _React$useState2[1];

  var firstRemark = dataSource[0];
  /** 大于1条时展示 共xx条 */

  var showMore = dataSource.length > 1;

  var handleShowDialog = function handleShowDialog() {
    setVisible(true);
  };

  var handleCloseDialog = function handleCloseDialog() {
    setVisible(false);
  };
  /** 前端分页后的数据 */


  var slicedDataSource = function () {
    var start = (page.current - 1) * page.pageSize;
    var end = start + page.pageSize;
    return dataSource.slice(start, end);
  }();

  if (!dataSource.length) {
    return /*#__PURE__*/React.createElement(React.Fragment, null, "-");
  }

  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: "aliretail-remark-list"
  }, /*#__PURE__*/React.createElement("div", {
    className: "aliretail-remark-list-flag"
  }, /*#__PURE__*/React.createElement("img", {
    src: _utils.FLAG_MAP[firstRemark === null || firstRemark === void 0 ? void 0 : firstRemark.tagCode],
    alt: "flag"
  })), /*#__PURE__*/React.createElement("div", {
    className: "aliretail-remark-list-content"
  }, firstRemark === null || firstRemark === void 0 ? void 0 : firstRemark.content, showMore && /*#__PURE__*/React.createElement(_button["default"], {
    onClick: handleShowDialog,
    className: "aliretail-remark-list-button",
    type: "primary",
    text: true
  }, "\u5171", dataSource.length, "\u6761"))), /*#__PURE__*/React.createElement(_dialog["default"], {
    title: dialogTitle,
    visible: visible,
    style: {
      width: 600
    },
    onClose: handleCloseDialog,
    onCancel: handleCloseDialog,
    footerActions: ['cancel'],
    cancelProps: {
      children: '关闭'
    }
  }, /*#__PURE__*/React.createElement(_table["default"], {
    dataSource: slicedDataSource,
    hasBorder: false
  }, /*#__PURE__*/React.createElement(_table["default"].Column, {
    title: "\u6807\u8BB0",
    dataIndex: "tagCode",
    width: 80,
    cell: function cell(v) {
      return /*#__PURE__*/React.createElement("img", {
        src: _utils.FLAG_MAP[v],
        alt: "flag"
      });
    }
  }), /*#__PURE__*/React.createElement(_table["default"].Column, {
    title: "\u5386\u53F2\u5907\u6CE8\u4FE1\u606F",
    dataIndex: "content"
  }), /*#__PURE__*/React.createElement(_table["default"].Column, {
    title: "\u5BA2\u670D",
    dataIndex: "operatorName",
    width: 100
  }), /*#__PURE__*/React.createElement(_table["default"].Column, {
    title: "\u5907\u6CE8\u65F6\u95F4",
    dataIndex: "remarkTime",
    width: 160
  })), /*#__PURE__*/React.createElement(_pagination["default"], (0, _extends2["default"])({
    style: {
      marginTop: 10,
      textAlign: 'right'
    },
    hideOnlyOnePage: true,
    total: dataSource.length,
    shape: "arrow-only",
    onChange: function onChange(current) {
      return setPage((0, _extends2["default"])({}, page, {
        current: current
      }));
    },
    onPageSizeChange: function onPageSizeChange(pageSize) {
      return setPage((0, _extends2["default"])({}, page, {
        pageSize: pageSize
      }));
    },
    totalRender: function totalRender(t) {
      return "\u5171" + t + "\u6761";
    }
  }, page))));
};

var _default = RemarkList;
exports["default"] = _default;