@mantine/code-highlight 7.1.3 → 7.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/CodeHighlightTabs.js.map +1 -1
- package/cjs/use-highlight.js +3 -0
- package/cjs/use-highlight.js.map +1 -1
- package/esm/CodeHighlightTabs.mjs.map +1 -1
- package/esm/use-highlight.mjs +3 -0
- package/esm/use-highlight.mjs.map +1 -1
- package/lib/CodeHighlightTabs.d.ts +3 -3
- package/package.json +3 -3
- package/src/CodeHighlight.story.tsx +19 -1
- package/src/CodeHighlightTabs.tsx +3 -3
- package/src/use-highlight.ts +4 -0
- package/tsconfig.build.tsbuildinfo +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeHighlightTabs.js","sources":["../src/CodeHighlightTabs.tsx"],"sourcesContent":["import React from 'react';\nimport hljs from 'highlight.js';\nimport cx from 'clsx';\nimport { useUncontrolled } from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n StylesApiProps,\n factory,\n ElementProps,\n useProps,\n useStyles,\n CopyButton,\n Tooltip,\n ActionIcon,\n UnstyledButton,\n ScrollArea,\n createVarsResolver,\n rem,\n Factory,\n} from '@mantine/core';\nimport { CopyIcon } from './CopyIcon';\nimport { FileIcon } from './FileIcon';\nimport { ExpandIcon } from './ExpandIcon';\nimport _classes from './CodeHighlight.module.css';\nimport themeClasses from './CodeHighlight.theme.module.css';\n\nconst classes = { ..._classes, root: cx(_classes.root, themeClasses.theme) };\n\nexport type CodeHighlightTabsStylesNames =\n | 'root'\n | 'code'\n | 'codeWrapper'\n | 'showCodeButton'\n | 'pre'\n | 'controls'\n | 'control'\n | 'header'\n | 'file'\n | 'files'\n | 'fileIcon';\n\nexport type CodeHighlightTabsCssVariables = {\n root: '--ch-max-collapsed-height';\n};\n\nexport interface CodeHighlightTabsCode {\n language?: string;\n code: string;\n fileName?: string;\n icon?: React.ReactNode;\n}\n\nexport interface CodeHighlightTabsProps\n extends BoxProps,\n StylesApiProps<CodeHighlightTabsFactory>,\n ElementProps<'div'> {\n /** Code to highlight with meta data (file name and icon) */\n code: CodeHighlightTabsCode | CodeHighlightTabsCode[];\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 /** Determines whether header with file names and copy button should be rendered, `true` by default */\n withHeader?: boolean;\n\n /** Copy tooltip label, `'Copy code'` by default */\n copyLabel?: string;\n\n /** Copied tooltip label, `'Copied'` by default */\n copiedLabel?: string;\n\n /** Function that returns icon based on file name */\n getFileIcon?(fileName: string): React.ReactNode;\n\n /** `max-height` of code in collapsed state */\n maxCollapsedHeight?: React.CSSProperties['maxHeight'];\n\n /** Controlled expanded state */\n expanded?: boolean;\n\n /** Uncontrolled expanded state initial value */\n defaultExpanded?: boolean;\n\n /** Called when expanded state changes */\n onExpandedChange?(expanded: boolean): void;\n\n /** Expand button label and tooltip, `'Expand code'` by default */\n expandCodeLabel?: string;\n\n /** Collapse button label and tooltip, `'Collapse code'` by default */\n collapseCodeLabel?: string;\n\n /** Determines whether to show the expand button, `false` by default */\n withExpandButton?: boolean;\n}\n\nexport type CodeHighlightTabsFactory = Factory<{\n props: CodeHighlightTabsProps;\n ref: HTMLDivElement;\n stylesNames: CodeHighlightTabsStylesNames;\n}>;\n\nconst defaultProps: Partial<CodeHighlightTabsProps> = {\n withHeader: true,\n copyLabel: 'Copy code',\n copiedLabel: 'Copied',\n maxCollapsedHeight: rem('8rem'),\n expandCodeLabel: 'Expand code',\n collapseCodeLabel: 'Collapse code',\n};\n\nconst varsResolver = createVarsResolver<CodeHighlightTabsFactory>((_, { maxCollapsedHeight }) => ({\n root: { '--ch-max-collapsed-height': rem(maxCollapsedHeight) },\n}));\n\nexport const CodeHighlightTabs = factory<CodeHighlightTabsFactory>((_props, ref) => {\n const props = useProps('CodeHighlightTabs', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n children,\n code,\n defaultActiveTab,\n activeTab,\n onTabChange,\n withHeader,\n copiedLabel,\n copyLabel,\n getFileIcon,\n maxCollapsedHeight,\n expanded,\n defaultExpanded,\n onExpandedChange,\n expandCodeLabel,\n collapseCodeLabel,\n withExpandButton,\n ...others\n } = props;\n\n const getStyles = useStyles<CodeHighlightTabsFactory>({\n name: 'CodeHighlightTabs',\n props,\n classes,\n className,\n style,\n classNames,\n styles,\n unstyled,\n vars,\n varsResolver,\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 nodes = Array.isArray(code) ? code : [code];\n const currentCode = nodes[value];\n\n const highlighted = hljs.highlight(currentCode.code.trim(), {\n language: currentCode.language!,\n }).value;\n\n const files = nodes.map((node, index) => (\n <UnstyledButton\n {...getStyles('file')}\n key={node.fileName}\n mod={{ active: index === value }}\n onClick={() => setValue(index)}\n >\n <FileIcon\n fileIcon={node.icon}\n getFileIcon={getFileIcon}\n fileName={node.fileName}\n {...getStyles('fileIcon')}\n />\n <span>{node.fileName}</span>\n </UnstyledButton>\n ));\n\n return (\n <Box {...getStyles('root')} mod={{ collapsed: !_expanded }} ref={ref} {...others} dir=\"ltr\">\n {withHeader && (\n <div {...getStyles('header')}>\n <ScrollArea type=\"never\" dir=\"ltr\" offsetScrollbars={false}>\n <div {...getStyles('files')}>{files}</div>\n </ScrollArea>\n <div {...getStyles('controls')}>\n {withExpandButton && (\n <Tooltip\n label={_expanded ? collapseCodeLabel : expandCodeLabel}\n fz=\"sm\"\n position=\"left\"\n >\n <ActionIcon\n onClick={() => setExpanded(!_expanded)}\n variant=\"none\"\n aria-label={_expanded ? collapseCodeLabel : expandCodeLabel}\n {...getStyles('control')}\n >\n <ExpandIcon expanded={_expanded} />\n </ActionIcon>\n </Tooltip>\n )}\n\n <CopyButton value={currentCode.code.trim()}>\n {({ copied, copy }) => (\n <Tooltip label={copied ? copiedLabel : copyLabel} fz=\"sm\" position=\"left\">\n <ActionIcon\n onClick={copy}\n variant=\"none\"\n {...getStyles('control')}\n aria-label={copied ? copiedLabel : copyLabel}\n >\n <CopyIcon copied={copied} />\n </ActionIcon>\n </Tooltip>\n )}\n </CopyButton>\n </div>\n </div>\n )}\n\n <ScrollArea type=\"auto\" dir=\"ltr\" offsetScrollbars={false}>\n <Box {...getStyles('codeWrapper')} mod={{ expanded: _expanded }}>\n <pre {...getStyles('pre')}>\n <code {...getStyles('code')} dangerouslySetInnerHTML={{ __html: highlighted }} />\n </pre>\n </Box>\n </ScrollArea>\n <UnstyledButton\n {...getStyles('showCodeButton')}\n mod={{ hidden: _expanded }}\n onClick={() => setExpanded(true)}\n >\n {expandCodeLabel}\n </UnstyledButton>\n </Box>\n );\n});\n\nCodeHighlightTabs.displayName = '@mantine/core/CodeHighlightTabs';\nCodeHighlightTabs.classes = classes;\n"],"names":["_classes","cx","themeClasses","rem","createVarsResolver","factory","useProps","useStyles","useUncontrolled","hljs","React","UnstyledButton","FileIcon","Box","ScrollArea","Tooltip","ActionIcon","ExpandIcon","CopyButton","CopyIcon"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"CodeHighlightTabs.js","sources":["../src/CodeHighlightTabs.tsx"],"sourcesContent":["import React from 'react';\nimport hljs from 'highlight.js';\nimport cx from 'clsx';\nimport { useUncontrolled } from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n StylesApiProps,\n factory,\n ElementProps,\n useProps,\n useStyles,\n CopyButton,\n Tooltip,\n ActionIcon,\n UnstyledButton,\n ScrollArea,\n createVarsResolver,\n rem,\n Factory,\n} from '@mantine/core';\nimport { CopyIcon } from './CopyIcon';\nimport { FileIcon } from './FileIcon';\nimport { ExpandIcon } from './ExpandIcon';\nimport _classes from './CodeHighlight.module.css';\nimport themeClasses from './CodeHighlight.theme.module.css';\n\nconst classes = { ..._classes, root: cx(_classes.root, themeClasses.theme) };\n\nexport type CodeHighlightTabsStylesNames =\n | 'root'\n | 'code'\n | 'codeWrapper'\n | 'showCodeButton'\n | 'pre'\n | 'controls'\n | 'control'\n | 'header'\n | 'file'\n | 'files'\n | 'fileIcon';\n\nexport type CodeHighlightTabsCssVariables = {\n root: '--ch-max-collapsed-height';\n};\n\nexport interface CodeHighlightTabsCode {\n language?: string;\n code: string;\n fileName?: string;\n icon?: React.ReactNode;\n}\n\nexport interface CodeHighlightTabsProps\n extends BoxProps,\n StylesApiProps<CodeHighlightTabsFactory>,\n ElementProps<'div'> {\n /** Code to highlight with meta data (file name and icon) */\n code: CodeHighlightTabsCode | CodeHighlightTabsCode[];\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 /** Determines whether header with file names and copy button should be rendered, `true` by default */\n withHeader?: boolean;\n\n /** Copy tooltip label, `'Copy code'` by default */\n copyLabel?: string;\n\n /** Copied tooltip label, `'Copied'` by default */\n copiedLabel?: string;\n\n /** Function that returns icon based on file name */\n getFileIcon?: (fileName: string) => React.ReactNode;\n\n /** `max-height` of code in collapsed state */\n maxCollapsedHeight?: React.CSSProperties['maxHeight'];\n\n /** Controlled expanded state */\n expanded?: boolean;\n\n /** Uncontrolled expanded state initial value */\n defaultExpanded?: boolean;\n\n /** Called when expanded state changes */\n onExpandedChange?: (expanded: boolean) => void;\n\n /** Expand button label and tooltip, `'Expand code'` by default */\n expandCodeLabel?: string;\n\n /** Collapse button label and tooltip, `'Collapse code'` by default */\n collapseCodeLabel?: string;\n\n /** Determines whether to show the expand button, `false` by default */\n withExpandButton?: boolean;\n}\n\nexport type CodeHighlightTabsFactory = Factory<{\n props: CodeHighlightTabsProps;\n ref: HTMLDivElement;\n stylesNames: CodeHighlightTabsStylesNames;\n}>;\n\nconst defaultProps: Partial<CodeHighlightTabsProps> = {\n withHeader: true,\n copyLabel: 'Copy code',\n copiedLabel: 'Copied',\n maxCollapsedHeight: rem('8rem'),\n expandCodeLabel: 'Expand code',\n collapseCodeLabel: 'Collapse code',\n};\n\nconst varsResolver = createVarsResolver<CodeHighlightTabsFactory>((_, { maxCollapsedHeight }) => ({\n root: { '--ch-max-collapsed-height': rem(maxCollapsedHeight) },\n}));\n\nexport const CodeHighlightTabs = factory<CodeHighlightTabsFactory>((_props, ref) => {\n const props = useProps('CodeHighlightTabs', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n children,\n code,\n defaultActiveTab,\n activeTab,\n onTabChange,\n withHeader,\n copiedLabel,\n copyLabel,\n getFileIcon,\n maxCollapsedHeight,\n expanded,\n defaultExpanded,\n onExpandedChange,\n expandCodeLabel,\n collapseCodeLabel,\n withExpandButton,\n ...others\n } = props;\n\n const getStyles = useStyles<CodeHighlightTabsFactory>({\n name: 'CodeHighlightTabs',\n props,\n classes,\n className,\n style,\n classNames,\n styles,\n unstyled,\n vars,\n varsResolver,\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 nodes = Array.isArray(code) ? code : [code];\n const currentCode = nodes[value];\n\n const highlighted = hljs.highlight(currentCode.code.trim(), {\n language: currentCode.language!,\n }).value;\n\n const files = nodes.map((node, index) => (\n <UnstyledButton\n {...getStyles('file')}\n key={node.fileName}\n mod={{ active: index === value }}\n onClick={() => setValue(index)}\n >\n <FileIcon\n fileIcon={node.icon}\n getFileIcon={getFileIcon}\n fileName={node.fileName}\n {...getStyles('fileIcon')}\n />\n <span>{node.fileName}</span>\n </UnstyledButton>\n ));\n\n return (\n <Box {...getStyles('root')} mod={{ collapsed: !_expanded }} ref={ref} {...others} dir=\"ltr\">\n {withHeader && (\n <div {...getStyles('header')}>\n <ScrollArea type=\"never\" dir=\"ltr\" offsetScrollbars={false}>\n <div {...getStyles('files')}>{files}</div>\n </ScrollArea>\n <div {...getStyles('controls')}>\n {withExpandButton && (\n <Tooltip\n label={_expanded ? collapseCodeLabel : expandCodeLabel}\n fz=\"sm\"\n position=\"left\"\n >\n <ActionIcon\n onClick={() => setExpanded(!_expanded)}\n variant=\"none\"\n aria-label={_expanded ? collapseCodeLabel : expandCodeLabel}\n {...getStyles('control')}\n >\n <ExpandIcon expanded={_expanded} />\n </ActionIcon>\n </Tooltip>\n )}\n\n <CopyButton value={currentCode.code.trim()}>\n {({ copied, copy }) => (\n <Tooltip label={copied ? copiedLabel : copyLabel} fz=\"sm\" position=\"left\">\n <ActionIcon\n onClick={copy}\n variant=\"none\"\n {...getStyles('control')}\n aria-label={copied ? copiedLabel : copyLabel}\n >\n <CopyIcon copied={copied} />\n </ActionIcon>\n </Tooltip>\n )}\n </CopyButton>\n </div>\n </div>\n )}\n\n <ScrollArea type=\"auto\" dir=\"ltr\" offsetScrollbars={false}>\n <Box {...getStyles('codeWrapper')} mod={{ expanded: _expanded }}>\n <pre {...getStyles('pre')}>\n <code {...getStyles('code')} dangerouslySetInnerHTML={{ __html: highlighted }} />\n </pre>\n </Box>\n </ScrollArea>\n <UnstyledButton\n {...getStyles('showCodeButton')}\n mod={{ hidden: _expanded }}\n onClick={() => setExpanded(true)}\n >\n {expandCodeLabel}\n </UnstyledButton>\n </Box>\n );\n});\n\nCodeHighlightTabs.displayName = '@mantine/core/CodeHighlightTabs';\nCodeHighlightTabs.classes = classes;\n"],"names":["_classes","cx","themeClasses","rem","createVarsResolver","factory","useProps","useStyles","useUncontrolled","hljs","React","UnstyledButton","FileIcon","Box","ScrollArea","Tooltip","ActionIcon","ExpandIcon","CopyButton","CopyIcon"],"mappings":"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"}
|
package/cjs/use-highlight.js
CHANGED
package/cjs/use-highlight.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-highlight.js","sources":["../src/use-highlight.ts"],"sourcesContent":["import { useState, useEffect } from 'react';\nimport hljs from 'highlight.js';\n\ninterface UseHighlightInput {\n code: string;\n language: string;\n highlightOnClient: boolean | undefined;\n}\n\nexport function useHighlight({ code, language, highlightOnClient }: UseHighlightInput) {\n const getHighlightedCode = () => hljs.highlight(code.trim(), { language: language! }).value;\n const [highlighted, setHighlighted] = useState(!highlightOnClient);\n const [highlightedCode, setHighlightedCode] = useState(\n highlightOnClient ? code : getHighlightedCode()\n );\n\n const getCodeProps = () =>\n highlighted\n ? { dangerouslySetInnerHTML: { __html: highlightedCode } }\n : { children: code.trim() };\n\n useEffect(() => {\n if (highlightOnClient) {\n setHighlightedCode(getHighlightedCode());\n setHighlighted(true);\n }\n }, []);\n\n return getCodeProps;\n}\n"],"names":["hljs","useState","useEffect"],"mappings":";;;;;;;;;;;;AAEO,SAAS,YAAY,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,iBAAiB,EAAE,EAAE;AACpE,EAAE,MAAM,kBAAkB,GAAG,MAAMA,aAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC;AACnF,EAAE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAGC,cAAQ,CAAC,CAAC,iBAAiB,CAAC,CAAC;AACrE,EAAE,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAGA,cAAQ;AACxD,IAAI,iBAAiB,GAAG,IAAI,GAAG,kBAAkB,EAAE;AACnD,GAAG,CAAC;AACJ,EAAE,MAAM,YAAY,GAAG,MAAM,WAAW,GAAG,EAAE,uBAAuB,EAAE,EAAE,MAAM,EAAE,eAAe,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC;AAChI,EAAEC,eAAS,CAAC,MAAM;AAClB,IAAI,IAAI,iBAAiB,EAAE;AAC3B,MAAM,kBAAkB,CAAC,kBAAkB,EAAE,CAAC,CAAC;AAC/C,MAAM,cAAc,CAAC,IAAI,CAAC,CAAC;AAC3B,KAAK;AACL,GAAG,EAAE,EAAE,CAAC,CAAC;AACT,EAAE,OAAO,YAAY,CAAC;AACtB;;"}
|
|
1
|
+
{"version":3,"file":"use-highlight.js","sources":["../src/use-highlight.ts"],"sourcesContent":["import { useState, useEffect } from 'react';\nimport hljs from 'highlight.js';\n\ninterface UseHighlightInput {\n code: string;\n language: string;\n highlightOnClient: boolean | undefined;\n}\n\nexport function useHighlight({ code, language, highlightOnClient }: UseHighlightInput) {\n const getHighlightedCode = () => hljs.highlight(code.trim(), { language: language! }).value;\n const [highlighted, setHighlighted] = useState(!highlightOnClient);\n const [highlightedCode, setHighlightedCode] = useState(\n highlightOnClient ? code : getHighlightedCode()\n );\n\n const getCodeProps = () =>\n highlighted\n ? { dangerouslySetInnerHTML: { __html: highlightedCode } }\n : { children: code.trim() };\n\n useEffect(() => {\n if (highlightOnClient) {\n setHighlightedCode(getHighlightedCode());\n setHighlighted(true);\n }\n }, []);\n\n useEffect(() => {\n setHighlightedCode(getHighlightedCode());\n }, [code]);\n\n return getCodeProps;\n}\n"],"names":["hljs","useState","useEffect"],"mappings":";;;;;;;;;;;;AAEO,SAAS,YAAY,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,iBAAiB,EAAE,EAAE;AACpE,EAAE,MAAM,kBAAkB,GAAG,MAAMA,aAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC;AACnF,EAAE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAGC,cAAQ,CAAC,CAAC,iBAAiB,CAAC,CAAC;AACrE,EAAE,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAGA,cAAQ;AACxD,IAAI,iBAAiB,GAAG,IAAI,GAAG,kBAAkB,EAAE;AACnD,GAAG,CAAC;AACJ,EAAE,MAAM,YAAY,GAAG,MAAM,WAAW,GAAG,EAAE,uBAAuB,EAAE,EAAE,MAAM,EAAE,eAAe,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC;AAChI,EAAEC,eAAS,CAAC,MAAM;AAClB,IAAI,IAAI,iBAAiB,EAAE;AAC3B,MAAM,kBAAkB,CAAC,kBAAkB,EAAE,CAAC,CAAC;AAC/C,MAAM,cAAc,CAAC,IAAI,CAAC,CAAC;AAC3B,KAAK;AACL,GAAG,EAAE,EAAE,CAAC,CAAC;AACT,EAAEA,eAAS,CAAC,MAAM;AAClB,IAAI,kBAAkB,CAAC,kBAAkB,EAAE,CAAC,CAAC;AAC7C,GAAG,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;AACb,EAAE,OAAO,YAAY,CAAC;AACtB;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeHighlightTabs.mjs","sources":["../src/CodeHighlightTabs.tsx"],"sourcesContent":["import React from 'react';\nimport hljs from 'highlight.js';\nimport cx from 'clsx';\nimport { useUncontrolled } from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n StylesApiProps,\n factory,\n ElementProps,\n useProps,\n useStyles,\n CopyButton,\n Tooltip,\n ActionIcon,\n UnstyledButton,\n ScrollArea,\n createVarsResolver,\n rem,\n Factory,\n} from '@mantine/core';\nimport { CopyIcon } from './CopyIcon';\nimport { FileIcon } from './FileIcon';\nimport { ExpandIcon } from './ExpandIcon';\nimport _classes from './CodeHighlight.module.css';\nimport themeClasses from './CodeHighlight.theme.module.css';\n\nconst classes = { ..._classes, root: cx(_classes.root, themeClasses.theme) };\n\nexport type CodeHighlightTabsStylesNames =\n | 'root'\n | 'code'\n | 'codeWrapper'\n | 'showCodeButton'\n | 'pre'\n | 'controls'\n | 'control'\n | 'header'\n | 'file'\n | 'files'\n | 'fileIcon';\n\nexport type CodeHighlightTabsCssVariables = {\n root: '--ch-max-collapsed-height';\n};\n\nexport interface CodeHighlightTabsCode {\n language?: string;\n code: string;\n fileName?: string;\n icon?: React.ReactNode;\n}\n\nexport interface CodeHighlightTabsProps\n extends BoxProps,\n StylesApiProps<CodeHighlightTabsFactory>,\n ElementProps<'div'> {\n /** Code to highlight with meta data (file name and icon) */\n code: CodeHighlightTabsCode | CodeHighlightTabsCode[];\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 /** Determines whether header with file names and copy button should be rendered, `true` by default */\n withHeader?: boolean;\n\n /** Copy tooltip label, `'Copy code'` by default */\n copyLabel?: string;\n\n /** Copied tooltip label, `'Copied'` by default */\n copiedLabel?: string;\n\n /** Function that returns icon based on file name */\n getFileIcon?(fileName: string): React.ReactNode;\n\n /** `max-height` of code in collapsed state */\n maxCollapsedHeight?: React.CSSProperties['maxHeight'];\n\n /** Controlled expanded state */\n expanded?: boolean;\n\n /** Uncontrolled expanded state initial value */\n defaultExpanded?: boolean;\n\n /** Called when expanded state changes */\n onExpandedChange?(expanded: boolean): void;\n\n /** Expand button label and tooltip, `'Expand code'` by default */\n expandCodeLabel?: string;\n\n /** Collapse button label and tooltip, `'Collapse code'` by default */\n collapseCodeLabel?: string;\n\n /** Determines whether to show the expand button, `false` by default */\n withExpandButton?: boolean;\n}\n\nexport type CodeHighlightTabsFactory = Factory<{\n props: CodeHighlightTabsProps;\n ref: HTMLDivElement;\n stylesNames: CodeHighlightTabsStylesNames;\n}>;\n\nconst defaultProps: Partial<CodeHighlightTabsProps> = {\n withHeader: true,\n copyLabel: 'Copy code',\n copiedLabel: 'Copied',\n maxCollapsedHeight: rem('8rem'),\n expandCodeLabel: 'Expand code',\n collapseCodeLabel: 'Collapse code',\n};\n\nconst varsResolver = createVarsResolver<CodeHighlightTabsFactory>((_, { maxCollapsedHeight }) => ({\n root: { '--ch-max-collapsed-height': rem(maxCollapsedHeight) },\n}));\n\nexport const CodeHighlightTabs = factory<CodeHighlightTabsFactory>((_props, ref) => {\n const props = useProps('CodeHighlightTabs', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n children,\n code,\n defaultActiveTab,\n activeTab,\n onTabChange,\n withHeader,\n copiedLabel,\n copyLabel,\n getFileIcon,\n maxCollapsedHeight,\n expanded,\n defaultExpanded,\n onExpandedChange,\n expandCodeLabel,\n collapseCodeLabel,\n withExpandButton,\n ...others\n } = props;\n\n const getStyles = useStyles<CodeHighlightTabsFactory>({\n name: 'CodeHighlightTabs',\n props,\n classes,\n className,\n style,\n classNames,\n styles,\n unstyled,\n vars,\n varsResolver,\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 nodes = Array.isArray(code) ? code : [code];\n const currentCode = nodes[value];\n\n const highlighted = hljs.highlight(currentCode.code.trim(), {\n language: currentCode.language!,\n }).value;\n\n const files = nodes.map((node, index) => (\n <UnstyledButton\n {...getStyles('file')}\n key={node.fileName}\n mod={{ active: index === value }}\n onClick={() => setValue(index)}\n >\n <FileIcon\n fileIcon={node.icon}\n getFileIcon={getFileIcon}\n fileName={node.fileName}\n {...getStyles('fileIcon')}\n />\n <span>{node.fileName}</span>\n </UnstyledButton>\n ));\n\n return (\n <Box {...getStyles('root')} mod={{ collapsed: !_expanded }} ref={ref} {...others} dir=\"ltr\">\n {withHeader && (\n <div {...getStyles('header')}>\n <ScrollArea type=\"never\" dir=\"ltr\" offsetScrollbars={false}>\n <div {...getStyles('files')}>{files}</div>\n </ScrollArea>\n <div {...getStyles('controls')}>\n {withExpandButton && (\n <Tooltip\n label={_expanded ? collapseCodeLabel : expandCodeLabel}\n fz=\"sm\"\n position=\"left\"\n >\n <ActionIcon\n onClick={() => setExpanded(!_expanded)}\n variant=\"none\"\n aria-label={_expanded ? collapseCodeLabel : expandCodeLabel}\n {...getStyles('control')}\n >\n <ExpandIcon expanded={_expanded} />\n </ActionIcon>\n </Tooltip>\n )}\n\n <CopyButton value={currentCode.code.trim()}>\n {({ copied, copy }) => (\n <Tooltip label={copied ? copiedLabel : copyLabel} fz=\"sm\" position=\"left\">\n <ActionIcon\n onClick={copy}\n variant=\"none\"\n {...getStyles('control')}\n aria-label={copied ? copiedLabel : copyLabel}\n >\n <CopyIcon copied={copied} />\n </ActionIcon>\n </Tooltip>\n )}\n </CopyButton>\n </div>\n </div>\n )}\n\n <ScrollArea type=\"auto\" dir=\"ltr\" offsetScrollbars={false}>\n <Box {...getStyles('codeWrapper')} mod={{ expanded: _expanded }}>\n <pre {...getStyles('pre')}>\n <code {...getStyles('code')} dangerouslySetInnerHTML={{ __html: highlighted }} />\n </pre>\n </Box>\n </ScrollArea>\n <UnstyledButton\n {...getStyles('showCodeButton')}\n mod={{ hidden: _expanded }}\n onClick={() => setExpanded(true)}\n >\n {expandCodeLabel}\n </UnstyledButton>\n </Box>\n );\n});\n\nCodeHighlightTabs.displayName = '@mantine/core/CodeHighlightTabs';\nCodeHighlightTabs.classes = classes;\n"],"names":[],"mappings":";;;;;;;;;;;;AAAA,IAAI,SAAS,GAAG,MAAM,CAAC,cAAc,CAAC;AACtC,IAAI,UAAU,GAAG,MAAM,CAAC,gBAAgB,CAAC;AACzC,IAAI,iBAAiB,GAAG,MAAM,CAAC,yBAAyB,CAAC;AACzD,IAAI,mBAAmB,GAAG,MAAM,CAAC,qBAAqB,CAAC;AACvD,IAAI,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC;AACnD,IAAI,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,oBAAoB,CAAC;AACzD,IAAI,eAAe,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,KAAK,GAAG,IAAI,GAAG,GAAG,SAAS,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;AAChK,IAAI,cAAc,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK;AAC/B,EAAE,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC;AAChC,IAAI,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC;AAClC,MAAM,eAAe,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AACxC,EAAE,IAAI,mBAAmB;AACzB,IAAI,KAAK,IAAI,IAAI,IAAI,mBAAmB,CAAC,CAAC,CAAC,EAAE;AAC7C,MAAM,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC;AACpC,QAAQ,eAAe,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AAC1C,KAAK;AACL,EAAE,OAAO,CAAC,CAAC;AACX,CAAC,CAAC;AACF,IAAI,aAAa,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK,UAAU,CAAC,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC;AAClE,IAAI,SAAS,GAAG,CAAC,MAAM,EAAE,OAAO,KAAK;AACrC,EAAE,IAAI,MAAM,GAAG,EAAE,CAAC;AAClB,EAAE,KAAK,IAAI,IAAI,IAAI,MAAM;AACzB,IAAI,IAAI,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;AACpE,MAAM,MAAM,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;AAClC,EAAE,IAAI,MAAM,IAAI,IAAI,IAAI,mBAAmB;AAC3C,IAAI,KAAK,IAAI,IAAI,IAAI,mBAAmB,CAAC,MAAM,CAAC,EAAE;AAClD,MAAM,IAAI,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC;AACtE,QAAQ,MAAM,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;AACpC,KAAK;AACL,EAAE,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AAuBF,MAAM,OAAO,GAAG,aAAa,CAAC,cAAc,CAAC,EAAE,EAAE,QAAQ,CAAC,EAAE,EAAE,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,EAAE,YAAY,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;AAC7G,MAAM,YAAY,GAAG;AACrB,EAAE,UAAU,EAAE,IAAI;AAClB,EAAE,SAAS,EAAE,WAAW;AACxB,EAAE,WAAW,EAAE,QAAQ;AACvB,EAAE,kBAAkB,EAAE,GAAG,CAAC,MAAM,CAAC;AACjC,EAAE,eAAe,EAAE,aAAa;AAChC,EAAE,iBAAiB,EAAE,eAAe;AACpC,CAAC,CAAC;AACF,MAAM,YAAY,GAAG,kBAAkB,CAAC,CAAC,CAAC,EAAE,EAAE,kBAAkB,EAAE,MAAM;AACxE,EAAE,IAAI,EAAE,EAAE,2BAA2B,EAAE,GAAG,CAAC,kBAAkB,CAAC,EAAE;AAChE,CAAC,CAAC,CAAC,CAAC;AACQ,MAAC,iBAAiB,GAAG,OAAO,CAAC,CAAC,MAAM,EAAE,GAAG,KAAK;AAC1D,EAAE,MAAM,KAAK,GAAG,QAAQ,CAAC,mBAAmB,EAAE,YAAY,EAAE,MAAM,CAAC,CAAC;AACpE,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE;AACpB,IAAI,UAAU;AACd,IAAI,SAAS;AACb,IAAI,KAAK;AACT,IAAI,MAAM;AACV,IAAI,QAAQ;AACZ,IAAI,IAAI;AACR,IAAI,QAAQ;AACZ,IAAI,IAAI;AACR,IAAI,gBAAgB;AACpB,IAAI,SAAS;AACb,IAAI,WAAW;AACf,IAAI,UAAU;AACd,IAAI,WAAW;AACf,IAAI,SAAS;AACb,IAAI,WAAW;AACf,IAAI,kBAAkB;AACtB,IAAI,QAAQ;AACZ,IAAI,eAAe;AACnB,IAAI,gBAAgB;AACpB,IAAI,eAAe;AACnB,IAAI,iBAAiB;AACrB,IAAI,gBAAgB;AACpB,GAAG,GAAG,EAAE,EAAE,MAAM,GAAG,SAAS,CAAC,EAAE,EAAE;AACjC,IAAI,YAAY;AAChB,IAAI,WAAW;AACf,IAAI,OAAO;AACX,IAAI,QAAQ;AACZ,IAAI,UAAU;AACd,IAAI,MAAM;AACV,IAAI,UAAU;AACd,IAAI,MAAM;AACV,IAAI,kBAAkB;AACtB,IAAI,WAAW;AACf,IAAI,aAAa;AACjB,IAAI,YAAY;AAChB,IAAI,aAAa;AACjB,IAAI,WAAW;AACf,IAAI,aAAa;AACjB,IAAI,oBAAoB;AACxB,IAAI,UAAU;AACd,IAAI,iBAAiB;AACrB,IAAI,kBAAkB;AACtB,IAAI,iBAAiB;AACrB,IAAI,mBAAmB;AACvB,IAAI,kBAAkB;AACtB,GAAG,CAAC,CAAC;AACL,EAAE,MAAM,SAAS,GAAG,SAAS,CAAC;AAC9B,IAAI,IAAI,EAAE,mBAAmB;AAC7B,IAAI,KAAK;AACT,IAAI,OAAO;AACX,IAAI,SAAS;AACb,IAAI,KAAK;AACT,IAAI,UAAU;AACd,IAAI,MAAM;AACV,IAAI,QAAQ;AACZ,IAAI,IAAI;AACR,IAAI,YAAY;AAChB,GAAG,CAAC,CAAC;AACL,EAAE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,eAAe,CAAC;AAC5C,IAAI,YAAY,EAAE,gBAAgB;AAClC,IAAI,KAAK,EAAE,SAAS;AACpB,IAAI,UAAU,EAAE,CAAC;AACjB,IAAI,QAAQ,EAAE,WAAW;AACzB,GAAG,CAAC,CAAC;AACL,EAAE,MAAM,CAAC,SAAS,EAAE,WAAW,CAAC,GAAG,eAAe,CAAC;AACnD,IAAI,YAAY,EAAE,eAAe;AACjC,IAAI,KAAK,EAAE,QAAQ;AACnB,IAAI,UAAU,EAAE,IAAI;AACpB,IAAI,QAAQ,EAAE,gBAAgB;AAC9B,GAAG,CAAC,CAAC;AACL,EAAE,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,CAAC;AACpD,EAAE,MAAM,WAAW,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC;AACnC,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE;AAC9D,IAAI,QAAQ,EAAE,WAAW,CAAC,QAAQ;AAClC,GAAG,CAAC,CAAC,KAAK,CAAC;AACX,EAAE,MAAM,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,qBAAqB,KAAK,CAAC,aAAa;AAC9E,IAAI,cAAc;AAClB,IAAI,aAAa,CAAC,cAAc,CAAC,EAAE,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC,EAAE;AACzD,MAAM,GAAG,EAAE,IAAI,CAAC,QAAQ;AACxB,MAAM,GAAG,EAAE,EAAE,MAAM,EAAE,KAAK,KAAK,KAAK,EAAE;AACtC,MAAM,OAAO,EAAE,MAAM,QAAQ,CAAC,KAAK,CAAC;AACpC,KAAK,CAAC;AACN,oBAAoB,KAAK,CAAC,aAAa;AACvC,MAAM,QAAQ;AACd,MAAM,cAAc,CAAC;AACrB,QAAQ,QAAQ,EAAE,IAAI,CAAC,IAAI;AAC3B,QAAQ,WAAW;AACnB,QAAQ,QAAQ,EAAE,IAAI,CAAC,QAAQ;AAC/B,OAAO,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;AAC/B,KAAK;AACL,oBAAoB,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC;AACpE,GAAG,CAAC,CAAC;AACL,EAAE,uBAAuB,KAAK,CAAC,aAAa,CAAC,GAAG,EAAE,aAAa,CAAC,cAAc,CAAC,aAAa,CAAC,cAAc,CAAC,EAAE,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,EAAE,SAAS,EAAE,CAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,MAAM,CAAC,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,EAAE,UAAU,oBAAoB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,EAAE,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAC,kBAAkB,KAAK,CAAC,aAAa,CAAC,UAAU,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAE,kBAAkB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,EAAE,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,kBAAkB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,EAAE,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC,EAAE,gBAAgB,oBAAoB,KAAK,CAAC,aAAa;AAC3nB,IAAI,OAAO;AACX,IAAI;AACJ,MAAM,KAAK,EAAE,SAAS,GAAG,iBAAiB,GAAG,eAAe;AAC5D,MAAM,EAAE,EAAE,IAAI;AACd,MAAM,QAAQ,EAAE,MAAM;AACtB,KAAK;AACL,oBAAoB,KAAK,CAAC,aAAa;AACvC,MAAM,UAAU;AAChB,MAAM,cAAc,CAAC;AACrB,QAAQ,OAAO,EAAE,MAAM,WAAW,CAAC,CAAC,SAAS,CAAC;AAC9C,QAAQ,OAAO,EAAE,MAAM;AACvB,QAAQ,YAAY,EAAE,SAAS,GAAG,iBAAiB,GAAG,eAAe;AACrE,OAAO,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;AAC9B,sBAAsB,KAAK,CAAC,aAAa,CAAC,UAAU,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC;AAC9E,KAAK;AACL,GAAG,kBAAkB,KAAK,CAAC,aAAa,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,WAAW,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,qBAAqB,KAAK,CAAC,aAAa,CAAC,OAAO,EAAE,EAAE,KAAK,EAAE,MAAM,GAAG,WAAW,GAAG,SAAS,EAAE,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,kBAAkB,KAAK,CAAC,aAAa;AACxQ,IAAI,UAAU;AACd,IAAI,aAAa,CAAC,cAAc,CAAC;AACjC,MAAM,OAAO,EAAE,IAAI;AACnB,MAAM,OAAO,EAAE,MAAM;AACrB,KAAK,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC,EAAE;AAC9B,MAAM,YAAY,EAAE,MAAM,GAAG,WAAW,GAAG,SAAS;AACpD,KAAK,CAAC;AACN,oBAAoB,KAAK,CAAC,aAAa,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,CAAC;AAC7D,GAAG,CAAC,CAAC,CAAC,CAAC,kBAAkB,KAAK,CAAC,aAAa,CAAC,UAAU,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAE,kBAAkB,KAAK,CAAC,aAAa,CAAC,GAAG,EAAE,aAAa,CAAC,cAAc,CAAC,EAAE,EAAE,SAAS,CAAC,aAAa,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,CAAC,kBAAkB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,EAAE,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC,kBAAkB,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE,aAAa,CAAC,cAAc,CAAC,EAAE,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,uBAAuB,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,kBAAkB,KAAK,CAAC,aAAa;AACxgB,IAAI,cAAc;AAClB,IAAI,aAAa,CAAC,cAAc,CAAC,EAAE,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC,EAAE;AACnE,MAAM,GAAG,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE;AAChC,MAAM,OAAO,EAAE,MAAM,WAAW,CAAC,IAAI,CAAC;AACtC,KAAK,CAAC;AACN,IAAI,eAAe;AACnB,GAAG,CAAC,CAAC;AACL,CAAC,EAAE;AACH,iBAAiB,CAAC,WAAW,GAAG,iCAAiC,CAAC;AAClE,iBAAiB,CAAC,OAAO,GAAG,OAAO;;"}
|
|
1
|
+
{"version":3,"file":"CodeHighlightTabs.mjs","sources":["../src/CodeHighlightTabs.tsx"],"sourcesContent":["import React from 'react';\nimport hljs from 'highlight.js';\nimport cx from 'clsx';\nimport { useUncontrolled } from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n StylesApiProps,\n factory,\n ElementProps,\n useProps,\n useStyles,\n CopyButton,\n Tooltip,\n ActionIcon,\n UnstyledButton,\n ScrollArea,\n createVarsResolver,\n rem,\n Factory,\n} from '@mantine/core';\nimport { CopyIcon } from './CopyIcon';\nimport { FileIcon } from './FileIcon';\nimport { ExpandIcon } from './ExpandIcon';\nimport _classes from './CodeHighlight.module.css';\nimport themeClasses from './CodeHighlight.theme.module.css';\n\nconst classes = { ..._classes, root: cx(_classes.root, themeClasses.theme) };\n\nexport type CodeHighlightTabsStylesNames =\n | 'root'\n | 'code'\n | 'codeWrapper'\n | 'showCodeButton'\n | 'pre'\n | 'controls'\n | 'control'\n | 'header'\n | 'file'\n | 'files'\n | 'fileIcon';\n\nexport type CodeHighlightTabsCssVariables = {\n root: '--ch-max-collapsed-height';\n};\n\nexport interface CodeHighlightTabsCode {\n language?: string;\n code: string;\n fileName?: string;\n icon?: React.ReactNode;\n}\n\nexport interface CodeHighlightTabsProps\n extends BoxProps,\n StylesApiProps<CodeHighlightTabsFactory>,\n ElementProps<'div'> {\n /** Code to highlight with meta data (file name and icon) */\n code: CodeHighlightTabsCode | CodeHighlightTabsCode[];\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 /** Determines whether header with file names and copy button should be rendered, `true` by default */\n withHeader?: boolean;\n\n /** Copy tooltip label, `'Copy code'` by default */\n copyLabel?: string;\n\n /** Copied tooltip label, `'Copied'` by default */\n copiedLabel?: string;\n\n /** Function that returns icon based on file name */\n getFileIcon?: (fileName: string) => React.ReactNode;\n\n /** `max-height` of code in collapsed state */\n maxCollapsedHeight?: React.CSSProperties['maxHeight'];\n\n /** Controlled expanded state */\n expanded?: boolean;\n\n /** Uncontrolled expanded state initial value */\n defaultExpanded?: boolean;\n\n /** Called when expanded state changes */\n onExpandedChange?: (expanded: boolean) => void;\n\n /** Expand button label and tooltip, `'Expand code'` by default */\n expandCodeLabel?: string;\n\n /** Collapse button label and tooltip, `'Collapse code'` by default */\n collapseCodeLabel?: string;\n\n /** Determines whether to show the expand button, `false` by default */\n withExpandButton?: boolean;\n}\n\nexport type CodeHighlightTabsFactory = Factory<{\n props: CodeHighlightTabsProps;\n ref: HTMLDivElement;\n stylesNames: CodeHighlightTabsStylesNames;\n}>;\n\nconst defaultProps: Partial<CodeHighlightTabsProps> = {\n withHeader: true,\n copyLabel: 'Copy code',\n copiedLabel: 'Copied',\n maxCollapsedHeight: rem('8rem'),\n expandCodeLabel: 'Expand code',\n collapseCodeLabel: 'Collapse code',\n};\n\nconst varsResolver = createVarsResolver<CodeHighlightTabsFactory>((_, { maxCollapsedHeight }) => ({\n root: { '--ch-max-collapsed-height': rem(maxCollapsedHeight) },\n}));\n\nexport const CodeHighlightTabs = factory<CodeHighlightTabsFactory>((_props, ref) => {\n const props = useProps('CodeHighlightTabs', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n children,\n code,\n defaultActiveTab,\n activeTab,\n onTabChange,\n withHeader,\n copiedLabel,\n copyLabel,\n getFileIcon,\n maxCollapsedHeight,\n expanded,\n defaultExpanded,\n onExpandedChange,\n expandCodeLabel,\n collapseCodeLabel,\n withExpandButton,\n ...others\n } = props;\n\n const getStyles = useStyles<CodeHighlightTabsFactory>({\n name: 'CodeHighlightTabs',\n props,\n classes,\n className,\n style,\n classNames,\n styles,\n unstyled,\n vars,\n varsResolver,\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 nodes = Array.isArray(code) ? code : [code];\n const currentCode = nodes[value];\n\n const highlighted = hljs.highlight(currentCode.code.trim(), {\n language: currentCode.language!,\n }).value;\n\n const files = nodes.map((node, index) => (\n <UnstyledButton\n {...getStyles('file')}\n key={node.fileName}\n mod={{ active: index === value }}\n onClick={() => setValue(index)}\n >\n <FileIcon\n fileIcon={node.icon}\n getFileIcon={getFileIcon}\n fileName={node.fileName}\n {...getStyles('fileIcon')}\n />\n <span>{node.fileName}</span>\n </UnstyledButton>\n ));\n\n return (\n <Box {...getStyles('root')} mod={{ collapsed: !_expanded }} ref={ref} {...others} dir=\"ltr\">\n {withHeader && (\n <div {...getStyles('header')}>\n <ScrollArea type=\"never\" dir=\"ltr\" offsetScrollbars={false}>\n <div {...getStyles('files')}>{files}</div>\n </ScrollArea>\n <div {...getStyles('controls')}>\n {withExpandButton && (\n <Tooltip\n label={_expanded ? collapseCodeLabel : expandCodeLabel}\n fz=\"sm\"\n position=\"left\"\n >\n <ActionIcon\n onClick={() => setExpanded(!_expanded)}\n variant=\"none\"\n aria-label={_expanded ? collapseCodeLabel : expandCodeLabel}\n {...getStyles('control')}\n >\n <ExpandIcon expanded={_expanded} />\n </ActionIcon>\n </Tooltip>\n )}\n\n <CopyButton value={currentCode.code.trim()}>\n {({ copied, copy }) => (\n <Tooltip label={copied ? copiedLabel : copyLabel} fz=\"sm\" position=\"left\">\n <ActionIcon\n onClick={copy}\n variant=\"none\"\n {...getStyles('control')}\n aria-label={copied ? copiedLabel : copyLabel}\n >\n <CopyIcon copied={copied} />\n </ActionIcon>\n </Tooltip>\n )}\n </CopyButton>\n </div>\n </div>\n )}\n\n <ScrollArea type=\"auto\" dir=\"ltr\" offsetScrollbars={false}>\n <Box {...getStyles('codeWrapper')} mod={{ expanded: _expanded }}>\n <pre {...getStyles('pre')}>\n <code {...getStyles('code')} dangerouslySetInnerHTML={{ __html: highlighted }} />\n </pre>\n </Box>\n </ScrollArea>\n <UnstyledButton\n {...getStyles('showCodeButton')}\n mod={{ hidden: _expanded }}\n onClick={() => setExpanded(true)}\n >\n {expandCodeLabel}\n </UnstyledButton>\n </Box>\n );\n});\n\nCodeHighlightTabs.displayName = '@mantine/core/CodeHighlightTabs';\nCodeHighlightTabs.classes = classes;\n"],"names":[],"mappings":"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"}
|
package/esm/use-highlight.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-highlight.mjs","sources":["../src/use-highlight.ts"],"sourcesContent":["import { useState, useEffect } from 'react';\nimport hljs from 'highlight.js';\n\ninterface UseHighlightInput {\n code: string;\n language: string;\n highlightOnClient: boolean | undefined;\n}\n\nexport function useHighlight({ code, language, highlightOnClient }: UseHighlightInput) {\n const getHighlightedCode = () => hljs.highlight(code.trim(), { language: language! }).value;\n const [highlighted, setHighlighted] = useState(!highlightOnClient);\n const [highlightedCode, setHighlightedCode] = useState(\n highlightOnClient ? code : getHighlightedCode()\n );\n\n const getCodeProps = () =>\n highlighted\n ? { dangerouslySetInnerHTML: { __html: highlightedCode } }\n : { children: code.trim() };\n\n useEffect(() => {\n if (highlightOnClient) {\n setHighlightedCode(getHighlightedCode());\n setHighlighted(true);\n }\n }, []);\n\n return getCodeProps;\n}\n"],"names":[],"mappings":";;;;AAEO,SAAS,YAAY,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,iBAAiB,EAAE,EAAE;AACpE,EAAE,MAAM,kBAAkB,GAAG,MAAM,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC;AACnF,EAAE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,CAAC,iBAAiB,CAAC,CAAC;AACrE,EAAE,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ;AACxD,IAAI,iBAAiB,GAAG,IAAI,GAAG,kBAAkB,EAAE;AACnD,GAAG,CAAC;AACJ,EAAE,MAAM,YAAY,GAAG,MAAM,WAAW,GAAG,EAAE,uBAAuB,EAAE,EAAE,MAAM,EAAE,eAAe,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC;AAChI,EAAE,SAAS,CAAC,MAAM;AAClB,IAAI,IAAI,iBAAiB,EAAE;AAC3B,MAAM,kBAAkB,CAAC,kBAAkB,EAAE,CAAC,CAAC;AAC/C,MAAM,cAAc,CAAC,IAAI,CAAC,CAAC;AAC3B,KAAK;AACL,GAAG,EAAE,EAAE,CAAC,CAAC;AACT,EAAE,OAAO,YAAY,CAAC;AACtB;;"}
|
|
1
|
+
{"version":3,"file":"use-highlight.mjs","sources":["../src/use-highlight.ts"],"sourcesContent":["import { useState, useEffect } from 'react';\nimport hljs from 'highlight.js';\n\ninterface UseHighlightInput {\n code: string;\n language: string;\n highlightOnClient: boolean | undefined;\n}\n\nexport function useHighlight({ code, language, highlightOnClient }: UseHighlightInput) {\n const getHighlightedCode = () => hljs.highlight(code.trim(), { language: language! }).value;\n const [highlighted, setHighlighted] = useState(!highlightOnClient);\n const [highlightedCode, setHighlightedCode] = useState(\n highlightOnClient ? code : getHighlightedCode()\n );\n\n const getCodeProps = () =>\n highlighted\n ? { dangerouslySetInnerHTML: { __html: highlightedCode } }\n : { children: code.trim() };\n\n useEffect(() => {\n if (highlightOnClient) {\n setHighlightedCode(getHighlightedCode());\n setHighlighted(true);\n }\n }, []);\n\n useEffect(() => {\n setHighlightedCode(getHighlightedCode());\n }, [code]);\n\n return getCodeProps;\n}\n"],"names":[],"mappings":";;;;AAEO,SAAS,YAAY,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,iBAAiB,EAAE,EAAE;AACpE,EAAE,MAAM,kBAAkB,GAAG,MAAM,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC;AACnF,EAAE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,CAAC,iBAAiB,CAAC,CAAC;AACrE,EAAE,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ;AACxD,IAAI,iBAAiB,GAAG,IAAI,GAAG,kBAAkB,EAAE;AACnD,GAAG,CAAC;AACJ,EAAE,MAAM,YAAY,GAAG,MAAM,WAAW,GAAG,EAAE,uBAAuB,EAAE,EAAE,MAAM,EAAE,eAAe,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC;AAChI,EAAE,SAAS,CAAC,MAAM;AAClB,IAAI,IAAI,iBAAiB,EAAE;AAC3B,MAAM,kBAAkB,CAAC,kBAAkB,EAAE,CAAC,CAAC;AAC/C,MAAM,cAAc,CAAC,IAAI,CAAC,CAAC;AAC3B,KAAK;AACL,GAAG,EAAE,EAAE,CAAC,CAAC;AACT,EAAE,SAAS,CAAC,MAAM;AAClB,IAAI,kBAAkB,CAAC,kBAAkB,EAAE,CAAC,CAAC;AAC7C,GAAG,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;AACb,EAAE,OAAO,YAAY,CAAC;AACtB;;"}
|
|
@@ -18,7 +18,7 @@ export interface CodeHighlightTabsProps extends BoxProps, StylesApiProps<CodeHig
|
|
|
18
18
|
/** Index of controlled active tab state */
|
|
19
19
|
activeTab?: number;
|
|
20
20
|
/** Called when tab changes */
|
|
21
|
-
onTabChange
|
|
21
|
+
onTabChange?: (tab: number) => void;
|
|
22
22
|
/** Determines whether header with file names and copy button should be rendered, `true` by default */
|
|
23
23
|
withHeader?: boolean;
|
|
24
24
|
/** Copy tooltip label, `'Copy code'` by default */
|
|
@@ -26,7 +26,7 @@ export interface CodeHighlightTabsProps extends BoxProps, StylesApiProps<CodeHig
|
|
|
26
26
|
/** Copied tooltip label, `'Copied'` by default */
|
|
27
27
|
copiedLabel?: string;
|
|
28
28
|
/** Function that returns icon based on file name */
|
|
29
|
-
getFileIcon
|
|
29
|
+
getFileIcon?: (fileName: string) => React.ReactNode;
|
|
30
30
|
/** `max-height` of code in collapsed state */
|
|
31
31
|
maxCollapsedHeight?: React.CSSProperties['maxHeight'];
|
|
32
32
|
/** Controlled expanded state */
|
|
@@ -34,7 +34,7 @@ export interface CodeHighlightTabsProps extends BoxProps, StylesApiProps<CodeHig
|
|
|
34
34
|
/** Uncontrolled expanded state initial value */
|
|
35
35
|
defaultExpanded?: boolean;
|
|
36
36
|
/** Called when expanded state changes */
|
|
37
|
-
onExpandedChange
|
|
37
|
+
onExpandedChange?: (expanded: boolean) => void;
|
|
38
38
|
/** Expand button label and tooltip, `'Expand code'` by default */
|
|
39
39
|
expandCodeLabel?: string;
|
|
40
40
|
/** Collapse button label and tooltip, `'Collapse code'` by default */
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mantine/code-highlight",
|
|
3
3
|
"description": "Code highlight with Mantine theme",
|
|
4
|
-
"version": "7.1.
|
|
4
|
+
"version": "7.1.4",
|
|
5
5
|
"main": "./cjs/index.js",
|
|
6
6
|
"types": "./lib/index.d.ts",
|
|
7
7
|
"module": "./esm/index.mjs",
|
|
@@ -45,8 +45,8 @@
|
|
|
45
45
|
"syntax-highlight"
|
|
46
46
|
],
|
|
47
47
|
"peerDependencies": {
|
|
48
|
-
"@mantine/core": "7.1.
|
|
49
|
-
"@mantine/hooks": "7.1.
|
|
48
|
+
"@mantine/core": "7.1.4",
|
|
49
|
+
"@mantine/hooks": "7.1.4",
|
|
50
50
|
"react": "^18.2.0",
|
|
51
51
|
"react-dom": "^18.2.0"
|
|
52
52
|
},
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { useState } from 'react';
|
|
2
2
|
import { CodeHighlightTabs } from './CodeHighlightTabs';
|
|
3
3
|
import { CodeHighlight } from './CodeHighlight';
|
|
4
4
|
import { InlineCodeHighlight } from './InlineCodeHighlight';
|
|
@@ -253,3 +253,21 @@ export function Inline() {
|
|
|
253
253
|
</div>
|
|
254
254
|
);
|
|
255
255
|
}
|
|
256
|
+
|
|
257
|
+
export function DataChangesOverTime() {
|
|
258
|
+
const [code, setCode] = useState('a');
|
|
259
|
+
return (
|
|
260
|
+
<>
|
|
261
|
+
<button
|
|
262
|
+
type="button"
|
|
263
|
+
onClick={() => {
|
|
264
|
+
setCode((c) => (c === 'a' ? 'b' : 'a'));
|
|
265
|
+
}}
|
|
266
|
+
>
|
|
267
|
+
Toggle
|
|
268
|
+
</button>
|
|
269
|
+
<CodeHighlight code={code} />
|
|
270
|
+
{code}
|
|
271
|
+
</>
|
|
272
|
+
);
|
|
273
|
+
}
|
|
@@ -65,7 +65,7 @@ export interface CodeHighlightTabsProps
|
|
|
65
65
|
activeTab?: number;
|
|
66
66
|
|
|
67
67
|
/** Called when tab changes */
|
|
68
|
-
onTabChange
|
|
68
|
+
onTabChange?: (tab: number) => void;
|
|
69
69
|
|
|
70
70
|
/** Determines whether header with file names and copy button should be rendered, `true` by default */
|
|
71
71
|
withHeader?: boolean;
|
|
@@ -77,7 +77,7 @@ export interface CodeHighlightTabsProps
|
|
|
77
77
|
copiedLabel?: string;
|
|
78
78
|
|
|
79
79
|
/** Function that returns icon based on file name */
|
|
80
|
-
getFileIcon
|
|
80
|
+
getFileIcon?: (fileName: string) => React.ReactNode;
|
|
81
81
|
|
|
82
82
|
/** `max-height` of code in collapsed state */
|
|
83
83
|
maxCollapsedHeight?: React.CSSProperties['maxHeight'];
|
|
@@ -89,7 +89,7 @@ export interface CodeHighlightTabsProps
|
|
|
89
89
|
defaultExpanded?: boolean;
|
|
90
90
|
|
|
91
91
|
/** Called when expanded state changes */
|
|
92
|
-
onExpandedChange
|
|
92
|
+
onExpandedChange?: (expanded: boolean) => void;
|
|
93
93
|
|
|
94
94
|
/** Expand button label and tooltip, `'Expand code'` by default */
|
|
95
95
|
expandCodeLabel?: string;
|