chore: lib classnames -> clsx

13 files changed, 37 insertions, 37 deletions

diff --git a/src/components/CollapsibleSectionHeader.js b/src/components/CollapsibleSectionHeader.js
index 3cd0a96..9c25d74 100644
--- a/src/components/CollapsibleSectionHeader.js
+++ b/src/components/CollapsibleSectionHeader.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { ChevronDown } from 'react-feather';
-import cx from 'classnames';
+import cx from 'clsx';
 
 import { SectionNameType } from './shared/Basic';
 import Button from './Button';
@@ -12,7 +12,7 @@ type Props = {
   type: string,
   qty?: number,
   toggle?: () => void,
-  isOpen?: boolean
+  isOpen?: boolean,
 };
 
 export default function Header({ name, type, toggle, isOpen, qty }: Props) {
diff --git a/src/components/ConnectionTable.js b/src/components/ConnectionTable.js
index 52fd1d6..a6c90b1 100644
--- a/src/components/ConnectionTable.js
+++ b/src/components/ConnectionTable.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { ChevronDown } from 'react-feather';
 import prettyBytes from '../misc/pretty-bytes';
 import { formatDistance } from 'date-fns';
-import cx from 'classnames';
+import cx from 'clsx';
 import { useTable, useSortBy } from 'react-table';
 
 import s from './ConnectionTable.module.css';
@@ -21,7 +21,7 @@ const columns = [
   { Header: 'Time', accessor: 'start' },
   { Header: 'Source IP', accessor: 'sourceIP' },
   { Header: 'Source Port', accessor: 'sourcePort' },
-  { Header: 'Destination IP', accessor: 'destinationIP' }
+  { Header: 'Destination IP', accessor: 'destinationIP' },
 ];
 
 function renderCell(cell, now) {
@@ -43,9 +43,9 @@ const sortById = { id: 'id', desc: true };
 const tableState = {
   sortBy: [
     // maintain a more stable order
-    sortById
+    sortById,
   ],
-  hiddenColumns: ['id']
+  hiddenColumns: ['id'],
 };
 
 function Table({ data }) {
@@ -55,17 +55,17 @@ function Table({ data }) {
       columns,
       data,
       initialState: tableState,
-      autoResetSortBy: false
+      autoResetSortBy: false,
     },
     useSortBy
   );
   return (
     <div {...getTableProps()}>
       <div className={s.thead}>
-        {headerGroups.map(headerGroup => {
+        {headerGroups.map((headerGroup) => {
           return (
             <div {...headerGroup.getHeaderGroupProps()} className={s.tr}>
-              {headerGroup.headers.map(column => (
+              {headerGroup.headers.map((column) => (
                 <div
                   {...column.getHeaderProps(column.getSortByToggleProps())}
                   className={s.th}
diff --git a/src/components/Field.js b/src/components/Field.js
index 8041a3b..fd5b0d3 100644
--- a/src/components/Field.js
+++ b/src/components/Field.js
@@ -1,14 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import cx from 'clsx';
 import s from './Field.module.css';
 
 const { useCallback } = React;
 
 export default function Field({ id, label, value, onChange, ...props }) {
-  const valueOnChange = useCallback(e => onChange(e), [onChange]);
+  const valueOnChange = useCallback((e) => onChange(e), [onChange]);
   const labelClassName = cx({
-    [s.floatAbove]: typeof value === 'string' && value !== ''
+    [s.floatAbove]: typeof value === 'string' && value !== '',
   });
   return (
     <div className={s.root}>
@@ -25,5 +25,5 @@ Field.propTypes = {
   type: PropTypes.oneOf(['text', 'number']),
   onChange: PropTypes.func,
   id: PropTypes.string,
-  label: PropTypes.string
+  label: PropTypes.string,
 };
diff --git a/src/components/Icon.js b/src/components/Icon.js
index 806f455..a14d4e8 100644
--- a/src/components/Icon.js
+++ b/src/components/Icon.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import cx from 'clsx';
 
 const Icon = ({ id, width = 20, height = 20, className, ...props }) => {
   const c = cx('icon', id, className);
@@ -16,7 +16,7 @@ Icon.propTypes = {
   id: PropTypes.string.isRequired,
   width: PropTypes.number,
   height: PropTypes.number,
-  className: PropTypes.string
+  className: PropTypes.string,
 };
 
 export default React.memo(Icon);
diff --git a/src/components/Logs.js b/src/components/Logs.js
index 8bc83cc..26c0c78 100644
--- a/src/components/Logs.js
+++ b/src/components/Logs.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import cx from 'clsx';
 import { connect } from './StateProvider';
 // import { useStoreState, useActions } from '../misc/store';
 
@@ -25,7 +25,7 @@ const colors = {
   info: '#454545',
   // info: '#147d14',
   warning: '#b99105',
-  error: '#c11c1c'
+  error: '#c11c1c',
 };
 
 function LogLine({ time, even, payload, type }) {
@@ -47,7 +47,7 @@ LogLine.propTypes = {
   time: PropTypes.string,
   even: PropTypes.bool,
   payload: PropTypes.string,
-  type: PropTypes.string
+  type: PropTypes.string,
 };
 
 function itemKey(index, data) {
@@ -67,7 +67,7 @@ const Row = memo(({ index, style, data }) => {
 function Logs({ dispatch, logLevel, apiConfig, logs }) {
   const { hostname, port, secret } = apiConfig;
   const appendLogInternal = useCallback(
-    log => {
+    (log) => {
       dispatch(appendLog(log));
     },
     [dispatch]
@@ -111,10 +111,10 @@ function Logs({ dispatch, logLevel, apiConfig, logs }) {
   );
 }
 
-const mapState = s => ({
+const mapState = (s) => ({
   logs: getLogsForDisplay(s),
   logLevel: getLogLevel(s),
-  apiConfig: getClashAPIConfig(s)
+  apiConfig: getClashAPIConfig(s),
 });
 
 export default connect(mapState)(Logs);
diff --git a/src/components/Modal.js b/src/components/Modal.js
index 6cf476d..c59a4f7 100644
--- a/src/components/Modal.js
+++ b/src/components/Modal.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Modal from 'react-modal';
-import cx from 'classnames';
+import cx from 'clsx';
 
 import s0 from './Modal.module.css';
 
@@ -33,7 +33,7 @@ ModalAPIConfig.propTypes = {
   onRequestClose: PropTypes.func.isRequired,
   children: PropTypes.node.isRequired,
   className: PropTypes.string,
-  overlayClassName: PropTypes.string
+  overlayClassName: PropTypes.string,
 };
 
 export default React.memo(ModalAPIConfig);
diff --git a/src/components/ModalCloseAllConnections.js b/src/components/ModalCloseAllConnections.js
index 8a06393..9404f42 100644
--- a/src/components/ModalCloseAllConnections.js
+++ b/src/components/ModalCloseAllConnections.js
@@ -2,7 +2,7 @@ import React from 'react';
 
 import Modal from 'react-modal';
 import Button from './Button';
-import cx from 'classnames';
+import cx from 'clsx';
 
 import modalStyle from './Modal.module.css';
 import s from './ModalCloseAllConnections.module.css';
@@ -18,7 +18,7 @@ export default function Comp({ isOpen, onRequestClose, primaryButtonOnTap }) {
     () => ({
       base: cx(modalStyle.content, s.cnt),
       afterOpen: s.afterOpen,
-      beforeClose: ''
+      beforeClose: '',
     }),
     []
   );
diff --git a/src/components/Proxy.js b/src/components/Proxy.js
index c694e55..939dcc4 100644
--- a/src/components/Proxy.js
+++ b/src/components/Proxy.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import cx from 'classnames';
+import cx from 'clsx';
 
 import { connect } from './StateProvider';
 import ProxyLatency from './ProxyLatency';
diff --git a/src/components/ProxyGroup.js b/src/components/ProxyGroup.js
index b1a53c0..d686a04 100644
--- a/src/components/ProxyGroup.js
+++ b/src/components/ProxyGroup.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import cx from 'classnames';
+import cx from 'clsx';
 import memoizeOne from 'memoize-one';
 
 import { connect, useStoreActions } from './StateProvider';
diff --git a/src/components/Selection.js b/src/components/Selection.js
index 12816f9..725d500 100644
--- a/src/components/Selection.js
+++ b/src/components/Selection.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { func, array, number } from 'prop-types';
-import cx from 'classnames';
+import cx from 'clsx';
 
 import s from './Selection.module.css';
 
@@ -8,7 +8,7 @@ export default function Selection({
   OptionComponent,
   optionPropsList,
   selectedIndex,
-  onChange
+  onChange,
 }) {
   return (
     // TODO a11y
@@ -20,7 +20,7 @@ export default function Selection({
           <div
             key={idx}
             className={className}
-            onClick={ev => {
+            onClick={(ev) => {
               ev.preventDefault();
               if (idx !== selectedIndex) {
                 onChange(idx);
@@ -39,7 +39,7 @@ Selection.propTypes = {
   OptionComponent: func,
   optionPropsList: array,
   selectedIndex: number,
-  onChange: func
+  onChange: func,
 };
 
 // for test
@@ -51,7 +51,7 @@ export function Option({ title }) {
         style={{
           width: 100,
           height: 60,
-          backgroundColor: '#eee'
+          backgroundColor: '#eee',
         }}
       >
         {title}
diff --git a/src/components/SideBar.js b/src/components/SideBar.js
index ff711bb..aa57403 100644
--- a/src/components/SideBar.js
+++ b/src/components/SideBar.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import cx from 'clsx';
 import { motion } from 'framer-motion';
 import { Link, useLocation } from 'react-router-dom';
 // import { Command, Activity, Globe, Link2, Settings, File } from 'react-feather';
diff --git a/src/components/SvgYacd.js b/src/components/SvgYacd.js
index b1bc8f0..6c91b15 100644
--- a/src/components/SvgYacd.js
+++ b/src/components/SvgYacd.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import cx from 'clsx';
 
 import s from './SvgYacd.module.css';
 
@@ -9,7 +9,7 @@ function SvgYacd({
   height = 320,
   animate = false,
   c0 = 'currentColor',
-  c1 = '#eee'
+  c1 = '#eee',
 }) {
   const faceClasName = cx({ [s.path]: animate });
   return (
@@ -42,7 +42,7 @@ function SvgYacd({
 
 SvgYacd.propTypes = {
   width: PropTypes.number,
-  height: PropTypes.number
+  height: PropTypes.number,
 };
 
 export default SvgYacd;
diff --git a/src/components/shared/BaseModal.js b/src/components/shared/BaseModal.js
index 8bbdbf4..3c32a15 100644
--- a/src/components/shared/BaseModal.js
+++ b/src/components/shared/BaseModal.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import Modal from 'react-modal';
-import cx from 'classnames';
+import cx from 'clsx';
 
 import modalStyle from '../Modal.module.css';
 import s from './BaseModal.module.css';