feat(Scrollbar): add support for programmable scrolling with scrollTop, scrollLeft, and scrollViewRef props

[cheton]

Add support for programmable scrolling with scrollTop, scrollLeft, and scrollViewRef props.

• Tonic UI Demo: https://trendmicro-frontend.github.io/tonic-ui-demo/react/pr-809/components/scrollbar
• CodeSandbox Demo: https://codesandbox.io/s/reverent-dew-z47lm4?file=/src/app.js

Examples

Using scrollTop prop

import { Box, Button, Scrollbar } from "@tonic-ui/react";
import { useToggle } from "@tonic-ui/react-hooks";
import React, { useRef } from "react";
import Lorem from "@/components/Lorem";

const App = () => {
  const lastScrollTopRef = useRef();
  const [on, toggle] = useToggle(true);

  return (
    <>
      <Box mb="4x">
        <Button onClick={toggle}>Toggle</Button>
      </Box>
      {on && (
        <Scrollbar
          height={200}
          onUpdate={(values) => {
            lastScrollTopRef.current = values.scrollTop;
          }}
          scrollTop={lastScrollTopRef.current}
        >
          <Lorem count={10} />
        </Scrollbar>
      )}
    </>
  );
};

export default App;

Using scrollViewRef prop

import { Box, Scrollbar } from "@tonic-ui/react";
import React, { useRef } from "react";

const App = () => {
  const scrollViewRef = useRef();

  return (
    <Scrollbar height={200} scrollViewRef={scrollViewRef}>
      <Box height={400}>Scroll content</Box>
    </Scrollbar>
  );
};

export default App;

[codesandbox]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 1ae4864:

Sandbox	Source
zealous-flower-q2flqm	PR

[trendmicro-frontend-bot]

Tonic UI Demo

• 2023-11-16 12:46:44 +0000 The PR feat(Scrollbar): add support for programmable scrolling with scrollTop, scrollLeft, and scrollViewRef props #809 (1ae4864) has been deployed to https://trendmicro-frontend.github.io/tonic-ui-demo/react/pr-809/

[codecov]

Codecov Report

Attention: 3 lines in your changes are missing coverage. Please review.

Comparison is base (29e733a) 71.40% compared to head (1ae4864) 71.34%.

Files	Patch %	Lines
packages/react/src/scrollbar/Scrollbar.js	83.33%	3 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master     #809      +/-   ##
==========================================
- Coverage   71.40%   71.34%   -0.06%     
==========================================
  Files         374      374              
  Lines        6267     6272       +5     
==========================================
  Hits         4475     4475              
- Misses       1792     1797       +5     

Flag	Coverage Δ
react	73.05% <83.33%> (-0.08%)	⬇️
react-hooks	87.59% <ø> (ø)
react-lab	14.04% <ø> (ø)
styled-system	91.73% <ø> (ø)
theme	100.00% <ø> (ø)
utils	70.28% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.