muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-28 14:16:41 +07:00
Code Packages Activity Actions

changed presets

Browse source
This commit is contained in:
Fedor Katurov 2019-11-14 17:57:16 +07:00
parent a0c93c480f
commit 77979bd7e9
3 changed files with 107 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,11 +1,18 @@
import React, { FC, useMemo, useState, useEffect, useRef, useCallback } from 'react';
import { ImageSwitcher } from '../ImageSwitcher';
import * as styles from './styles.scss';
import { INode } from '~/redux/types';
import classNames from 'classnames';
import { getURL } from '~/utils/dom';
import { UPLOAD_TYPES } from '~/redux/uploads/constants';
import { PRESETS } from '~/constants/urls';
import React, {
FC,
useMemo,
useState,
useEffect,
useRef,
useCallback
} from "react";
import { ImageSwitcher } from "../ImageSwitcher";
import * as styles from "./styles.scss";
import { INode } from "~/redux/types";
import classNames from "classnames";
import { getURL } from "~/utils/dom";
import { UPLOAD_TYPES } from "~/redux/uploads/constants";
import { PRESETS } from "~/constants/urls";
interface IProps {
is_loading: boolean;
@ -23,24 +30,29 @@ const NodeImageBlock: FC<IProps> = ({ node, is_loading, updateLayout }) => {
const images = useMemo(
() =>
(node && node.files && node.files.filter(({ type }) => type === UPLOAD_TYPES.IMAGE)) || [],
(node &&
node.files &&
node.files.filter(({ type }) => type === UPLOAD_TYPES.IMAGE)) ||
[],
[node]
);
const setRef = useCallback(index => el => (refs.current[index] = el), [refs]);
const onImageLoad = useCallback(index => () => setLoaded({ ...loaded, [index]: true }), [
setLoaded,
loaded,
]);
const onImageLoad = useCallback(
index => () => setLoaded({ ...loaded, [index]: true }),
[setLoaded, loaded]
);
useEffect(() => updateLayout(), [loaded]);
useEffect(() => {
if (!refs || !refs.current[current] || !loaded[current]) return setHeight(320);
if (!refs || !refs.current[current] || !loaded[current])
return setHeight(320);
const el = refs.current[current];
const element_height = el.getBoundingClientRect && el.getBoundingClientRect().height;
const element_height =
el.getBoundingClientRect && el.getBoundingClientRect().height;
setHeight(element_height);
}, [refs, current, loaded]);
@ -62,19 +74,21 @@ const NodeImageBlock: FC<IProps> = ({ node, is_loading, updateLayout }) => {
/>
<div className={styles.image_container} style={{ height }}>
{(is_loading || !loaded[0] || !images.length) && <div className={styles.placeholder} />}
{(is_loading || !loaded[0] || !images.length) && (
<div className={styles.placeholder} />
)}
{images.map((file, index) => (
<div
className={classNames(styles.image_wrap, {
is_active: index === current && loaded[index],
is_active: index === current && loaded[index]
})}
ref={setRef(index)}
key={file.id}
>
<img
className={styles.image}
src={getURL(file, PRESETS['1400'])}
src={getURL(file, PRESETS["1600"])}
alt=""
key={file.id}
onLoad={onImageLoad(index)}