Migrate from classnames to clsx

package.json

@@ -169,7 +169,7 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "classnames": "^2.2.3",
+    "clsx": "^1.0.1",
     "dom-helpers": "^2.4.0 || ^3.0.0",
     "loose-envify": "^1.3.0",
     "prop-types": "^15.6.0",

source/ArrowKeyStepper/ArrowKeyStepper.example.js

@@ -9,7 +9,7 @@ import {
 import ArrowKeyStepper, {type ScrollIndices} from './';
 import AutoSizer from '../AutoSizer';
 import Grid from '../Grid';
-import cn from 'classnames';
+import clsx from 'clsx';
 import styles from './ArrowKeyStepper.example.css';
 
 type State = {
@@ -168,7 +168,7 @@ export default class ArrowKeyStepperExample extends React.PureComponent<
     scrollToRow: number,
     style: Object,
   }) => {
-    const className = cn(styles.Cell, {
+    const className = clsx(styles.Cell, {
       [styles.FocusedCell]:
         columnIndex === scrollToColumn && rowIndex === scrollToRow,
     });

source/CellMeasurer/CellMeasurer.example.js

@@ -7,7 +7,7 @@ import {
   ContentBoxParagraph,
 } from '../demo/ContentBox';
 import AutoSizer from '../AutoSizer';
-import cn from 'classnames';
+import clsx from 'clsx';
 import styles from './CellMeasurer.example.css';
 import DynamicWidthGrid from './CellMeasurer.DynamicWidthGrid.example.js';
 import DynamicHeightGrid from './CellMeasurer.DynamicHeightGrid.example.js';
@@ -110,7 +110,7 @@ export default class CellMeasurerExample extends React.PureComponent {
 function getClassName({columnIndex, rowIndex}) {
   const rowClass = rowIndex % 2 === 0 ? styles.evenRow : styles.oddRow;
 
-  return cn(rowClass, styles.cell, {
+  return clsx(rowClass, styles.cell, {
     [styles.centeredCell]: columnIndex > 2,
   });
 }
@@ -127,7 +127,7 @@ function getContent({index, datum, long = true}) {
 }
 
 function Tab({children, currentTab, id, onClick}) {
-  const classNames = cn(styles.Tab, {
+  const classNames = clsx(styles.Tab, {
     [styles.ActiveTab]: currentTab === id,
   });
 

source/Collection/CollectionView.js

@@ -1,5 +1,5 @@
 /** @flow */
-import cn from 'classnames';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import * as React from 'react';
 import {polyfill} from 'react-lifecycles-compat';
@@ -385,7 +385,7 @@ class CollectionView extends React.PureComponent {
       <div
         ref={this._setScrollingContainerRef}
         aria-label={this.props['aria-label']}
-        className={cn('ReactVirtualized__Collection', className)}
+        className={clsx('ReactVirtualized__Collection', className)}
         id={id}
         onScroll={this._onScroll}
         role="grid"

source/Grid/Grid.example.js

@@ -9,7 +9,7 @@ import {
 import {LabeledInput, InputRow} from '../demo/LabeledInput';
 import AutoSizer from '../AutoSizer';
 import Grid from './Grid';
-import cn from 'classnames';
+import clsx from 'clsx';
 import styles from './Grid.example.css';
 
 export default class GridExample extends React.PureComponent {
@@ -236,7 +236,7 @@ export default class GridExample extends React.PureComponent {
         break;
     }
 
-    const classNames = cn(rowClass, styles.cell, {
+    const classNames = clsx(rowClass, styles.cell, {
       [styles.centeredCell]: columnIndex > 2,
     });
 
@@ -250,7 +250,7 @@ export default class GridExample extends React.PureComponent {
   _renderLeftSideCell({key, rowIndex, style}) {
     const datum = this._getDatum(rowIndex);
 
-    const classNames = cn(styles.cell, styles.letterCell);
+    const classNames = clsx(styles.cell, styles.letterCell);
 
     // Don't modify styles.
     // These are frozen by React now (as of 16.0.0).

source/Grid/Grid.js

@@ -18,7 +18,7 @@ import type {
 import type {AnimationTimeoutId} from '../utils/requestAnimationTimeout';
 
 import * as React from 'react';
-import cn from 'classnames';
+import clsx from 'clsx';
 import calculateSizeAndPositionDataAndUpdateScrollOffset from './utils/calculateSizeAndPositionDataAndUpdateScrollOffset';
 import ScalingCellSizeAndPositionManager from './utils/ScalingCellSizeAndPositionManager';
 import createCallbackMemoizer from '../utils/createCallbackMemoizer';
@@ -1044,7 +1044,7 @@ class Grid extends React.PureComponent<Props, State> {
         {...containerProps}
         aria-label={this.props['aria-label']}
         aria-readonly={this.props['aria-readonly']}
-        className={cn('ReactVirtualized__Grid', className)}
+        className={clsx('ReactVirtualized__Grid', className)}
         id={id}
         onScroll={this._onScroll}
         role={role}

source/List/List.example.js

@@ -1,4 +1,4 @@
-import cn from 'classnames';
+import clsx from 'clsx';
 import Immutable from 'immutable';
 import PropTypes from 'prop-types';
 import * as React from 'react';
@@ -203,7 +203,7 @@ export default class ListExample extends React.PureComponent {
     if (showScrollingPlaceholder && isScrolling) {
       return (
         <div
-          className={cn(styles.row, styles.isScrollingPlaceholder)}
+          className={clsx(styles.row, styles.isScrollingPlaceholder)}
           key={key}
           style={style}>
           Scrolling...

source/List/List.js

@@ -14,7 +14,7 @@ import type {RowRenderer, RenderedRows, Scroll} from './types';
 
 import Grid, {accessibilityOverscanIndicesGetter} from '../Grid';
 import * as React from 'react';
-import cn from 'classnames';
+import clsx from 'clsx';
 
 /**
  * It is inefficient to create and manage a large list of DOM elements within a scrolling container
@@ -189,7 +189,7 @@ export default class List extends React.PureComponent<Props> {
   render() {
     const {className, noRowsRenderer, scrollToIndex, width} = this.props;
 
-    const classNames = cn('ReactVirtualized__List', className);
+    const classNames = clsx('ReactVirtualized__List', className);
 
     return (
       <Grid

source/Masonry/Masonry.js

@@ -1,5 +1,5 @@
 /** @flow */
-import cn from 'classnames';
+import clsx from 'clsx';
 import * as React from 'react';
 import {polyfill} from 'react-lifecycles-compat';
 import PositionCache from './PositionCache';
@@ -273,7 +273,7 @@ class Masonry extends React.PureComponent<Props, State> {
       <div
         ref={this._setScrollingContainerRef}
         aria-label={this.props['aria-label']}
-        className={cn('ReactVirtualized__Masonry', className)}
+        className={clsx('ReactVirtualized__Masonry', className)}
         id={id}
         onScroll={this._onScroll}
         role={role}

source/ScrollSync/ScrollSync.example.js

@@ -8,7 +8,7 @@ import {
 import AutoSizer from '../AutoSizer';
 import Grid from '../Grid';
 import ScrollSync from './ScrollSync';
-import cn from 'classnames';
+import clsx from 'clsx';
 import styles from './ScrollSync.example.css';
 import scrollbarSize from 'dom-helpers/util/scrollbarSize';
 
@@ -238,7 +238,7 @@ export default class GridExample extends React.PureComponent {
       rowIndex % 2 === 0
         ? columnIndex % 2 === 0 ? styles.evenRow : styles.oddRow
         : columnIndex % 2 !== 0 ? styles.evenRow : styles.oddRow;
-    const classNames = cn(rowClass, styles.cell);
+    const classNames = clsx(rowClass, styles.cell);
 
     return (
       <div className={classNames} key={key} style={style}>

source/Table/SortIndicator.js

@@ -1,4 +1,4 @@
-import cn from 'classnames';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import * as React from 'react';
 import SortDirection from './SortDirection';
@@ -7,7 +7,7 @@ import SortDirection from './SortDirection';
  * Displayed beside a header to indicate that a Table is currently sorted by this column.
  */
 export default function SortIndicator({sortDirection}) {
-  const classNames = cn('ReactVirtualized__Table__sortableHeaderIcon', {
+  const classNames = clsx('ReactVirtualized__Table__sortableHeaderIcon', {
     'ReactVirtualized__Table__sortableHeaderIcon--ASC':
       sortDirection === SortDirection.ASC,
     'ReactVirtualized__Table__sortableHeaderIcon--DESC':

source/Table/Table.js

@@ -2,7 +2,7 @@
 
 import type {CellPosition} from '../Grid';
 
-import cn from 'classnames';
+import clsx from 'clsx';
 import Column from './Column';
 import PropTypes from 'prop-types';
 import * as React from 'react';
@@ -397,13 +397,13 @@ export default class Table extends React.PureComponent {
         aria-labelledby={this.props['aria-labelledby']}
         aria-colcount={React.Children.toArray(children).length}
         aria-rowcount={this.props.rowCount}
-        className={cn('ReactVirtualized__Table', className)}
+        className={clsx('ReactVirtualized__Table', className)}
         id={id}
         role="grid"
         style={style}>
         {!disableHeader &&
           headerRowRenderer({
-            className: cn('ReactVirtualized__Table__headerRow', rowClass),
+            className: clsx('ReactVirtualized__Table__headerRow', rowClass),
             columns: this._getHeaderColumns(),
             style: {
               height: headerHeight,
@@ -417,7 +417,7 @@ export default class Table extends React.PureComponent {
         <Grid
           {...this.props}
           autoContainerWidth
-          className={cn('ReactVirtualized__Table__Grid', gridClassName)}
+          className={clsx('ReactVirtualized__Table__Grid', gridClassName)}
           cellRenderer={this._createRow}
           columnWidth={width}
           columnCount={1}
@@ -477,7 +477,7 @@ export default class Table extends React.PureComponent {
       <div
         aria-colindex={columnIndex + 1}
         aria-describedby={id}
-        className={cn('ReactVirtualized__Table__rowColumn', className)}
+        className={clsx('ReactVirtualized__Table__rowColumn', className)}
         key={'Row' + rowIndex + '-' + 'Col' + columnIndex}
         onClick={onClick}
         role="gridcell"
@@ -508,7 +508,7 @@ export default class Table extends React.PureComponent {
     } = column.props;
     const sortEnabled = !disableSort && sort;
 
-    const classNames = cn(
+    const classNames = clsx(
       'ReactVirtualized__Table__headerColumn',
       headerClassName,
       column.props.headerClassName,
@@ -632,7 +632,7 @@ export default class Table extends React.PureComponent {
         }),
     );
 
-    const className = cn('ReactVirtualized__Table__row', rowClass);
+    const className = clsx('ReactVirtualized__Table__row', rowClass);
     const flattenedStyle = {
       ...style,
       height: this._getRowHeight(index),

source/WindowScroller/WindowScroller.example.js

@@ -1,6 +1,6 @@
 // @flow
 
-import cn from 'classnames';
+import clsx from 'clsx';
 import Immutable from 'immutable';
 import PropTypes from 'prop-types';
 import * as React from 'react';
@@ -139,7 +139,7 @@ export default class WindowScrollerExample extends React.PureComponent<
   _rowRenderer = ({index, isScrolling, isVisible, key, style}) => {
     const {list} = this.context;
     const row = list.get(index);
-    const className = cn(styles.row, {
+    const className = clsx(styles.row, {
       [styles.rowScrolling]: isScrolling,
       isVisible: isVisible,
     });

source/demo/ContentBox.js

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import cn from 'classnames';
+import clsx from 'clsx';
 import styles from './ContentBox.css';
 
 export function ContentBox({className, children, style}) {
   return (
-    <div className={cn(styles.ContentBox, className)} style={style}>
+    <div className={clsx(styles.ContentBox, className)} style={style}>
       {children}
     </div>
   );

source/demo/Icon.js

@@ -1,4 +1,4 @@
-import cn from 'classnames';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import * as React from 'react';
 import styles from './Icon.css';
@@ -22,7 +22,7 @@ Icon.propTypes = {
 export default function Icon({className, title, type}) {
   return (
     <svg
-      className={cn(styles.Icon, className)}
+      className={clsx(styles.Icon, className)}
       height={12}
       title={title}
       viewBox="0 0 24 24"

source/demo/LabeledInput.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import * as React from 'react';
-import cn from 'classnames';
+import clsx from 'clsx';
 import styles from './LabeledInput.css';
 
 export function LabeledInput({
@@ -11,7 +11,7 @@ export function LabeledInput({
   placeholder,
   value,
 }) {
-  const labelClassName = cn(styles.Label, {
+  const labelClassName = clsx(styles.Label, {
     [styles.LabelDisabled]: disabled,
   });
 

source/demo/Wizard/Wizard.js

@@ -1,4 +1,4 @@
-import cn from 'classnames';
+import clsx from 'clsx';
 import CodeMirror from 'react-codemirror';
 import * as React from 'react';
 import {ContentBox, ContentBoxHeader} from '../ContentBox';
@@ -215,7 +215,7 @@ export default class Wizard extends React.Component {
 function Option({checked, disabled = false, label, onChange}) {
   return (
     <div
-      className={cn(styles.Option, {
+      className={clsx(styles.Option, {
         [styles.OptionDisabled]: disabled,
       })}>
       <label className={styles.Label}>

yarn.lock

@@ -1859,7 +1859,7 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-classnames@^2.2.3, classnames@^2.2.5:
+classnames@^2.2.5:
   version "2.2.5"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
   integrity sha1-+zgB1FNGdknvNgPH1hoCvRKb3m0=
@@ -1931,6 +1931,11 @@ clone@^1.0.2:
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.2.tgz#260b7a99ebb1edfe247538175f783243cb19d149"
   integrity sha1-Jgt6meux7f4kdTgXX3gyQ8sZ0Uk=
 
+clsx@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.0.1.tgz#6d956b00ecc771185bf0ec47383f5a06d941b11f"
+  integrity sha512-PtvbklBG/M2NVzwaYqTGcD+EqMXLNrec1lpgNkz07CoOsYnXsCBjde24Tki8wBKi9jrWX2rJnmKoMJoYUc3zhQ==
+
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"