[@mantine/core-highlight] Add withCopyButton prop support to CodeHi…

…ghlightTabs (#5608)
mantinedev · Jan 27, 2024 · 705c386 · 705c386
1 parent d4897cf
commit 705c386
Showing 1 changed file with 21 additions and 14 deletions.
diff --git a/packages/@mantine/code-highlight/src/CodeHighlightTabs.tsx b/packages/@mantine/code-highlight/src/CodeHighlightTabs.tsx
@@ -99,6 +99,9 @@ export interface CodeHighlightTabsProps
 
   /** Determines whether to show the expand button, `false` by default */
   withExpandButton?: boolean;
+
+  /** Determines whether copy button should be displayed, `true` by default */
+  withCopyButton?: boolean;
 }
 
 export type CodeHighlightTabsFactory = Factory<{
@@ -114,6 +117,7 @@ const defaultProps: Partial<CodeHighlightTabsProps> = {
   maxCollapsedHeight: rem('8rem'),
   expandCodeLabel: 'Expand code',
   collapseCodeLabel: 'Collapse code',
+  withCopyButton: true,
 };
 
 const varsResolver = createVarsResolver<CodeHighlightTabsFactory>((_, { maxCollapsedHeight }) => ({
@@ -145,6 +149,7 @@ export const CodeHighlightTabs = factory<CodeHighlightTabsFactory>((_props, ref)
     expandCodeLabel,
     collapseCodeLabel,
     withExpandButton,
+    withCopyButton,
     mod,
     ...others
   } = props;
@@ -231,20 +236,22 @@ export const CodeHighlightTabs = factory<CodeHighlightTabsFactory>((_props, ref)
               </Tooltip>
             )}
 
-            <CopyButton value={currentCode.code.trim()}>
-              {({ copied, copy }) => (
-                <Tooltip label={copied ? copiedLabel : copyLabel} fz="sm" position="left">
-                  <ActionIcon
-                    onClick={copy}
-                    variant="none"
-                    {...getStyles('control')}
-                    aria-label={copied ? copiedLabel : copyLabel}
-                  >
-                    <CopyIcon copied={copied} />
-                  </ActionIcon>
-                </Tooltip>
-              )}
-            </CopyButton>
+            {withCopyButton && (
+              <CopyButton value={currentCode.code.trim()}>
+                {({ copied, copy }) => (
+                  <Tooltip label={copied ? copiedLabel : copyLabel} fz="sm" position="left">
+                    <ActionIcon
+                      onClick={copy}
+                      variant="none"
+                      {...getStyles('control')}
+                      aria-label={copied ? copiedLabel : copyLabel}
+                    >
+                      <CopyIcon copied={copied} />
+                    </ActionIcon>
+                  </Tooltip>
+                )}
+              </CopyButton>
+            )}
           </div>
         </div>
       )}