IlyaSobolev/DocSpace-buildtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web: Components: Change scrollbar (part 1)

Browse Source
This commit is contained in:
Aleksandr Lushkin 2023-07-20 16:53:59 +02:00
parent 08f1149e66
commit 236a1d5221
4 changed files with 49 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
packages/components/scrollbar/customScrollbar.js
View File

@ -1,23 +0,0 @@
import React from "react";
import StyledScrollbar from "./styled-customScrollbar";
import { useTheme } from "styled-components";
const CustomScrollbars = React.forwardRef(
({ className, id, ...props }, ref) => {
const theme = useTheme();
return (
<StyledScrollbar className={className} {...props} id={id}>
<div
className={`container scroll-body ${props.scrollclass}`}
{...props}
style={{ overflow: "scroll", direction: theme.interfaceDirection }}
ref={ref}
>
{props.children}
</div>
</StyledScrollbar>
);
}
);
export default CustomScrollbars;

45
packages/components/scrollbar/index.js
View File

@ -2,9 +2,14 @@ import React from "react";
import PropTypes from "prop-types";
import { isMobile } from "@docspace/components/utils/device";
import CustomScrollbars from "./customScrollbar";
import { classNames } from "../utils/classNames";
import StyledScrollbar from "./styled-scrollbar";
import { useTheme } from "styled-components";
const Scrollbar = React.forwardRef((props, ref) => {
const Scrollbar = React.forwardRef(({ id, ...props }, ref) => {
const { interfaceDirection } = useTheme();
const isRtl = interfaceDirection === "rtl";
const viewPaddingKey = isRtl ? "paddingLeft" : "paddingRight";
const scrollbarType = {
smallWhite: {
thumbV: {
@ -42,7 +47,7 @@ const Scrollbar = React.forwardRef((props, ref) => {
borderRadius: "inherit",
},
view: {
paddingRight: isMobile() ? "8px" : "17px",
[viewPaddingKey]: isMobile() ? "8px" : "17px",
outline: "none",
WebkitOverflowScrolling: "auto",
},
@ -61,12 +66,44 @@ const Scrollbar = React.forwardRef((props, ref) => {
view: { outline: "none", WebkitOverflowScrolling: "auto" },
},
};
const stype = scrollbarType[props.stype];
const thumbV = stype ? stype.thumbV : {};
const thumbH = stype ? stype.thumbH : {};
const view = stype ? stype.view : {};
return (
<CustomScrollbars thumbh={thumbH} thumbv={thumbV} {...props} ref={ref} />
<StyledScrollbar
disableTracksWidthCompensation
rtl={isRtl}
ref={ref}
{...props}
scrollerProps={{ id }}
contentProps={{
style: view,
tabIndex: -1,
className: classNames("scroll-body", props.scrollclass),
}}
thumbYProps={{
className: "nav-thumb-vertical",
style: thumbV,
}}
thumbXProps={{
className: "nav-thumb-horizontal",
style: thumbH,
}}
trackYProps={{
style: { width: thumbV.width, background: "transparent" },
}}
trackXProps={{
style: {
height: thumbH.height,
background: "transparent",
direction: "ltr",
},
}}
/>
);
});

76
packages/components/scrollbar/styled-customScrollbar.js
View File

@ -1,76 +0,0 @@
import styled, { css } from "styled-components";
import Base from "../themes/base";
const StyledScrollbar = styled.div`
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
.container {
position: absolute;
inset: 0;
width: ${(props) => props.width && props.width + "px"};
height: ${(props) => props.height && props.height + "px"};
overflow: scroll;
box-sizing: border-box;
scrollbar-face-color: ${(props) =>
props.theme.scrollbar.hoverBackgroundColorVertical};
scrollbar-track-color: ${(props) =>
props.color
? props.color
: props.theme.scrollbar.backgroundColorVertical};
scrollbar-color: ${(props) =>
props.theme.scrollbar.hoverBackgroundColorVertical}
transparent;
scrollbar-width: thin;
}
.container::-webkit-scrollbar-corner {
background: transparent;
}
.container::-webkit-scrollbar {
width: ${(props) => props.thumbv?.width};
height: ${(props) => props.thumbh?.height};
${(props) =>
props.vertical &&
css`
height: 0;
`}
${(props) =>
props.horizontal &&
css`
width: 0;
`}
}
.container::-webkit-scrollbar-track {
background: transparent;
border-radius: inherit;
}
.container::-webkit-scrollbar-thumb {
background: ${(props) =>
props.color
? props.color
: props.theme.scrollbar.backgroundColorVertical};
border-radius: inherit;
}
.container::-webkit-scrollbar-thumb:hover {
background: ${(props) =>
props.theme.scrollbar.hoverBackgroundColorVertical};
border-radius: inherit;
}
.container::-webkit-scrollbar-thumb:active {
background: ${(props) =>
props.theme.scrollbar.hoverBackgroundColorVertical};
border-radius: inherit;
}
`;
StyledScrollbar.defaultProps = {
theme: Base,
};
export default StyledScrollbar;

14
packages/components/scrollbar/styled-scrollbar.js
View File

@ -1,26 +1,28 @@
import { Scrollbars } from "react-custom-scrollbars";
import Scrollbar from "react-scrollbars-custom";
import styled from "styled-components";
import Base from "../themes/base";
const StyledScrollbar = styled(Scrollbars)`
const StyledScrollbar = styled(Scrollbar)`
.nav-thumb-vertical {
background-color: ${(props) =>
props.color
? props.color
: props.theme.scrollbar.backgroundColorVertical};
: props.theme.scrollbar.backgroundColorVertical} !important;
z-index: 201;
position: relative;
:hover,
:active {
:active,
&.dragging {
background-color: ${(props) =>
props.theme.scrollbar.hoverBackgroundColorVertical};
props.theme.scrollbar.hoverBackgroundColorVertical} !important;
}
}
.nav-thumb-horizontal {
background-color: ${(props) =>
props.color
? props.color
: props.theme.scrollbar.backgroundColorHorizontal};
: props.theme.scrollbar.backgroundColorHorizontal} !important;
}
`;