From 79e1455e4ba4f4a7d04a483dda1a354e53921a69 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期三, 04 十一月 2020 19:04:14 +0800
Subject: [PATCH] 2020-11-04
---
src/menu/stylecontroller/styleInput/index.jsx | 103 +++++++++++++++++++++++++++++++++------------------
1 files changed, 66 insertions(+), 37 deletions(-)
diff --git a/src/menu/stylecontroller/styleInput/index.jsx b/src/menu/stylecontroller/styleInput/index.jsx
index 3bf883c..a7d3df9 100644
--- a/src/menu/stylecontroller/styleInput/index.jsx
+++ b/src/menu/stylecontroller/styleInput/index.jsx
@@ -1,9 +1,11 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
-import { Menu, Popover, Input } from 'antd'
+import { Select, Input } from 'antd'
import './index.scss'
+
+const { Option } = Select
class StyleInput extends Component {
static propTpyes = {
@@ -15,14 +17,14 @@
state = {
value: '',
- parseVal: '',
- width: '',
+ unit: '',
options: null
}
UNSAFE_componentWillMount () {
const { defaultValue, value, options } = this.props
let val = ''
+ let unit = ''
let _options = ['px']
if (value !== undefined) {
@@ -35,8 +37,18 @@
_options = options
}
- if (val === 'auto') {
- val = ''
+ unit = _options[0]
+
+ if (val) {
+ if (val.indexOf('px') > -1) {
+ unit = 'px'
+ } else if (val.indexOf('%') > -1) {
+ unit = '%'
+ } else if (val.indexOf('vw') > -1) {
+ unit = 'vw'
+ } else if (val.indexOf('vh') > -1) {
+ unit = 'vh'
+ }
}
let _val = parseInt(val)
@@ -45,7 +57,7 @@
_val = ''
}
- this.setState({value: val, options: _options, parseVal: _val})
+ this.setState({value: _val, options: _options, unit})
}
shouldComponentUpdate (nextProps, nextState) {
@@ -54,13 +66,32 @@
UNSAFE_componentWillReceiveProps(nextProps) {
if (nextProps.value !== undefined && nextProps.value !== this.state.value) {
- this.setState({ value: nextProps.value })
+ let val = nextProps.value
+ let unit = this.state.unit
+
+ if (val) {
+ if (val.indexOf('px') > -1) {
+ unit = 'px'
+ } else if (val.indexOf('%') > -1) {
+ unit = '%'
+ } else if (val.indexOf('vw') > -1) {
+ unit = 'vw'
+ } else if (val.indexOf('vh') > -1) {
+ unit = 'vh'
+ }
+ }
+
+ let _val = parseInt(val)
+
+ if (isNaN(_val)) {
+ _val = ''
+ }
+
+ this.setState({value: _val, unit})
}
}
- componentDidMount () {
- this.setState({width: (this.input.offsetWidth - 10) + 'px'})
- }
+ componentDidMount () {}
/**
* @description 缁勪欢閿�姣侊紝娓呴櫎state鏇存柊锛屾竻闄ゅ揩鎹烽敭璁剧疆
@@ -72,49 +103,47 @@
}
changeValue = (e) => {
+ const { unit } = this.state
let val = e.target.value
let _val = parseInt(val)
-
+
if (isNaN(_val)) {
_val = ''
}
this.setState({
- value: val,
- parseVal: _val
- })
-
- if (!val && this.props.onChange) {
- this.props.onChange('0px')
- }
- }
-
- submitValue = (val) => {
- this.setState({
- value: val
+ value: _val,
})
if (this.props.onChange) {
- this.props.onChange(val)
+ if (!_val) {
+ this.props.onChange('0px')
+ } else {
+ this.props.onChange(`${_val}${unit}`)
+ }
+ }
+ }
+
+ changeUnit = (val) => {
+ const { value } = this.state
+
+ this.setState({unit: val})
+ if (value && this.props.onChange) {
+ this.props.onChange(`${value}${val}`)
}
}
render () {
- const { value, options, parseVal, width } = this.state
+ const { value, options, unit } = this.state
return (
- <Popover placement="bottom" overlayClassName="style-input-popover" content={
- parseVal !== '' ?
- <Menu>
- {options.map(option => (
- <Menu.Item key={option} style={{width: width}} onClick={() => this.submitValue(`${parseVal}${option}`)}>{parseVal} {option}</Menu.Item>
- ))}
- </Menu> : null
- } trigger="hover">
- <div ref={dom => { this.input = dom }} style={{lineHeight: '32px'}}>
- <Input value={value} onChange={this.changeValue}/>
- </div>
- </Popover>
+ <div className="style-input-box">
+ <Input value={value} addonAfter={
+ <Select value={unit} onChange={this.changeUnit}>
+ {options.map(item => <Option key={item} value={item}>{item}</Option>)}
+ </Select>
+ } onChange={this.changeValue}/>
+ </div>
)
}
}
--
Gitblit v1.8.0