Merge pull request #1 from sevos/configurable_input_type

Allow input type override
jsillitoe · Nov 29, 2016 · f7f41d2 · f7f41d2
2 parents 68c4947 + a541abc
commit f7f41d2
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -100,5 +100,6 @@ All other attributes are applied to the input element.  For example, you can int
 | precision         | 2             | Number of digits after the decimal separator |
 | decimalSeparator  | '.'           | The decimal separator |
 | thousandSeparator | ','           | The thousand separator |
+| inputType         | "text"        | Input field tag type. You may want to use `number` or `tel` |
 
 
diff --git a/src/index.js b/src/index.js
@@ -18,7 +18,8 @@ const CurrencyInput = React.createClass({
         value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
         decimalSeparator: PropTypes.string,
         thousandSeparator: PropTypes.string,
-        precision: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+        precision: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+        inputType: PropTypes.string
     },
 
 
@@ -36,7 +37,8 @@ const CurrencyInput = React.createClass({
             value: "0",
             decimalSeparator: ".",
             thousandSeparator: ",",
-            precision: "2"
+            precision: "2",
+            inputType: "text"
         }
     },
 
@@ -55,6 +57,7 @@ const CurrencyInput = React.createClass({
         delete customProps.decimalSeparator;
         delete customProps.thousandSeparator;
         delete customProps.precision;
+        delete customProps.inputType;
         return {
             maskedValue: mask(this.props.value, this.props.precision, this.props.decimalSeparator, this.props.thousandSeparator),
             customProps: customProps
@@ -76,6 +79,7 @@ const CurrencyInput = React.createClass({
         delete customProps.decimalSeparator;
         delete customProps.thousandSeparator;
         delete customProps.precision;
+        delete customProps.inputType;
         this.setState({
             maskedValue: mask(nextProps.value, nextProps.precision, nextProps.decimalSeparator, nextProps.thousandSeparator),
             customProps: customProps
@@ -112,7 +116,7 @@ const CurrencyInput = React.createClass({
     render() {
         return (
             <input
-                type="text"
+                type={this.props.inputType}
                 value={this.state.maskedValue}
                 onChange={this.handleChange}
                 {...this.state.customProps}

diff --git a/test/index.spec.js b/test/index.spec.js
@@ -39,12 +39,11 @@ describe('react-currency-input', function(){
 
     });
 
-
     describe('custom arguments', function(){
 
         before('render and locate element', function() {
             this.renderedComponent = ReactTestUtils.renderIntoDocument(
-                <CurrencyInput decimalSeparator="," thousandSeparator="." precision="3" value="123456789"/>
+                <CurrencyInput decimalSeparator="," thousandSeparator="." precision="3" value="123456789" inputType="tel" />
             );
 
             this.inputComponent = ReactTestUtils.findRenderedDOMComponentWithTag(
@@ -57,6 +56,9 @@ describe('react-currency-input', function(){
             expect(this.renderedComponent.getMaskedValue()).to.equal('123.456,789')
         });
 
+        it('<input> should be of type "tel"', function() {
+            expect(this.inputComponent.getAttribute('type')).to.equal('tel')
+        });
     });