@teambit/compositions.ui.composition-compare 0.0.161 → 0.0.163

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.
Files changed (14) hide show
  1. package/composition-compare.module.scss +18 -14
  2. package/composition-compare.tsx +87 -43
  3. package/composition-dropdown.tsx +10 -5
  4. package/dist/composition-compare.d.ts +4 -0
  5. package/dist/composition-compare.js +60 -35
  6. package/dist/composition-compare.js.map +1 -1
  7. package/dist/composition-compare.module.scss +18 -14
  8. package/dist/composition-dropdown.d.ts +2 -1
  9. package/dist/composition-dropdown.js +6 -4
  10. package/dist/composition-dropdown.js.map +1 -1
  11. package/package-tar/teambit-compositions.ui.composition-compare-0.0.163.tgz +0 -0
  12. package/package.json +3 -3
  13. package/package-tar/teambit-compositions.ui.composition-compare-0.0.161.tgz +0 -0
  14. /package/dist/{preview-1680751703602.js → preview-1682245644358.js} +0 -0
package/composition-compare.module.scss CHANGED
@@ -1,41 +1,37 @@
1
- .dropdownContainer {
1
+ .toolbar {
2
2
  display: flex;
3
3
  background-color: var(--bit-bg-heaviest, #ededed);
4
+ padding: 8px;
4
5
  }
5
6
 
6
- .leftDropdown {
7
+ .left,
8
+ .right {
7
9
  display: flex;
8
10
  flex: 1;
9
- padding: 16px;
10
- }
11
-
12
- .rightDropdown {
13
- display: flex;
14
- flex: 1;
15
- padding: 16px 16px 16px 0px;
11
+ padding: 8px;
12
+ background-color: #fff;
13
+ align-items: center;
14
+ justify-content: space-between;
16
15
  }
17
16
 
18
17
  .mainContainer {
19
18
  display: flex;
20
19
  height: 100%;
20
+ min-height: 80vh;
21
21
  }
22
22
 
23
23
  .subContainerLeft {
24
24
  flex: 1;
25
- background-color: #ededed;
26
- padding: 16px;
27
25
  }
28
26
 
29
27
  .subContainerRight {
30
28
  flex: 1;
31
- background-color: #ededed;
32
- padding: 16px 16px 16px 0px;
33
29
  }
34
30
 
35
31
  .subView {
36
32
  height: 100%;
37
33
  background-color: white;
38
- overflow-y: scroll;
34
+ overflow-y: auto;
39
35
  }
40
36
 
41
37
  .loader {
@@ -43,3 +39,11 @@
43
39
  align-items: center;
44
40
  height: 100%;
45
41
  }
42
+
43
+ .widgets {
44
+ display: flex;
45
+ }
46
+
47
+ .dropdown {
48
+ display: flex;
49
+ }
package/composition-compare.tsx CHANGED
@@ -1,64 +1,91 @@
1
+ /* eslint-disable react/prop-types */
1
2
  import { useComponentCompare } from '@teambit/component.ui.component-compare.context';
2
3
  import { CompositionContent, CompositionContentProps, EmptyStateSlot } from '@teambit/compositions';
3
4
  import { CompositionContextProvider } from '@teambit/compositions.ui.hooks.use-composition';
4
- import { CompareSplitLayoutPreset } from '@teambit/component.ui.component-compare.layouts.compare-split-layout-preset';
5
5
  import {
6
6
  useCompareQueryParam,
7
7
  useUpdatedUrlFromQuery,
8
8
  } from '@teambit/component.ui.component-compare.hooks.use-component-compare-url';
9
+ import { CompareSplitLayoutPreset } from '@teambit/component.ui.component-compare.layouts.compare-split-layout-preset';
9
10
  import { RoundLoader } from '@teambit/design.ui.round-loader';
10
11
  import queryString from 'query-string';
11
12
  import React, { useMemo, useState } from 'react';
12
- import styles from './composition-compare.module.scss';
13
13
  import { CompositionDropdown } from './composition-dropdown';
14
14
 
15
+ import styles from './composition-compare.module.scss';
16
+
15
17
  export type CompositionCompareProps = {
16
18
  emptyState?: EmptyStateSlot;
19
+ Widgets?: {
20
+ Right?: React.ReactNode;
21
+ Left?: React.ReactNode;
22
+ };
17
23
  PreviewView?: React.ComponentType<CompositionContentProps>;
18
24
  };
19
25
 
20
26
  export function CompositionCompare(props: CompositionCompareProps) {
21
- const { emptyState, PreviewView = CompositionContent } = props;
27
+ const { emptyState, PreviewView = CompositionContent, Widgets } = props;
22
28
 
23
- const component = useComponentCompare();
29
+ const componentCompareContext = useComponentCompare();
24
30
 
25
- const base = component?.base;
26
- const compare = component?.compare;
31
+ const { base, compare, baseContext, compareContext } = componentCompareContext || {};
27
32
 
28
33
  const baseCompositions = base?.model.compositions;
29
34
  const compareCompositions = compare?.model.compositions;
35
+
30
36
  const selectedCompositionBaseFile = useCompareQueryParam('compositionBaseFile');
31
37
  const selectedCompositionCompareFile = useCompareQueryParam('compositionCompareFile');
32
38
 
39
+ const baseState = baseContext?.state?.preview;
40
+ const compareState = compareContext?.state?.preview;
41
+ const baseHooks = baseContext?.hooks?.preview;
42
+ const compareHooks = compareContext?.hooks?.preview;
43
+ const selectedBaseFromState = baseState?.id;
44
+ const selectedCompareFromState = compareState?.id;
45
+
46
+ const selectedBaseCompositionId = selectedBaseFromState || selectedCompositionBaseFile;
47
+ const selectedCompositionCompareId = selectedCompareFromState || selectedCompositionCompareFile;
48
+
33
49
  const selectedBaseComp =
34
- (selectedCompositionBaseFile &&
50
+ (selectedBaseCompositionId &&
35
51
  baseCompositions &&
36
- baseCompositions.find((c) => c.identifier === selectedCompositionBaseFile)) ||
52
+ baseCompositions.find((c) => {
53
+ return c.identifier === selectedBaseCompositionId;
54
+ })) ||
37
55
  (baseCompositions && baseCompositions[0]);
38
56
 
39
57
  const selectedCompareComp =
40
- (selectedCompositionCompareFile &&
58
+ (selectedCompositionCompareId &&
41
59
  compareCompositions &&
42
- compareCompositions.find((c) => c.identifier === selectedCompositionCompareFile)) ||
60
+ compareCompositions.find((c) => {
61
+ return c.identifier === selectedCompositionCompareId;
62
+ })) ||
43
63
  (compareCompositions && compareCompositions[0]);
44
64
 
45
65
  const baseCompositionDropdownSource =
46
66
  baseCompositions?.map((c) => {
47
- const href = useUpdatedUrlFromQuery({
48
- compositionBaseFile: c.identifier,
49
- compositionCompareFile: selectedCompareComp?.identifier,
50
- });
51
-
52
- return { id: c.identifier, label: c.displayName, value: href };
67
+ const href = !baseState?.controlled
68
+ ? useUpdatedUrlFromQuery({
69
+ compositionBaseFile: c.identifier,
70
+ compositionCompareFile: selectedCompareComp?.identifier,
71
+ })
72
+ : useUpdatedUrlFromQuery({});
73
+ const onClick = baseState?.controlled ? baseHooks?.onClick : undefined;
74
+
75
+ return { id: c.identifier, label: c.displayName, href, onClick };
53
76
  }) || [];
54
77
 
55
78
  const compareCompositionDropdownSource =
56
79
  compareCompositions?.map((c) => {
57
- const href = useUpdatedUrlFromQuery({
58
- compositionBaseFile: selectedBaseComp?.identifier,
59
- compositionCompareFile: c.identifier,
60
- });
61
- return { id: c.identifier, label: c.displayName, value: href };
80
+ const href = !compareState?.controlled
81
+ ? useUpdatedUrlFromQuery({
82
+ compositionBaseFile: selectedBaseComp?.identifier,
83
+ compositionCompareFile: c.identifier,
84
+ })
85
+ : useUpdatedUrlFromQuery({});
86
+ const onClick = compareState?.controlled ? compareHooks?.onClick : undefined;
87
+
88
+ return { id: c.identifier, label: c.displayName, href, onClick };
62
89
  }) || [];
63
90
 
64
91
  const [baseCompositionParams, setBaseCompositionParams] = useState<Record<string, any>>({});
@@ -81,72 +108,89 @@ export function CompositionCompare(props: CompositionCompareProps) {
81
108
  };
82
109
 
83
110
  const BaseLayout = useMemo(() => {
84
- if (component?.base === undefined) {
111
+ if (base === undefined) {
85
112
  return <></>;
86
113
  }
114
+ const baseCompModel = base.model;
87
115
 
88
116
  return (
89
117
  <div className={styles.subView}>
90
118
  <CompositionContextProvider queryParams={baseCompositionParams} setQueryParams={setBaseCompositionParams}>
91
119
  <PreviewView
92
120
  emptyState={emptyState}
93
- component={component?.base.model}
121
+ component={baseCompModel}
94
122
  selected={selectedBaseComp}
95
123
  queryParams={baseCompQueryParams}
124
+ forceHeight={undefined}
125
+ innerBottomPadding={50}
96
126
  />
97
127
  </CompositionContextProvider>
98
128
  </div>
99
129
  );
100
- }, [component?.base, selectedBaseComp]);
130
+ }, [base, selectedBaseComp]);
101
131
 
102
132
  const CompareLayout = useMemo(() => {
103
- if (component?.compare === undefined) {
133
+ if (compare === undefined) {
104
134
  return <></>;
105
135
  }
136
+ const compareCompModel = compare.model;
106
137
 
107
138
  return (
108
139
  <div className={styles.subView}>
109
140
  <CompositionContextProvider queryParams={compareCompositionParams} setQueryParams={setCompareCompositionParams}>
110
141
  <PreviewView
111
142
  emptyState={emptyState}
112
- component={component.compare.model}
143
+ component={compareCompModel}
113
144
  selected={selectedCompareComp}
114
145
  queryParams={compareCompQueryParams}
146
+ forceHeight={undefined}
147
+ innerBottomPadding={50}
115
148
  />
116
149
  </CompositionContextProvider>
117
150
  </div>
118
151
  );
119
- }, [component?.compare, selectedCompareComp]);
152
+ }, [compare, selectedCompareComp]);
120
153
 
121
- function CompositionDropdowns() {
122
- if (baseCompositionDropdownSource.length < 0 && compareCompositionDropdownSource.length < 0) {
123
- return <></>;
154
+ const CompositionToolbar = () => {
155
+ if (!base && !compare) {
156
+ return null;
124
157
  }
125
158
 
126
159
  return (
127
- <div className={styles.dropdownContainer}>
128
- <div className={styles.leftDropdown}>
129
- {baseCompositionDropdownSource.length > 0 && (
130
- <CompositionDropdown dropdownItems={baseCompositionDropdownSource} selected={selectedBaseDropdown} />
131
- )}
132
- </div>
133
- <div className={styles.rightDropdown}>
134
- {compareCompositionDropdownSource.length > 0 && (
135
- <CompositionDropdown dropdownItems={compareCompositionDropdownSource} selected={selectedCompareDropdown} />
136
- )}
160
+ <div className={styles.toolbar}>
161
+ {base && (
162
+ <div className={styles.left}>
163
+ <div className={styles.dropdown}>
164
+ {baseCompositionDropdownSource.length > 0 && (
165
+ <CompositionDropdown dropdownItems={baseCompositionDropdownSource} selected={selectedBaseDropdown} />
166
+ )}
167
+ </div>
168
+ <div className={styles.widgets}>{Widgets?.Left}</div>
169
+ </div>
170
+ )}
171
+ <div className={styles.right}>
172
+ <div className={styles.dropdown}>
173
+ {compareCompositionDropdownSource.length > 0 && (
174
+ <CompositionDropdown
175
+ dropdownItems={compareCompositionDropdownSource}
176
+ selected={selectedCompareDropdown}
177
+ />
178
+ )}
179
+ </div>
180
+ <div className={styles.widgets}>{Widgets?.Right}</div>
137
181
  </div>
138
182
  </div>
139
183
  );
140
- }
184
+ };
141
185
 
142
186
  return (
143
187
  <>
144
- {component?.loading && (
188
+ {componentCompareContext?.loading && (
145
189
  <div className={styles.loader}>
146
190
  <RoundLoader />
147
191
  </div>
148
192
  )}
149
- <CompositionDropdowns />
193
+ <CompositionToolbar />
150
194
  <CompareSplitLayoutPreset base={BaseLayout} compare={CompareLayout} />
151
195
  </>
152
196
  );
package/composition-dropdown.tsx CHANGED
@@ -1,10 +1,11 @@
1
+ import React, { useEffect, useRef } from 'react';
1
2
  import { MenuLinkItem } from '@teambit/design.ui.surfaces.menu.link-item';
2
3
  import { Icon } from '@teambit/evangelist.elements.icon';
3
4
  import { Dropdown } from '@teambit/evangelist.surfaces.dropdown';
4
- import React, { useEffect, useRef } from 'react';
5
+
5
6
  import styles from './composition-dropdown.module.scss';
6
7
 
7
- export type DropdownItem = { id: string; label: string; value: string };
8
+ export type DropdownItem = { id: string; label: string; href?: string; onClick?: (id: string, e) => void };
8
9
 
9
10
  export type CompositionDropdownProps = {
10
11
  selected?: Omit<DropdownItem, 'value'>;
@@ -13,6 +14,7 @@ export type CompositionDropdownProps = {
13
14
 
14
15
  export function CompositionDropdown(props: CompositionDropdownProps) {
15
16
  const { selected, dropdownItems: data } = props;
17
+ const key = (item: DropdownItem) => `${item.id}-${item.href}`;
16
18
 
17
19
  return (
18
20
  <Dropdown
@@ -25,7 +27,7 @@ export function CompositionDropdown(props: CompositionDropdownProps) {
25
27
  }
26
28
  >
27
29
  {data.map((item) => {
28
- return <MenuItem key={item.id} current={item} selected={selected} />;
30
+ return <MenuItem key={key(item)} current={item} selected={selected} />;
29
31
  })}
30
32
  </Dropdown>
31
33
  );
@@ -41,15 +43,18 @@ function MenuItem(props: MenuItemProps) {
41
43
 
42
44
  const isCurrent = selected?.id === current.id;
43
45
  const currentVersionRef = useRef<HTMLDivElement>(null);
46
+
44
47
  useEffect(() => {
45
48
  if (isCurrent) {
46
49
  currentVersionRef.current?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
47
50
  }
48
51
  }, [isCurrent]);
49
52
 
53
+ const onClick = (!!current.onClick && ((e) => current.onClick?.(current.id, e))) || undefined;
54
+
50
55
  return (
51
- <div ref={currentVersionRef}>
52
- <MenuLinkItem active={current.id === selected?.id} href={current.value}>
56
+ <div ref={currentVersionRef} key={`${current.href}-container`}>
57
+ <MenuLinkItem key={current.href} active={current.id === selected?.id} href={current.href} onClick={onClick}>
53
58
  <div>{current.label}</div>
54
59
  </MenuLinkItem>
55
60
  </div>
package/dist/composition-compare.d.ts CHANGED
@@ -2,6 +2,10 @@ import { CompositionContentProps, EmptyStateSlot } from '@teambit/compositions';
2
2
  import React from 'react';
3
3
  export declare type CompositionCompareProps = {
4
4
  emptyState?: EmptyStateSlot;
5
+ Widgets?: {
6
+ Right?: React.ReactNode;
7
+ Left?: React.ReactNode;
8
+ };
5
9
  PreviewView?: React.ComponentType<CompositionContentProps>;
6
10
  };
7
11
  export declare function CompositionCompare(props: CompositionCompareProps): JSX.Element;
package/dist/composition-compare.js CHANGED
@@ -27,46 +27,65 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
27
27
  };
28
28
  Object.defineProperty(exports, "__esModule", { value: true });
29
29
  exports.CompositionCompare = void 0;
30
+ /* eslint-disable react/prop-types */
30
31
  const component_ui_component_compare_context_1 = require("@teambit/component.ui.component-compare.context");
31
32
  const compositions_1 = require("@teambit/compositions");
32
33
  const compositions_ui_hooks_use_composition_1 = require("@teambit/compositions.ui.hooks.use-composition");
33
- const component_ui_component_compare_layouts_compare_split_layout_preset_1 = require("@teambit/component.ui.component-compare.layouts.compare-split-layout-preset");
34
34
  const component_ui_component_compare_hooks_use_component_compare_url_1 = require("@teambit/component.ui.component-compare.hooks.use-component-compare-url");
35
+ const component_ui_component_compare_layouts_compare_split_layout_preset_1 = require("@teambit/component.ui.component-compare.layouts.compare-split-layout-preset");
35
36
  const design_ui_round_loader_1 = require("@teambit/design.ui.round-loader");
36
37
  const query_string_1 = __importDefault(require("query-string"));
37
38
  const react_1 = __importStar(require("react"));
38
- const composition_compare_module_scss_1 = __importDefault(require("./composition-compare.module.scss"));
39
39
  const composition_dropdown_1 = require("./composition-dropdown");
40
+ const composition_compare_module_scss_1 = __importDefault(require("./composition-compare.module.scss"));
40
41
  function CompositionCompare(props) {
41
- const { emptyState, PreviewView = compositions_1.CompositionContent } = props;
42
- const component = (0, component_ui_component_compare_context_1.useComponentCompare)();
43
- const base = component === null || component === void 0 ? void 0 : component.base;
44
- const compare = component === null || component === void 0 ? void 0 : component.compare;
42
+ var _a, _b, _c, _d;
43
+ const { emptyState, PreviewView = compositions_1.CompositionContent, Widgets } = props;
44
+ const componentCompareContext = (0, component_ui_component_compare_context_1.useComponentCompare)();
45
+ const { base, compare, baseContext, compareContext } = componentCompareContext || {};
45
46
  const baseCompositions = base === null || base === void 0 ? void 0 : base.model.compositions;
46
47
  const compareCompositions = compare === null || compare === void 0 ? void 0 : compare.model.compositions;
47
48
  const selectedCompositionBaseFile = (0, component_ui_component_compare_hooks_use_component_compare_url_1.useCompareQueryParam)('compositionBaseFile');
48
49
  const selectedCompositionCompareFile = (0, component_ui_component_compare_hooks_use_component_compare_url_1.useCompareQueryParam)('compositionCompareFile');
49
- const selectedBaseComp = (selectedCompositionBaseFile &&
50
+ const baseState = (_a = baseContext === null || baseContext === void 0 ? void 0 : baseContext.state) === null || _a === void 0 ? void 0 : _a.preview;
51
+ const compareState = (_b = compareContext === null || compareContext === void 0 ? void 0 : compareContext.state) === null || _b === void 0 ? void 0 : _b.preview;
52
+ const baseHooks = (_c = baseContext === null || baseContext === void 0 ? void 0 : baseContext.hooks) === null || _c === void 0 ? void 0 : _c.preview;
53
+ const compareHooks = (_d = compareContext === null || compareContext === void 0 ? void 0 : compareContext.hooks) === null || _d === void 0 ? void 0 : _d.preview;
54
+ const selectedBaseFromState = baseState === null || baseState === void 0 ? void 0 : baseState.id;
55
+ const selectedCompareFromState = compareState === null || compareState === void 0 ? void 0 : compareState.id;
56
+ const selectedBaseCompositionId = selectedBaseFromState || selectedCompositionBaseFile;
57
+ const selectedCompositionCompareId = selectedCompareFromState || selectedCompositionCompareFile;
58
+ const selectedBaseComp = (selectedBaseCompositionId &&
50
59
  baseCompositions &&
51
- baseCompositions.find((c) => c.identifier === selectedCompositionBaseFile)) ||
60
+ baseCompositions.find((c) => {
61
+ return c.identifier === selectedBaseCompositionId;
62
+ })) ||
52
63
  (baseCompositions && baseCompositions[0]);
53
- const selectedCompareComp = (selectedCompositionCompareFile &&
64
+ const selectedCompareComp = (selectedCompositionCompareId &&
54
65
  compareCompositions &&
55
- compareCompositions.find((c) => c.identifier === selectedCompositionCompareFile)) ||
66
+ compareCompositions.find((c) => {
67
+ return c.identifier === selectedCompositionCompareId;
68
+ })) ||
56
69
  (compareCompositions && compareCompositions[0]);
57
70
  const baseCompositionDropdownSource = (baseCompositions === null || baseCompositions === void 0 ? void 0 : baseCompositions.map((c) => {
58
- const href = (0, component_ui_component_compare_hooks_use_component_compare_url_1.useUpdatedUrlFromQuery)({
59
- compositionBaseFile: c.identifier,
60
- compositionCompareFile: selectedCompareComp === null || selectedCompareComp === void 0 ? void 0 : selectedCompareComp.identifier,
61
- });
62
- return { id: c.identifier, label: c.displayName, value: href };
71
+ const href = !(baseState === null || baseState === void 0 ? void 0 : baseState.controlled)
72
+ ? (0, component_ui_component_compare_hooks_use_component_compare_url_1.useUpdatedUrlFromQuery)({
73
+ compositionBaseFile: c.identifier,
74
+ compositionCompareFile: selectedCompareComp === null || selectedCompareComp === void 0 ? void 0 : selectedCompareComp.identifier,
75
+ })
76
+ : (0, component_ui_component_compare_hooks_use_component_compare_url_1.useUpdatedUrlFromQuery)({});
77
+ const onClick = (baseState === null || baseState === void 0 ? void 0 : baseState.controlled) ? baseHooks === null || baseHooks === void 0 ? void 0 : baseHooks.onClick : undefined;
78
+ return { id: c.identifier, label: c.displayName, href, onClick };
63
79
  })) || [];
64
80
  const compareCompositionDropdownSource = (compareCompositions === null || compareCompositions === void 0 ? void 0 : compareCompositions.map((c) => {
65
- const href = (0, component_ui_component_compare_hooks_use_component_compare_url_1.useUpdatedUrlFromQuery)({
66
- compositionBaseFile: selectedBaseComp === null || selectedBaseComp === void 0 ? void 0 : selectedBaseComp.identifier,
67
- compositionCompareFile: c.identifier,
68
- });
69
- return { id: c.identifier, label: c.displayName, value: href };
81
+ const href = !(compareState === null || compareState === void 0 ? void 0 : compareState.controlled)
82
+ ? (0, component_ui_component_compare_hooks_use_component_compare_url_1.useUpdatedUrlFromQuery)({
83
+ compositionBaseFile: selectedBaseComp === null || selectedBaseComp === void 0 ? void 0 : selectedBaseComp.identifier,
84
+ compositionCompareFile: c.identifier,
85
+ })
86
+ : (0, component_ui_component_compare_hooks_use_component_compare_url_1.useUpdatedUrlFromQuery)({});
87
+ const onClick = (compareState === null || compareState === void 0 ? void 0 : compareState.controlled) ? compareHooks === null || compareHooks === void 0 ? void 0 : compareHooks.onClick : undefined;
88
+ return { id: c.identifier, label: c.displayName, href, onClick };
70
89
  })) || [];
71
90
  const [baseCompositionParams, setBaseCompositionParams] = (0, react_1.useState)({});
72
91
  const baseCompQueryParams = (0, react_1.useMemo)(() => query_string_1.default.stringify(baseCompositionParams), [baseCompositionParams]);
@@ -81,33 +100,39 @@ function CompositionCompare(props) {
81
100
  label: selectedCompareComp.displayName,
82
101
  };
83
102
  const BaseLayout = (0, react_1.useMemo)(() => {
84
- if ((component === null || component === void 0 ? void 0 : component.base) === undefined) {
103
+ if (base === undefined) {
85
104
  return react_1.default.createElement(react_1.default.Fragment, null);
86
105
  }
106
+ const baseCompModel = base.model;
87
107
  return (react_1.default.createElement("div", { className: composition_compare_module_scss_1.default.subView },
88
108
  react_1.default.createElement(compositions_ui_hooks_use_composition_1.CompositionContextProvider, { queryParams: baseCompositionParams, setQueryParams: setBaseCompositionParams },
89
- react_1.default.createElement(PreviewView, { emptyState: emptyState, component: component === null || component === void 0 ? void 0 : component.base.model, selected: selectedBaseComp, queryParams: baseCompQueryParams }))));
90
- }, [component === null || component === void 0 ? void 0 : component.base, selectedBaseComp]);
109
+ react_1.default.createElement(PreviewView, { emptyState: emptyState, component: baseCompModel, selected: selectedBaseComp, queryParams: baseCompQueryParams, forceHeight: undefined, innerBottomPadding: 50 }))));
110
+ }, [base, selectedBaseComp]);
91
111
  const CompareLayout = (0, react_1.useMemo)(() => {
92
- if ((component === null || component === void 0 ? void 0 : component.compare) === undefined) {
112
+ if (compare === undefined) {
93
113
  return react_1.default.createElement(react_1.default.Fragment, null);
94
114
  }
115
+ const compareCompModel = compare.model;
95
116
  return (react_1.default.createElement("div", { className: composition_compare_module_scss_1.default.subView },
96
117
  react_1.default.createElement(compositions_ui_hooks_use_composition_1.CompositionContextProvider, { queryParams: compareCompositionParams, setQueryParams: setCompareCompositionParams },
97
- react_1.default.createElement(PreviewView, { emptyState: emptyState, component: component.compare.model, selected: selectedCompareComp, queryParams: compareCompQueryParams }))));
98
- }, [component === null || component === void 0 ? void 0 : component.compare, selectedCompareComp]);
99
- function CompositionDropdowns() {
100
- if (baseCompositionDropdownSource.length < 0 && compareCompositionDropdownSource.length < 0) {
101
- return react_1.default.createElement(react_1.default.Fragment, null);
118
+ react_1.default.createElement(PreviewView, { emptyState: emptyState, component: compareCompModel, selected: selectedCompareComp, queryParams: compareCompQueryParams, forceHeight: undefined, innerBottomPadding: 50 }))));
119
+ }, [compare, selectedCompareComp]);
120
+ const CompositionToolbar = () => {
121
+ if (!base && !compare) {
122
+ return null;
102
123
  }
103
- return (react_1.default.createElement("div", { className: composition_compare_module_scss_1.default.dropdownContainer },
104
- react_1.default.createElement("div", { className: composition_compare_module_scss_1.default.leftDropdown }, baseCompositionDropdownSource.length > 0 && (react_1.default.createElement(composition_dropdown_1.CompositionDropdown, { dropdownItems: baseCompositionDropdownSource, selected: selectedBaseDropdown }))),
105
- react_1.default.createElement("div", { className: composition_compare_module_scss_1.default.rightDropdown }, compareCompositionDropdownSource.length > 0 && (react_1.default.createElement(composition_dropdown_1.CompositionDropdown, { dropdownItems: compareCompositionDropdownSource, selected: selectedCompareDropdown })))));
106
- }
124
+ return (react_1.default.createElement("div", { className: composition_compare_module_scss_1.default.toolbar },
125
+ base && (react_1.default.createElement("div", { className: composition_compare_module_scss_1.default.left },
126
+ react_1.default.createElement("div", { className: composition_compare_module_scss_1.default.dropdown }, baseCompositionDropdownSource.length > 0 && (react_1.default.createElement(composition_dropdown_1.CompositionDropdown, { dropdownItems: baseCompositionDropdownSource, selected: selectedBaseDropdown }))),
127
+ react_1.default.createElement("div", { className: composition_compare_module_scss_1.default.widgets }, Widgets === null || Widgets === void 0 ? void 0 : Widgets.Left))),
128
+ react_1.default.createElement("div", { className: composition_compare_module_scss_1.default.right },
129
+ react_1.default.createElement("div", { className: composition_compare_module_scss_1.default.dropdown }, compareCompositionDropdownSource.length > 0 && (react_1.default.createElement(composition_dropdown_1.CompositionDropdown, { dropdownItems: compareCompositionDropdownSource, selected: selectedCompareDropdown }))),
130
+ react_1.default.createElement("div", { className: composition_compare_module_scss_1.default.widgets }, Widgets === null || Widgets === void 0 ? void 0 : Widgets.Right))));
131
+ };
107
132
  return (react_1.default.createElement(react_1.default.Fragment, null,
108
- (component === null || component === void 0 ? void 0 : component.loading) && (react_1.default.createElement("div", { className: composition_compare_module_scss_1.default.loader },
133
+ (componentCompareContext === null || componentCompareContext === void 0 ? void 0 : componentCompareContext.loading) && (react_1.default.createElement("div", { className: composition_compare_module_scss_1.default.loader },
109
134
  react_1.default.createElement(design_ui_round_loader_1.RoundLoader, null))),
110
- react_1.default.createElement(CompositionDropdowns, null),
135
+ react_1.default.createElement(CompositionToolbar, null),
111
136
  react_1.default.createElement(component_ui_component_compare_layouts_compare_split_layout_preset_1.CompareSplitLayoutPreset, { base: BaseLayout, compare: CompareLayout })));
112
137
  }
113
138
  exports.CompositionCompare = CompositionCompare;
package/dist/composition-compare.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"composition-compare.js","sourceRoot":"","sources":["../composition-compare.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"composition-compare.js","sourceRoot":"","sources":["../composition-compare.tsx"],"names":[],"mappings":"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"}
package/dist/composition-compare.module.scss CHANGED
@@ -1,41 +1,37 @@
1
- .dropdownContainer {
1
+ .toolbar {
2
2
  display: flex;
3
3
  background-color: var(--bit-bg-heaviest, #ededed);
4
+ padding: 8px;
4
5
  }
5
6
 
6
- .leftDropdown {
7
+ .left,
8
+ .right {
7
9
  display: flex;
8
10
  flex: 1;
9
- padding: 16px;
10
- }
11
-
12
- .rightDropdown {
13
- display: flex;
14
- flex: 1;
15
- padding: 16px 16px 16px 0px;
11
+ padding: 8px;
12
+ background-color: #fff;
13
+ align-items: center;
14
+ justify-content: space-between;
16
15
  }
17
16
 
18
17
  .mainContainer {
19
18
  display: flex;
20
19
  height: 100%;
20
+ min-height: 80vh;
21
21
  }
22
22
 
23
23
  .subContainerLeft {
24
24
  flex: 1;
25
- background-color: #ededed;
26
- padding: 16px;
27
25
  }
28
26
 
29
27
  .subContainerRight {
30
28
  flex: 1;
31
- background-color: #ededed;
32
- padding: 16px 16px 16px 0px;
33
29
  }
34
30
 
35
31
  .subView {
36
32
  height: 100%;
37
33
  background-color: white;
38
- overflow-y: scroll;
34
+ overflow-y: auto;
39
35
  }
40
36
 
41
37
  .loader {
@@ -43,3 +39,11 @@
43
39
  align-items: center;
44
40
  height: 100%;
45
41
  }
42
+
43
+ .widgets {
44
+ display: flex;
45
+ }
46
+
47
+ .dropdown {
48
+ display: flex;
49
+ }
package/dist/composition-dropdown.d.ts CHANGED
@@ -2,7 +2,8 @@
2
2
  export declare type DropdownItem = {
3
3
  id: string;
4
4
  label: string;
5
- value: string;
5
+ href?: string;
6
+ onClick?: (id: string, e: any) => void;
6
7
  };
7
8
  export declare type CompositionDropdownProps = {
8
9
  selected?: Omit<DropdownItem, 'value'>;
package/dist/composition-dropdown.js CHANGED
@@ -27,17 +27,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
27
27
  };
28
28
  Object.defineProperty(exports, "__esModule", { value: true });
29
29
  exports.CompositionDropdown = void 0;
30
+ const react_1 = __importStar(require("react"));
30
31
  const design_ui_surfaces_menu_link_item_1 = require("@teambit/design.ui.surfaces.menu.link-item");
31
32
  const evangelist_elements_icon_1 = require("@teambit/evangelist.elements.icon");
32
33
  const evangelist_surfaces_dropdown_1 = require("@teambit/evangelist.surfaces.dropdown");
33
- const react_1 = __importStar(require("react"));
34
34
  const composition_dropdown_module_scss_1 = __importDefault(require("./composition-dropdown.module.scss"));
35
35
  function CompositionDropdown(props) {
36
36
  const { selected, dropdownItems: data } = props;
37
+ const key = (item) => `${item.id}-${item.href}`;
37
38
  return (react_1.default.createElement(evangelist_surfaces_dropdown_1.Dropdown, { dropClass: composition_dropdown_module_scss_1.default.menu, placeholder: react_1.default.createElement("div", { className: composition_dropdown_module_scss_1.default.placeholder },
38
39
  react_1.default.createElement("div", null, selected && selected.label),
39
40
  react_1.default.createElement(evangelist_elements_icon_1.Icon, { of: "fat-arrow-down" })) }, data.map((item) => {
40
- return react_1.default.createElement(MenuItem, { key: item.id, current: item, selected: selected });
41
+ return react_1.default.createElement(MenuItem, { key: key(item), current: item, selected: selected });
41
42
  })));
42
43
  }
43
44
  exports.CompositionDropdown = CompositionDropdown;
@@ -51,8 +52,9 @@ function MenuItem(props) {
51
52
  (_a = currentVersionRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
52
53
  }
53
54
  }, [isCurrent]);
54
- return (react_1.default.createElement("div", { ref: currentVersionRef },
55
- react_1.default.createElement(design_ui_surfaces_menu_link_item_1.MenuLinkItem, { active: current.id === (selected === null || selected === void 0 ? void 0 : selected.id), href: current.value },
55
+ const onClick = (!!current.onClick && ((e) => { var _a; return (_a = current.onClick) === null || _a === void 0 ? void 0 : _a.call(current, current.id, e); })) || undefined;
56
+ return (react_1.default.createElement("div", { ref: currentVersionRef, key: `${current.href}-container` },
57
+ react_1.default.createElement(design_ui_surfaces_menu_link_item_1.MenuLinkItem, { key: current.href, active: current.id === (selected === null || selected === void 0 ? void 0 : selected.id), href: current.href, onClick: onClick },
56
58
  react_1.default.createElement("div", null, current.label))));
57
59
  }
58
60
  //# sourceMappingURL=composition-dropdown.js.map
package/dist/composition-dropdown.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"composition-dropdown.js","sourceRoot":"","sources":["../composition-dropdown.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kGAA0E;AAC1E,gFAAyD;AACzD,wFAAiE;AACjE,+CAAiD;AACjD,0GAAwD;AASxD,SAAgB,mBAAmB,CAAC,KAA+B;IACjE,MAAM,EAAE,QAAQ,EAAE,aAAa,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IAEhD,OAAO,CACL,8BAAC,uCAAQ,IACP,SAAS,EAAE,0CAAM,CAAC,IAAI,EACtB,WAAW,EACT,uCAAK,SAAS,EAAE,0CAAM,CAAC,WAAW;YAChC,2CAAM,QAAQ,IAAI,QAAQ,CAAC,KAAK,CAAO;YACvC,8BAAC,+BAAI,IAAC,EAAE,EAAC,gBAAgB,GAAG,CACxB,IAGP,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;QACjB,OAAO,8BAAC,QAAQ,IAAC,GAAG,EAAE,IAAI,CAAC,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAAC;IACvE,CAAC,CAAC,CACO,CACZ,CAAC;AACJ,CAAC;AAlBD,kDAkBC;AAOD,SAAS,QAAQ,CAAC,KAAoB;IACpC,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAEpC,MAAM,SAAS,GAAG,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,EAAE,MAAK,OAAO,CAAC,EAAE,CAAC;IAC9C,MAAM,iBAAiB,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IACvD,IAAA,iBAAS,EAAC,GAAG,EAAE;;QACb,IAAI,SAAS,EAAE;YACb,MAAA,iBAAiB,CAAC,OAAO,0CAAE,cAAc,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;SACrF;IACH,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,OAAO,CACL,uCAAK,GAAG,EAAE,iBAAiB;QACzB,8BAAC,gDAAY,IAAC,MAAM,EAAE,OAAO,CAAC,EAAE,MAAK,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,EAAE,CAAA,EAAE,IAAI,EAAE,OAAO,CAAC,KAAK;YACpE,2CAAM,OAAO,CAAC,KAAK,CAAO,CACb,CACX,CACP,CAAC;AACJ,CAAC"}
1
+ {"version":3,"file":"composition-dropdown.js","sourceRoot":"","sources":["../composition-dropdown.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAiD;AACjD,kGAA0E;AAC1E,gFAAyD;AACzD,wFAAiE;AAEjE,0GAAwD;AASxD,SAAgB,mBAAmB,CAAC,KAA+B;IACjE,MAAM,EAAE,QAAQ,EAAE,aAAa,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IAChD,MAAM,GAAG,GAAG,CAAC,IAAkB,EAAE,EAAE,CAAC,GAAG,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;IAE9D,OAAO,CACL,8BAAC,uCAAQ,IACP,SAAS,EAAE,0CAAM,CAAC,IAAI,EACtB,WAAW,EACT,uCAAK,SAAS,EAAE,0CAAM,CAAC,WAAW;YAChC,2CAAM,QAAQ,IAAI,QAAQ,CAAC,KAAK,CAAO;YACvC,8BAAC,+BAAI,IAAC,EAAE,EAAC,gBAAgB,GAAG,CACxB,IAGP,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;QACjB,OAAO,8BAAC,QAAQ,IAAC,GAAG,EAAE,GAAG,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAAC;IACzE,CAAC,CAAC,CACO,CACZ,CAAC;AACJ,CAAC;AAnBD,kDAmBC;AAOD,SAAS,QAAQ,CAAC,KAAoB;IACpC,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAEpC,MAAM,SAAS,GAAG,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,EAAE,MAAK,OAAO,CAAC,EAAE,CAAC;IAC9C,MAAM,iBAAiB,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAEvD,IAAA,iBAAS,EAAC,GAAG,EAAE;;QACb,IAAI,SAAS,EAAE;YACb,MAAA,iBAAiB,CAAC,OAAO,0CAAE,cAAc,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;SACrF;IACH,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,MAAM,OAAO,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,WAAC,OAAA,MAAA,OAAO,CAAC,OAAO,wDAAG,OAAO,CAAC,EAAE,EAAE,CAAC,CAAC,CAAA,EAAA,CAAC,CAAC,IAAI,SAAS,CAAC;IAE9F,OAAO,CACL,uCAAK,GAAG,EAAE,iBAAiB,EAAE,GAAG,EAAE,GAAG,OAAO,CAAC,IAAI,YAAY;QAC3D,8BAAC,gDAAY,IAAC,GAAG,EAAE,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAK,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,EAAE,CAAA,EAAE,IAAI,EAAE,OAAO,CAAC,IAAI,EAAE,OAAO,EAAE,OAAO;YACxG,2CAAM,OAAO,CAAC,KAAK,CAAO,CACb,CACX,CACP,CAAC;AACJ,CAAC"}
package/package.json CHANGED
@@ -1,12 +1,12 @@
1
1
  {
2
2
  "name": "@teambit/compositions.ui.composition-compare",
3
- "version": "0.0.161",
3
+ "version": "0.0.163",
4
4
  "homepage": "https://bit.cloud/teambit/compositions/ui/composition-compare",
5
5
  "main": "dist/index.js",
6
6
  "componentId": {
7
7
  "scope": "teambit.compositions",
8
8
  "name": "ui/composition-compare",
9
- "version": "0.0.161"
9
+ "version": "0.0.163"
10
10
  },
11
11
  "dependencies": {
12
12
  "query-string": "7.0.0",
@@ -15,7 +15,7 @@
15
15
  "@teambit/design.ui.surfaces.menu.link-item": "1.0.0",
16
16
  "@teambit/evangelist.elements.icon": "1.0.2",
17
17
  "@teambit/evangelist.surfaces.dropdown": "1.0.2",
18
- "@teambit/component.ui.component-compare.context": "0.0.22",
18
+ "@teambit/component.ui.component-compare.context": "0.0.24",
19
19
  "@teambit/component.ui.component-compare.hooks.use-component-compare-url": "0.0.3",
20
20
  "@teambit/component.ui.component-compare.layouts.compare-split-layout-preset": "0.0.3",
21
21
  "@teambit/compositions.ui.hooks.use-composition": "0.0.172",