diff --git a/README.md b/README.md index 0c498cf6..08a796e5 100644 --- a/README.md +++ b/README.md @@ -205,6 +205,12 @@ online example: http://react-component.github.io/input-number/examples/ Specifies a regex pattern to be added to the input number element - useful for forcing iOS to open the number pad instead of the normal keyboard (supply a regex of "\d*" to do this) or form validation + + inputClassName + string + + Specifies the custom className for input element + diff --git a/src/index.js b/src/index.js index 8025f275..65bd805b 100644 --- a/src/index.js +++ b/src/index.js @@ -69,6 +69,7 @@ export default class InputNumber extends React.Component { precision: PropTypes.number, required: PropTypes.bool, pattern: PropTypes.string, + inputClassName: PropTypes.string, } static defaultProps = { @@ -447,6 +448,9 @@ export default class InputNumber extends React.Component { [`${prefixCls}-disabled`]: disabled, [`${prefixCls}-focused`]: this.state.focused, }); + const inputClasses = classNames(`${prefixCls}-input`, { + [props.inputClassName]: !!props.inputClassName, + }); let upDisabledClass = ''; let downDisabledClass = ''; const { value } = this.state; @@ -564,7 +568,7 @@ export default class InputNumber extends React.Component { type={props.type} placeholder={props.placeholder} onClick={props.onClick} - className={`${prefixCls}-input`} + className={inputClasses} tabIndex={props.tabIndex} autoComplete="off" onFocus={this.onFocus} diff --git a/tests/index.js b/tests/index.js index 17bdc5d5..83bdaf74 100644 --- a/tests/index.js +++ b/tests/index.js @@ -1123,6 +1123,18 @@ describe('inputNumber', () => { expect(inputElement.value).to.be('$ 6 boeing 737'); }); }); + + describe('inputClassName prop', () => { + it(`should render with a custom className for input if it is supplied`, () => { + ReactDOM.render( + , + container + ); + expect(container + .querySelector('#pattern-input-test') + .className.indexOf('custom-class') > 0).to.be(true); + }); + }); }); describe('Mobile inputNumber use TouchEvents', () => {