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

B 端物料组件库

import _Dialog from "@alifd/next/es/dialog";
import _Pagination from "@alifd/next/es/pagination";
import _extends from "@babel/runtime/helpers/extends";
import _Table from "@alifd/next/es/table";
import _Button from "@alifd/next/es/button";

/* eslint-disable react/prop-types */
import * as React from 'react';
import { FLAG_MAP } from "../utils";

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: 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, {
    onClick: handleShowDialog,
    className: "aliretail-remark-list-button",
    type: "primary",
    text: true
  }, "\u5171", dataSource.length, "\u6761"))), /*#__PURE__*/React.createElement(_Dialog, {
    title: dialogTitle,
    visible: visible,
    style: {
      width: 600
    },
    onClose: handleCloseDialog,
    onCancel: handleCloseDialog,
    footerActions: ['cancel'],
    cancelProps: {
      children: '关闭'
    }
  }, /*#__PURE__*/React.createElement(_Table, {
    dataSource: slicedDataSource,
    hasBorder: false
  }, /*#__PURE__*/React.createElement(_Table.Column, {
    title: "\u6807\u8BB0",
    dataIndex: "tagCode",
    width: 80,
    cell: function cell(v) {
      return /*#__PURE__*/React.createElement("img", {
        src: FLAG_MAP[v],
        alt: "flag"
      });
    }
  }), /*#__PURE__*/React.createElement(_Table.Column, {
    title: "\u5386\u53F2\u5907\u6CE8\u4FE1\u606F",
    dataIndex: "content"
  }), /*#__PURE__*/React.createElement(_Table.Column, {
    title: "\u5BA2\u670D",
    dataIndex: "operatorName",
    width: 100
  }), /*#__PURE__*/React.createElement(_Table.Column, {
    title: "\u5907\u6CE8\u65F6\u95F4",
    dataIndex: "remarkTime",
    width: 160
  })), /*#__PURE__*/React.createElement(_Pagination, _extends({
    style: {
      marginTop: 10,
      textAlign: 'right'
    },
    hideOnlyOnePage: true,
    total: dataSource.length,
    shape: "arrow-only",
    onChange: function onChange(current) {
      return setPage(_extends({}, page, {
        current: current
      }));
    },
    onPageSizeChange: function onPageSizeChange(pageSize) {
      return setPage(_extends({}, page, {
        pageSize: pageSize
      }));
    },
    totalRender: function totalRender(t) {
      return "\u5171" + t + "\u6761";
    }
  }, page))));
};

export default RemarkList;