muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-26 13:26:40 +07:00
Code Packages Activity Actions

fixed nodepanel behavoiur

Browse source
This commit is contained in:
Fedor Katurov 2019-11-25 18:36:06 +07:00
parent e19297207e
commit d74c9ee739
3 changed files with 79 additions and 102 deletions
Download patch file Download diff file Expand all files Collapse all files

50
src/components/node/NodePanel/index.tsx
View file

@ -1,16 +1,9 @@
import React, {
FC,
useCallback,
useEffect,
useRef,
useState,
memo
} from "react";
import * as styles from "./styles.scss";
import { INode } from "~/redux/types";
import { createPortal } from "react-dom";
import { NodePanelInner } from "~/components/node/NodePanelInner";
import pick from "ramda/es/pick";
import React, { FC, useCallback, useEffect, useRef, useState, memo } from 'react';
import * as styles from './styles.scss';
import { INode } from '~/redux/types';
import { createPortal } from 'react-dom';
import { NodePanelInner } from '~/components/node/NodePanelInner';
import pick from 'ramda/es/pick';
interface IProps {
node: Partial<INode>;
@ -28,40 +21,29 @@ interface IProps {
}
const NodePanel: FC<IProps> = memo(
({
node,
layout,
can_edit,
can_like,
can_star,
is_loading,
onEdit,
onLike,
onStar
}) => {
({ node, layout, can_edit, can_like, can_star, is_loading, onEdit, onLike, onStar }) => {
const [stack, setStack] = useState(false);
const ref = useRef(null);
const getPlace = useCallback(() => {
if (!ref.current) return;
const { offsetTop } = ref.current;
const { height } = ref.current.getBoundingClientRect();
const { scrollY, innerHeight } = window;
const { bottom } = ref.current.getBoundingClientRect();
setStack(offsetTop > scrollY + innerHeight - height);
setStack(bottom > window.innerHeight);
}, [ref]);
useEffect(() => getPlace(), [layout]);
useEffect(() => {
getPlace();
window.addEventListener("scroll", getPlace);
window.addEventListener("resize", getPlace);
window.addEventListener('scroll', getPlace);
window.addEventListener('resize', getPlace);
return () => {
window.removeEventListener("scroll", getPlace);
window.removeEventListener("resize", getPlace);
window.removeEventListener('scroll', getPlace);
window.removeEventListener('resize', getPlace);
};
}, [layout]);
}, [layout, getPlace]);
return (
<div className={styles.place} ref={ref}>