2021-12-22

king

2021-12-22 5223edbcccfed84a33a706e5637ee65a61f377aa

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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
57
58
59
60
61
62
63
64
65
66
67
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { Button } from 'antd'
import { CloseOutlined } from '@ant-design/icons'
import './index.scss'
 
class Preview extends Component {
  static propTpyes = {
    preview: PropTypes.any,
    cancel: PropTypes.func,
    confirm: PropTypes.func,
    template: PropTypes.object
  }
 
  state = {
    show: false,
    url: ''
  }
 
  UNSAFE_componentWillReceiveProps (nextProps) {
    if (nextProps.preview) {
      this.setState({
        url: nextProps.preview
      })
      setTimeout(() => {
        this.setState({
          show: true
        })
      }, 10)
    } else {
      this.setState({
        show: false
      })
      setTimeout(() => {
        this.setState({
          url: ''
        })
      }, 500)
    }
  }
 
  close = () => {
    this.props.cancel()
  }
 
  render () {
    const { template } = this.props
    let type = 'sys'
    if (!template || !template.isSystem) {
      type = 'user'
    }
    
    return (
      <div>
        {this.state.url && this.props.template &&
          <div className={'preview-box ' + (this.state.show ? 'active' : '')} onClick={this.close}>
            <Button shape="circle"><CloseOutlined /></Button>
            <Button type="primary" onClick={() => {this.props.confirm(this.props.template, type)}}>使用模板</Button>
            {this.state.url && <img src={this.state.url} alt=""/>}
          </div>
        }
      </div>
    )
  }
}
 
export default Preview