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.
maratbn · Aug 5, 2018 · e5ddcfe · e5ddcfe
1 parent 2287c16
commit e5ddcfe
Showing 1 changed file with 19 additions and 4 deletions.
diff --git a/webpack_in/entry.jsx b/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>
           );
       }