import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { Form, Input } from 'antd'
|
|
import zhCN from '@/locales/zh-CN/mob.js'
|
import enUS from '@/locales/en-US/mob.js'
|
import ColorSketch from '@/mob/colorsketch'
|
import FileUpload from '@/tabviews/zshare/fileupload'
|
import './index.scss'
|
|
class MobController extends Component {
|
static propTpyes = {
|
config: PropTypes.any,
|
updateConfig: PropTypes.func,
|
}
|
|
state = {
|
dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
|
backgroundColor: '',
|
backgroundImage: '',
|
bgimages: [],
|
}
|
|
UNSAFE_componentWillMount () {
|
const { config } = this.props
|
|
let bgImg = config.style.backgroundImage || ''
|
|
if (bgImg && /^linear-gradient/.test(bgImg)) {
|
bgImg = bgImg.replace('linear-gradient(', '')
|
bgImg = bgImg.replace(')', '')
|
} else if (bgImg && /^url/.test(bgImg)) {
|
bgImg = bgImg.replace('url(', '')
|
bgImg = bgImg.replace(')', '')
|
}
|
|
this.setState({
|
backgroundColor: config.style.backgroundColor,
|
backgroundImage: bgImg
|
})
|
}
|
|
shouldComponentUpdate (nextProps, nextState) {
|
return !is(fromJS(this.state), fromJS(nextState))
|
}
|
|
/**
|
* @description 修改背景颜色 ，颜色控件
|
*/
|
changeBackgroundColor = (val) => {
|
let config = fromJS(this.props.config).toJS()
|
|
this.setState({
|
backgroundColor: val
|
})
|
|
config.style.backgroundColor = val
|
this.props.updateConfig(config)
|
}
|
|
/**
|
* @description 修改字体颜色 ，手动输入
|
*/
|
changeBackgroundColorInput = (e) => {
|
let val = e.target.value
|
this.setState({
|
backgroundColor: val
|
})
|
|
let config = fromJS(this.props.config).toJS()
|
config.style.backgroundColor = val
|
|
this.props.updateConfig(config)
|
// if (/^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$|^[rR][gG][Bb][Aa]?[(]([\s]*(2[0-4][0-9]|25[0-5]|[01]?[0-9][0-9]?),){2}[\s]*(2[0-4][0-9]|25[0-5]|[01]?[0-9][0-9]?),?[\s]*(0\.\d{1,2}|1|0)?[)]{1}$/.test(val)) {}
|
}
|
|
/**
|
* @description 手动修改路径
|
*/
|
changeImage = (e) => {
|
let val = e.target.value
|
this.setState({
|
backgroundImage: val
|
})
|
|
let config = fromJS(this.props.config).toJS()
|
val = val.replace(/^\s*|\s*$/ig, '')
|
|
if (/^http|^\/\//.test(val)) {
|
val = `url(${val})`
|
} else if (/^#|,/ig.test(val)) {
|
val = `linear-gradient(${val})`
|
}
|
|
config.style.backgroundImage = val
|
this.props.updateConfig(config)
|
}
|
|
imgChange = (list) => {
|
if (list[0] && list[0].response) {
|
this.setState({
|
bgimages: [],
|
backgroundImage: list[0].response
|
})
|
|
let config = fromJS(this.props.config).toJS()
|
config.style.backgroundImage = `url(${list[0].response})`
|
this.props.updateConfig(config)
|
} else {
|
this.setState({bgimages: list})
|
}
|
}
|
|
render () {
|
const { backgroundColor, backgroundImage, bgimages } = this.state
|
const formItemLayout = {
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 4 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 20 }
|
}
|
}
|
|
return (
|
<div className="menu-background-controller">
|
<Form {...formItemLayout}>
|
<Form.Item className="color-control" colon={false} label="颜色">
|
<ColorSketch color={backgroundColor} changeColor={this.changeBackgroundColor} />
|
<Input value={backgroundColor} onChange={this.changeBackgroundColorInput} />
|
</Form.Item>
|
<Form.Item colon={false} label="图片">
|
<FileUpload value={bgimages} maxFile={2} fileType="text" onChange={this.imgChange}/>
|
<Input placeholder="" value={backgroundImage} autoComplete="off" onChange={this.changeImage}/>
|
</Form.Item>
|
</Form>
|
</div>
|
)
|
}
|
}
|
|
export default MobController
|
