fix classnames import

finos · Dec 21, 2023 · c5abfca · c5abfca
1 parent e542872
commit c5abfca
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 50 deletions.
diff --git a/vuu-ui/packages/vuu-layout/src/layout-header/ActionButton.tsx b/vuu-ui/packages/vuu-layout/src/layout-header/ActionButton.tsx
@@ -1,22 +1,33 @@
-import classnames from 'classnames';
-import { HTMLAttributes, MouseEvent } from 'react';
+import classnames from "clsx";
+import { HTMLAttributes, MouseEvent } from "react";
 
-export interface ActionButtonProps extends Omit<HTMLAttributes<HTMLButtonElement>, 'onClick'> {
-  actionId: 'maximize' | 'minimize' | 'restore' | 'tearout';
+export interface ActionButtonProps
+  extends Omit<HTMLAttributes<HTMLButtonElement>, "onClick"> {
+  actionId: "maximize" | "minimize" | "restore" | "tearout";
   iconName?: string;
-  onClick: (evt: MouseEvent, actionId: 'maximize' | 'minimize' | 'restore' | 'tearout') => void;
+  onClick: (
+    evt: MouseEvent,
+    actionId: "maximize" | "minimize" | "restore" | "tearout"
+  ) => void;
 }
 
-const ActionButton = ({ actionId, className, iconName, onClick, ...props }: ActionButtonProps) => {
+const ActionButton = ({
+  actionId,
+  className,
+  iconName,
+  onClick,
+  ...props
+}: ActionButtonProps) => {
   const handleClick = (evt: MouseEvent) => {
     onClick(evt, actionId);
   };
   return (
     <button
       {...props}
-      className={classnames('ActionButton', className)}
+      className={classnames("ActionButton", className)}
       onClick={handleClick}
-      title="Close View"></button>
+      title="Close View"
+    ></button>
   );
 };
 

diff --git a/vuu-ui/packages/vuu-shell/src/connection-status/ConnectionStatusIcon.tsx b/vuu-ui/packages/vuu-shell/src/connection-status/ConnectionStatusIcon.tsx
@@ -1,49 +1,58 @@
-import React, { useEffect, useState } from 'react';
-import cx from 'classnames';
-import './ConnectionStatusIcon.css';
+import React, { useEffect, useState } from "react";
+import cx from "clsx";
 
-type connectionStatus = 'connected' | 'reconnected' | 'connecting' | 'disconnected';
+import "./ConnectionStatusIcon.css";
+
+type connectionStatus =
+  | "connected"
+  | "reconnected"
+  | "connecting"
+  | "disconnected";
 
 interface ConnectionStatusProps {
-	connectionStatus: connectionStatus
-	className?: string;
-	props?: unknown;
-	element?: string;
+  connectionStatus: connectionStatus;
+  className?: string;
+  props?: unknown;
+  element?: string;
 }
 
-export const ConnectionStatusIcon = ({ connectionStatus, className, element = 'span', ...props}: ConnectionStatusProps) => {
-	const [classBase, setClassBase] = useState<string>('vuuConnectingStatus');
-	useEffect(() => {
-		switch(connectionStatus) {
-			case 'connected':
-			case 'reconnected':
-				setClassBase('vuuActiveStatus');
-				break;
-			case 'connecting':
-				setClassBase('vuuConnectingStatus');
-				break;
-			case 'disconnected':
-				setClassBase('vuuDisconnectedStatus');
-				break;
-			default:
-				break;
-		}
-	}, [connectionStatus]);
+export const ConnectionStatusIcon = ({
+  connectionStatus,
+  className,
+  element = "span",
+  ...props
+}: ConnectionStatusProps) => {
+  const [classBase, setClassBase] = useState<string>("vuuConnectingStatus");
+  useEffect(() => {
+    switch (connectionStatus) {
+      case "connected":
+      case "reconnected":
+        setClassBase("vuuActiveStatus");
+        break;
+      case "connecting":
+        setClassBase("vuuConnectingStatus");
+        break;
+      case "disconnected":
+        setClassBase("vuuDisconnectedStatus");
+        break;
+      default:
+        break;
+    }
+  }, [connectionStatus]);
 
-	const statusIcon = React.createElement (
-		element,
-		{
-			...props,
-			className: cx('vuuStatus vuuIcon', classBase, className)
-		},
-	)
+  const statusIcon = React.createElement(element, {
+    ...props,
+    className: cx("vuuStatus vuuIcon", classBase, className),
+  });
 
-	return (
-		<>
-			<div className='vuuStatus-container salt-theme'>
-				{statusIcon}
-				<div	className='vuuStatus-text'>Status: {connectionStatus.toUpperCase()}</div>
-			</div>
-		</>
-	)
-}
+  return (
+    <>
+      <div className="vuuStatus-container salt-theme">
+        {statusIcon}
+        <div className="vuuStatus-text">
+          Status: {connectionStatus.toUpperCase()}
+        </div>
+      </div>
+    </>
+  );
+};