clean classNames

Author: afc163

src/Header.jsx

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import moment from 'moment';
+import classNames from 'classnames';
 
 class Header extends Component {
   static propTypes = {
@@ -162,7 +163,7 @@ class Header extends Component {
     const invalidClass = invalid ? `${prefixCls}-input-invalid` : '';
     return (
       <input
-        className={`${prefixCls}-input  ${invalidClass}`}
+        className={classNames(`${prefixCls}-input`, invalidClass)}
         ref={ref => {
           this.refInput = ref;
         }}

src/Panel.jsx

@@ -185,12 +185,7 @@ class Panel extends Component {
     );
 
     return (
-      <div
-        className={classNames({
-          [`${prefixCls}-inner`]: true,
-          [className]: !!className,
-        })}
-      >
+      <div className={classNames(className, `${prefixCls}-inner`)}>
         <Header
           clearText={clearText}
           prefixCls={prefixCls}

src/Select.jsx

@@ -2,7 +2,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import ReactDom from 'react-dom';
-import classnames from 'classnames';
+import classNames from 'classnames';
 
 const scrollTo = (element, to, duration) => {
   const requestAnimationFrame =
@@ -60,7 +60,7 @@ class Select extends Component {
   getOptions() {
     const { options, selectedIndex, prefixCls } = this.props;
     return options.map((item, index) => {
-      const cls = classnames({
+      const cls = classNames({
         [`${prefixCls}-select-option-selected`]: selectedIndex === index,
         [`${prefixCls}-select-option-disabled`]: item.disabled,
       });
@@ -114,7 +114,7 @@ class Select extends Component {
     if (options.length === 0) {
       return null;
     }
-    const cls = classnames(`${prefixCls}-select`, {
+    const cls = classNames(`${prefixCls}-select`, {
       [`${prefixCls}-select-active`]: active,
     });
     return (

src/TimePicker.jsx

@@ -3,6 +3,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Trigger from 'rc-trigger';
 import moment from 'moment';
+import classNames from 'classnames';
 import Panel from './Panel';
 import placements from './placements';
 
@@ -235,11 +236,6 @@ export default class Picker extends Component {
 
   getPopupClassName() {
     const { showHour, showMinute, showSecond, use12Hours, prefixCls, popupClassName } = this.props;
-    let className = popupClassName;
-    // Keep it for old compatibility
-    if ((!showHour || !showMinute || !showSecond) && !use12Hours) {
-      className += ` ${prefixCls}-panel-narrow`;
-    }
     let selectColumnCount = 0;
     if (showHour) {
       selectColumnCount += 1;
@@ -253,8 +249,14 @@ export default class Picker extends Component {
     if (use12Hours) {
       selectColumnCount += 1;
     }
-    className += ` ${prefixCls}-panel-column-${selectColumnCount}`;
-    return className;
+    // Keep it for old compatibility
+    return classNames(
+      popupClassName,
+      {
+        [`${prefixCls}-panel-narrow`]: (!showHour || !showMinute || !showSecond) && !use12Hours,
+      },
+      `${prefixCls}-panel-column-${selectColumnCount}`,
+    );
   }
 
   setOpen(open) {
@@ -349,7 +351,7 @@ export default class Picker extends Component {
         popupVisible={open}
         onPopupVisibleChange={this.onVisibleChange}
       >
-        <span className={`${prefixCls} ${className}`} style={style}>
+        <span className={classNames(prefixCls, className)} style={style}>
           <input
             className={`${prefixCls}-input`}
             ref={this.saveInputRef}

tests/__snapshots__/TimePicker.spec.jsx.snap

@@ -2,7 +2,7 @@
 
 exports[`TimePicker allowEmpty cannot allow clear when disabled 1`] = `
 <span
-  class="rc-time-picker "
+  class="rc-time-picker"
 >
   <input
     class="rc-time-picker-input"
@@ -19,7 +19,7 @@ exports[`TimePicker allowEmpty cannot allow clear when disabled 1`] = `
 
 exports[`TimePicker allowEmpty should allow clear 1`] = `
 <span
-  class="rc-time-picker "
+  class="rc-time-picker"
 >
   <input
     class="rc-time-picker-input"