Skip to content

Commit e5ddcfe

Browse files
committed
Extracted base logic for the counter <button>s into new widget <ButtonForCounter>, so that the logic for future new functionality for all instances would be DRY.
1 parent 2287c16 commit e5ddcfe

File tree

1 file changed

+19
-4
lines changed

1 file changed

+19
-4
lines changed

webpack_in/entry.jsx

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -232,6 +232,19 @@ class ListWidget extends React.Component {
232232
}
233233
}
234234

235+
class ButtonForCounter extends React.Component {
236+
render() {
237+
return (<button onClick={ () => {
238+
this.props.onCount();
239+
}}>{ this.props.caption }</button>);
240+
}
241+
}
242+
243+
ButtonForCounter.propTypes = {
244+
caption: PropTypes.string.isRequired,
245+
onCount: PropTypes.func.isRequired
246+
};
247+
235248
class ColorComponentEntry extends React.Component {
236249
render() {
237250
return (
@@ -276,24 +289,26 @@ class ColorComponentEntry extends React.Component {
276289

277290
this.props.onChangeValue(convertValue(strValueEntered));
278291
}} />
279-
<button onClick={ () => {
292+
<ButtonForCounter caption="&#9650;"
293+
onCount={ () => {
280294
const valueNew = this.props.value + 1;
281295

282296
if (valueNew > 255) {
283297
return;
284298
}
285299

286300
this.props.onChangeValue(valueNew);
287-
}}>&#9650;</button>
288-
<button onClick={ () => {
301+
}} />
302+
<ButtonForCounter caption="&#9660;"
303+
onCount={ () => {
289304
const valueNew = this.props.value - 1;
290305

291306
if (valueNew < 0) {
292307
return;
293308
}
294309

295310
this.props.onChangeValue(valueNew);
296-
}}>&#9660;</button>
311+
}} />
297312
</div>
298313
);
299314
}

0 commit comments

Comments
 (0)