make code filed highlight optional

NilFoundation · Oct 3, 2024 · 22e76a1 · 22e76a1
1 parent 3d8b9ec
commit 22e76a1
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 6 deletions.
diff --git a/src/components/codefield/CodeField.tsx b/src/components/codefield/CodeField.tsx
@@ -27,6 +27,7 @@ export type CodeFieldProps = {
   onChange?: ReactCodeMirrorProps["onChange"];
   size?: CODE_FIELD_SIZE;
   codeMirrorClassName?: string;
+  highlightOnHover?: boolean;
 } & HTMLAttributes<HTMLDivElement>;
 
 const CodeFieldRenderFunction: ForwardRefRenderFunction<HTMLDivElement, CodeFieldProps> = (
@@ -44,6 +45,7 @@ const CodeFieldRenderFunction: ForwardRefRenderFunction<HTMLDivElement, CodeFiel
     onChange,
     size = CODE_FIELD_SIZE.medium,
     codeMirrorClassName,
+    highlightOnHover = true,
     ...rest
   },
   ref
@@ -54,7 +56,9 @@ const CodeFieldRenderFunction: ForwardRefRenderFunction<HTMLDivElement, CodeFiel
     [showLineNumbers]
   );
   const mergedExtensions = [styleOverridesExtention, ...extensions];
-  const computedCn = className ? `${css(s.getContainerStyles(size))} ${className}` : css(s.getContainerStyles(size));
+  const computedCn = className
+    ? `${css(s.getContainerStyles(size, highlightOnHover))} ${className}`
+    : css(s.getContainerStyles(size, highlightOnHover));
 
   if (showLineNumbers) {
     mergedExtensions.push(prefixLineNumberExtension);

diff --git a/src/components/codefield/styles.ts b/src/components/codefield/styles.ts
@@ -3,7 +3,7 @@ import { COLORS } from "../../shared";
 import { expandProperty } from "inline-style-expand-shorthand";
 import { CODE_FIELD_SIZE } from "./types";
 
-const getContainerStyles = (size: CODE_FIELD_SIZE): StyleObject => ({
+const getContainerStyles = (size: CODE_FIELD_SIZE, highlightOnHover: boolean): StyleObject => ({
   position: "relative",
   overflow: "hidden",
   background: COLORS.gray900,
@@ -14,10 +14,12 @@ const getContainerStyles = (size: CODE_FIELD_SIZE): StyleObject => ({
   alignItems: "flex-start",
   flexWrap: "nowrap",
   gap: "16px",
-  ...expandProperty("transition", "background 0.15s"),
-  ":hover": {
-    background: COLORS.gray800,
-  },
+  ...(highlightOnHover && {
+    ...expandProperty("transition", "background 0.15s"),
+    ":hover": {
+      background: COLORS.gray800,
+    },
+  }),
   fontSize: size === CODE_FIELD_SIZE.small ? "14px" : "16px",
 });