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

Merge branch 'develop' into feature/my-documents-share

Browse Source
This commit is contained in:
Alexey Safronov 2023-12-14 14:35:47 +04:00
commit d6411111d3
31 changed files with 157 additions and 201 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/client/src/components/Layout/MobileLayout.js
View File

@ -132,7 +132,7 @@ class MobileLayout extends Component {
const { children } = this.props;
return (
<Scrollbar id="customScrollBar" {...scrollProp} stype="mediumBlack">
<Scrollbar id="customScrollBar" {...scrollProp}>
<LayoutContextProvider
value={{
scrollRefLayout: this.scrollRefPage,

2
packages/client/src/components/NavMenu/sub-components/nav.js
View File

@ -64,7 +64,7 @@ const Nav = React.memo((props) => {
onMouseLeave={onMouseLeave}
numberOfModules={numberOfModules}
>
<StyledScrollbar stype="smallWhite">{children}</StyledScrollbar>
<StyledScrollbar>{children}</StyledScrollbar>
</StyledNav>
);
});

2
packages/client/src/components/panels/EmbeddingPanel/index.js
View File

@ -55,7 +55,7 @@ const EmbeddingPanelComponent = (props) => {
{t("Files:EmbeddingSettings")}
</Heading>
</div>
<StyledScrollbar ref={scrollRef} stype="mediumBlack">
<StyledScrollbar ref={scrollRef}>
<EmbeddingBody
t={t}
link={link}

2
packages/client/src/components/panels/HotkeysPanel/index.js
View File

@ -68,7 +68,7 @@ const HotkeyPanel = ({
<div className="hotkeys_header">
<Heading className="hotkeys_heading">{t("Common:Hotkeys")}</Heading>
</div>
<StyledScrollbar ref={scrollRef} stype="mediumBlack">
<StyledScrollbar ref={scrollRef}>
<Heading className="hotkeys_sub-header">
{t("HotkeysNavigation")}
</Heading>

2
packages/client/src/components/panels/InvitePanel/index.js
View File

@ -378,7 +378,7 @@ const InvitePanel = ({
<>
{scrollAllPanelContent ? (
<div className="invite-panel-body" ref={invitePanelBodyRef}>
<Scrollbar stype="mediumBlack">{bodyInvitePanel}</Scrollbar>
<Scrollbar>{bodyInvitePanel}</Scrollbar>
</div>
) : (
bodyInvitePanel

2
packages/client/src/components/panels/NewFilesPanel/index.js
View File

@ -278,7 +278,7 @@ const NewFilesPanel = (props) => {
</StyledHeaderContent>
{!isLoading ? (
<StyledBody className="files-operations-body">
<StyledSharingBody stype="mediumBlack" style={SharingBodyStyle}>
<StyledSharingBody style={SharingBodyStyle}>
{filesListNode}
</StyledSharingBody>
</StyledBody>

2
packages/client/src/components/panels/UploadPanel/FileList.js
View File

@ -7,7 +7,7 @@ import FileRow from "./FileRow";
import { isDesktop } from "@docspace/components/utils/device";
const CustomScrollbarsVirtualList = React.forwardRef((props, ref) => (
<CustomScrollbars stype="mediumBlack" {...props} forwardedRef={ref} />
<CustomScrollbars {...props} forwardedRef={ref} />
));
const mobileRowHeight = 48;

2
packages/client/src/components/panels/UploadPanel/index.js
View File

@ -143,7 +143,7 @@ class UploadPanelComponent extends React.Component {
</div>*/}
</div>
</StyledHeaderContent>
<StyledBody stype="mediumBlack" className="upload-panel_body">
<StyledBody className="upload-panel_body">
<FileList />
</StyledBody>
</StyledContent>

2
packages/client/src/pages/DebugInfo/index.js
View File

@ -110,7 +110,7 @@ const DebugInfoDialog = (props) => {
overflowProp="auto"
heightProp={"362px"}
>
<Scrollbar stype="mediumBlack">
<Scrollbar>
{md && (
<ReactMarkdown
remarkPlugins={[remarkGfm]}

1
packages/client/src/pages/FormGallery/Filter/CategoryFilter/MobileView/index.js
View File

@ -99,7 +99,6 @@ const CategoryFilterMobile = ({
<Scrollbar
style={{ position: "absolute" }}
scrollclass="section-scroll"
stype="mediumBlack"
ref={scrollRef}
>
<DropDownItem

1
packages/common/components/Article/sub-components/article-body.js
View File

@ -6,7 +6,6 @@ const ArticleBody = ({ children, className }) => {
<Scrollbar
className="article-body__scrollbar"
scrollclass="article-scroller"
stype="mediumBlack"
>
{children}
</Scrollbar>

2
packages/common/components/FilterInput/sub-components/FilterBlock.js
View File

@ -413,7 +413,7 @@ const FilterBlock = ({
{isLoading ? (
<Loaders.FilterBlock isRooms={isRooms} isAccounts={isAccounts} />
) : (
<Scrollbar className="filter-body__scrollbar" stype="mediumBlack">
<Scrollbar className="filter-body__scrollbar">
{filterData.map((item, index) => {
return (
<FilterBlockItem

1
packages/common/components/Section/sub-components/info-panel-body.js
View File

@ -49,7 +49,6 @@ const SubInfoPanelBody = ({ children, isInfoPanelScrollLocked }) => {
$isScrollLocked={scrollLocked}
noScrollY={scrollLocked}
scrollclass="section-scroll info-panel-scroll"
stype="mediumBlack"
>
{content}
</StyledScrollbar>

4
packages/common/components/Section/sub-components/section-body.js
View File

@ -351,7 +351,7 @@ class SectionBody extends React.Component {
<Scrollbar
id="sectionScroll"
scrollclass="section-scroll"
stype="mediumBlack"
fixedSize
>
<div className="section-wrapper">
<div className="section-wrapper-content" {...focusProps}>
@ -389,7 +389,7 @@ class SectionBody extends React.Component {
<Scrollbar
id="sectionScroll"
scrollclass="section-scroll"
stype="mediumBlack"
fixedSize
>
<div className="section-wrapper">
<div className="section-wrapper-content" {...focusProps}>

2
packages/components/all/all.stories.js
View File

@ -493,7 +493,7 @@ const Template = (args) => (
</div>
<div style={{ justifySelf: "center" }}>
<div style={{ padding: "8px 0" }}>
<Scrollbar stype="mediumBlack" style={{ width: 300, height: 200 }}>
<Scrollbar style={{ width: 300, height: 200 }}>
================================================================
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim

6
packages/components/aside/aside.js
View File

@ -71,11 +71,7 @@ const Aside = React.memo((props) => {
forwardRef={contentRef}
>
{/* <CloseButton displayType="aside" zIndex={zIndex}/> */}
{withoutBodyScroll ? (
children
) : (
<Scrollbar stype="mediumBlack">{children}</Scrollbar>
)}
{withoutBodyScroll ? children : <Scrollbar>{children}</Scrollbar>}
{visible && (
<StyledControlContainer className="close-button" onClick={onClose}>

2
packages/components/context-menu/sub-components/mobile-sub-menu.js
View File

@ -195,7 +195,7 @@ const MobileSubMenu = (props) => {
height + 61 > viewport.height - 64 ? viewport.height - 125 : height + 5;
return (
<Scrollbar style={{ height: listHeight }} stype="mediumBlack">
<Scrollbar style={{ height: listHeight }}>
{model.map((item, index) => {
if (item.disabled) return null;
return renderItem(item, index);

2
packages/components/context-menu/sub-components/sub-menu.js
View File

@ -325,7 +325,7 @@ const SubMenu = (props) => {
: height + 5;
return (
<Scrollbar style={{ height: listHeight }} stype="mediumBlack">
<Scrollbar style={{ height: listHeight }}>
{model.map((item, index) => {
if (item.disabled) return null;
return renderItem(item, index);

4
packages/components/drop-down/VirtualList.tsx
View File

@ -113,9 +113,7 @@ function VirtualList({
<>
{isNoFixedHeightOptions ? (
//@ts-ignore
<Scrollbar style={{ height: maxHeight }} stype="mediumBlack">
{cleanChildren}
</Scrollbar>
<Scrollbar style={{ height: maxHeight }}>{cleanChildren}</Scrollbar>
) : (
<VariableSizeList
ref={ref}

6
packages/components/email-chips/index.js
View File

@ -292,11 +292,7 @@ const EmailChips = ({
<StyledContent {...props}>
<StyledChipGroup onKeyDown={onKeyDown} ref={containerRef} tabindex="-1">
<StyledChipWithInput length={chips.length}>
<Scrollbar
scrollclass={"scroll"}
stype={"preMediumBlack"}
ref={scrollbarRef}
>
<Scrollbar scrollclass={"scroll"} ref={scrollbarRef}>
<ChipsRender
chips={chips}
checkSelected={checkSelected}

1
packages/components/main-button-mobile/index.js
View File

@ -375,7 +375,6 @@ const MainButtonMobile = (props) => {
<Scrollbar
style={{ position: "absolute" }}
scrollclass="section-scroll"
stype="mediumBlack"
ref={dropDownRef}
>
{children}

6
packages/components/modal-dialog/views/modal-aside.js
View File

@ -238,11 +238,7 @@ const Modal = ({
embedded={embedded}
>
{currentDisplayType === "aside" && withBodyScroll ? (
<Scrollbar
stype="mediumBlack"
id="modal-scroll"
className="modal-scroll"
>
<Scrollbar id="modal-scroll" className="modal-scroll">
{bodyComponent}
</Scrollbar>
) : (

1
packages/components/scrollbar/README.md
View File

@ -19,4 +19,3 @@ import Scrollbar from "@docspace/components/scrollbar";
| `className` | `string` | - | - | - | Accepts class |
| `id` | `string` | - | - | - | Accepts id |
| `style` | `obj`, `array` | - | - | - | Accepts css style |
| `stype` | `string` | | `smallWhite`, `smallBlack`, `preMediumBlack`, `mediumBlack` | `smallBlack` | Scrollbar style type |

8
packages/components/scrollbar/custom-scrollbars-virtual-list.js
View File

@ -16,15 +16,13 @@ export class CustomScrollbars extends React.Component {
};
render() {
const { onScroll, forwardedRef, style, children, className, stype } =
this.props;
const { onScroll, forwardedRef, style, children, className } = this.props;
//console.log("CustomScrollbars", this.props);
return (
<Scrollbar
ref={(scrollbarsRef) => this.refSetter(scrollbarsRef, forwardedRef)}
style={{ ...style, overflow: "hidden" }}
onScroll={onScroll}
stype={stype}
className={className}
>
{children}
@ -34,10 +32,6 @@ export class CustomScrollbars extends React.Component {
}
}
CustomScrollbars.defaultProps = {
stype: "mediumBlack",
};
const CustomScrollbarsVirtualList = React.forwardRef((props, ref) => (
<CustomScrollbars {...props} forwardedRef={ref} />
));

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

@ -2,98 +2,9 @@ import React, { useEffect, useRef, useState } from "react";
import PropTypes from "prop-types";
import { classNames } from "../utils/classNames";
import { isMobile } from "../utils/device";
import StyledScrollbar from "./styled-scrollbar";
import { useTheme } from "styled-components";
const scrollbarTypes = {
smallWhite: {
thumbV: {
width: "2px",
marginLeft: "2px",
borderRadius: "inherit",
},
thumbH: {
height: "2px",
marginTop: "2px",
borderRadius: "inherit",
},
trackV: {
width: "2px",
background: "transparent",
},
trackH: {
height: "2px",
background: "transparent",
},
content: { outline: "none", WebkitOverflowScrolling: "auto" },
},
smallBlack: {
thumbV: {
width: "3px",
marginLeft: "2px",
borderRadius: "inherit",
},
thumbH: {
height: "3px",
marginTop: "2px",
borderRadius: "inherit",
},
trackV: {
width: "3px",
background: "transparent",
},
trackH: {
height: "3px",
background: "transparent",
},
content: { outline: "none", WebkitOverflowScrolling: "auto" },
},
mediumBlack: {
thumbV: {
width: "8px",
borderRadius: "inherit",
},
thumbH: {
height: "8px",
borderRadius: "inherit",
},
trackV: {
width: "8px",
background: "transparent",
},
trackH: {
height: "8px",
background: "transparent",
},
content: {
outline: "none",
WebkitOverflowScrolling: "auto",
},
},
preMediumBlack: {
thumbV: {
width: "5px",
borderRadius: "inherit",
cursor: "default",
},
thumbH: {
height: "5px",
borderRadius: "inherit",
cursor: "default",
},
trackV: {
width: "5px",
background: "transparent",
},
trackH: {
height: "5px",
background: "transparent",
},
content: { outline: "none", WebkitOverflowScrolling: "auto" },
},
};
const Scrollbar = React.forwardRef((props, ref) => {
const {
id,
@ -101,20 +12,17 @@ const Scrollbar = React.forwardRef((props, ref) => {
autoHide,
hideTrackTimer,
scrollclass,
stype,
noScrollY,
fixedSize,
...rest
} = props;
const { interfaceDirection } = useTheme();
const [isScrolling, setIsScrolling] = useState();
const [isMouseOver, setIsMouseOver] = useState();
const [isScrolling, setIsScrolling] = useState(false);
const [isMouseOver, setIsMouseOver] = useState(false);
const timerId = useRef();
const isRtl = interfaceDirection === "rtl";
const scrollbarType = scrollbarTypes[stype] ?? {};
const showTrack = () => {
clearTimeout(timerId.current);
setIsScrolling(true);
@ -171,57 +79,29 @@ const Scrollbar = React.forwardRef((props, ref) => {
return () => clearTimeout(timerId.current);
}, []);
const disableScrolling = noScrollY
? {
height: "0",
}
: {};
return (
<StyledScrollbar
{...rest}
id={id}
disableTracksWidthCompensation
$fixedSize={fixedSize}
rtl={isRtl}
ref={ref}
{...scrollAutoHideHandlers}
onScrollStart={onScrollStart}
wrapperProps={{ className: "scroll-wrapper" }}
scrollerProps={{ renderer: renderScroller }}
contentProps={{
tabIndex: -1,
className: "scroll-body",
style: {
...scrollbarType.content,
paddingRight: !isRtl && (isMobile() ? "8px" : "17px"),
paddingLeft: isRtl && (isMobile() ? "8px" : "17px"),
},
}}
thumbYProps={{
className: "nav-thumb-vertical",
style: scrollbarType.thumbV,
}}
thumbXProps={{
className: "nav-thumb-horizontal",
style: scrollbarType.thumbH,
}}
// Add 1px margin to vertical track to avoid scrollbar lib crashing when event.clientX equals 0
contentProps={{ className: "scroll-body" }}
thumbYProps={{ className: "thumb thumb-vertical" }}
thumbXProps={{ className: "thumb thumb-horizontal" }}
trackYProps={{
style: {
...scrollbarType.trackV,
...tracksAutoHideStyles,
marginLeft: isRtl ? "1px" : "0",
marginRight: isRtl ? "0" : "1px",
...disableScrolling,
},
className: "track track-vertical",
style: { ...tracksAutoHideStyles },
...tracksAutoHideHandlers,
}}
trackXProps={{
style: {
...scrollbarType.trackH,
...tracksAutoHideStyles,
direction: "ltr",
},
className: "track track-horizontal",
style: { ...tracksAutoHideStyles },
...tracksAutoHideHandlers,
}}
/>
@ -229,8 +109,6 @@ const Scrollbar = React.forwardRef((props, ref) => {
});
Scrollbar.propTypes = {
/** Scrollbar style type */
stype: PropTypes.string,
/** Accepts class */
className: PropTypes.string,
/** Accepts id */
@ -241,12 +119,18 @@ Scrollbar.propTypes = {
autoHide: PropTypes.bool,
/** Track auto hiding delay in ms. */
hideTrackTimer: PropTypes.number,
/** Fix scrollbar size. */
fixedSize: PropTypes.bool,
/** Disable vertical scrolling. */
noScrollY: PropTypes.bool,
/** Disable horizontal scrolling. */
noScrollX: PropTypes.bool,
};
Scrollbar.defaultProps = {
stype: "mediumBlack",
autoHide: false,
hideTrackTimer: 500,
fixedSize: false,
};
export default Scrollbar;

1
packages/components/scrollbar/scrollbar.stories.js
View File

@ -37,6 +37,5 @@ const Template = (args) => {
export const Default = Template.bind({});
Default.args = {
stype: "mediumBlack",
style: { width: 300, height: 200 },
};

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

@ -1,31 +1,131 @@
import Scrollbar from "react-scrollbars-custom";
import styled from "styled-components";
import Base from "../themes/base";
import { desktop, mobile, tablet } from "../utils/device";
import { isIOS, isIOS13, isIPad13 } from "react-device-detect";
const StyledScrollbar = styled(Scrollbar)`
.scroll-body {
position: relative;
.scroller::-webkit-scrollbar {
${(isIOS || isIOS13 || isIPad13) && `display: none;`}
}
.nav-thumb-vertical {
.scroll-body {
padding-inline-end: 17px !important;
position: relative;
outline: none;
tab-index: -1;
@media ${mobile} {
padding-inline-end: 8px !important;
}
}
.track {
box-sizing: border-box;
display: flex;
padding: 4px;
border-radius: 8px !important;
background: transparent !important;
@media ${desktop} {
&:hover {
.thumb-vertical {
width: 8px !important;
}
.thumb-horizontal {
height: 8px !important;
}
}
}
@media ${tablet} {
pointer-events: none;
.thumb {
pointer-events: all;
}
}
}
.track-vertical {
direction: ${({ theme }) => theme.interfaceDirection};
height: ${({ noScrollY }) => (noScrollY ? 0 : "100%")} !important;
width: 16px !important;
top: 0 !important;
justify-content: flex-end;
}
.track-horizontal {
width: 100% !important;
height: 16px !important;
align-items: flex-end;
direction: ltr;
${({ theme }) =>
theme.interfaceDirection === "rtl"
? `left: unset !important; right: 0 !important;`
: `left: 0 !important;`}
}
&.trackYVisible.trackXVisible {
.track-vertical {
height: calc(100% - 16px) !important;
}
.track-horizontal {
width: calc(100% - 16px) !important;
}
}
.thumb {
touch-action: none;
background-color: ${(props) =>
props.color
? props.color
: props.theme.scrollbar.backgroundColorVertical} !important;
props.color ? props.color : props.theme.scrollbar.bgColor} !important;
z-index: 201;
position: relative;
:hover,
:hover {
background-color: ${(props) =>
props.theme.scrollbar.hoverBgColor} !important;
}
:active,
&.dragging {
touch-action: none;
background-color: ${(props) =>
props.theme.scrollbar.hoverBackgroundColorVertical} !important;
props.theme.scrollbar.pressBgColor} !important;
}
}
.nav-thumb-horizontal {
background-color: ${(props) =>
props.color
? props.color
: props.theme.scrollbar.backgroundColorHorizontal} !important;
.thumb-vertical {
width: ${({ $fixedSize }) => ($fixedSize ? "8px" : "4px")} !important;
transition: width linear 0.1s;
@media ${desktop} {
&:active {
width: 8px !important;
}
}
@media ${tablet} {
width: 4px !important;
}
}
.thumb-horizontal {
height: ${({ $fixedSize }) => ($fixedSize ? "8px" : "4px")} !important;
transition: height linear 0.1s;
@media ${desktop} {
&:active {
height: 8px !important;
}
}
@media ${tablet} {
height: 4px !important;
}
}
`;

1
packages/components/tabs-container/index.js
View File

@ -159,7 +159,6 @@ class TabContainer extends Component {
<>
<StyledScrollbar
autoHide={onScrollHide}
stype="preMediumBlack"
className="scrollbar"
ref={this.scrollRef}
>

1
packages/components/textarea/index.js
View File

@ -122,7 +122,6 @@ const Textarea = ({
themeId={ThemeType.Textarea}
className={className}
style={style}
stype="preMediumBlack"
isDisabled={isDisabled}
hasError={isError}
heightScale={heightScale}

6
packages/components/themes/base.js
View File

@ -593,9 +593,9 @@ const Base = {
},
scrollbar: {
backgroundColorVertical: "rgba(0, 0, 0, 0.1)",
backgroundColorHorizontal: "rgba(0, 0, 0, 0.1)",
hoverBackgroundColorVertical: grayMid,
bgColor: "rgba(6, 22, 38, 0.16)",
hoverBgColor: "rgba(6, 22, 38, 0.32)",
pressBgColor: "rgba(6, 22, 38, 0.5)",
},
modalDialog: {

6
packages/components/themes/dark.js
View File

@ -586,9 +586,9 @@ const Dark = {
},
scrollbar: {
backgroundColorVertical: "rgba(255, 255, 255, 0.1)",
backgroundColorHorizontal: "rgba(255, 255, 255, 0.1)",
hoverBackgroundColorVertical: "#ADADAD",
bgColor: "rgba(20, 20, 20, 0.4)",
hoverBgColor: "rgba(20, 20, 20, 0.64)",
pressBgColor: "rgba(20, 20, 20, 0.8)",
},
modalDialog: {