CommentDrawer.js 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. import React, { useEffect, useState, useRef } from 'react';
  2. import { UserOutlined } from '@ant-design/icons';
  3. import { Form } from '@ant-design/compatible';
  4. import '@ant-design/compatible/assets/index.css';
  5. import {
  6. Steps,
  7. Button,
  8. Drawer,
  9. Comment,
  10. Tooltip,
  11. Avatar,
  12. List,
  13. Card,
  14. Modal,
  15. Checkbox,
  16. Row,
  17. Col,
  18. message,
  19. Input,
  20. Table,
  21. Alert,
  22. Spin,
  23. Tabs,
  24. } from 'antd';
  25. import moment from 'moment';
  26. const { Step } = Steps;
  27. const { TextArea } = Input;
  28. const { TabPane } = Tabs;
  29. // 评论
  30. function CommentDrawer(props) {
  31. const { visible, onClose, list, addComment, loading } = props;
  32. const [value, setValue] = useState('');
  33. // const [commentList, setCommentList] = useState([]);
  34. const handleSubmit = () => {
  35. if (!value) return;
  36. addComment(value, () => {
  37. setValue('');
  38. });
  39. };
  40. return (
  41. <Drawer title="评论列表" mask={false} placement="right" onClose={onClose} visible={visible}>
  42. <List
  43. className="comment-list"
  44. itemLayout="horizontal"
  45. dataSource={list}
  46. loading={loading}
  47. renderItem={item => (
  48. <li>
  49. <Comment
  50. author={<a>{item.AuthorUser.CName}</a>}
  51. avatar={<Avatar icon={<UserOutlined />} alt={item.author} />}
  52. content={<p>{item.comment}</p>}
  53. datetime={
  54. <Tooltip title={moment(item.c_time).format('YYYY-MM-DD')}>
  55. <span>{moment(item.c_time).fromNow()}</span>
  56. </Tooltip>
  57. }
  58. />
  59. </li>
  60. )}
  61. />
  62. <Comment
  63. avatar={<Avatar icon={<UserOutlined />} alt="张三" />}
  64. content={
  65. <>
  66. <Form.Item>
  67. <TextArea rows={4} onChange={e => setValue(e.target.value)} value={value} />
  68. </Form.Item>
  69. <Form.Item>
  70. <Button htmlType="submit" loading={loading} onClick={handleSubmit} type="primary">
  71. 添加评论
  72. </Button>
  73. </Form.Item>
  74. </>
  75. }
  76. />
  77. </Drawer>
  78. );
  79. }
  80. export default CommentDrawer