Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: Scrollbar component #315

Merged
merged 16 commits into from
Jun 21, 2021
Merged

feat: Scrollbar component #315

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
ac468ba
feat: create Scrollbar component
tinaClin Jun 3, 2021
5120267
Merge branch 'master' into feat/scrollbar-component
tinaClin Jun 8, 2021
c7820f3
fix: fix the native scrollbar is rendered when toggling the dropdown …
tinaClin Jun 8, 2021
b687539
docs: add a example, the base scrollbar in the Menu
tinaClin Jun 10, 2021
d1e8397
feat: add some props for user can customize the scrollbar
tinaClin Jun 11, 2021
e63dab4
docs: add the shadow scrollbar example
tinaClin Jun 11, 2021
2cbc178
docs: update docs for Scrollbar
tinaClin Jun 15, 2021
42be733
chore: work in progress
tinaClin Jun 15, 2021
b058d85
chore: work in progress
tinaClin Jun 15, 2021
f4bea0c
feat: the scrollbar default is hidden
tinaClin Jun 16, 2021
f4a0d09
feat: add horizontalVisibility and verticalVisibility props
tinaClin Jun 16, 2021
4e373f0
chore: fix typo
tinaClin Jun 16, 2021
fa9b677
chore: rename some props
tinaClin Jun 17, 2021
9edf6bf
feat: remove the autoHeight prop
tinaClin Jun 17, 2021
e605845
feat: adjust the visibility attribute of the scrollbar
tinaClin Jun 17, 2021
44ecb46
feat: add disabled prop
tinaClin Jun 17, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 2 additions & 1 deletion packages/react-styled-ui/src/Scrollbar/Scrollbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const Scrollbar = forwardRef((
{
onScroll,
onUpdate,
autoHide = false,
alwaysShow = false,
autoHideDelay = 1000,
thumbSize,
thumbMinSize = 30,
Expand All @@ -35,6 +35,7 @@ const Scrollbar = forwardRef((
},
ref,
) => {
const autoHide = !alwaysShow;
let hideTracksTimeout;
let viewScrollLeft = 0;
let viewScrollTop = 0;
Expand Down
9 changes: 5 additions & 4 deletions packages/styled-ui-docs/pages/scrollbar.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import {
<Menu width="160px">
<MenuButton width="100%">Select an option</MenuButton>
<MenuList width="100%" height={200}>
<Scrollbar autoHide>
<Scrollbar>
<MenuItem>List item 1</MenuItem>
<MenuItem>List item 2</MenuItem>
<MenuItem>List item 3</MenuItem>
Expand Down Expand Up @@ -69,6 +69,7 @@ function CustomScrollbar({

return (
<Scrollbar
alwaysShow
renderView={renderScrollView}
renderTrackHorizontal={renderScrollTrack}
renderTrackVertical={renderScrollTrack}
Expand Down Expand Up @@ -259,10 +260,10 @@ render(

| Name | Type | Default | Description |
| :--- | :--- | :------ | :---------- |
| autoHide | boolean | false | Enable auto-hide mode. |
| alwaysShow | boolean | false | Enable always-show mode. |
cheton marked this conversation as resolved.
Show resolved Hide resolved
| autoHideDelay | number | 1000 | Hide delay in ms. |
| autoHeight | boolean | false | Enable auto-height mode. |
cheton marked this conversation as resolved.
Show resolved Hide resolved
| autoHeightMax | number | 200 | Set a maximum height for auto-height mode. |
| autoHeightMax | number | 200 | Set a maximum height for auto-height mode. default is `200px`. |
cheton marked this conversation as resolved.
Show resolved Hide resolved
| autoHeightMin | number | 0 | Set a minimum height for auto-height mode. |
| onScroll | function | | Event handler. |
| onUpdate | function({ values, hasHorizontalScrollbar, hasVerticalScrollbar }) | | Called whenever the component is updated. |
Expand All @@ -271,5 +272,5 @@ render(
| renderTrackVertical | function | | Vertical track element. |
| renderThumbHorizontal | function | | Horizontal thumb element. |
| renderThumbVertical | function | | Vertical thumb element. |
cheton marked this conversation as resolved.
Show resolved Hide resolved
| thumbMinSize | number | 30 | Minimal thumb size. |
| thumbMinSize | number | 30 | Minimal thumb size. default is `30px`. |
| thumbSize | number | | Set a fixed size for thumbs. |