Extracted base logic for the counter <button>s into new widget <Butto…

…nForCounter>, so that the logic for future new functionality for all instances would be DRY.

webpack_in/entry.jsx

@@ -232,6 +232,19 @@ class ListWidget extends React.Component {
      }
}

class ButtonForCounter extends React.Component {
  render() {
      return (<button onClick={ () => {
                          this.props.onCount();
                        }}>{ this.props.caption }</button>);
    }
}

ButtonForCounter.propTypes = {
    caption:                    PropTypes.string.isRequired,
    onCount:                    PropTypes.func.isRequired
  };

class ColorComponentEntry extends React.Component {
    render() {
        return (
@@ -276,24 +289,26 @@ class ColorComponentEntry extends React.Component {

                          this.props.onChangeValue(convertValue(strValueEntered));
                        }} />
              <button onClick={ () => {
              <ButtonForCounter caption="&#9650;"
                                onCount={ () => {
                                    const valueNew = this.props.value + 1;

                                    if (valueNew > 255) {
                                        return;
                                    }

                                    this.props.onChangeValue(valueNew);
                                  }}>&#9650;</button>
              <button onClick={ () => {
                                  }} />
              <ButtonForCounter caption="&#9660;"
                                onCount={ () => {
                                    const valueNew = this.props.value - 1;

                                    if (valueNew < 0) {
                                        return;
                                    }

                                    this.props.onChangeValue(valueNew);
                                  }}>&#9660;</button>
                                  }} />
            </div>
          );
      }