1 files changed, 48 insertions, 0 deletions
diff --git a/src/settings/components/form/KeymapsForm.tsx b/src/settings/components/form/KeymapsForm.tsx
new file mode 100644
index 0000000..ad4d0e7
--- /dev/null
+++ b/src/settings/components/form/KeymapsForm.tsx
@@ -0,0 +1,48 @@
+import './KeymapsForm.scss';
+import React from 'react';
+import Input from '../ui/Input';
+import keymaps from '../../keymaps';
+import { FormKeymaps } from '../../../shared/SettingData';
+
+interface Props {
+  value: FormKeymaps;
+  onChange: (e: FormKeymaps) => void;
+  onBlur: () => void;
+}
+
+class KeymapsForm extends React.Component<Props> {
+  public static defaultProps: Props = {
+    value: FormKeymaps.valueOf({}),
+    onChange: () => {},
+    onBlur: () => {},
+  }
+
+  render() {
+    let values = this.props.value.toJSON();
+    return <div className='form-keymaps-form'>
+      {
+        keymaps.fields.map((group, index) => {
+          return <div key={index} className='form-keymaps-form-field-group'>
+            {
+              group.map(([name, label]) => {
+                let value = values[name] || '';
+                return <Input
+                  type='text' id={name} name={name} key={name}
+                  label={label} value={value}
+                  onValueChange={this.bindValue.bind(this)}
+                  onBlur={this.props.onBlur}
+                />;
+              })
+            }
+          </div>;
+        })
+      }
+    </div>;
+  }
+
+  bindValue(name: string, value: string) {
+    this.props.onChange(this.props.value.buildWithOverride(name, value));
+  }
+}
+
+export default KeymapsForm;