Migrate from classnames to nicer clsx (mui#855)

* Migrate from classnames to nicer clsx

* Update size snapshot

docs/package.json

@@ -9,7 +9,6 @@
     "@date-io/moment": "^1.0.1",
     "@material-ui/core": "^3.8.3",
     "@material-ui/icons": "^3.0.2",
-    "@types/classnames": "^2.2.7",
     "@types/jest": "^23.3.12",
     "@types/luxon": "^1.4.1",
     "@types/moment-jalaali": "^0.7.4",
@@ -20,7 +19,7 @@
     "@types/react-router": "^4.4.3",
     "@types/react-router-dom": "^4.3.1",
     "@types/react-syntax-highlighter": "^10.1.0",
-    "classnames": "^2.2.6",
+    "clsx": "^1.0.1",
     "date-fns": "^2.0.0-alpha.26",
     "formik": "^1.4.2",
     "jss-rtl": "^0.2.3",

docs/src/Pages/Components/DatePicker/CustomElementsDatePicker.example.jsx

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 import { DatePicker } from 'material-ui-pickers';
 import { IconButton, withStyles } from '@material-ui/core';
@@ -46,13 +46,13 @@ class CustomElements extends PureComponent {
     const isFirstDay = isSameDay(dateClone, start);
     const isLastDay = isSameDay(dateClone, end);
 
-    const wrapperClassName = classNames({
+    const wrapperClassName = clsx({
       [classes.highlight]: dayIsBetween,
       [classes.firstHighlight]: isFirstDay,
       [classes.endHighlight]: isLastDay,
     });
 
-    const dayClassName = classNames(classes.day, {
+    const dayClassName = clsx(classes.day, {
       [classes.nonCurrentMonthDay]: !dayInCurrentMonth,
       [classes.highlightNonCurrentMonthDay]: !dayInCurrentMonth && dayIsBetween,
     });

docs/src/_shared/Code.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { withStyles, Theme, WithStyles } from '@material-ui/core/styles';
 import lightStyle from 'react-syntax-highlighter/dist/styles/prism/prism';
 import darkStyle from 'react-syntax-highlighter/dist/styles/prism/darcula';
@@ -44,7 +44,7 @@ type CodeProps = {
 
 const Code: React.SFC<CodeProps> = ({ classes, language, text, withMargin }) => {
   return (
-    <div className={classnames(classes.root, { [classes.margin]: withMargin })}>
+    <div className={clsx(classes.root, { [classes.margin]: withMargin })}>
       <ThemeContext.Consumer>
         {theme => (
           <SyntaxHighlighter language={language} style={theme === 'light' ? lightStyle : darkStyle}>

docs/src/_shared/PropTypesTable.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import {
   Table,
   Typography,
@@ -59,7 +59,7 @@ class PropTypesTable extends React.PureComponent {
                 .map(prop => (
                   <TableRow key={prop}>
                     <TableCell
-                      className={classnames({
+                      className={clsx({
                         [classes.required]: propsDoc[prop].required,
                       })}
                     >

docs/src/layout/Layout.tsx

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import Hidden from '@material-ui/core/Hidden';
 import Drawer from '@material-ui/core/Drawer';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
@@ -74,7 +74,7 @@ class Layout extends Component<LayoutProps> {
       <React.Fragment>
         <AppBar
           position="fixed"
-          className={classnames(classes.appBar, {
+          className={clsx(classes.appBar, {
             [classes.landingAppBar]: isLanding,
           })}
         >
@@ -162,12 +162,12 @@ class Layout extends Component<LayoutProps> {
         </Hidden>
 
         <main
-          className={classnames(classes.main, {
+          className={clsx(classes.main, {
             [classes.landingMain]: isLanding,
           })}
         >
           <div
-            className={classnames(classes.content, {
+            className={clsx(classes.content, {
               [classes.landingMain]: isLanding,
             })}
           >

lib/.size-snapshot.json

@@ -1,26 +1,26 @@
 {
   "build/dist/material-ui-pickers.esm.js": {
-    "bundled": 105850,
-    "minified": 61611,
-    "gzipped": 14494,
+    "bundled": 105990,
+    "minified": 61649,
+    "gzipped": 14542,
     "treeshaked": {
       "rollup": {
-        "code": 48239,
-        "import_statements": 1323
+        "code": 48352,
+        "import_statements": 1317
       },
       "webpack": {
-        "code": 55233
+        "code": 55348
       }
     }
   },
   "build/dist/material-ui-pickers.umd.js": {
-    "bundled": 219608,
-    "minified": 94966,
-    "gzipped": 25370
+    "bundled": 219234,
+    "minified": 94953,
+    "gzipped": 25382
   },
   "build/dist/material-ui-pickers.umd.min.js": {
-    "bundled": 199836,
-    "minified": 89281,
-    "gzipped": 24151
+    "bundled": 199462,
+    "minified": 89267,
+    "gzipped": 24165
   }
 }

lib/package.json

@@ -40,7 +40,7 @@
   },
   "dependencies": {
     "@types/react-text-mask": "^5.4.3",
-    "classnames": "^2.2.6",
+    "clsx": "^1.0.1",
     "keycode": "^2.2.0",
     "react-event-listener": "^0.6.5",
     "react-text-mask": "=5.4.1",
@@ -76,7 +76,6 @@
     "@date-io/moment": "^1.0.1",
     "@material-ui/core": "^3.8.3",
     "@material-ui/icons": "^3.0.2",
-    "@types/classnames": "^2.2.7",
     "@types/enzyme": "^3.1.15",
     "@types/enzyme-adapter-react-16": "^1.0.3",
     "@types/fs-extra": "^5.0.4",
@@ -91,7 +90,6 @@
     "@types/react-dom": "^16.0.11",
     "@types/react-event-listener": "^0.4.7",
     "@types/react-transition-group": "^2.0.15",
-    "classnames": "^2.2.6",
     "codecov": "^3.1.0",
     "cross-env": "^5.2.0",
     "date-fns": "2.0.0-alpha.16",

lib/src/DatePicker/components/Day.tsx

@@ -2,7 +2,7 @@ import { Theme } from '@material-ui/core';
 import IconButton from '@material-ui/core/IconButton';
 import createStyles from '@material-ui/core/styles/createStyles';
 import withStyles, { WithStyles } from '@material-ui/core/styles/withStyles';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import * as PropTypes from 'prop-types';
 import * as React from 'react';
 
@@ -35,7 +35,7 @@ class Day extends React.PureComponent<DayProps> {
   public render() {
     const { children, classes, disabled, hidden, current, selected, ...other } = this.props;
 
-    const className = classnames(classes.day, {
+    const className = clsx(classes.day, {
       [classes.hidden]: hidden,
       [classes.current]: current,
       [classes.selected]: selected,

lib/src/DatePicker/components/SlideTransition.tsx

@@ -1,7 +1,7 @@
 import { Theme } from '@material-ui/core';
 import createStyles from '@material-ui/core/styles/createStyles';
 import withStyles, { WithStyles } from '@material-ui/core/styles/withStyles';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import * as PropTypes from 'prop-types';
 import * as React from 'react';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
@@ -18,12 +18,12 @@ const animationDuration = 350;
 
 const SlideTransition: React.SFC<SlideTransitionProps> = ({
   classes,
-  className,
+  className = null,
   children,
   transKey,
   slideDirection,
 }) => (
-  <TransitionGroup className={classnames(classes.transitionContainer, className)}>
+  <TransitionGroup className={clsx(classes.transitionContainer, className)}>
     <CSSTransition
       key={transKey}
       mountOnEnter

lib/src/DatePicker/components/Year.tsx

@@ -2,7 +2,7 @@ import { Theme } from '@material-ui/core';
 import createStyles from '@material-ui/core/styles/createStyles';
 import withStyles, { WithStyles } from '@material-ui/core/styles/withStyles';
 import Typography from '@material-ui/core/Typography';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import * as PropTypes from 'prop-types';
 import * as React from 'react';
 
@@ -41,7 +41,7 @@ export class Year extends React.PureComponent<YearProps> {
       <Typography
         role="button"
         component="div"
-        className={classnames(classes.root, {
+        className={clsx(classes.root, {
           [classes.selected]: selected,
           [classes.disabled]: disabled,
         })}

lib/src/DateTimePicker/components/DateTimePickerHeader.tsx

@@ -1,4 +1,4 @@
-import classnames from 'classnames';
+import clsx from 'clsx';
 import * as PropTypes from 'prop-types';
 import * as React from 'react';
 
@@ -79,7 +79,7 @@ export const DateTimePickerHeader: React.SFC<DateTimePickerHeaderProps> = ({
   ampm,
 }) => {
   return (
-    <PickerToolbar className={classnames(classes.toolbar, { [classes.toolBar24h]: !ampm })}>
+    <PickerToolbar className={clsx(classes.toolbar, { [classes.toolBar24h]: !ampm })}>
       <div className={classes.dateHeader}>
         <ToolbarButton
           variant="subtitle1"

lib/src/TimePicker/TimePicker.tsx

@@ -1,5 +1,5 @@
 import withStyles from '@material-ui/core/styles/withStyles';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import * as PropTypes from 'prop-types';
 import * as React from 'react';
 
@@ -152,7 +152,7 @@ export class TimePicker extends React.Component<TimePickerProps> {
     return (
       <React.Fragment>
         <PickerToolbar
-          className={classnames(classes.toolbar, {
+          className={clsx(classes.toolbar, {
             [classes.toolbarLeftPadding]: ampm,
           })}
         >