@mantine/code-highlight/cjs/CodeHighlightTabs/CodeHighlightTabs.cjs

Code highlight with Mantine theme

'use client';
'use strict';

var jsxRuntime = require('react/jsx-runtime');
var react = require('react');
var core = require('@mantine/core');
var hooks = require('@mantine/hooks');
var CodeHighlight = require('../CodeHighlight/CodeHighlight.cjs');
var FileIcon = require('./FileIcon.cjs');
var CodeHighlight_module = require('../CodeHighlight.module.css.cjs');

const defaultProps = {};
const CodeHighlightTabs = core.factory((_props, ref) => {
  const props = core.useProps("CodeHighlightTabs", defaultProps, _props);
  const {
    classNames,
    className,
    style,
    styles,
    unstyled,
    vars,
    defaultActiveTab,
    activeTab,
    onTabChange,
    defaultExpanded,
    expanded,
    onExpandedChange,
    code,
    getFileIcon,
    withCopyButton,
    withExpandButton,
    withBorder,
    radius,
    maxCollapsedHeight,
    copyLabel,
    copiedLabel,
    expandCodeLabel,
    collapseCodeLabel,
    background,
    controls,
    codeColorScheme,
    ...others
  } = props;
  const getStyles = core.useStyles({
    name: "CodeHighlightTabs",
    classes: CodeHighlight_module,
    props,
    className,
    style,
    classNames,
    styles,
    unstyled,
    vars
  });
  const [value, setValue] = hooks.useUncontrolled({
    defaultValue: defaultActiveTab,
    value: activeTab,
    finalValue: 0,
    onChange: onTabChange
  });
  const [_expanded, setExpanded] = hooks.useUncontrolled({
    defaultValue: defaultExpanded,
    value: expanded,
    finalValue: true,
    onChange: onExpandedChange
  });
  const { resolvedClassNames, resolvedStyles } = core.useResolvedStylesApi({
    classNames,
    styles,
    props
  });
  react.useEffect(() => {
    if (value >= code.length) {
      setValue(code.length - 1);
    }
  }, [value, code]);
  if (code.length <= 0) {
    return null;
  }
  const currentCode = code[value] || { code: "", language: "tsx", fileName: "" };
  const files = code.map((node, index) => /* @__PURE__ */ react.createElement(
    core.UnstyledButton,
    {
      ...getStyles("file"),
      key: node.fileName,
      mod: { active: index === value },
      onClick: () => setValue(index),
      "data-color-scheme": codeColorScheme
    },
    /* @__PURE__ */ jsxRuntime.jsx(
      FileIcon.FileIcon,
      {
        fileIcon: node.icon,
        getFileIcon,
        fileName: node.fileName,
        ...getStyles("fileIcon")
      },
      "file-icon"
    ),
    /* @__PURE__ */ jsxRuntime.jsx("span", { children: node.fileName }, "file-name")
  ));
  return /* @__PURE__ */ jsxRuntime.jsxs(core.Box, { ref, ...getStyles("root"), ...others, children: [
    /* @__PURE__ */ jsxRuntime.jsx(core.ScrollArea, { type: "never", dir: "ltr", offsetScrollbars: false, ...getStyles("filesScrollarea"), children: /* @__PURE__ */ jsxRuntime.jsx("div", { ...getStyles("files"), children: files }) }),
    /* @__PURE__ */ jsxRuntime.jsx(
      CodeHighlight.CodeHighlight,
      {
        code: currentCode.code,
        language: currentCode.language,
        expanded: _expanded,
        onExpandedChange: setExpanded,
        withCopyButton,
        withExpandButton,
        withBorder,
        radius,
        maxCollapsedHeight,
        copiedLabel,
        copyLabel,
        expandCodeLabel,
        collapseCodeLabel,
        background,
        controls,
        codeColorScheme,
        __withOffset: true,
        __staticSelector: "CodeHighlightTabs",
        classNames: resolvedClassNames,
        styles: resolvedStyles
      }
    )
  ] });
});
CodeHighlightTabs.displayName = "@mantine/code-highlight/CodeHighlightTabs";
CodeHighlightTabs.classes = CodeHighlight_module;

exports.CodeHighlightTabs = CodeHighlightTabs;
//# sourceMappingURL=CodeHighlightTabs.cjs.map