Merge branch 'feature/amount-control_on-input'

Author: michael-braun

examples/react-chayns-amountcontrol/Example.jsx

@@ -139,6 +139,13 @@ export default class Example extends React.Component {
                         shopStyle
                     />
                 </div>
+
+                <AmountControl
+                    amount={amount}
+                    onInput={this.onChange}
+                    buttonText="0,10"
+                    showInput={amount > 0}
+                />
             </ExampleContainer>
         );
     }

src/react-chayns-amountcontrol/README.md

@@ -39,6 +39,7 @@ You can set the following props on a AmountControl element:
 | amount        | The current amount (behaves like value, not like defaultValue)                          | number   | 0       |
 | className     | The css class of the AmountControl-wrapper                                              | string   |         |
 | onChange      | Function that is called when the user changes the amount                                | function |         |
+| onInput       | Function that is called directly when the user changes the amount                       | function |         |
 | onAdd         | Function that is called when the user click on the add button                           | function |         |
 | onRemove      | Function that is called when the user click on the remove button                        | function |         |
 | equalize      | Equalizes a set of AmountControls (see examples)                                        | string   |         |

src/react-chayns-amountcontrol/component/AmountControl.jsx

@@ -10,6 +10,7 @@ export default class AmountControl extends React.Component {
         buttonText: PropTypes.string.isRequired,
         amount: PropTypes.number,
         onChange: PropTypes.func,
+        onInput: PropTypes.func,
         onAdd: PropTypes.func,
         onRemove: PropTypes.func,
         equalize: PropTypes.string,
@@ -27,6 +28,7 @@ export default class AmountControl extends React.Component {
     static defaultProps = {
         amount: 0,
         onChange: null,
+        onInput: null,
         onAdd: null,
         onRemove: null,
         equalize: null,
@@ -59,6 +61,12 @@ export default class AmountControl extends React.Component {
         this.setState({
             tempValue: value
         });
+
+        const { onInput } = this.props;
+
+        if(onInput && (value || value === 0)) {
+            onInput(value);
+        }
     };
 
     getRemoveIcon() {
@@ -99,11 +107,15 @@ export default class AmountControl extends React.Component {
     };
 
     changeAmount = (amount) => {
-        const { onChange } = this.props;
+        const { onChange, onInput } = this.props;
 
         if(onChange) {
             onChange(amount);
         }
+
+        if(onInput) {
+            onInput(amount);
+        }
     };
 
     render() {