feat: support multiple classes in prefixCls prop

examples/multiple-classes.html

@@ -0,0 +1 @@
+placeholder

examples/multiple-classes.js

@@ -0,0 +1,30 @@
+/* eslint no-console:0 */
+import 'rc-input-number/assets/index.less';
+import InputNumber from 'rc-input-number';
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+class Component extends React.Component {
+  state = {
+    value: 5,
+  };
+  onChange = (value) => {
+    console.log('onChange:', value);
+    this.setState({ value });
+  }
+  render() {
+    return (
+      <div style={{ margin: 10 }}>
+        <InputNumber
+          prefixCls="custom-prefix rc-input-number"
+          style={{ width: 100 }}
+          defaultValue={1}
+          onChange={this.onChange}
+          precision={2}
+        />
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(<Component/>, document.getElementById('__react-content'));

src/InputHandler.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Touchable from 'rmc-feedback';
+import { getClassString } from './helpers';
 
 class InputHandler extends Component {
   render() {
@@ -10,7 +11,7 @@ class InputHandler extends Component {
     return (
       <Touchable
         disabled={disabled}
-        activeClassName={`${prefixCls}-handler-active`}
+        activeClassName={getClassString(prefixCls, '-handler-active')}
       >
         <span {...otherProps} />
       </Touchable>

src/helpers.js

@@ -0,0 +1,6 @@
+export const getClasses = (prefixCls, suffix = '') => {
+  const prefixClasses = prefixCls.split(/\s+/);
+  return prefixClasses.map((cls) => `${cls}${suffix}`);
+};
+
+export const getClassString = (prefixCls, suffix) => getClasses(prefixCls, suffix).join(' ');

src/index.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import KeyCode from 'rc-util/lib/KeyCode';
 import InputHandler from './InputHandler';
+import { getClasses, getClassString } from './helpers';
 
 function noop() {
 }
@@ -631,27 +632,29 @@ export default class InputNumber extends React.Component {
       prefixCls, disabled, readOnly, useTouch, autoComplete,
       upHandler, downHandler, ...rest,
     } = props;
-    const classes = classNames({
-      [prefixCls]: true,
+
+    const clsMap = {
       [props.className]: !!props.className,
-      [`${prefixCls}-disabled`]: disabled,
-      [`${prefixCls}-focused`]: this.state.focused,
-    });
+    };
+    getClasses(prefixCls).forEach((cls) => { clsMap[cls] = true; });
+    getClasses(prefixCls, '-disabled').forEach((cls) => { clsMap[cls] = disabled; });
+    getClasses(prefixCls, '-focused').forEach((cls) => { clsMap[cls] = this.state.focused; });
+    const classes = classNames(clsMap);
     let upDisabledClass = '';
     let downDisabledClass = '';
     const { value } = this.state;
     if (value || value === 0) {
       if (!isNaN(value)) {
         const val = Number(value);
         if (val >= props.max) {
-          upDisabledClass = `${prefixCls}-handler-up-disabled`;
+          upDisabledClass = getClassString(prefixCls, '-handler-up-disabled');
         }
         if (val <= props.min) {
-          downDisabledClass = `${prefixCls}-handler-down-disabled`;
+          downDisabledClass = getClassString(prefixCls, '-handler-down-disabled');
         }
       } else {
-        upDisabledClass = `${prefixCls}-handler-up-disabled`;
-        downDisabledClass = `${prefixCls}-handler-down-disabled`;
+        upDisabledClass = getClassString(prefixCls, '-handler-up-disabled');
+        downDisabledClass = getClassString(prefixCls, '-handler-down-disabled');
       }
     }
 
@@ -707,6 +710,11 @@ export default class InputNumber extends React.Component {
     }
     const isUpDisabled = !!upDisabledClass || disabled || readOnly;
     const isDownDisabled = !!downDisabledClass || disabled || readOnly;
+
+    const handlerCls = getClassString(prefixCls, '-handler');
+    const upHandlerCls = getClassString(prefixCls, '-handler-up');
+    const downHandlerCls = getClassString(prefixCls, '-handler-down');
+
     // ref for test
     return (
       <div
@@ -718,7 +726,7 @@ export default class InputNumber extends React.Component {
         onMouseOver={props.onMouseOver}
         onMouseOut={props.onMouseOut}
       >
-        <div className={`${prefixCls}-handler-wrap`}>
+        <div className={getClassString(prefixCls, '-handler-wrap')}>
           <InputHandler
             ref={this.saveUp}
             disabled={isUpDisabled}
@@ -728,11 +736,11 @@ export default class InputNumber extends React.Component {
             role="button"
             aria-label="Increase Value"
             aria-disabled={!!isUpDisabled}
-            className={`${prefixCls}-handler ${prefixCls}-handler-up ${upDisabledClass}`}
+            className={`${handlerCls} ${upHandlerCls} ${upDisabledClass}`}
           >
             {upHandler || <span
               unselectable="unselectable"
-              className={`${prefixCls}-handler-up-inner`}
+              className={getClassString(prefixCls, '-handler-up-inner')}
               onClick={preventDefault}
             />}
           </InputHandler>
@@ -745,17 +753,17 @@ export default class InputNumber extends React.Component {
             role="button"
             aria-label="Decrease Value"
             aria-disabled={!!isDownDisabled}
-            className={`${prefixCls}-handler ${prefixCls}-handler-down ${downDisabledClass}`}
+            className={`${handlerCls} ${downHandlerCls} ${downDisabledClass}`}
           >
             {downHandler || <span
               unselectable="unselectable"
-              className={`${prefixCls}-handler-down-inner`}
+              className={getClassString(prefixCls, '-handler-down-inner')}
               onClick={preventDefault}
             />}
           </InputHandler>
         </div>
         <div
-          className={`${prefixCls}-input-wrap`}
+          className={getClassString(prefixCls, '-input-wrap')}
           role="spinbutton"
           aria-valuemin={props.min}
           aria-valuemax={props.max}
@@ -767,7 +775,7 @@ export default class InputNumber extends React.Component {
             placeholder={props.placeholder}
             onClick={props.onClick}
             onMouseUp={this.onMouseUp}
-            className={`${prefixCls}-input`}
+            className={getClassString(prefixCls, '-input')}
             tabIndex={props.tabIndex}
             autoComplete={autoComplete}
             onFocus={this.onFocus}

tests/index.js

@@ -12,6 +12,7 @@ import {
 import ReactDOM from 'react-dom';
 import sinon from 'sinon';
 import createReactClass from 'create-react-class';
+import * as helpers from '../src/helpers';
 
 const defaultValue = 98;
 
@@ -1535,3 +1536,17 @@ describe('Mobile inputNumber use TouchEvents', () => {
     });
   });
 });
+
+describe('helpers', () => {
+  describe('getClassString', () => {
+    it('returns a string containing a single class with the appropriate prefix', () => {
+      expect(helpers.getClassString('prefix', '-suffix')).to.be('prefix-suffix');
+      expect(helpers.getClassString('prefix', '')).to.be('prefix');
+      expect(helpers.getClassString('', '-suffix')).to.be('-suffix');
+    });
+    it('returns a string containing multiple classes, each prefixed appropriately', () => {
+      expect(helpers.getClassString('pref1 pref2', '-suffix')).to.be('pref1-suffix pref2-suffix');
+      expect(helpers.getClassString('pref1    pref2', '-suff')).to.be('pref1-suff pref2-suff');
+    });
+  });
+});