Plato on Github
Report Home
src/components/Event/Tag/TagViewer.js
Maintainability
54.17
Lines of code
125
Difficulty
21.00
Estimated Errors
0.69
Function weight
By Complexity
By SLOC
import React from 'react' import PropTypes from 'prop-types'; import { Label, Glyphicon } from 'react-bootstrap'; import { Row, Col, Button } from "react-bootstrap" import { TAG_MANAGER_CONTEXT, BASIC_EVENT_CONTEXT, DETAILED_EVENT_CONTEXT } from '../../../constants/EventTypes'; class TagViewer extends React.Component { render() { let { context, tag } = this.props; if (context === DETAILED_EVENT_CONTEXT) { return (<div style={{ marginRight: '4px', }}> <Label style={{ backgroundColor: tag.color, borderTopLeftRadius: '10px', borderTopRightRadius: '0px', borderBottomRightRadius: '0px', borderBottomLeftRadius: '10px', display: 'inline-block', marginBottom: '2px' }}> {tag.name} </Label> <Label style={{ backgroundColor: '#777777', borderTopLeftRadius: '0px', borderTopRightRadius: '10px', borderBottomRightRadius: '10px', borderBottomLeftRadius: '0px', display: 'inline-block', marginBottom: '2px', paddingLeft: '0px', paddingRight: '1px' }}> <Glyphicon glyph="remove" bsSize="xsmall" style={{ backgroundColor: '#777777', color: '#FFFFFF', verticalAlign: 'bottom' }} onClick={() => this.props.removeTag(tag)} /> </Label> </div>) } else if (context === TAG_MANAGER_CONTEXT) { let { editTag } = this.props; //set the tag scope let tagScope = null; if (tag.investigationId) { tagScope = <span style={{ padding: '5px', backgroundColor: '#f2f2f2' }}> proposal </span> } else if (tag.beamlineName) { tagScope = <span style={{ padding: '5px', backgroundColor: '#f2f2f2' }}> beamline </span> } return ( <div> <Row> <div style={{ alignItems: 'center' }}> <Col xs={12} sm={2} style={{ textAlign: 'center' }}> <Label style={{ backgroundColor: tag.color, borderRadius: '10px', display: 'inline-block', paddingBottom: '5px', fontSize: '14px' }}> {tag.name} </Label> </Col> <Col xs={12} sm={6} style={{alignItems: 'stretch', }}> {tag.description ? <span> {tag.description} </span> : <span style={{ color: 'gray', fontStyle: 'italic' }}> No description yet</span>} </Col> <Col xs={12} sm={3}> {tagScope} </Col> <Col xs={12} sm={1}> <Button bsStyle="primary" bsSize="small" onClick={() => editTag(tag)}>Edit</Button> </Col> </div> </Row> <hr /> </div> ) } else if (context === BASIC_EVENT_CONTEXT) { return ( <Label style={{ backgroundColor: tag.color, borderTopLeftRadius: '10px', borderTopRightRadius: '10px', borderBottomRightRadius: '10px', borderBottomLeftRadius: '10px', display: 'inline-block', marginRight: '5px' }}> {tag.name} </Label>) } } } TagViewer.propTypes = { /* the context the tag is rendered */ context: PropTypes.string.isRequired, /* callback function which show that page to edit the tag */ editTag: PropTypes.func, /* the tag to render */ tag: PropTypes.object.isRequired, /* Callback function used to remove a tag from the selection. Used in EVENT context only */ removeTag: PropTypes.func } export default TagViewer;