webio-node/src/components/AdminPage/Modbus/ModbusModal.js

49 lines
1.3 KiB
JavaScript

import React from 'react';
import {Modal, Form, Input, Grid, Button} from 'semantic-ui-react';
const ModbusModal = ({i18n, open, type, data, onSubmit, onClose}) => {
if(!i18n || Object.keys(i18n).length == 0) return null;
return (
<Modal open={open}>
<Modal.Header content={type == 1 ? '修改裝置' : '新增裝置'} />
<Modal.Content>
<Form onSubmit={(e, d) => {
e.preventDefault();
onSubmit(type, d.formData);
}} serializer={e => {
let json = {
name: '',
node: '',
id: data.uid || '',
original_node: data.node || ''
};
let n = e.querySelector('input[name="name"]');
if(n && 'value' in n) json.name = n.value;
let nn = e.querySelector('input[name="node"]');
if(nn && 'value' in nn) json.node = nn.value;
return json ;
}}>
<Form.Field>
<Input name="name" defaultValue={data.name || ''} label="Name"/>
</Form.Field>
<Form.Field>
<Input name="node" defaultValue={data.node || ''} label="Node"/>
</Form.Field>
<Grid columns={2}>
<Grid.Column>
<Button content="Submit" fluid type="submit" />
</Grid.Column>
<Grid.Column>
<Button content="Cancel" fluid type="button" onClick={()=>{onClose()}} />
</Grid.Column>
</Grid>
</Form>
</Modal.Content>
</Modal>
)
}
export default ModbusModal;