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

disabled flow visibility check

Browse source
This commit is contained in:
Fedor Katurov 2020-11-30 18:36:50 +07:00
parent 42586a458d
commit 3cd7df0d32
1 changed files with 28 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

57
src/components/flow/Cell/index.tsx
View file

@ -1,4 +1,4 @@
import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react'; import React, { FC, useCallback, useMemo, useRef, useState } from 'react';
import { INode } from '~/redux/types'; import { INode } from '~/redux/types';
import { formatCellText, getURL } from '~/utils/dom'; import { formatCellText, getURL } from '~/utils/dom';
import classNames from 'classnames'; import classNames from 'classnames';
@ -7,7 +7,6 @@ import styles from './styles.module.scss';
import { Icon } from '~/components/input/Icon'; import { Icon } from '~/components/input/Icon';
import { flowSetCellView } from '~/redux/flow/actions'; import { flowSetCellView } from '~/redux/flow/actions';
import { PRESETS } from '~/constants/urls'; import { PRESETS } from '~/constants/urls';
import { debounce } from 'throttle-debounce';
import { NODE_TYPES } from '~/redux/node/constants'; import { NODE_TYPES } from '~/redux/node/constants';
import { Group } from '~/components/containers/Group'; import { Group } from '~/components/containers/Group';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
@ -33,43 +32,43 @@ const Cell: FC<IProps> = ({
}) => { }) => {
const ref = useRef(null); const ref = useRef(null);
const [is_loaded, setIsLoaded] = useState(false); const [is_loaded, setIsLoaded] = useState(false);
const [is_visible, setIsVisible] = useState(false); const [is_visible, setIsVisible] = useState(true);
const checkIfVisible = useCallback(() => { // const checkIfVisible = useCallback(() => {
if (!ref.current) return; // if (!ref.current) return;
//
// const { top, height } = ref.current.getBoundingClientRect();
//
// // const visibility = top + height > -window.innerHeight && top < window.innerHeight * 2;
// const visibility = top + height > -600 && top < window.innerHeight + 600;
// if (visibility !== is_visible) setIsVisible(visibility);
// }, [ref, is_visible, setIsVisible]);
//
// const checkIfVisibleDebounced = useCallback(debounce(Math.random() * 100 + 100, checkIfVisible), [
// checkIfVisible,
// ]);
const { top, height } = ref.current.getBoundingClientRect(); // useEffect(() => {
// checkIfVisibleDebounced();
// }, []);
// const visibility = top + height > -window.innerHeight && top < window.innerHeight * 2; // useEffect(() => {
const visibility = top + height > -600 && top < window.innerHeight + 600; // recalc visibility of other elements
if (visibility !== is_visible) setIsVisible(visibility); // window.dispatchEvent(new CustomEvent('scroll'));
}, [ref, is_visible, setIsVisible]); // }, [flow]);
const checkIfVisibleDebounced = useCallback(debounce(Math.random() * 100 + 100, checkIfVisible), [ // useEffect(() => {
checkIfVisible, // window.addEventListener('scroll', checkIfVisibleDebounced);
]); //
// return () => window.removeEventListener('scroll', checkIfVisibleDebounced);
useEffect(() => { // }, [checkIfVisibleDebounced]);
checkIfVisibleDebounced();
}, []);
useEffect(() => {
// recalc visibility of other elements
window.dispatchEvent(new CustomEvent('scroll'));
}, [flow]);
useEffect(() => {
window.addEventListener('scroll', checkIfVisibleDebounced);
return () => window.removeEventListener('scroll', checkIfVisibleDebounced);
}, [checkIfVisibleDebounced]);
const onImageLoad = useCallback(() => { const onImageLoad = useCallback(() => {
setIsLoaded(true); setIsLoaded(true);
}, [setIsLoaded]); }, [setIsLoaded]);
// Replaced it with <Link>, maybe, you can remove it completely with NodeSelect action // Replaced it with <Link>, maybe, you can remove it completely with NodeSelect action
const onClick = useCallback(() => onSelect(id, type), [onSelect, id, type]); // const onClick = useCallback(() => onSelect(id, type), [onSelect, id, type]);
const has_description = description && description.length > 32; const has_description = description && description.length > 32;
const text = const text =