From 1c5287e106f9a2223f323ca3f16f6e94da984d6f Mon Sep 17 00:00:00 2001
From: Alexander Rose <alex.rose@rcsb.org>
Date: Fri, 5 Oct 2018 17:14:11 -0700
Subject: [PATCH] text param component
---
src/mol-app/component/parameter/text.tsx | 40 ++++++++++++++++++++++++
src/mol-app/component/parameters.tsx | 3 ++
2 files changed, 43 insertions(+)
create mode 100644 src/mol-app/component/parameter/text.tsx
diff --git a/src/mol-app/component/parameter/text.tsx b/src/mol-app/component/parameter/text.tsx
new file mode 100644
index 000000000..cd6ad76f7
--- /dev/null
+++ b/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>;
+ }
+}
\ No newline at end of file
diff --git a/src/mol-app/component/parameters.tsx b/src/mol-app/component/parameters.tsx
index 084fb13df..70e2aee37 100644
--- a/src/mol-app/component/parameters.tsx
+++ b/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 ''
}
--
GitLab