fix: scroll in sidebar

This commit is contained in:
Alex Varchuk 2022-01-27 13:46:05 +02:00 committed by AlexVarchuk
parent acbc5c7b59
commit b5b0d61b35
5 changed files with 110 additions and 236 deletions

View File

@ -85,7 +85,7 @@ export default (env: { playground?: boolean; bench?: boolean } = {}, { mode }) =
{ {
test: /\.css$/, test: /\.css$/,
use: [ use: [
'isomorphic-style-loader', 'style-loader',
'css-loader', 'css-loader',
{ {
loader: 'esbuild-loader', loader: 'esbuild-loader',

327
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -145,7 +145,7 @@
"decko": "^1.2.0", "decko": "^1.2.0",
"dompurify": "^2.2.8", "dompurify": "^2.2.8",
"eventemitter3": "^4.0.7", "eventemitter3": "^4.0.7",
"isomorphic-style-loader": "^5.3.2", "style-loader": "^3.3.1",
"json-pointer": "^0.6.1", "json-pointer": "^0.6.1",
"lunr": "^2.3.9", "lunr": "^2.3.9",
"mark.js": "^8.11.1", "mark.js": "^8.11.1",

View File

@ -1,10 +1,10 @@
import * as React from 'react'; import * as React from 'react';
import PerfectScrollbarType, * as PerfectScrollbarNamespace from 'perfect-scrollbar'; import PerfectScrollbarType, * as PerfectScrollbarNamespace from 'perfect-scrollbar';
import psStyles from 'perfect-scrollbar/css/perfect-scrollbar.css';
import { OptionsContext } from '../components/OptionsProvider'; import { OptionsContext } from '../components/OptionsProvider';
import styled, { createGlobalStyle } from '../styled-components'; import styled, { createGlobalStyle } from '../styled-components';
import { IS_BROWSER } from '../utils';
/* /*
* perfect scrollbar umd bundle uses exports assignment while module uses default export * perfect scrollbar umd bundle uses exports assignment while module uses default export
@ -14,7 +14,14 @@ import styled, { createGlobalStyle } from '../styled-components';
const PerfectScrollbarConstructor = const PerfectScrollbarConstructor =
PerfectScrollbarNamespace.default || (PerfectScrollbarNamespace as any as PerfectScrollbarType); PerfectScrollbarNamespace.default || (PerfectScrollbarNamespace as any as PerfectScrollbarType);
const PSStyling = createGlobalStyle`${psStyles && psStyles.toString()}`; let psStyles = '';
if (IS_BROWSER) {
psStyles = require('perfect-scrollbar/css/perfect-scrollbar.css');
psStyles = (typeof psStyles.toString === 'function' && psStyles.toString()) || '';
psStyles = psStyles === '[object Object]' ? '' : psStyles;
}
const PSStyling = createGlobalStyle`${psStyles}`;
const StyledScrollWrapper = styled.div` const StyledScrollWrapper = styled.div`
position: relative; position: relative;
@ -59,7 +66,7 @@ export class PerfectScrollbar extends React.Component<PerfectScrollbarProps> {
return ( return (
<> <>
<PSStyling /> {psStyles && <PSStyling />}
<StyledScrollWrapper className={`scrollbar-container ${className}`} ref={this.handleRef}> <StyledScrollWrapper className={`scrollbar-container ${className}`} ref={this.handleRef}>
{children} {children}
</StyledScrollWrapper> </StyledScrollWrapper>

View File

@ -90,7 +90,7 @@ export default (env: { standalone?: boolean; browser?: boolean } = {}) => ({
{ {
test: /\.css$/, test: /\.css$/,
use: [ use: [
'isomorphic-style-loader', 'style-loader',
'css-loader', 'css-loader',
{ {
loader: 'esbuild-loader', loader: 'esbuild-loader',