all files / src/components/ EditableTitle.jsx

88.37% Statements 38/43
70.83% Branches 17/24
71.43% Functions 5/7
88.37% Lines 38/43
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 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121                                                                                                                     14×                     14×   14×                   14×          
import React from 'react';
import PropTypes from 'prop-types';
import TooltipWrapper from './TooltipWrapper';
import { t } from '../locales';
 
const propTypes = {
  title: PropTypes.string,
  canEdit: PropTypes.bool,
  onSaveTitle: PropTypes.func,
  noPermitTooltip: PropTypes.string,
  showTooltip: PropTypes.bool,
};
const defaultProps = {
  title: t('Title'),
  canEdit: false,
  showTooltip: true,
};
 
class EditableTitle extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      isEditing: false,
      title: this.props.title,
      lastTitle: this.props.title,
    };
    this.handleClick = this.handleClick.bind(this);
    this.handleBlur = this.handleBlur.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.handleKeyPress = this.handleKeyPress.bind(this);
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps.title !== this.state.title) {
      this.setState({
        lastTitle: this.state.title,
        title: nextProps.title,
      });
    }
  }
  handleClick() {
    if (!this.props.canEdit) {
      return;
    }
 
    this.setState({
      isEditing: true,
    });
  }
  handleBlur() {
    if (I!this.props.canEdit) {
      return;
    }
 
    this.setState({
      isEditing: false,
    });
 
    if (!this.state.title.length) {
      this.setState({
        title: this.state.lastTitle,
      });
 
      return;
    }
 
    if (this.state.lastTitle !== this.state.title) {
      this.setState({
        lastTitle: this.state.title,
      });
      this.props.onSaveTitle(this.state.title);
    }
  }
  handleChange(ev) {
    if (!this.props.canEdit) {
      return;
    }
 
    this.setState({
      title: ev.target.value,
    });
  }
  handleKeyPress(ev) {
    if (ev.key === 'Enter') {
      ev.preventDefault();
 
      this.handleBlur();
    }
  }
  render() {
    let input = (
      <input
        required
        type={this.state.isEditing ? 'text' : 'button'}
        value={this.state.title}
        onChange={this.handleChange}
        onBlur={this.handleBlur}
        onClick={this.handleClick}
        onKeyPress={this.handleKeyPress}
      />
    );
    if (Ethis.props.showTooltip) {
      input = (
        <TooltipWrapper
          label="title"
          tooltip={this.props.canEdit ? t('click to edit title') :
              this.props.noPermitTooltip || t('You don\'t have the rights to alter this title.')}
        >
          {input}
        </TooltipWrapper>
      );
    }
    return (
      <span className="editable-title">{input}</span>
    );
  }
}
EditableTitle.propTypes = propTypes;
EditableTitle.defaultProps = defaultProps;
 
export default EditableTitle;