IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

redone state

Browse Source
This commit is contained in:
Peter Holmberg 2018-12-12 11:23:33 +01:00
parent 50cd8d995b
commit 80a2c3b151
1 changed files with 23 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
public/app/plugins/panel/gauge/MappingRow.tsx
View File

@ -10,7 +10,13 @@ interface Props {
} }
interface State { interface State {
mapping: ValueMap | RangeMap; from: string;
id: number;
operator: string;
text: string;
to: string;
type: MappingType;
value: string;
} }
const mappingOptions = [ const mappingOptions = [
@ -23,60 +29,38 @@ export default class MappingRow extends PureComponent<Props, State> {
super(props); super(props);
this.state = { this.state = {
mapping: props.mapping, ...props.mapping,
}; };
} }
onMappingValueChange = event => { onMappingValueChange = event => {
const { mapping } = this.state; this.setState({ value: event.target.value });
const updatedMapping = { ...mapping, value: event.target.value };
this.setState({ mapping: updatedMapping });
}; };
onMappingFromChange = event => { onMappingFromChange = event => {
const { mapping } = this.state; this.setState({ from: event.target.value });
const updatedMapping = { ...mapping, from: event.target.value };
this.setState({ mapping: updatedMapping });
}; };
onMappingToChange = event => { onMappingToChange = event => {
const { mapping } = this.state; this.setState({ to: event.target.value });
const updatedMapping = { ...mapping, to: event.target.value };
this.setState({ mapping: updatedMapping });
}; };
onMappingTextChange = event => { onMappingTextChange = event => {
const { mapping } = this.state; this.setState({ text: event.target.value });
const updatedMapping = { ...mapping, text: event.target.value };
this.setState({ mapping: updatedMapping });
}; };
onMappingTypeChange = mappingType => { onMappingTypeChange = mappingType => {
const { mapping } = this.state; this.setState({ type: mappingType });
const updatedMapping = { ...mapping, type: mappingType };
this.setState({ mapping: updatedMapping });
}; };
updateMapping = () => { updateMapping = () => {
const { mapping } = this.state; this.props.updateMapping({ ...this.state });
this.props.updateMapping(mapping);
}; };
renderRow() { renderRow() {
const { mapping } = this.state; const { from, text, to, type, value } = this.state;
if (mapping.type === MappingType.RangeToText) {
const rangeMap = mapping as RangeMap;
if (type === MappingType.RangeToText) {
return ( return (
<div className="gf-form"> <div className="gf-form">
<div className="gf-form-inline mapping-row-input"> <div className="gf-form-inline mapping-row-input">
@ -84,7 +68,7 @@ export default class MappingRow extends PureComponent<Props, State> {
<div> <div>
<input <input
className="gf-form-input" className="gf-form-input"
value={rangeMap.from} value={from}
onBlur={this.updateMapping} onBlur={this.updateMapping}
onChange={this.onMappingFromChange} onChange={this.onMappingFromChange}
/> />
@ -95,7 +79,7 @@ export default class MappingRow extends PureComponent<Props, State> {
<div> <div>
<input <input
className="gf-form-input" className="gf-form-input"
value={rangeMap.to} value={to}
onBlur={this.updateMapping} onBlur={this.updateMapping}
onChange={this.onMappingToChange} onChange={this.onMappingToChange}
/> />
@ -106,7 +90,7 @@ export default class MappingRow extends PureComponent<Props, State> {
<div> <div>
<input <input
className="gf-form-input" className="gf-form-input"
value={rangeMap.text} value={text}
onBlur={this.updateMapping} onBlur={this.updateMapping}
onChange={this.onMappingTextChange} onChange={this.onMappingTextChange}
/> />
@ -116,8 +100,6 @@ export default class MappingRow extends PureComponent<Props, State> {
); );
} }
const valueMap = mapping as ValueMap;
return ( return (
<div className="gf-form"> <div className="gf-form">
<div className="gf-form-inline mapping-row-input"> <div className="gf-form-inline mapping-row-input">
@ -127,7 +109,7 @@ export default class MappingRow extends PureComponent<Props, State> {
className="gf-form-input" className="gf-form-input"
onBlur={this.updateMapping} onBlur={this.updateMapping}
onChange={this.onMappingValueChange} onChange={this.onMappingValueChange}
value={valueMap.value} value={value}
/> />
</div> </div>
</div> </div>
@ -137,7 +119,7 @@ export default class MappingRow extends PureComponent<Props, State> {
<input <input
className="gf-form-input" className="gf-form-input"
onBlur={this.updateMapping} onBlur={this.updateMapping}
value={valueMap.text} value={text}
onChange={this.onMappingTextChange} onChange={this.onMappingTextChange}
/> />
</div> </div>
@ -147,7 +129,7 @@ export default class MappingRow extends PureComponent<Props, State> {
} }
render() { render() {
const { mapping } = this.state; const { type } = this.state;
return ( return (
<div className="mapping-row"> <div className="mapping-row">
@ -156,7 +138,7 @@ export default class MappingRow extends PureComponent<Props, State> {
<SimplePicker <SimplePicker
placeholder="Choose type" placeholder="Choose type"
options={mappingOptions} options={mappingOptions}
value={mappingOptions.find(o => o.value === mapping.type)} value={mappingOptions.find(o => o.value === type)}
getOptionLabel={i => i.label} getOptionLabel={i => i.label}
getOptionValue={i => i.value} getOptionValue={i => i.value}
onSelected={type => this.onMappingTypeChange(type.value)} onSelected={type => this.onMappingTypeChange(type.value)}