From 61f613586ccde7a4832ffb0e675875dbfc221a1f Mon Sep 17 00:00:00 2001
From: Alexander Rose <alex.rose@rcsb.org>
Date: Tue, 27 Nov 2018 18:52:45 -0800
Subject: [PATCH] allow numbers as values for select param
---
src/mol-plugin/ui/controls/parameters.tsx | 18 ++++++++++++------
src/mol-util/param-definition.ts | 4 ++--
2 files changed, 14 insertions(+), 8 deletions(-)
diff --git a/src/mol-plugin/ui/controls/parameters.tsx b/src/mol-plugin/ui/controls/parameters.tsx
index 3d5fda213..b688506b0 100644
--- a/src/mol-plugin/ui/controls/parameters.tsx
+++ b/src/mol-plugin/ui/controls/parameters.tsx
@@ -99,7 +99,7 @@ export class BoolControl extends SimpleParam<PD.Boolean> {
}
export class LineGraphControl extends React.PureComponent<ParamProps<PD.LineGraph>, { isExpanded: boolean, isOverPoint: boolean, message: string }> {
- state = {
+ state = {
isExpanded: false,
isOverPoint: false,
message: `${this.props.param.defaultValue.length} points`,
@@ -107,7 +107,7 @@ export class LineGraphControl extends React.PureComponent<ParamProps<PD.LineGrap
onHover = (point?: Vec2) => {
this.setState({isOverPoint: !this.state.isOverPoint});
- if(point){
+ if (point) {
this.setState({message: `(${point[0].toFixed(2)}, ${point[1].toFixed(2)})`});
return;
}
@@ -140,8 +140,8 @@ export class LineGraphControl extends React.PureComponent<ParamProps<PD.LineGrap
</div>
<div className='msp-control-offset' style={{ display: this.state.isExpanded ? 'block' : 'none' }}>
<LineGraphComponent
- data={this.props.param.defaultValue}
- onChange={this.onChange}
+ data={this.props.param.defaultValue}
+ onChange={this.onChange}
onHover={this.onHover}
onDrag={this.onDrag}/>
</div>
@@ -193,8 +193,14 @@ export class TextControl extends SimpleParam<PD.Text> {
}
}
-export class SelectControl extends SimpleParam<PD.Select<any>> {
- onChange = (e: React.ChangeEvent<HTMLSelectElement>) => { this.update(e.target.value); }
+export class SelectControl extends SimpleParam<PD.Select<string | number>> {
+ onChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+ if (typeof this.props.param.defaultValue === 'number') {
+ this.update(parseInt(e.target.value, 10));
+ } else {
+ this.update(e.target.value);
+ }
+ }
renderControl() {
return <select value={this.props.value || ''} onChange={this.onChange} disabled={this.props.isDisabled}>
{this.props.param.options.map(([value, label]) => <option key={value} value={value}>{label}</option>)}
diff --git a/src/mol-util/param-definition.ts b/src/mol-util/param-definition.ts
index b618052cf..f8c06ec58 100644
--- a/src/mol-util/param-definition.ts
+++ b/src/mol-util/param-definition.ts
@@ -42,12 +42,12 @@ export namespace ParamDefinition {
return setInfo<Value<T>>({ type: 'value', defaultValue }, info);
}
- export interface Select<T extends string> extends Base<T> {
+ export interface Select<T extends string | number> extends Base<T> {
type: 'select'
/** array of (value, label) tuples */
options: [T, string][]
}
- export function Select<T extends string>(defaultValue: T, options: [T, string][], info?: Info): Select<T> {
+ export function Select<T extends string | number>(defaultValue: T, options: [T, string][], info?: Info): Select<T> {
return setInfo<Select<T>>({ type: 'select', defaultValue, options }, info)
}
--
GitLab