Plato on Github
Report Home
src/components/Event/Tag/TagEditor.js
Maintainability
75.53
Lines of code
152
Difficulty
21.81
Estimated Errors
0.80
Function weight
By Complexity
By SLOC
import React from 'react' import PropTypes from 'prop-types'; import { Grid, Row, Col, FormControl, Popover, OverlayTrigger, Button } from "react-bootstrap" import { GUI_CONFIG } from '../../../config/gui.config'; import { GithubPicker } from 'react-color'; import _ from 'lodash'; /** * React component used to edit or create a tag */ class TagEditor extends React.Component { constructor(props) { super(props); this.state = { tag: this.props.tag || { name: "", description: "", color: GUI_CONFIG().DEFAULT_TAG_COLOR, investigationId: this.props.investigationId }, } this.onChangeComplete = this.onChangeComplete.bind(this); } render() { let tag = this.state.tag; return ( <div style={{ display: 'flex', paddingBottom: '70px' }}> <div style={{ flex: '1 1 10%' }}> </div> <div style={{ flex: '0 0 80%' }}> <h2> Tag edition </h2> <p> Update the tag fields and then save.</p> <br /> <Grid> <Row> <Col xs='2'> Label </Col> <Col xs='10'> <FormControl type='text' value={this.state.tag.name} onChange={(e) => this.onInputChange('name', e)} /> </Col > </Row> <br /> <Row> <Col xs='2'> Description </Col> <Col xs='10'> <FormControl type='text' value={tag.description} onChange={(e) => this.onInputChange('description', e)} /> </Col > </Row> <br /> <Row> <Col xs='2'> Scope </Col> <Col xs='10'> <FormControl componentClass="select" placeholder="select" onChange={(e) => this.onInputChange('scope', e)} > <option value="investigation">investigation</option> {/* <option value="beamline">beamline</option> */} </FormControl> </Col> </Row> <br /> <Row> <Col xs='2'> Color </Col> <Col xs='10'> <OverlayTrigger trigger="click" placement="top" rootClose='true' overlay={PopoverColorPickerBottom(this.onChangeComplete)} > <div style={{ backgroundColor: tag.color || GUI_CONFIG().DEFAULT_TAG_COLOR, width: '30px', height: '30px', marginLeft: '50%', marginRight: '50%' }}> </div> </OverlayTrigger> </Col > </Row> </Grid> <div style={{ float: 'right' }}> <Button bsStyle="primary" style={{ marginRight: '10px' }} onClick={() => this.onSave()}> Save </Button> <Button bsStyle="primary" style={{ marginRight: '10px' }} onClick={() => this.props.showAvailableTags()} > Cancel </Button> </div> </div> <div style={{ flex: '1 1 10%' }}> </div> </div> ) } /** * CallBack function triggered when the user changes the tag field */ onInputChange(changedTagProperty, event) { let value = event.target.value; let tagCopy = this.state.tag; tagCopy[changedTagProperty] = value; this.setState({ tag: tagCopy }) } /* CallBack function triggered when the user selects a new color */ onChangeComplete(color) { let fakeEvent = {}; fakeEvent.target = {}; fakeEvent.target.value = color.hex; this.onInputChange('color', fakeEvent); } onSave() { if (this.props.tag){ this.props.updateTags([this.state.tag]) } else { this.props.createNewTag(this.state.tag) } } } const PopoverColorPickerBottom = (callback) => { return (<Popover id="popover-positioned-bottom" title="Select a color"> <GithubPicker triangle='hide' width="230px" onChangeComplete={callback} /> </Popover> ) }; TagEditor.propTypes = { /** callback function used to show the tag list */ showAvailableTags: PropTypes.func, /* if present, it corresponds to the tag to edit. If absent, it indcates that a tag is being created*/ tag: PropTypes.object } export default TagEditor;