Lens restructure (#540)

Signed-off-by: Roman <ixrock@gmail.com>

src/renderer/components/virtual-list/index.ts

@@ -0,0 +1 @@
+export * from "./virtual-list";

src/renderer/components/virtual-list/virtual-list.scss

@@ -0,0 +1,15 @@
+.VirtualList {
+  overflow: hidden;
+
+  &.light {
+    .list {
+      @include custom-scrollbar(dark);
+    }
+  }
+
+  > .list {
+    @include custom-scrollbar;
+    overflow-y: overlay !important;
+    overflow-x: hidden !important;
+  }
+}

src/renderer/components/virtual-list/virtual-list.tsx

@@ -0,0 +1,125 @@
+// Wrapper for "react-window" component
+// API docs: https://react-window.now.sh
+import "./virtual-list.scss";
+
+import React, { Component } from "react";
+import { observer } from "mobx-react";
+import { ListChildComponentProps, VariableSizeList } from "react-window";
+import { cssNames } from "../../utils";
+import { TableRowProps } from "../table/table-row";
+import { ItemObject } from "../../item.store";
+import throttle from "lodash/throttle";
+import debounce from "lodash/debounce";
+import isEqual from "lodash/isEqual";
+import ResizeSensor from "css-element-queries/src/ResizeSensor";
+
+interface Props {
+  items: ItemObject[];
+  rowHeights: number[];
+  className?: string;
+  width?: number | string;
+  initialOffset?: number;
+  readyOffset?: number;
+  selectedItemId?: string;
+  getTableRow?: (uid: string) => React.ReactElement<TableRowProps>;
+}
+
+interface State {
+  height: number;
+  overscanCount: number;
+}
+
+const defaultProps: Partial<Props> = {
+  width: "100%",
+  initialOffset: 1,
+  readyOffset: 10,
+}
+
+export class VirtualList extends Component<Props, State> {
+  static defaultProps = defaultProps as object;
+
+  private listRef = React.createRef<VariableSizeList>();
+  private parentRef = React.createRef<HTMLDivElement>();
+
+  public state: State = {
+    overscanCount: this.props.initialOffset,
+    height: 0,
+  };
+
+  componentDidMount() {
+    this.setListHeight();
+    this.scrollToSelectedItem();
+    new ResizeSensor(this.parentRef.current as any as Element, this.setListHeight);
+    this.setState({ overscanCount: this.props.readyOffset });
+  }
+
+  componentDidUpdate(prevProps: Props) {
+    const { items, rowHeights } = this.props;
+    if (prevProps.items.length !== items.length || !isEqual(prevProps.rowHeights, rowHeights)) {
+      this.listRef.current.resetAfterIndex(0, true);
+    }
+  }
+
+  setListHeight = throttle(() => {
+    const { parentRef, state: { height } } = this;
+    if (!parentRef.current) return;
+    const parentHeight = parentRef.current.clientHeight;
+    if (parentHeight === height) return;
+    this.setState({
+      height: parentHeight,
+    })
+  }, 250)
+
+  getItemSize = (index: number) => this.props.rowHeights[index];
+
+  scrollToSelectedItem = debounce(() => {
+    const { items, selectedItemId } = this.props;
+    const index = items.findIndex(item => item.getId() == selectedItemId);
+    if (index === -1) return;
+    this.listRef.current.scrollToItem(index, "start");
+  })
+
+  render() {
+    const { width, className, items, getTableRow } = this.props;
+    const { height, overscanCount } = this.state;
+    const rowData: RowData = {
+      items,
+      getTableRow
+    };
+    return (
+      <div className={cssNames("VirtualList", className)} ref={this.parentRef}>
+        <VariableSizeList
+          className="list"
+          width={width}
+          height={height}
+          itemSize={this.getItemSize}
+          itemCount={items.length}
+          itemData={rowData}
+          overscanCount={overscanCount}
+          ref={this.listRef}
+          children={Row}
+        />
+      </div>
+    );
+  }
+}
+
+interface RowData {
+  items: ItemObject[];
+  getTableRow?: (uid: string) => React.ReactElement<TableRowProps>;
+}
+
+interface RowProps extends ListChildComponentProps {
+  data: RowData;
+}
+
+const Row = observer((props: RowProps) => {
+  const { index, style, data } = props;
+  const { items, getTableRow } = data;
+  const uid = items[index].getId();
+  const row = getTableRow(uid);
+  if (!row) return null;
+  return React.cloneElement(row, {
+    style: Object.assign({}, row.props.style, style)
+  });
+})