2021-01-29

king

2021-01-29 d62c168d0656fac4242581609c3c5c0d88cf6a48

 src/menu/stylecontroller/index.jsx

@@ -1,18 +1,19 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Collapse, Form, Input, Col, Icon, InputNumber, Select, Radio, Drawer, Button } from 'antd'
import { Collapse, Form, Col, Icon, InputNumber, Select, Radio, Drawer, Button } from 'antd'

import MKEmitter from '@/utils/events.js'
import zhCN from '@/locales/zh-CN/mob.js'
import enUS from '@/locales/en-US/mob.js'
import ColorSketch from '@/mob/colorsketch'
import asyncComponent from '@/utils/asyncComponent'
import StyleInput from './styleInput'
import FileUpload from '@/tabviews/zshare/fileupload'
import './index.scss'

const { Panel } = Collapse
const { Option } = Select
const ColorSketch = asyncComponent(() => import('@/mob/colorsketch'))
const SourceComponent = asyncComponent(() => import('@/menu/components/share/sourcecomponent'))

class MobController extends Component {
  static propTpyes = {
@@ -24,7 +25,6 @@
    dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    card: null,
    comIds: [],
    bgimages: [],
    backgroundImage: '',
    options: [],
    borposition: 'outer'
@@ -50,12 +50,8 @@

  initStyle = (comIds, options, style = {}) => {
    let backgroundImage = ''
    if (style.backgroundImage) {
      if (/^url/ig.test(style.backgroundImage)) {
        backgroundImage = style.backgroundImage.replace(/^url\(/ig, '').replace(/\)$/ig, '')
      } else if (/^linear-gradient/ig.test(style.backgroundImage)) {
        backgroundImage = style.backgroundImage.replace(/^linear-gradient\(/ig, '').replace(/\)$/ig, '')
      }
    if (style.backgroundImage && /^url/ig.test(style.backgroundImage)) {
      backgroundImage = style.backgroundImage.replace(/^url\(/ig, '').replace(/\)$/ig, '')
    }

    this.setState({
@@ -204,30 +200,15 @@
    this.updateStyle({shadow: val})
  }

  imgChange = (list) => {
    if (list[0] && list[0].response) {
      this.setState({
        bgimages: [],
        backgroundImage: list[0].response
      })
      this.updateStyle({backgroundImage: `url(${list[0].response})`})
  imgChange = (val) => {
    this.setState({
      backgroundImage: val
    })
    if (val) {
      this.updateStyle({backgroundImage: `url(${val})`})
    } else {
      this.setState({bgimages: list})
      this.updateStyle({backgroundImage: ''})
    }
  }

  changeBackgroundImageInput = (e) => {
    let val = e.target.value
    val = val.replace(/^\s*|\s*$/ig, '')

    if (/^http|^\/\//.test(val)) {
      val = `url(${val})`
    } else if (/,/ig.test(val) && !/^(radial-gradient|linear-gradient)/ig.test(val)) {
      val = `linear-gradient(${val})`
    }

    this.setState({backgroundImage: e.target.value})
    this.updateStyle({backgroundImage: val})
  }

  changeBorderStyle = (val) => {
@@ -301,7 +282,7 @@
  }

  render () {
    const { card, options, backgroundImage, bgimages, borposition } = this.state
    const { card, options, backgroundImage, borposition } = this.state
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
@@ -444,8 +425,7 @@
                    label={<Icon title="背景图片" type="picture" />}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <FileUpload accept=".jpg,.png,.gif,.svg" value={bgimages} maxFile={2} fileType="text" onChange={this.imgChange}/>
                    <Input placeholder="" value={backgroundImage} autoComplete="off" onChange={this.changeBackgroundImageInput} />
                    <SourceComponent value={backgroundImage} type="" placement="right" onChange={this.imgChange}/>
                  </Form.Item>
                </Col> : null}
              </Panel> : null}