@teambit/component.ui.component-compare.compare-aspects.compare-aspect-view 0.0.13 → 0.0.15
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/.bit-capsule-ready +0 -0
- package/compare-aspect-view.module.scss +26 -0
- package/compare-aspect-view.tsx +4 -17
- package/config-editor.tsx +111 -0
- package/dist/compare-aspect-view.d.ts +3 -3
- package/dist/compare-aspect-view.js +4 -5
- package/dist/compare-aspect-view.js.map +1 -1
- package/dist/compare-aspect-view.module.scss +26 -0
- package/dist/config-editor.d.ts +8 -0
- package/dist/config-editor.js +91 -0
- package/dist/config-editor.js.map +1 -0
- package/package.json +10 -5
- package/schema.json +562 -0
- package/static/css/teambit.component/ui/component-compare/compare-aspects/compare-aspect-view.845f1e01.css +1 -0
- package/teambit_component_ui_component_compare_compare_aspects_compare_aspect_view-component.js +26 -0
- package/teambit_component_ui_component_compare_compare_aspects_compare_aspect_view-preview.js +1 -0
- package/dist/preview-1695239591785.js +0 -7
- package/dist/tsconfig.json +0 -32
- package/tsconfig.json +0 -32
- package/types/asset.d.ts +0 -29
- package/types/style.d.ts +0 -42
|
File without changes
|
|
@@ -48,3 +48,29 @@ $editor-padding: 56px;
|
|
|
48
48
|
background-image: linear-gradient(to right, currentColor 0%, #2b2b2b 30%, #2b2b2b 50%, currentColor 100%);
|
|
49
49
|
}
|
|
50
50
|
}
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
:global(.side-by-side) {
|
|
54
|
+
// display the copy button only in side by side view & on hover
|
|
55
|
+
&:hover {
|
|
56
|
+
.copyButton {
|
|
57
|
+
display: unset;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.copyButton {
|
|
63
|
+
cursor: pointer;
|
|
64
|
+
display: none;
|
|
65
|
+
position: absolute;
|
|
66
|
+
top: 0;
|
|
67
|
+
right: 0;
|
|
68
|
+
|
|
69
|
+
&.isLabelVisible {
|
|
70
|
+
display: unset;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.message {
|
|
75
|
+
left: 0;
|
|
76
|
+
}
|
package/compare-aspect-view.tsx
CHANGED
|
@@ -3,9 +3,8 @@ import classNames from 'classnames';
|
|
|
3
3
|
import { H4 } from '@teambit/documenter.ui.heading';
|
|
4
4
|
import { BlockSkeleton } from '@teambit/base-ui.loaders.skeleton';
|
|
5
5
|
import { DiffEditor } from '@monaco-editor/react';
|
|
6
|
-
import { darkMode } from '@teambit/base-ui.theme.dark-theme';
|
|
7
6
|
import { ComponentAspectData } from '@teambit/component.ui.component-compare.compare-aspects.models.component-compare-aspects-model';
|
|
8
|
-
|
|
7
|
+
import { ConfigDiffEditor } from './config-editor'
|
|
9
8
|
import styles from './compare-aspect-view.module.scss';
|
|
10
9
|
|
|
11
10
|
export type CompareAspectViewProps = {
|
|
@@ -24,20 +23,8 @@ export function CompareAspectView({
|
|
|
24
23
|
}: CompareAspectViewProps) {
|
|
25
24
|
const title = useMemo(() => name?.split('/').pop(), [name]);
|
|
26
25
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
key={`aspect-config-diff-editor-${title}`}
|
|
30
|
-
modified={JSON.stringify(compareAspectData?.config, null, 2)}
|
|
31
|
-
original={JSON.stringify(baseAspectData?.config, null, 2)}
|
|
32
|
-
language={'json'}
|
|
33
|
-
className={darkMode}
|
|
34
|
-
theme={'vs-dark'}
|
|
35
|
-
options={{
|
|
36
|
-
readOnly: true,
|
|
37
|
-
}}
|
|
38
|
-
loading={<AspectsCompareViewLoader />}
|
|
39
|
-
/>
|
|
40
|
-
);
|
|
26
|
+
const original = JSON.stringify(baseAspectData?.config, null, 2)
|
|
27
|
+
const modified = JSON.stringify(compareAspectData?.config, null, 2)
|
|
41
28
|
|
|
42
29
|
const calculatedDataDiffEditor = (
|
|
43
30
|
<DiffEditor
|
|
@@ -69,7 +56,7 @@ export function CompareAspectView({
|
|
|
69
56
|
<H4 size="xxs" className={styles.name}>
|
|
70
57
|
<span>Config</span>
|
|
71
58
|
</H4>
|
|
72
|
-
{loading ? <AspectsCompareViewLoader /> :
|
|
59
|
+
{loading ? <AspectsCompareViewLoader /> : <ConfigDiffEditor original={original} modified={modified} />}
|
|
73
60
|
</div>
|
|
74
61
|
<div className={styles.componentCompareAspectCalculatedDiff}>
|
|
75
62
|
<H4 size="xxs" className={styles.name}>
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
import React, { HTMLAttributes, useMemo, useState, useRef, useEffect, ForwardedRef } from 'react';
|
|
2
|
+
import copy from 'copy-to-clipboard';
|
|
3
|
+
import classNames from 'classnames';
|
|
4
|
+
import { CopiedMessage } from '@teambit/documenter.ui.copied-message';
|
|
5
|
+
import { BlockSkeleton } from '@teambit/base-ui.loaders.skeleton';
|
|
6
|
+
import { DiffEditor } from '@monaco-editor/react';
|
|
7
|
+
import { darkMode } from '@teambit/base-ui.theme.dark-theme';
|
|
8
|
+
import { Icon } from '@teambit/design.elements.icon';
|
|
9
|
+
|
|
10
|
+
import styles from './compare-aspect-view.module.scss';
|
|
11
|
+
|
|
12
|
+
export type CompareAspectViewProps = {
|
|
13
|
+
original?: string;
|
|
14
|
+
modified?: string;
|
|
15
|
+
loading?: boolean;
|
|
16
|
+
name?: string;
|
|
17
|
+
} & HTMLAttributes<HTMLDivElement>;
|
|
18
|
+
|
|
19
|
+
export function ConfigDiffEditor({
|
|
20
|
+
original,
|
|
21
|
+
modified,
|
|
22
|
+
name,
|
|
23
|
+
}: CompareAspectViewProps) {
|
|
24
|
+
const diffEditorRef = useRef(null);
|
|
25
|
+
const title = useMemo(() => name?.split('/').pop(), [name]);
|
|
26
|
+
|
|
27
|
+
const originalPanelRef = useRef(null);
|
|
28
|
+
const modifiedPanelRef = useRef(null);
|
|
29
|
+
|
|
30
|
+
const handleEditorMount = (editor) => {
|
|
31
|
+
diffEditorRef.current = editor;
|
|
32
|
+
|
|
33
|
+
// Access the original and modified editors
|
|
34
|
+
const originalEditor = editor.getOriginalEditor();
|
|
35
|
+
const modifiedEditor = editor.getModifiedEditor();
|
|
36
|
+
|
|
37
|
+
// Append copy button directly to the original and modified panels
|
|
38
|
+
appendComponentToPanel(originalEditor, originalPanelRef.current);
|
|
39
|
+
appendComponentToPanel(modifiedEditor, modifiedPanelRef.current);
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
const appendComponentToPanel = (editorInstance, element) => {
|
|
43
|
+
const editorDomNode = editorInstance.getDomNode();
|
|
44
|
+
if (editorDomNode && element) {
|
|
45
|
+
// Append the React component's DOM node directly to the editor
|
|
46
|
+
editorDomNode.appendChild(element);
|
|
47
|
+
}
|
|
48
|
+
};
|
|
49
|
+
return (
|
|
50
|
+
<>
|
|
51
|
+
<DiffEditor
|
|
52
|
+
key={`aspect-config-diff-editor-${title}`}
|
|
53
|
+
original={original}
|
|
54
|
+
modified={modified}
|
|
55
|
+
language={'json'}
|
|
56
|
+
className={darkMode}
|
|
57
|
+
theme={'vs-dark'}
|
|
58
|
+
options={{
|
|
59
|
+
readOnly: true,
|
|
60
|
+
}}
|
|
61
|
+
loading={<AspectsCompareViewLoader />}
|
|
62
|
+
|
|
63
|
+
onMount={handleEditorMount}
|
|
64
|
+
|
|
65
|
+
/>
|
|
66
|
+
{original && <PanelContent text={original} ref={originalPanelRef} />}
|
|
67
|
+
{modified && <PanelContent text={modified} ref={modifiedPanelRef} />}
|
|
68
|
+
</>
|
|
69
|
+
);
|
|
70
|
+
};
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
function AspectsCompareViewLoader() {
|
|
74
|
+
return <BlockSkeleton className={styles.loader} lines={16} />;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
function CopyButton({text}: {text: string}) {
|
|
78
|
+
const [isCopied, setCopy] = useState(false);
|
|
79
|
+
|
|
80
|
+
const handleCopy = () => {
|
|
81
|
+
setCopy(true);
|
|
82
|
+
setTimeout(() => setCopy(false), 2000);
|
|
83
|
+
copy(text);
|
|
84
|
+
};
|
|
85
|
+
|
|
86
|
+
return (
|
|
87
|
+
|
|
88
|
+
<div className={classNames(styles.copyButton, isCopied && styles.isLabelVisible)} onClick={handleCopy}>
|
|
89
|
+
<Icon className={styles.copyIcon} of="copy-cmp" />
|
|
90
|
+
<CopiedMessage className={styles.message} show={isCopied} />
|
|
91
|
+
</div>
|
|
92
|
+
|
|
93
|
+
)
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
|
|
97
|
+
const PanelContent = React.forwardRef(({ text }: { text: string }, ref: ForwardedRef<HTMLDivElement>) => {
|
|
98
|
+
return (
|
|
99
|
+
<div
|
|
100
|
+
ref={ref}
|
|
101
|
+
style={{
|
|
102
|
+
position: 'absolute',
|
|
103
|
+
top: '8px',
|
|
104
|
+
right: '18px',
|
|
105
|
+
}}
|
|
106
|
+
>
|
|
107
|
+
<CopyButton text={text} />
|
|
108
|
+
</div>
|
|
109
|
+
);
|
|
110
|
+
});
|
|
111
|
+
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { HTMLAttributes } from 'react';
|
|
1
|
+
import React, { HTMLAttributes } from 'react';
|
|
2
2
|
import { ComponentAspectData } from '@teambit/component.ui.component-compare.compare-aspects.models.component-compare-aspects-model';
|
|
3
|
-
export
|
|
3
|
+
export type CompareAspectViewProps = {
|
|
4
4
|
baseAspectData?: ComponentAspectData;
|
|
5
5
|
compareAspectData?: ComponentAspectData;
|
|
6
6
|
loading?: boolean;
|
|
7
7
|
name?: string;
|
|
8
8
|
} & HTMLAttributes<HTMLDivElement>;
|
|
9
|
-
export declare function CompareAspectView({ baseAspectData, compareAspectData, name, loading, className, }: CompareAspectViewProps): JSX.Element;
|
|
9
|
+
export declare function CompareAspectView({ baseAspectData, compareAspectData, name, loading, className, }: CompareAspectViewProps): React.JSX.Element;
|
|
@@ -32,13 +32,12 @@ const classnames_1 = __importDefault(require("classnames"));
|
|
|
32
32
|
const documenter_ui_heading_1 = require("@teambit/documenter.ui.heading");
|
|
33
33
|
const base_ui_loaders_skeleton_1 = require("@teambit/base-ui.loaders.skeleton");
|
|
34
34
|
const react_2 = require("@monaco-editor/react");
|
|
35
|
-
const
|
|
35
|
+
const config_editor_1 = require("./config-editor");
|
|
36
36
|
const compare_aspect_view_module_scss_1 = __importDefault(require("./compare-aspect-view.module.scss"));
|
|
37
37
|
function CompareAspectView({ baseAspectData, compareAspectData, name, loading, className, }) {
|
|
38
38
|
const title = (0, react_1.useMemo)(() => name === null || name === void 0 ? void 0 : name.split('/').pop(), [name]);
|
|
39
|
-
const
|
|
40
|
-
|
|
41
|
-
}, loading: react_1.default.createElement(AspectsCompareViewLoader, null) }));
|
|
39
|
+
const original = JSON.stringify(baseAspectData === null || baseAspectData === void 0 ? void 0 : baseAspectData.config, null, 2);
|
|
40
|
+
const modified = JSON.stringify(compareAspectData === null || compareAspectData === void 0 ? void 0 : compareAspectData.config, null, 2);
|
|
42
41
|
const calculatedDataDiffEditor = (react_1.default.createElement(react_2.DiffEditor, { key: `aspect-data-diff-editor-${title}`, modified: JSON.stringify(compareAspectData === null || compareAspectData === void 0 ? void 0 : compareAspectData.data, null, 2), original: JSON.stringify(baseAspectData === null || baseAspectData === void 0 ? void 0 : baseAspectData.data, null, 2), language: 'json', className: compare_aspect_view_module_scss_1.default.diffEditor, theme: 'vs-dark', options: {
|
|
43
42
|
readOnly: true,
|
|
44
43
|
}, loading: react_1.default.createElement(AspectsCompareViewLoader, null) }));
|
|
@@ -50,7 +49,7 @@ function CompareAspectView({ baseAspectData, compareAspectData, name, loading, c
|
|
|
50
49
|
react_1.default.createElement("div", { className: compare_aspect_view_module_scss_1.default.componentCompareAspectConfigDiff },
|
|
51
50
|
react_1.default.createElement(documenter_ui_heading_1.H4, { size: "xxs", className: compare_aspect_view_module_scss_1.default.name },
|
|
52
51
|
react_1.default.createElement("span", null, "Config")),
|
|
53
|
-
loading ? react_1.default.createElement(AspectsCompareViewLoader, null) :
|
|
52
|
+
loading ? react_1.default.createElement(AspectsCompareViewLoader, null) : react_1.default.createElement(config_editor_1.ConfigDiffEditor, { original: original, modified: modified })),
|
|
54
53
|
react_1.default.createElement("div", { className: compare_aspect_view_module_scss_1.default.componentCompareAspectCalculatedDiff },
|
|
55
54
|
react_1.default.createElement(documenter_ui_heading_1.H4, { size: "xxs", className: compare_aspect_view_module_scss_1.default.name },
|
|
56
55
|
react_1.default.createElement("span", null, "Calculated Data")),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"compare-aspect-view.js","sourceRoot":"","sources":["../compare-aspect-view.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAuD;AACvD,4DAAoC;AACpC,0EAAoD;AACpD,gFAAkE;AAClE,gDAAkD;
|
|
1
|
+
{"version":3,"file":"compare-aspect-view.js","sourceRoot":"","sources":["../compare-aspect-view.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAuD;AACvD,4DAAoC;AACpC,0EAAoD;AACpD,gFAAkE;AAClE,gDAAkD;AAElD,mDAAkD;AAClD,wGAAuD;AASvD,SAAgB,iBAAiB,CAAC,EAChC,cAAc,EACd,iBAAiB,EACjB,IAAI,EACJ,OAAO,EACP,SAAS,GACc;IACvB,MAAM,KAAK,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAE1D,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAChE,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAErE,MAAM,wBAAwB,GAAG,CAC/B,8BAAC,kBAAU,IACT,GAAG,EAAE,2BAA2B,KAAK,EAAE,EACvC,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC,EAC1D,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC,EACvD,QAAQ,EAAE,MAAM,EAChB,SAAS,EAAE,yCAAM,CAAC,UAAU,EAC5B,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE;YACP,QAAQ,EAAE,IAAI;SACf,EACD,OAAO,EAAE,8BAAC,wBAAwB,OAAG,GACrC,CACH,CAAC;IAEF,OAAO,CACL,uCACE,GAAG,EAAE,sBAAsB,KAAK,EAAE,EAClC,SAAS,EAAE,IAAA,oBAAU,EAAC,yCAAM,CAAC,mCAAmC,EAAE,SAAS,CAAC;QAE5E,uCAAK,SAAS,EAAE,yCAAM,CAAC,IAAI;YACzB,8BAAC,0BAAE,IAAC,IAAI,EAAC,IAAI,EAAC,SAAS,EAAE,yCAAM,CAAC,IAAI;gBAClC,4CAAO,KAAK,CAAQ,CACjB,CACD;QACN,uCAAK,SAAS,EAAE,yCAAM,CAAC,yCAAyC;YAC9D,uCAAK,SAAS,EAAE,yCAAM,CAAC,gCAAgC;gBACrD,8BAAC,0BAAE,IAAC,IAAI,EAAC,KAAK,EAAC,SAAS,EAAE,yCAAM,CAAC,IAAI;oBACnC,qDAAmB,CAChB;gBACJ,OAAO,CAAC,CAAC,CAAC,8BAAC,wBAAwB,OAAG,CAAC,CAAC,CAAC,8BAAC,gCAAgB,IAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAClG;YACN,uCAAK,SAAS,EAAE,yCAAM,CAAC,oCAAoC;gBACzD,8BAAC,0BAAE,IAAC,IAAI,EAAC,KAAK,EAAC,SAAS,EAAE,yCAAM,CAAC,IAAI;oBACnC,8DAA4B,CACzB;gBACJ,OAAO,CAAC,CAAC,CAAC,8BAAC,wBAAwB,OAAG,CAAC,CAAC,CAAC,wBAAwB,CAC9D,CACF,CACF,CACP,CAAC;AACJ,CAAC;AArDD,8CAqDC;AAED,SAAS,wBAAwB;IAC/B,OAAO,8BAAC,wCAAa,IAAC,SAAS,EAAE,yCAAM,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,GAAI,CAAC;AAChE,CAAC"}
|
|
@@ -48,3 +48,29 @@ $editor-padding: 56px;
|
|
|
48
48
|
background-image: linear-gradient(to right, currentColor 0%, #2b2b2b 30%, #2b2b2b 50%, currentColor 100%);
|
|
49
49
|
}
|
|
50
50
|
}
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
:global(.side-by-side) {
|
|
54
|
+
// display the copy button only in side by side view & on hover
|
|
55
|
+
&:hover {
|
|
56
|
+
.copyButton {
|
|
57
|
+
display: unset;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.copyButton {
|
|
63
|
+
cursor: pointer;
|
|
64
|
+
display: none;
|
|
65
|
+
position: absolute;
|
|
66
|
+
top: 0;
|
|
67
|
+
right: 0;
|
|
68
|
+
|
|
69
|
+
&.isLabelVisible {
|
|
70
|
+
display: unset;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.message {
|
|
75
|
+
left: 0;
|
|
76
|
+
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React, { HTMLAttributes } from 'react';
|
|
2
|
+
export type CompareAspectViewProps = {
|
|
3
|
+
original?: string;
|
|
4
|
+
modified?: string;
|
|
5
|
+
loading?: boolean;
|
|
6
|
+
name?: string;
|
|
7
|
+
} & HTMLAttributes<HTMLDivElement>;
|
|
8
|
+
export declare function ConfigDiffEditor({ original, modified, name, }: CompareAspectViewProps): React.JSX.Element;
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
25
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
26
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
27
|
+
};
|
|
28
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
|
+
exports.ConfigDiffEditor = void 0;
|
|
30
|
+
const react_1 = __importStar(require("react"));
|
|
31
|
+
const copy_to_clipboard_1 = __importDefault(require("copy-to-clipboard"));
|
|
32
|
+
const classnames_1 = __importDefault(require("classnames"));
|
|
33
|
+
const documenter_ui_copied_message_1 = require("@teambit/documenter.ui.copied-message");
|
|
34
|
+
const base_ui_loaders_skeleton_1 = require("@teambit/base-ui.loaders.skeleton");
|
|
35
|
+
const react_2 = require("@monaco-editor/react");
|
|
36
|
+
const base_ui_theme_dark_theme_1 = require("@teambit/base-ui.theme.dark-theme");
|
|
37
|
+
const design_elements_icon_1 = require("@teambit/design.elements.icon");
|
|
38
|
+
const compare_aspect_view_module_scss_1 = __importDefault(require("./compare-aspect-view.module.scss"));
|
|
39
|
+
function ConfigDiffEditor({ original, modified, name, }) {
|
|
40
|
+
const diffEditorRef = (0, react_1.useRef)(null);
|
|
41
|
+
const title = (0, react_1.useMemo)(() => name === null || name === void 0 ? void 0 : name.split('/').pop(), [name]);
|
|
42
|
+
const originalPanelRef = (0, react_1.useRef)(null);
|
|
43
|
+
const modifiedPanelRef = (0, react_1.useRef)(null);
|
|
44
|
+
const handleEditorMount = (editor) => {
|
|
45
|
+
diffEditorRef.current = editor;
|
|
46
|
+
// Access the original and modified editors
|
|
47
|
+
const originalEditor = editor.getOriginalEditor();
|
|
48
|
+
const modifiedEditor = editor.getModifiedEditor();
|
|
49
|
+
// Append copy button directly to the original and modified panels
|
|
50
|
+
appendComponentToPanel(originalEditor, originalPanelRef.current);
|
|
51
|
+
appendComponentToPanel(modifiedEditor, modifiedPanelRef.current);
|
|
52
|
+
};
|
|
53
|
+
const appendComponentToPanel = (editorInstance, element) => {
|
|
54
|
+
const editorDomNode = editorInstance.getDomNode();
|
|
55
|
+
if (editorDomNode && element) {
|
|
56
|
+
// Append the React component's DOM node directly to the editor
|
|
57
|
+
editorDomNode.appendChild(element);
|
|
58
|
+
}
|
|
59
|
+
};
|
|
60
|
+
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
61
|
+
react_1.default.createElement(react_2.DiffEditor, { key: `aspect-config-diff-editor-${title}`, original: original, modified: modified, language: 'json', className: base_ui_theme_dark_theme_1.darkMode, theme: 'vs-dark', options: {
|
|
62
|
+
readOnly: true,
|
|
63
|
+
}, loading: react_1.default.createElement(AspectsCompareViewLoader, null), onMount: handleEditorMount }),
|
|
64
|
+
original && react_1.default.createElement(PanelContent, { text: original, ref: originalPanelRef }),
|
|
65
|
+
modified && react_1.default.createElement(PanelContent, { text: modified, ref: modifiedPanelRef })));
|
|
66
|
+
}
|
|
67
|
+
exports.ConfigDiffEditor = ConfigDiffEditor;
|
|
68
|
+
;
|
|
69
|
+
function AspectsCompareViewLoader() {
|
|
70
|
+
return react_1.default.createElement(base_ui_loaders_skeleton_1.BlockSkeleton, { className: compare_aspect_view_module_scss_1.default.loader, lines: 16 });
|
|
71
|
+
}
|
|
72
|
+
function CopyButton({ text }) {
|
|
73
|
+
const [isCopied, setCopy] = (0, react_1.useState)(false);
|
|
74
|
+
const handleCopy = () => {
|
|
75
|
+
setCopy(true);
|
|
76
|
+
setTimeout(() => setCopy(false), 2000);
|
|
77
|
+
(0, copy_to_clipboard_1.default)(text);
|
|
78
|
+
};
|
|
79
|
+
return (react_1.default.createElement("div", { className: (0, classnames_1.default)(compare_aspect_view_module_scss_1.default.copyButton, isCopied && compare_aspect_view_module_scss_1.default.isLabelVisible), onClick: handleCopy },
|
|
80
|
+
react_1.default.createElement(design_elements_icon_1.Icon, { className: compare_aspect_view_module_scss_1.default.copyIcon, of: "copy-cmp" }),
|
|
81
|
+
react_1.default.createElement(documenter_ui_copied_message_1.CopiedMessage, { className: compare_aspect_view_module_scss_1.default.message, show: isCopied })));
|
|
82
|
+
}
|
|
83
|
+
const PanelContent = react_1.default.forwardRef(({ text }, ref) => {
|
|
84
|
+
return (react_1.default.createElement("div", { ref: ref, style: {
|
|
85
|
+
position: 'absolute',
|
|
86
|
+
top: '8px',
|
|
87
|
+
right: '18px',
|
|
88
|
+
} },
|
|
89
|
+
react_1.default.createElement(CopyButton, { text: text })));
|
|
90
|
+
});
|
|
91
|
+
//# sourceMappingURL=config-editor.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"config-editor.js","sourceRoot":"","sources":["../config-editor.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,21 +1,24 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@teambit/component.ui.component-compare.compare-aspects.compare-aspect-view",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.15",
|
|
4
4
|
"homepage": "https://bit.cloud/teambit/component/ui/component-compare/compare-aspects/compare-aspect-view",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"componentId": {
|
|
7
7
|
"scope": "teambit.component",
|
|
8
8
|
"name": "ui/component-compare/compare-aspects/compare-aspect-view",
|
|
9
|
-
"version": "0.0.
|
|
9
|
+
"version": "0.0.15"
|
|
10
10
|
},
|
|
11
11
|
"dependencies": {
|
|
12
12
|
"@monaco-editor/react": "4.4.6",
|
|
13
13
|
"classnames": "2.2.6",
|
|
14
|
+
"copy-to-clipboard": "^3.3.3",
|
|
14
15
|
"core-js": "^3.0.0",
|
|
15
16
|
"@teambit/base-ui.loaders.skeleton": "1.0.1",
|
|
16
|
-
"@teambit/
|
|
17
|
+
"@teambit/component.ui.component-compare.compare-aspects.models.component-compare-aspects-model": "0.0.11",
|
|
17
18
|
"@teambit/documenter.ui.heading": "4.1.1",
|
|
18
|
-
"@teambit/
|
|
19
|
+
"@teambit/base-ui.theme.dark-theme": "1.0.2",
|
|
20
|
+
"@teambit/design.elements.icon": "1.0.24",
|
|
21
|
+
"@teambit/documenter.ui.copied-message": "4.1.8"
|
|
19
22
|
},
|
|
20
23
|
"devDependencies": {
|
|
21
24
|
"@types/classnames": "2.2.11",
|
|
@@ -32,6 +35,8 @@
|
|
|
32
35
|
"react-dom": "^16.8.0 || ^17.0.0"
|
|
33
36
|
},
|
|
34
37
|
"license": "Apache-2.0",
|
|
38
|
+
"optionalDependencies": {},
|
|
39
|
+
"peerDependenciesMeta": {},
|
|
35
40
|
"private": false,
|
|
36
41
|
"engines": {
|
|
37
42
|
"node": ">=12.22.0"
|
|
@@ -50,4 +55,4 @@
|
|
|
50
55
|
"angular",
|
|
51
56
|
"angular-components"
|
|
52
57
|
]
|
|
53
|
-
}
|
|
58
|
+
}
|