From 61ab22d7b6be46c00e8813b00b2352a52cc252f3 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期三, 01 二月 2023 15:43:35 +0800
Subject: [PATCH] 2023-02-01

---
 src/menu/stylecontroller/styleInput/index.jsx |  122 ++++++++++++++++++++++++++++------------
 1 files changed, 86 insertions(+), 36 deletions(-)

diff --git a/src/menu/stylecontroller/styleInput/index.jsx b/src/menu/stylecontroller/styleInput/index.jsx
index d2b2523..d7661d0 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,13 +37,29 @@
       _options = options
     }
 
-    let _val = parseInt(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'
+      } else if (val === 'auto' && _options.includes('auto')) {
+        unit = 'auto'
+      }
+    }
+
+    let _val = parseFloat(val)
 
     if (isNaN(_val)) {
       _val = ''
     }
 
-    this.setState({value: val, options: _options, parseVal: _val})
+    this.setState({value: _val, options: _options, unit})
   }
 
   shouldComponentUpdate (nextProps, nextState) {
@@ -50,13 +68,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 = parseFloat(val)
+
+      if (isNaN(_val)) {
+        _val = ''
+      }
+
+      this.setState({value: _val, unit})
     }
   }
 
-  componentDidMount () {
-    this.setState({width: (this.input.offsetWidth - 10) + 'px'})
-  }
+  componentDidMount () {}
 
   /**
    * @description 缁勪欢閿�姣侊紝娓呴櫎state鏇存柊锛屾竻闄ゅ揩鎹烽敭璁剧疆
@@ -68,49 +105,62 @@
   }
 
   changeValue = (e) => {
+    const { unit } = this.state
     let val = e.target.value
-    let _val = parseInt(val)
 
+    if (/\d+\.$|^-$|^-0$/.test(val)) {
+      this.setState({
+        value: val
+      })
+      return
+    }
+    let _val = parseFloat(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 (val === 'auto') {
+      this.setState({value: ''})
+      this.props.onChange('auto')
+    } else {
+      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="click">
-        <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} disabled={unit === 'auto'} addonAfter={
+          options.length > 1 ?
+          <Select value={unit} onChange={this.changeUnit}>
+            {options.map(item => <Option key={item} value={item}>{item}</Option>)}
+          </Select> :
+          <div className="single-unit">{unit}</div>
+        } onChange={this.changeValue}/>
+      </div>
     )
   }
 }

--
Gitblit v1.8.0