@teambit/code.ui.code-tab-page 0.0.613 → 0.0.615
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/code-tab-page.tsx +24 -5
- package/dist/code-tab-page.d.ts +2 -1
- package/dist/code-tab-page.js +13 -6
- package/dist/code-tab-page.js.map +1 -1
- package/package-tar/teambit-code.ui.code-tab-page-0.0.615.tgz +0 -0
- package/package.json +7 -7
- package/package-tar/teambit-code.ui.code-tab-page-0.0.613.tgz +0 -0
- /package/dist/{preview-1682245644358.js → preview-1685960855192.js} +0 -0
package/code-tab-page.tsx
CHANGED
@@ -16,7 +16,10 @@ import { getFileIcon, FileIconMatch } from '@teambit/code.ui.utils.get-file-icon
|
|
16
16
|
import { useCodeParams } from '@teambit/code.ui.hooks.use-code-params';
|
17
17
|
import { TreeNode } from '@teambit/design.ui.tree';
|
18
18
|
import { affix } from '@teambit/base-ui.utils.string.affix';
|
19
|
-
import {
|
19
|
+
import {
|
20
|
+
useComponentArtifactFileContent,
|
21
|
+
useComponentArtifacts,
|
22
|
+
} from '@teambit/component.ui.artifacts.queries.use-component-artifacts';
|
20
23
|
import {
|
21
24
|
ArtifactFile,
|
22
25
|
getArtifactFileDetailsFromUrl,
|
@@ -29,23 +32,37 @@ import styles from './code-tab-page.module.scss';
|
|
29
32
|
export type CodePageProps = {
|
30
33
|
fileIconSlot?: FileIconSlot;
|
31
34
|
host: string;
|
35
|
+
codeViewClassName?: string;
|
32
36
|
} & HTMLAttributes<HTMLDivElement>;
|
33
37
|
|
34
|
-
export function CodePage({ className, fileIconSlot, host }: CodePageProps) {
|
38
|
+
export function CodePage({ className, fileIconSlot, host, codeViewClassName }: CodePageProps) {
|
35
39
|
const urlParams = useCodeParams();
|
36
40
|
const component = useContext(ComponentContext);
|
37
41
|
const { mainFile, fileTree = [], dependencies, devFiles } = useCode(component.id);
|
38
42
|
const { data: artifacts = [] } = useComponentArtifacts(host, component.id.toString());
|
39
43
|
|
40
44
|
const currentFile = urlParams.file || mainFile;
|
41
|
-
const
|
42
|
-
const
|
45
|
+
const currentArtifact = getArtifactFileDetailsFromUrl(artifacts, currentFile);
|
46
|
+
const currentArtifactFile = currentArtifact?.artifactFile;
|
47
|
+
const { data: currentArtifactFileData, loading } = useComponentArtifactFileContent(
|
48
|
+
host,
|
49
|
+
{
|
50
|
+
componentId: component.id.toString(),
|
51
|
+
taskId: currentArtifact?.taskId,
|
52
|
+
filePath: currentArtifactFile?.path,
|
53
|
+
},
|
54
|
+
!currentArtifact
|
55
|
+
);
|
43
56
|
|
57
|
+
const currentArtifactFileContent = getArtifactFileContent(
|
58
|
+
(currentArtifactFileData && currentArtifactFileData[0]?.files?.[0]) || undefined
|
59
|
+
);
|
44
60
|
const isMobile = useIsMobile();
|
45
61
|
const [isSidebarOpen, setSidebarOpenness] = useState(!isMobile);
|
46
62
|
const sidebarOpenness = isSidebarOpen ? Layout.row : Layout.left;
|
47
63
|
const fileIconMatchers: FileIconMatch[] = useMemo(() => flatten(fileIconSlot?.values()), [fileIconSlot]);
|
48
64
|
const icon = getFileIcon(fileIconMatchers, currentFile);
|
65
|
+
const loadingArtifactFileContent = loading !== undefined ? loading : !!currentFile && !currentArtifact;
|
49
66
|
|
50
67
|
return (
|
51
68
|
<SplitPane layout={sidebarOpenness} size="85%" className={classNames(styles.codePage, className)}>
|
@@ -55,6 +72,8 @@ export function CodePage({ className, fileIconSlot, host }: CodePageProps) {
|
|
55
72
|
currentFile={currentFile}
|
56
73
|
icon={icon}
|
57
74
|
currentFileContent={currentArtifactFileContent}
|
75
|
+
loading={loadingArtifactFileContent}
|
76
|
+
codeSnippetClassName={codeViewClassName}
|
58
77
|
/>
|
59
78
|
</Pane>
|
60
79
|
<HoverSplitter className={styles.splitter}>
|
@@ -101,7 +120,7 @@ export function generateIcon(fileIconMatchers: FileIconMatch[]) {
|
|
101
120
|
};
|
102
121
|
}
|
103
122
|
|
104
|
-
function
|
123
|
+
function getArtifactFileContent(file?: ArtifactFile | undefined): string | undefined {
|
105
124
|
if (!file) return undefined;
|
106
125
|
if (isBinaryPath(file.path) || (file.size ?? 0) > FILE_SIZE_THRESHOLD) return undefined;
|
107
126
|
return file.content;
|
package/dist/code-tab-page.d.ts
CHANGED
@@ -5,6 +5,7 @@ import { TreeNode } from '@teambit/design.ui.tree';
|
|
5
5
|
export declare type CodePageProps = {
|
6
6
|
fileIconSlot?: FileIconSlot;
|
7
7
|
host: string;
|
8
|
+
codeViewClassName?: string;
|
8
9
|
} & HTMLAttributes<HTMLDivElement>;
|
9
|
-
export declare function CodePage({ className, fileIconSlot, host }: CodePageProps): JSX.Element;
|
10
|
+
export declare function CodePage({ className, fileIconSlot, host, codeViewClassName }: CodePageProps): JSX.Element;
|
10
11
|
export declare function generateIcon(fileIconMatchers: FileIconMatch[]): ({ id }: TreeNode) => string;
|
package/dist/code-tab-page.js
CHANGED
@@ -47,23 +47,30 @@ const component_ui_artifacts_models_component_artifacts_model_1 = require("@team
|
|
47
47
|
const is_binary_path_1 = __importDefault(require("is-binary-path"));
|
48
48
|
const component_ui_artifacts_artifacts_tree_1 = require("@teambit/component.ui.artifacts.artifacts-tree");
|
49
49
|
const code_tab_page_module_scss_1 = __importDefault(require("./code-tab-page.module.scss"));
|
50
|
-
function CodePage({ className, fileIconSlot, host }) {
|
51
|
-
var _a;
|
50
|
+
function CodePage({ className, fileIconSlot, host, codeViewClassName }) {
|
51
|
+
var _a, _b;
|
52
52
|
const urlParams = (0, code_ui_hooks_use_code_params_1.useCodeParams)();
|
53
53
|
const component = (0, react_1.useContext)(component_1.ComponentContext);
|
54
54
|
const { mainFile, fileTree = [], dependencies, devFiles } = (0, code_ui_queries_get_component_code_1.useCode)(component.id);
|
55
55
|
const { data: artifacts = [] } = (0, component_ui_artifacts_queries_use_component_artifacts_1.useComponentArtifacts)(host, component.id.toString());
|
56
56
|
const currentFile = urlParams.file || mainFile;
|
57
|
-
const
|
58
|
-
const
|
57
|
+
const currentArtifact = (0, component_ui_artifacts_models_component_artifacts_model_1.getArtifactFileDetailsFromUrl)(artifacts, currentFile);
|
58
|
+
const currentArtifactFile = currentArtifact === null || currentArtifact === void 0 ? void 0 : currentArtifact.artifactFile;
|
59
|
+
const { data: currentArtifactFileData, loading } = (0, component_ui_artifacts_queries_use_component_artifacts_1.useComponentArtifactFileContent)(host, {
|
60
|
+
componentId: component.id.toString(),
|
61
|
+
taskId: currentArtifact === null || currentArtifact === void 0 ? void 0 : currentArtifact.taskId,
|
62
|
+
filePath: currentArtifactFile === null || currentArtifactFile === void 0 ? void 0 : currentArtifactFile.path,
|
63
|
+
}, !currentArtifact);
|
64
|
+
const currentArtifactFileContent = getArtifactFileContent((currentArtifactFileData && ((_b = (_a = currentArtifactFileData[0]) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b[0])) || undefined);
|
59
65
|
const isMobile = (0, ui_foundation_ui_hooks_use_is_mobile_1.useIsMobile)();
|
60
66
|
const [isSidebarOpen, setSidebarOpenness] = (0, react_1.useState)(!isMobile);
|
61
67
|
const sidebarOpenness = isSidebarOpen ? base_ui_surfaces_split_pane_split_pane_1.Layout.row : base_ui_surfaces_split_pane_split_pane_1.Layout.left;
|
62
68
|
const fileIconMatchers = (0, react_1.useMemo)(() => (0, lodash_1.flatten)(fileIconSlot === null || fileIconSlot === void 0 ? void 0 : fileIconSlot.values()), [fileIconSlot]);
|
63
69
|
const icon = (0, code_ui_utils_get_file_icon_1.getFileIcon)(fileIconMatchers, currentFile);
|
70
|
+
const loadingArtifactFileContent = loading !== undefined ? loading : !!currentFile && !currentArtifact;
|
64
71
|
return (react_1.default.createElement(base_ui_surfaces_split_pane_split_pane_1.SplitPane, { layout: sidebarOpenness, size: "85%", className: (0, classnames_1.default)(code_tab_page_module_scss_1.default.codePage, className) },
|
65
72
|
react_1.default.createElement(base_ui_surfaces_split_pane_split_pane_1.Pane, { className: code_tab_page_module_scss_1.default.left },
|
66
|
-
react_1.default.createElement(code_ui_code_view_1.CodeView, { componentId: component.id, currentFile: currentFile, icon: icon, currentFileContent: currentArtifactFileContent })),
|
73
|
+
react_1.default.createElement(code_ui_code_view_1.CodeView, { componentId: component.id, currentFile: currentFile, icon: icon, currentFileContent: currentArtifactFileContent, loading: loadingArtifactFileContent, codeSnippetClassName: codeViewClassName })),
|
67
74
|
react_1.default.createElement(base_ui_surfaces_split_pane_hover_splitter_1.HoverSplitter, { className: code_tab_page_module_scss_1.default.splitter },
|
68
75
|
react_1.default.createElement(ui_foundation_ui_buttons_collapser_1.Collapser, { placement: "left", isOpen: isSidebarOpen, onMouseDown: (e) => e.stopPropagation(), onClick: () => setSidebarOpenness((x) => !x), tooltipContent: `${isSidebarOpen ? 'Hide' : 'Show'} file tree`, className: code_tab_page_module_scss_1.default.collapser })),
|
69
76
|
react_1.default.createElement(base_ui_surfaces_split_pane_split_pane_1.Pane, { className: code_tab_page_module_scss_1.default.right },
|
@@ -88,7 +95,7 @@ function generateIcon(fileIconMatchers) {
|
|
88
95
|
};
|
89
96
|
}
|
90
97
|
exports.generateIcon = generateIcon;
|
91
|
-
function
|
98
|
+
function getArtifactFileContent(file) {
|
92
99
|
var _a;
|
93
100
|
if (!file)
|
94
101
|
return undefined;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"code-tab-page.js","sourceRoot":"","sources":["../code-tab-page.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kDAAsD;AACtD,4DAAoC;AACpC,+CAA6E;AAC7E,mCAAiC;AACjC,sEAAqD;AACrD,4GAA0F;AAC1F,oHAAoF;AACpF,oGAAwE;AACxE,oGAAsE;AAEtE,kEAAsD;AACtD,0EAA6D;AAC7D,wGAA4E;AAE5E,sFAAkF;AAClF,0FAAuE;AAEvE,oFAA4D;AAC5D,
|
1
|
+
{"version":3,"file":"code-tab-page.js","sourceRoot":"","sources":["../code-tab-page.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kDAAsD;AACtD,4DAAoC;AACpC,+CAA6E;AAC7E,mCAAiC;AACjC,sEAAqD;AACrD,4GAA0F;AAC1F,oHAAoF;AACpF,oGAAwE;AACxE,oGAAsE;AAEtE,kEAAsD;AACtD,0EAA6D;AAC7D,wGAA4E;AAE5E,sFAAkF;AAClF,0FAAuE;AAEvE,oFAA4D;AAC5D,4IAGyE;AACzE,8IAG0E;AAC1E,oEAA0C;AAC1C,0GAAqF;AAErF,4FAAiD;AAQjD,SAAgB,QAAQ,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,IAAI,EAAE,iBAAiB,EAAiB;;IAC1F,MAAM,SAAS,GAAG,IAAA,6CAAa,GAAE,CAAC;IAClC,MAAM,SAAS,GAAG,IAAA,kBAAU,EAAC,4BAAgB,CAAC,CAAC;IAC/C,MAAM,EAAE,QAAQ,EAAE,QAAQ,GAAG,EAAE,EAAE,YAAY,EAAE,QAAQ,EAAE,GAAG,IAAA,4CAAO,EAAC,SAAS,CAAC,EAAE,CAAC,CAAC;IAClF,MAAM,EAAE,IAAI,EAAE,SAAS,GAAG,EAAE,EAAE,GAAG,IAAA,8EAAqB,EAAC,IAAI,EAAE,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,CAAC;IAEtF,MAAM,WAAW,GAAG,SAAS,CAAC,IAAI,IAAI,QAAQ,CAAC;IAC/C,MAAM,eAAe,GAAG,IAAA,uFAA6B,EAAC,SAAS,EAAE,WAAW,CAAC,CAAC;IAC9E,MAAM,mBAAmB,GAAG,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,YAAY,CAAC;IAC1D,MAAM,EAAE,IAAI,EAAE,uBAAuB,EAAE,OAAO,EAAE,GAAG,IAAA,wFAA+B,EAChF,IAAI,EACJ;QACE,WAAW,EAAE,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE;QACpC,MAAM,EAAE,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,MAAM;QAC/B,QAAQ,EAAE,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,IAAI;KACpC,EACD,CAAC,eAAe,CACjB,CAAC;IAEF,MAAM,0BAA0B,GAAG,sBAAsB,CACvD,CAAC,uBAAuB,KAAI,MAAA,MAAA,uBAAuB,CAAC,CAAC,CAAC,0CAAE,KAAK,0CAAG,CAAC,CAAC,CAAA,CAAC,IAAI,SAAS,CACjF,CAAC;IACF,MAAM,QAAQ,GAAG,IAAA,kDAAW,GAAE,CAAC;IAC/B,MAAM,CAAC,aAAa,EAAE,kBAAkB,CAAC,GAAG,IAAA,gBAAQ,EAAC,CAAC,QAAQ,CAAC,CAAC;IAChE,MAAM,eAAe,GAAG,aAAa,CAAC,CAAC,CAAC,+CAAM,CAAC,GAAG,CAAC,CAAC,CAAC,+CAAM,CAAC,IAAI,CAAC;IACjE,MAAM,gBAAgB,GAAoB,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,IAAA,gBAAO,EAAC,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,MAAM,EAAE,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IACzG,MAAM,IAAI,GAAG,IAAA,yCAAW,EAAC,gBAAgB,EAAE,WAAW,CAAC,CAAC;IACxD,MAAM,0BAA0B,GAAG,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,IAAI,CAAC,eAAe,CAAC;IAEvG,OAAO,CACL,8BAAC,kDAAS,IAAC,MAAM,EAAE,eAAe,EAAE,IAAI,EAAC,KAAK,EAAC,SAAS,EAAE,IAAA,oBAAU,EAAC,mCAAM,CAAC,QAAQ,EAAE,SAAS,CAAC;QAC9F,8BAAC,6CAAI,IAAC,SAAS,EAAE,mCAAM,CAAC,IAAI;YAC1B,8BAAC,4BAAQ,IACP,WAAW,EAAE,SAAS,CAAC,EAAE,EACzB,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,EACV,kBAAkB,EAAE,0BAA0B,EAC9C,OAAO,EAAE,0BAA0B,EACnC,oBAAoB,EAAE,iBAAiB,GACvC,CACG;QACP,8BAAC,0DAAa,IAAC,SAAS,EAAE,mCAAM,CAAC,QAAQ;YACvC,8BAAC,8CAAS,IACR,SAAS,EAAC,MAAM,EAChB,MAAM,EAAE,aAAa,EACrB,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,EACvC,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,EAC5C,cAAc,EAAE,GAAG,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,YAAY,EAC9D,SAAS,EAAE,mCAAM,CAAC,SAAS,GAC3B,CACY;QAChB,8BAAC,6CAAI,IAAC,SAAS,EAAE,mCAAM,CAAC,KAAK;YAC3B,8BAAC,mCAAW,IACV,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,CAAC,cAAc,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,EAClF,OAAO,EAAE,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,GAAG,IAAI,CAAC,EAAE,GAAG,IAAA,kCAAK,EAAC,WAAW,EAAE,SAAS,CAAC,OAAO,CAAC,EAAE,EAAE,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,EAC3G,OAAO,EAAE,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,YAAY,CAAC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,GACxE,CACG,CACG,CACb,CAAC;AACJ,CAAC;AAhED,4BAgEC;AAED,SAAS,cAAc,CAAC,QAAiB,EAAE,QAAmB;IAC5D,OAAO,SAAS,MAAM,CAAC,EAAE,IAAI,EAAoB;QAC/C,MAAM,QAAQ,GAAG,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,EAAE,CAAC;QAC1B,IAAI,QAAQ,KAAK,QAAQ,EAAE;YACzB,OAAO,8BAAC,2BAAK,IAAC,SAAS,EAAE,mCAAM,CAAC,KAAK,WAAc,CAAC;SACrD;QACD,IAAI,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,QAAQ,CAAC,QAAQ,CAAC,EAAE;YAChC,OAAO,8BAAC,2BAAK,IAAC,SAAS,EAAE,mCAAM,CAAC,KAAK,UAAa,CAAC;SACpD;QACD,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;AACJ,CAAC;AAED,SAAgB,YAAY,CAAC,gBAAiC;IAC5D,OAAO,SAAS,IAAI,CAAC,EAAE,EAAE,EAAY;QACnC,OAAO,IAAA,yCAAW,EAAC,gBAAgB,EAAE,EAAE,CAAC,CAAC;IAC3C,CAAC,CAAC;AACJ,CAAC;AAJD,oCAIC;AAED,SAAS,sBAAsB,CAAC,IAA+B;;IAC7D,IAAI,CAAC,IAAI;QAAE,OAAO,SAAS,CAAC;IAC5B,IAAI,IAAA,wBAAY,EAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAA,IAAI,CAAC,IAAI,mCAAI,CAAC,CAAC,GAAG,2DAAmB;QAAE,OAAO,SAAS,CAAC;IACxF,OAAO,IAAI,CAAC,OAAO,CAAC;AACtB,CAAC"}
|
Binary file
|
package/package.json
CHANGED
@@ -1,12 +1,12 @@
|
|
1
1
|
{
|
2
2
|
"name": "@teambit/code.ui.code-tab-page",
|
3
|
-
"version": "0.0.
|
3
|
+
"version": "0.0.615",
|
4
4
|
"homepage": "https://bit.cloud/teambit/code/ui/code-tab-page",
|
5
5
|
"main": "dist/index.js",
|
6
6
|
"componentId": {
|
7
7
|
"scope": "teambit.code",
|
8
8
|
"name": "ui/code-tab-page",
|
9
|
-
"version": "0.0.
|
9
|
+
"version": "0.0.615"
|
10
10
|
},
|
11
11
|
"dependencies": {
|
12
12
|
"classnames": "2.2.6",
|
@@ -16,17 +16,17 @@
|
|
16
16
|
"@teambit/base-ui.surfaces.split-pane.hover-splitter": "1.0.0",
|
17
17
|
"@teambit/base-ui.surfaces.split-pane.split-pane": "1.0.0",
|
18
18
|
"@teambit/base-ui.utils.string.affix": "1.0.0",
|
19
|
-
"@teambit/code.ui.code-view": "0.0.506",
|
20
19
|
"@teambit/code.ui.hooks.use-code-params": "0.0.496",
|
21
20
|
"@teambit/code.ui.queries.get-component-code": "0.0.502",
|
22
21
|
"@teambit/code.ui.utils.get-file-icon": "0.0.495",
|
23
22
|
"@teambit/design.ui.tree": "0.0.15",
|
24
23
|
"@teambit/documenter.ui.label": "4.0.3",
|
25
24
|
"@teambit/ui-foundation.ui.constants.z-indexes": "0.0.498",
|
26
|
-
"@teambit/code.ui.code-tab-tree": "0.0.
|
27
|
-
"@teambit/
|
28
|
-
"@teambit/component.ui.artifacts.
|
29
|
-
"@teambit/component.ui.artifacts.
|
25
|
+
"@teambit/code.ui.code-tab-tree": "0.0.604",
|
26
|
+
"@teambit/code.ui.code-view": "0.0.509",
|
27
|
+
"@teambit/component.ui.artifacts.artifacts-tree": "0.0.17",
|
28
|
+
"@teambit/component.ui.artifacts.models.component-artifacts-model": "0.0.7",
|
29
|
+
"@teambit/component.ui.artifacts.queries.use-component-artifacts": "0.0.9",
|
30
30
|
"@teambit/ui-foundation.ui.buttons.collapser": "0.0.206",
|
31
31
|
"@teambit/ui-foundation.ui.hooks.use-is-mobile": "0.0.188",
|
32
32
|
"@teambit/ui-foundation.ui.tree.tree-node": "0.0.505"
|
Binary file
|
File without changes
|