@teambit/defender.ui.test-compare 0.0.222 → 0.0.224

package/compare-tests.tsx

@@ -1,9 +1,8 @@
 import { CompareSplitLayoutPreset } from '@teambit/component.ui.component-compare.layouts.compare-split-layout-preset';
 import { useComponentCompare } from '@teambit/component.ui.component-compare.context';
 import { EmptyStateSlot } from '@teambit/compositions';
-import { Toggle } from '@teambit/design.inputs.toggle-switch';
 import { RoundLoader } from '@teambit/design.ui.round-loader';
-import React, { HTMLAttributes, UIEvent, useMemo, useRef, useState } from 'react';
+import React, { HTMLAttributes, useMemo } from 'react';
 import { CompareTestsPage } from './compare-tests-page';
 import styles from './compare-tests.module.scss';
 
@@ -14,45 +13,26 @@ export type CompareTestsProps = {
 export function CompareTests(props: CompareTestsProps) {
   const { emptyState } = props;
   const componentCompare = useComponentCompare();
-  const [isScrollingSynced, setIsScrollingSynced] = useState<boolean>(true);
-
-  const leftPanelRef = useRef<HTMLDivElement>(null);
-  const rightPanelRef = useRef<HTMLDivElement>(null);
-
-  function handleLeftPanelScroll(event: UIEvent<HTMLDivElement>) {
-    if (!isScrollingSynced) return;
-    rightPanelRef.current?.scrollTo({ top: event.currentTarget.scrollTop, left: event.currentTarget.scrollLeft });
-  }
-
-  function handleRightPanelScroll(event: UIEvent<HTMLDivElement>) {
-    if (!isScrollingSynced) return;
-    leftPanelRef.current?.scrollTo({ top: event.currentTarget.scrollTop, left: event.currentTarget.scrollLeft });
-  }
-
-  function handleScrollingSyncChange() {
-    rightPanelRef.current?.scrollTo({ top: leftPanelRef.current?.scrollTop, left: leftPanelRef.current?.scrollLeft });
-    setIsScrollingSynced((prev) => !prev);
-  }
 
   const BaseLayout = useMemo(() => {
     if (componentCompare?.base === undefined) {
-      return <></>;
+      return null;
     }
 
     return (
-      <div className={styles.subView} ref={leftPanelRef} onScroll={handleLeftPanelScroll}>
+      <div className={styles.subView}>
         <CompareTestsPage component={componentCompare.base?.model} emptyState={emptyState} />
       </div>
     );
-  }, [componentCompare?.base, isScrollingSynced]);
+  }, [componentCompare?.base]);
 
   const CompareLayout = useMemo(() => {
     if (componentCompare?.compare === undefined) {
-      return <></>;
+      return null;
     }
 
     return (
-      <div className={styles.subView} ref={rightPanelRef} onScroll={handleRightPanelScroll}>
+      <div className={styles.subView}>
         <CompareTestsPage
           component={componentCompare.compare.model}
           isCompareVersionWorkspace={componentCompare.compare.hasLocalChanges}
@@ -60,22 +40,18 @@ export function CompareTests(props: CompareTestsProps) {
         />
       </div>
     );
-  }, [componentCompare?.compare, isScrollingSynced]);
+  }, [componentCompare?.compare]);
+
+  const key = `${componentCompare?.base?.model.id.toString()}-${componentCompare?.compare?.model.id.toString()}-compare-tests`;
 
   return (
-    <>
+    <React.Fragment key={key}>
       {componentCompare?.loading && (
         <div className={styles.loader}>
           <RoundLoader />
         </div>
       )}
-      <div className={styles.checkboxContainer}>
-        <div className={styles.toggleContainer}>
-          <Toggle checked={isScrollingSynced} onInputChanged={handleScrollingSyncChange} className={styles.toggle} />
-          Synchronize Scrolling
-        </div>
-      </div>
       <CompareSplitLayoutPreset base={BaseLayout} compare={CompareLayout} className={styles.splitLayout} />
-    </>
+    </React.Fragment>
   );
 }

package/dist/compare-tests.js

@@ -29,56 +29,33 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CompareTests = void 0;
 const component_ui_component_compare_layouts_compare_split_layout_preset_1 = require("@teambit/component.ui.component-compare.layouts.compare-split-layout-preset");
 const component_ui_component_compare_context_1 = require("@teambit/component.ui.component-compare.context");
-const design_inputs_toggle_switch_1 = require("@teambit/design.inputs.toggle-switch");
 const design_ui_round_loader_1 = require("@teambit/design.ui.round-loader");
 const react_1 = __importStar(require("react"));
 const compare_tests_page_1 = require("./compare-tests-page");
 const compare_tests_module_scss_1 = __importDefault(require("./compare-tests.module.scss"));
 function CompareTests(props) {
+    var _a, _b;
     const { emptyState } = props;
     const componentCompare = (0, component_ui_component_compare_context_1.useComponentCompare)();
-    const [isScrollingSynced, setIsScrollingSynced] = (0, react_1.useState)(true);
-    const leftPanelRef = (0, react_1.useRef)(null);
-    const rightPanelRef = (0, react_1.useRef)(null);
-    function handleLeftPanelScroll(event) {
-        var _a;
-        if (!isScrollingSynced)
-            return;
-        (_a = rightPanelRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({ top: event.currentTarget.scrollTop, left: event.currentTarget.scrollLeft });
-    }
-    function handleRightPanelScroll(event) {
-        var _a;
-        if (!isScrollingSynced)
-            return;
-        (_a = leftPanelRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({ top: event.currentTarget.scrollTop, left: event.currentTarget.scrollLeft });
-    }
-    function handleScrollingSyncChange() {
-        var _a, _b, _c;
-        (_a = rightPanelRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({ top: (_b = leftPanelRef.current) === null || _b === void 0 ? void 0 : _b.scrollTop, left: (_c = leftPanelRef.current) === null || _c === void 0 ? void 0 : _c.scrollLeft });
-        setIsScrollingSynced((prev) => !prev);
-    }
     const BaseLayout = (0, react_1.useMemo)(() => {
         var _a;
         if ((componentCompare === null || componentCompare === void 0 ? void 0 : componentCompare.base) === undefined) {
-            return react_1.default.createElement(react_1.default.Fragment, null);
+            return null;
         }
-        return (react_1.default.createElement("div", { className: compare_tests_module_scss_1.default.subView, ref: leftPanelRef, onScroll: handleLeftPanelScroll },
+        return (react_1.default.createElement("div", { className: compare_tests_module_scss_1.default.subView },
             react_1.default.createElement(compare_tests_page_1.CompareTestsPage, { component: (_a = componentCompare.base) === null || _a === void 0 ? void 0 : _a.model, emptyState: emptyState })));
-    }, [componentCompare === null || componentCompare === void 0 ? void 0 : componentCompare.base, isScrollingSynced]);
+    }, [componentCompare === null || componentCompare === void 0 ? void 0 : componentCompare.base]);
     const CompareLayout = (0, react_1.useMemo)(() => {
         if ((componentCompare === null || componentCompare === void 0 ? void 0 : componentCompare.compare) === undefined) {
-            return react_1.default.createElement(react_1.default.Fragment, null);
+            return null;
         }
-        return (react_1.default.createElement("div", { className: compare_tests_module_scss_1.default.subView, ref: rightPanelRef, onScroll: handleRightPanelScroll },
+        return (react_1.default.createElement("div", { className: compare_tests_module_scss_1.default.subView },
             react_1.default.createElement(compare_tests_page_1.CompareTestsPage, { component: componentCompare.compare.model, isCompareVersionWorkspace: componentCompare.compare.hasLocalChanges, emptyState: emptyState })));
-    }, [componentCompare === null || componentCompare === void 0 ? void 0 : componentCompare.compare, isScrollingSynced]);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
+    }, [componentCompare === null || componentCompare === void 0 ? void 0 : componentCompare.compare]);
+    const key = `${(_a = componentCompare === null || componentCompare === void 0 ? void 0 : componentCompare.base) === null || _a === void 0 ? void 0 : _a.model.id.toString()}-${(_b = componentCompare === null || componentCompare === void 0 ? void 0 : componentCompare.compare) === null || _b === void 0 ? void 0 : _b.model.id.toString()}-compare-tests`;
+    return (react_1.default.createElement(react_1.default.Fragment, { key: key },
         (componentCompare === null || componentCompare === void 0 ? void 0 : componentCompare.loading) && (react_1.default.createElement("div", { className: compare_tests_module_scss_1.default.loader },
             react_1.default.createElement(design_ui_round_loader_1.RoundLoader, null))),
-        react_1.default.createElement("div", { className: compare_tests_module_scss_1.default.checkboxContainer },
-            react_1.default.createElement("div", { className: compare_tests_module_scss_1.default.toggleContainer },
-                react_1.default.createElement(design_inputs_toggle_switch_1.Toggle, { checked: isScrollingSynced, onInputChanged: handleScrollingSyncChange, className: compare_tests_module_scss_1.default.toggle }),
-                "Synchronize Scrolling")),
         react_1.default.createElement(component_ui_component_compare_layouts_compare_split_layout_preset_1.CompareSplitLayoutPreset, { base: BaseLayout, compare: CompareLayout, className: compare_tests_module_scss_1.default.splitLayout })));
 }
 exports.CompareTests = CompareTests;

package/dist/compare-tests.js.map

@@ -1 +1 @@
-{"version":3,"file":"compare-tests.js","sourceRoot":"","sources":["../compare-tests.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"compare-tests.js","sourceRoot":"","sources":["../compare-tests.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,oKAAuH;AACvH,4GAAsF;AAEtF,4EAA8D;AAC9D,+CAAuD;AACvD,6DAAwD;AACxD,4FAAiD;AAMjD,SAAgB,YAAY,CAAC,KAAwB;;IACnD,MAAM,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC;IAC7B,MAAM,gBAAgB,GAAG,IAAA,4DAAmB,GAAE,CAAC;IAE/C,MAAM,UAAU,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;;QAC9B,IAAI,CAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,IAAI,MAAK,SAAS,EAAE;YACxC,OAAO,IAAI,CAAC;SACb;QAED,OAAO,CACL,uCAAK,SAAS,EAAE,mCAAM,CAAC,OAAO;YAC5B,8BAAC,qCAAgB,IAAC,SAAS,EAAE,MAAA,gBAAgB,CAAC,IAAI,0CAAE,KAAK,EAAE,UAAU,EAAE,UAAU,GAAI,CACjF,CACP,CAAC;IACJ,CAAC,EAAE,CAAC,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,IAAI,CAAC,CAAC,CAAC;IAE7B,MAAM,aAAa,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QACjC,IAAI,CAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,OAAO,MAAK,SAAS,EAAE;YAC3C,OAAO,IAAI,CAAC;SACb;QAED,OAAO,CACL,uCAAK,SAAS,EAAE,mCAAM,CAAC,OAAO;YAC5B,8BAAC,qCAAgB,IACf,SAAS,EAAE,gBAAgB,CAAC,OAAO,CAAC,KAAK,EACzC,yBAAyB,EAAE,gBAAgB,CAAC,OAAO,CAAC,eAAe,EACnE,UAAU,EAAE,UAAU,GACtB,CACE,CACP,CAAC;IACJ,CAAC,EAAE,CAAC,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,OAAO,CAAC,CAAC,CAAC;IAEhC,MAAM,GAAG,GAAG,GAAG,MAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,IAAI,0CAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,EAAE,IAAI,MAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,OAAO,0CAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,EAAE,gBAAgB,CAAC;IAE7H,OAAO,CACL,8BAAC,eAAK,CAAC,QAAQ,IAAC,GAAG,EAAE,GAAG;QACrB,CAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,OAAO,KAAI,CAC5B,uCAAK,SAAS,EAAE,mCAAM,CAAC,MAAM;YAC3B,8BAAC,oCAAW,OAAG,CACX,CACP;QACD,8BAAC,6FAAwB,IAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,mCAAM,CAAC,WAAW,GAAI,CACtF,CAClB,CAAC;AACJ,CAAC;AA5CD,oCA4CC"}

package/package.json

@@ -1,26 +1,25 @@
 {
   "name": "@teambit/defender.ui.test-compare",
-  "version": "0.0.222",
+  "version": "0.0.224",
   "homepage": "https://bit.cloud/teambit/defender/ui/test-compare",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.defender",
     "name": "ui/test-compare",
-    "version": "0.0.222"
+    "version": "0.0.224"
   },
   "dependencies": {
     "classnames": "2.2.6",
     "core-js": "^3.0.0",
     "@teambit/design.ui.alert-card": "0.0.26",
     "@teambit/design.ui.empty-box": "0.0.363",
-    "@teambit/design.inputs.toggle-switch": "0.0.6",
     "@teambit/design.ui.round-loader": "0.0.355",
     "@teambit/defender.ui.test-loader": "0.0.499",
     "@teambit/defender.ui.test-page": "0.0.20",
     "@teambit/defender.ui.test-table": "0.0.505",
     "@teambit/mdx.ui.mdx-layout": "1.0.1",
-    "@teambit/component.ui.component-compare.context": "0.0.84",
-    "@teambit/component.ui.component-compare.layouts.compare-split-layout-preset": "0.0.3"
+    "@teambit/component.ui.component-compare.context": "0.0.86",
+    "@teambit/component.ui.component-compare.layouts.compare-split-layout-preset": "0.0.4"
   },
   "devDependencies": {
     "@types/classnames": "2.2.11",