Web: Files: added infinite-loader to forms gallery

packages/client/src/pages/FormGallery/TilesView/StyledTileView.js

@@ -210,7 +210,6 @@ const SimpleFilesTileContent = styled(TileContent)`
 
 const paddingCss = css`
   @media ${desktop} {
-    margin-left: 1px;
     padding-right: 3px;
   }
 
@@ -236,6 +235,7 @@ const StyledGridWrapper = styled.div`
 
 const StyledTileContainer = styled.div`
   position: relative;
+  height: 100%;
 
   .tile-item-wrapper {
     position: relative;
@@ -386,6 +386,25 @@ const MainContainer = styled.div`
   }
 `;
 
+const StyledCard = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
+  height: ${({ cardHeight }) => `${cardHeight}px`};
+`;
+
+const StyledItem = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
+  gap: 14px 16px;
+  width: 100%;
+
+  @media ${tablet} {
+    gap: 14px;
+  }
+
+  ${paddingCss};
+`;
+
 export {
   StyledTile,
   StyledFileTileTop,
@@ -399,4 +418,6 @@ export {
   StyledTileContent,
   MainContainerWrapper,
   MainContainer,
+  StyledCard,
+  StyledItem,
 };

packages/client/src/pages/FormGallery/TilesView/sub-components/InfiniteGrid.js

@@ -0,0 +1,129 @@
+import React from "react";
+import { inject, observer } from "mobx-react";
+import InfiniteLoaderComponent from "@docspace/components/infinite-loader";
+import { StyledCard, StyledItem } from "../StyledTileView";
+import Loaders from "@docspace/common/components/Loaders";
+import uniqueid from "lodash/uniqueId";
+
+const Card = ({ children, ...rest }) => {
+  const horizontalGap = 16;
+  const fileHeight = 220 + horizontalGap;
+  const cardHeight = fileHeight;
+
+  return (
+    <StyledCard className="Card" cardHeight={cardHeight} {...rest}>
+      {children}
+    </StyledCard>
+  );
+};
+
+const Item = ({ children, className, ...rest }) => {
+  return (
+    <StyledItem className={`Item ${className}`} {...rest}>
+      {children}
+    </StyledItem>
+  );
+};
+
+const InfiniteGrid = (props) => {
+  const {
+    children,
+    hasMoreFiles,
+    filterTotal,
+    fetchMoreFiles,
+    filesLength,
+    className,
+    getCountTilesInRow,
+    ...rest
+  } = props;
+
+  const countTilesInRow = getCountTilesInRow();
+
+  let cards = [];
+  const list = [];
+
+  const addItemToList = (key, clear) => {
+    list.push(
+      <Item key={key} className="isFile">
+        {cards}
+      </Item>
+    );
+    if (clear) cards = [];
+  };
+
+  React.Children.map(children, (child) => {
+    if (child) {
+      if (cards.length && cards.length === countTilesInRow) {
+        const listKey = uniqueid("list-item_");
+        addItemToList(listKey, true);
+      }
+
+      const cardKey = uniqueid("card-item_");
+      cards.push(<Card key={cardKey}>{child}</Card>);
+    }
+  });
+
+  if (hasMoreFiles) {
+    // If cards elements are full, it will add the full line of loaders
+    if (cards.length === countTilesInRow) {
+      addItemToList("loaded-row", true);
+    }
+
+    // Added line of loaders
+    while (cards.length !== countTilesInRow) {
+      const key = `tiles-loader_${countTilesInRow - cards.length}`;
+      cards.push(
+        <Loaders.Tile
+          key={key}
+          className={"tiles-loader isFile"}
+          isFolder={false}
+        />
+      );
+    }
+
+    addItemToList("loaded-row");
+  } else if (cards.length) {
+    // Adds loaders until the row is full
+    const listKey = uniqueid("list-item_");
+    addItemToList(listKey);
+  }
+
+  // console.log("InfiniteGrid render", list);
+
+  return (
+    <InfiniteLoaderComponent
+      viewAs="tile"
+      countTilesInRow={countTilesInRow}
+      filesLength={filesLength}
+      hasMoreFiles={hasMoreFiles}
+      itemCount={hasMoreFiles ? list.length + 1 : list.length}
+      loadMoreItems={fetchMoreFiles}
+      className={`TileList ${className}`}
+      {...rest}
+    >
+      {list}
+    </InfiniteLoaderComponent>
+  );
+};
+
+export default inject(({ filesStore, oformsStore }) => {
+  const {
+    oformFiles,
+    hasMoreForms,
+    oformsFilterTotal,
+    loadMoreForms,
+  } = oformsStore;
+
+  const { getCountTilesInRow } = filesStore;
+
+  const filesLength = oformFiles.length;
+
+  return {
+    filesList: oformFiles,
+    hasMoreFiles: hasMoreForms,
+    filterTotal: oformsFilterTotal,
+    fetchMoreFiles: loadMoreForms,
+    filesLength,
+    getCountTilesInRow,
+  };
+})(observer(InfiniteGrid));

packages/client/src/pages/FormGallery/TilesView/sub-components/TileContainer.js

@@ -2,14 +2,19 @@ import React from "react";
 import { withTranslation } from "react-i18next";
 import PropTypes from "prop-types";
 import { StyledGridWrapper, StyledTileContainer } from "../StyledTileView";
+import InfiniteGrid from "./InfiniteGrid";
 
 class TileContainer extends React.PureComponent {
   render() {
-    const { children, id, className, style } = this.props;
+    const { children, useReactWindow, ...rest } = this.props;
 
     return (
-      <StyledTileContainer id={id} className={className} style={style}>
-        <StyledGridWrapper>{children}</StyledGridWrapper>
+      <StyledTileContainer {...rest}>
+        {useReactWindow ? (
+          <InfiniteGrid>{children}</InfiniteGrid>
+        ) : (
+          <StyledGridWrapper>{children}</StyledGridWrapper>
+        )}
       </StyledTileContainer>
     );
   }
@@ -22,4 +27,9 @@ TileContainer.propTypes = {
   style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
 };
 
+TileContainer.defaultProps = {
+  useReactWindow: true,
+  id: "tileContainer",
+};
+
 export default withTranslation(["Files", "Common"])(TileContainer);

packages/client/src/pages/FormGallery/index.js

@@ -1,16 +1,26 @@
-import React from "react";
+import React, { useEffect } from "react";
 import Section from "@docspace/common/components/Section";
+import { observer, inject } from "mobx-react";
 
 import SectionHeaderContent from "./Header";
 import SectionBodyContent from "./Body";
 import { InfoPanelBodyContent } from "../Home/InfoPanel";
 import InfoPanelHeaderContent from "../Home/InfoPanel/Header";
 
-const FormGallery = () => {
+const FormGallery = ({ getOforms, setOformFiles }) => {
+  useEffect(() => {
+    getOforms();
+
+    return () => {
+      setOformFiles(null);
+    };
+  }, [getOforms, setOformFiles]);
+
   return (
     <Section
-    // withBodyScroll
-    // withBodyAutoFocus={!isMobile}
+      // withBodyScroll
+      // withBodyAutoFocus={!isMobile}
+      withPaging={false}
     >
       <Section.SectionHeader>
         <SectionHeaderContent />
@@ -28,4 +38,11 @@ const FormGallery = () => {
   );
 };
 
-export default FormGallery;
+export default inject(({ oformsStore }) => {
+  const { getOforms, setOformFiles } = oformsStore;
+
+  return {
+    getOforms,
+    setOformFiles,
+  };
+})(observer(FormGallery));