All files / report/components/EditTitle index.jsx

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
 
 
 
 
 
2x
 
 
 
 
2x
 
 
 
 
 
 
 
 
 
 
 
 
 
3x
 
3x
 
 
 
 
 
1x
 
 
 
1x
 
 
 
3x
 
 
 
 
 
6x
 
 
 
 
 
 
 
 
 
 
 
 
 
2x
 
 
 
 
 
 
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { fontFamily } from '@bufferapp/components/style/font';
import styled from 'styled-components';
 
const Form = styled.form`
  margin: 0;
  padding: 0;
`;
 
const Input = styled.input`
  color: #000000;
  font-size: 2rem;
  font-weight: 600;
  font-family: ${fontFamily};
  margin: 0 0 .5rem;
  border: none;
  padding: 0;
  display: block;
  width: 100%;
`;
 
class EditTitle extends Component {
  constructor(props) {
    super(props);
 
    this.state = {
      name: props.name,
    };
  }
 
  handleBlur = () => {
    this.props.saveChanges(this.state.name);
  }
 
  handleSubmit = () => {
    this.props.saveChanges(this.state.name);
  }
 
  handleChange = (e) => {
    this.setState({
      name: e.target.value,
    });
  }
 
  render() {
    return (
      <Form onSubmit={this.handleSubmit}>
        <Input
          innerRef={(input) => { this.input = input; }}
          value={this.state.name}
          onChange={this.handleChange}
          onBlur={this.handleBlur}
          autoFocus
        />
      </Form>
    );
  }
}
 
EditTitle.propTypes = {
  name: PropTypes.string.isRequired,
  saveChanges: PropTypes.func.isRequired,
};
 
export default EditTitle;