From 4c84e2421057eb931021d11ff74e0c07391b43a3 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Mon, 2 Dec 2019 17:00:05 +0700
Subject: [PATCH] paragraphs at cell text
---
src/components/flow/Cell/index.tsx | 81 ++++++++++++------------------
src/utils/dom.ts | 2 +-
2 files changed, 32 insertions(+), 51 deletions(-)
diff --git a/src/components/flow/Cell/index.tsx b/src/components/flow/Cell/index.tsx
index 71454949..b3ee8664 100644
--- a/src/components/flow/Cell/index.tsx
+++ b/src/components/flow/Cell/index.tsx
@@ -1,22 +1,22 @@
-import React, { FC, useState, useCallback, useEffect, useRef } from "react";
-import { INode } from "~/redux/types";
-import { getURL, formatCellText } from "~/utils/dom";
-import classNames from "classnames";
+import React, { FC, useState, useCallback, useEffect, useRef } from 'react';
+import { INode } from '~/redux/types';
+import { getURL, formatCellText } from '~/utils/dom';
+import classNames from 'classnames';
-import * as styles from "./styles.scss";
-import { Icon } from "~/components/input/Icon";
-import { flowSetCellView } from "~/redux/flow/actions";
-import { PRESETS } from "~/constants/urls";
-import { debounce } from "throttle-debounce";
-import { NODE_TYPES } from "~/redux/node/constants";
-import { Group } from "~/components/containers/Group";
+import * as styles from './styles.scss';
+import { Icon } from '~/components/input/Icon';
+import { flowSetCellView } from '~/redux/flow/actions';
+import { PRESETS } from '~/constants/urls';
+import { debounce } from 'throttle-debounce';
+import { NODE_TYPES } from '~/redux/node/constants';
+import { Group } from '~/components/containers/Group';
interface IProps {
node: INode;
is_text?: boolean;
can_edit?: boolean;
- onSelect: (id: INode["id"], type: INode["type"]) => void;
+ onSelect: (id: INode['id'], type: INode['type']) => void;
onChangeCellView: typeof flowSetCellView;
}
@@ -24,7 +24,7 @@ const Cell: FC<IProps> = ({
node: { id, title, thumbnail, type, flow, description },
can_edit,
onSelect,
- onChangeCellView
+ onChangeCellView,
}) => {
const ref = useRef(null);
const [is_loaded, setIsLoaded] = useState(false);
@@ -35,16 +35,14 @@ const Cell: FC<IProps> = ({
const { top, height } = ref.current.getBoundingClientRect();
- const visibility =
- top + height > -window.innerHeight && top < window.innerHeight * 2;
+ const visibility = top + height > -window.innerHeight && top < window.innerHeight * 2;
if (visibility !== is_visible) setIsVisible(visibility);
}, [ref, is_visible, setIsVisible]);
- const checkIfVisibleDebounced = useCallback(
- debounce(Math.random() * 200, checkIfVisible),
- [checkIfVisible]
- );
+ const checkIfVisibleDebounced = useCallback(debounce(Math.random() * 200, checkIfVisible), [
+ checkIfVisible,
+ ]);
useEffect(() => {
checkIfVisible();
@@ -52,13 +50,13 @@ const Cell: FC<IProps> = ({
useEffect(() => {
// recalc visibility of other elements
- window.dispatchEvent(new CustomEvent("scroll"));
+ window.dispatchEvent(new CustomEvent('scroll'));
}, [flow]);
useEffect(() => {
- window.addEventListener("scroll", checkIfVisibleDebounced);
+ window.addEventListener('scroll', checkIfVisibleDebounced);
- return () => window.removeEventListener("scroll", checkIfVisibleDebounced);
+ return () => window.removeEventListener('scroll', checkIfVisibleDebounced);
}, [checkIfVisibleDebounced]);
const onImageLoad = useCallback(() => {
@@ -75,38 +73,32 @@ const Cell: FC<IProps> = ({
const toggleViewDescription = useCallback(() => {
const show_description = !(flow && flow.show_description);
- const display = (flow && flow.display) || "single";
+ const display = (flow && flow.display) || 'single';
onChangeCellView(id, { show_description, display });
}, [id, flow, onChangeCellView]);
const setViewSingle = useCallback(() => {
const show_description = (flow && !!flow.show_description) || false;
- onChangeCellView(id, { show_description, display: "single" });
+ onChangeCellView(id, { show_description, display: 'single' });
}, [id, flow, onChangeCellView]);
const setViewHorizontal = useCallback(() => {
const show_description = (flow && !!flow.show_description) || false;
- onChangeCellView(id, { show_description, display: "horizontal" });
+ onChangeCellView(id, { show_description, display: 'horizontal' });
}, [id, flow, onChangeCellView]);
const setViewVertical = useCallback(() => {
const show_description = (flow && !!flow.show_description) || false;
- onChangeCellView(id, { show_description, display: "vertical" });
+ onChangeCellView(id, { show_description, display: 'vertical' });
}, [id, flow, onChangeCellView]);
const setViewQuadro = useCallback(() => {
const show_description = (flow && !!flow.show_description) || false;
- onChangeCellView(id, { show_description, display: "quadro" });
+ onChangeCellView(id, { show_description, display: 'quadro' });
}, [id, flow, onChangeCellView]);
return (
- <div
- className={classNames(
- styles.cell,
- styles[(flow && flow.display) || "single"]
- )}
- ref={ref}
- >
+ <div className={classNames(styles.cell, styles[(flow && flow.display) || 'single'])} ref={ref}>
{is_visible && (
<>
{can_edit && (
@@ -136,9 +128,7 @@ const Cell: FC<IProps> = ({
<div className={styles.text}>
{title && <div className={styles.text_title}>{title}</div>}
- <Group
- dangerouslySetInnerHTML={{ __html: formatCellText(text) }}
- />
+ <Group dangerouslySetInnerHTML={{ __html: formatCellText(text) }} />
</div>
)}
@@ -146,9 +136,7 @@ const Cell: FC<IProps> = ({
<div className={styles.text_only}>
{title && <div className={styles.text_title}>{title}</div>}
- <Group
- dangerouslySetInnerHTML={{ __html: formatCellText(text) }}
- />
+ <Group dangerouslySetInnerHTML={{ __html: formatCellText(text) }} />
</div>
)}
</div>
@@ -158,18 +146,11 @@ const Cell: FC<IProps> = ({
<div
className={styles.thumbnail}
style={{
- backgroundImage: `url("${getURL(
- { url: thumbnail },
- PRESETS.cover
- )}")`,
- opacity: is_loaded ? 1 : 0
+ backgroundImage: `url("${getURL({ url: thumbnail }, PRESETS.cover)}")`,
+ opacity: is_loaded ? 1 : 0,
}}
>
- <img
- src={getURL({ url: thumbnail })}
- onLoad={onImageLoad}
- alt=""
- />
+ <img src={getURL({ url: thumbnail })} onLoad={onImageLoad} alt="" />
</div>
)}
</>
diff --git a/src/utils/dom.ts b/src/utils/dom.ts
index cc866b6b..6dc5c09d 100644
--- a/src/utils/dom.ts
+++ b/src/utils/dom.ts
@@ -122,7 +122,7 @@ export const splitCommentByBlocks = (text: string): ICommentBlock[] =>
export const formatCommentText = (author: string, text: string): ICommentBlock[] =>
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 => {
if (differenceInMonths(new Date(), new Date(date)) >= 3) {