src/settings/components/form/KeymapsForm.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

import './KeymapsForm.scss';
import React from 'react';
import Input from '../ui/Input';
import keymaps from '../../keymaps';

class KeymapsForm extends React.Component {

  render() {
    let values = this.props.value;
    if (!values) {
      values = {};
    }
    return <div className='form-keymaps-form'>
      {
        keymaps.fields.map((group, index) => {
          return <div key={index} className='form-keymaps-form-field-group'>
            {
              group.map((field) => {
                let name = field[0];
                let label = field[1];
                let value = values[name];
                return <Input
                  type='text' id={name} name={name} key={name}
                  label={label} value={value}
                  onChange={this.bindValue.bind(this)}
                />;
              })
            }
          </div>;
        })
      }
    </div>;
  }

  bindValue(e) {
    if (!this.props.onChange) {
      return;
    }

    let next = { ...this.props.value };
    next[e.target.name] = e.target.value;

    this.props.onChange(next);
  }
}

export default KeymapsForm;