mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-24 20:36:40 +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,5 +1,5 @@
|
|||
{
|
||||
"name": "vault-cra",
|
||||
"name": "vault-frontend",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
|
|
@ -26,14 +26,12 @@
|
|||
"react-router-dom": "^5.1.2",
|
||||
"react-scripts": "3.4.4",
|
||||
"react-sortable-hoc": "^1.11",
|
||||
"react-transition-group": "^4.4.1",
|
||||
"redux": "^4.0.1",
|
||||
"redux-persist": "^5.10.0",
|
||||
"redux-saga": "^1.1.1",
|
||||
"resize-sensor": "^0.0.6",
|
||||
"sticky-sidebar": "^3.3.1",
|
||||
"throttle-debounce": "^2.1.0",
|
||||
"tt-react-custom-scrollbars": "latest",
|
||||
"typescript": "^4.0.5",
|
||||
"uuid4": "^1.1.4",
|
||||
"web-vitals": "^0.2.4"
|
||||
|
|
@ -67,7 +65,6 @@
|
|||
"@types/node": "^11.13.22",
|
||||
"@types/ramda": "^0.26.33",
|
||||
"@types/react-redux": "^7.1.11",
|
||||
"@types/react-transition-group": "^4.4.0",
|
||||
"@craco/craco": "5.8.0",
|
||||
"craco-alias": "^2.1.1",
|
||||
"prettier": "^1.18.2"
|
||||
|
|
|
|||
|
|
@ -1,42 +0,0 @@
|
|||
import React, { MouseEventHandler, useEffect, useState } from 'react';
|
||||
import { Scrollbars } from 'tt-react-custom-scrollbars';
|
||||
import classNames from 'classnames';
|
||||
import styles from './styles.module.scss';
|
||||
|
||||
interface IProps {
|
||||
children: Element | React.ReactChild;
|
||||
style?: React.CSSProperties;
|
||||
className?: string;
|
||||
autoHeight?: boolean;
|
||||
autoHeightMax?: number;
|
||||
onRef?: (el: any) => void;
|
||||
onScroll?: MouseEventHandler;
|
||||
onScrollStop?: MouseEventHandler;
|
||||
}
|
||||
|
||||
const Scroll = ({ children, className = '', onRef = null, ...props }: IProps) => {
|
||||
const [ref, setRef] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (onRef && ref) return onRef(ref);
|
||||
}, [ref, onRef]);
|
||||
|
||||
return (
|
||||
<Scrollbars
|
||||
className={classNames(styles.container, className)}
|
||||
renderTrackHorizontal={data => <div className={styles.track_horizontal} {...data} />}
|
||||
renderTrackVertical={data => <div className={styles.track_vertical} {...data} />}
|
||||
renderThumbHorizontal={data => <div className={styles.thumb_horizontal} {...data} />}
|
||||
renderThumbVertical={data => <div className={styles.thumb_vertical} {...data} />}
|
||||
renderView={data => <div className={styles.view} {...data} />}
|
||||
hideTracksWhenNotNeeded
|
||||
universal
|
||||
ref={setRef}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</Scrollbars>
|
||||
);
|
||||
};
|
||||
|
||||
export { Scroll };
|
||||
|
|
@ -1,109 +0,0 @@
|
|||
@import "src/styles/variables";
|
||||
|
||||
.container {
|
||||
min-height: 50px;
|
||||
}
|
||||
|
||||
.track_vertical {
|
||||
height: 100%;
|
||||
width: 20px !important;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
opacity: $scroll_inactive_opacity;
|
||||
transition: opacity 0.25s;
|
||||
padding: $gap 0;
|
||||
box-sizing: border-box;
|
||||
z-index: 1;
|
||||
|
||||
&:hover, &:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: ' ';
|
||||
width: 1px;
|
||||
background: $scroll_color;
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
opacity: 0.5;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.thumb_vertical {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
cursor: grab;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: ' ';
|
||||
width: 5px;
|
||||
top: 0;
|
||||
left: 10px;
|
||||
height: 100%;
|
||||
border-radius: 3px;
|
||||
background: $scroll_color;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.track_horizontal {
|
||||
height: 20px !important;
|
||||
width: 100% !important;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
opacity: 0.3;
|
||||
transition: opacity 0.25s;
|
||||
padding: 0 $gap;
|
||||
box-sizing: border-box;
|
||||
z-index: 10;
|
||||
|
||||
&:hover, &:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: ' ';
|
||||
height: 1px;
|
||||
background: $scroll_color;
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
opacity: 0.5;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.thumb_horizontal {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
cursor: grab;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: ' ';
|
||||
height: 5px;
|
||||
top: 10px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
border-radius: 3px;
|
||||
background: $scroll_color;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -5,7 +5,6 @@ import { NodeLayout } from '~/containers/node/NodeLayout';
|
|||
import { BorisLayout } from '~/containers/node/BorisLayout';
|
||||
import { ErrorNotFound } from '~/containers/pages/ErrorNotFound';
|
||||
import { ProfilePage } from '~/containers/profile/ProfilePage';
|
||||
import { CSSTransition, TransitionGroup } from 'react-transition-group';
|
||||
import { Redirect, Route, Switch, useLocation } from 'react-router';
|
||||
|
||||
interface IProps {}
|
||||
|
|
@ -14,11 +13,6 @@ const MainRouter: FC<IProps> = () => {
|
|||
const location = useLocation();
|
||||
|
||||
return (
|
||||
<TransitionGroup>
|
||||
{
|
||||
// disabled for scroll restoration
|
||||
// <CSSTransition key={location.key} classNames="fade" timeout={500}>
|
||||
}
|
||||
<Switch location={location}>
|
||||
<Route exact path={URLS.BASE} component={FlowLayout} />
|
||||
<Route path={URLS.NODE_URL(':id')} component={NodeLayout} />
|
||||
|
|
@ -28,10 +22,6 @@ const MainRouter: FC<IProps> = () => {
|
|||
|
||||
<Redirect to="/" />
|
||||
</Switch>
|
||||
{
|
||||
// </CSSTransition>
|
||||
}
|
||||
</TransitionGroup>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue