From 18ec220a4e508a2bf67fdd076b8b6c15aee0fc7b Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Fri, 12 Mar 2021 12:04:10 +0700 Subject: [PATCH] #23 added labs layout --- src/components/containers/Sticky/index.tsx | 45 ++++--------------- .../containers/Sticky/styles.module.scss | 17 ------- src/components/main/Header/index.tsx | 14 ++++-- src/components/node/NodeAudioBlock/index.tsx | 6 +-- .../node/NodeAudioImageBlock/index.tsx | 6 +-- src/constants/urls.ts | 1 + src/containers/lab/LabGrid/index.tsx | 21 +++++++++ src/containers/lab/LabGrid/styles.module.scss | 8 ++++ src/containers/lab/LabLayout/index.tsx | 27 +++++++++++ .../lab/LabLayout/styles.module.scss | 11 +++++ src/containers/lab/LabNode/index.tsx | 34 ++++++++++++++ src/containers/main/MainRouter/index.tsx | 2 + src/utils/hooks/node/useNodeAudios.ts | 4 ++ src/utils/hooks/node/useNodeImages.ts | 4 ++ 14 files changed, 135 insertions(+), 65 deletions(-) delete mode 100644 src/components/containers/Sticky/styles.module.scss create mode 100644 src/containers/lab/LabGrid/index.tsx create mode 100644 src/containers/lab/LabGrid/styles.module.scss create mode 100644 src/containers/lab/LabLayout/index.tsx create mode 100644 src/containers/lab/LabLayout/styles.module.scss create mode 100644 src/containers/lab/LabNode/index.tsx diff --git a/src/components/containers/Sticky/index.tsx b/src/components/containers/Sticky/index.tsx index dfeda268..55288c87 100644 --- a/src/components/containers/Sticky/index.tsx +++ b/src/components/containers/Sticky/index.tsx @@ -1,42 +1,15 @@ -import React, { DetailsHTMLAttributes, FC, useEffect, useRef } from 'react'; -import styles from './styles.module.scss'; +import React, { DetailsHTMLAttributes, FC } from 'react'; +import StickyBox from 'react-sticky-box/dist/esnext'; -import ResizeSensor from 'resize-sensor'; -(window as any).ResizeSensor = ResizeSensor; - -import StickySidebar from 'sticky-sidebar'; -(window as any).StickySidebar = StickySidebar; - -import classnames from 'classnames'; - -interface IProps extends DetailsHTMLAttributes {} - -const Sticky: FC = ({ children }) => { - const ref = useRef(null); - const sb = useRef(null); - - useEffect(() => { - if (!ref.current) return; - - sb.current = new StickySidebar(ref.current, { - resizeSensor: true, - topSpacing: 72, - bottomSpacing: 10, - }); - - return () => sb.current?.destroy(); - }, [ref.current, sb.current, children]); - - if (sb) { - sb.current?.updateSticky(); - } +interface IProps extends DetailsHTMLAttributes { + offsetTop?: number; +} +const Sticky: FC = ({ children, offsetTop = 65 }) => { return ( -
-
-
{children}
-
-
+ + {children} + ); }; diff --git a/src/components/containers/Sticky/styles.module.scss b/src/components/containers/Sticky/styles.module.scss deleted file mode 100644 index eb680535..00000000 --- a/src/components/containers/Sticky/styles.module.scss +++ /dev/null @@ -1,17 +0,0 @@ -@import "src/styles/variables"; - -.wrap { - height: 100%; - width: 100%; - position: relative; - - :global(.sidebar) { - will-change: min-height; - } - - :global(.sidebar__inner) { - transform: translate(0, 0); /* For browsers don't support translate3d. */ - transform: translate3d(0, 0, 0); - will-change: position, transform; - } -} diff --git a/src/components/main/Header/index.tsx b/src/components/main/Header/index.tsx index 43d7646c..69d0dee4 100644 --- a/src/components/main/Header/index.tsx +++ b/src/components/main/Header/index.tsx @@ -82,6 +82,15 @@ const HeaderUnconnected: FC = memo(
+ {is_user && ( + + ЛАБ + + )} + = memo( } ); -const Header = connect( - mapStateToProps, - mapDispatchToProps -)(HeaderUnconnected); +const Header = connect(mapStateToProps, mapDispatchToProps)(HeaderUnconnected); export { Header }; diff --git a/src/components/node/NodeAudioBlock/index.tsx b/src/components/node/NodeAudioBlock/index.tsx index 9581a16b..c064e831 100644 --- a/src/components/node/NodeAudioBlock/index.tsx +++ b/src/components/node/NodeAudioBlock/index.tsx @@ -4,14 +4,12 @@ import { UPLOAD_TYPES } from '~/redux/uploads/constants'; import { AudioPlayer } from '~/components/media/AudioPlayer'; import styles from './styles.module.scss'; import { INodeComponentProps } from '~/redux/node/constants'; +import { useNodeAudios } from '~/utils/hooks/node/useNodeAudios'; interface IProps extends INodeComponentProps {} const NodeAudioBlock: FC = ({ node }) => { - const audios = useMemo( - () => node.files.filter(file => file && file.type === UPLOAD_TYPES.AUDIO), - [node.files] - ); + const audios = useNodeAudios(node); return (
diff --git a/src/components/node/NodeAudioImageBlock/index.tsx b/src/components/node/NodeAudioImageBlock/index.tsx index ca848b3f..e7834737 100644 --- a/src/components/node/NodeAudioImageBlock/index.tsx +++ b/src/components/node/NodeAudioImageBlock/index.tsx @@ -6,14 +6,12 @@ import { path } from 'ramda'; import { getURL } from '~/utils/dom'; import { PRESETS } from '~/constants/urls'; import { INodeComponentProps } from '~/redux/node/constants'; +import { useNodeImages } from '~/utils/hooks/node/useNodeImages'; interface IProps extends INodeComponentProps {} const NodeAudioImageBlock: FC = ({ node }) => { - const images = useMemo( - () => node.files.filter(file => file && file.type === UPLOAD_TYPES.IMAGE), - [node.files] - ); + const images = useNodeImages(node); if (images.length === 0) return null; diff --git a/src/constants/urls.ts b/src/constants/urls.ts index 67eb4a39..527e072e 100644 --- a/src/constants/urls.ts +++ b/src/constants/urls.ts @@ -2,6 +2,7 @@ import { INode } from '~/redux/types'; export const URLS = { BASE: '/', + LAB: '/lab', BORIS: '/boris', AUTH: { LOGIN: '/auth/login', diff --git a/src/containers/lab/LabGrid/index.tsx b/src/containers/lab/LabGrid/index.tsx new file mode 100644 index 00000000..1caa8381 --- /dev/null +++ b/src/containers/lab/LabGrid/index.tsx @@ -0,0 +1,21 @@ +import React, { FC } from 'react'; +import { useShallowSelect } from '~/utils/hooks/useShallowSelect'; +import { selectFlowNodes } from '~/redux/flow/selectors'; +import styles from './styles.module.scss'; +import { LabNode } from '~/containers/lab/LabNode'; + +interface IProps {} + +const LabGrid: FC = () => { + const nodes = useShallowSelect(selectFlowNodes); + + return ( +
+ {nodes.map(node => ( + + ))} +
+ ); +}; + +export { LabGrid }; diff --git a/src/containers/lab/LabGrid/styles.module.scss b/src/containers/lab/LabGrid/styles.module.scss new file mode 100644 index 00000000..3f42c360 --- /dev/null +++ b/src/containers/lab/LabGrid/styles.module.scss @@ -0,0 +1,8 @@ +@import "~/styles/variables.scss"; + +.wrap { + display: grid; + grid-auto-flow: row; + grid-auto-rows: auto; + grid-row-gap: $gap; +} diff --git a/src/containers/lab/LabLayout/index.tsx b/src/containers/lab/LabLayout/index.tsx new file mode 100644 index 00000000..47a77bcd --- /dev/null +++ b/src/containers/lab/LabLayout/index.tsx @@ -0,0 +1,27 @@ +import React, { FC } from 'react'; +import styles from './styles.module.scss'; +import { Card } from '~/components/containers/Card'; +import { Sticky } from '~/components/containers/Sticky'; +import { Container } from '~/containers/main/Container'; +import { LabGrid } from '~/containers/lab/LabGrid'; + +interface IProps {} + +const LabLayout: FC = () => ( +
+ +
+
+ +
+
+ + Test + +
+
+ +
+); + +export { LabLayout }; diff --git a/src/containers/lab/LabLayout/styles.module.scss b/src/containers/lab/LabLayout/styles.module.scss new file mode 100644 index 00000000..c204075d --- /dev/null +++ b/src/containers/lab/LabLayout/styles.module.scss @@ -0,0 +1,11 @@ +@import "~/styles/variables.scss"; + +.wrap { + display: grid; + grid-template-columns: 3fr 1fr; + column-gap: $gap; +} + +.panel { + margin-top: -7px; +} diff --git a/src/containers/lab/LabNode/index.tsx b/src/containers/lab/LabNode/index.tsx new file mode 100644 index 00000000..246a119b --- /dev/null +++ b/src/containers/lab/LabNode/index.tsx @@ -0,0 +1,34 @@ +import React, { FC } from 'react'; +import { INode } from '~/redux/types'; +import { NodePanelInner } from '~/components/node/NodePanelInner'; +import { useNodeBlocks } from '~/utils/hooks/node/useNodeBlocks'; + +interface IProps { + node: INode; +} + +const LabNode: FC = ({ node }) => { + const { inline, block, head } = useNodeBlocks(node, false); + + return ( +
+ + + {inline} + {block} + {head} +
+ ); +}; + +export { LabNode }; diff --git a/src/containers/main/MainRouter/index.tsx b/src/containers/main/MainRouter/index.tsx index bed1579a..b5a17270 100644 --- a/src/containers/main/MainRouter/index.tsx +++ b/src/containers/main/MainRouter/index.tsx @@ -6,6 +6,7 @@ import { BorisLayout } from '~/containers/node/BorisLayout'; import { ErrorNotFound } from '~/containers/pages/ErrorNotFound'; import { ProfilePage } from '~/containers/profile/ProfilePage'; import { Redirect, Route, Switch, useLocation } from 'react-router'; +import { LabLayout } from '~/containers/lab/LabLayout'; interface IProps {} @@ -15,6 +16,7 @@ const MainRouter: FC = () => { return ( + diff --git a/src/utils/hooks/node/useNodeAudios.ts b/src/utils/hooks/node/useNodeAudios.ts index 7ece487f..5dc043a1 100644 --- a/src/utils/hooks/node/useNodeAudios.ts +++ b/src/utils/hooks/node/useNodeAudios.ts @@ -3,6 +3,10 @@ import { useMemo } from 'react'; import { UPLOAD_TYPES } from '~/redux/uploads/constants'; export const useNodeAudios = (node: INode) => { + if (!node?.files) { + return []; + } + return useMemo(() => node.files.filter(file => file && file.type === UPLOAD_TYPES.AUDIO), [ node.files, ]); diff --git a/src/utils/hooks/node/useNodeImages.ts b/src/utils/hooks/node/useNodeImages.ts index 4f6b71d5..375d6198 100644 --- a/src/utils/hooks/node/useNodeImages.ts +++ b/src/utils/hooks/node/useNodeImages.ts @@ -3,6 +3,10 @@ import { useMemo } from 'react'; import { UPLOAD_TYPES } from '~/redux/uploads/constants'; export const useNodeImages = (node: INode) => { + if (!node?.files) { + return []; + } + return useMemo(() => node.files.filter(file => file && file.type === UPLOAD_TYPES.IMAGE), [ node.files, ]);