@mantine/code-highlight 7.0.0-alpha.7 → 7.0.0-alpha.9
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/CodeHighlight.js +31 -103
- package/cjs/CodeHighlight.js.map +1 -1
- package/cjs/CodeHighlight.module.css.js +0 -1
- package/cjs/CodeHighlight.module.css.js.map +1 -1
- package/cjs/CodeHighlight.theme.module.css.js +0 -1
- package/cjs/CodeHighlight.theme.module.css.js.map +1 -1
- package/cjs/CodeHighlightTabs.js +60 -167
- package/cjs/CodeHighlightTabs.js.map +1 -1
- package/cjs/CopyIcon.js +9 -55
- package/cjs/CopyIcon.js.map +1 -1
- package/cjs/ExpandIcon.js +15 -68
- package/cjs/ExpandIcon.js.map +1 -1
- package/cjs/FileIcon.js +7 -8
- package/cjs/FileIcon.js.map +1 -1
- package/cjs/InlineCodeHighlight.js +19 -55
- package/cjs/InlineCodeHighlight.js.map +1 -1
- package/cjs/src/mantine-code-highlight/src/CodeHighlight.js +55 -0
- package/cjs/src/mantine-code-highlight/src/CodeHighlight.js.map +1 -0
- package/cjs/src/mantine-code-highlight/src/CodeHighlight.module.css.js +8 -0
- package/cjs/src/mantine-code-highlight/src/CodeHighlight.module.css.js.map +1 -0
- package/cjs/src/mantine-code-highlight/src/CodeHighlight.theme.module.css.js +8 -0
- package/cjs/src/mantine-code-highlight/src/CodeHighlight.theme.module.css.js.map +1 -0
- package/cjs/src/mantine-code-highlight/src/CodeHighlightTabs.js +90 -0
- package/cjs/src/mantine-code-highlight/src/CodeHighlightTabs.js.map +1 -0
- package/cjs/src/mantine-code-highlight/src/CopyIcon.js +25 -0
- package/cjs/src/mantine-code-highlight/src/CopyIcon.js.map +1 -0
- package/cjs/src/mantine-code-highlight/src/ExpandIcon.js +31 -0
- package/cjs/src/mantine-code-highlight/src/ExpandIcon.js.map +1 -0
- package/cjs/src/mantine-code-highlight/src/FileIcon.js +22 -0
- package/cjs/src/mantine-code-highlight/src/FileIcon.js.map +1 -0
- package/cjs/src/mantine-code-highlight/src/InlineCodeHighlight.js +43 -0
- package/cjs/src/mantine-code-highlight/src/InlineCodeHighlight.js.map +1 -0
- package/cjs/src/mantine-code-highlight/src/index.js +14 -0
- package/cjs/src/mantine-code-highlight/src/index.js.map +1 -0
- package/cjs/src/mantine-code-highlight/src/use-highlight.js +29 -0
- package/cjs/src/mantine-code-highlight/src/use-highlight.js.map +1 -0
- package/cjs/use-highlight.js +13 -12
- package/cjs/use-highlight.js.map +1 -1
- package/esm/CodeHighlight.js +31 -103
- package/esm/CodeHighlight.js.map +1 -1
- package/esm/CodeHighlight.module.css.js +0 -1
- package/esm/CodeHighlight.module.css.js.map +1 -1
- package/esm/CodeHighlight.theme.module.css.js +0 -1
- package/esm/CodeHighlight.theme.module.css.js.map +1 -1
- package/esm/CodeHighlightTabs.js +60 -167
- package/esm/CodeHighlightTabs.js.map +1 -1
- package/esm/CopyIcon.js +9 -55
- package/esm/CopyIcon.js.map +1 -1
- package/esm/ExpandIcon.js +15 -68
- package/esm/ExpandIcon.js.map +1 -1
- package/esm/FileIcon.js +7 -8
- package/esm/FileIcon.js.map +1 -1
- package/esm/InlineCodeHighlight.js +19 -55
- package/esm/InlineCodeHighlight.js.map +1 -1
- package/esm/src/mantine-code-highlight/src/CodeHighlight.js +46 -0
- package/esm/src/mantine-code-highlight/src/CodeHighlight.js.map +1 -0
- package/esm/src/mantine-code-highlight/src/CodeHighlight.module.css.js +4 -0
- package/esm/src/mantine-code-highlight/src/CodeHighlight.module.css.js.map +1 -0
- package/esm/src/mantine-code-highlight/src/CodeHighlight.theme.module.css.js +4 -0
- package/esm/src/mantine-code-highlight/src/CodeHighlight.theme.module.css.js.map +1 -0
- package/esm/src/mantine-code-highlight/src/CodeHighlightTabs.js +80 -0
- package/esm/src/mantine-code-highlight/src/CodeHighlightTabs.js.map +1 -0
- package/esm/src/mantine-code-highlight/src/CopyIcon.js +17 -0
- package/esm/src/mantine-code-highlight/src/CopyIcon.js.map +1 -0
- package/esm/src/mantine-code-highlight/src/ExpandIcon.js +23 -0
- package/esm/src/mantine-code-highlight/src/ExpandIcon.js.map +1 -0
- package/esm/src/mantine-code-highlight/src/FileIcon.js +14 -0
- package/esm/src/mantine-code-highlight/src/FileIcon.js.map +1 -0
- package/esm/src/mantine-code-highlight/src/InlineCodeHighlight.js +33 -0
- package/esm/src/mantine-code-highlight/src/InlineCodeHighlight.js.map +1 -0
- package/esm/src/mantine-code-highlight/src/index.js +4 -0
- package/esm/src/mantine-code-highlight/src/index.js.map +1 -0
- package/esm/src/mantine-code-highlight/src/use-highlight.js +21 -0
- package/esm/src/mantine-code-highlight/src/use-highlight.js.map +1 -0
- package/esm/use-highlight.js +13 -12
- package/esm/use-highlight.js.map +1 -1
- package/package.json +16 -8
- package/tsconfig.build.tsbuildinfo +1 -1
- package/styles.css +0 -327
package/cjs/CodeHighlight.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
'use client';
|
|
2
1
|
'use strict';
|
|
3
2
|
|
|
4
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
5
4
|
|
|
5
|
+
var tslib = require('tslib');
|
|
6
6
|
var React = require('react');
|
|
7
7
|
var cx = require('clsx');
|
|
8
8
|
var core = require('@mantine/core');
|
|
@@ -16,112 +16,40 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
16
16
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
17
17
|
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
|
18
18
|
|
|
19
|
-
|
|
20
|
-
var __defProps = Object.defineProperties;
|
|
21
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
22
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
23
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
24
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
25
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
26
|
-
var __spreadValues = (a, b) => {
|
|
27
|
-
for (var prop in b || (b = {}))
|
|
28
|
-
if (__hasOwnProp.call(b, prop))
|
|
29
|
-
__defNormalProp(a, prop, b[prop]);
|
|
30
|
-
if (__getOwnPropSymbols)
|
|
31
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
32
|
-
if (__propIsEnum.call(b, prop))
|
|
33
|
-
__defNormalProp(a, prop, b[prop]);
|
|
34
|
-
}
|
|
35
|
-
return a;
|
|
36
|
-
};
|
|
37
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
38
|
-
var __objRest = (source, exclude) => {
|
|
39
|
-
var target = {};
|
|
40
|
-
for (var prop in source)
|
|
41
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
42
|
-
target[prop] = source[prop];
|
|
43
|
-
if (source != null && __getOwnPropSymbols)
|
|
44
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
45
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
46
|
-
target[prop] = source[prop];
|
|
47
|
-
}
|
|
48
|
-
return target;
|
|
49
|
-
};
|
|
50
|
-
const classes = __spreadProps(__spreadValues({}, CodeHighlight_module['default']), { root: cx__default(CodeHighlight_module['default'].root, CodeHighlight_theme_module['default'].theme) });
|
|
19
|
+
const classes = Object.assign(Object.assign({}, CodeHighlight_module['default']), { root: cx__default(CodeHighlight_module['default'].root, CodeHighlight_theme_module['default'].theme) });
|
|
51
20
|
const defaultProps = {
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
21
|
+
copyLabel: 'Copy code',
|
|
22
|
+
copiedLabel: 'Copied',
|
|
23
|
+
language: 'tsx',
|
|
24
|
+
withCopyButton: true,
|
|
56
25
|
};
|
|
57
26
|
const CodeHighlight = core.factory((_props, ref) => {
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
"
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
"copiedLabel",
|
|
83
|
-
"copyLabel",
|
|
84
|
-
"language",
|
|
85
|
-
"withCopyButton",
|
|
86
|
-
"highlightOnClient"
|
|
87
|
-
]);
|
|
88
|
-
const getStyles = core.useStyles({
|
|
89
|
-
name: "CodeHighlight",
|
|
90
|
-
props,
|
|
91
|
-
classes,
|
|
92
|
-
className,
|
|
93
|
-
style,
|
|
94
|
-
classNames,
|
|
95
|
-
styles,
|
|
96
|
-
unstyled
|
|
97
|
-
});
|
|
98
|
-
const getCodeProps = useHighlight.useHighlight({
|
|
99
|
-
code,
|
|
100
|
-
language,
|
|
101
|
-
highlightOnClient
|
|
102
|
-
});
|
|
103
|
-
return /* @__PURE__ */ React__default.createElement(core.Box, __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, getStyles("root")), {
|
|
104
|
-
ref
|
|
105
|
-
}), others), {
|
|
106
|
-
dir: "ltr"
|
|
107
|
-
}), withCopyButton && /* @__PURE__ */ React__default.createElement(core.CopyButton, {
|
|
108
|
-
value: code.trim()
|
|
109
|
-
}, ({ copied, copy }) => /* @__PURE__ */ React__default.createElement(core.Tooltip, {
|
|
110
|
-
label: copied ? copiedLabel : copyLabel,
|
|
111
|
-
fz: "sm",
|
|
112
|
-
position: "left"
|
|
113
|
-
}, /* @__PURE__ */ React__default.createElement(core.ActionIcon, __spreadValues({
|
|
114
|
-
onClick: copy,
|
|
115
|
-
variant: "none"
|
|
116
|
-
}, getStyles("copy")), /* @__PURE__ */ React__default.createElement(CopyIcon.CopyIcon, {
|
|
117
|
-
copied
|
|
118
|
-
})))), /* @__PURE__ */ React__default.createElement(core.ScrollArea, {
|
|
119
|
-
type: "auto",
|
|
120
|
-
dir: "ltr",
|
|
121
|
-
offsetScrollbars: false
|
|
122
|
-
}, /* @__PURE__ */ React__default.createElement("pre", __spreadValues({}, getStyles("pre")), /* @__PURE__ */ React__default.createElement("code", __spreadValues(__spreadValues({}, getStyles("code")), getCodeProps())))));
|
|
27
|
+
const props = core.useProps('CodeHighlight', defaultProps, _props);
|
|
28
|
+
const { classNames, className, style, styles, unstyled, vars, children, code, copiedLabel, copyLabel, language, withCopyButton, highlightOnClient } = props, others = tslib.__rest(props, ["classNames", "className", "style", "styles", "unstyled", "vars", "children", "code", "copiedLabel", "copyLabel", "language", "withCopyButton", "highlightOnClient"]);
|
|
29
|
+
const getStyles = core.useStyles({
|
|
30
|
+
name: 'CodeHighlight',
|
|
31
|
+
props,
|
|
32
|
+
classes,
|
|
33
|
+
className,
|
|
34
|
+
style,
|
|
35
|
+
classNames,
|
|
36
|
+
styles,
|
|
37
|
+
unstyled,
|
|
38
|
+
});
|
|
39
|
+
const getCodeProps = useHighlight.useHighlight({
|
|
40
|
+
code,
|
|
41
|
+
language: language,
|
|
42
|
+
highlightOnClient,
|
|
43
|
+
});
|
|
44
|
+
return (React__default.createElement(core.Box, Object.assign({}, getStyles('root'), { ref: ref }, others, { dir: "ltr" }),
|
|
45
|
+
withCopyButton && (React__default.createElement(core.CopyButton, { value: code.trim() }, ({ copied, copy }) => (React__default.createElement(core.Tooltip, { label: copied ? copiedLabel : copyLabel, fz: "sm", position: "left" },
|
|
46
|
+
React__default.createElement(core.ActionIcon, Object.assign({ onClick: copy, variant: "none" }, getStyles('copy')),
|
|
47
|
+
React__default.createElement(CopyIcon.CopyIcon, { copied: copied })))))),
|
|
48
|
+
React__default.createElement(core.ScrollArea, { type: "auto", dir: "ltr", offsetScrollbars: false },
|
|
49
|
+
React__default.createElement("pre", Object.assign({}, getStyles('pre')),
|
|
50
|
+
React__default.createElement("code", Object.assign({}, getStyles('code'), getCodeProps()))))));
|
|
123
51
|
});
|
|
124
|
-
CodeHighlight.displayName =
|
|
52
|
+
CodeHighlight.displayName = '@mantine/core/CodeHighlight';
|
|
125
53
|
|
|
126
54
|
exports.CodeHighlight = CodeHighlight;
|
|
127
55
|
//# sourceMappingURL=CodeHighlight.js.map
|
package/cjs/CodeHighlight.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeHighlight.js","sources":["../src/CodeHighlight.tsx"],"sourcesContent":["import React from 'react';\nimport cx from 'clsx';\nimport {\n Box,\n BoxProps,\n StylesApiProps,\n factory,\n ElementProps,\n useProps,\n useStyles,\n CopyButton,\n Tooltip,\n ActionIcon,\n ScrollArea,\n Factory,\n} from '@mantine/core';\nimport { useHighlight } from './use-highlight';\nimport { CopyIcon } from './CopyIcon';\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 CodeHighlightStylesNames = 'root' | 'code' | 'pre' | 'copy';\nexport type CodeHighlightVariant = string;\n\nexport interface CodeHighlightProps\n extends BoxProps,\n StylesApiProps<CodeHighlightFactory>,\n ElementProps<'div'> {\n /** Code to highlight */\n code: string;\n\n /** Code language, `'tsx'` by default */\n language?: string;\n\n /** Determines whether copy button should be displayed, `true` by default */\n withCopyButton?: 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 /** Determines whether code should be highlighted only after component is mounted to the dom (disables code highlight on server), `false` by default */\n highlightOnClient?: boolean;\n}\n\nexport type CodeHighlightFactory = Factory<{\n props: CodeHighlightProps;\n ref: HTMLDivElement;\n stylesNames: CodeHighlightStylesNames;\n variant: CodeHighlightVariant;\n}>;\n\nconst defaultProps: Partial<CodeHighlightProps> = {\n copyLabel: 'Copy code',\n copiedLabel: 'Copied',\n language: 'tsx',\n withCopyButton: true,\n};\n\nexport const CodeHighlight = factory<CodeHighlightFactory>((_props, ref) => {\n const props = useProps('CodeHighlight', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n children,\n code,\n copiedLabel,\n copyLabel,\n language,\n withCopyButton,\n highlightOnClient,\n ...others\n } = props;\n\n const getStyles = useStyles<CodeHighlightFactory>({\n name: 'CodeHighlight',\n props,\n classes,\n className,\n style,\n classNames,\n styles,\n unstyled,\n });\n\n const getCodeProps = useHighlight({\n code,\n language: language!,\n highlightOnClient,\n });\n\n return (\n <Box {...getStyles('root')} ref={ref} {...others} dir=\"ltr\">\n {withCopyButton && (\n <CopyButton value={code.trim()}>\n {({ copied, copy }) => (\n <Tooltip label={copied ? copiedLabel : copyLabel} fz=\"sm\" position=\"left\">\n <ActionIcon onClick={copy} variant=\"none\" {...getStyles('copy')}>\n <CopyIcon copied={copied} />\n </ActionIcon>\n </Tooltip>\n )}\n </CopyButton>\n )}\n\n <ScrollArea type=\"auto\" dir=\"ltr\" offsetScrollbars={false}>\n <pre {...getStyles('pre')}>\n <code {...getStyles('code')} {...getCodeProps()} />\n </pre>\n </ScrollArea>\n </Box>\n );\n});\n\nCodeHighlight.displayName = '@mantine/core/CodeHighlight';\n"],"names":["_classes","cx","themeClasses","factory","useProps","useStyles","useHighlight","React","Box","CopyButton","Tooltip","ActionIcon","CopyIcon","ScrollArea"],"mappings":";;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"CodeHighlight.js","sources":["../src/CodeHighlight.tsx"],"sourcesContent":["import React from 'react';\nimport cx from 'clsx';\nimport {\n Box,\n BoxProps,\n StylesApiProps,\n factory,\n ElementProps,\n useProps,\n useStyles,\n CopyButton,\n Tooltip,\n ActionIcon,\n ScrollArea,\n Factory,\n} from '@mantine/core';\nimport { useHighlight } from './use-highlight';\nimport { CopyIcon } from './CopyIcon';\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 CodeHighlightStylesNames = 'root' | 'code' | 'pre' | 'copy';\nexport type CodeHighlightVariant = string;\n\nexport interface CodeHighlightProps\n extends BoxProps,\n StylesApiProps<CodeHighlightFactory>,\n ElementProps<'div'> {\n /** Code to highlight */\n code: string;\n\n /** Code language, `'tsx'` by default */\n language?: string;\n\n /** Determines whether copy button should be displayed, `true` by default */\n withCopyButton?: 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 /** Determines whether code should be highlighted only after component is mounted to the dom (disables code highlight on server), `false` by default */\n highlightOnClient?: boolean;\n}\n\nexport type CodeHighlightFactory = Factory<{\n props: CodeHighlightProps;\n ref: HTMLDivElement;\n stylesNames: CodeHighlightStylesNames;\n variant: CodeHighlightVariant;\n}>;\n\nconst defaultProps: Partial<CodeHighlightProps> = {\n copyLabel: 'Copy code',\n copiedLabel: 'Copied',\n language: 'tsx',\n withCopyButton: true,\n};\n\nexport const CodeHighlight = factory<CodeHighlightFactory>((_props, ref) => {\n const props = useProps('CodeHighlight', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n children,\n code,\n copiedLabel,\n copyLabel,\n language,\n withCopyButton,\n highlightOnClient,\n ...others\n } = props;\n\n const getStyles = useStyles<CodeHighlightFactory>({\n name: 'CodeHighlight',\n props,\n classes,\n className,\n style,\n classNames,\n styles,\n unstyled,\n });\n\n const getCodeProps = useHighlight({\n code,\n language: language!,\n highlightOnClient,\n });\n\n return (\n <Box {...getStyles('root')} ref={ref} {...others} dir=\"ltr\">\n {withCopyButton && (\n <CopyButton value={code.trim()}>\n {({ copied, copy }) => (\n <Tooltip label={copied ? copiedLabel : copyLabel} fz=\"sm\" position=\"left\">\n <ActionIcon onClick={copy} variant=\"none\" {...getStyles('copy')}>\n <CopyIcon copied={copied} />\n </ActionIcon>\n </Tooltip>\n )}\n </CopyButton>\n )}\n\n <ScrollArea type=\"auto\" dir=\"ltr\" offsetScrollbars={false}>\n <pre {...getStyles('pre')}>\n <code {...getStyles('code')} {...getCodeProps()} />\n </pre>\n </ScrollArea>\n </Box>\n );\n});\n\nCodeHighlight.displayName = '@mantine/core/CodeHighlight';\n"],"names":["_classes","cx","themeClasses","factory","useProps","useStyles","useHighlight","React","Box","CopyButton","Tooltip","ActionIcon","CopyIcon","ScrollArea"],"mappings":";;;;;;;;;;;;;;;;;;AAqBA,MAAM,OAAO,mCAAQA,+BAAQ,KAAE,IAAI,EAAEC,WAAE,CAACD,+BAAQ,CAAC,IAAI,EAAEE,qCAAY,CAAC,KAAK,CAAC,GAAE,CAAC;AAmC7E,MAAM,YAAY,GAAgC;IAChD,SAAS,EAAE,WAAW;IACtB,WAAW,EAAE,QAAQ;IACrB,QAAQ,EAAE,KAAK;IACf,cAAc,EAAE,IAAI;CACrB,CAAC;MAEW,aAAa,GAAGC,YAAO,CAAuB,CAAC,MAAM,EAAE,GAAG;IACrE,MAAM,KAAK,GAAGC,aAAQ,CAAC,eAAe,EAAE,YAAY,EAAE,MAAM,CAAC,CAAC;IAC9D,MAAM,EACJ,UAAU,EACV,SAAS,EACT,KAAK,EACL,MAAM,EACN,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,WAAW,EACX,SAAS,EACT,QAAQ,EACR,cAAc,EACd,iBAAiB,KAEf,KAAK,EADJ,MAAM,gBACP,KAAK,EAfH,qKAeL,CAAQ,CAAC;IAEV,MAAM,SAAS,GAAGC,cAAS,CAAuB;QAChD,IAAI,EAAE,eAAe;QACrB,KAAK;QACL,OAAO;QACP,SAAS;QACT,KAAK;QACL,UAAU;QACV,MAAM;QACN,QAAQ;KACT,CAAC,CAAC;IAEH,MAAM,YAAY,GAAGC,yBAAY,CAAC;QAChC,IAAI;QACJ,QAAQ,EAAE,QAAS;QACnB,iBAAiB;KAClB,CAAC,CAAC;IAEH,QACEC,6BAACC,QAAG,oBAAK,SAAS,CAAC,MAAM,CAAC,IAAE,GAAG,EAAE,GAAG,IAAM,MAAM,IAAE,GAAG,EAAC,KAAK;QACxD,cAAc,KACbD,6BAACE,eAAU,IAAC,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,IAC3B,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAChBF,6BAACG,YAAO,IAAC,KAAK,EAAE,MAAM,GAAG,WAAW,GAAG,SAAS,EAAE,EAAE,EAAC,IAAI,EAAC,QAAQ,EAAC,MAAM;YACvEH,6BAACI,eAAU,kBAAC,OAAO,EAAE,IAAI,EAAE,OAAO,EAAC,MAAM,IAAK,SAAS,CAAC,MAAM,CAAC;gBAC7DJ,6BAACK,iBAAQ,IAAC,MAAM,EAAE,MAAM,GAAI,CACjB,CACL,CACX,CACU,CACd;QAEDL,6BAACM,eAAU,IAAC,IAAI,EAAC,MAAM,EAAC,GAAG,EAAC,KAAK,EAAC,gBAAgB,EAAE,KAAK;YACvDN,sDAAS,SAAS,CAAC,KAAK,CAAC;gBACvBA,uDAAU,SAAS,CAAC,MAAM,CAAC,EAAM,YAAY,EAAE,EAAI,CAC/C,CACK,CACT,EACN;AACJ,CAAC,EAAE;AAEH,aAAa,CAAC,WAAW,GAAG,6BAA6B;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeHighlight.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"CodeHighlight.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeHighlight.theme.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"CodeHighlight.theme.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
|
package/cjs/CodeHighlightTabs.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
'use client';
|
|
2
1
|
'use strict';
|
|
3
2
|
|
|
4
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
5
4
|
|
|
5
|
+
var tslib = require('tslib');
|
|
6
6
|
var React = require('react');
|
|
7
7
|
var hljs = require('highlight.js');
|
|
8
8
|
var cx = require('clsx');
|
|
@@ -20,178 +20,71 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
|
20
20
|
var hljs__default = /*#__PURE__*/_interopDefaultLegacy(hljs);
|
|
21
21
|
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
|
22
22
|
|
|
23
|
-
|
|
24
|
-
var __defProps = Object.defineProperties;
|
|
25
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
26
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
27
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
28
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
29
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
30
|
-
var __spreadValues = (a, b) => {
|
|
31
|
-
for (var prop in b || (b = {}))
|
|
32
|
-
if (__hasOwnProp.call(b, prop))
|
|
33
|
-
__defNormalProp(a, prop, b[prop]);
|
|
34
|
-
if (__getOwnPropSymbols)
|
|
35
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
36
|
-
if (__propIsEnum.call(b, prop))
|
|
37
|
-
__defNormalProp(a, prop, b[prop]);
|
|
38
|
-
}
|
|
39
|
-
return a;
|
|
40
|
-
};
|
|
41
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
42
|
-
var __objRest = (source, exclude) => {
|
|
43
|
-
var target = {};
|
|
44
|
-
for (var prop in source)
|
|
45
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
46
|
-
target[prop] = source[prop];
|
|
47
|
-
if (source != null && __getOwnPropSymbols)
|
|
48
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
49
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
50
|
-
target[prop] = source[prop];
|
|
51
|
-
}
|
|
52
|
-
return target;
|
|
53
|
-
};
|
|
54
|
-
const classes = __spreadProps(__spreadValues({}, CodeHighlight_module['default']), { root: cx__default(CodeHighlight_module['default'].root, CodeHighlight_theme_module['default'].theme) });
|
|
23
|
+
const classes = Object.assign(Object.assign({}, CodeHighlight_module['default']), { root: cx__default(CodeHighlight_module['default'].root, CodeHighlight_theme_module['default'].theme) });
|
|
55
24
|
const defaultProps = {
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
25
|
+
withHeader: true,
|
|
26
|
+
copyLabel: 'Copy code',
|
|
27
|
+
copiedLabel: 'Copied',
|
|
28
|
+
maxCollapsedHeight: core.rem('8rem'),
|
|
29
|
+
expandCodeLabel: 'Expand code',
|
|
30
|
+
collapseCodeLabel: 'Collapse code',
|
|
62
31
|
};
|
|
63
32
|
const varsResolver = core.createVarsResolver((_, { maxCollapsedHeight }) => ({
|
|
64
|
-
|
|
33
|
+
root: { '--ch-max-collapsed-height': core.rem(maxCollapsedHeight) },
|
|
65
34
|
}));
|
|
66
35
|
const CodeHighlightTabs = core.factory((_props, ref) => {
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
"
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
props,
|
|
118
|
-
classes,
|
|
119
|
-
className,
|
|
120
|
-
style,
|
|
121
|
-
classNames,
|
|
122
|
-
styles,
|
|
123
|
-
unstyled,
|
|
124
|
-
vars,
|
|
125
|
-
varsResolver
|
|
126
|
-
});
|
|
127
|
-
const [value, setValue] = hooks.useUncontrolled({
|
|
128
|
-
defaultValue: defaultActiveTab,
|
|
129
|
-
value: activeTab,
|
|
130
|
-
finalValue: 0,
|
|
131
|
-
onChange: onTabChange
|
|
132
|
-
});
|
|
133
|
-
const [_expanded, setExpanded] = hooks.useUncontrolled({
|
|
134
|
-
defaultValue: defaultExpanded,
|
|
135
|
-
value: expanded,
|
|
136
|
-
finalValue: true,
|
|
137
|
-
onChange: onExpandedChange
|
|
138
|
-
});
|
|
139
|
-
const nodes = Array.isArray(code) ? code : [code];
|
|
140
|
-
const currentCode = nodes[value];
|
|
141
|
-
const highlighted = hljs__default.highlight(currentCode.code.trim(), {
|
|
142
|
-
language: currentCode.language
|
|
143
|
-
}).value;
|
|
144
|
-
const files = nodes.map((node, index) => /* @__PURE__ */ React__default.createElement(core.UnstyledButton, __spreadProps(__spreadValues({}, getStyles("file")), {
|
|
145
|
-
key: node.fileName,
|
|
146
|
-
mod: { active: index === value },
|
|
147
|
-
onClick: () => setValue(index)
|
|
148
|
-
}), /* @__PURE__ */ React__default.createElement(FileIcon.FileIcon, {
|
|
149
|
-
fileIcon: node.icon,
|
|
150
|
-
getFileIcon,
|
|
151
|
-
fileName: node.fileName
|
|
152
|
-
}), /* @__PURE__ */ React__default.createElement("span", null, node.fileName)));
|
|
153
|
-
return /* @__PURE__ */ React__default.createElement(core.Box, __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, getStyles("root")), {
|
|
154
|
-
ref
|
|
155
|
-
}), others), {
|
|
156
|
-
dir: "ltr"
|
|
157
|
-
}), withHeader && /* @__PURE__ */ React__default.createElement("div", __spreadValues({}, getStyles("header")), /* @__PURE__ */ React__default.createElement(core.ScrollArea, {
|
|
158
|
-
type: "never",
|
|
159
|
-
dir: "ltr",
|
|
160
|
-
offsetScrollbars: false
|
|
161
|
-
}, /* @__PURE__ */ React__default.createElement("div", __spreadValues({}, getStyles("files")), files)), /* @__PURE__ */ React__default.createElement("div", __spreadValues({}, getStyles("controls")), withExpandButton && /* @__PURE__ */ React__default.createElement(core.Tooltip, {
|
|
162
|
-
label: _expanded ? collapseCodeLabel : expandCodeLabel,
|
|
163
|
-
fz: "sm",
|
|
164
|
-
position: "left"
|
|
165
|
-
}, /* @__PURE__ */ React__default.createElement(core.ActionIcon, __spreadValues({
|
|
166
|
-
onClick: () => setExpanded(!_expanded),
|
|
167
|
-
variant: "none"
|
|
168
|
-
}, getStyles("control")), /* @__PURE__ */ React__default.createElement(ExpandIcon.ExpandIcon, {
|
|
169
|
-
expanded: _expanded
|
|
170
|
-
}))), /* @__PURE__ */ React__default.createElement(core.CopyButton, {
|
|
171
|
-
value: currentCode.code.trim()
|
|
172
|
-
}, ({ copied, copy }) => /* @__PURE__ */ React__default.createElement(core.Tooltip, {
|
|
173
|
-
label: copied ? copiedLabel : copyLabel,
|
|
174
|
-
fz: "sm",
|
|
175
|
-
position: "left"
|
|
176
|
-
}, /* @__PURE__ */ React__default.createElement(core.ActionIcon, __spreadValues({
|
|
177
|
-
onClick: copy,
|
|
178
|
-
variant: "none"
|
|
179
|
-
}, getStyles("control")), /* @__PURE__ */ React__default.createElement(CopyIcon.CopyIcon, {
|
|
180
|
-
copied
|
|
181
|
-
})))))), /* @__PURE__ */ React__default.createElement(core.ScrollArea, {
|
|
182
|
-
type: "auto",
|
|
183
|
-
dir: "ltr",
|
|
184
|
-
offsetScrollbars: false
|
|
185
|
-
}, /* @__PURE__ */ React__default.createElement(core.Box, __spreadProps(__spreadValues({}, getStyles("codeWrapper")), {
|
|
186
|
-
mod: { expanded: _expanded }
|
|
187
|
-
}), /* @__PURE__ */ React__default.createElement("pre", __spreadValues({}, getStyles("pre")), /* @__PURE__ */ React__default.createElement("code", __spreadProps(__spreadValues({}, getStyles("code")), {
|
|
188
|
-
dangerouslySetInnerHTML: { __html: highlighted }
|
|
189
|
-
}))))), /* @__PURE__ */ React__default.createElement(core.UnstyledButton, __spreadProps(__spreadValues({}, getStyles("showCodeButton")), {
|
|
190
|
-
mod: { hidden: _expanded },
|
|
191
|
-
onClick: () => setExpanded(true)
|
|
192
|
-
}), "Expand code"));
|
|
36
|
+
const props = core.useProps('CodeHighlightTabs', defaultProps, _props);
|
|
37
|
+
const { classNames, className, style, styles, unstyled, vars, children, code, defaultActiveTab, activeTab, onTabChange, withHeader, copiedLabel, copyLabel, getFileIcon, maxCollapsedHeight, expanded, defaultExpanded, onExpandedChange, expandCodeLabel, collapseCodeLabel, withExpandButton } = props, others = tslib.__rest(props, ["classNames", "className", "style", "styles", "unstyled", "vars", "children", "code", "defaultActiveTab", "activeTab", "onTabChange", "withHeader", "copiedLabel", "copyLabel", "getFileIcon", "maxCollapsedHeight", "expanded", "defaultExpanded", "onExpandedChange", "expandCodeLabel", "collapseCodeLabel", "withExpandButton"]);
|
|
38
|
+
const getStyles = core.useStyles({
|
|
39
|
+
name: 'CodeHighlightTabs',
|
|
40
|
+
props,
|
|
41
|
+
classes,
|
|
42
|
+
className,
|
|
43
|
+
style,
|
|
44
|
+
classNames,
|
|
45
|
+
styles,
|
|
46
|
+
unstyled,
|
|
47
|
+
vars,
|
|
48
|
+
varsResolver,
|
|
49
|
+
});
|
|
50
|
+
const [value, setValue] = hooks.useUncontrolled({
|
|
51
|
+
defaultValue: defaultActiveTab,
|
|
52
|
+
value: activeTab,
|
|
53
|
+
finalValue: 0,
|
|
54
|
+
onChange: onTabChange,
|
|
55
|
+
});
|
|
56
|
+
const [_expanded, setExpanded] = hooks.useUncontrolled({
|
|
57
|
+
defaultValue: defaultExpanded,
|
|
58
|
+
value: expanded,
|
|
59
|
+
finalValue: true,
|
|
60
|
+
onChange: onExpandedChange,
|
|
61
|
+
});
|
|
62
|
+
const nodes = Array.isArray(code) ? code : [code];
|
|
63
|
+
const currentCode = nodes[value];
|
|
64
|
+
const highlighted = hljs__default.highlight(currentCode.code.trim(), {
|
|
65
|
+
language: currentCode.language,
|
|
66
|
+
}).value;
|
|
67
|
+
const files = nodes.map((node, index) => (React__default.createElement(core.UnstyledButton, Object.assign({}, getStyles('file'), { key: node.fileName, mod: { active: index === value }, onClick: () => setValue(index) }),
|
|
68
|
+
React__default.createElement(FileIcon.FileIcon, { fileIcon: node.icon, getFileIcon: getFileIcon, fileName: node.fileName }),
|
|
69
|
+
React__default.createElement("span", null, node.fileName))));
|
|
70
|
+
return (React__default.createElement(core.Box, Object.assign({}, getStyles('root'), { ref: ref }, others, { dir: "ltr" }),
|
|
71
|
+
withHeader && (React__default.createElement("div", Object.assign({}, getStyles('header')),
|
|
72
|
+
React__default.createElement(core.ScrollArea, { type: "never", dir: "ltr", offsetScrollbars: false },
|
|
73
|
+
React__default.createElement("div", Object.assign({}, getStyles('files')), files)),
|
|
74
|
+
React__default.createElement("div", Object.assign({}, getStyles('controls')),
|
|
75
|
+
withExpandButton && (React__default.createElement(core.Tooltip, { label: _expanded ? collapseCodeLabel : expandCodeLabel, fz: "sm", position: "left" },
|
|
76
|
+
React__default.createElement(core.ActionIcon, Object.assign({ onClick: () => setExpanded(!_expanded), variant: "none" }, getStyles('control')),
|
|
77
|
+
React__default.createElement(ExpandIcon.ExpandIcon, { expanded: _expanded })))),
|
|
78
|
+
React__default.createElement(core.CopyButton, { value: currentCode.code.trim() }, ({ copied, copy }) => (React__default.createElement(core.Tooltip, { label: copied ? copiedLabel : copyLabel, fz: "sm", position: "left" },
|
|
79
|
+
React__default.createElement(core.ActionIcon, Object.assign({ onClick: copy, variant: "none" }, getStyles('control')),
|
|
80
|
+
React__default.createElement(CopyIcon.CopyIcon, { copied: copied })))))))),
|
|
81
|
+
React__default.createElement(core.ScrollArea, { type: "auto", dir: "ltr", offsetScrollbars: false },
|
|
82
|
+
React__default.createElement(core.Box, Object.assign({}, getStyles('codeWrapper'), { mod: { expanded: _expanded } }),
|
|
83
|
+
React__default.createElement("pre", Object.assign({}, getStyles('pre')),
|
|
84
|
+
React__default.createElement("code", Object.assign({}, getStyles('code'), { dangerouslySetInnerHTML: { __html: highlighted } }))))),
|
|
85
|
+
React__default.createElement(core.UnstyledButton, Object.assign({}, getStyles('showCodeButton'), { mod: { hidden: _expanded }, onClick: () => setExpanded(true) }), "Expand code")));
|
|
193
86
|
});
|
|
194
|
-
CodeHighlightTabs.displayName =
|
|
87
|
+
CodeHighlightTabs.displayName = '@mantine/core/CodeHighlightTabs';
|
|
195
88
|
|
|
196
89
|
exports.CodeHighlightTabs = CodeHighlightTabs;
|
|
197
90
|
//# sourceMappingURL=CodeHighlightTabs.js.map
|
|
@@ -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\nexport type CodeHighlightTabsVariant = string;\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 fileIcon={node.icon} getFileIcon={getFileIcon} fileName={node.fileName} />\n <span>{node.fileName}</span>\n </UnstyledButton>\n ));\n\n return (\n <Box {...getStyles('root')} 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 {...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 onClick={copy} variant=\"none\" {...getStyles('control')}>\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 Expand code\n </UnstyledButton>\n </Box>\n );\n});\n\nCodeHighlightTabs.displayName = '@mantine/core/CodeHighlightTabs';\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\nexport type CodeHighlightTabsVariant = string;\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 fileIcon={node.icon} getFileIcon={getFileIcon} fileName={node.fileName} />\n <span>{node.fileName}</span>\n </UnstyledButton>\n ));\n\n return (\n <Box {...getStyles('root')} 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 {...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 onClick={copy} variant=\"none\" {...getStyles('control')}>\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 Expand code\n </UnstyledButton>\n </Box>\n );\n});\n\nCodeHighlightTabs.displayName = '@mantine/core/CodeHighlightTabs';\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/CopyIcon.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
'use client';
|
|
2
1
|
'use strict';
|
|
3
2
|
|
|
4
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
5
4
|
|
|
5
|
+
var tslib = require('tslib');
|
|
6
6
|
var core = require('@mantine/core');
|
|
7
7
|
var React = require('react');
|
|
8
8
|
|
|
@@ -10,62 +10,16 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
10
10
|
|
|
11
11
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
12
12
|
|
|
13
|
-
var __defProp = Object.defineProperty;
|
|
14
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
15
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
16
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
17
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
18
|
-
var __spreadValues = (a, b) => {
|
|
19
|
-
for (var prop in b || (b = {}))
|
|
20
|
-
if (__hasOwnProp.call(b, prop))
|
|
21
|
-
__defNormalProp(a, prop, b[prop]);
|
|
22
|
-
if (__getOwnPropSymbols)
|
|
23
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
24
|
-
if (__propIsEnum.call(b, prop))
|
|
25
|
-
__defNormalProp(a, prop, b[prop]);
|
|
26
|
-
}
|
|
27
|
-
return a;
|
|
28
|
-
};
|
|
29
|
-
var __objRest = (source, exclude) => {
|
|
30
|
-
var target = {};
|
|
31
|
-
for (var prop in source)
|
|
32
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
33
|
-
target[prop] = source[prop];
|
|
34
|
-
if (source != null && __getOwnPropSymbols)
|
|
35
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
36
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
37
|
-
target[prop] = source[prop];
|
|
38
|
-
}
|
|
39
|
-
return target;
|
|
40
|
-
};
|
|
41
13
|
function CopyIcon(_a) {
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
fill: "none",
|
|
50
|
-
strokeLinecap: "round",
|
|
51
|
-
strokeLinejoin: "round"
|
|
52
|
-
}, others), copied ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("path", {
|
|
53
|
-
stroke: "none",
|
|
54
|
-
d: "M0 0h24v24H0z",
|
|
55
|
-
fill: "none"
|
|
56
|
-
}), /* @__PURE__ */ React__default.createElement("path", {
|
|
57
|
-
d: "M5 12l5 5l10 -10"
|
|
58
|
-
})) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("path", {
|
|
59
|
-
stroke: "none",
|
|
60
|
-
d: "M0 0h24v24H0z",
|
|
61
|
-
fill: "none"
|
|
62
|
-
}), /* @__PURE__ */ React__default.createElement("path", {
|
|
63
|
-
d: "M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"
|
|
64
|
-
}), /* @__PURE__ */ React__default.createElement("path", {
|
|
65
|
-
d: "M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"
|
|
66
|
-
})));
|
|
14
|
+
var { copied, style } = _a, others = tslib.__rest(_a, ["copied", "style"]);
|
|
15
|
+
return (React__default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", style: Object.assign({ width: core.rem(18), height: core.rem(18) }, style), viewBox: "0 0 24 24", strokeWidth: "2", stroke: "currentColor", fill: "none", strokeLinecap: "round", strokeLinejoin: "round" }, others), copied ? (React__default.createElement(React__default.Fragment, null,
|
|
16
|
+
React__default.createElement("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
|
|
17
|
+
React__default.createElement("path", { d: "M5 12l5 5l10 -10" }))) : (React__default.createElement(React__default.Fragment, null,
|
|
18
|
+
React__default.createElement("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
|
|
19
|
+
React__default.createElement("path", { d: "M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z" }),
|
|
20
|
+
React__default.createElement("path", { d: "M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2" })))));
|
|
67
21
|
}
|
|
68
|
-
CopyIcon.displayName =
|
|
22
|
+
CopyIcon.displayName = '@mantine/code-highlight/CopyIcon';
|
|
69
23
|
|
|
70
24
|
exports.CopyIcon = CopyIcon;
|
|
71
25
|
//# sourceMappingURL=CopyIcon.js.map
|