Merge branch 'master' into develop

src/components/containers/InfiniteScroll/index.tsx

@@ -0,0 +1,42 @@
+import React, { FC, HTMLAttributes, useCallback, useEffect, useRef } from 'react';
+import styles from './styles.module.scss';
+
+interface IProps extends HTMLAttributes<HTMLDivElement> {
+  hasMore: boolean;
+  scrollReactPx?: number;
+  loadMore: () => void;
+}
+
+const InfiniteScroll: FC<IProps> = ({ children, hasMore, scrollReactPx, loadMore, ...props }) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const onScrollEnd = useCallback(
+    (entries: IntersectionObserverEntry[]) => {
+      if (!hasMore || !entries[0].isIntersecting) return;
+      loadMore();
+    },
+    [hasMore, loadMore]
+  );
+
+  useEffect(() => {
+    if (!ref.current) return;
+
+    const observer = new IntersectionObserver(onScrollEnd, {
+      root: null,
+      rootMargin: '200px',
+      threshold: 1.0,
+    });
+
+    observer.observe(ref.current);
+
+    return () => observer.disconnect();
+  }, [ref.current, onScrollEnd]);
+
+  return (
+    <div {...props}>
+      {children}
+      {hasMore && <div className={styles.more} ref={ref} />}
+    </div>
+  );
+};
+
+export { InfiniteScroll };

src/components/containers/InfiniteScroll/styles.module.scss

@@ -0,0 +1,2 @@
+.more {
+}

src/components/containers/TagField/styles.scss

@@ -3,4 +3,8 @@
   align-items: flex-start;
   justify-content: flex-start;
   flex-wrap: wrap;
+
+  &> * {
+    margin: 0 $gap $gap 0;
+  }
 }