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

Code highlight with Mantine theme

{"version":3,"file":"CodeHighlightTabs.cjs","names":["UnstyledButton","FileIcon","Box","ScrollArea","CodeHighlight","classes"],"sources":["../../src/CodeHighlightTabs/CodeHighlightTabs.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport {\n  Box,\n  BoxProps,\n  ElementProps,\n  factory,\n  Factory,\n  ScrollArea,\n  StylesApiProps,\n  UnstyledButton,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '@mantine/core';\nimport { useUncontrolled } from '@mantine/hooks';\nimport {\n  CodeHighlight,\n  CodeHighlightSettings,\n  CodeHighlightStylesNames,\n} from '../CodeHighlight/CodeHighlight';\nimport { FileIcon } from './FileIcon';\nimport classes from '../CodeHighlight.module.css';\n\n/** Available shiki languages for default Mantine shiki instance.\n *  Should be used only with *.mantine.dev projects */\nexport type CodeHighlightDefaultLanguage = 'tsx' | 'scss' | 'html' | 'bash' | 'json';\n\nexport interface CodeHighlightTabsCode {\n  language?: CodeHighlightDefaultLanguage | (string & {});\n  code: string;\n  fileName?: string;\n  icon?: React.ReactNode;\n}\n\nexport type CodeHighlightTabsStylesNames =\n  | 'root'\n  | 'files'\n  | 'file'\n  | 'fileIcon'\n  | 'filesScrollarea'\n  | CodeHighlightStylesNames;\n\nexport interface CodeHighlightTabsProps\n  extends\n    CodeHighlightSettings,\n    BoxProps,\n    StylesApiProps<CodeHighlightTabsFactory>,\n    ElementProps<'div'> {\n  /** Code to highlight with meta data (file name and icon) */\n  code: CodeHighlightTabsCode[];\n\n  /** Function that returns icon based on file name */\n  getFileIcon?: (fileName: string) => React.ReactNode;\n\n  /** Default active tab index */\n  defaultActiveTab?: number;\n\n  /** Index of controlled active tab state */\n  activeTab?: number;\n\n  /** Called when tab changes */\n  onTabChange?: (tab: number) => void;\n}\n\nexport type CodeHighlightTabsFactory = Factory<{\n  props: CodeHighlightTabsProps;\n  ref: HTMLDivElement;\n  stylesNames: CodeHighlightTabsStylesNames;\n}>;\n\nexport const CodeHighlightTabs = factory<CodeHighlightTabsFactory>((_props) => {\n  const props = useProps('CodeHighlightTabs', null, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    defaultActiveTab,\n    activeTab,\n    onTabChange,\n    defaultExpanded,\n    expanded,\n    onExpandedChange,\n    code,\n    getFileIcon,\n    withCopyButton,\n    withExpandButton,\n    withBorder,\n    radius,\n    maxCollapsedHeight,\n    copyLabel,\n    copiedLabel,\n    expandCodeLabel,\n    collapseCodeLabel,\n    background,\n    controls,\n    codeColorScheme,\n    withLineNumbers,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<CodeHighlightTabsFactory>({\n    name: 'CodeHighlightTabs',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n  });\n\n  const [value, setValue] = useUncontrolled({\n    defaultValue: defaultActiveTab,\n    value: activeTab,\n    finalValue: 0,\n    onChange: onTabChange,\n  });\n\n  const [_expanded, setExpanded] = useUncontrolled({\n    defaultValue: defaultExpanded,\n    value: expanded,\n    finalValue: true,\n    onChange: onExpandedChange,\n  });\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<CodeHighlightTabsFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  useEffect(() => {\n    if (value >= code.length) {\n      setValue(code.length - 1);\n    }\n  }, [value, code]);\n\n  if (code.length <= 0) {\n    return null;\n  }\n\n  const currentCode = code[value] || { code: '', language: 'tsx', fileName: '' };\n\n  const files = code.map((node, index) => (\n    <UnstyledButton\n      {...getStyles('file')}\n      key={node.fileName}\n      mod={{ active: index === value }}\n      onClick={() => setValue(index)}\n      data-color-scheme={codeColorScheme}\n    >\n      <FileIcon\n        fileIcon={node.icon}\n        getFileIcon={getFileIcon}\n        fileName={node.fileName}\n        key=\"file-icon\"\n        {...getStyles('fileIcon')}\n      />\n      <span key=\"file-name\">{node.fileName}</span>\n    </UnstyledButton>\n  ));\n\n  return (\n    <Box {...getStyles('root')} {...others}>\n      <ScrollArea type=\"never\" dir=\"ltr\" offsetScrollbars={false} {...getStyles('filesScrollarea')}>\n        <div {...getStyles('files')}>{files}</div>\n      </ScrollArea>\n\n      <CodeHighlight\n        code={currentCode.code}\n        language={currentCode.language}\n        expanded={_expanded}\n        onExpandedChange={setExpanded}\n        withCopyButton={withCopyButton}\n        withExpandButton={withExpandButton}\n        withBorder={withBorder}\n        radius={radius}\n        maxCollapsedHeight={maxCollapsedHeight}\n        copiedLabel={copiedLabel}\n        copyLabel={copyLabel}\n        expandCodeLabel={expandCodeLabel}\n        collapseCodeLabel={collapseCodeLabel}\n        background={background}\n        controls={controls}\n        codeColorScheme={codeColorScheme}\n        withLineNumbers={withLineNumbers}\n        __withOffset\n        __staticSelector=\"CodeHighlightTabs\"\n        classNames={resolvedClassNames}\n        styles={resolvedStyles}\n        attributes={attributes}\n      />\n    </Box>\n  );\n});\n\nCodeHighlightTabs.displayName = '@mantine/code-highlight/CodeHighlightTabs';\nCodeHighlightTabs.classes = classes;\n"],"mappings":";;;;;;;;;AAsEA,MAAa,qBAAA,GAAA,cAAA,UAAuD,WAAW;CAC7E,MAAM,SAAA,GAAA,cAAA,UAAiB,qBAAqB,MAAM,MAAM;CACxD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,kBACA,WACA,aACA,iBACA,UACA,kBACA,MACA,aACA,gBACA,kBACA,YACA,QACA,oBACA,WACA,aACA,iBACA,mBACA,YACA,UACA,iBACA,iBACA,YACA,GAAG,WACD;CAEJ,MAAM,aAAA,GAAA,cAAA,WAAgD;EACpD,MAAM;EACN,SAAA,6BAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,CAAC,OAAO,aAAA,GAAA,eAAA,iBAA4B;EACxC,cAAc;EACd,OAAO;EACP,YAAY;EACZ,UAAU;CACZ,CAAC;CAED,MAAM,CAAC,WAAW,gBAAA,GAAA,eAAA,iBAA+B;EAC/C,cAAc;EACd,OAAO;EACP,YAAY;EACZ,UAAU;CACZ,CAAC;CAED,MAAM,EAAE,oBAAoB,oBAAA,GAAA,cAAA,sBAAkE;EAC5F;EACA;EACA;CACF,CAAC;CAED,CAAA,GAAA,MAAA,iBAAgB;EACd,IAAI,SAAS,KAAK,QAChB,SAAS,KAAK,SAAS,CAAC;CAE5B,GAAG,CAAC,OAAO,IAAI,CAAC;CAEhB,IAAI,KAAK,UAAU,GACjB,OAAO;CAGT,MAAM,cAAc,KAAK,UAAU;EAAE,MAAM;EAAI,UAAU;EAAO,UAAU;CAAG;CAE7E,MAAM,QAAQ,KAAK,KAAK,MAAM,UAC5B,iBAAA,GAAA,MAAA,eAACA,cAAAA,gBAAD;EACE,GAAI,UAAU,MAAM;EACpB,KAAK,KAAK;EACV,KAAK,EAAE,QAAQ,UAAU,MAAM;EAC/B,eAAe,SAAS,KAAK;EAC7B,qBAAmB;CAUL,GARd,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,UAAD;EACE,UAAU,KAAK;EACF;EACb,UAAU,KAAK;EAEf,GAAI,UAAU,UAAU;CACzB,GAFK,WAEL,GACD,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAA,UAAuB,KAAK,SAAe,GAAjC,WAAiC,CAC7B,CACjB;CAED,OACE,iBAAA,GAAA,kBAAA,MAACC,cAAAA,KAAD;EAAK,GAAI,UAAU,MAAM;EAAG,GAAI;YAAhC,CACE,iBAAA,GAAA,kBAAA,KAACC,cAAAA,YAAD;GAAY,MAAK;GAAQ,KAAI;GAAM,kBAAkB;GAAO,GAAI,UAAU,iBAAiB;aACzF,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,GAAI,UAAU,OAAO;cAAI;GAAW,CAAA;EAC/B,CAAA,GAEZ,iBAAA,GAAA,kBAAA,KAACC,sBAAAA,eAAD;GACE,MAAM,YAAY;GAClB,UAAU,YAAY;GACtB,UAAU;GACV,kBAAkB;GACF;GACE;GACN;GACJ;GACY;GACP;GACF;GACM;GACE;GACP;GACF;GACO;GACA;GACjB,cAAA;GACA,kBAAiB;GACjB,YAAY;GACZ,QAAQ;GACI;EACb,CAAA,CACE;;AAET,CAAC;AAED,kBAAkB,cAAc;AAChC,kBAAkB,UAAUC,6BAAAA"}