mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-25 12:56:41 +07:00
cleaned unused deps
This commit is contained in:
Fedor Katurov
parent
35c11fb306
commit
17048f175c
6 changed files with 9 additions and 521 deletions
|
|
@ -1,136 +0,0 @@
|
|||
import React, {
|
||||
FC, MouseEventHandler, ReactChild, useCallback, useEffect, useState
|
||||
} from 'react';
|
||||
// import { DialogPanel } from '~/components/panels/DialogPanel';
|
||||
import classNames from 'classnames';
|
||||
import { Scroll } from '~/components/containers/Scroll';
|
||||
import styles from './styles.module.scss';
|
||||
|
||||
interface IProps {
|
||||
children: React.ReactChild;
|
||||
title?: JSX.Element;
|
||||
buttons?: JSX.Element;
|
||||
size?: 'medium' | 'big';
|
||||
width?: number;
|
||||
error?: string;
|
||||
|
||||
top_sticky?: ReactChild;
|
||||
top_sticky_offset?: number;
|
||||
|
||||
onOverlayClick?: MouseEventHandler<HTMLDivElement>;
|
||||
onRefCapture?: (ref: any) => void;
|
||||
onClose?: () => void;
|
||||
}
|
||||
|
||||
const ScrollDialog: FC<IProps> = ({
|
||||
children,
|
||||
title,
|
||||
buttons,
|
||||
width = 800,
|
||||
top_sticky,
|
||||
top_sticky_offset,
|
||||
error,
|
||||
onOverlayClick,
|
||||
onRefCapture,
|
||||
onClose,
|
||||
}) => {
|
||||
const [height, setHeight] = useState(window.innerHeight - 120);
|
||||
const [show_top_sticky, setShowTopSticky] = useState(false);
|
||||
const [ref, setRef] = useState(null);
|
||||
|
||||
const onResize = useCallback(() => setHeight(window.innerHeight - 120), []);
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener('resize', onResize);
|
||||
return () => window.removeEventListener('resize', onResize);
|
||||
}, [onResize]);
|
||||
|
||||
const onScroll = useCallback(
|
||||
({ target: { scrollTop = 0 } = {} } = {}) => {
|
||||
if (!top_sticky || (!top_sticky_offset && top_sticky_offset !== 0)) return;
|
||||
|
||||
const is_shown = scrollTop >= top_sticky_offset + 20;
|
||||
|
||||
if (show_top_sticky !== is_shown) setShowTopSticky(is_shown);
|
||||
},
|
||||
[top_sticky, top_sticky_offset, show_top_sticky, setShowTopSticky]
|
||||
);
|
||||
|
||||
useEffect(() => onScroll(), [onScroll]);
|
||||
useEffect(() => {
|
||||
if (ref && onRefCapture) onRefCapture(ref);
|
||||
}, [ref, onRefCapture]);
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<div
|
||||
className={classNames(styles.content, {
|
||||
has_buttons: !!buttons,
|
||||
has_title: !!title,
|
||||
})}
|
||||
style={{ flexBasis: width }}
|
||||
>
|
||||
<div
|
||||
className={styles.overlay}
|
||||
onClick={onOverlayClick}
|
||||
style={{ cursor: onOverlayClick ? 'pointer' : '' }}
|
||||
/>
|
||||
|
||||
{!!title && (
|
||||
<div className={styles.top}>
|
||||
<div className={styles.wrap} style={{ flexBasis: width }}>
|
||||
{onClose && <div className={styles.close} onClick={onClose} />}
|
||||
|
||||
<div className={styles.pan}>
|
||||
{title}
|
||||
{show_top_sticky && top_sticky && (
|
||||
<div className={styles.top_sticky}>{top_sticky}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!title && (
|
||||
<div className={styles.top}>
|
||||
<div className={styles.wrap} style={{ flexBasis: width }}>
|
||||
{onClose && <div className={styles.close} onClick={onClose} />}
|
||||
|
||||
<div className={styles.top_cap} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!!buttons && (
|
||||
<div className={styles.bottom}>
|
||||
<div className={styles.wrap} style={{ flexBasis: width }}>
|
||||
<div className={classNames(styles.error, { active: error })}>{error}</div>
|
||||
|
||||
<div className={styles.pan}>{buttons}</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div
|
||||
className={styles.scroll_wrap}
|
||||
style={{ flexBasis: width + 40 }}
|
||||
// style={{ flexBasis: width }}
|
||||
>
|
||||
<Scroll
|
||||
className="dialog_scroll"
|
||||
autoHeightMax={height}
|
||||
autoHeight
|
||||
onScroll={onScroll}
|
||||
onRef={setRef}
|
||||
>
|
||||
<div className={styles.content_wrap}>
|
||||
<div className={styles.children}>{children}</div>
|
||||
</div>
|
||||
</Scroll>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { ScrollDialog };
|
||||
|
|
@ -1,212 +0,0 @@
|
|||
@import "src/styles/variables";
|
||||
|
||||
.container {
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
padding: 40px 0 0 0;
|
||||
box-sizing: border-box;
|
||||
flex: 1 1 800px;
|
||||
z-index: 1;
|
||||
|
||||
&:global(.has_title) {
|
||||
padding-top: 60px + 10px; // +15px
|
||||
}
|
||||
|
||||
&:global(.has_buttons) {
|
||||
padding-bottom: 60px + 10px; // +15px
|
||||
}
|
||||
}
|
||||
|
||||
.top,
|
||||
.bottom {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
bottom: auto;
|
||||
left: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 20px;
|
||||
box-sizing: border-box;
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
.top {
|
||||
height: 40px;
|
||||
top: 0;
|
||||
|
||||
&:global(.has_buttons) {
|
||||
height: 60px;
|
||||
top: 15px;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
bottom: 10px;
|
||||
top: auto;
|
||||
|
||||
.pan {
|
||||
border-radius: 0 0 $radius $radius;
|
||||
box-shadow: transparentize($color: black, $amount: 0.8) 0 8px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.wrap {
|
||||
flex: 0 1 800px;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.scroll_wrap {
|
||||
flex: 0 1 840px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.content_wrap {
|
||||
padding: 0 20px;
|
||||
margin-top: -$radius;
|
||||
}
|
||||
|
||||
.top_sticky {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding-top: $gap * 2;
|
||||
margin-top: -$gap;
|
||||
z-index: -1;
|
||||
background: transparentize(white, 0.1);
|
||||
border-radius: $radius;
|
||||
box-shadow: transparentize(black, 0.9) 0 15px 15px;
|
||||
}
|
||||
|
||||
.pan {
|
||||
background: darken($content_bg, 4%);
|
||||
max-height: 60px;
|
||||
}
|
||||
|
||||
.children {
|
||||
background: $content_bg;
|
||||
border-radius: $radius $radius 0 0;
|
||||
}
|
||||
|
||||
.top_cap {
|
||||
height: $radius;
|
||||
background: $content_bg;
|
||||
border-radius: $radius $radius 0 0;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
box-shadow: inset transparentize(white, 0.95) 0 1px;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: ' ';
|
||||
width: 100%;
|
||||
height: $radius;
|
||||
background: linear-gradient($content_bg, transparentize($content_bg, 1));
|
||||
bottom: -$gap;
|
||||
}
|
||||
}
|
||||
|
||||
.error {
|
||||
background: linear-gradient(transparentize($orange, 1), $red 90%);
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
bottom: 100%;
|
||||
left: 0;
|
||||
padding: $gap * 2 $gap;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font: $font_14_regular;
|
||||
border-radius: 0 0 $radius $radius;
|
||||
pointer-events: none;
|
||||
touch-action: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.25s;
|
||||
|
||||
&:global(.active) {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin_1 {
|
||||
0% {
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin_2 {
|
||||
0% {
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
|
||||
.close {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
cursor: pointer;
|
||||
opacity: 0.5;
|
||||
transition: opacity 0.5s, transform 0.25s;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -4px);
|
||||
}
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: ' ';
|
||||
width: 32px;
|
||||
height: 2px;
|
||||
background: white;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
animation: spin_1 0.5s forwards;
|
||||
}
|
||||
|
||||
&::before {
|
||||
animation: spin_2 0.5s forwards;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue