Remove dependency on 'classnames'

Author: IvanGoncharov

demo/IntrospectionModal.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import classNames from 'classnames';
 
 import Grid from '@material-ui/core/Grid';
 import Modal from '@material-ui/core/Modal';
@@ -154,9 +153,7 @@ export class IntrospectionModal extends React.Component<IntrospectionModalProps>
         {presetNames.map((name) => (
           <div
             key={name}
-            className={classNames('preset-card', {
-              '-active': name === activePreset,
-            })}
+            className={`preset-card ${name === activePreset ? '-active' : ''}`}
             onClick={() => this.handlePresetChange(name)}
           >
             <h2>{name}</h2>

package-lock.json

@@ -62,7 +62,6 @@
   "dependencies": {
     "@f/animate": "^1.0.1",
     "@material-ui/core": "^3.9.3",
-    "classnames": "2.3.1",
     "commonmark": "0.30.0",
     "lodash": "4.17.21",
     "svg-pan-zoom": "^3.6.1",

package.json

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import classNames from 'classnames';
 
 import './Argument.css';
 
@@ -16,7 +15,7 @@ export default class Argument extends React.Component<ArgumentProps> {
   render() {
     const { arg, expanded, onTypeLink } = this.props;
     return (
-      <span className={classNames('arg-wrap', { '-expanded': expanded })}>
+      <span className={`arg-wrap ${expanded ? '-expanded' : ''}`}>
         <Markdown text={arg.description} className="arg-description" />
         <span className="arg">
           <span className="arg-name">{arg.name}</span>

src/components/doc-explorer/Argument.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import classNames from 'classnames';
 
 import './Description.css';
 
@@ -16,16 +15,11 @@ export default class Description extends React.Component<DescriptionProps> {
 
     if (text)
       return (
-        <Markdown
-          text={text}
-          className={classNames('description-box', className)}
-        />
+        <Markdown text={text} className={`description-box ${className}`} />
       );
 
     return (
-      <div
-        className={classNames('description-box', className, '-no-description')}
-      >
+      <div className={`description-box ${className} -no-description`}>
         <p>No Description</p>
       </div>
     );

src/components/doc-explorer/Description.tsx

@@ -1,6 +1,5 @@
 import * as _ from 'lodash';
 import * as React from 'react';
-import classNames from 'classnames';
 
 import './TypeDoc.css';
 
@@ -88,18 +87,17 @@ export default class TypeDoc extends React.Component<TypeDocProps> {
 
       if (types.length === 0) return null;
 
+      const isSelected = type.id === selectedId;
       return (
         <div className="doc-category">
           <div className="title">{typesTitle}</div>
           {_.map(types, (type) => {
             let props: any = {
               key: type.id,
-              className: classNames('item', {
-                '-selected': type.id === selectedId,
-              }),
+              className: `item ${isSelected ? '-selected' : ''}`,
               onClick: () => onSelectEdge(type.id),
             };
-            if (type.id === selectedId) props.ref = 'selectedItem';
+            if (isSelected) props.ref = 'selectedItem';
             return (
               <div {...props}>
                 <TypeLink
@@ -133,25 +131,23 @@ export default class TypeDoc extends React.Component<TypeDocProps> {
         <div className="doc-category">
           <div className="title">fields</div>
           {fields.map((field) => {
+            const hasArgs = !_.isEmpty(field.args);
+            const isSelected = field.id === selectedId;
+
             let props: any = {
               key: field.name,
-              className: classNames('item', {
-                '-selected': field.id === selectedId,
-                '-with-args': !_.isEmpty(field.args),
-              }),
+              className: `item ${isSelected ? '-selected' : ''} ${
+                hasArgs ? '-with-args' : ''
+              }`,
               onClick: () => onSelectEdge(field.id),
             };
-            if (field.id === selectedId) props.ref = 'selectedItem';
+            if (isSelected) props.ref = 'selectedItem';
             return (
               <div {...props}>
                 <a className="field-name">
                   {highlightTerm(field.name, filter)}
                 </a>
-                <span
-                  className={classNames('args-wrap', {
-                    '-empty': _.isEmpty(field.args),
-                  })}
-                >
+                <span className={`args-wrap ${hasArgs ? '' : '-empty'}`}>
                   {!_.isEmpty(field.args) && (
                     <span key="args" className="args">
                       {_.map(field.args, (arg) => (

src/components/doc-explorer/TypeDoc.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import classNames from 'classnames';
 
 import './TypeInfoPopover.css';
 
@@ -43,11 +42,7 @@ export default class ScalarDetails extends React.Component<
       });
     }
     return (
-      <div
-        className={classNames('type-info-popover', {
-          '-opened': !!type,
-        })}
-      >
+      <div className={`type-info-popover ${type != null ? '-opened' : ''}`}>
         <IconButton className="closeButton" onClick={() => this.close()}>
           <CloseIcon />
         </IconButton>

src/components/doc-explorer/TypeInfoPopover.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import classNames from 'classnames';
 import {
   isBuiltInScalarType,
   isScalarType,
@@ -29,7 +28,7 @@ export default class TypeLink extends React.Component<TypeLinkProps> {
 
     return (
       <a
-        className={classNames('type-name', className)}
+        className={`type-name ${className}`}
         onClick={(event) => {
           event.stopPropagation();
           onClick(type);

src/components/doc-explorer/TypeLink.tsx

@@ -1,6 +1,5 @@
 import * as _ from 'lodash';
 import * as React from 'react';
-import classNames from 'classnames';
 import { isMatch } from '../../utils';
 
 import './TypeList.css';
@@ -42,7 +41,7 @@ export default class TypeList extends React.Component<TypeListProps> {
       }
 
       return (
-        <div key={type.id} className={classNames('typelist-item', className)}>
+        <div key={type.id} className={`typelist-item ${className}`}>
           <TypeLink type={type} onClick={onTypeLink} filter={filter} />
           <FocusTypeButton onClick={() => onFocusType(type)} />
           <Description className="-doc-type" text={type.description} />

src/components/doc-explorer/TypeList.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import classNames from 'classnames';
 
 import './LoadingAnimation.css';
 
@@ -13,7 +12,7 @@ export default class LoadingAnimation extends React.Component<LoadingAnimationPr
   render() {
     const { loading } = this.props;
     return (
-      <div className={classNames({ 'loading-box': true, visible: loading })}>
+      <div className={`loading-box ${loading ? 'visible' : ''}`}>
         <span className="loading-animation">
           <VoyagerIcon />
           <h1> Transmitting... </h1>