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={{