| | |
| | | import React, {Component} from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import { is, fromJS } from 'immutable' |
| | | import { Radio, Icon, Modal } from 'antd' |
| | | import { Radio, Modal, message } from 'antd' |
| | | import { PaperClipOutlined, DeleteOutlined, CopyOutlined } from '@ant-design/icons' |
| | | |
| | | import InputForm from './inputform' |
| | | import './index.scss' |
| | | |
| | | class CopyComponent extends Component { |
| | | class SourceComponent extends Component { |
| | | static propTpyes = { |
| | | type: PropTypes.string, |
| | | placement: PropTypes.any, |
| | |
| | | } |
| | | |
| | | state = { |
| | | url: this.props.value, |
| | | url: '', |
| | | visible: '' |
| | | } |
| | | |
| | | UNSAFE_componentWillMount () { |
| | | const { value, initialValue } = this.props |
| | | let val = '' |
| | | |
| | | if (value) { |
| | | val = value |
| | | } else if (initialValue) { |
| | | val = initialValue |
| | | } else if (this.props['data-__meta']) { |
| | | val = this.props['data-__meta'].initialValue || '' |
| | | } |
| | | |
| | | this.setState({ |
| | | url: val, |
| | | }) |
| | | } |
| | | |
| | | shouldComponentUpdate (nextProps, nextState) { |
| | | return !is(fromJS(this.state), fromJS(nextState)) |
| | | return !is(fromJS(this.state), fromJS(nextState)) || nextProps.type !== this.props.type |
| | | } |
| | | |
| | | deleteUrl = () => { |
| | | this.setState({url: ''}) |
| | | this.props.onChange('') |
| | | } |
| | | |
| | | copyUrl = () => { |
| | | const { url } = this.state |
| | | |
| | | let oInput = document.createElement('input') |
| | | oInput.value = url |
| | | document.body.appendChild(oInput) |
| | | oInput.select() |
| | | document.execCommand('Copy') |
| | | document.body.removeChild(oInput) |
| | | message.success('复制成功。') |
| | | } |
| | | |
| | | handleChange = (key) => { |
| | |
| | | const { url, visible } = this.state |
| | | const { type } = this.props |
| | | let name = url ? url.slice(url.lastIndexOf('/') + 1) : '' |
| | | // url !== '@icon@' |
| | | |
| | | return ( |
| | | <div className="mk-source-wrap"> |
| | |
| | | <Radio.Button value="upload" size="small" onClick={() => this.handleChange('upload')}>上传</Radio.Button> |
| | | <Radio.Button value="system" size="small" onClick={() => this.handleChange('system')}>系统</Radio.Button> |
| | | </Radio.Group> : null} |
| | | {url ? <div className="mk-source-item-info"> |
| | | <Icon type="paper-clip" /> |
| | | <a target="_blank" rel="noopener noreferrer" href={url}>{name}</a> |
| | | <Icon title="删除文件" type="delete" onClick={this.deleteUrl}/> |
| | | {url && type === 'video' ? <div className="mk-source-item-info"> |
| | | <PaperClipOutlined /> |
| | | <a target="_blank" rel="noopener noreferrer" href={url.replace(/@mywebsite@\//ig, window.GLOB.baseurl)}>{name}</a> |
| | | <CopyOutlined title="复制链接" onClick={this.copyUrl}/> |
| | | <DeleteOutlined title="删除文件" onClick={this.deleteUrl}/> |
| | | </div> : null} |
| | | {url && type !== 'video' && url !== '@icon@' ? <div className="mk-source-item-info picture"> |
| | | <img src={url.replace(/@mywebsite@\//ig, window.GLOB.baseurl)} alt="" /> |
| | | <a target="_blank" rel="noopener noreferrer" href={url.replace(/@mywebsite@\//ig, window.GLOB.baseurl)}>{name}</a> |
| | | <CopyOutlined title="复制链接" onClick={this.copyUrl}/> |
| | | <DeleteOutlined title="删除文件" onClick={this.deleteUrl}/> |
| | | </div> : null} |
| | | {url && type !== 'video' && url === '@icon@' ? <div className="mk-source-item-info avatar"> |
| | | <span className="mk-avatar">{name}</span> |
| | | <DeleteOutlined title="删除文件" onClick={this.deleteUrl}/> |
| | | </div> : null} |
| | | <Modal |
| | | visible={!!visible} |
| | | width={visible !== 'system' ? 600 : 1000} |
| | | width={visible !== 'system' ? 650 : 1200} |
| | | closable={false} |
| | | maskClosable={false} |
| | | centered={visible === 'system'} |
| | | okText="确定" |
| | | cancelText="取消" |
| | | onOk={this.popSubmit} |
| | | onCancel={() => {this.setState({visible: ''})}} |
| | | destroyOnClose |
| | |
| | | } |
| | | } |
| | | |
| | | export default CopyComponent |
| | | export default SourceComponent |