@teambit/component.ui.component-drawer 0.0.412 → 0.0.414

package/component-drawer.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, ReactNode, useMemo } from 'react';
+import React, { useContext, ReactNode, useMemo } from 'react';
 import classNames from 'classnames';
 import { ComponentTree } from '@teambit/ui-foundation.ui.side-bar';
 import type { PayloadType } from '@teambit/ui-foundation.ui.side-bar';
@@ -90,93 +90,156 @@ export class ComponentsDrawer implements DrawerType {
     return <Composer components={combinedContexts}>{children}</Composer>;
   };
 
-  renderFilters = ({ components, lanes }: { components: ComponentModel[]; lanes?: LanesModel }) => {
-    const { filterWidgetOpen } = useContext(ComponentFilterWidgetContext);
-    const filterPlugins = this.plugins.filters;
-
-    const filters = useMemo(
-      () =>
-        (filterPlugins &&
-          flatten(
-            filterPlugins.toArray().map(([key, filtersByKey]) => {
-              return filtersByKey.map((filter) => ({ ...filter, key: `${key}-${filter.id}` }));
-            })
-          ).sort((a, b) => (a.order ?? 0) - (b.order ?? 0))) ||
-        [],
-      [filterPlugins]
-    );
+  setWidgets = (widgets?: DrawerWidgetSlot) => {
+    this.widgets = flatten(widgets?.values());
+  };
 
+  render = () => {
+    const { useComponents, useLanes: useLanesFromInstance, emptyMessage, plugins, transformTree, useHost, id } = this;
     return (
-      <div className={classNames(styles.filtersContainer, filterWidgetOpen && styles.open)}>
-        {filters.map((filter) => (
-          <filter.render
-            key={filter.key}
-            components={components}
-            lanes={lanes}
-            className={classNames(styles.filter, filterWidgetOpen && styles.open)}
-          />
-        ))}
-      </div>
+      <ComponentsDrawerContent
+        useComponents={useComponents}
+        useLanes={useLanesFromInstance}
+        emptyMessage={emptyMessage}
+        plugins={plugins}
+        transformTree={transformTree}
+        useHost={useHost}
+        id={id}
+      />
     );
   };
+}
 
-  renderTree = ({ components, host }: { components: ComponentModel[]; host?: ScopeModel | WorkspaceModel }) => {
-    const { collapsed } = useContext(ComponentTreeContext);
-    const { tree } = this.plugins;
+function ComponentsDrawerContent({
+  useComponents,
+  useLanes: useLanesFromProps,
+  emptyMessage,
+  plugins,
+  transformTree,
+  useHost,
+  id,
+}: {
+  useComponents: () => { components: ComponentModel[]; loading?: boolean };
+  useLanes: () => { lanesModel?: LanesModel; loading?: boolean };
+  emptyMessage: ReactNode;
+  plugins: ComponentsDrawerPlugins;
+  transformTree?: TransformTreeFn;
+  useHost?: () => ScopeModel | WorkspaceModel;
+  id: string;
+}) {
+  const { loading: loadingComponents, components } = useComponents();
+  const { lanesModel: lanes, loading: loadingLanesModel } = useLanesFromProps();
+  const componentFiltersContext = useContext(ComponentFilterContext);
+  const filters = componentFiltersContext?.filters || [];
+  const host = useHost?.();
 
-    const TreeNode = tree?.customRenderer && useCallback(tree.customRenderer(tree.widgets, host), [tree.widgets]);
-    const isVisible = components.length > 0;
+  const filteredComponents = useMemo(() => {
+    if (!filters.length) return components;
+    return runAllFilters(filters, { components, lanes });
+  }, [filters, components.length, lanes?.lanes.length, lanes?.viewedLane?.id.toString(), loadingLanesModel]);
 
-    if (!isVisible) return null;
+  const Filters = <ComponentsDrawerRenderFilters components={components} lanes={lanes} plugins={plugins} />;
 
-    return (
-      <div className={styles.drawerTreeContainer}>
-        <ComponentTree
-          transformTree={this.transformTree ? this.transformTree(host) : undefined}
-          components={components}
-          isCollapsed={collapsed}
-          // assumeScopeInUrl={this.assumeScopeInUrl}
-          TreeNode={TreeNode}
-        />
-      </div>
-    );
-  };
+  const Tree = (
+    <ComponentsDrawerRenderTree
+      components={filteredComponents}
+      host={host}
+      plugins={plugins}
+      transformTree={transformTree}
+      lanesModel={lanes}
+    />
+  );
 
-  setWidgets = (widgets?: DrawerWidgetSlot) => {
-    this.widgets = flatten(widgets?.values());
-  };
+  const emptyDrawer = <span className={classNames(mutedItalic, ellipsis, styles.emptyDrawer)}>{emptyMessage}</span>;
 
-  render = () => {
-    const { loading, components } = this.useComponents();
-    const { lanesModel: lanes } = this.useLanes();
-    const componentFiltersContext = useContext(ComponentFilterContext);
+  const loading = loadingComponents || loadingLanesModel || !lanes || !components;
 
-    const filters = componentFiltersContext?.filters || [];
+  if (loading) return <ComponentTreeLoader />;
 
-    const filteredComponents = useMemo(
-      () => runAllFilters(filters, { components, lanes }),
-      [filters, components, lanes]
-    );
+  return (
+    <div key={id} className={styles.drawerContainer}>
+      {Filters}
+      {Tree}
+      {filteredComponents.length === 0 && emptyDrawer}
+    </div>
+  );
+}
 
-    const Filters = this.renderFilters({ components, lanes });
-    const host = this.useHost?.();
+function ComponentsDrawerRenderFilters({
+  components,
+  lanes,
+  plugins,
+}: {
+  components: ComponentModel[];
+  lanes?: LanesModel;
+  plugins: ComponentsDrawerPlugins;
+}) {
+  const { filterWidgetOpen } = useContext(ComponentFilterWidgetContext);
+  const filterPlugins = plugins.filters;
 
-    const Tree = this.renderTree({ components: filteredComponents, host });
+  const filters = useMemo(
+    () =>
+      (filterPlugins &&
+        flatten(
+          filterPlugins.toArray().map(([key, filtersByKey]) => {
+            return filtersByKey.map((filter) => ({ ...filter, key: `${key}-${filter.id}` }));
+          })
+        ).sort((a, b) => (a.order ?? 0) - (b.order ?? 0))) ||
+      [],
+    [filterPlugins?.map.size, filterPlugins?.values()?.length]
+  );
 
-    const emptyDrawer = (
-      <span className={classNames(mutedItalic, ellipsis, styles.emptyDrawer)}>{this.emptyMessage}</span>
-    );
+  if (!filters.length) return null;
 
-    if (loading) return <ComponentTreeLoader />;
+  return (
+    <div className={classNames(styles.filtersContainer, filterWidgetOpen && styles.open)}>
+      {filters.map((filter) => (
+        <filter.render
+          key={filter.key}
+          components={components}
+          lanes={lanes}
+          className={classNames(styles.filter, filterWidgetOpen && styles.open)}
+        />
+      ))}
+    </div>
+  );
+}
 
-    return (
-      <div key={this.id} className={styles.drawerContainer}>
-        {Filters}
-        {Tree}
-        {filteredComponents.length === 0 && emptyDrawer}
-      </div>
-    );
-  };
+function ComponentsDrawerRenderTree({
+  components,
+  host,
+  plugins,
+  transformTree,
+  lanesModel,
+}: {
+  components: ComponentModel[];
+  host?: ScopeModel | WorkspaceModel;
+  plugins: ComponentsDrawerPlugins;
+  transformTree?: TransformTreeFn;
+  lanesModel?: LanesModel;
+}) {
+  const { collapsed } = useContext(ComponentTreeContext);
+  const { tree } = plugins;
+
+  const TreeNode = useMemo(() => {
+    return tree?.customRenderer && tree.customRenderer(tree.widgets, host);
+  }, [tree?.customRenderer, tree?.widgets.map.size, tree?.widgets.values().length]);
+
+  const isVisible = components.length > 0;
+
+  if (!isVisible) return null;
+
+  return (
+    <div className={styles.drawerTreeContainer}>
+      <ComponentTree
+        transformTree={transformTree ? transformTree(host) : undefined}
+        components={components}
+        isCollapsed={collapsed}
+        TreeNode={TreeNode}
+        lanesModel={lanesModel}
+      />
+    </div>
+  );
 }
 
 export function TreeToggleWidget() {

package/dist/component-drawer.d.ts

@@ -59,14 +59,6 @@ export declare class ComponentsDrawer implements DrawerType {
     Context: ({ children }: {
         children: any;
     }) => React.JSX.Element;
-    renderFilters: ({ components, lanes }: {
-        components: ComponentModel[];
-        lanes?: LanesModel;
-    }) => React.JSX.Element;
-    renderTree: ({ components, host }: {
-        components: ComponentModel[];
-        host?: ScopeModel | WorkspaceModel;
-    }) => React.JSX.Element;
     setWidgets: (widgets?: DrawerWidgetSlot) => void;
     render: () => React.JSX.Element;
 }

package/dist/component-drawer.js

@@ -53,48 +53,12 @@ class ComponentsDrawer {
             ];
             return react_1.default.createElement(base_ui_utils_composer_1.Composer, { components: combinedContexts }, children);
         };
-        this.renderFilters = ({ components, lanes }) => {
-            const { filterWidgetOpen } = (0, react_1.useContext)(component_drawer_filter_widget_context_1.ComponentFilterWidgetContext);
-            const filterPlugins = this.plugins.filters;
-            const filters = (0, react_1.useMemo)(() => (filterPlugins &&
-                (0, lodash_flatten_1.default)(filterPlugins.toArray().map(([key, filtersByKey]) => {
-                    return filtersByKey.map((filter) => (Object.assign(Object.assign({}, filter), { key: `${key}-${filter.id}` })));
-                })).sort((a, b) => { var _a, _b; return ((_a = a.order) !== null && _a !== void 0 ? _a : 0) - ((_b = b.order) !== null && _b !== void 0 ? _b : 0); })) ||
-                [], [filterPlugins]);
-            return (react_1.default.createElement("div", { className: (0, classnames_1.default)(component_drawer_module_scss_1.default.filtersContainer, filterWidgetOpen && component_drawer_module_scss_1.default.open) }, filters.map((filter) => (react_1.default.createElement(filter.render, { key: filter.key, components: components, lanes: lanes, className: (0, classnames_1.default)(component_drawer_module_scss_1.default.filter, filterWidgetOpen && component_drawer_module_scss_1.default.open) })))));
-        };
-        this.renderTree = ({ components, host }) => {
-            const { collapsed } = (0, react_1.useContext)(component_drawer_tree_widget_context_1.ComponentTreeContext);
-            const { tree } = this.plugins;
-            const TreeNode = (tree === null || tree === void 0 ? void 0 : tree.customRenderer) && (0, react_1.useCallback)(tree.customRenderer(tree.widgets, host), [tree.widgets]);
-            const isVisible = components.length > 0;
-            if (!isVisible)
-                return null;
-            return (react_1.default.createElement("div", { className: component_drawer_module_scss_1.default.drawerTreeContainer },
-                react_1.default.createElement(ui_foundation_ui_side_bar_1.ComponentTree, { transformTree: this.transformTree ? this.transformTree(host) : undefined, components: components, isCollapsed: collapsed, 
-                    // assumeScopeInUrl={this.assumeScopeInUrl}
-                    TreeNode: TreeNode })));
-        };
         this.setWidgets = (widgets) => {
             this.widgets = (0, lodash_flatten_1.default)(widgets === null || widgets === void 0 ? void 0 : widgets.values());
         };
         this.render = () => {
-            var _a;
-            const { loading, components } = this.useComponents();
-            const { lanesModel: lanes } = this.useLanes();
-            const componentFiltersContext = (0, react_1.useContext)(component_ui_component_filters_component_filter_context_1.ComponentFilterContext);
-            const filters = (componentFiltersContext === null || componentFiltersContext === void 0 ? void 0 : componentFiltersContext.filters) || [];
-            const filteredComponents = (0, react_1.useMemo)(() => (0, component_ui_component_filters_component_filter_context_1.runAllFilters)(filters, { components, lanes }), [filters, components, lanes]);
-            const Filters = this.renderFilters({ components, lanes });
-            const host = (_a = this.useHost) === null || _a === void 0 ? void 0 : _a.call(this);
-            const Tree = this.renderTree({ components: filteredComponents, host });
-            const emptyDrawer = (react_1.default.createElement("span", { className: (0, classnames_1.default)(design_ui_styles_muted_italic_1.mutedItalic, design_ui_styles_ellipsis_1.ellipsis, component_drawer_module_scss_1.default.emptyDrawer) }, this.emptyMessage));
-            if (loading)
-                return react_1.default.createElement(design_ui_skeletons_sidebar_loader_1.ComponentTreeLoader, null);
-            return (react_1.default.createElement("div", { key: this.id, className: component_drawer_module_scss_1.default.drawerContainer },
-                Filters,
-                Tree,
-                filteredComponents.length === 0 && emptyDrawer));
+            const { useComponents, useLanes: useLanesFromInstance, emptyMessage, plugins, transformTree, useHost, id } = this;
+            return (react_1.default.createElement(ComponentsDrawerContent, { useComponents: useComponents, useLanes: useLanesFromInstance, emptyMessage: emptyMessage, plugins: plugins, transformTree: transformTree, useHost: useHost, id: id }));
         };
         Object.assign(this, props);
         this.useComponents = props.useComponents;
@@ -108,6 +72,54 @@ class ComponentsDrawer {
     }
 }
 exports.ComponentsDrawer = ComponentsDrawer;
+function ComponentsDrawerContent({ useComponents, useLanes: useLanesFromProps, emptyMessage, plugins, transformTree, useHost, id, }) {
+    var _a;
+    const { loading: loadingComponents, components } = useComponents();
+    const { lanesModel: lanes, loading: loadingLanesModel } = useLanesFromProps();
+    const componentFiltersContext = (0, react_1.useContext)(component_ui_component_filters_component_filter_context_1.ComponentFilterContext);
+    const filters = (componentFiltersContext === null || componentFiltersContext === void 0 ? void 0 : componentFiltersContext.filters) || [];
+    const host = useHost === null || useHost === void 0 ? void 0 : useHost();
+    const filteredComponents = (0, react_1.useMemo)(() => {
+        if (!filters.length)
+            return components;
+        return (0, component_ui_component_filters_component_filter_context_1.runAllFilters)(filters, { components, lanes });
+    }, [filters, components.length, lanes === null || lanes === void 0 ? void 0 : lanes.lanes.length, (_a = lanes === null || lanes === void 0 ? void 0 : lanes.viewedLane) === null || _a === void 0 ? void 0 : _a.id.toString(), loadingLanesModel]);
+    const Filters = react_1.default.createElement(ComponentsDrawerRenderFilters, { components: components, lanes: lanes, plugins: plugins });
+    const Tree = (react_1.default.createElement(ComponentsDrawerRenderTree, { components: filteredComponents, host: host, plugins: plugins, transformTree: transformTree, lanesModel: lanes }));
+    const emptyDrawer = react_1.default.createElement("span", { className: (0, classnames_1.default)(design_ui_styles_muted_italic_1.mutedItalic, design_ui_styles_ellipsis_1.ellipsis, component_drawer_module_scss_1.default.emptyDrawer) }, emptyMessage);
+    const loading = loadingComponents || loadingLanesModel || !lanes || !components;
+    if (loading)
+        return react_1.default.createElement(design_ui_skeletons_sidebar_loader_1.ComponentTreeLoader, null);
+    return (react_1.default.createElement("div", { key: id, className: component_drawer_module_scss_1.default.drawerContainer },
+        Filters,
+        Tree,
+        filteredComponents.length === 0 && emptyDrawer));
+}
+function ComponentsDrawerRenderFilters({ components, lanes, plugins, }) {
+    var _a;
+    const { filterWidgetOpen } = (0, react_1.useContext)(component_drawer_filter_widget_context_1.ComponentFilterWidgetContext);
+    const filterPlugins = plugins.filters;
+    const filters = (0, react_1.useMemo)(() => (filterPlugins &&
+        (0, lodash_flatten_1.default)(filterPlugins.toArray().map(([key, filtersByKey]) => {
+            return filtersByKey.map((filter) => (Object.assign(Object.assign({}, filter), { key: `${key}-${filter.id}` })));
+        })).sort((a, b) => { var _a, _b; return ((_a = a.order) !== null && _a !== void 0 ? _a : 0) - ((_b = b.order) !== null && _b !== void 0 ? _b : 0); })) ||
+        [], [filterPlugins === null || filterPlugins === void 0 ? void 0 : filterPlugins.map.size, (_a = filterPlugins === null || filterPlugins === void 0 ? void 0 : filterPlugins.values()) === null || _a === void 0 ? void 0 : _a.length]);
+    if (!filters.length)
+        return null;
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(component_drawer_module_scss_1.default.filtersContainer, filterWidgetOpen && component_drawer_module_scss_1.default.open) }, filters.map((filter) => (react_1.default.createElement(filter.render, { key: filter.key, components: components, lanes: lanes, className: (0, classnames_1.default)(component_drawer_module_scss_1.default.filter, filterWidgetOpen && component_drawer_module_scss_1.default.open) })))));
+}
+function ComponentsDrawerRenderTree({ components, host, plugins, transformTree, lanesModel, }) {
+    const { collapsed } = (0, react_1.useContext)(component_drawer_tree_widget_context_1.ComponentTreeContext);
+    const { tree } = plugins;
+    const TreeNode = (0, react_1.useMemo)(() => {
+        return (tree === null || tree === void 0 ? void 0 : tree.customRenderer) && tree.customRenderer(tree.widgets, host);
+    }, [tree === null || tree === void 0 ? void 0 : tree.customRenderer, tree === null || tree === void 0 ? void 0 : tree.widgets.map.size, tree === null || tree === void 0 ? void 0 : tree.widgets.values().length]);
+    const isVisible = components.length > 0;
+    if (!isVisible)
+        return null;
+    return (react_1.default.createElement("div", { className: component_drawer_module_scss_1.default.drawerTreeContainer },
+        react_1.default.createElement(ui_foundation_ui_side_bar_1.ComponentTree, { transformTree: transformTree ? transformTree(host) : undefined, components: components, isCollapsed: collapsed, TreeNode: TreeNode, lanesModel: lanesModel })));
+}
 function TreeToggleWidget() {
     const { collapsed, setCollapsed } = (0, react_1.useContext)(component_drawer_tree_widget_context_1.ComponentTreeContext);
     const icon = collapsed

package/dist/component-drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"component-drawer.js","sourceRoot":"","sources":["../component-drawer.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"component-drawer.js","sourceRoot":"","sources":["../component-drawer.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/component.ui.component-drawer",
-  "version": "0.0.412",
+  "version": "0.0.414",
   "homepage": "https://bit.cloud/teambit/component/ui/component-drawer",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.component",
     "name": "ui/component-drawer",
-    "version": "0.0.412"
+    "version": "0.0.414"
   },
   "dependencies": {
     "classnames": "2.2.6",
@@ -20,10 +20,10 @@
     "@teambit/harmony": "0.4.6",
     "@teambit/lanes.ui.models.lanes-model": "0.0.221",
     "@teambit/ui-foundation.ui.tree.drawer": "0.0.518",
-    "@teambit/ui-foundation.ui.side-bar": "0.0.884",
-    "@teambit/component.ui.component-filters.component-filter-context": "0.0.228",
-    "@teambit/lanes.hooks.use-lanes": "0.0.273",
-    "@teambit/scope.models.scope-model": "0.0.514"
+    "@teambit/component.ui.component-filters.component-filter-context": "0.0.229",
+    "@teambit/lanes.hooks.use-lanes": "0.0.274",
+    "@teambit/scope.models.scope-model": "0.0.515",
+    "@teambit/ui-foundation.ui.side-bar": "0.0.886"
   },
   "devDependencies": {
     "@types/react": "^17.0.8",