chore(js->ts): covert scrollbar && re-org/fix (#1025)

Author: mydearxym

src/components/CustomScroller/HorizontalScroller.js renamed to src/components/CustomScroller/HorizontalScroller.tsx

@@ -7,12 +7,14 @@
 import React, { useState, useRef, useCallback } from 'react'
 import { useTheme } from 'styled-components'
 import { Waypoint } from 'react-waypoint'
-import T from 'prop-types'
+import type { TSIZE_SML, TThemeMap } from '@/spec'
 
 import { buildLog } from '@/utils'
 import { SIZE } from '@/constant'
 import { useCustomScroll } from '@/hooks'
 
+import type { TProps as TScrollProps } from './index'
+
 import {
   Wrapper,
   //
@@ -25,17 +27,27 @@ import {
 /* eslint-disable-next-line */
 const log = buildLog('c:CustomScroller:index')
 
+type TProps = Omit<
+  TScrollProps,
+  | 'direction'
+  | 'onTopEnter'
+  | 'onTopLeave'
+  | 'onBottomEnter'
+  | 'onBottomLeave'
+  | 'onScrollDirectionChange'
+>
+
 // horizontal version
-const HorizontalScroller = ({
-  height,
-  width,
-  innerHeight,
-  showShadow,
-  shadowSize,
-  barSize,
+const HorizontalScroller: React.FC<TProps> = ({
+  height = '100%',
+  width = '100%',
+  innerHeight = '100%',
+  showShadow = true,
+  shadowSize = SIZE.SMALL,
+  barSize = SIZE.SMALL,
   children,
-  autoHide,
-  withBorder,
+  autoHide = true,
+  withBorder = false,
 }) => {
   const [showLeftShadow, setShowLeftShadow] = useState(false)
   const [showRightShadow, setShowRightShadow] = useState(true)
@@ -46,9 +58,8 @@ const HorizontalScroller = ({
   const handleShowRightShadow = useCallback(() => setShowRightShadow(true), [])
   const handleHideRightShadow = useCallback(() => setShowRightShadow(false), [])
 
-  const {
-    _meta: { category: themeCategory },
-  } = useTheme()
+  const { _meta: themeMeta }: TThemeMap = useTheme()
+  const { category: themeCategory } = themeMeta
 
   const ref = useRef(null)
   useCustomScroll(ref, {
@@ -57,12 +68,7 @@ const HorizontalScroller = ({
   })
 
   return (
-    <Wrapper
-      height={height}
-      width={width}
-      shadowSize={shadowSize}
-      barSize={barSize}
-    >
+    <Wrapper height={height} width={width} barSize={barSize}>
       {showShadow && (
         <LeftShadowBar
           show={showLeftShadow}
@@ -99,28 +105,4 @@ const HorizontalScroller = ({
   )
 }
 
-HorizontalScroller.propTypes = {
-  children: T.node.isRequired,
-  height: T.string,
-  width: T.string,
-  showShadow: T.bool,
-  shadowSize: T.oneOf([SIZE.SMALL, SIZE.MEDIUM, SIZE.LARGE]),
-  barSize: T.oneOf([SIZE.SMALL, SIZE.MEDIUM, SIZE.LARGE]),
-  // hack for custom scrollbar
-  innerHeight: T.string,
-  autoHide: T.bool,
-  withBorder: T.bool,
-}
-
-HorizontalScroller.defaultProps = {
-  height: '100%',
-  width: '100%',
-  showShadow: true,
-  shadowSize: SIZE.SMALL,
-  barSize: SIZE.SMALL,
-  innerHeight: '100%',
-  autoHide: false,
-  withBorder: false,
-}
-
 export default React.memo(HorizontalScroller)

src/components/CustomScroller/VerticalScroller.js renamed to src/components/CustomScroller/VerticalScroller.tsx

@@ -7,12 +7,15 @@
 import React, { useState, useRef, useCallback } from 'react'
 import { useTheme } from 'styled-components'
 import { Waypoint } from 'react-waypoint'
-import T from 'prop-types'
+import type { TSIZE_SML, TThemeMap } from '@/spec'
+import type { TScrollDirection } from './spec'
 
 import { buildLog, debounce } from '@/utils'
 import { SIZE } from '@/constant'
 import { useCustomScroll } from '@/hooks'
 
+import type { TProps as TScrollProps } from './index'
+
 import {
   Wrapper,
   //
@@ -24,17 +27,19 @@ import {
 /* eslint-disable-next-line */
 const log = buildLog('c:CustomScroller:index')
 
-// horizontal version
-const VerticalScroller = ({
-  height,
-  width,
-  showShadow,
-  shadowSize,
-  barSize,
+type TProps = Omit<TScrollProps, 'direction' | 'innerHeight'>
+
+// vertical version
+const VerticalScroller: React.FC<TProps> = ({
+  height = '100%',
+  width = '100%',
+  showShadow = true,
+  shadowSize = SIZE.SMALL,
+  barSize = SIZE.SMALL,
   children,
-  autoHide,
-  showOnHover,
-  withBorder,
+  autoHide = true,
+  showOnHover = false,
+  withBorder = false,
   onTopEnter,
   onTopLeave,
   onBottomEnter,
@@ -68,25 +73,28 @@ const VerticalScroller = ({
     onBottomEnter?.()
   }, [onBottomEnter])
 
-  const {
-    _meta: { category: themeCategory },
-  } = useTheme()
+  const { _meta: themeMeta }: TThemeMap = useTheme()
+  const { category: themeCategory } = themeMeta
 
   const ref = useRef(null)
   const scrollInstance = useCustomScroll(ref, {
     scrollbars: { autoHide: autoHide ? 'scroll' : 'never' },
     themeCategory,
     callbacks: {
-      onScroll: debounce(() => {
-        const position = scrollInstance?.scroll().position
-        if (position) {
-          const currentY = position.y
-
-          currentY > lastYPosition
-            ? onScrollDirectionChange?.('up')
-            : onScrollDirectionChange?.('down')
-        }
-      }, 100),
+      onScroll: debounce(
+        () => {
+          const position = scrollInstance?.scroll().position
+          if (position) {
+            const currentY = position.y
+
+            currentY > lastYPosition
+              ? onScrollDirectionChange?.('up')
+              : onScrollDirectionChange?.('down')
+          }
+        },
+        100,
+        true,
+      ),
       onScrollStart: () => {
         const position = scrollInstance?.scroll().position
         if (position) {
@@ -148,40 +156,4 @@ const VerticalScroller = ({
   )
 }
 
-VerticalScroller.propTypes = {
-  children: T.node.isRequired,
-  height: T.string,
-  width: T.string,
-  showShadow: T.bool,
-  shadowSize: T.oneOf([SIZE.SMALL, SIZE.MEDIUM, SIZE.LARGE]),
-  barSize: T.oneOf([SIZE.SMALL, SIZE.MEDIUM, SIZE.LARGE]),
-  // hack for custom scrollbar
-  autoHide: T.bool,
-  showOnHover: T.bool,
-  withBorder: T.bool,
-  onTopEnter: T.oneOfType([T.func, T.instanceOf(null)]),
-  onTopLeave: T.oneOfType([T.func, T.instanceOf(null)]),
-  onBottomEnter: T.oneOfType([T.func, T.instanceOf(null)]),
-  onBottomLeave: T.oneOfType([T.func, T.instanceOf(null)]),
-
-  // scroll direction
-  onScrollDirectionChange: T.oneOfType([T.func, T.instanceOf(null)]),
-}
-
-VerticalScroller.defaultProps = {
-  height: '100%',
-  width: '100%',
-  showShadow: true,
-  shadowSize: SIZE.SMALL,
-  barSize: SIZE.SMALL,
-  autoHide: true,
-  showOnHover: false,
-  withBorder: false,
-  onTopEnter: null,
-  onTopLeave: null,
-  onBottomEnter: null,
-  onBottomLeave: null,
-  onScrollDirectionChange: null,
-}
-
 export default React.memo(VerticalScroller)

src/components/CustomScroller/index.js

@@ -0,0 +1,43 @@
+import React from 'react'
+
+import type { TSIZE_SML } from '@/spec'
+import type { TDirection, TScrollDirection } from './spec'
+
+import HorizontalScroller from './HorizontalScroller'
+import VerticalScroller from './VerticalScroller'
+
+export type TProps = {
+  direction: TDirection
+  children: React.ReactNode
+  height?: string
+  innerHeight?: string
+  width?: string
+  showShadow?: boolean
+  shadowSize?: TSIZE_SML
+  barSize?: TSIZE_SML
+  // hack for custom scrollbar
+  autoHide?: boolean
+  showOnHover?: boolean
+  withBorder?: boolean
+  onTopEnter?: () => void
+  onTopLeave?: () => void
+  onBottomEnter?: () => void
+  onBottomLeave?: () => void
+
+  // scroll direction
+  onScrollDirectionChange?: (dir: TScrollDirection) => void
+}
+
+const CustomScroller: React.FC<TProps> = ({
+  children,
+  direction = 'vertical',
+  ...restProps
+}) => {
+  return direction === 'vertical' ? (
+    <VerticalScroller {...restProps}>{children}</VerticalScroller>
+  ) : (
+    <HorizontalScroller {...restProps}>{children}</HorizontalScroller>
+  )
+}
+
+export default React.memo(CustomScroller)

src/components/CustomScroller/index.tsx

@@ -0,0 +1,3 @@
+export type TDirection = 'vertical' | 'horizontal'
+
+export type TScrollDirection = 'up' | 'down'

src/components/CustomScroller/spec.ts

@@ -6,12 +6,12 @@ import { getShadowBackground, getShadowSize, getScrollbarThin } from './metrics'
 import { WrapperBase, ScrollWrapperBase, ShadowBarBase } from './index'
 
 type TBar = {
-  showOnHover: boolean
-  barSize: string
-  withBorder: boolean
-  shadowSize: string
-  height: string
-  innerHeight: string
+  showOnHover?: boolean
+  barSize?: string
+  withBorder?: boolean
+  shadowSize?: string
+  height?: string
+  innerHeight?: string
 }
 
 export const Wrapper = styled(WrapperBase)<{ barSize: string }>`

src/components/CustomScroller/styles/horizontal_scroller.ts

@@ -5,9 +5,11 @@ import { WrapperBase, ScrollWrapperBase, ShadowBarBase } from './index'
 import { getShadowBackground, getShadowSize, getScrollbarThin } from './metrics'
 
 type TBar = {
-  showOnHover: boolean
-  barSize: string
-  withBorder: boolean
+  width?: string
+  height: string
+  barSize?: string
+  showOnHover?: boolean
+  withBorder?: boolean
   shadowSize: string
 }
 export const Wrapper = styled(WrapperBase)<TBar>`

src/components/CustomScroller/styles/vertical_scroller.ts

@@ -7,7 +7,7 @@
 import React, { useEffect } from 'react'
 
 import type { Nullable, TSEO } from '@/spec'
-import { ANCHOR } from '@/constant'
+import { ANCHOR, SIZE } from '@/constant'
 import AnalysisService from '@/services/Analysis'
 import { useNetwork, useShortcut, usePlatform, useDevice } from '@/hooks'
 import { pluggedIn } from '@/utils'
@@ -102,7 +102,7 @@ const GlobalLayoutContainer: React.FC<TProps> = ({
                   <CustomScroller
                     direction="vertical"
                     height="100vh"
-                    barSize="medium"
+                    barSize={SIZE.MEDIUM}
                     showShadow={false}
                     onScrollDirectionChange={(direction) =>
                       bodyScrollDirectionOnChange(direction)