import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import * as QrCode from 'qrcode.react'
|
|
import './index.scss'
|
|
class MkQrCode extends Component {
|
static propTpyes = {
|
card: PropTypes.object, // 条码设置
|
value: PropTypes.any, // 条码值
|
}
|
|
shouldComponentUpdate (nextProps, nextState) {
|
return !is(fromJS(this.props), fromJS(nextProps))
|
}
|
|
hexify = (color) => {
|
let values = color.replace(/rgba?\(/, '').replace(/\)/, '').replace(/[\s+]/g, '').split(',')
|
let a = parseFloat(values[3] || 1)
|
let r = Math.floor(a * parseInt(values[0]) + (1 - a) * 255)
|
let g = Math.floor(a * parseInt(values[1]) + (1 - a) * 255)
|
let b = Math.floor(a * parseInt(values[2]) + (1 - a) * 255)
|
|
return '#' + ('0' + r.toString(16)).slice(-2) + ('0' + g.toString(16)).slice(-2) + ('0' + b.toString(16)).slice(-2)
|
}
|
|
render() {
|
const { value, card } = this.props
|
let color = card.color
|
let size = card.qrWidth || 50
|
let width = size + 'px'
|
|
if (/rgb/ig.test(color)) {
|
color = this.hexify(color)
|
}
|
if (size < 640) {
|
size = 640
|
}
|
|
return (
|
<div className="qrcode-box" style={{width: width, height: width}}>
|
<QrCode
|
value={value}
|
size={size}
|
fgColor={color}
|
imageSettings={card.url ? {
|
src: card.url,
|
height: size / 5,
|
width: size / 5,
|
excavate: true
|
} : null}/>
|
</div>
|
)
|
}
|
}
|
|
export default MkQrCode
|
