Skip to content

Commit

Permalink
Extracted the logic for rendering color component label and text fiel…
Browse files Browse the repository at this point in the history
…d into a new widget <ColorComponentEntry> to DRY out the code.
  • Loading branch information
maratbn committed Aug 5, 2018
1 parent 2c4292a commit b0c49bf
Showing 1 changed file with 20 additions and 18 deletions.
38 changes: 20 additions & 18 deletions webpack_in/entry.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand All @@ -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>
);
Expand Down

0 comments on commit b0c49bf

Please sign in to comment.