Permalink
Browse files

Extracted the logic for rendering color component label and text fiel…

…d into a new widget <ColorComponentEntry> to DRY out the code.
  • Loading branch information...
maratbn committed Jul 1, 2018
1 parent 2c4292a commit b0c49bf380d16c35cee474593052ca7e5e10e61c
Showing with 20 additions and 18 deletions.
  1. +20 −18 webpack_in/entry.jsx
@@ -232,6 +232,23 @@ class ListWidget extends React.Component {
}
}
class ColorComponentEntry extends React.Component {
render() {
return (
<div style={{ display: 'inline-block', margin: '1em' }}>
{ this.props.label }: <input type='text'
size='4'
maxLength='4'
style={{ textAlign: 'center' }} />
</div>
);
}
}
ColorComponentEntry.propTypes = {
label: PropTypes.string.isRequired
};
class ColorSelector extends React.Component {
render() {
return (
@@ -241,24 +258,9 @@ class ColorSelector extends React.Component {
height: '3em',
border: 'solid 2px black' }} />
<div style={{ marginTop: '-1em'}}>
<div style={{ display: 'inline-block', margin: '1em' }}>
R: <input type='text'
size='4'
maxLength='4'
style={{ textAlign: 'center' }} />
</div>
<div style={{ display: 'inline-block', margin: '1em' }}>
G: <input type='text'
size='4'
maxLength='4'
style={{ textAlign: 'center' }} />
</div>
<div style={{ display: 'inline-block', margin: '1em' }}>
B: <input type='text'
size='4'
maxLength='4'
style={{ textAlign: 'center' }} />
</div>
<ColorComponentEntry label="R" />
<ColorComponentEntry label="G" />
<ColorComponentEntry label="B" />
</div>
</div>
);

0 comments on commit b0c49bf

Please sign in to comment.