all files / src/explore/components/ AdhocMetricEditPopoverTitle.jsx

83.33% Statements 25/30
50% Branches 6/12
42.86% Functions 3/7
82.76% Lines 24/29
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80                                                                                                                
import React from 'react';
import PropTypes from 'prop-types';
import { FormControl, OverlayTrigger, Tooltip } from 'react-bootstrap';
import AdhocMetric from '../AdhocMetric';
 
const propTypes = {
  adhocMetric: PropTypes.instanceOf(AdhocMetric),
  onChange: PropTypes.func.isRequired,
};
 
export default class AdhocMetricEditPopoverTitle extends React.Component {
  constructor(props) {
    super(props);
    this.onMouseOver = this.onMouseOver.bind(this);
    this.onMouseOut = this.onMouseOut.bind(this);
    this.onClick = this.onClick.bind(this);
    this.onBlur = this.onBlur.bind(this);
    this.state = {
      isHovered: false,
      isEditable: false,
    };
  }
 
  onMouseOver() {
    this.setState({ isHovered: true });
  }
 
  onMouseOut() {
    this.setState({ isHovered: false });
  }
 
  onClick() {
    this.setState({ isEditable: true });
  }
 
  onBlur() {
    this.setState({ isEditable: false });
  }
 
  refFunc(ref) {
    if (ref) {
      ref.focus();
    }
  }
 
  render() {
    const { adhocMetric, onChange } = this.props;
 
    const editPrompt = <Tooltip id="edit-metric-label-tooltip">Click to edit label</Tooltip>;
 
    return (
      <OverlayTrigger
        placement="top"
        overlay={editPrompt}
        onMouseOver={this.onMouseOver}
        onMouseOut={this.onMouseOut}
        onClick={this.onClick}
        onBlur={this.onBlur}
      >
        {this.state.isEditable ?
          <FormControl
            className="metric-edit-popover-label-input"
            type="text"
            placeholder={adhocMetric.label}
            value={adhocMetric.hasCustomLabel ? adhocMetric.label : ''}
            onChange={onChange}
            inputRef={this.refFunc}
          /> :
          <span>
            {adhocMetric.hasCustomLabel ? adhocMetric.label : 'My Metric'}
            &nbsp;
            <i className="fa fa-pencil" style={{ color: this.state.isHovered ? 'black' : 'grey' }} />
          </span>
        }
      </OverlayTrigger>
    );
  }
}
AdhocMetricEditPopoverTitle.propTypes = propTypes;