muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 12:56:41 +07:00
Code Packages Activity Actions

render optimizations for slider

Browse source
This commit is contained in:
Fedor Katurov 2019-11-07 17:10:57 +07:00
parent 0a0abba7f9
commit a1227b658b
1 changed files with 9 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/components/node/NodeImageSlideBlock/index.tsx
View file

@ -8,6 +8,7 @@ import { NODE_SETTINGS } from '~/redux/node/constants';
import { getURL } from '~/utils/dom'; import { getURL } from '~/utils/dom';
import { PRESETS } from '~/constants/urls'; import { PRESETS } from '~/constants/urls';
import { LoaderCircle } from '~/components/input/LoaderCircle'; import { LoaderCircle } from '~/components/input/LoaderCircle';
import { throttle } from 'throttle-debounce';
interface IProps { interface IProps {
is_loading: boolean; is_loading: boolean;
@ -33,6 +34,8 @@ const NodeImageSlideBlock: FC<IProps> = ({ node, is_loading, updateLayout }) =>
const slide = useRef<HTMLDivElement>(); const slide = useRef<HTMLDivElement>();
const wrap = useRef<HTMLDivElement>(); const wrap = useRef<HTMLDivElement>();
const setHeightThrottled = useCallback(throttle(100, setHeight), [setHeight]);
const images = useMemo( const images = useMemo(
() => () =>
(node && node.files && node.files.filter(({ type }) => type === UPLOAD_TYPES.IMAGE)) || [], (node && node.files && node.files.filter(({ type }) => type === UPLOAD_TYPES.IMAGE)) || [],
@ -89,8 +92,12 @@ const NodeImageSlideBlock: FC<IProps> = ({ node, is_loading, updateLayout }) =>
if (current !== Math.round(selected)) setCurrent(Math.round(selected)); if (current !== Math.round(selected)) setCurrent(Math.round(selected));
setHeight(now); if (!is_dragging) {
}, [wrap, offset, heights, max_height, images, is_loading]); setHeight(now);
} else {
setHeightThrottled(now);
}
}, [is_dragging, wrap, offset, heights, max_height, images, is_loading]);
const onDrag = useCallback( const onDrag = useCallback(
event => { event => {