Merge branch 'develop'

src/components/containers/FullWidth/index.tsx

@@ -0,0 +1,52 @@
+import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import styles from './styles.module.scss';
+import ResizeSensor from 'resize-sensor';
+
+interface IProps {
+  onRefresh?: (width: number) => void;
+}
+
+const FullWidth: FC<IProps> = ({ children, onRefresh }) => {
+  const sample = useRef<HTMLDivElement>(null);
+  const [clientWidth, setClientWidth] = useState(document.documentElement.clientWidth);
+
+  const style = useMemo(() => {
+    if (!sample.current) return { display: 'none' };
+
+    const { width } = sample.current.getBoundingClientRect();
+    const { clientWidth } = document.documentElement;
+
+    onRefresh(clientWidth);
+
+    return {
+      width: clientWidth,
+      transform: `translate(-${(clientWidth - width) / 2}px, 0)`,
+    };
+  }, [sample.current, clientWidth, onRefresh]);
+
+  const onResize = useCallback(() => setClientWidth(document.documentElement.clientWidth), []);
+
+  useEffect(() => {
+    if (!sample.current) return;
+
+    window.addEventListener('resize', onResize);
+    new ResizeSensor(document.body, onResize);
+
+    return () => {
+      window.removeEventListener('resize', onResize);
+      ResizeSensor.detach(document.body, onResize);
+    };
+  }, []);
+
+  return (
+    <div className={styles.wrap}>
+      <div className={styles.slider} style={style}>
+        {children}
+      </div>
+
+      <div className={styles.sample} ref={sample} />
+    </div>
+  );
+};
+
+export { FullWidth };

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

@@ -0,0 +1,10 @@
+.sample {
+  width: 100%;
+  display: block;
+  background: green;
+  height: 0;
+}
+
+.slider {
+  display: block;
+}

src/components/node/NodeImageSlideBlock/index.tsx

@@ -8,6 +8,7 @@ import { PRESETS } from '~/constants/urls';
 import { LoaderCircle } from '~/components/input/LoaderCircle';
 import { throttle } from 'throttle-debounce';
 import { Icon } from '~/components/input/Icon';
+import { useArrows } from '~/utils/hooks/keys';
 
 interface IProps extends INodeComponentProps {}
 
@@ -239,29 +240,7 @@ const NodeImageSlideBlock: FC<IProps> = ({
     images,
   ]);
 
-  const onKeyDown = useCallback(
-    event => {
-      if (
-        (event.target.tagName && ['TEXTAREA', 'INPUT'].includes(event.target.tagName)) ||
-        is_modal_shown
-      )
-        return;
-
-      switch (event.key) {
-        case 'ArrowLeft':
-          return onPrev();
-        case 'ArrowRight':
-          return onNext();
-      }
-    },
-    [onNext, onPrev, is_modal_shown]
-  );
-
-  useEffect(() => {
-    window.addEventListener('keydown', onKeyDown);
-
-    return () => window.removeEventListener('keydown', onKeyDown);
-  }, [onKeyDown]);
+  useArrows(onNext, onPrev, is_modal_shown);
 
   useEffect(() => {
     setOffset(0);
@@ -270,16 +249,6 @@ const NodeImageSlideBlock: FC<IProps> = ({
   return (
     <div className={styles.wrap}>
       <div className={classNames(styles.cutter, { [styles.is_loading]: is_loading })} ref={wrap}>
-        <div
-          className={classNames(styles.placeholder, {
-            [styles.is_loading]: is_loading,
-          })}
-        >
-          <div>
-            <LoaderCircle size={96} />
-          </div>
-        </div>
-
         <div
           className={classNames(styles.image_container, { [styles.is_dragging]: is_dragging })}
           style={{

src/containers/App.tsx

@@ -25,6 +25,7 @@ const Component: FC<IProps> = ({ modal: { is_shown } }) => {
       <div>
         <BlurWrapper is_blurred={is_shown}>
           <PageCover />
+
           <MainLayout>
             <Modal />
             <Sprites />

src/styles/global.scss

@@ -2,6 +2,8 @@
 
 html {
   min-height: 100vh;
+  box-sizing: border-box;
+  overflow: auto;
 }
 
 body {

src/utils/hooks/keys.ts

@@ -0,0 +1,23 @@
+import { useCallback, useEffect } from 'react';
+
+export const useArrows = (onNext: () => void, onPrev: () => void, locked) => {
+  const onKeyDown = useCallback(
+    event => {
+      if ((event.target.tagName && ['TEXTAREA', 'INPUT'].includes(event.target.tagName)) || locked)
+        return;
+
+      switch (event.key) {
+        case 'ArrowLeft':
+          return onPrev();
+        case 'ArrowRight':
+          return onNext();
+      }
+    },
+    [onNext, onPrev, locked]
+  );
+
+  useEffect(() => {
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [onKeyDown]);
+};

src/utils/node.ts

@@ -1,8 +1,10 @@
 import { USER_ROLES } from '~/redux/auth/constants';
-import { INode, IComment, ICommentGroup } from '~/redux/types';
+import { INode, IComment, ICommentGroup, IFile } from '~/redux/types';
 import { IUser } from '~/redux/auth/types';
 import path from 'ramda/es/path';
 import { NODE_TYPES } from '~/redux/node/constants';
+import { useMemo } from 'react';
+import { UPLOAD_TYPES } from '~/redux/uploads/constants';
 
 export const canEditNode = (node: Partial<INode>, user: Partial<IUser>): boolean =>
   path(['role'], user) === USER_ROLES.ADMIN ||
@@ -19,3 +21,11 @@ export const canStarNode = (node: Partial<INode>, user: Partial<IUser>): boolean
   node.type === NODE_TYPES.IMAGE &&
   path(['role'], user) &&
   path(['role'], user) === USER_ROLES.ADMIN;
+
+export const useNodeImages = (node: INode): IFile[] => {
+  return useMemo(
+    () =>
+      (node && node.files && node.files.filter(({ type }) => type === UPLOAD_TYPES.IMAGE)) || [],
+    [node.files]
+  );
+};