Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Extracted the logic to update the <ColorSelector> React 'state' with …
…new value for a color component into separate nested function 'updateStateForColor(...)', to DRY out the code.
- Loading branch information
Showing
with
16 additions
and
21 deletions.
-
+16
−21
webpack_in/entry.jsx
|
@@ -303,6 +303,19 @@ class ColorSelector extends React.Component { |
|
|
} |
|
|
|
|
|
render() { |
|
|
const updateStateForColor = (component, value) => { |
|
|
const color = { |
|
|
...this.state.color |
|
|
}; |
|
|
|
|
|
color[component] = value; |
|
|
|
|
|
this.setState({ |
|
|
...this.state, |
|
|
color |
|
|
}); |
|
|
}; |
|
|
|
|
|
const { color } = this.state; |
|
|
|
|
|
const colorOpposite = { |
|
@@ -323,35 +336,17 @@ class ColorSelector extends React.Component { |
|
|
<div style={{ marginTop: '-1em'}}> |
|
|
<ColorComponentEntry label="R" value={ this.state.color.r } onChangeValue={ |
|
|
(value) => { |
|
|
this.setState({ |
|
|
...this.state, |
|
|
color: { |
|
|
...this.state.color, |
|
|
r: value |
|
|
} |
|
|
}); |
|
|
updateStateForColor('r', value); |
|
|
} |
|
|
} /> |
|
|
<ColorComponentEntry label="G" value={ this.state.color.g } onChangeValue={ |
|
|
(value) => { |
|
|
this.setState({ |
|
|
...this.state, |
|
|
color: { |
|
|
...this.state.color, |
|
|
g: value |
|
|
} |
|
|
}); |
|
|
updateStateForColor('g', value); |
|
|
} |
|
|
} /> |
|
|
<ColorComponentEntry label="B" value={ this.state.color.b } onChangeValue={ |
|
|
(value) => { |
|
|
this.setState({ |
|
|
...this.state, |
|
|
color: { |
|
|
...this.state.color, |
|
|
b: value |
|
|
} |
|
|
}); |
|
|
updateStateForColor('b', value); |
|
|
} |
|
|
} /> |
|
|
</div> |
|
|