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

better flow images for horizontal cells

Browse source
This commit is contained in:
Fedor Katurov 2020-04-08 14:41:28 +07:00
parent 4ebeed76aa
commit 0f3ac203f7
1 changed files with 12 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import React, { FC, useState, useCallback, useEffect, useRef } from 'react'; import React, { FC, useState, useCallback, useEffect, useRef, useMemo } 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';
@ -11,6 +11,10 @@ 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';
const THUMBNAIL_SIZES = {
horizontal: PRESETS.small_hero,
default: PRESETS.cover,
};
interface IProps { interface IProps {
node: INode; node: INode;
is_text?: boolean; is_text?: boolean;
@ -97,6 +101,11 @@ const Cell: FC<IProps> = ({
onChangeCellView(id, { show_description, display: 'quadro' }); onChangeCellView(id, { show_description, display: 'quadro' });
}, [id, flow, onChangeCellView]); }, [id, flow, onChangeCellView]);
const thumb = useMemo(() => {
const preset = THUMBNAIL_SIZES[flow.display] || THUMBNAIL_SIZES.default;
return getURL({ url: thumbnail }, preset);
}, [thumbnail, flow.display]);
return ( 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 && ( {is_visible && (
@ -146,11 +155,11 @@ const Cell: FC<IProps> = ({
<div <div
className={styles.thumbnail} className={styles.thumbnail}
style={{ style={{
backgroundImage: `url("${getURL({ url: thumbnail }, PRESETS.cover)}")`, backgroundImage: `url("${thumb}")`,
opacity: is_loaded ? 1 : 0, opacity: is_loaded ? 1 : 0,
}} }}
> >
<img src={getURL({ url: thumbnail }, PRESETS.cover)} onLoad={onImageLoad} alt="" /> <img src={thumb} onLoad={onImageLoad} alt="" />
</div> </div>
)} )}
</> </>