feat: Add one more className (#142)

* feat: Add one more className

* chore: clean up

Author: zombieJ

examples/switch.tsx

@@ -1,6 +1,6 @@
-/* eslint-disable jsx-a11y/label-has-associated-control, jsx-a11y/label-has-for */
 import * as React from 'react';
-import List, { ListRef } from '../src/List';
+import type { ListRef } from '../src/List';
+import List from '../src/List';
 
 interface Item {
   id: number;
@@ -37,6 +37,7 @@ function getData(count: number) {
 const Demo = () => {
   const [height, setHeight] = React.useState(200);
   const [data, setData] = React.useState(getData(20));
+  const [fullHeight, setFullHeight] = React.useState(true);
   const listRef = React.useRef<ListRef>();
 
   return (
@@ -98,13 +99,23 @@ const Demo = () => {
             200
           </label>
         </span>
+        <span>
+          <button
+            onClick={() => {
+              setFullHeight(!fullHeight);
+            }}
+          >
+            Full Height: {String(fullHeight)}
+          </button>
+        </span>
 
         <List
           ref={listRef}
           data={data}
           height={height}
           itemHeight={10}
           itemKey="id"
+          fullHeight={fullHeight}
           style={{
             border: '1px solid red',
             boxSizing: 'border-box',

src/ScrollBar.tsx

@@ -71,7 +71,7 @@ export default class ScrollBar extends React.Component<ScrollBarProps, ScrollBar
     e.preventDefault();
   };
 
-  onContainerMouseDown: React.MouseEventHandler = e => {
+  onContainerMouseDown: React.MouseEventHandler = (e) => {
     e.stopPropagation();
     e.preventDefault();
   };
@@ -173,38 +173,35 @@ export default class ScrollBar extends React.Component<ScrollBarProps, ScrollBar
     return ptg * enableHeightRange;
   };
 
-  // Not show scrollbar when height is large thane scrollHeight
-  getVisible = (): boolean => {
-    const { visible } = this.state;
+  // Not show scrollbar when height is large than scrollHeight
+  showScroll = (): boolean => {
     const { height, scrollHeight } = this.props;
-
-    if (height >= scrollHeight) {
-      return false;
-    }
-
-    return visible;
+    return scrollHeight > height;
   };
 
   // ====================== Render =======================
   render() {
-    const { dragging } = this.state;
+    const { dragging, visible } = this.state;
     const { prefixCls } = this.props;
     const spinHeight = this.getSpinHeight();
     const top = this.getTop();
 
-    const visible = this.getVisible();
+    const canScroll = this.showScroll();
+    const mergedVisible = canScroll && visible;
 
     return (
       <div
         ref={this.scrollbarRef}
-        className={`${prefixCls}-scrollbar`}
+        className={classNames(`${prefixCls}-scrollbar`, {
+          [`${prefixCls}-scrollbar-show`]: canScroll,
+        })}
         style={{
           width: 8,
           top: 0,
           bottom: 0,
           right: 0,
           position: 'absolute',
-          display: visible ? null : 'none',
+          display: mergedVisible ? null : 'none',
         }}
         onMouseDown={this.onContainerMouseDown}
         onMouseMove={this.delayHidden}