From 25571bf4b4e4d04e4df8a77845c5d7aa18c657d7 Mon Sep 17 00:00:00 2001 From: Bogdan Chadkin Date: Sat, 12 Jan 2019 10:42:00 +0300 Subject: [PATCH] Migrate from classnames to nicer clsx (#855) * Migrate from classnames to nicer clsx * Update size snapshot --- docs/package-lock.json | 29 +++++++++++------- docs/package.json | 3 +- .../CustomElementsDatePicker.example.jsx | 6 ++-- docs/src/_shared/Code.tsx | 4 +-- docs/src/_shared/PropTypesTable.jsx | 4 +-- docs/src/layout/Layout.tsx | 8 ++--- lib/.size-snapshot.json | 24 +++++++-------- lib/package-lock.json | 30 ++++++++++--------- lib/package.json | 4 +-- lib/src/DatePicker/components/Day.tsx | 4 +-- .../DatePicker/components/SlideTransition.tsx | 6 ++-- lib/src/DatePicker/components/Year.tsx | 4 +-- .../components/DateTimePickerHeader.tsx | 4 +-- lib/src/TimePicker/TimePicker.tsx | 4 +-- lib/src/TimePicker/components/ClockNumber.tsx | 4 +-- .../TimePicker/components/ClockPointer.tsx | 6 ++-- lib/src/_shared/ModalDialog.tsx | 8 ++--- lib/src/_shared/PickerToolbar.tsx | 6 ++-- lib/src/_shared/ToolbarButton.tsx | 6 ++-- 19 files changed, 86 insertions(+), 78 deletions(-) diff --git a/docs/package-lock.json b/docs/package-lock.json index 8638cd5ed8173b..3ffa1f212591b5 100644 --- a/docs/package-lock.json +++ b/docs/package-lock.json @@ -987,11 +987,6 @@ "loader-utils": "^1.1.0" } }, - "@types/classnames": { - "version": "2.2.7", - "resolved": "https://registry.npmjs.org/@types/classnames/-/classnames-2.2.7.tgz", - "integrity": "sha512-rzOhiQ55WzAiFgXRtitP/ZUT8iVNyllEpylJ5zHzR4vArUvMB39GTk+Zon/uAM0JxEFAWnwsxC2gH8s+tZ3Myg==" - }, "@types/history": { "version": "4.7.2", "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.2.tgz", @@ -1094,6 +1089,14 @@ "@types/react": "*" } }, + "@types/react-text-mask": { + "version": "5.4.3", + "resolved": "https://registry.npmjs.org/@types/react-text-mask/-/react-text-mask-5.4.3.tgz", + "integrity": "sha512-+/uibOQ07X4om3+dPMpxUGdw76u4d4HQ9qCPs2syFtwmpTlnOyAJaIW89t+QX/DXI+Ar+SKch6A4stoLg5RdLw==", + "requires": { + "@types/react": "*" + } + }, "@types/react-transition-group": { "version": "2.0.15", "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-2.0.15.tgz", @@ -3144,6 +3147,11 @@ "shallow-clone": "^0.1.2" } }, + "clsx": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.0.1.tgz", + "integrity": "sha512-PtvbklBG/M2NVzwaYqTGcD+EqMXLNrec1lpgNkz07CoOsYnXsCBjde24Tki8wBKi9jrWX2rJnmKoMJoYUc3zhQ==" + }, "co": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz", @@ -9089,15 +9097,16 @@ } }, "material-ui-pickers": { - "version": "2.0.5", - "resolved": "https://registry.npmjs.org/material-ui-pickers/-/material-ui-pickers-2.0.5.tgz", - "integrity": "sha512-0FJgdZoNLRPqswMeZELF8mfFcOpGBHgc9XakKAyWD0w0Wr1Iw7WnUKeakIlMVR7nX5oEDYJKl3l1KrTjyzCHyA==", + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/material-ui-pickers/-/material-ui-pickers-2.1.1.tgz", + "integrity": "sha512-p4qxZv+kkhFAGdw172lFLmbA127kUS8XkqlTPWu2km7f+FRHzk1b4GwP63FEXB+dzhj+xa5VJ7WltaLxUMROTg==", "requires": { + "@types/react-text-mask": "^5.4.3", "classnames": "^2.2.6", "keycode": "^2.2.0", - "react-event-listener": "^0.6.4", + "react-event-listener": "^0.6.5", "react-text-mask": "=5.4.1", - "react-transition-group": "^2.5.1", + "react-transition-group": "^2.5.2", "tslib": "^1.9.3" } }, diff --git a/docs/package.json b/docs/package.json index 440fc883bc8f03..bedcddf7fa6e0c 100644 --- a/docs/package.json +++ b/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", diff --git a/docs/src/Pages/Components/DatePicker/CustomElementsDatePicker.example.jsx b/docs/src/Pages/Components/DatePicker/CustomElementsDatePicker.example.jsx index 7e902a5f16c7bc..29c7b4d6127938 100644 --- a/docs/src/Pages/Components/DatePicker/CustomElementsDatePicker.example.jsx +++ b/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, }); diff --git a/docs/src/_shared/Code.tsx b/docs/src/_shared/Code.tsx index c33928eadfc1be..1953d06bfeaa32 100644 --- a/docs/src/_shared/Code.tsx +++ b/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 = ({ classes, language, text, withMargin }) => { return ( -
+
{theme => ( diff --git a/docs/src/_shared/PropTypesTable.jsx b/docs/src/_shared/PropTypesTable.jsx index c005ef709f89e9..dc5b87868e2086 100644 --- a/docs/src/_shared/PropTypesTable.jsx +++ b/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 => ( diff --git a/docs/src/layout/Layout.tsx b/docs/src/layout/Layout.tsx index a607a0db53d2be..f6f8f25ea4b519 100644 --- a/docs/src/layout/Layout.tsx +++ b/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 { @@ -162,12 +162,12 @@ class Layout extends Component {
diff --git a/lib/.size-snapshot.json b/lib/.size-snapshot.json index 0226505eb6519f..14eedd7e6b8712 100644 --- a/lib/.size-snapshot.json +++ b/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 } } diff --git a/lib/package-lock.json b/lib/package-lock.json index 52108fba00d6f6..9dbbb3dac32ec7 100644 --- a/lib/package-lock.json +++ b/lib/package-lock.json @@ -375,12 +375,6 @@ "integrity": "sha512-q6LuBI0t5u04f0Q4/R+cGBqIbZMtJkVvCSF+nTfFBBdQqQvJR/mNHeWjRkszyLl7oyf2rDoKUYMEjTw5AV0hiw==", "dev": true }, - "@types/classnames": { - "version": "2.2.7", - "resolved": "https://registry.npmjs.org/@types/classnames/-/classnames-2.2.7.tgz", - "integrity": "sha512-rzOhiQ55WzAiFgXRtitP/ZUT8iVNyllEpylJ5zHzR4vArUvMB39GTk+Zon/uAM0JxEFAWnwsxC2gH8s+tZ3Myg==", - "dev": true - }, "@types/enzyme": { "version": "3.1.15", "resolved": "https://registry.npmjs.org/@types/enzyme/-/enzyme-3.1.15.tgz", @@ -2024,7 +2018,8 @@ "classnames": { "version": "2.2.6", "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz", - "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==" + "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==", + "dev": true }, "cli-boxes": { "version": "1.0.0", @@ -2116,6 +2111,11 @@ "mimic-response": "^1.0.0" } }, + "clsx": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.0.1.tgz", + "integrity": "sha512-PtvbklBG/M2NVzwaYqTGcD+EqMXLNrec1lpgNkz07CoOsYnXsCBjde24Tki8wBKi9jrWX2rJnmKoMJoYUc3zhQ==" + }, "co": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz", @@ -4733,7 +4733,15 @@ "integrity": "sha512-E2s1b4GVbt8PyG+iaRN6ks8N0Oy2LOJz7SIMUwWWWx7Mr5Z08hKkfpkKQbOtOGqzkFpckDJHjjZ8qfigN2W86A==", "dev": true, "requires": { - "icu4c-data": "^0.61.2" + "icu4c-data": "^0.60.2" + }, + "dependencies": { + "icu4c-data": { + "version": "0.60.2", + "resolved": "https://registry.npmjs.org/icu4c-data/-/icu4c-data-0.60.2.tgz", + "integrity": "sha512-4ScORTYJPIDJRPtAkQWXfKqGk8u1ThOxFWCJ3jkq+rj/MU4cK6isCvhFiEjunivw1/bJ10LqNAaJ9pAK68DEZg==", + "dev": true + } } }, "function-bind": { @@ -5252,12 +5260,6 @@ "postcss": "^7.0.5" } }, - "icu4c-data": { - "version": "0.61.2", - "resolved": "http://registry.npmjs.org/icu4c-data/-/icu4c-data-0.61.2.tgz", - "integrity": "sha512-OrIR8R6XtBhBVVp/4SILT2SGvxpqfBbvyrg7J6DrhcurRZDma4skSRHk/VQt4xwEtH/3edzYflbz7Q+HY3vs5g==", - "dev": true - }, "ieee754": { "version": "1.1.12", "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.12.tgz", diff --git a/lib/package.json b/lib/package.json index da38af6020a2d7..06e1d233ef6a53 100644 --- a/lib/package.json +++ b/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", diff --git a/lib/src/DatePicker/components/Day.tsx b/lib/src/DatePicker/components/Day.tsx index 2bc1dc4b0bf852..997b94d0bcbd5c 100644 --- a/lib/src/DatePicker/components/Day.tsx +++ b/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 { 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, diff --git a/lib/src/DatePicker/components/SlideTransition.tsx b/lib/src/DatePicker/components/SlideTransition.tsx index 5ff33e8fb6c214..dfde71cb959804 100644 --- a/lib/src/DatePicker/components/SlideTransition.tsx +++ b/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 = ({ classes, - className, + className = null, children, transKey, slideDirection, }) => ( - + { = ({ ampm, }) => { return ( - +
{ return ( diff --git a/lib/src/TimePicker/components/ClockNumber.tsx b/lib/src/TimePicker/components/ClockNumber.tsx index 2f7214c345ce5b..c18e7bbf547f2b 100644 --- a/lib/src/TimePicker/components/ClockNumber.tsx +++ b/lib/src/TimePicker/components/ClockNumber.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'; @@ -65,7 +65,7 @@ export class ClockNumber extends React.Component { public render() { const { selected, label, index, classes, isInner } = this.props; - const className = classnames(classes.clockNumber, { + const className = clsx(classes.clockNumber, { [classes.selected]: selected, }); diff --git a/lib/src/TimePicker/components/ClockPointer.tsx b/lib/src/TimePicker/components/ClockPointer.tsx index 39a622cd11e1c9..fb92219ce10c18 100644 --- a/lib/src/TimePicker/components/ClockPointer.tsx +++ b/lib/src/TimePicker/components/ClockPointer.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 ClockType, { ClockTypeType } from '../../constants/ClockType'; @@ -65,12 +65,12 @@ export class ClockPointer extends React.Component { return (
diff --git a/lib/src/_shared/ModalDialog.tsx b/lib/src/_shared/ModalDialog.tsx index 5d1de4de556152..b15e7d4120c46e 100644 --- a/lib/src/_shared/ModalDialog.tsx +++ b/lib/src/_shared/ModalDialog.tsx @@ -3,7 +3,7 @@ import Dialog, { DialogProps } from '@material-ui/core/Dialog'; import DialogActions from '@material-ui/core/DialogActions'; import DialogContent from '@material-ui/core/DialogContent'; import { createStyles, WithStyles, withStyles } from '@material-ui/core/styles'; -import classnames from 'classnames'; +import clsx from 'clsx'; import * as React from 'react'; import EventListener from 'react-event-listener'; import { DIALOG_WIDTH } from '../constants/dimensions'; @@ -44,7 +44,7 @@ export const ModalDialog: React.SFC role="dialog" onClose={onDismiss} classes={{ - paper: classnames(classes.dialogRoot, { + paper: clsx(classes.dialogRoot, { [classes.dialogWithTabs]: showTabs, }), }} @@ -53,7 +53,7 @@ export const ModalDialog: React.SFC @@ -61,7 +61,7 @@ export const ModalDialog: React.SFC , WithStyles< const PickerToolbar: React.SFC = ({ children, - className, + className = null, classes, ...other }) => { return ( - + {children} ); diff --git a/lib/src/_shared/ToolbarButton.tsx b/lib/src/_shared/ToolbarButton.tsx index 237ebe351e3b0d..03968784b1d68a 100644 --- a/lib/src/_shared/ToolbarButton.tsx +++ b/lib/src/_shared/ToolbarButton.tsx @@ -1,7 +1,7 @@ import { Theme } from '@material-ui/core'; import withStyles, { WithStyles } from '@material-ui/core/styles/withStyles'; import Typography, { TypographyProps } from '@material-ui/core/Typography'; -import classnames from 'classnames'; +import clsx from 'clsx'; import * as PropTypes from 'prop-types'; import * as React from 'react'; import { ExtendMui } from '../typings/extendMui'; @@ -15,11 +15,11 @@ const ToolbarButton: React.SFC = ({ classes, selected, label, - className, + className = null, ...other }) => (