import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { Collapse, Form, Input, Col, Icon, InputNumber, Select } from 'antd'
|
|
import zhCN from '@/locales/zh-CN/mob.js'
|
import enUS from '@/locales/en-US/mob.js'
|
import ColorSketch from '@/mob/colorsketch'
|
import './index.scss'
|
|
const { Panel } = Collapse
|
const { Option } = Select
|
|
class MobController extends Component {
|
static propTpyes = {
|
editElem: PropTypes.any,
|
}
|
|
state = {
|
dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
|
}
|
|
shouldComponentUpdate (nextProps, nextState) {
|
return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
|
}
|
|
boldChange = (val) => {
|
console.log(val)
|
}
|
|
render () {
|
const { editElem } = this.props
|
const formItemLayout = {
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 8 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 16 }
|
}
|
}
|
return (
|
<div className="mob-controller">
|
<Form {...formItemLayout}>
|
{editElem ? <Collapse expandIconPosition="right" accordion={true}>
|
{editElem.items.includes('font') ? <Panel header="字体" key="0">
|
<Col span={12}>
|
<Form.Item colon={false} label={<Icon title="字体大小" type="font-size" />}>
|
<InputNumber min={12} max={100} precision={0} />
|
</Form.Item>
|
</Col>
|
<Col span={12}>
|
<Form.Item colon={false} label={<Icon title="字体粗细" type="bold" />}>
|
<Select defaultValue="normal" onChange={this.boldChange}>
|
<Option value="normal">normal</Option>
|
<Option value="bold">bold</Option>
|
<Option value="bolder">bolder</Option>
|
<Option value="lighter">lighter</Option>
|
<Option value="100">100</Option>
|
<Option value="200">200</Option>
|
<Option value="300">300</Option>
|
<Option value="400">400</Option>
|
<Option value="500">500</Option>
|
<Option value="600">600</Option>
|
<Option value="700">700</Option>
|
<Option value="800">800</Option>
|
<Option value="900">900</Option>
|
</Select>
|
</Form.Item>
|
</Col>
|
<Col span={12}>
|
<Form.Item colon={false} label={<Icon title="行间距" type="line-height" />}>
|
<InputNumber min={1} max={10} precision={1} />
|
</Form.Item>
|
</Col>
|
<Col span={12}>
|
<Form.Item colon={false} label={<Icon title="字间距" type="column-width" />}>
|
<InputNumber min={0} max={100} precision={0} />
|
</Form.Item>
|
</Col>
|
<Col span={24}>
|
<Form.Item
|
colon={false}
|
label={<Icon title="字体颜色" type="font-colors" />}
|
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
|
>
|
<ColorSketch />
|
<Input />
|
</Form.Item>
|
</Col>
|
<Col span={12}>
|
<Form.Item colon={false} label={<Icon title="字体粗细" type="bold" />}>
|
<Input />
|
</Form.Item>
|
</Col>
|
</Panel> : null}
|
<Panel header="背景" key="1">
|
背景
|
</Panel>
|
<Panel header="边距" key="2">
|
边距
|
</Panel>
|
<Panel header="其他" key="3">
|
其他
|
</Panel>
|
</Collapse> : null}
|
</Form>
|
</div>
|
)
|
}
|
}
|
|
export default MobController
|