diff --git a/src/mol-app/component/parameter/text.tsx b/src/mol-app/component/parameter/text.tsx new file mode 100644 index 0000000000000000000000000000000000000000..cd6ad76f78ecfab597df5bc17ae99f5ace5c3742 --- /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 084fb13df72dcfe9b3e306af17a795225850d105..70e2aee371658e3c1696908ffd50e419b948c6a8 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 '' }