git ssb

1
import { Component } from 'react';
2
import Plainbudget from 'plainbudget';
3
4
import Textarea from '../components/textarea';
5
import Button from '../components/button';
6
7
export default class Index extends Component {
8
  static getInitialProps (ctx) {
9
    return { isMobile: ctx.isMobile };
10
  }
11
12
  constructor (props) {
13
    super(props);
14
15
    this.compute = this.compute.bind(this);
16
17
    this.onTextareaKeyDown = this.onTextareaKeyDown.bind(this);
18
    this.onTextareaChange = this.onTextareaChange.bind(this);
19
    this.onComputeClick = this.onComputeClick.bind(this);
20
  }
21
22
  state = {
23
    value: ''
24
  }
25
26
  compute () {
27
    const { value } = this.state;
28
    const calculated = Plainbudget.computeSheet(value);
29
30
    return this.setState({
31
      value: calculated
32
    });
33
  }
34
35
  onTextareaKeyDown (event) {
36
    if ((event.metaKey || event.ctrlKey) && event.keyCode === 13) {
37
      this.compute();
38
    }
39
  }
40
41
  onTextareaChange (value) {
42
    return this.setState({ value });
43
  }
44
45
  onComputeClick (event) {
46
    event.preventDefault();
47
48
    this.compute();
49
  }
50
51
  render () {
52
    const { isMobile } = this.props;
53
    const { value } = this.state;
54
55
    return (
56
      <div className="container">
57
        <Textarea value={ value }
58
          onKeyDown={ this.onTextareaKeyDown }
59
          onChange={ this.onTextareaChange } />
60
        {
61
          isMobile && (
62
            <Button onClick={ this.onComputeClick }>
63
              Compute
64
            </Button>
65
          )
66
        }
67
68
        <style jsx global>{`
69
          .container {
70
            display: flex;
71
            flex: 1;
72
            flex-direction: column;
73
            height: 100vh;
74
          }
75
76
          textarea,
77
          button {
78
            outline: none;
79
          }
80
81
          textarea {
82
            background: #f6f6f6;
83
            border: none;
84
            flex: 1;
85
            font-family: Fira Mono, monospace;
86
            font-size: 17px;
87
            margin: 0;
88
            padding: 20px;
89
            padding-left: 100px;
90
            resize: none;
91
          }
92
93
          button {
94
            font-size: 16px;
95
            height: 45px;
96
            margin: 12px;
97
            text-transform: uppercase;
98
            transition: background .2s;
99
          }
100
101
          button:hover {
102
            background: #2E7D32;
103
          }
104
105
          @media (max-width: 680px) {
106
            textarea {
107
              padding-left: 40px;
108
            }
109
          }
110
        `}</style>
111
      </div>
112
    );
113
  }
114
}