From 531bd3626aba09339c17c03d42f66ddde43a8396 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Mon, 26 Oct 2020 19:14:41 +0700
Subject: [PATCH] added working tiny-slider!
---
package.json | 2 +
src/components/containers/FullWidth/index.tsx | 46 +++++++++++++
.../containers/FullWidth/styles.module.scss | 10 +++
.../node/NodeImageTinySlider/index.tsx | 69 +++++++++----------
.../NodeImageTinySlider/styles.module.scss | 23 +------
src/utils/node.ts | 12 +++-
yarn.lock | 17 +++++
7 files changed, 122 insertions(+), 57 deletions(-)
create mode 100644 src/components/containers/FullWidth/index.tsx
create mode 100644 src/components/containers/FullWidth/styles.module.scss
diff --git a/package.json b/package.json
index 7332d17b..1767cc16 100644
--- a/package.json
+++ b/package.json
@@ -110,6 +110,8 @@
"scrypt": "^6.0.3",
"sticky-sidebar": "^3.3.1",
"throttle-debounce": "^2.1.0",
+ "tiny-slider-react": "^0.5.3",
+ "tiny-slider": "2.9.2",
"tinycolor": "^0.0.1",
"tslint": "^5.20.0",
"tslint-config-airbnb": "^5.11.2",
diff --git a/src/components/containers/FullWidth/index.tsx b/src/components/containers/FullWidth/index.tsx
new file mode 100644
index 00000000..f2f8a603
--- /dev/null
+++ b/src/components/containers/FullWidth/index.tsx
@@ -0,0 +1,46 @@
+import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import styles from './styles.module.scss';
+import ResizeSensor from 'resize-sensor';
+
+const FullWidth: FC = ({ children }) => {
+ 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;
+
+ return {
+ width: clientWidth,
+ transform: `translate(-${(clientWidth - width) / 2}px, 0)`,
+ };
+ }, [sample.current, clientWidth]);
+
+ 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 };
diff --git a/src/components/containers/FullWidth/styles.module.scss b/src/components/containers/FullWidth/styles.module.scss
new file mode 100644
index 00000000..c1541aec
--- /dev/null
+++ b/src/components/containers/FullWidth/styles.module.scss
@@ -0,0 +1,10 @@
+.sample {
+ width: 100%;
+ display: block;
+ background: green;
+ height: 0;
+}
+
+.slider {
+ max-height: calc(100vh - 125px);
+}
diff --git a/src/components/node/NodeImageTinySlider/index.tsx b/src/components/node/NodeImageTinySlider/index.tsx
index 6ca0e61a..070339bc 100644
--- a/src/components/node/NodeImageTinySlider/index.tsx
+++ b/src/components/node/NodeImageTinySlider/index.tsx
@@ -1,44 +1,41 @@
-import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { FC } from 'react';
+import { INodeComponentProps } from '~/redux/node/constants';
+import { FullWidth } from '~/components/containers/FullWidth';
+import { useNodeImages } from '~/utils/node';
+import { getURL } from '~/utils/dom';
+import { PRESETS } from '~/constants/urls';
+import TinySlider from 'tiny-slider-react';
import styles from './styles.module.scss';
-interface IProps {}
+const settings = {
+ nav: false,
+ buttons: false,
+ mouseDrag: true,
+ gutter: 10,
+ center: true,
+ lazyload: true,
+ items: 1,
+ edgePadding: 150,
+ loop: true,
+ arrowKeys: false,
+ prevButton: false,
+ nextButton: false,
+ swipeAngle: 45,
+};
-const NodeImageTinySlider: FC<IProps> = () => {
- 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;
-
- return {
- // width: clientWidth,
- // transform: `translate(-${(clientWidth - width) / 2}px, 0)`,
- };
- }, [sample.current, clientWidth]);
-
- const onResize = useCallback(() => setClientWidth(document.documentElement.clientWidth), []);
-
- useEffect(() => {
- window.addEventListener('resize', onResize);
- document.body.addEventListener('overflow', onResize);
- document.body.addEventListener('overflowchanged', console.log);
-
- document.body.addEventListener('resize', console.log);
-
- return () => {
- window.removeEventListener('resize', onResize);
- window.removeEventListener('overflow', onResize);
- };
- }, []);
+const NodeImageTinySlider: FC<INodeComponentProps> = ({ node }) => {
+ const images = useNodeImages(node);
return (
- <div className={styles.wrap}>
- <div className={styles.slider} style={style} />
- <div className={styles.sample} ref={sample} />
- </div>
+ <FullWidth>
+ <div className={styles.slider}>
+ <TinySlider settings={settings}>
+ {images.map(image => (
+ <img src={getURL(image, PRESETS['1600'])} key={image.url} />
+ ))}
+ </TinySlider>
+ </div>
+ </FullWidth>
);
};
diff --git a/src/components/node/NodeImageTinySlider/styles.module.scss b/src/components/node/NodeImageTinySlider/styles.module.scss
index f96e7258..98fe700e 100644
--- a/src/components/node/NodeImageTinySlider/styles.module.scss
+++ b/src/components/node/NodeImageTinySlider/styles.module.scss
@@ -1,22 +1,5 @@
-.wrap {
- background: $red;
-}
-
-.sample {
- width: 100%;
- display: block;
- height: 24px;
- background: green;
-}
-
.slider {
- background: blue;
- height: 20px;
- width: 100vw;
- position: relative;
- left: 50%;
- right: 50%;
- margin-left: -50vw;
- margin-right: -50vw;
- box-sizing: border-box;
+ img {
+ max-height: calc(100vh - 140px);
+ }
}
diff --git a/src/utils/node.ts b/src/utils/node.ts
index 286b3fe2..8ccd2946 100644
--- a/src/utils/node.ts
+++ b/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]
+ );
+};
diff --git a/yarn.lock b/yarn.lock
index 7c74c586..6686f3f8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9564,6 +9564,23 @@ tiny-invariant@^1.0.2:
resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.0.6.tgz#b3f9b38835e36a41c843a3b0907a5a7b3755de73"
integrity sha512-FOyLWWVjG+aC0UqG76V53yAWdXfH8bO6FNmyZOuUrzDzK8DI3/JRY25UD7+g49JWM1LXwymsKERB+DzI0dTEQA==
+tiny-slider-react@^0.5.3:
+ version "0.5.3"
+ resolved "https://registry.yarnpkg.com/tiny-slider-react/-/tiny-slider-react-0.5.3.tgz#0e96f6b9a6cdafaac7b1bc29cfc9cb9a356760f5"
+ integrity sha512-miTPlaWgwfg2U7WBDxdR40LFhAncIS2fF03tuNE5nqVIF5tuvjVFHGz1V0LSJWoNeOtXgoWs94JB2/hdxrCWqA==
+ dependencies:
+ tiny-slider "^2.9.2"
+
+tiny-slider@2.9.2:
+ version "2.9.2"
+ resolved "https://registry.yarnpkg.com/tiny-slider/-/tiny-slider-2.9.2.tgz#dcd70ac79054a4d170bc2cfde3efbdaa2cc0c75f"
+ integrity sha512-2sgEJpVbpIbbgiYM/xGa0HMvvtUZSJvXeZJmLWBux6VgFqh/MQG8LXBR59ZLYpa/1OtwM0E6/ic55oLOJN9Mnw==
+
+tiny-slider@^2.9.2:
+ version "2.9.3"
+ resolved "https://registry.yarnpkg.com/tiny-slider/-/tiny-slider-2.9.3.tgz#94d8158f704f3192fef1634c0ae6779fb14ea04e"
+ integrity sha512-KZY45m+t3fb3Kwlqsic0PIos1lgTNXBEC5N/AhI3aNEcryrd0nXohZMbVPMkcNYdbLjY1IUJAXWYAO6/RGJnKw==
+
tiny-warning@^1.0.0, tiny-warning@^1.0.2:
version "1.0.3"
resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"