WorkloadWeb/src/components/Flow/node/fields/imgSelect.tsx

import React, { useState } from 'react';
import { Button, Modal, List, Image, Card, Tabs } from 'antd';

const { TabPane } = Tabs;

interface IImg {
  type: string;
  list?: Array<any>;
}
interface IProps {
  value?: string;
  imgList?: Array<IImg>;
  onChange?: (value: any) => void;
}

const imgSelect: React.FC<IProps> = (props) => {
  const { value, imgList, onChange } = props;
  const [isModalVisible, setIsModalVisible] = useState(false);

  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };
  return (
    <div className="group">
      <Image src={value} />
      <br />
      <Button type="primary" onClick={showModal}>
        替换
      </Button>
      <Modal
        title="设备列表"
        visible={isModalVisible}
        footer={false}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <Tabs defaultActiveKey={imgList?.[0].type}>
          {imgList?.map((img) => (
            <TabPane tab={img.type} key={img.type}>
              <List
                dataSource={img.list}
                grid={{
                  gutter: 16,
                  md: 4,
                }}
                renderItem={(item: any) => {
                  let data: any;
                  if (typeof item == 'object') {
                    data = item;
                  } else {
                    data = {
                      src: item,
                    };
                  }
                  return (
                    <List.Item>
                      <Card>
                        <div
                          style={{
                            width: 80,
                            height: 80,
                            background: `url(${data.src}) no-repeat center`,
                            backgroundSize: 'contain',
                            cursor: 'pointer',
                          }}
                          onClick={() => {
                            onChange?.(data);
                            handleCancel();
                          }}
                        ></div>
                      </Card>
                    </List.Item>
                  );
                }}
              />
            </TabPane>
          ))}
        </Tabs>
      </Modal>
    </div>
  );
};

export default imgSelect;