From c7fff60e453a66ec61ebed8b27b87ad5e1f6c428 Mon Sep 17 00:00:00 2001 From: mydearxym Date: Sat, 20 Mar 2021 12:07:47 +0800 Subject: [PATCH] chore(js->ts): covert scrollbar && re-org/fix --- ...ntalScroller.js => HorizontalScroller.tsx} | 68 +++++--------- ...rticalScroller.js => VerticalScroller.tsx} | 92 +++++++------------ src/components/CustomScroller/index.js | 14 --- src/components/CustomScroller/index.tsx | 43 +++++++++ src/components/CustomScroller/spec.ts | 3 + .../styles/horizontal_scroller.ts | 12 +-- .../styles/vertical_scroller.ts | 8 +- src/containers/layout/GlobalLayout/index.tsx | 4 +- src/spec/index.ts | 35 +++---- src/spec/size.ts | 15 ++- src/spec/theme.ts | 25 +++++ utils/constant/size.ts | 10 +- 12 files changed, 169 insertions(+), 160 deletions(-) rename src/components/CustomScroller/{HorizontalScroller.js => HorizontalScroller.tsx} (69%) rename src/components/CustomScroller/{VerticalScroller.js => VerticalScroller.tsx} (67%) delete mode 100755 src/components/CustomScroller/index.js create mode 100755 src/components/CustomScroller/index.tsx create mode 100644 src/components/CustomScroller/spec.ts create mode 100644 src/spec/theme.ts diff --git a/src/components/CustomScroller/HorizontalScroller.js b/src/components/CustomScroller/HorizontalScroller.tsx similarity index 69% rename from src/components/CustomScroller/HorizontalScroller.js rename to src/components/CustomScroller/HorizontalScroller.tsx index e2badd023..f7f90a188 100755 --- a/src/components/CustomScroller/HorizontalScroller.js +++ b/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 = ({ + 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 ( - + {showShadow && ( + +// vertical version +const VerticalScroller: React.FC = ({ + 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) diff --git a/src/components/CustomScroller/index.js b/src/components/CustomScroller/index.js deleted file mode 100755 index 3ad1de566..000000000 --- a/src/components/CustomScroller/index.js +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react' - -import HorizontalScroller from './HorizontalScroller' -import VerticalScroller from './VerticalScroller' - -const CustomScroller = ({ direction, ...restProps }) => { - return direction === 'vertical' ? ( - - ) : ( - - ) -} - -export default React.memo(CustomScroller) diff --git a/src/components/CustomScroller/index.tsx b/src/components/CustomScroller/index.tsx new file mode 100755 index 000000000..0afb67c3b --- /dev/null +++ b/src/components/CustomScroller/index.tsx @@ -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 = ({ + children, + direction = 'vertical', + ...restProps +}) => { + return direction === 'vertical' ? ( + {children} + ) : ( + {children} + ) +} + +export default React.memo(CustomScroller) diff --git a/src/components/CustomScroller/spec.ts b/src/components/CustomScroller/spec.ts new file mode 100644 index 000000000..87fbd9c52 --- /dev/null +++ b/src/components/CustomScroller/spec.ts @@ -0,0 +1,3 @@ +export type TDirection = 'vertical' | 'horizontal' + +export type TScrollDirection = 'up' | 'down' diff --git a/src/components/CustomScroller/styles/horizontal_scroller.ts b/src/components/CustomScroller/styles/horizontal_scroller.ts index 4b90eeca5..7de523347 100755 --- a/src/components/CustomScroller/styles/horizontal_scroller.ts +++ b/src/components/CustomScroller/styles/horizontal_scroller.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 }>` diff --git a/src/components/CustomScroller/styles/vertical_scroller.ts b/src/components/CustomScroller/styles/vertical_scroller.ts index 74ccd914c..a42c86a9c 100755 --- a/src/components/CustomScroller/styles/vertical_scroller.ts +++ b/src/components/CustomScroller/styles/vertical_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)` diff --git a/src/containers/layout/GlobalLayout/index.tsx b/src/containers/layout/GlobalLayout/index.tsx index 4a77e938d..ce6f638ae 100755 --- a/src/containers/layout/GlobalLayout/index.tsx +++ b/src/containers/layout/GlobalLayout/index.tsx @@ -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 = ({ bodyScrollDirectionOnChange(direction) diff --git a/src/spec/index.ts b/src/spec/index.ts index 9feebb528..f1da8d563 100644 --- a/src/spec/index.ts +++ b/src/spec/index.ts @@ -1,17 +1,19 @@ import { TRootStore as RootStoreType } from '@/stores/RootStore' -export type { TSIZE, TSIZE_TS, TSIZE_TSM, TSIZE_SML, TSIZE_SM } from './size' +export type { + TSIZE, + TSIZE_T, + TSIZE_S, + TSIZE_M, + TSIZE_L, + TSIZE_TS, + TSIZE_TSM, + TSIZE_SML, + TSIZE_SM, +} from './size' export type { TButton } from './comp' -export type TThemeName = - | 'cyan' - | 'solarizedDark' - | 'purple' - | 'yellow' - | 'github' - | 'Green' - | 'ironGreen' - | 'monokai' +export type { TTheme, TThemeMap, TThemeName } from './theme' export type TRoute = { communityPath?: string @@ -80,19 +82,6 @@ export type TViewing = { post: TArticle } -// export type TTheme = ((obj: any) => unknown) | string -export type TTheme = any -// export type TTheme = string - -export type TThemeMap = { - toast: { - successBar: string - errorBar: string - warnBar: string - infoBar: string - } -} - // google analytis format export type GA_EVENT = { action: string diff --git a/src/spec/size.ts b/src/spec/size.ts index 445e6e44f..94802a021 100644 --- a/src/spec/size.ts +++ b/src/spec/size.ts @@ -1,7 +1,12 @@ // all size -export type TSIZE = 'TINY' | 'SMALL' | 'MEDIUM' | 'LARGE' +export type TSIZE = 'tiny' | 'small' | 'medium' | 'large' -export type TSIZE_TS = 'TINY' | 'SMALL' -export type TSIZE_TSM = 'TINY' | 'SMALL' | 'MEDIUM' -export type TSIZE_SML = 'SMALL' | 'MEDIUM' | 'LARGE' -export type TSIZE_SM = 'SMALL' | 'MEDIUM' +export type TSIZE_T = 'tiny' +export type TSIZE_S = 'small' +export type TSIZE_M = 'medium' +export type TSIZE_L = 'large' + +export type TSIZE_TS = TSIZE_T | TSIZE_S +export type TSIZE_SM = TSIZE_T | TSIZE_M +export type TSIZE_TSM = TSIZE_T | TSIZE_S | TSIZE_M +export type TSIZE_SML = TSIZE_S | TSIZE_M | TSIZE_L diff --git a/src/spec/theme.ts b/src/spec/theme.ts new file mode 100644 index 000000000..47301a45e --- /dev/null +++ b/src/spec/theme.ts @@ -0,0 +1,25 @@ +export type TThemeName = + | 'cyan' + | 'solarizedDark' + | 'purple' + | 'yellow' + | 'github' + | 'Green' + | 'ironGreen' + | 'monokai' + +// export type TTheme = ((obj: any) => unknown) | string +export type TTheme = any +// export type TTheme = string + +export type TThemeMap = { + _meta?: { + category: string // TODO: 'dark' | 'light' + } + toast?: { + successBar: string + errorBar: string + warnBar: string + infoBar: string + } +} diff --git a/utils/constant/size.ts b/utils/constant/size.ts index b43cb7075..9ed8ef8d1 100644 --- a/utils/constant/size.ts +++ b/utils/constant/size.ts @@ -1,8 +1,10 @@ +import type { TSIZE_T, TSIZE_S, TSIZE_M, TSIZE_L } from '@/spec' + const SIZE = { - TINY: 'tiny', - SMALL: 'small', - MEDIUM: 'medium', - LARGE: 'large', + TINY: 'tiny' as TSIZE_T, + SMALL: 'small' as TSIZE_S, + MEDIUM: 'medium' as TSIZE_M, + LARGE: 'large' as TSIZE_L, } export default SIZE