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

setting image loaded status

Browse source
This commit is contained in:
muerwre 2019-08-25 17:43:07 +07:00
parent 1299a0e766
commit e1a9dd66fc
3 changed files with 20 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -24,8 +24,8 @@ interface IProps {
const NodeImageBlock: FC<IProps> = ({ node, is_loading }) => { const NodeImageBlock: FC<IProps> = ({ node, is_loading }) => {
const [current, setCurrent] = useState(0); const [current, setCurrent] = useState(0);
const [height, setHeight] = useState(0); const [height, setHeight] = useState(0);
const refs = useRef<HTMLDivElement[]>([]); const [loaded, setLoaded] = useState<Record<number, boolean>>({});
// const [refs, setRefs] = useState<Record<number, HTMLDivElement | RefObject<any>>>({}); const refs = useRef<Record<number, HTMLDivElement>>({});
const images = useMemo( const images = useMemo(
() => () =>
@ -33,16 +33,13 @@ const NodeImageBlock: FC<IProps> = ({ node, is_loading }) => {
[node] [node]
); );
const setRef = useCallback( const setRef = useCallback(index => el => (refs.current[index] = el), [refs]);
index => el => { const onImageLoad = useCallback(index => () => setLoaded({ ...loaded, [index]: true }), [
refs.current[index] = el; setLoaded,
}, loaded,
[refs] ]);
);
useEffect(() => { useEffect(() => {
console.log({ refs });
if (!refs || !refs.current[current]) return; if (!refs || !refs.current[current]) return;
const el = refs.current[current]; const el = refs.current[current];
@ -50,7 +47,7 @@ const NodeImageBlock: FC<IProps> = ({ node, is_loading }) => {
const element_height = el.getBoundingClientRect && el.getBoundingClientRect().height; const element_height = el.getBoundingClientRect && el.getBoundingClientRect().height;
setHeight(element_height); setHeight(element_height);
}, [refs, current]); }, [refs, current, loaded]);
return ( return (
<div className={classNames(styles.wrap, { is_loading })}> <div className={classNames(styles.wrap, { is_loading })}>
@ -61,7 +58,9 @@ const NodeImageBlock: FC<IProps> = ({ node, is_loading }) => {
<div className={styles.image_container} style={{ height }}> <div className={styles.image_container} style={{ height }}>
{images.map((file, index) => ( {images.map((file, index) => (
<div <div
className={classNames(styles.image_wrap, { is_active: index === current })} className={classNames(styles.image_wrap, {
is_active: index === current && loaded[index],
})}
ref={setRef(index)} ref={setRef(index)}
key={file.id} key={file.id}
> >
@ -70,6 +69,7 @@ const NodeImageBlock: FC<IProps> = ({ node, is_loading }) => {
src={getImageSize(file.url, 'node')} src={getImageSize(file.url, 'node')}
alt="" alt=""
key={file.id} key={file.id}
onLoad={onImageLoad(index)}
/> />
</div> </div>
))} ))}

8
src/components/node/NodeImageBlock/styles.scss
View file

@ -8,11 +8,12 @@
position: relative; position: relative;
overflow: hidden; overflow: hidden;
transition: height 0.5s; transition: height 0.5s;
user-select: none;
.image { .image {
max-height: 800px; max-height: 960px;
max-width: 100%;
opacity: 1; opacity: 1;
width: 100%;
border-radius: $radius $radius 0 0; border-radius: $radius $radius 0 0;
} }
} }
@ -27,6 +28,9 @@
touch-action: none; touch-action: none;
z-index: 1; z-index: 1;
transition: opacity 0.5s; transition: opacity 0.5s;
display: flex;
align-items: center;
justify-content: center;
&:global(.is_active) { &:global(.is_active) {
opacity: 1; opacity: 1;

4
src/styles/colors.scss
View file

@ -2,7 +2,7 @@ $red: #ff3344;
$yellow: #ffd60f; $yellow: #ffd60f;
$dark_blue: #3c75ff; $dark_blue: #3c75ff;
$blue: #3ca1ff; $blue: #3ca1ff;
$green: #00d2b9; $green: #00d2b9;
//$green: #00503c; //$green: #00503c;
$olive: #8bc12a; $olive: #8bc12a;
$orange: #ff7549; $orange: #ff7549;
@ -35,7 +35,7 @@ $button_bg_color: $red_gradient;
$comment_bg: lighten($main_bg_color, 0%); $comment_bg: lighten($main_bg_color, 0%);
$panel_bg: transparent; $panel_bg: transparent;
$node_bg: darken($content_bg, 4%); $node_bg: darken($content_bg, 4%);
$node_image_bg: lighten($main_bg_color, 4%); $node_image_bg: darken($main_bg_color, 2%);
$node_title_background: darken($main_bg_color, 8%); $node_title_background: darken($main_bg_color, 8%);
$editor_bg: $content_bg; $editor_bg: $content_bg;