add modbus value convert modal

src/components/AdminPage/ActionLinkAddN/ActionSelect/UnitModbus.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import {Form, Input} from 'semantic-ui-react';
 import { getRequest } from '../../../../actions';
+import CalModal  from './CalModal';
 
 class UnitLeone extends React.Component {
     state = {
@@ -12,7 +13,8 @@ class UnitLeone extends React.Component {
             funcName: '',
             addr: '',
             value: ''
-        }
+        },
+        modal: false
     }
 
     componentDidMount() {
@@ -27,6 +29,38 @@ class UnitLeone extends React.Component {
             })
     }
 
+    renderModal = () => {
+        let {i18n} = this.props;
+        return (
+            this.state.modal ? 
+            (
+                <CalModal i18n={i18n} onClose={this.closeModal} onSubmit={this.submitModal} />
+            ): null
+        )
+    }
+
+    closeModal = () => {
+        this.setState({
+            modal: false
+        })
+    }
+
+    submitModal = (data) => {
+        if(!data) return ;
+        let {showDialog} = this.props;
+        let {r1, r2, s1, s2, val} = data;
+        if(!isFinite(r1) || !isFinite(r2) || !isFinite(s1) || !isFinite(s2) || !isFinite(val)) return showDialog('請勿輸入數字以外的內容');
+
+        let value = Math.round(((val - r1) * (s2 - s1)) / (r2 - r1));
+
+        this.setState({
+            data:{
+                ...this.state.data,
+                value
+            }
+        }, ()=>{this.closeModal()})
+    }
+
     changeState = (tag, value) =>{
         let data = {...this.state.data};
 
@@ -77,7 +111,7 @@ class UnitLeone extends React.Component {
         let {i18n} = this.props;
         let dev = '';
         let m = this.state.data.dev.match(/(\d+)/);
-        console.log(this.state)
+        
         if(m!=null && m.length > 1){
             dev = m[1];
         }
@@ -128,8 +162,21 @@ class UnitLeone extends React.Component {
                     <Input label="輸入位址" value={this.state.data.addr} onChange={(e,d) => {this.changeState('addr', d.value)}} />
                 </Form.Field>
                 <Form.Field>
-                    <Input label="輸入數值" value={this.state.data.value} onChange={(e,d) => {this.changeState('value', d.value)}} />
+                    <Input label="輸入數值" 
+                        value={this.state.data.value} 
+                        onChange={(e,d) => {this.changeState('value', d.value)}}
+                        action={{
+                            content:"數值換算",
+                            basic: true,
+                            onClick: ()=>{
+                                this.setState({
+                                    modal: true
+                                })
+                            },
+                            type: 'button'
+                        }} />
                 </Form.Field>
+                {this.renderModal()}
             </div>
         )
     }