text param component

src/mol-app/component/parameter/text.tsx

@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import * as React from 'react'
+import { TextParam } from 'mol-view/parameter';
+
+export interface TextParamComponentProps {
+    param: TextParam
+    value: string
+    onChange(v: string): void
+}
+
+export interface TextParamComponentState {
+    value: string
+}
+
+export class TextParamComponent extends React.Component<TextParamComponentProps, TextParamComponentState> {
+    state = {
+        value: this.props.value
+    }
+
+    onChange(value: string) {
+        this.setState({ value })
+        this.props.onChange(value)
+    }
+
+    render() {
+        return <div>
+            <span>{this.props.param.label} </span>
+            <input type='text'
+                value={this.state.value}
+                onChange={e => this.onChange(e.currentTarget.value)}
+            >
+            </input>
+        </div>;
+    }
+}

src/mol-app/component/parameters.tsx

@@ -11,6 +11,7 @@ import { NumberParamComponent } from './parameter/number';
 import { RangeParamComponent } from './parameter/range';
 import { SelectParamComponent } from './parameter/select';
 import { MultiSelectParamComponent } from './parameter/multi-select';
+import { TextParamComponent } from './parameter/text';
 
 interface ParametersProps<P extends Params> {
     params: P
@@ -32,6 +33,8 @@ function getParamComponent<P extends Param>(p: Param, value: P['defaultValue'],
             return <SelectParamComponent param={p} value={value} onChange={onChange} />
         case 'multi-select':
             return <MultiSelectParamComponent param={p} value={value} onChange={onChange} />
+        case 'text':
+            return <TextParamComponent param={p} value={value} onChange={onChange} />
     }
     return ''
 }