chore(deps): remove denpendency classnames.

Author: jaywcjlove

package.json

@@ -44,9 +44,7 @@
     ]
   },
   "dependencies": {
-    "@types/classnames": "^2.2.11",
     "@uiw/react-markdown-preview": "2.1.1",
-    "classnames": "2.2.6",
     "codemirror": "5.59.2"
   },
   "devDependencies": {

src/commands/fullscreen.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useRef, useState } from 'react';
-import classnames from 'classnames';
 import { ICommand} from './';
 import { IMarkdownEditor } from '../';
 
@@ -58,9 +57,7 @@ const Fullscreen: React.FC<{ command: ICommand, editorProps: IMarkdownEditor & O
     <button
       onClick={() => setFull(!full)}
       type="button"
-      className={classnames({
-        'active': full
-      })}
+      className={full ? 'active' : ''}
     >
       {props.command.icon}
     </button>

src/commands/preview.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react';
-import classnames from 'classnames';
 import { ICommand} from './';
 import { IMarkdownEditor } from '../';
 
@@ -44,9 +43,7 @@ const Preview: React.FC<{ command: ICommand, editorProps: IMarkdownEditor & Opti
     <button
       onClick={() => setVisible(!visible)}
       type="button"
-      className={classnames({
-        'active': visible
-      })}
+      className={visible ? 'active' : ''}
     >
       {props.command.icon}
     </button>

src/components/ToolBar/index.tsx

@@ -1,4 +1,3 @@
-import classnames from 'classnames';
 import * as React from "react";
 import { IProps } from '../../common/props';
 import CodeMirror from 'codemirror';
@@ -27,9 +26,7 @@ export default function ToolBar(props: IToolBarProps) {
     }
   }
   return (
-    <div className={classnames(`${prefixCls}-toolbar`, className, {
-      [`${prefixCls}-toolbar-mode`]: mode,
-    })} {...htmlProps}>
+    <div className={`${prefixCls}-toolbar ${className} ${mode ? `${prefixCls}-toolbar-mode` : ''}`} {...htmlProps}>
       {[...toolbars].map((command, key) => {
         let buttonProps: React.ButtonHTMLAttributes<HTMLButtonElement> = {
           type: 'button',

src/index.tsx

@@ -1,4 +1,3 @@
-import classnames from 'classnames';
 import React, { useState, createRef, useRef, useEffect } from 'react';
 import { IProps } from './common/props';
 import CodeMirror, { ICodeMirror } from './components/CodeMirror';
@@ -49,10 +48,10 @@ export default function MarkdownEditor(props: IMarkdownEditor) {
   }
   return (
     <div ref={container}>
-      <div className={classnames(prefixCls, className)}>
+      <div className={`${prefixCls || ''} ${className || ''}`}>
         <ToolBar {...toolBarProps} toolbars={toolbarsMode} mode />
         <ToolBar {...toolBarProps} toolbars={toolbars} />
-        <div className={classnames(`${prefixCls}-content`)}>
+        <div className={`${prefixCls}-content`}>
           <div className={`${prefixCls}-content-editor`} ref={containerEditor}>
             {visibleEditor && (
               <CodeMirror
@@ -69,7 +68,7 @@ export default function MarkdownEditor(props: IMarkdownEditor) {
           <MarkdownPreview
             {...previewProps}
             data-visible={!!visible}
-            className={classnames(`${prefixCls}-preview`)}
+            className={`${prefixCls}-preview`}
             ref={(instance) => {
               if(instance && instance.mdp) {
                 previewContainer.current = instance.mdp.current