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

enable pitch zoom

Browse source
This commit is contained in:
Fedor Katurov 2023-11-04 20:33:33 +06:00
parent 73225b166f
commit 2d7999d9dc
3 changed files with 153 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

25
src/components/common/ImageLoadingWrapper/index.tsx
View file

@ -1,4 +1,10 @@
import React, { CSSProperties, FC, useMemo, useReducer } from 'react';
import React, {
CSSProperties,
ReactNode,
forwardRef,
useMemo,
useReducer,
} from 'react';
import classNames from 'classnames';
@ -8,17 +14,14 @@ import { DivProps } from '~/utils/types';
import styles from './styles.module.scss';
interface ImageLoadingWrapperProps extends Omit<DivProps, 'children'> {
children: (props: { loading: boolean; onLoad: () => void }) => void;
children: (props: { loading: boolean; onLoad: () => void }) => ReactNode;
preview?: string;
}
const ImageLoadingWrapper: FC<ImageLoadingWrapperProps> = ({
className,
children,
preview,
color,
...props
}) => {
const ImageLoadingWrapper = forwardRef<
HTMLDivElement,
ImageLoadingWrapperProps
>(({ className, children, preview, color, ...props }, ref) => {
const [loading, onLoad] = useReducer(() => false, true);
const style = useMemo<CSSProperties>(
@ -30,7 +33,7 @@ const ImageLoadingWrapper: FC<ImageLoadingWrapperProps> = ({
);
return (
<div className={classNames(styles.wrapper, className)} {...props}>
<div className={classNames(styles.wrapper, className)} {...props} ref={ref}>
{!!loading && !!preview && (
<div className={styles.preview}>
<div className={styles.thumbnail} style={style} />
@ -40,6 +43,6 @@ const ImageLoadingWrapper: FC<ImageLoadingWrapperProps> = ({
{children({ loading, onLoad })}
</div>
);
};
});
export { ImageLoadingWrapper };