From 3b158e475753dd986b619b39bd8729639d4dfec9 Mon Sep 17 00:00:00 2001 From: Bogdan Chadkin Date: Sat, 12 Jan 2019 01:59:04 +0300 Subject: [PATCH] Migrate from classnames to clsx - esm support - probably faster --- package.json | 2 +- source/ArrowKeyStepper/ArrowKeyStepper.example.js | 4 ++-- source/CellMeasurer/CellMeasurer.example.js | 6 +++--- source/Collection/CollectionView.js | 4 ++-- source/Grid/Grid.example.js | 6 +++--- source/Grid/Grid.js | 4 ++-- source/List/List.example.js | 4 ++-- source/List/List.js | 4 ++-- source/Masonry/Masonry.js | 4 ++-- source/ScrollSync/ScrollSync.example.js | 4 ++-- source/Table/SortIndicator.js | 4 ++-- source/Table/Table.js | 14 +++++++------- source/WindowScroller/WindowScroller.example.js | 4 ++-- source/demo/ContentBox.js | 4 ++-- source/demo/Icon.js | 4 ++-- source/demo/LabeledInput.js | 4 ++-- source/demo/Wizard/Wizard.js | 4 ++-- yarn.lock | 7 ++++++- 18 files changed, 46 insertions(+), 41 deletions(-) diff --git a/package.json b/package.json index 37a22afae..92c6c5b88 100644 --- a/package.json +++ b/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", diff --git a/source/ArrowKeyStepper/ArrowKeyStepper.example.js b/source/ArrowKeyStepper/ArrowKeyStepper.example.js index 9dfa6a4c2..5f4de2fab 100644 --- a/source/ArrowKeyStepper/ArrowKeyStepper.example.js +++ b/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, }); diff --git a/source/CellMeasurer/CellMeasurer.example.js b/source/CellMeasurer/CellMeasurer.example.js index 272c37cb9..20287eae5 100644 --- a/source/CellMeasurer/CellMeasurer.example.js +++ b/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, }); diff --git a/source/Collection/CollectionView.js b/source/Collection/CollectionView.js index c004b9ca1..d4e0ba6ba 100644 --- a/source/Collection/CollectionView.js +++ b/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 {
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). diff --git a/source/Grid/Grid.js b/source/Grid/Grid.js index e2f439214..887f54b9c 100644 --- a/source/Grid/Grid.js +++ b/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 { {...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} diff --git a/source/List/List.example.js b/source/List/List.example.js index 5e7911195..a1398df2d 100644 --- a/source/List/List.example.js +++ b/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 (
Scrolling... diff --git a/source/List/List.js b/source/List/List.js index c2dbdfe8d..3bedf224e 100644 --- a/source/List/List.js +++ b/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 { render() { const {className, noRowsRenderer, scrollToIndex, width} = this.props; - const classNames = cn('ReactVirtualized__List', className); + const classNames = clsx('ReactVirtualized__List', className); return ( {
diff --git a/source/Table/SortIndicator.js b/source/Table/SortIndicator.js index 4331f5687..fa0cd351c 100644 --- a/source/Table/SortIndicator.js +++ b/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': diff --git a/source/Table/Table.js b/source/Table/Table.js index 0f63fb450..444c1c23b 100644 --- a/source/Table/Table.js +++ b/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 { { const {list} = this.context; const row = list.get(index); - const className = cn(styles.row, { + const className = clsx(styles.row, { [styles.rowScrolling]: isScrolling, isVisible: isVisible, }); diff --git a/source/demo/ContentBox.js b/source/demo/ContentBox.js index 172798890..0fdc2a0c8 100644 --- a/source/demo/ContentBox.js +++ b/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 ( -
+
{children}
); diff --git a/source/demo/Icon.js b/source/demo/Icon.js index 4013bac56..1b7a600d2 100644 --- a/source/demo/Icon.js +++ b/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 (