Merge branch 'develop'

king

2022-12-06 91e232bb0b910f3670bdbccd65cc218d55e1eda9

 src/menu/components/code/sandbox/editorcode/index.jsx

@@ -1,14 +1,14 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Icon, Modal } from 'antd'
import { Modal, Tabs, message } from 'antd'
import { FormOutlined } from '@ant-design/icons'

import zhCN from '@/locales/zh-CN/model.js'
import enUS from '@/locales/en-US/model.js'
import asyncComponent from '@/utils/asyncComponent'
import './index.scss'

const CodeMirror = asyncComponent(() => import('@/templates/zshare/codemirror'))
const { TabPane } = Tabs

class DataSource extends Component {
  static propTpyes = {
@@ -17,9 +17,10 @@
  }

  state = {
    dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    visible: false,
    html: null
    html: '',
    css: '',
    js: ''
  }

  shouldComponentUpdate (nextProps, nextState) {
@@ -31,48 +32,73 @@

    this.setState({
      visible: true,
      html: config.html || null
      html: config.html || '',
      css: config.css || '',
      js: config.js || '',
    })
  }

  verifySubmit = () => {
    const { config } = this.props
    const { html } = this.state
    const { html, css, js } = this.state

    this.setState({
      visible: false
    })
    this.props.updateConfig({...config, html})
    this.props.updateConfig({...config, html, css, js})
  }

  onChange = (val) => {
  onHtmlChange = (val) => {
    this.setState({
      html: val
    })
  }

  render () {
    const { config } = this.props
    const { visible, dict, html } = this.state
  onCssChange = (val) => {
    this.setState({
      css: val
    })
  }

    if (!config) return null
  onJsChange = (val) => {
    if (/document\.getElementsByTagName/g.test(val)) {
      message.warning('为防止代码冲突，js中不可使用document.getElementsByTagName方法!')
      return
    }

    this.setState({
      js: val
    })
  }

  render () {
    const { visible, html, css, js } = this.state

    return (
      <div className="model-menu-edit-content-wrap">
        {config.wrap.datatype === 'static' ? <Icon title="内容编辑" type="form" onClick={() => this.trigger()} /> : null}
        {config.wrap.datatype !== 'static' ? <Icon title="内容编辑" style={{color: '#eeeeee', cursor: 'not-allowed'}} type="form"/> : null}
      <div style={{display: 'inline-block'}}>
        <FormOutlined title="代码编辑" style={{color: 'purple'}} onClick={() => this.trigger()} />
        <Modal
          wrapClassName="popview-modal model-menu-edit-content-form"
          wrapClassName="popview-modal code-sand-box-code-editor"
          title="内容编辑"
          visible={visible}
          width={950}
          maskClosable={false}
          okText={dict['model.submit']}
          okText="提交"
          onOk={this.verifySubmit}
          onCancel={() => { this.setState({ visible: false }) }}
          destroyOnClose
        >
          <CodeMirror value={html} onChange={this.onChange} />
          <Tabs>
            <TabPane tab="HTML" key="HTML">
              <CodeMirror mode="text/xml" theme="cobalt" value={html} onChange={this.onHtmlChange} />
            </TabPane>
            <TabPane tab="CSS" key="CSS">
              <CodeMirror mode="text/css" theme="cobalt" value={css} onChange={this.onCssChange} />
            </TabPane>
            <TabPane tab="JS" key="JS">
              <CodeMirror mode="text/javascript" theme="cobalt" value={js} onChange={this.onJsChange} />
            </TabPane>
          </Tabs>
        </Modal>
      </div>
    )