feat: Reduce bundle size by removing classnames (#322)

Gets rid of classnames dependency. This package was not being used for its main features anyway (just for emitting classnames conditionally).

Author: mrchief

.gitignore

@@ -45,3 +45,6 @@ dist
 # Webstorm cache
 .idea
 /webpack-stats.json
+
+# Mac crap
+.DS_Store

package.json

@@ -44,7 +44,6 @@
   ],
   "dependencies": {
     "array.partial": "^1.0.5",
-    "classnames": "^2.2.6",
     "react-infinite-scroll-component": "^4.0.2"
   },
   "devDependencies": {

src/index.js

@@ -6,7 +6,6 @@
  * license MIT
  * see https://github.com/dowjones/react-dropdown-tree-select
  */
-import cn from 'classnames/bind'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 
@@ -17,11 +16,9 @@ import Tree from './tree'
 import TreeManager from './tree-manager'
 import keyboardNavigation from './tree-manager/keyboardNavigation'
 
-import styles from './index.css'
+import './index.css'
 import { getAriaLabel } from './a11y'
 
-const cx = cn.bind(styles)
-
 class DropdownTreeSelect extends Component {
   static propTypes = {
     data: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,
@@ -286,17 +283,17 @@ class DropdownTreeSelect extends Component {
     return (
       <div
         id={this.clientId}
-        className={cx(this.props.className, 'react-dropdown-tree-select')}
+        className={[this.props.className && this.props.className, 'react-dropdown-tree-select']
+          .filter(Boolean)
+          .join(' ')}
         ref={node => {
           this.node = node
         }}
       >
         <div
-          className={cx(
-            'dropdown',
-            { 'simple-select': mode === 'simpleSelect' },
-            { 'radio-select': mode === 'radioSelect' }
-          )}
+          className={['dropdown', mode === 'simpleSelect' && 'simple-select', mode === 'radioSelect' && 'radio-select']
+            .filter(Boolean)
+            .join(' ')}
         >
           <Trigger onTrigger={this.onTrigger} showDropdown={showDropdown} {...commonProps} tags={tags}>
             <Input

src/input/index.js

@@ -1,18 +1,19 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
-import cn from 'classnames/bind'
 import Tag from '../tag'
-import styles from './index.css'
+import './index.css'
 import { getDataset, debounce } from '../utils'
 import { getAriaLabel } from '../a11y'
 
-const cx = cn.bind(styles)
-
 const getTags = (tags = [], onDelete, readOnly, disabled, labelRemove) =>
   tags.map(tag => {
     const { _id, label, tagClassName, dataset } = tag
     return (
-      <li className={cx('tag-item', tagClassName)} key={`tag-item-${_id}`} {...getDataset(dataset)}>
+      <li
+        className={['tag-item', tagClassName && tagClassName.toString()].filter(Boolean).join(' ')}
+        key={`tag-item-${_id}`}
+        {...getDataset(dataset)}
+      >
         <Tag
           label={label}
           id={_id}
@@ -65,14 +66,14 @@ class Input extends PureComponent {
     } = this.props
 
     return (
-      <ul className={cx('tag-list')}>
+      <ul className="tag-list">
         {getTags(tags, onTagRemove, readOnly, disabled, texts.labelRemove)}
-        <li className={cx('tag-item')}>
+        <li className="tag-item">
           <input
             type="text"
             disabled={disabled}
             ref={inputRef}
-            className={cx('search')}
+            className="search"
             placeholder={texts.placeholder || 'Choose...'}
             onKeyDown={onKeyDown}
             onChange={this.handleInputChange}

src/tag/index.js

@@ -1,10 +1,7 @@
-import cn from 'classnames/bind'
 import PropTypes from 'prop-types'
 import React, { PureComponent } from 'react'
 
-import styles from './index.css'
-
-const cx = cn.bind(styles)
+import './index.css'
 
 export const getTagId = id => `${id}_tag`
 
@@ -44,11 +41,11 @@ class Tag extends PureComponent {
 
     const tagId = getTagId(id)
     const buttonId = `${id}_button`
-    const className = cx('tag-remove', { readOnly }, { disabled })
+    const className = ['tag-remove', readOnly && 'readOnly', disabled && 'disabled'].filter(Boolean).join(' ')
     const isDisabled = readOnly || disabled
 
     return (
-      <span className={cx('tag')} id={tagId} aria-label={label}>
+      <span className="tag" id={tagId} aria-label={label}>
         {label}
         <button
           id={buttonId}

src/tree-node/index.js

@@ -1,4 +1,3 @@
-import cn from 'classnames/bind'
 import PropTypes from 'prop-types'
 import React, { PureComponent } from 'react'
 
@@ -7,9 +6,7 @@ import Actions from './actions'
 import NodeLabel from './node-label'
 import Toggle from './toggle'
 
-import styles from './index.css'
-
-const cx = cn.bind(styles)
+import './index.css'
 
 const isLeaf = children => isEmpty(children)
 
@@ -30,22 +27,22 @@ const getNodeCx = props => {
     _focused: focused,
   } = props
 
-  return cx(
+  return [
     'node',
-    {
-      leaf: isLeaf(_children),
-      tree: !isLeaf(_children),
-      disabled,
-      hide,
-      'match-in-children': keepTreeOnSearch && matchInChildren,
-      'match-in-parent': keepTreeOnSearch && keepChildrenOnSearch && matchInParent,
-      partial: showPartiallySelected && partial,
-      readOnly,
-      checked,
-      focused,
-    },
-    className
-  )
+    isLeaf(_children) && 'leaf',
+    !isLeaf(_children) && 'tree',
+    disabled && 'disabled',
+    hide && 'hide',
+    keepTreeOnSearch && matchInChildren && 'match-in-children',
+    keepTreeOnSearch && keepChildrenOnSearch && matchInParent && 'match-in-parent',
+    showPartiallySelected && partial && 'partial',
+    readOnly && 'readOnly',
+    checked && 'checked',
+    focused && 'focused',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ')
 }
 
 class TreeNode extends PureComponent {

src/tree-node/node-label.js

@@ -1,13 +1,8 @@
-import cn from 'classnames/bind'
 import PropTypes from 'prop-types'
 import React, { PureComponent } from 'react'
 import Checkbox from '../checkbox'
 import RadioButton from '../radio'
 
-import styles from './index.css'
-
-const cx = cn.bind(styles)
-
 class NodeLabel extends PureComponent {
   static propTypes = {
     id: PropTypes.string.isRequired,
@@ -55,6 +50,7 @@ class NodeLabel extends PureComponent {
     }
 
     const sharedProps = { id, value, checked, disabled, readOnly, tabIndex: -1 }
+    const className = ['checkbox-item', mode === 'simpleSelect' && 'simple-select'].filter(Boolean).join(' ')
 
     return (
       <label title={title || label} htmlFor={id}>
@@ -63,7 +59,7 @@ class NodeLabel extends PureComponent {
         ) : (
           <Checkbox
             name={id}
-            className={cx('checkbox-item', { 'simple-select': mode === 'simpleSelect' })}
+            className={className}
             indeterminate={showPartiallySelected && partial}
             onChange={this.handleCheckboxChange}
             {...sharedProps}

src/tree-node/toggle.js

@@ -1,9 +1,5 @@
-import cn from 'classnames/bind'
 import PropTypes from 'prop-types'
 import React, { PureComponent } from 'react'
-import styles from './index.css'
-
-const cx = cn.bind(styles)
 
 class Toggle extends PureComponent {
   static propTypes = {
@@ -30,7 +26,7 @@ class Toggle extends PureComponent {
     const { expanded, isLeaf } = this.props
     if (isLeaf) return null
 
-    const toggleCx = cx('toggle', { expanded, collapsed: !expanded })
+    const toggleCx = ['toggle', expanded && 'expanded', !expanded && 'collapsed'].filter(Boolean).join(' ')
     return (
       <i
         role="button"

src/trigger/index.js

@@ -1,14 +1,9 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
-import cn from 'classnames/bind'
 
 import { getAriaLabel } from '../a11y'
 import { getTagId } from '../tag'
 
-import styles from '../index.css'
-
-const cx = cn.bind(styles)
-
 class Trigger extends PureComponent {
   static propTypes = {
     onTrigger: PropTypes.func,
@@ -69,14 +64,16 @@ class Trigger extends PureComponent {
   render() {
     const { disabled, readOnly, showDropdown } = this.props
 
-    const dropdownTriggerClassname = cx({
-      'dropdown-trigger': true,
-      arrow: true,
-      disabled,
-      readOnly,
-      top: showDropdown,
-      bottom: !showDropdown,
-    })
+    const dropdownTriggerClassname = [
+      'dropdown-trigger',
+      'arrow',
+      disabled && 'disabled',
+      readOnly && 'readOnly',
+      showDropdown && 'top',
+      !showDropdown && 'bottom',
+    ]
+      .filter(Boolean)
+      .join(' ')
 
     return (
       <a

yarn.lock

@@ -2831,7 +2831,7 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-classnames@^2.2.5, classnames@^2.2.6:
+classnames@^2.2.5:
   version "2.2.6"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"