+ {
+ KeyMapFields.map((group, index) => {
+ return
+ {
+ group.map((field) => {
+ let name = field[0];
+ let label = field[1];
+ let value = values[name];
+ return ;
+ })
+ }
+
;
+ })
+ }
+
;
+ }
+
+ bindValue(e) {
+ if (!this.props.onChange) {
+ return;
+ }
+
+ let next = Object.assign({}, this.props.value);
+ next[e.target.name] = e.target.value;
+
+ this.props.onChange(next);
+ }
+}
+
+KeymapsForm.AllowdOps = AllowdOps;
+
+export default KeymapsForm;
diff --git a/src/settings/components/form/keymaps-form.scss b/src/settings/components/form/keymaps-form.scss
new file mode 100644
index 0000000..1a4e5cd
--- /dev/null
+++ b/src/settings/components/form/keymaps-form.scss
@@ -0,0 +1,11 @@
+.form-keymaps-form {
+ column-count: 3;
+
+ &-field-group {
+ margin-top: 24px;
+ }
+
+ &-field-group:first-of-type {
+ margin-top: 24px;
+ }
+}
diff --git a/src/settings/components/form/properties-form.jsx b/src/settings/components/form/properties-form.jsx
new file mode 100644
index 0000000..55c8512
--- /dev/null
+++ b/src/settings/components/form/properties-form.jsx
@@ -0,0 +1,60 @@
+import './properties-form.scss';
+import { h, Component } from 'preact';
+
+class PropertiesForm extends Component {
+
+ render() {
+ let types = this.props.types;
+ let value = this.props.value;
+ if (!value) {
+ value = {};
+ }
+
+ return