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

paragraphs at cell text

Browse source
This commit is contained in:
Fedor Katurov 2019-12-02 17:00:05 +07:00
parent bde79a8364
commit 4c84e24210
2 changed files with 32 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,22 +1,22 @@
import React, { FC, useState, useCallback, useEffect, useRef } from "react"; import React, { FC, useState, useCallback, useEffect, useRef } from 'react';
import { INode } from "~/redux/types"; import { INode } from '~/redux/types';
import { getURL, formatCellText } from "~/utils/dom"; import { getURL, formatCellText } from '~/utils/dom';
import classNames from "classnames"; import classNames from 'classnames';
import * as styles from "./styles.scss"; import * as styles from './styles.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 { 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';
interface IProps { interface IProps {
node: INode; node: INode;
is_text?: boolean; is_text?: boolean;
can_edit?: boolean; can_edit?: boolean;
onSelect: (id: INode["id"], type: INode["type"]) => void; onSelect: (id: INode['id'], type: INode['type']) => void;
onChangeCellView: typeof flowSetCellView; onChangeCellView: typeof flowSetCellView;
} }
@ -24,7 +24,7 @@ const Cell: FC<IProps> = ({
node: { id, title, thumbnail, type, flow, description }, node: { id, title, thumbnail, type, flow, description },
can_edit, can_edit,
onSelect, onSelect,
onChangeCellView onChangeCellView,
}) => { }) => {
const ref = useRef(null); const ref = useRef(null);
const [is_loaded, setIsLoaded] = useState(false); const [is_loaded, setIsLoaded] = useState(false);
@ -35,16 +35,14 @@ const Cell: FC<IProps> = ({
const { top, height } = ref.current.getBoundingClientRect(); const { top, height } = ref.current.getBoundingClientRect();
const visibility = const visibility = top + height > -window.innerHeight && top < window.innerHeight * 2;
top + height > -window.innerHeight && top < window.innerHeight * 2;
if (visibility !== is_visible) setIsVisible(visibility); if (visibility !== is_visible) setIsVisible(visibility);
}, [ref, is_visible, setIsVisible]); }, [ref, is_visible, setIsVisible]);
const checkIfVisibleDebounced = useCallback( const checkIfVisibleDebounced = useCallback(debounce(Math.random() * 200, checkIfVisible), [
debounce(Math.random() * 200, checkIfVisible), checkIfVisible,
[checkIfVisible] ]);
);
useEffect(() => { useEffect(() => {
checkIfVisible(); checkIfVisible();
@ -52,13 +50,13 @@ const Cell: FC<IProps> = ({
useEffect(() => { useEffect(() => {
// recalc visibility of other elements // recalc visibility of other elements
window.dispatchEvent(new CustomEvent("scroll")); window.dispatchEvent(new CustomEvent('scroll'));
}, [flow]); }, [flow]);
useEffect(() => { useEffect(() => {
window.addEventListener("scroll", checkIfVisibleDebounced); window.addEventListener('scroll', checkIfVisibleDebounced);
return () => window.removeEventListener("scroll", checkIfVisibleDebounced); return () => window.removeEventListener('scroll', checkIfVisibleDebounced);
}, [checkIfVisibleDebounced]); }, [checkIfVisibleDebounced]);
const onImageLoad = useCallback(() => { const onImageLoad = useCallback(() => {
@ -75,38 +73,32 @@ const Cell: FC<IProps> = ({
const toggleViewDescription = useCallback(() => { const toggleViewDescription = useCallback(() => {
const show_description = !(flow && flow.show_description); const show_description = !(flow && flow.show_description);
const display = (flow && flow.display) || "single"; const display = (flow && flow.display) || 'single';
onChangeCellView(id, { show_description, display }); onChangeCellView(id, { show_description, display });
}, [id, flow, onChangeCellView]); }, [id, flow, onChangeCellView]);
const setViewSingle = useCallback(() => { const setViewSingle = useCallback(() => {
const show_description = (flow && !!flow.show_description) || false; const show_description = (flow && !!flow.show_description) || false;
onChangeCellView(id, { show_description, display: "single" }); onChangeCellView(id, { show_description, display: 'single' });
}, [id, flow, onChangeCellView]); }, [id, flow, onChangeCellView]);
const setViewHorizontal = useCallback(() => { const setViewHorizontal = useCallback(() => {
const show_description = (flow && !!flow.show_description) || false; const show_description = (flow && !!flow.show_description) || false;
onChangeCellView(id, { show_description, display: "horizontal" }); onChangeCellView(id, { show_description, display: 'horizontal' });
}, [id, flow, onChangeCellView]); }, [id, flow, onChangeCellView]);
const setViewVertical = useCallback(() => { const setViewVertical = useCallback(() => {
const show_description = (flow && !!flow.show_description) || false; const show_description = (flow && !!flow.show_description) || false;
onChangeCellView(id, { show_description, display: "vertical" }); onChangeCellView(id, { show_description, display: 'vertical' });
}, [id, flow, onChangeCellView]); }, [id, flow, onChangeCellView]);
const setViewQuadro = useCallback(() => { const setViewQuadro = useCallback(() => {
const show_description = (flow && !!flow.show_description) || false; const show_description = (flow && !!flow.show_description) || false;
onChangeCellView(id, { show_description, display: "quadro" }); onChangeCellView(id, { show_description, display: 'quadro' });
}, [id, flow, onChangeCellView]); }, [id, flow, onChangeCellView]);
return ( return (
<div <div className={classNames(styles.cell, styles[(flow && flow.display) || 'single'])} ref={ref}>
className={classNames(
styles.cell,
styles[(flow && flow.display) || "single"]
)}
ref={ref}
>
{is_visible && ( {is_visible && (
<> <>
{can_edit && ( {can_edit && (
@ -136,9 +128,7 @@ const Cell: FC<IProps> = ({
<div className={styles.text}> <div className={styles.text}>
{title && <div className={styles.text_title}>{title}</div>} {title && <div className={styles.text_title}>{title}</div>}
<Group <Group dangerouslySetInnerHTML={{ __html: formatCellText(text) }} />
dangerouslySetInnerHTML={{ __html: formatCellText(text) }}
/>
</div> </div>
)} )}
@ -146,9 +136,7 @@ const Cell: FC<IProps> = ({
<div className={styles.text_only}> <div className={styles.text_only}>
{title && <div className={styles.text_title}>{title}</div>} {title && <div className={styles.text_title}>{title}</div>}
<Group <Group dangerouslySetInnerHTML={{ __html: formatCellText(text) }} />
dangerouslySetInnerHTML={{ __html: formatCellText(text) }}
/>
</div> </div>
)} )}
</div> </div>
@ -158,18 +146,11 @@ const Cell: FC<IProps> = ({
<div <div
className={styles.thumbnail} className={styles.thumbnail}
style={{ style={{
backgroundImage: `url("${getURL( backgroundImage: `url("${getURL({ url: thumbnail }, PRESETS.cover)}")`,
{ url: thumbnail }, opacity: is_loaded ? 1 : 0,
PRESETS.cover
)}")`,
opacity: is_loaded ? 1 : 0
}} }}
> >
<img <img src={getURL({ url: thumbnail })} onLoad={onImageLoad} alt="" />
src={getURL({ url: thumbnail })}
onLoad={onImageLoad}
alt=""
/>
</div> </div>
)} )}
</> </>

2
src/utils/dom.ts
View file

@ -122,7 +122,7 @@ export const splitCommentByBlocks = (text: string): ICommentBlock[] =>
export const formatCommentText = (author: string, text: string): ICommentBlock[] => export const formatCommentText = (author: string, text: string): ICommentBlock[] =>
text ? splitCommentByBlocks(formatText(text)) : null; text ? splitCommentByBlocks(formatText(text)) : null;
export const formatCellText = (text: string): string => formatText(text); export const formatCellText = (text: string): string => formatTextParagraphs(formatText(text));
export const getPrettyDate = (date: string): string => { export const getPrettyDate = (date: string): string => {
if (differenceInMonths(new Date(), new Date(date)) >= 3) { if (differenceInMonths(new Date(), new Date(date)) >= 3) {