diff --git a/package.json b/package.json index a37f66be..ed843287 100644 --- a/package.json +++ b/package.json @@ -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" diff --git a/src/components/containers/Scroll/index.tsx b/src/components/containers/Scroll/index.tsx deleted file mode 100644 index ce5c4e74..00000000 --- a/src/components/containers/Scroll/index.tsx +++ /dev/null @@ -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 ( -
} - renderTrackVertical={data =>
} - renderThumbHorizontal={data =>
} - renderThumbVertical={data =>
} - renderView={data =>
} - hideTracksWhenNotNeeded - universal - ref={setRef} - {...props} - > - {children} - - ); -}; - -export { Scroll }; diff --git a/src/components/containers/Scroll/styles.module.scss b/src/components/containers/Scroll/styles.module.scss deleted file mode 100644 index 16f92eec..00000000 --- a/src/components/containers/Scroll/styles.module.scss +++ /dev/null @@ -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; - } -} diff --git a/src/containers/dialogs/ScrollDialog/index.tsx b/src/containers/dialogs/ScrollDialog/index.tsx deleted file mode 100644 index d045aa1c..00000000 --- a/src/containers/dialogs/ScrollDialog/index.tsx +++ /dev/null @@ -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; - onRefCapture?: (ref: any) => void; - onClose?: () => void; -} - -const ScrollDialog: FC = ({ - 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 ( -
-
-
- - {!!title && ( -
-
- {onClose &&
} - -
- {title} - {show_top_sticky && top_sticky && ( -
{top_sticky}
- )} -
-
-
- )} - - {!title && ( -
-
- {onClose &&
} - -
-
-
- )} - - {!!buttons && ( -
-
-
{error}
- -
{buttons}
-
-
- )} - -
- -
-
{children}
-
- -
-
-
- ); -}; - -export { ScrollDialog }; diff --git a/src/containers/dialogs/ScrollDialog/styles.module.scss b/src/containers/dialogs/ScrollDialog/styles.module.scss deleted file mode 100644 index fed7926f..00000000 --- a/src/containers/dialogs/ScrollDialog/styles.module.scss +++ /dev/null @@ -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; - } -} diff --git a/src/containers/main/MainRouter/index.tsx b/src/containers/main/MainRouter/index.tsx index c0098b21..bed1579a 100644 --- a/src/containers/main/MainRouter/index.tsx +++ b/src/containers/main/MainRouter/index.tsx @@ -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,24 +13,15 @@ const MainRouter: FC = () => { const location = useLocation(); return ( - - { - // disabled for scroll restoration - // - } - - - - - - + + + + + + - - - { - // - } - + + ); };