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;