GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-01 05:05:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

CHANGE to use overlayscrollbars over simplebars

Browse Source
This commit is contained in:
Norbert de Langen 2020-01-09 22:39:27 +01:00
parent a0169f96d7
commit a25dcf5a48
No known key found for this signature in database
GPG Key ID: 976651DA156C2825
5 changed files with 627 additions and 197 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
lib/components/package.json
View File

@ -46,7 +46,9 @@
"react-popper-tooltip": "^2.8.3",
"react-syntax-highlighter": "^11.0.2",
"react-textarea-autosize": "^7.1.0",
"simplebar-react": "^1.0.0-alpha.6",
"overlayscrollbars-react": "^0.2.1",
"@types/overlayscrollbars": "^1.9.0",
"overlayscrollbars": "^1.10.2",
"ts-dedent": "^1.1.0"
},
"devDependencies": {

24
lib/components/src/ScrollArea/ScrollArea.tsx
View File

@ -1,10 +1,7 @@
// Storybook's implementation of SimpleBar https://github.com/Grsmto/simplebar
// Note: "SimpleBar can't be used on the <body>, <textarea> or <iframe> elements."
import React, { Fragment, FunctionComponent } from 'react';
import { styled, Global } from '@storybook/theming';
import SimpleBar from 'simplebar-react';
import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
import { getScrollAreaStyles } from './ScrollAreaStyles';
export interface ScrollProps {
@ -13,8 +10,25 @@ export interface ScrollProps {
[key: string]: any;
}
const getResizeValue = (horizontal: boolean, vertical: boolean) => {
switch (true) {
case horizontal && vertical: {
return 'both';
}
case horizontal: {
return 'horizontal';
}
case vertical: {
return 'vertical';
}
default: {
return 'none';
}
}
};
const Scroll = styled(({ vertical, horizontal, ...rest }: ScrollProps) => (
<SimpleBar {...rest} scrollableNodeProps={{ tabIndex: 0 }} />
<OverlayScrollbarsComponent options={{ scrollbars: { autoHide: 'scroll' } }} {...rest} />
))<ScrollProps>(
({ vertical }) =>
!vertical

750
lib/components/src/ScrollArea/ScrollAreaStyles.tsx
View File

File diff suppressed because one or more lines are too long

1
lib/components/src/typings.d.ts vendored
View File

@ -1,4 +1,3 @@
declare module 'global';
declare module 'simplebar-react';
declare module 'markdown-to-jsx';
declare module '*.md';

45
yarn.lock
View File

@ -4247,6 +4247,11 @@
resolved "https://registry.yarnpkg.com/@types/npmlog/-/npmlog-4.1.2.tgz#d070fe6a6b78755d1092a3dc492d34c3d8f871c4"
integrity sha512-4QQmOF5KlwfxJ5IGXFIudkeLCdMABz03RcUXu+LCb24zmln8QW6aDjuGl4d4XPVLf2j+FnjelHTP7dvceAFbhA==
"@types/overlayscrollbars@^1.9.0":
version "1.9.0"
resolved "https://registry.yarnpkg.com/@types/overlayscrollbars/-/overlayscrollbars-1.9.0.tgz#dba5a3d6a09edfdfdfc90a08a79652c2b778d213"
integrity sha512-U3t35G0IH39eCoWKI6auh+3NkeP8jrmLyeZhiL3fKn4foOvbl223Ccd9cfUb1vhcxDmpTNAfKphDvl5jYJOD3w==
"@types/parse-json@^4.0.0":
version "4.0.0"
resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
@ -19830,11 +19835,6 @@ lodash.debounce@^3.1.1:
dependencies:
lodash._getnative "^3.0.0"
lodash.debounce@^4.0.8:
version "4.0.8"
resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
lodash.defaultsdeep@^4.6.0, lodash.defaultsdeep@^4.6.1:
version "4.6.1"
resolved "https://registry.yarnpkg.com/lodash.defaultsdeep/-/lodash.defaultsdeep-4.6.1.tgz#512e9bd721d272d94e3d3a63653fa17516741ca6"
@ -22883,6 +22883,16 @@ osenv@0, osenv@^0.1.3, osenv@^0.1.4, osenv@^0.1.5:
os-homedir "^1.0.0"
os-tmpdir "^1.0.0"
overlayscrollbars-react@^0.2.1:
version "0.2.1"
resolved "https://registry.yarnpkg.com/overlayscrollbars-react/-/overlayscrollbars-react-0.2.1.tgz#fe742d71b1772fa67312636b4a729e0c7246426a"
integrity sha512-/QMQPXVboRhbTaDf9IRkix35tGLee5qk9BLKfuQKrG5h8kIqMpcuOWI/ues25WR8ItYBKosovxTdFtPebrIuAQ==
overlayscrollbars@^1.10.2:
version "1.10.2"
resolved "https://registry.yarnpkg.com/overlayscrollbars/-/overlayscrollbars-1.10.2.tgz#7eaa04a9b6f17432ada9ae0e604517755544b33b"
integrity sha512-xlT6CT9NziK8VegHjJRw9O2QrMDi7HTrmPD1ZGYCG0ukJwdsR5l6JnRBAr5NBfsRjnsJpxvGPraRKR17zeGEBg==
override-require@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/override-require/-/override-require-1.1.1.tgz#6ae22fadeb1f850ffb0cf4c20ff7b87e5eb650df"
@ -27662,11 +27672,6 @@ reselect@^3.0.1:
resolved "https://registry.yarnpkg.com/reselect/-/reselect-3.0.1.tgz#efdaa98ea7451324d092b2b2163a6a1d7a9a2147"
integrity sha1-79qpjqdFEyTQkrKyFjpqHXqaIUc=
resize-observer-polyfill@^1.5.1:
version "1.5.1"
resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
resolve-cwd@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
@ -28845,26 +28850,6 @@ simple-swizzle@^0.2.2:
dependencies:
is-arrayish "^0.3.1"
simplebar-react@^1.0.0-alpha.6:
version "1.2.3"
resolved "https://registry.yarnpkg.com/simplebar-react/-/simplebar-react-1.2.3.tgz#bd81fa9827628470e9470d06caef6ece15e1c882"
integrity sha512-1EOWJzFC7eqHUp1igD1/tb8GBv5aPQA5ZMvpeDnVkpNJ3jAuvmrL2kir3HuijlxhG7njvw9ssxjjBa89E5DrJg==
dependencies:
prop-types "^15.6.1"
simplebar "^4.2.3"
simplebar@^4.2.3:
version "4.2.3"
resolved "https://registry.yarnpkg.com/simplebar/-/simplebar-4.2.3.tgz#dac40aced299c17928329eab3d5e6e795fafc10c"
integrity sha512-9no0pK7/1y+8/oTF3sy/+kx0PjQ3uk4cYwld5F1CJGk2gx+prRyUq8GRfvcVLq5niYWSozZdX73a2wIr1o9l/g==
dependencies:
can-use-dom "^0.1.0"
core-js "^3.0.1"
lodash.debounce "^4.0.8"
lodash.memoize "^4.1.2"
lodash.throttle "^4.1.1"
resize-observer-polyfill "^1.5.1"
sisteransi@^1.0.3:
version "1.0.4"
resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.4.tgz#386713f1ef688c7c0304dc4c0632898941cad2e3"