index.js 4.71 KB
Newer Older
李纪文's avatar
李纪文 committed
1
import React, { useContext, useState, useEffect } from 'react';
涂茜's avatar
涂茜 committed
2
import PropTypes from 'prop-types';
涂茜's avatar
涂茜 committed
3 4
import classNames from 'classnames';
import { Input, Image, Modal, Row, Col, ConfigProvider } from 'antd';
涂茜's avatar
涂茜 committed
5
import Empty from '@wisdom-components/empty';
涂茜's avatar
涂茜 committed
6
import { PlusOutlined, SearchOutlined } from '@ant-design/icons';
涂茜's avatar
涂茜 committed
7
import './index.less';
涂茜's avatar
涂茜 committed
8 9

const ImageSelect = ({ src, url, width, title, dataSource, onSearch, onSelect }) => {
涂茜's avatar
涂茜 committed
10 11 12
  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
  const prefixCls = getPrefixCls('image-select');

涂茜's avatar
涂茜 committed
13 14 15 16 17 18 19 20 21 22 23
  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);

李纪文's avatar
李纪文 committed
24 25 26 27
  useEffect(() => {
    setImgSrc(src);
  }, [src]);

涂茜's avatar
涂茜 committed
28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56
  // 展示模态框
  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 (
涂茜's avatar
涂茜 committed
57
      <Row gutter={[0, 12]}>
涂茜's avatar
涂茜 committed
58 59 60 61 62
        {!!data &&
          data.map((item, index) => (
            <Col
              span={4}
              key={item.value + index}
涂茜's avatar
涂茜 committed
63 64 65
              className={classNames(`${prefixCls}-modal-item-wrap`, {
                selected: imgSrc === item.value,
              })}
涂茜's avatar
涂茜 committed
66 67 68
              onClick={(e) => handleSelect(e, item)}
            >
              <Image
涂茜's avatar
涂茜 committed
69
                className={classNames(`${prefixCls}-modal-item-image`)}
涂茜's avatar
涂茜 committed
70 71 72 73
                preview={false}
                src={baseUrl + item.value}
                title={item.text}
              />
涂茜's avatar
涂茜 committed
74
              <div className={classNames(`${prefixCls}-modal-item-text`)}>
涂茜's avatar
涂茜 committed
75 76 77 78 79 80 81 82 83
                {item.text ? item.text.split('.')[0] : item.text}
              </div>
            </Col>
          ))}
      </Row>
    );
  };

  return (
涂茜's avatar
涂茜 committed
84 85 86 87 88 89 90 91 92
    <div className={classNames(prefixCls)}>
      <div className={classNames(`${prefixCls}-wrap`)} onClick={showModal}>
        {!!imgSrc && (
          <Image
            className={classNames(`${prefixCls}-cover`)}
            preview={false}
            src={baseUrl + imgSrc}
          />
        )}
涂茜's avatar
涂茜 committed
93 94 95 96 97 98 99
        {!imgSrc && (
          <div>
            <PlusOutlined />
            <p>点击选择图片</p>
          </div>
        )}
      </div>
涂茜's avatar
涂茜 committed
100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134
      {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>
      )}
涂茜's avatar
涂茜 committed
135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159
    </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;