1
0
mirror of https://github.com/haiwen/seahub.git synced 2025-10-22 03:16:34 +00:00
Files
seahub/frontend/src/pages/data-grid/new-column-dialog.js
2019-04-29 14:15:28 +08:00

77 lines
2.2 KiB
JavaScript

import React from 'react';
import PropTypes from 'prop-types';
import { Modal, ModalHeader, ModalBody, ModalFooter, Form, FormGroup, Label, Input, Alert, Button } from 'reactstrap';
import { gettext } from '../../utils/constants';
const propTypes = {
onNewColumnCancel: PropTypes.func,
onNewColumn: PropTypes.func,
};
class NewCoumnDialog extends React.Component {
constructor(props) {
super(props);
this.state = {
columnType: 'text',
columnName: '',
errMessage: '',
};
}
handleChange = (event) => {
let value = event.target.value.trim();
this.setState({columnName: value});
}
onSelectChange = (event) => {
let type = event.target.value;
this.setState({columnType: type});
}
toggle = () => {
this.props.onNewColumnCancel();
}
handleSubmit = () => {
let { columnName, columnType } = this.state;
if (!columnName) {
this.setState({errMessage: gettext('Name is required.')});
return;
}
this.props.onNewColumn(columnName, columnType);
}
render() {
return (
<Modal isOpen={true} toggle={this.toggle}>
<ModalHeader>New Column</ModalHeader>
<ModalBody>
<Form>
<FormGroup>
<Label for="columnName">Name</Label>
<Input id="columnName" value={this.state.columnName} innerRef={input => {this.newInput = input;}} onChange={this.handleChange} />
</FormGroup>
<FormGroup>
<Label for="typeSelect">Type</Label>
<Input id="typeSelect" type='select' name="select" onChange={this.onSelectChange}>
<option vlaue="text">text</option>
<option value="number">number</option>
</Input>
</FormGroup>
</Form>
{this.state.errMessage && <Alert color="danger" className="mt-2">{this.state.errMessage}</Alert>}
</ModalBody>
<ModalFooter>
<Button color="secondary" onClick={this.toggle}>{gettext('Cancel')}</Button>
<Button color="primary" onClick={this.handleSubmit}>{gettext('Submit')}</Button>
</ModalFooter>
</Modal>
);
}
}
NewCoumnDialog.propTypes = propTypes;
export default NewCoumnDialog;