import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { Form, Select, Input } from 'antd'
|
import { ArrowUpOutlined, ArrowDownOutlined, ArrowLeftOutlined, ArrowRightOutlined, BgColorsOutlined, ColumnWidthOutlined } from '@ant-design/icons'
|
|
import asyncComponent from '@/utils/asyncComponent'
|
import './index.scss'
|
|
const ColorSketch = asyncComponent(() => import('@/mob/colorsketch'))
|
const StyleInput = asyncComponent(() => import('@/menu/stylecontroller/styleInput'))
|
const SysColorSketch = asyncComponent(() => import('@/menu/stylecontroller/syscolorsketch'))
|
const SourceComponent = asyncComponent(() => import('@/menu/components/share/sourcecomponent'))
|
const { Option } = Select
|
|
class MobController extends Component {
|
static propTpyes = {
|
config: PropTypes.any,
|
updateConfig: PropTypes.func,
|
}
|
|
state = {
|
background: '',
|
backgroundColor: '',
|
backgroundImage: '',
|
backgroundSize: '',
|
backgroundRepeat: '',
|
backgroundPosition: '',
|
opacity: '',
|
}
|
|
UNSAFE_componentWillMount () {
|
const { config } = this.props
|
|
let bgImg = config.style.backgroundImage || ''
|
|
if (bgImg && /^url/.test(bgImg)) {
|
bgImg = bgImg.replace('url(', '')
|
bgImg = bgImg.replace(')', '')
|
}
|
|
this.setState({
|
background: config.style.background || '',
|
backgroundColor: config.style.backgroundColor,
|
backgroundImage: bgImg,
|
backgroundSize: config.style.backgroundSize || '100%',
|
backgroundRepeat: config.style.backgroundRepeat || 'repeat',
|
backgroundPosition: config.style.backgroundPosition || 'center'
|
})
|
}
|
|
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 修改背景颜色 ，颜色控件
|
*/
|
changePadding = (val, type) => {
|
let config = fromJS(this.props.config).toJS()
|
|
config.style[type] = val
|
this.props.updateConfig(config)
|
}
|
|
|
imgChange = (val) => {
|
this.setState({
|
backgroundImage: val
|
})
|
|
let config = fromJS(this.props.config).toJS()
|
|
if (val) {
|
config.style.backgroundImage = `url(${val})`
|
} else {
|
delete config.style.backgroundImage
|
}
|
this.props.updateConfig(config)
|
}
|
|
backgroundSizeChange = (val) => {
|
this.setState({
|
backgroundSize: val
|
})
|
|
let config = fromJS(this.props.config).toJS()
|
config.style.backgroundSize = val
|
|
this.props.updateConfig(config)
|
}
|
|
backgroundRepeatChange = (val) => {
|
this.setState({
|
backgroundRepeat: val
|
})
|
|
let config = fromJS(this.props.config).toJS()
|
config.style.backgroundRepeat = val
|
|
this.props.updateConfig(config)
|
}
|
|
backgroundPositonChange = (val) => {
|
this.setState({
|
backgroundPosition: val
|
})
|
|
let config = fromJS(this.props.config).toJS()
|
config.style.backgroundPosition = val
|
|
this.props.updateConfig(config)
|
}
|
|
changeBackground = (val) => {
|
this.setState({
|
background: val,
|
})
|
|
if (!val || /(^linear-gradient|^radial-gradient)\(.*\)$/.test(val)) {
|
let config = fromJS(this.props.config).toJS()
|
config.style.background = val
|
|
delete config.style.backgroundColor
|
delete config.style.backgroundImage
|
|
if (!val) {
|
delete config.style.background
|
}
|
|
this.setState({
|
backgroundImage: '',
|
backgroundColor: ''
|
})
|
|
this.props.updateConfig(config)
|
}
|
}
|
|
/**
|
* @description 修改阴影颜色 ，颜色控件
|
*/
|
changeShadowColor = (val) => {
|
let config = fromJS(this.props.config).toJS()
|
config.style.shadowColor = val
|
config.style.boxShadow = `${config.style.hShadow || '0px'} ${config.style.vShadow || '0px'} ${config.style.shadowBlur || '0px'} ${config.style.shadowColor || 'transparent'}`
|
|
this.props.updateConfig(config)
|
}
|
|
/**
|
* @description 修改阴影颜色 ，颜色控件
|
*/
|
changeShadowBlur = (val) => {
|
let config = fromJS(this.props.config).toJS()
|
config.style.shadowBlur = val
|
config.style.boxShadow = `${config.style.hShadow || '0px'} ${config.style.vShadow || '0px'} ${config.style.shadowBlur || '0px'} ${config.style.shadowColor || 'transparent'}`
|
|
this.props.updateConfig(config)
|
}
|
|
/**
|
* @description 修改阴影颜色 ，颜色控件
|
*/
|
changeHShadow = (val) => {
|
let config = fromJS(this.props.config).toJS()
|
config.style.hShadow = val
|
config.style.boxShadow = `${config.style.hShadow || '0px'} ${config.style.vShadow || '0px'} ${config.style.shadowBlur || '0px'} ${config.style.shadowColor || 'transparent'}`
|
|
this.props.updateConfig(config)
|
}
|
|
/**
|
* @description 修改阴影颜色 ，颜色控件
|
*/
|
changeVShadow = (val) => {
|
let config = fromJS(this.props.config).toJS()
|
config.style.vShadow = val
|
config.style.boxShadow = `${config.style.hShadow || '0px'} ${config.style.vShadow || '0px'} ${config.style.shadowBlur || '0px'} ${config.style.shadowColor || 'transparent'}`
|
|
this.props.updateConfig(config)
|
}
|
|
render () {
|
const { config, type } = this.props
|
const { backgroundColor, backgroundImage, backgroundSize, backgroundRepeat, backgroundPosition, background } = this.state
|
const formItemLayout = {
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 5 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 19 }
|
}
|
}
|
|
return (
|
<div className="pc-style-controller">
|
<Form {...formItemLayout}>
|
{/* <Form.Item
|
colon={false}
|
label="宽度"
|
className="normal-view"
|
>
|
<StyleInput defaultValue={config.style.width || '100%'} options={['px', '%', 'vw']} onChange={(val) => this.changePadding(val, 'width')}/>
|
</Form.Item> */}
|
<Form.Item className="color-control" style={{marginBottom: '0px'}} colon={false} label="背景色">
|
<ColorSketch value={backgroundColor} onChange={this.changeBackgroundColor} />
|
</Form.Item>
|
<Form.Item colon={false} label="系统色">
|
<SysColorSketch onChange={this.changeBackgroundColor} />
|
</Form.Item>
|
{window.develop === true ? <Form.Item colon={false} label="颜色">
|
<Input value={background} onChange={(e) => this.changeBackground(e.target.value)} />
|
</Form.Item> : null}
|
<Form.Item colon={false} label="背景图">
|
<SourceComponent value={backgroundImage} type="" placement="right" onChange={this.imgChange}/>
|
</Form.Item>
|
<Form.Item colon={false} label="比例">
|
<Select defaultValue={backgroundSize} onChange={this.backgroundSizeChange}>
|
<Option value="100%">100%</Option>
|
<Option value="100% 100%">100% 100%</Option>
|
<Option value="auto 100%">auto 100%</Option>
|
<Option value="100% auto">100% auto</Option>
|
<Option value="auto">auto</Option>
|
<Option value="contain">contain</Option>
|
<Option value="cover">cover</Option>
|
</Select>
|
</Form.Item>
|
<Form.Item colon={false} label="重复">
|
<Select defaultValue={backgroundRepeat} onChange={this.backgroundRepeatChange}>
|
<Option value="repeat">repeat</Option>
|
<Option value="no-repeat">no-repeat</Option>
|
<Option value="repeat-x">repeat-x</Option>
|
<Option value="repeat-y">repeat-y</Option>
|
</Select>
|
</Form.Item>
|
<Form.Item colon={false} label="位置">
|
<Select defaultValue={backgroundPosition} onChange={this.backgroundPositonChange}>
|
<Option value="center">center</Option>
|
<Option value="top">top</Option>
|
<Option value="bottom">bottom</Option>
|
</Select>
|
</Form.Item>
|
{type === 'mob_popview' ? <p className="normal-view" style={{borderBottom: '1px solid #eaeaea', color: '#40a9ff'}}>阴影</p> : null}
|
{type === 'mob_popview' ? <>
|
<Form.Item colon={false} label={<BgColorsOutlined title="阴影颜色"/>}>
|
<ColorSketch value={config.style.shadowColor || 'transparent'} onChange={this.changeShadowColor} />
|
</Form.Item>
|
<Form.Item colon={false} label={<BgColorsOutlined title="系统色"/>}>
|
<SysColorSketch onChange={this.changeShadowColor} />
|
</Form.Item>
|
<Form.Item colon={false} label={<ColumnWidthOutlined title="模糊距离"/>}>
|
<StyleInput defaultValue={config.style.shadowBlur || '0px'} options={['px']} onChange={this.changeShadowBlur}/>
|
</Form.Item>
|
<Form.Item colon={false} label={<ArrowRightOutlined title="水平位置"/>}>
|
<StyleInput defaultValue={config.style.hShadow || '0px'} options={['px']} onChange={this.changeHShadow}/>
|
</Form.Item>
|
<Form.Item colon={false} label={<ArrowDownOutlined title="垂直位置"/>}>
|
<StyleInput defaultValue={config.style.vShadow || '0px'} options={['px']} onChange={this.changeVShadow}/>
|
</Form.Item>
|
</> : null}
|
<p className="normal-view" style={{borderBottom: '1px solid #eaeaea', color: '#40a9ff'}}>内边距</p>
|
<Form.Item
|
colon={false}
|
className="normal-view"
|
label={<ArrowUpOutlined title="上边距"/>}
|
>
|
<StyleInput defaultValue={config.style.paddingTop || '0px'} options={['px', '%', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'paddingTop')}/>
|
</Form.Item>
|
<Form.Item
|
colon={false}
|
className="normal-view"
|
label={<ArrowDownOutlined title="下边距"/>}
|
>
|
<StyleInput defaultValue={config.style.paddingBottom || '0px'} options={['px', '%', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'paddingBottom')}/>
|
</Form.Item>
|
<Form.Item
|
colon={false}
|
className="normal-view"
|
label={<ArrowLeftOutlined title="左边距"/>}
|
>
|
<StyleInput defaultValue={config.style.paddingLeft || '0px'} options={['px', '%', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'paddingLeft')}/>
|
</Form.Item>
|
<Form.Item
|
colon={false}
|
className="normal-view"
|
label={<ArrowRightOutlined title="右边距"/>}
|
>
|
<StyleInput defaultValue={config.style.paddingRight || '0px'} options={['px', '%', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'paddingRight')}/>
|
</Form.Item>
|
<p className="normal-view" style={{borderBottom: '1px solid #eaeaea', color: '#40a9ff'}}>外边距</p>
|
<Form.Item
|
colon={false}
|
className="normal-view"
|
label={<ArrowUpOutlined title="上边距"/>}
|
>
|
<StyleInput defaultValue={config.style.marginTop || '0px'} options={['px', '%', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'marginTop')}/>
|
</Form.Item>
|
<Form.Item
|
colon={false}
|
className="normal-view"
|
label={<ArrowDownOutlined title="下边距"/>}
|
>
|
<StyleInput defaultValue={config.style.marginBottom || '0px'} options={['px', '%', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'marginBottom')}/>
|
</Form.Item>
|
<Form.Item
|
colon={false}
|
className="normal-view"
|
label={<ArrowLeftOutlined title="左边距"/>}
|
>
|
<StyleInput defaultValue={config.style.marginLeft || '0px'} options={['px', '%', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'marginLeft')}/>
|
</Form.Item>
|
<Form.Item
|
colon={false}
|
className="normal-view"
|
label={<ArrowRightOutlined title="右边距"/>}
|
>
|
<StyleInput defaultValue={config.style.marginRight || '0px'} options={['px', '%', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'marginRight')}/>
|
</Form.Item>
|
</Form>
|
</div>
|
)
|
}
|
}
|
|
export default MobController
|
