WIP: add an min handler option

fuermosi777 · Apr 17, 2020 · 042a18d · 042a18d
1 parent d6a4714
commit 042a18d
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -138,4 +138,6 @@ Go to `http://localhost:8080`.
 ## Publish
 
 `$ yarn dist`
-`$ npm publish`
+`$ npm publish`
+
+Update changelog.
diff --git a/demo/src/entry.tsx b/demo/src/entry.tsx
@@ -49,7 +49,7 @@ const Text = (
 
 class Root extends React.Component {
   private controlledScrollBar: FreeScrollBar | null = null;
-  private handlePositionChanged = (pos: {top?: number, left?: number}) => {
+  private handlePositionChanged = (pos: { top?: number; left?: number }) => {
     if (this.controlledScrollBar) {
       this.controlledScrollBar.setPosition(pos);
     }
@@ -119,6 +119,27 @@ class Root extends React.Component {
                     {List}
                     {List}
                     {List}
+                    {List}
+                    {List}
+                    {List}
+                    {List}
+                    {List}
+                    {List}
+                    {List}
+                    {List}
+                    {List}
+                    {List}
+                    {List}
+                    {List}
+                    {List}
+                    {List}
+                    {List}
+                    {List}
+                    {List}
+                    {List}
+                    {List}
+                    {List}
+                    {List}
                   </div>
                 </FreeScrollBar>
               </div>
@@ -143,8 +164,16 @@ class Root extends React.Component {
           <div className="row">
             <div className="col-md-12">
               <h4>Control scrolling position</h4>
-              <input className="" placeholder="Top" onChange={(e) => this.handlePositionChanged({top: Number(e.target.value) || 10})}/>
-              <input className="" placeholder="Left" onChange={(e) => this.handlePositionChanged({left: Number(e.target.value) || 10})}/>
+              <input
+                className=""
+                placeholder="Top"
+                onChange={(e) => this.handlePositionChanged({ top: Number(e.target.value) || 10 })}
+              />
+              <input
+                className=""
+                placeholder="Left"
+                onChange={(e) => this.handlePositionChanged({ left: Number(e.target.value) || 10 })}
+              />
               <div className="custom-styles">
                 <FreeScrollBar
                   className="example"

diff --git a/src/index.tsx b/src/index.tsx
@@ -157,7 +157,7 @@ export default class FreeScrollbar extends React.PureComponent<Props, State> {
 
     let canRun = true;
 
-    return function(...args: any) {
+    return function (...args: any) {
       if (canRun) {
         canRun = false;
         func(...args);
@@ -224,7 +224,7 @@ export default class FreeScrollbar extends React.PureComponent<Props, State> {
       this.el.scrollTop = start.top;
       this.el.scrollLeft = start.left;
     }
-  }
+  };
 
   private collectInfo = () => {
     this.offsetWidth = this.el.offsetWidth;
@@ -329,14 +329,14 @@ export default class FreeScrollbar extends React.PureComponent<Props, State> {
   /**
    * Set the scrolling position manually.
    */
-  public setPosition = (pos: {top?: number, left?: number}) => {
+  public setPosition = (pos: { top?: number; left?: number }) => {
     if (pos.top) {
-    this.el.scrollTop = pos.top;
+      this.el.scrollTop = pos.top;
     }
     if (pos.left) {
-    this.el.scrollLeft = pos.left;
+      this.el.scrollLeft = pos.left;
     }
-  }
+  };
 
   public render() {
     // Dynamic styles
@@ -368,9 +368,16 @@ export default class FreeScrollbar extends React.PureComponent<Props, State> {
       right: this.state.showVeriticalTrack ? this.props.tracksize : '0',
       opacity: this.state.hideHandler ? 0 : 1,
     };
+    // TODO: resolve the bottom issue and the horizontal handler length.
+    // TODO: convert this into the config option.
+    let min = 5;
+    let verticalHandlerHeight = Math.max(
+      100 - this.state.handlerPos.bottom - this.state.handlerPos.top,
+      min
+    );
     let verticalHandlerStyles = {
       top: this.state.handlerPos.top + '%',
-      bottom: this.state.handlerPos.bottom + '%',
+      bottom: 100 - verticalHandlerHeight - this.state.handlerPos.top + '%',
       opacity: this.state.hideHandler ? 0 : 1,
     };
     let horizontalHandlerStyles = {
@@ -379,8 +386,6 @@ export default class FreeScrollbar extends React.PureComponent<Props, State> {
       opacity: this.state.hideHandler ? 0 : 1,
     };
 
-
-
     return (
       <div
         className={`FreeScrollbar ${this.props.className}`}