ComponentLibrary.js 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. import { message, Col, Modal, Row } from 'antd';
  2. import React, { useState } from 'react';
  3. import { COMPONENT_LIST } from './constant';
  4. function ComponentLibrary(props) {
  5. const { visible, onCancel, onOk, addToTable } = props;
  6. const [currentItem, setCurrentItem] = useState(null);
  7. const handleOk = () => {
  8. if (!currentItem) {
  9. message.error('请选择控件');
  10. return;
  11. }
  12. setCurrentItem(null);
  13. onOk?.(currentItem);
  14. };
  15. const handleCancel = () => {
  16. setCurrentItem(null);
  17. onCancel?.();
  18. };
  19. return (
  20. <Modal open={visible} onCancel={handleCancel} onOk={handleOk}>
  21. <Row gutter={12} style={{ paddingTop: 20 }}>
  22. {COMPONENT_LIST.map((item) => {
  23. if (addToTable && item.props.label === '表格') {
  24. return null;
  25. }
  26. return (
  27. <Col span={8} key={item.componentName}>
  28. <div
  29. onClick={() => setCurrentItem(item)}
  30. style={{
  31. display: 'flex',
  32. justifyContent: 'flex-start',
  33. alignItems: 'center',
  34. border:
  35. item === currentItem
  36. ? '1px solid #1890FF'
  37. : '1px solid #aaa',
  38. width: '100%',
  39. padding: '4px 12px',
  40. cursor: 'pointer',
  41. margin: '10px 0',
  42. }}
  43. >
  44. {item.icon}
  45. <span style={{ marginLeft: 8 }}>{item.props.label}</span>
  46. </div>
  47. </Col>
  48. );
  49. })}
  50. </Row>
  51. </Modal>
  52. );
  53. }
  54. export default ComponentLibrary;