Replace classnames with clsx

A few points - more performant - smaller without iife - esm support without hacky conversion to commonjs with module wrapper Refs https://unpkg.com/classnames@2.2.6/index.js, https://twitter.com/MaterialUI/status/1092928715804299264
jquense · Sep 12, 2019 · 3f9475f · 3f9475f
1 parent d353f56
commit 3f9475f
Show file tree

Hide file tree

Showing 18 changed files with 1,385 additions and 392 deletions.
diff --git a/.size-snapshot.json b/.size-snapshot.json
@@ -1,25 +1,25 @@
 {
   "./dist/react-big-calendar.js": {
-    "bundled": 516194,
-    "minified": 152719,
-    "gzipped": 46145
+    "bundled": 515451,
+    "minified": 152551,
+    "gzipped": 46110
   },
   "./dist/react-big-calendar.min.js": {
-    "bundled": 453881,
-    "minified": 133899,
-    "gzipped": 41802
+    "bundled": 453138,
+    "minified": 133737,
+    "gzipped": 41753
   },
   "dist/react-big-calendar.esm.js": {
-    "bundled": 168834,
-    "minified": 80633,
-    "gzipped": 19931,
+    "bundled": 168747,
+    "minified": 80626,
+    "gzipped": 19927,
     "treeshaked": {
       "rollup": {
-        "code": 58381,
-        "import_statements": 1590
+        "code": 58340,
+        "import_statements": 1584
       },
       "webpack": {
-        "code": 62866
+        "code": 62815
       }
     }
   }

diff --git a/package.json b/package.json
@@ -122,7 +122,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.1.5",
-    "classnames": "^2.2.6",
+    "clsx": "^1.0.3",
     "date-arithmetic": "^4.0.1",
     "dom-helpers": "^3.4.0",
     "invariant": "^2.2.4",

diff --git a/src/BackgroundCells.js b/src/BackgroundCells.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 import { findDOMNode } from 'react-dom'
-import cn from 'classnames'
+import clsx from 'clsx'
 
 import * as dates from './utils/dates'
 import { notify } from './utils/helpers'
@@ -53,7 +53,7 @@ class BackgroundCells extends React.Component {
             <Wrapper key={index} value={date} range={range}>
               <div
                 style={style}
-                className={cn(
+                className={clsx(
                   'rbc-day-bg',
                   className,
                   selected && 'rbc-selected-cell',

diff --git a/src/Calendar.js b/src/Calendar.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 import { uncontrollable } from 'uncontrollable'
-import cn from 'classnames'
+import clsx from 'clsx'
 import {
   accessor,
   dateFormat,
@@ -878,7 +878,7 @@ class Calendar extends React.Component {
     return (
       <div
         {...elementProps}
-        className={cn(className, 'rbc-calendar', props.rtl && 'rbc-rtl')}
+        className={clsx(className, 'rbc-calendar', props.rtl && 'rbc-rtl')}
         style={style}
       >
         {toolbar && (

diff --git a/src/DateContentRow.js b/src/DateContentRow.js
@@ -1,4 +1,4 @@
-import cn from 'classnames'
+import clsx from 'clsx'
 import getHeight from 'dom-helpers/query/height'
 import qsa from 'dom-helpers/query/querySelectorAll'
 import PropTypes from 'prop-types'
@@ -63,7 +63,7 @@ class DateContentRow extends React.Component {
     return renderHeader({
       date,
       key: `header_${index}`,
-      className: cn(
+      className: clsx(
         'rbc-date-cell',
         dates.eq(date, getNow(), 'day') && 'rbc-now'
       ),

diff --git a/src/DayColumn.js b/src/DayColumn.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 import { findDOMNode } from 'react-dom'
-import cn from 'classnames'
+import clsx from 'clsx'
 
 import Selection, { getBoundsForNode, isEvent } from './Selection'
 import * as dates from './utils/dates'
@@ -126,7 +126,7 @@ class DayColumn extends React.Component {
     return (
       <div
         style={style}
-        className={cn(
+        className={clsx(
           className,
           'rbc-day-slot',
           'rbc-time-column',
@@ -152,7 +152,7 @@ class DayColumn extends React.Component {
           components={components}
           slotMetrics={slotMetrics}
         >
-          <div className={cn('rbc-events-container', rtl && 'rtl')}>
+          <div className={clsx('rbc-events-container', rtl && 'rtl')}>
             {this.renderEvents()}
           </div>
         </EventContainer>

diff --git a/src/EventCell.js b/src/EventCell.js
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import cn from 'classnames'
+import clsx from 'clsx'
 import * as dates from './utils/dates'
 
 class EventCell extends React.Component {
@@ -61,7 +61,7 @@ class EventCell extends React.Component {
           {...props}
           tabIndex={0}
           style={{ ...userProps.style, ...style }}
-          className={cn('rbc-event', className, userProps.className, {
+          className={clsx('rbc-event', className, userProps.className, {
             'rbc-selected': selected,
             'rbc-event-allday': showAsAllDay,
             'rbc-event-continues-prior': continuesPrior,

diff --git a/src/EventRow.js b/src/EventRow.js
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import cn from 'classnames'
+import clsx from 'clsx'
 import React from 'react'
 import EventRowMixin from './EventRowMixin'
 
@@ -14,7 +14,7 @@ class EventRow extends React.Component {
     let lastEnd = 1
 
     return (
-      <div className={cn(className, 'rbc-row')}>
+      <div className={clsx(className, 'rbc-row')}>
         {segments.reduce((row, { event, left, right, span }, li) => {
           let key = '_lvl_' + li
           let gap = left - lastEnd

diff --git a/src/Month.js b/src/Month.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 import { findDOMNode } from 'react-dom'
-import cn from 'classnames'
+import clsx from 'clsx'
 
 import * as dates from './utils/dates'
 import chunk from 'lodash/chunk'
@@ -80,7 +80,7 @@ class MonthView extends React.Component {
     this._weekCount = weeks.length
 
     return (
-      <div className={cn('rbc-month-view', className)}>
+      <div className={clsx('rbc-month-view', className)}>
         <div className="rbc-row rbc-month-header">
           {this.renderHeaders(weeks[0])}
         </div>
@@ -151,7 +151,7 @@ class MonthView extends React.Component {
     return (
       <div
         {...props}
-        className={cn(
+        className={clsx(
           className,
           isOffRange && 'rbc-off-range',
           isCurrent && 'rbc-current'

diff --git a/src/TimeGrid.js b/src/TimeGrid.js
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import cn from 'classnames'
+import clsx from 'clsx'
 import raf from 'dom-helpers/util/requestAnimationFrame'
 import React, { Component } from 'react'
 import { findDOMNode } from 'react-dom'
@@ -187,7 +187,10 @@ export default class TimeGrid extends Component {
 
     return (
       <div
-        className={cn('rbc-time-view', resources && 'rbc-time-view-resources')}
+        className={clsx(
+          'rbc-time-view',
+          resources && 'rbc-time-view-resources'
+        )}
       >
         <TimeGridHeader
           range={range}

diff --git a/src/TimeGridEvent.js b/src/TimeGridEvent.js
@@ -1,4 +1,4 @@
-import cn from 'classnames'
+import clsx from 'clsx'
 import React from 'react'
 
 /* eslint-disable react/prop-types */
@@ -52,7 +52,7 @@ function TimeGridEvent(props) {
             ? (typeof label === 'string' ? label + ': ' : '') + tooltip
             : undefined
         }
-        className={cn('rbc-event', className, userProps.className, {
+        className={clsx('rbc-event', className, userProps.className, {
           'rbc-selected': selected,
           'rbc-event-continues-earlier': continuesEarlier,
           'rbc-event-continues-later': continuesLater,

diff --git a/src/TimeGridHeader.js b/src/TimeGridHeader.js
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import cn from 'classnames'
+import clsx from 'clsx'
 import scrollbarSize from 'dom-helpers/util/scrollbarSize'
 import React from 'react'
 
@@ -40,7 +40,7 @@ class TimeGridHeader extends React.Component {
         <div
           key={i}
           style={style}
-          className={cn(
+          className={clsx(
             'rbc-header',
             className,
             dates.eq(date, today, 'day') && 'rbc-today'
@@ -134,7 +134,7 @@ class TimeGridHeader extends React.Component {
       <div
         style={style}
         ref={scrollRef}
-        className={cn('rbc-time-header', isOverflowing && 'rbc-overflowing')}
+        className={clsx('rbc-time-header', isOverflowing && 'rbc-overflowing')}
       >
         <div
           className="rbc-label rbc-time-header-gutter"

diff --git a/src/TimeGutter.js b/src/TimeGutter.js
@@ -1,4 +1,4 @@
-import cn from 'classnames'
+import clsx from 'clsx'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 
@@ -29,7 +29,7 @@ export default class TimeGutter extends Component {
 
     const isNow = this.slotMetrics.dateIsInGroup(getNow(), idx)
     return (
-      <span className={cn('rbc-label', isNow && 'rbc-now')}>
+      <span className={clsx('rbc-label', isNow && 'rbc-now')}>
         {localizer.format(value, 'timeGutterFormat')}
       </span>
     )

diff --git a/src/TimeSlotGroup.js b/src/TimeSlotGroup.js
@@ -1,4 +1,4 @@
-import cn from 'classnames'
+import clsx from 'clsx'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 
@@ -22,7 +22,7 @@ export default class TimeSlotGroup extends Component {
             <Wrapper key={idx} value={value} resource={resource}>
               <div
                 {...slotProps}
-                className={cn('rbc-time-slot', slotProps.className)}
+                className={clsx('rbc-time-slot', slotProps.className)}
               >
                 {renderSlot && renderSlot(value, idx)}
               </div>

diff --git a/src/Toolbar.js b/src/Toolbar.js
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import cn from 'classnames'
+import clsx from 'clsx'
 import { navigate } from './utils/constants'
 
 class Toolbar extends React.Component {
@@ -57,7 +57,7 @@ class Toolbar extends React.Component {
         <button
           type="button"
           key={name}
-          className={cn({ 'rbc-active': view === name })}
+          className={clsx({ 'rbc-active': view === name })}
           onClick={this.view.bind(null, name)}
         >
           {messages[name]}

diff --git a/src/addons/dragAndDrop/EventWrapper.js b/src/addons/dragAndDrop/EventWrapper.js
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import cn from 'classnames'
+import clsx from 'clsx'
 import { accessor } from '../../utils/propTypes'
 import { accessor as get } from '../../utils/accessors'
 
@@ -74,7 +74,10 @@ class EventWrapper extends React.Component {
 
     if (event.__isPreview)
       return React.cloneElement(children, {
-        className: cn(children.props.className, 'rbc-addons-dnd-drag-preview'),
+        className: clsx(
+          children.props.className,
+          'rbc-addons-dnd-drag-preview'
+        ),
       })
 
     const { draggable } = this.context
@@ -90,37 +93,37 @@ class EventWrapper extends React.Component {
     }
 
     /*
- * The resizability of events depends on whether they are
- * allDay events and how they are displayed.
- *
- * 1. If the event is being shown in an event row (because
- * it is an allDay event shown in the header row or because as
- * in month view the view is showing all events as rows) then we
- * allow east-west resizing.
- *
- * 2. Otherwise the event is being displayed
- * normally, we can drag it north-south to resize the times.
- *
- * See `DropWrappers` for handling of the drop of such events.
- *
- * Notwithstanding the above, we never show drag anchors for
- * events which continue beyond current component. This happens
- * in the middle of events when showMultiDay is true, and to
- * events at the edges of the calendar's min/max location.
- */
+     * The resizability of events depends on whether they are
+     * allDay events and how they are displayed.
+     *
+     * 1. If the event is being shown in an event row (because
+     * it is an allDay event shown in the header row or because as
+     * in month view the view is showing all events as rows) then we
+     * allow east-west resizing.
+     *
+     * 2. Otherwise the event is being displayed
+     * normally, we can drag it north-south to resize the times.
+     *
+     * See `DropWrappers` for handling of the drop of such events.
+     *
+     * Notwithstanding the above, we never show drag anchors for
+     * events which continue beyond current component. This happens
+     * in the middle of events when showMultiDay is true, and to
+     * events at the edges of the calendar's min/max location.
+     */
     const isResizable = resizableAccessor
       ? !!get(event, resizableAccessor)
       : true
 
     if (isResizable || isDraggable) {
       /*
-  * props.children is the singular <Event> component.
-  * BigCalendar positions the Event abolutely and we
-  * need the anchors to be part of that positioning.
-  * So we insert the anchors inside the Event's children
-  * rather than wrap the Event here as the latter approach
-  * would lose the positioning.
-  */
+       * props.children is the singular <Event> component.
+       * BigCalendar positions the Event abolutely and we
+       * need the anchors to be part of that positioning.
+       * So we insert the anchors inside the Event's children
+       * rather than wrap the Event here as the latter approach
+       * would lose the positioning.
+       */
       const newProps = {
         onMouseDown: this.handleStartDragging,
         onTouchStart: this.handleStartDragging,
@@ -153,7 +156,7 @@ class EventWrapper extends React.Component {
         draggable.dragAndDropAction.event === event // and it's the current event
       ) {
         // add a new class to it
-        newProps.className = cn(
+        newProps.className = clsx(
           children.props.className,
           'rbc-addons-dnd-dragged-event'
         )

diff --git a/src/addons/dragAndDrop/withDragAndDrop.js b/src/addons/dragAndDrop/withDragAndDrop.js
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import cn from 'classnames'
+import clsx from 'clsx'
 
 import { accessor } from '../../utils/propTypes'
 import EventWrapper from './EventWrapper'
@@ -188,7 +188,7 @@ export default function withDragAndDrop(Calendar) {
           }
         : elementProps
 
-      props.className = cn(
+      props.className = clsx(
         props.className,
         'rbc-addons-dnd',
         !!interacting && 'rbc-addons-dnd-is-dragging'