diff --git a/examples/multiple-classes.html b/examples/multiple-classes.html new file mode 100644 index 00000000..b3a42524 --- /dev/null +++ b/examples/multiple-classes.html @@ -0,0 +1 @@ +placeholder \ No newline at end of file diff --git a/examples/multiple-classes.js b/examples/multiple-classes.js new file mode 100644 index 00000000..559f3ff6 --- /dev/null +++ b/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 ( +
+ +
+ ); + } +} + +ReactDOM.render(, document.getElementById('__react-content')); diff --git a/src/InputHandler.js b/src/InputHandler.js index fed60cd8..fed22ac6 100644 --- a/src/InputHandler.js +++ b/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 ( diff --git a/src/helpers.js b/src/helpers.js new file mode 100644 index 00000000..4d7ba17e --- /dev/null +++ b/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(' '); diff --git a/src/index.js b/src/index.js index 61a4399c..f68ec008 100644 --- a/src/index.js +++ b/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,12 +632,14 @@ 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; @@ -644,14 +647,14 @@ export default class InputNumber extends React.Component { 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 (
-
+
{upHandler || } @@ -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 || }
{ }); }); }); + +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'); + }); + }); +});