diff --git a/src/components/node/NodeAudioBlock/index.tsx b/src/components/node/NodeAudioBlock/index.tsx index 7a4bde45..6b3595e9 100644 --- a/src/components/node/NodeAudioBlock/index.tsx +++ b/src/components/node/NodeAudioBlock/index.tsx @@ -3,10 +3,9 @@ import { INode } from '~/redux/types'; import { UPLOAD_TYPES } from '~/redux/uploads/constants'; import { AudioPlayer } from '~/components/media/AudioPlayer'; import * as styles from './styles.scss'; +import { INodeComponentProps } from '~/redux/node/constants'; -interface IProps { - node: INode; -} +interface IProps extends INodeComponentProps {} const NodeAudioBlock: FC = ({ node }) => { const audios = useMemo( diff --git a/src/components/node/NodeAudioImageBlock/index.tsx b/src/components/node/NodeAudioImageBlock/index.tsx index 95eb3fde..366bd861 100644 --- a/src/components/node/NodeAudioImageBlock/index.tsx +++ b/src/components/node/NodeAudioImageBlock/index.tsx @@ -5,10 +5,9 @@ import { UPLOAD_TYPES } from '~/redux/uploads/constants'; import path from 'ramda/es/path'; import { getURL } from '~/utils/dom'; import { PRESETS } from '~/constants/urls'; +import { INodeComponentProps } from '~/redux/node/constants'; -interface IProps { - node: INode; -} +interface IProps extends INodeComponentProps {} const NodeAudioImageBlock: FC = ({ node }) => { const images = useMemo( diff --git a/src/components/node/NodeImageSlideBlock/index.tsx b/src/components/node/NodeImageSlideBlock/index.tsx index ad62265c..dbdfc494 100644 --- a/src/components/node/NodeImageSlideBlock/index.tsx +++ b/src/components/node/NodeImageSlideBlock/index.tsx @@ -1,24 +1,15 @@ -import React, { FC, useMemo, useState, useEffect, useRef, useCallback, KeyboardEvent } from 'react'; -import { ImageSwitcher } from '../ImageSwitcher'; +import React, { FC, useMemo, useState, useEffect, useRef, useCallback } from 'react'; import * as styles from './styles.scss'; -import { INode } from '~/redux/types'; import classNames from 'classnames'; import { UPLOAD_TYPES } from '~/redux/uploads/constants'; -import { NODE_SETTINGS } from '~/redux/node/constants'; +import { INodeComponentProps } from '~/redux/node/constants'; import { getURL } from '~/utils/dom'; import { PRESETS } from '~/constants/urls'; import { LoaderCircle } from '~/components/input/LoaderCircle'; import { throttle } from 'throttle-debounce'; -import * as MODAL_ACTIONS from '~/redux/modal/actions'; import { Icon } from '~/components/input/Icon'; -interface IProps { - is_loading: boolean; - node: INode; - layout: {}; - updateLayout: () => void; - modalShowPhotoswipe: typeof MODAL_ACTIONS.modalShowPhotoswipe; -} +interface IProps extends INodeComponentProps {} const getX = event => (event.touches && event.touches.length) || (event.changedTouches && event.changedTouches.length) @@ -28,6 +19,7 @@ const getX = event => const NodeImageSlideBlock: FC = ({ node, is_loading, + is_modal_shown, updateLayout, modalShowPhotoswipe, }) => { @@ -250,7 +242,11 @@ const NodeImageSlideBlock: FC = ({ const onKeyDown = useCallback( event => { - if (event.target.tagName && ['TEXTAREA', 'INPUT'].includes(event.target.tagName)) return; + if ( + (event.target.tagName && ['TEXTAREA', 'INPUT'].includes(event.target.tagName)) || + is_modal_shown + ) + return; switch (event.key) { case 'ArrowLeft': @@ -259,7 +255,7 @@ const NodeImageSlideBlock: FC = ({ return onNext(); } }, - [onNext, onPrev] + [onNext, onPrev, is_modal_shown] ); useEffect(() => { diff --git a/src/components/node/NodeTextBlock/index.tsx b/src/components/node/NodeTextBlock/index.tsx index 93100b84..a272ac17 100644 --- a/src/components/node/NodeTextBlock/index.tsx +++ b/src/components/node/NodeTextBlock/index.tsx @@ -3,10 +3,9 @@ import { INode } from '~/redux/types'; import path from 'ramda/es/path'; import { formatTextParagraphs } from '~/utils/dom'; import * as styles from './styles.scss'; +import { INodeComponentProps } from '~/redux/node/constants'; -interface IProps { - node: INode; -} +interface IProps extends INodeComponentProps {} const NodeTextBlock: FC = ({ node }) => (
= ({ node }) => { const video = useMemo(() => { diff --git a/src/containers/node/NodeLayout/index.tsx b/src/containers/node/NodeLayout/index.tsx index b9385158..012dcf71 100644 --- a/src/containers/node/NodeLayout/index.tsx +++ b/src/containers/node/NodeLayout/index.tsx @@ -12,7 +12,12 @@ import { NodeNoComments } from '~/components/node/NodeNoComments'; import { NodeRelated } from '~/components/node/NodeRelated'; import { NodeComments } from '~/components/node/NodeComments'; import { NodeTags } from '~/components/node/NodeTags'; -import { NODE_COMPONENTS, NODE_INLINES, NODE_HEADS } from '~/redux/node/constants'; +import { + NODE_COMPONENTS, + NODE_INLINES, + NODE_HEADS, + INodeComponentProps, +} from '~/redux/node/constants'; import { selectUser } from '~/redux/auth/selectors'; import pick from 'ramda/es/pick'; import { NodeRelatedPlaceholder } from '~/components/node/NodeRelated/placeholder'; @@ -25,10 +30,12 @@ import * as styles from './styles.scss'; import * as NODE_ACTIONS from '~/redux/node/actions'; import * as MODAL_ACTIONS from '~/redux/modal/actions'; import { IState } from '~/redux/store'; +import { selectModal } from '~/redux/modal/selectors'; const mapStateToProps = (state: IState) => ({ node: selectNode(state), user: selectUser(state), + modal: pick(['is_shown'])(selectModal(state)), }); const mapDispatchToProps = { @@ -63,6 +70,7 @@ const NodeLayoutUnconnected: FC = memo( comment_data, comment_count, }, + modal: { is_shown: is_modal_shown }, user, user: { is_user }, nodeGotoNode, @@ -106,6 +114,20 @@ const NodeLayoutUnconnected: FC = memo( const onStar = useCallback(() => nodeStar(node.id), [nodeStar, node]); const onLock = useCallback(() => nodeLock(node.id, !node.deleted_at), [nodeStar, node]); + const createNodeBlock = useCallback( + (block: FC) => + block && + createElement(block, { + node, + is_loading, + updateLayout, + layout, + modalShowPhotoswipe, + is_modal_shown, + }), + [node, is_loading, updateLayout, layout, modalShowPhotoswipe, is_modal_shown] + ); + useEffect(() => { if (!node.cover) return; nodeSetCoverImage(node.cover); @@ -114,12 +136,10 @@ const NodeLayoutUnconnected: FC = memo( return ( <> - {head && - createElement(head, { node, is_loading, updateLayout, layout, modalShowPhotoswipe })} + {createNodeBlock(head)} - {block && - createElement(block, { node, is_loading, updateLayout, layout, modalShowPhotoswipe })} + {createNodeBlock(block)} = memo( - {inline && ( -
- {createElement(inline, { - node, - is_loading, - updateLayout, - layout, - modalShowPhotoswipe, - })} -
- )} + {inline &&
{createNodeBlock(inline)}
} {is_loading || is_loading_comments || (!comments.length && !inline) ? ( diff --git a/src/redux/node/constants.ts b/src/redux/node/constants.ts index 981acceb..507168da 100644 --- a/src/redux/node/constants.ts +++ b/src/redux/node/constants.ts @@ -76,24 +76,22 @@ export const NODE_TYPES = { TEXT: 'text', }; -type INodeComponents = Record< - ValueOf, - FC<{ - node: INode; - is_loading: boolean; - layout: {}; - updateLayout: () => void; - modalShowPhotoswipe: typeof modalShowPhotoswipe; - }> ->; +export type INodeComponentProps = { + node: INode; + is_loading: boolean; + is_modal_shown: boolean; + layout: {}; + updateLayout: () => void; + modalShowPhotoswipe: typeof modalShowPhotoswipe; +}; + +export type INodeComponents = Record, FC>; export const NODE_HEADS: INodeComponents = { - // [NODE_TYPES.IMAGE]: NodeImageBlock, [NODE_TYPES.IMAGE]: NodeImageSlideBlock, }; export const NODE_COMPONENTS: INodeComponents = { - // [NODE_TYPES.IMAGE]: NodeImageSlideBlock, [NODE_TYPES.VIDEO]: NodeVideoBlock, [NODE_TYPES.AUDIO]: NodeAudioImageBlock, };