2020-10-11

king

2020-10-11 5902ba5c3ff85efc78c95364196cd6ab5d2d1601

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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Button, Icon } from 'antd'
 
import zhCN from '@/locales/zh-CN/model.js'
import enUS from '@/locales/en-US/model.js'
 
import './index.scss'
 
class CardCellComponent extends Component {
  static propTpyes = {
    cards: PropTypes.object,         // 菜单配置信息
    cardCell: PropTypes.object,
    elements: PropTypes.array,       // 元素集
  }
 
  state = {
    dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    card: null,          // 编辑中元素
    elements: null,      // 按钮组
  }
 
  /**
   * @description 搜索条件初始化
   */
  UNSAFE_componentWillMount () {
    const { elements } = this.props
 
    this.setState({
      elements: fromJS(elements).toJS()
    })
  }
 
  shouldComponentUpdate (nextProps, nextState) {
    return !is(fromJS(this.state), fromJS(nextState))
  }
 
  /**
   * @description 组件销毁，清除state更新，清除快捷键设置
   */
  componentWillUnmount () {
    this.setState = () => {
      return
    }
  }
 
  getContent = (card) => {
    if (card.eleType === 'text' || card.eleType === 'number') {
      let val = `${card.prefix || ''}${card.value || ''}${card.postfix || ''}`
      return <span key={card.uuid}>{val}</span>
    } else if (card.eleType === 'icon') {
      return (<Icon key={card.uuid} type={card.icon}/>)
    } else if (card.eleType === 'slider') {
      return (
        <div className="ant-mk-slider" key={card.uuid}>
          <div className="ant-mk-slider-rail"></div>
          <div className="ant-mk-slider-track" style={{width: '30%', backgroundColor: card.color}}></div>
          <div className="ant-mk-slider-handle" style={{left: '30%', borderColor: card.color}}></div>
        </div>
      )
    } else if (card.eleType === 'picture') {
      let _imagestyle = {}
 
      if (card.url) {
        _imagestyle = {backgroundImage: `url('${card.url}')`}
      } else {
        _imagestyle = {backgroundImage: `url('')`}
      }
 
      if (card.radius === 'true') {
        _imagestyle.borderRadius = '50%'
      }
 
      if (card.lenWidRadio === '16:9') {
        _imagestyle.paddingTop = '56.25%'
      } else if (card.lenWidRadio === '3:2') {
        _imagestyle.paddingTop = '66.67%'
      } else if (card.lenWidRadio === '4:3') {
        _imagestyle.paddingTop = '75%'
      } else {
        _imagestyle.paddingTop = '100%'
      }
 
      return (
        <div className="ant-mk-picture" key={card.uuid} style={_imagestyle}></div>
      )
    } else if (card.eleType === 'splitline') {
      return (
        <div className="ant-mk-splitline" key={card.uuid} style={{backgroundColor: card.color}}></div>
      )
    } else if (card.eleType === 'button') {
      if (card.show === 'icon') {
        return (card.icon ? <Button key={card.uuid} className={'mk-link mk-' + card.class} style={card.btnstyle} type="link"><Icon type={card.icon}/></Button> : null)
      } else if (card.show === 'link') {
        return (
          <Button key={card.uuid} className={'mk-link mk-' + card.class} style={card.btnstyle} type="link">{card.label}{card.icon ? <Icon type={card.icon}/> : null}</Button>
        )
      } else {
        return (
          <Button
            key={card.uuid}
            className={'mk-btn mk-' + card.class}
            icon={card.icon}
            style={card.btnstyle}
          >
            {card.label}
          </Button>
        )
      }
    }
  }
 
  render() {
    const { elements } = this.state
 
    return (
      <div className="model-menu-card-cell-list">
        {elements.map(item => this.getContent(item))}
      </div>
    )
  }
}
 
export default CardCellComponent