index.js

import React, { useContext, useState } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { Input, Image, Modal, Row, Col, ConfigProvider } from 'antd';
import Empty from '@wisdom-components/empty';
import { PlusOutlined, SearchOutlined } from '@ant-design/icons';
import './index.less';

const ImageSelect = ({ src, url, width, title, dataSource, onSearch, onSelect }) => {
  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
  const prefixCls = getPrefixCls('image-select');

  const baseUrl = url ? url : window.location.origin;
  const imgList = dataSource.map((item) => {
    return {
      list: item.list,
      text: item.text,
    };
  });

  const [visible, setVisible] = useState(false);
  const [imgSrc, setImgSrc] = useState(src);

  // 展示模态框
  const showModal = () => {
    setVisible(true);
  };

  // 关闭模态框
  const handleCancel = () => {
    setVisible(false);
  };

  // 搜索框内容变化时的回调
  const onChange = (e) => {
    if (e.target.value === '') onPressEnter(e);
  };

  // 搜索框按下回车的回调
  const onPressEnter = (e) => {
    onSearch({ fileName: e.target.value });
  };

  // 选中模态框中的图片
  const handleSelect = (e, item) => {
    setImgSrc(item.value);
    onSelect && onSelect({ ...item, url: baseUrl + item.value });
    handleCancel();
  };

  const renderImageList = (data = []) => {
    return (
      <Row gutter={[0, 12]}>
        {!!data &&
          data.map((item, index) => (
            <Col
              span={4}
              key={item.value + index}
              className={classNames(`${prefixCls}-modal-item-wrap`, {
                selected: imgSrc === item.value,
              })}
              onClick={(e) => handleSelect(e, item)}
            >
              <Image
                className={classNames(`${prefixCls}-modal-item-image`)}
                preview={false}
                src={baseUrl + item.value}
                title={item.text}
              />
              <div className={classNames(`${prefixCls}-modal-item-text`)}>
                {item.text ? item.text.split('.')[0] : item.text}
              </div>
            </Col>
          ))}
      </Row>
    );
  };

  return (
    <div className={classNames(prefixCls)}>
      <div className={classNames(`${prefixCls}-wrap`)} onClick={showModal}>
        {!!imgSrc && (
          <Image
            className={classNames(`${prefixCls}-cover`)}
            preview={false}
            src={baseUrl + imgSrc}
          />
        )}
        {!imgSrc && (
          <div>
            <PlusOutlined />
            <p>点击选择图片</p>
          </div>
        )}
      </div>
      {visible && (
        <Modal
          width={width}
          centered
          title={
            <div className={classNames(`${prefixCls}-modal-header`)}>
              <div className={classNames(`${prefixCls}-modal-title`)}>{title}</div>
              <Input
                className={classNames(`${prefixCls}-modal-search`)}
                placeholder="搜索图片关键词"
                allowClear
                bordered={false}
                prefix={<SearchOutlined />}
                onChange={onChange}
                onPressEnter={onPressEnter}
              />
            </div>
          }
          footer={null}
          visible={true}
          onCancel={handleCancel}
          className={classNames(`${prefixCls}-modal`)}
        >
          {!!imgList.length &&
            imgList.map((item, index) => {
              return (
                <div key={item.text + index} className={classNames(`${prefixCls}-modal-folder`)}>
                  <div className={classNames(`${prefixCls}-modal-path-title`)}>{item.text}</div>
                  <div>{renderImageList(item.list)}</div>
                </div>
              );
            })}
          {!imgList.length && <Empty />}
        </Modal>
      )}
    </div>
  );
};

ImageSelect.defaultProps = {
  src: '', // 封面图片地址
  url: '', // 默认url地址
  dataSource: [], // 模态框数据源
  width: 700, // 模态框宽度
  title: '点击选择图片文件', // 模态框宽度
  onSearch: function (v) {}, // 搜索框输入事件的回调
  onSelect: function (v) {}, // 模态框选中的图片的回调
};

ImageSelect.propTypes = {
  src: PropTypes.string, // 封面图片地址
  url: PropTypes.string, // 默认url地址
  dataSource: PropTypes.array, // 模态框数据源
  width: PropTypes.number, // 模态框宽度
  title: PropTypes.string, // 模态框标题
  onSearch: PropTypes.func, // 搜索框输入事件的回调
  onSelect: PropTypes.func, // 模态框选中的图片的回调
};

export default ImageSelect;