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

finished slider

Browse source
This commit is contained in:
Fedor Katurov 2019-10-17 12:55:27 +07:00
parent 4236ef9824
commit a37bc76965
2 changed files with 22 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

41
src/components/node/NodeImageSlideBlock/index.tsx
View file

@ -27,7 +27,7 @@ interface IProps {
const getX = event => (event.touches ? event.touches[0].clientX : event.clientX); const getX = event => (event.touches ? event.touches[0].clientX : event.clientX);
const NodeImageSlideBlock: FC<IProps> = ({ node, is_loading, updateLayout }) => { const NodeImageSlideBlock: FC<IProps> = ({ node, is_loading, updateLayout }) => {
const [is_animated, setIsAnimated] = useState(false); // const [is_animated, setIsAnimated] = useState(false);
const [current, setCurrent] = useState(0); const [current, setCurrent] = useState(0);
const [height, setHeight] = useState(320); const [height, setHeight] = useState(320);
const [loaded, setLoaded] = useState<Record<number, boolean>>({}); const [loaded, setLoaded] = useState<Record<number, boolean>>({});
@ -72,19 +72,9 @@ const NodeImageSlideBlock: FC<IProps> = ({ node, is_loading, updateLayout }) =>
]); ]);
// update outside hooks // update outside hooks
useEffect(() => updateLayout(), [loaded]); useEffect(() => updateLayout(), [loaded, height]);
useEffect(() => { useEffect(() => updateSizes(), [refs, current, loaded]);
updateSizes();
//
// if (!refs || !refs.current[current] || !loaded[current]) return setHeight(320);
//
// const el = refs.current[current];
//
// const element_height = el.getBoundingClientRect && el.getBoundingClientRect().height;
//
// setHeight(element_height);
}, [refs, current, loaded]);
useEffect(() => { useEffect(() => {
if (!wrap || !wrap.current) return; if (!wrap || !wrap.current) return;
@ -95,15 +85,11 @@ const NodeImageSlideBlock: FC<IProps> = ({ node, is_loading, updateLayout }) =>
const next = Math.max(heights[Math.ceil(selected)] || 320, 320); const next = Math.max(heights[Math.ceil(selected)] || 320, 320);
const now = prev - (prev - next) * (selected % 1); const now = prev - (prev - next) * (selected % 1);
if (current !== Math.round(selected)) setCurrent(Math.round(selected));
setHeight(now); setHeight(now);
}, [offset, heights]); }, [offset, heights]);
// useEffect(() => {
// const timer = setTimeout(() => setIsAnimated(true), 250);
//
// return () => clearTimeout(timer);
// }, []);
const onDrag = useCallback( const onDrag = useCallback(
event => { event => {
if ( if (
@ -162,8 +148,23 @@ const NodeImageSlideBlock: FC<IProps> = ({ node, is_loading, updateLayout }) =>
}; };
}, [onDrag, stopDragging]); }, [onDrag, stopDragging]);
const changeCurrent = useCallback(
(item: number) => {
const { width } = wrap.current.getBoundingClientRect();
setOffset(-1 * item * width);
},
[wrap]
);
return ( return (
<div className={classNames(styles.wrap, { is_loading, is_animated })} ref={wrap}> <div className={classNames(styles.wrap, { is_loading })} ref={wrap}>
<ImageSwitcher
total={images.length}
current={current}
onChange={changeCurrent}
loaded={loaded}
/>
<div <div
className={styles.image_container} className={styles.image_container}
style={{ style={{

11
src/components/node/NodeImageSlideBlock/styles.scss
View file

@ -3,16 +3,7 @@
position: relative; position: relative;
min-width: 0; min-width: 0;
width: 100%; width: 100%;
transition: height 0.25s;
&:global(.is_animated) {
.image_container {
transition: height 0.5s;
}
.image_wrap {
transition: opacity 0.5s;
}
}
} }
.image_container { .image_container {