From 1c92f9a3b80cce7dd18a7ad0b71cb9779e850be1 Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Fri, 18 Oct 2019 09:35:32 +0700 Subject: [PATCH] changing max image height to its container --- .../editors/EditorUploadButton/index.tsx | 8 ++--- .../node/NodeImageSlideBlock/index.tsx | 34 ++++++++++++++----- src/redux/node/constants.ts | 7 ++-- 3 files changed, 34 insertions(+), 15 deletions(-) diff --git a/src/components/editors/EditorUploadButton/index.tsx b/src/components/editors/EditorUploadButton/index.tsx index eb183634..47660d5b 100644 --- a/src/components/editors/EditorUploadButton/index.tsx +++ b/src/components/editors/EditorUploadButton/index.tsx @@ -1,4 +1,4 @@ -import React, { FC, useCallback, useEffect, useState } from 'react'; +import React, { FC, useCallback, useEffect } from 'react'; import * as styles from './styles.scss'; import { Icon } from '~/components/input/Icon'; import { IFileWithUUID, INode, IFile } from '~/redux/types'; @@ -9,7 +9,7 @@ import assocPath from 'ramda/es/assocPath'; import append from 'ramda/es/append'; import { selectUploads } from '~/redux/uploads/selectors'; import { connect } from 'react-redux'; -import { MAX_NODE_FILES } from '~/redux/node/constants'; +import { NODE_SETTINGS } from '~/redux/node/constants'; const mapStateToProps = state => { const { statuses, files } = selectUploads(state); @@ -43,9 +43,9 @@ const EditorUploadButtonUnconnected: FC = ({ const onUpload = useCallback( (uploads: File[]) => { const current = temp.length + data.files.length; - const limit = MAX_NODE_FILES - current; + const limit = NODE_SETTINGS.MAX_FILES - current; - if (current >= MAX_NODE_FILES) return; + if (current >= NODE_SETTINGS.MAX_FILES) return; const items: IFileWithUUID[] = Array.from(uploads).map( (file: File): IFileWithUUID => ({ diff --git a/src/components/node/NodeImageSlideBlock/index.tsx b/src/components/node/NodeImageSlideBlock/index.tsx index fe80da69..690453fa 100644 --- a/src/components/node/NodeImageSlideBlock/index.tsx +++ b/src/components/node/NodeImageSlideBlock/index.tsx @@ -5,6 +5,7 @@ import { INode } from '~/redux/types'; import classNames from 'classnames'; import { getImageSize } from '~/utils/dom'; import { UPLOAD_TYPES } from '~/redux/uploads/constants'; +import { NODE_SETTINGS } from '~/redux/node/constants'; interface IProps { is_loading: boolean; @@ -19,6 +20,7 @@ const NodeImageSlideBlock: FC = ({ node, is_loading, updateLayout }) => // const [is_animated, setIsAnimated] = useState(false); const [current, setCurrent] = useState(0); const [height, setHeight] = useState(320); + const [max_height, setMaxHeight] = useState(960); const [loaded, setLoaded] = useState>({}); const refs = useRef>({}); const [heights, setHeights] = useState({}); @@ -36,12 +38,12 @@ const NodeImageSlideBlock: FC = ({ node, is_loading, updateLayout }) => [node] ); - // console.log({ heights }); - const updateSizes = useCallback(() => { const values = Object.keys(refs.current).reduce((obj, key) => { const ref = refs.current[key]; + if (!ref || !ref.getBoundingClientRect) return 0; + return { ...obj, [key]: ref.getBoundingClientRect().height }; }, {}); @@ -62,7 +64,6 @@ const NodeImageSlideBlock: FC = ({ node, is_loading, updateLayout }) => // update outside hooks useEffect(() => updateLayout(), [loaded, height]); - useEffect(() => updateSizes(), [refs, current, loaded]); useEffect(() => { @@ -77,7 +78,7 @@ const NodeImageSlideBlock: FC = ({ node, is_loading, updateLayout }) => if (current !== Math.round(selected)) setCurrent(Math.round(selected)); setHeight(now); - }, [offset, heights]); + }, [offset, heights, max_height]); const onDrag = useCallback( event => { @@ -99,14 +100,24 @@ const NodeImageSlideBlock: FC = ({ node, is_loading, updateLayout }) => [is_dragging, initial_x, setOffset, initial_offset] ); + const normalizeOffset = useCallback(() => { + const { width: wrap_width } = wrap.current.getBoundingClientRect(); + setOffset(Math.round(offset / wrap_width) * wrap_width); + }, [wrap, offset]); + + const updateMaxHeight = useCallback(() => { + if (!wrap.current) return; + const { width } = wrap.current.getBoundingClientRect(); + setMaxHeight(width * NODE_SETTINGS.MAX_IMAGE_ASPECT); + normalizeOffset(); + }, [wrap, setMaxHeight, normalizeOffset]); + const stopDragging = useCallback(() => { if (!is_dragging) return; - const { width: wrap_width } = wrap.current.getBoundingClientRect(); - + normalizeOffset(); setIsDragging(false); - setOffset(Math.round(offset / wrap_width) * wrap_width); - }, [setIsDragging, offset, setOffset, is_dragging, wrap]); + }, [setIsDragging, is_dragging, normalizeOffset]); const startDragging = useCallback( event => { @@ -117,8 +128,11 @@ const NodeImageSlideBlock: FC = ({ node, is_loading, updateLayout }) => [setIsDragging, setInitialX, offset, setInitialOffset] ); + useEffect(() => updateMaxHeight(), []); + useEffect(() => { window.addEventListener('resize', updateSizes); + window.addEventListener('resize', updateMaxHeight); window.addEventListener('mousemove', onDrag); window.addEventListener('touchmove', onDrag); @@ -128,6 +142,7 @@ const NodeImageSlideBlock: FC = ({ node, is_loading, updateLayout }) => return () => { window.removeEventListener('resize', updateSizes); + window.removeEventListener('resize', updateMaxHeight); window.removeEventListener('mousemove', onDrag); window.removeEventListener('touchmove', onDrag); @@ -135,7 +150,7 @@ const NodeImageSlideBlock: FC = ({ node, is_loading, updateLayout }) => window.removeEventListener('mouseup', stopDragging); window.removeEventListener('touchend', stopDragging); }; - }, [onDrag, stopDragging]); + }, [onDrag, stopDragging, updateMaxHeight, updateSizes]); const changeCurrent = useCallback( (item: number) => { @@ -182,6 +197,7 @@ const NodeImageSlideBlock: FC = ({ node, is_loading, updateLayout }) => alt="" key={file.id} onLoad={onImageLoad(index)} + style={{ maxHeight: max_height }} /> ))} diff --git a/src/redux/node/constants.ts b/src/redux/node/constants.ts index 04afa40a..8f08cce4 100644 --- a/src/redux/node/constants.ts +++ b/src/redux/node/constants.ts @@ -84,8 +84,6 @@ export const NODE_EDITORS = { [NODE_TYPES.TEXT]: TextEditor, }; -export const MAX_NODE_FILES = 16; - export const NODE_EDITOR_DATA: Record< typeof NODE_TYPES[keyof typeof NODE_TYPES], Partial @@ -94,3 +92,8 @@ export const NODE_EDITOR_DATA: Record< blocks: [{ text: '', type: 'text' }], }, }; + +export const NODE_SETTINGS = { + MAX_FILES: 16, + MAX_IMAGE_ASPECT: 1.2, +};