muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 12:56:41 +07:00
Code Packages Activity Actions

cleaned unused deps

Browse source
This commit is contained in:
Fedor Katurov 2020-11-19 18:20:04 +07:00
parent 35c11fb306
commit 17048f175c
6 changed files with 9 additions and 521 deletions
Download patch file Download diff file Expand all files Collapse all files

42
src/components/containers/Scroll/index.tsx
View file

@ -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 };

109
src/components/containers/Scroll/styles.module.scss
View file

@ -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;
}
}