From e52bedc65280b05a014ec7895d25d6e12047aceb Mon Sep 17 00:00:00 2001 From: mydearxym Date: Sun, 26 Nov 2023 20:51:02 +0800 Subject: [PATCH] refactor(custom-scroll): debug in drawer --- package-lock.json | 18 ++- package.json | 3 +- src/containers/Mushroom/logic.ts | 14 ++- src/containers/Mushroom/store.ts | 5 + .../editor/TagSettingEditor/index.tsx | 5 +- .../editor/WallpaperEditor/index.tsx | 10 +- .../thread/PostThread/ThreadSidebar/index.tsx | 2 +- .../PostThread/styles/thread_sidebar/index.ts | 3 +- .../tool/Drawer/Content/Content.tsx | 118 ++++++++++-------- .../tool/Drawer/Content/DesktopView.tsx | 54 ++++---- .../tool/Drawer/Content/MobileView.tsx | 16 +-- src/containers/tool/Drawer/Content/index.tsx | 18 +-- src/containers/tool/Drawer/Viewer/index.tsx | 5 +- src/containers/tool/Drawer/constant.ts | 2 + src/containers/tool/Drawer/dynamics.tsx | 64 ---------- src/containers/tool/Drawer/index.tsx | 10 +- .../tool/Drawer/styles/content/index.ts | 18 ++- src/containers/tool/Drawer/styles/index.ts | 4 +- src/hooks/useUserListModal.ts | 25 ++++ src/widgets/AccountUnit/index.tsx | 14 ++- .../CustomScroller/VerticalScroller.tsx | 80 ++++-------- src/widgets/CustomScroller/index.tsx | 8 +- src/widgets/CustomScroller/styles/index.ts | 4 +- .../styles/vertical_scroller.ts | 9 +- src/widgets/GlobalLayout/Addon.tsx | 6 +- src/widgets/Modal/styles/index.ts | 6 +- src/widgets/UserList/index.tsx | 2 +- src/widgets/UserList/styles/index.ts | 2 +- src/widgets/UserList/styles/user_item.ts | 7 +- src/widgets/UserListModal/index.tsx | 27 ++++ src/widgets/UserListModal/styles/index.ts | 19 +++ utils/constant/event.ts | 3 + utils/signal.ts | 12 +- 33 files changed, 307 insertions(+), 286 deletions(-) delete mode 100755 src/containers/tool/Drawer/dynamics.tsx create mode 100644 src/hooks/useUserListModal.ts create mode 100644 src/widgets/UserListModal/index.tsx create mode 100644 src/widgets/UserListModal/styles/index.ts diff --git a/package-lock.json b/package-lock.json index b1de9c2bd..79098c608 100755 --- a/package-lock.json +++ b/package-lock.json @@ -35,7 +35,8 @@ "next-compose-plugins": "^2.2.0", "next-i18next": "4.4.1", "next-pwa": "^5.6.0", - "overlayscrollbars": "^2.1.0", + "overlayscrollbars": "^2.4.5", + "overlayscrollbars-react": "^0.5.3", "promise-timeout": "^1.3.0", "prop-types": "^15.5.10", "qrcode.react": "^3.1.0", @@ -17427,9 +17428,18 @@ "dev": true }, "node_modules/overlayscrollbars": { - "version": "2.4.4", - "resolved": "https://registry.npmjs.org/overlayscrollbars/-/overlayscrollbars-2.4.4.tgz", - "integrity": "sha512-792lwASLr3FlZER+/P7NseFQjffDEcQOg6HtyBSLrnb3crH+Ybk0tzaljQVQZs0pjGF/xFjyvMKin6whkL0RnQ==" + "version": "2.4.5", + "resolved": "https://registry.npmjs.org/overlayscrollbars/-/overlayscrollbars-2.4.5.tgz", + "integrity": "sha512-4OLCPuZPVdd1HnDLYS4o+kAsOCZwVz6dDA212m8ki/u3isltKyWGVjIv2aqpVHkDRf/P2K98m9Su8pdhihtAIQ==" + }, + "node_modules/overlayscrollbars-react": { + "version": "0.5.3", + "resolved": "https://registry.npmjs.org/overlayscrollbars-react/-/overlayscrollbars-react-0.5.3.tgz", + "integrity": "sha512-mq9D9tbfSeq0cti1kKMf3B3AzsEGwHcRIDX/K49CvYkHz/tKeU38GiahDkIPKTMEAp6lzKCo4x1eJZA6ZFYOxQ==", + "peerDependencies": { + "overlayscrollbars": "^2.0.0", + "react": ">=16.8.0" + } }, "node_modules/p-each-series": { "version": "2.2.0", diff --git a/package.json b/package.json index 017f04d0a..adf4500dc 100755 --- a/package.json +++ b/package.json @@ -64,7 +64,8 @@ "next-compose-plugins": "^2.2.0", "next-i18next": "4.4.1", "next-pwa": "^5.6.0", - "overlayscrollbars": "^2.1.0", + "overlayscrollbars": "^2.4.5", + "overlayscrollbars-react": "^0.5.3", "promise-timeout": "^1.3.0", "prop-types": "^15.5.10", "qrcode.react": "^3.1.0", diff --git a/src/containers/Mushroom/logic.ts b/src/containers/Mushroom/logic.ts index edef935a1..64f3bd150 100644 --- a/src/containers/Mushroom/logic.ts +++ b/src/containers/Mushroom/logic.ts @@ -34,7 +34,12 @@ let sub$ = null const { SR71, $solver, asyncRes, asyncErr } = asyncSuit const sr71$ = new SR71({ // @ts-ignore - receive: [EVENT.UPVOTE_ARTICLE, EVENT.UPDATE_VIEWING_ARTICLE, EVENT.REFRESH_ARTICLES], + receive: [ + EVENT.UPVOTE_ARTICLE, + EVENT.UPDATE_VIEWING_ARTICLE, + EVENT.REFRESH_ARTICLES, + EVENT.LIST_USER_MODAL, + ], }) // custromScroll's scroll direction change @@ -168,6 +173,13 @@ const DataSolver = [ store.syncArticle(article) }, }, + { + match: asyncRes(EVENT.LIST_USER_MODAL), + action: () => { + store.mark({ showUserListModal: true }) + }, + }, + { match: asyncRes(EVENT.UPVOTE_ARTICLE), action: (_data) => { diff --git a/src/containers/Mushroom/store.ts b/src/containers/Mushroom/store.ts index 1daf2040f..6459083c1 100644 --- a/src/containers/Mushroom/store.ts +++ b/src/containers/Mushroom/store.ts @@ -22,6 +22,8 @@ import { T, getParent, markStates, Instance, toJS, useMobxContext } from '@/mobx const MushroomStore = T.model('MushroomStore', { online: T.opt(T.bool, true), isMobile: T.opt(T.bool, false), + + showUserListModal: T.opt(T.bool, false), // follow the mac convention bodyScrollDirection: T.opt(T.enum(['up', 'down']), 'up'), // activeState; @@ -110,6 +112,9 @@ const MushroomStore = T.model('MushroomStore', { const root = getParent(self) as TRootStore return root.dashboardThread.clearLocalSettings() }, + closeUserListModal(): void { + self.showUserListModal = false + }, authWarning(options): void { const root = getParent(self) as TRootStore root.authWarning(options) diff --git a/src/containers/editor/TagSettingEditor/index.tsx b/src/containers/editor/TagSettingEditor/index.tsx index 8d176ab58..a792e8d6a 100644 --- a/src/containers/editor/TagSettingEditor/index.tsx +++ b/src/containers/editor/TagSettingEditor/index.tsx @@ -42,18 +42,17 @@ import { observer } from 'mobx-react-lite' // const log = buildLog('C:TagSettingEditor') type TProps = { - testid: string mode?: TChangeMode } -const TagSettingEditor: FC = ({ testid, mode = CHANGE_MODE.UPDATE }) => { +const TagSettingEditor: FC = ({ mode = CHANGE_MODE.UPDATE }) => { const store = useStore() useInit(store, mode) const { editingTagData: editingTag, curCategory, categoryOptions, processing } = store return ( - + { - + {tab === TAB.BUILDIN && } {tab === TAB.UPLOAD && } diff --git a/src/containers/thread/PostThread/ThreadSidebar/index.tsx b/src/containers/thread/PostThread/ThreadSidebar/index.tsx index 218df8ce9..5c1f69c64 100644 --- a/src/containers/thread/PostThread/ThreadSidebar/index.tsx +++ b/src/containers/thread/PostThread/ThreadSidebar/index.tsx @@ -77,7 +77,7 @@ const ThreadSidebar: FC = () => { fallback={} /> ))} - listUsers()}>+2 + listUsers('drawer')}>+2 diff --git a/src/containers/thread/PostThread/styles/thread_sidebar/index.ts b/src/containers/thread/PostThread/styles/thread_sidebar/index.ts index 69e995284..cbab5fa4e 100644 --- a/src/containers/thread/PostThread/styles/thread_sidebar/index.ts +++ b/src/containers/thread/PostThread/styles/thread_sidebar/index.ts @@ -36,12 +36,13 @@ export const MoreNum = styled.div` color: ${theme('article.digest')}; font-size: 15px; margin-top: 1px; - margin-left: 2px; + margin-left: 4px; letter-spacing: 1px; opacity: 0.8; &:hover { color: ${theme('article.title')}; + background: ${theme('hoverBg')}; opacity: 1; cursor: pointer; } diff --git a/src/containers/tool/Drawer/Content/Content.tsx b/src/containers/tool/Drawer/Content/Content.tsx index e981de1ea..9a5d9883f 100644 --- a/src/containers/tool/Drawer/Content/Content.tsx +++ b/src/containers/tool/Drawer/Content/Content.tsx @@ -1,68 +1,71 @@ -import { FC } from 'react' +import { FC, Suspense } from 'react' import TYPE from '@/constant/type' // import ModeLineMenu from '@/containers/unit/ModeLineMenu' -import type { TUser } from '@/spec' - -import type { TExtraInfo } from '../spec' - -import { - ArticleViewer, - MailsViewer, - // editors - AccountEditor, - WallpaperEditor, - // utils - DashboardDesc, - ArticleEditor, - PassportEditor, - TagSettingEditor, - SearchPanel, - UserList, -} from '../dynamics' + +import ArticleViewer from '@/containers/viewer/ArticleViewer' +import LavaLampLoading from '@/widgets/Loading/LavaLampLoading' + +import TagSettingEditor from '@/containers/editor/TagSettingEditor' +import PassportEditor from '@/containers/editor/PassportEditor' +import ArticleEditor from '@/containers/editor/ArticleEditor' +import WallpaperEditor from '@/containers/editor/WallpaperEditor' +import AccountEditor from '@/containers/editor/AccountEditor' +import MailsViewer from '@/containers/viewer/MailsViewer' + +import UserList from '@/widgets/UserList' +import SearchPanel from '@/widgets/SearchPanel' type TProps = { type: string - attUser: TUser - extraInfo: TExtraInfo } -const Content: FC = ({ type, attUser, extraInfo }) => { - if (!type) return null +const Content: FC = ({ type }) => { + if (!type) return const { DRAWER } = TYPE switch (type) { case DRAWER.SEARCH_PANEL: - return + return ( + }> + + + ) case DRAWER.ACCOUNT_EDIT: - // @ts-ignore - return + return ( + }> + + + ) case DRAWER.PASSPORT_EDITOR: - // @ts-ignore - return + return ( + }> + + + ) case DRAWER.G_EDITOR: - return + return ( + }> + + + ) case DRAWER.MAILS_VIEW: - // @ts-ignore - return - - case DRAWER.DASHBOARD_DESC: { - const { postLayout, dashboardDescLayout } = extraInfo - - const activeSettings = { - postLayout, - } - // @ts-ignore - return - } + return ( + }> + + + ) case DRAWER.CUSTOM_BG_EDITOR: - // @ts-ignore - return + return ( + }> + + + ) case DRAWER.MODELINE_MENU: return null @@ -70,23 +73,36 @@ const Content: FC = ({ type, attUser, extraInfo }) => { // return case DRAWER.LIST_USERS: { - // @ts-ignore - return + return ( + }> + + + + ) } case DRAWER.CREATE_TAG: { - // @ts-ignore - return + return ( + }> + + + ) } case DRAWER.EDIT_TAG: { - // @ts-ignore - return + return ( + }> + + + ) } default: { - // @ts-ignore - return + return ( + }> + + + ) } } } diff --git a/src/containers/tool/Drawer/Content/DesktopView.tsx b/src/containers/tool/Drawer/Content/DesktopView.tsx index 36dabff2f..631225243 100755 --- a/src/containers/tool/Drawer/Content/DesktopView.tsx +++ b/src/containers/tool/Drawer/Content/DesktopView.tsx @@ -1,52 +1,44 @@ import { FC, useEffect, useRef, memo } from 'react' +import 'overlayscrollbars/styles/overlayscrollbars.css' +import { useOverlayScrollbars } from 'overlayscrollbars-react' + import { DRAWER_SCROLLER } from '@/constant/dom' -import CustomScroller from '@/widgets/CustomScroller' +import { scrollDrawerToTop } from '@/dom' +// import CustomScroller from '@/widgets/CustomScroller' -import type { TExtraInfo } from '../spec' import Content from './Content' import { Wrapper } from '../styles/content' -import { isWideMode } from '../styles/metrics' type TProps = { visible: boolean type: string // TODO: - attUser: any // TODO: - extraInfo: TExtraInfo } -const DesktopView: FC = ({ visible, type, attUser, extraInfo }) => { +const DesktopView: FC = ({ visible, type }) => { const ref = useRef(null) - /* - * reset when content visible - * scroll to top always - */ + const options = { + scrollbars: { autoHide: 'leave', autoHideDelay: 300, autoHideSuspend: true }, + } + + // @ts-ignore + const [initialize, instance] = useOverlayScrollbars({ options, defer: false }) + useEffect(() => { - if (visible && ref?.current) { - ref.current.scrollIntoView() + if (initialize && ref?.current) { + initialize(ref?.current) + + const instanceEl = instance?.()?.elements() + const { viewport } = instanceEl + window[DRAWER_SCROLLER] = viewport + scrollDrawerToTop() } - }, [visible, ref]) - - if (isWideMode(type)) { - return ( - - - - - - ) - } + }, [initialize, ref, instance]) return ( - - + + ) } diff --git a/src/containers/tool/Drawer/Content/MobileView.tsx b/src/containers/tool/Drawer/Content/MobileView.tsx index e30fd3dc8..4214b6167 100755 --- a/src/containers/tool/Drawer/Content/MobileView.tsx +++ b/src/containers/tool/Drawer/Content/MobileView.tsx @@ -2,7 +2,7 @@ import { FC, useEffect, useRef, useState, memo } from 'react' import CustomScroller from '@/widgets/CustomScroller' -import type { TSwipeOption, TExtraInfo } from '../spec' +import type { TSwipeOption } from '../spec' import Content from './Content' import { getMobileContentHeight } from '../styles/metrics' import { Wrapper } from '../styles/content' @@ -12,17 +12,9 @@ type TProps = { visible: boolean options: TSwipeOption type: string // TODO - attUser: any // TODO - extraInfo: TExtraInfo } -const MobileView: FC = ({ - visible, - options, - type, - attUser, - extraInfo, -}) => { +const MobileView: FC = ({ visible, options, type }) => { const ref = useRef(null) const [topEnterTimer, setTopEnterTimer] = useState(null) @@ -96,8 +88,8 @@ const MobileView: FC = ({ onBottomLeave={() => toggleSwipeAviliable('up', false)} autoHide > - - + + ) diff --git a/src/containers/tool/Drawer/Content/index.tsx b/src/containers/tool/Drawer/Content/index.tsx index 99223d541..c856a2533 100755 --- a/src/containers/tool/Drawer/Content/index.tsx +++ b/src/containers/tool/Drawer/Content/index.tsx @@ -3,17 +3,21 @@ import dynamic from 'next/dynamic' import useMobileDetect from '@groupher/use-mobile-detect-hook' -const DesktopView = dynamic(() => import('./DesktopView'), { ssr: false }) -const MobileView = dynamic(() => import('./MobileView'), { ssr: false }) +import DesktopView from './DesktopView' +import MobileView from './MobileView' + +// const DesktopView = dynamic(() => import('./DesktopView'), { ssr: false }) +// const MobileView = dynamic(() => import('./MobileView'), { ssr: false }) const Content = (props) => { const { isMobile } = useMobileDetect() - return ( - - {!isMobile ? : } - - ) + // eslint-disable-next-line react/destructuring-assignment + if (!props.visible) { + return null + } + + return {!isMobile ? : } } export default memo(Content) diff --git a/src/containers/tool/Drawer/Viewer/index.tsx b/src/containers/tool/Drawer/Viewer/index.tsx index 4b42737c2..595e325f0 100755 --- a/src/containers/tool/Drawer/Viewer/index.tsx +++ b/src/containers/tool/Drawer/Viewer/index.tsx @@ -1,10 +1,9 @@ import { Fragment } from 'react' -import dynamic from 'next/dynamic' import useMobileDetect from '@groupher/use-mobile-detect-hook' -const DesktopView = dynamic(() => import('./DesktopView'), { ssr: false }) -const MobileView = dynamic(() => import('./MobileView'), { ssr: false }) +import DesktopView from './DesktopView' +import MobileView from './MobileView' /** * @param {object} props diff --git a/src/containers/tool/Drawer/constant.ts b/src/containers/tool/Drawer/constant.ts index c9b754a97..4dabb6678 100755 --- a/src/containers/tool/Drawer/constant.ts +++ b/src/containers/tool/Drawer/constant.ts @@ -3,6 +3,8 @@ import { concat, keys, reduce } from 'ramda' import TYPE from '@/constant/type' import { ARTICLE_THREAD } from '@/constant/thread' +export const NARROW_HEIGHT_OFFSET = 25 + export const ARTICLE_VIEWER_TYPES = reduce( concat, // @ts-ignore diff --git a/src/containers/tool/Drawer/dynamics.tsx b/src/containers/tool/Drawer/dynamics.tsx deleted file mode 100755 index 762c54d24..000000000 --- a/src/containers/tool/Drawer/dynamics.tsx +++ /dev/null @@ -1,64 +0,0 @@ -/* eslint-disable react/display-name */ -import dynamic from 'next/dynamic' - -import LavaLampLoading from '@/widgets/Loading/LavaLampLoading' -// import EditorLoading from '@/widgets/Loading/EditorLoading' - -import { LavaLoadingWrapper } from './styles' - -const CommonLoading = () => { - return ( - - - - ) -} - -// editor style loading config -// const editorConfig = { -// // @ts-ignore -// loading: () => , -// ssr: false, -// } - -// viewers -export const ArticleViewer = dynamic(() => import('@/containers/viewer/ArticleViewer'), { - loading: () => , -}) - -export const MailsViewer = dynamic(() => import('@/containers/viewer/MailsViewer'), { - loading: () => , -}) - -// editors -export const AccountEditor = dynamic(() => import('@/containers/editor/AccountEditor'), { - loading: () => , -}) - -export const WallpaperEditor = dynamic(() => import('@/containers/editor/WallpaperEditor'), { - loading: () => , -}) - -export const DashboardDesc = dynamic(() => import('@/widgets/DashboardDesc'), { - loading: () => , -}) - -export const ArticleEditor = dynamic(() => import('@/containers/editor/ArticleEditor'), { - loading: () => , -}) - -export const PassportEditor = dynamic(() => import('@/containers/editor/PassportEditor'), { - loading: () => , -}) - -export const TagSettingEditor = dynamic(() => import('@/containers/editor/TagSettingEditor'), { - loading: () => , -}) - -export const SearchPanel = dynamic(() => import('@/widgets/SearchPanel'), { - loading: () => , -}) - -export const UserList = dynamic(() => import('@/widgets/UserList'), { - loading: () => , -}) diff --git a/src/containers/tool/Drawer/index.tsx b/src/containers/tool/Drawer/index.tsx index 67b74d1e1..4ff017242 100755 --- a/src/containers/tool/Drawer/index.tsx +++ b/src/containers/tool/Drawer/index.tsx @@ -7,10 +7,11 @@ import { FC } from 'react' import { observer } from 'mobx-react-lite' -import type { TMetric } from '@/spec' import { buildLog } from '@/logger' + import useWindowResize from '@/hooks/useWindowResize' import useShortcut from '@/hooks/useShortcut' +import useMetric from '@/hooks/useMetric' import { useStore } from './store' @@ -22,12 +23,9 @@ import { useInit, closeDrawer } from './logic' /* eslint-disable-next-line */ const log = buildLog('C:Preview') -type TProps = { - metric: TMetric -} - -const Drawer: FC = ({ metric }) => { +const Drawer: FC = () => { const store = useStore() + const metric = useMetric() const { width: windowWidth } = useWindowResize() diff --git a/src/containers/tool/Drawer/styles/content/index.ts b/src/containers/tool/Drawer/styles/content/index.ts index 7234dc051..811330719 100755 --- a/src/containers/tool/Drawer/styles/content/index.ts +++ b/src/containers/tool/Drawer/styles/content/index.ts @@ -1,16 +1,14 @@ import styled from 'styled-components' -import css from '@/css' +import { NARROW_HEIGHT_OFFSET } from '../../constant' +import { isWideMode } from '../metrics' +// import css from '@/css' -export const Wrapper = styled.div` +export const Wrapper = styled.div<{ type: string }>` width: 100%; - /* NOTE: those property must exist otherwise custom scroller will not work*/ - height: 100%; - - /* 30px is the modeLine height */ - ${css.media.mobile` - height: auto; - `}; + height: ${({ type }) => + isWideMode(type) ? '100vh' : `calc(100vh - ${NARROW_HEIGHT_OFFSET * 2}px)`}; + overflow-y: scroll; ` -export const holder = 1 +export const InnerWrapper = styled.div`` diff --git a/src/containers/tool/Drawer/styles/index.ts b/src/containers/tool/Drawer/styles/index.ts index bbd2055ec..ad85c750a 100755 --- a/src/containers/tool/Drawer/styles/index.ts +++ b/src/containers/tool/Drawer/styles/index.ts @@ -5,6 +5,7 @@ import css, { theme, zIndex } from '@/css' import { pixelAdd } from '@/dom' import type { TDrawer, TSwipe } from '../spec' +import { NARROW_HEIGHT_OFFSET } from '../constant' import { getTransform, getMobileContentHeight, @@ -93,7 +94,8 @@ export const DrawerContent = styled.div<{ type: string }>` position: relative; width: 100%; background-color: ${theme('drawer.bg')}; - height: ${({ type }) => (isWideMode(type) ? '100vh' : 'calc(100vh - 50px)')}; + height: ${({ type }) => + isWideMode(type) ? '100vh' : `calc(100vh - ${NARROW_HEIGHT_OFFSET * 2}px)`}; border-radius: ${({ type }) => (isWideMode(type) ? 0 : '10px')}; box-shadow: ${({ type }) => isWideMode(type) ? theme('drawer.shadow') : theme('drawer.shadowLite')}; diff --git a/src/hooks/useUserListModal.ts b/src/hooks/useUserListModal.ts new file mode 100644 index 000000000..f37f7c693 --- /dev/null +++ b/src/hooks/useUserListModal.ts @@ -0,0 +1,25 @@ +import { useContext } from 'react' +import { MobXProviderContext } from 'mobx-react' + +/** + * NOTE: should use observer to wrap the component who use this hook + */ +type TRes = { + show: boolean + onClose: () => void +} + +const useUserListModal = (): TRes => { + const { store } = useContext(MobXProviderContext) + + if (store === null) { + throw new Error('Store cannot be null, please add a context provider') + } + + return { + show: store.mushroom.showUserListModal, + onClose: () => store.mushroom.closeUserListModal(), + } +} + +export default useUserListModal diff --git a/src/widgets/AccountUnit/index.tsx b/src/widgets/AccountUnit/index.tsx index c810019ad..fd7758fef 100644 --- a/src/widgets/AccountUnit/index.tsx +++ b/src/widgets/AccountUnit/index.tsx @@ -15,6 +15,7 @@ import useAvatarLayout from '@/hooks/useAvatarLayout' import useBannerLayout from '@/hooks/useBannerLayout' import { BANNER_LAYOUT } from '@/constant/layout' +import ImgFallback from '@/widgets/ImgFallback' import { SpaceGrow } from '@/widgets/Common' import ThemeSwitch from '@/widgets/ThemeSwitch' @@ -28,7 +29,8 @@ type TProps = { } & TSpace const AccountUnit: FC = ({ withName = false, ...restProps }) => { - const { isLogin, avatar, nickname } = useAccount() + const user = useAccount() + const { isLogin, avatar, nickname } = user const avatarLayout = useAvatarLayout() const bannerLayout = useBannerLayout() @@ -42,7 +44,15 @@ const AccountUnit: FC = ({ withName = false, ...restProps }) => { )} - {isLogin ? : } + {isLogin ? ( + } + /> + ) : ( + + )} {!isLogin && withName && 未登入} {isLogin && withName && {nickname}} diff --git a/src/widgets/CustomScroller/VerticalScroller.tsx b/src/widgets/CustomScroller/VerticalScroller.tsx index 95b339fec..03115036a 100755 --- a/src/widgets/CustomScroller/VerticalScroller.tsx +++ b/src/widgets/CustomScroller/VerticalScroller.tsx @@ -4,14 +4,14 @@ * */ -import { FC, useState, useRef, useCallback, memo } from 'react' +import { FC, useState, Fragment, useCallback, memo } from 'react' +import 'overlayscrollbars/styles/overlayscrollbars.css' // NOTE: do not use ViewportTracker here, it cause crash import { Waypoint } from 'react-waypoint' +import { OverlayScrollbarsComponent } from 'overlayscrollbars-react' import SIZE from '@/constant/size' -import { debounce } from '@/helper' -import useCustomScroll from '@/hooks/useCustomScroll' import useTheme from '@/hooks/useTheme' // import ViewportTracker from '@/widgets/ViewportTracker' @@ -20,8 +20,8 @@ import type { TProps as TScrollProps } from '.' import { Wrapper, + ViewHolder, // - ScrollWrapper, TopShadowBar, BottomShadowBar, } from './styles/vertical_scroller' @@ -46,7 +46,7 @@ const VerticalScroller: FC = ({ onScrollDirectionChange, instanceKey = null, }) => { - const [showTopShadow, setShowTopShadow] = useState(false) + const [showTopShadow, setShowTopShadow] = useState(true) const [showBottomShadow, setShowBottomShadow] = useState(true) // record last y position after scroll @@ -78,53 +78,15 @@ const VerticalScroller: FC = ({ const { _meta: themeMeta } = themeMap const { category: themeCategory } = themeMeta - const ref = useRef(null) - const scrollInstance = useCustomScroll(ref, { - instanceKey, - 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), - onScrollStart: () => { - const position = scrollInstance?.scroll().position - if (position) { - const currentY = position.y - setLastYPosition(currentY) - - currentY > lastYPosition - ? onScrollDirectionChange?.('up') - : onScrollDirectionChange?.('down') - } - }, - onScrollStop: () => { - const position = scrollInstance?.scroll().position - if (position) { - const currentY = position.y - currentY > lastYPosition - ? onScrollDirectionChange?.('up') - : onScrollDirectionChange?.('down') - } - }, - }, - }) - + // return ( - + {showShadow && ( = ({ /> )} - - {/* @ts-ignore */} + + -
{children}
- {/* @ts-ignore */} + {children} + - + {showShadow && ( = ({ withBorder={withBorder} /> )} - + ) } diff --git a/src/widgets/CustomScroller/index.tsx b/src/widgets/CustomScroller/index.tsx index 4e67f3505..e285fdda3 100755 --- a/src/widgets/CustomScroller/index.tsx +++ b/src/widgets/CustomScroller/index.tsx @@ -7,7 +7,7 @@ import HorizontalScroller from './HorizontalScroller' import VerticalScroller from './VerticalScroller' export type TProps = { - direction: TDirection + direction?: TDirection children: ReactNode height?: string innerHeight?: string @@ -29,11 +29,7 @@ export type TProps = { onScrollDirectionChange?: (dir: TScrollDirection) => void } -const CustomScroller: FC = ({ - children, - direction = 'vertical', - ...restProps -}) => { +const CustomScroller: FC = ({ children, direction = 'vertical', ...restProps }) => { return direction === 'vertical' ? ( {children} ) : ( diff --git a/src/widgets/CustomScroller/styles/index.ts b/src/widgets/CustomScroller/styles/index.ts index d039e928c..1efe50ed4 100755 --- a/src/widgets/CustomScroller/styles/index.ts +++ b/src/widgets/CustomScroller/styles/index.ts @@ -5,8 +5,8 @@ import type { TActive } from '@/spec' type TBox = { width: string; height: string } export const WrapperBase = styled.div` - width: ${({ width }) => width}; - height: ${({ height }) => height}; + /* width: ${({ width }) => width}; + height: ${({ height }) => height}; */ ` export const ScrollWrapperBase = styled.div` width: 100%; diff --git a/src/widgets/CustomScroller/styles/vertical_scroller.ts b/src/widgets/CustomScroller/styles/vertical_scroller.ts index 2e6480571..8b6897486 100755 --- a/src/widgets/CustomScroller/styles/vertical_scroller.ts +++ b/src/widgets/CustomScroller/styles/vertical_scroller.ts @@ -5,6 +5,11 @@ import styled from 'styled-components' import { WrapperBase, ScrollWrapperBase, ShadowBarBase } from '.' import { getShadowBackground, getShadowSize, getScrollbarThin } from './metrics' +export const ViewHolder = styled.div` + width: 100%; + height: 1px; +` + type TBar = { width?: string height: string @@ -13,8 +18,10 @@ type TBar = { withBorder?: boolean $shadowSize: string } -export const Wrapper = styled(WrapperBase)` +// export const Wrapper = styled(WrapperBase)` +export const Wrapper = styled.div` position: relative; + border: 1px solid blue; .os-host:not(:hover) { visibility: ${({ $showOnHover }) => ($showOnHover ? 'hidden' : 'inherit')}; diff --git a/src/widgets/GlobalLayout/Addon.tsx b/src/widgets/GlobalLayout/Addon.tsx index e68014b8d..7e94dd0c9 100644 --- a/src/widgets/GlobalLayout/Addon.tsx +++ b/src/widgets/GlobalLayout/Addon.tsx @@ -6,10 +6,10 @@ import { observer } from 'mobx-react-lite' import { Toaster } from 'sonner' import useShortcut from '@/hooks/useShortcut' -import useMetric from '@/hooks/useMetric' import Drawer from '@/containers/tool/Drawer' import ErrorBox from '@/containers/tool/ErrorBox' +import UserListModal from '@/widgets/UserListModal' // import { Drawer } from './dynamic' @@ -17,14 +17,14 @@ const Addon: FC = () => { // const { isMobile } = useMobileDetect() useShortcut('Control+P', () => console.log('# Ctrl P pressed')) - const metric = useMetric() return ( {/* @ts-ignore */} {/* {!isMobile && } */} {/* @ts-ignore */} - + + {/* @ts-ignore */} diff --git a/src/widgets/Modal/styles/index.ts b/src/widgets/Modal/styles/index.ts index 2a12fda48..768902ce6 100755 --- a/src/widgets/Modal/styles/index.ts +++ b/src/widgets/Modal/styles/index.ts @@ -35,10 +35,8 @@ export const Wrapper = styled.div` min-height: 320px; max-height: 65vh; box-shadow: ${theme('modal.shadow')}; - padding-top: 25px; - /* border: 1px solid; */ - /* border-top: 2px solid; */ - border-color: ${({ mode }) => theme('modal.border')}; + border: 1px solid; + border-color: ${theme('popover.borderColor')}; animation: ${animate.jump} 0.3s linear; margin-left: ${({ offsetLeft }) => offsetLeft}; diff --git a/src/widgets/UserList/index.tsx b/src/widgets/UserList/index.tsx index f04b96288..3b058cf50 100644 --- a/src/widgets/UserList/index.tsx +++ b/src/widgets/UserList/index.tsx @@ -6,7 +6,7 @@ import UserItem from './UserItem' import { Wrapper } from './styles' const UserList: FC = () => { - const users = mockUsers(10) + const users = mockUsers(18) return ( diff --git a/src/widgets/UserList/styles/index.ts b/src/widgets/UserList/styles/index.ts index eef34ddf9..6f4133fd2 100644 --- a/src/widgets/UserList/styles/index.ts +++ b/src/widgets/UserList/styles/index.ts @@ -5,8 +5,8 @@ import css, { theme } from '@/css' export const Wrapper = styled.div` ${css.column('align-center')}; width: 100%; - margin-top: 40px; gap: 22px 0; + padding: 0 50px; ` export const Title = styled.div` color: ${theme('article.title')}; diff --git a/src/widgets/UserList/styles/user_item.ts b/src/widgets/UserList/styles/user_item.ts index 9b8b79c5b..adef6a8c1 100644 --- a/src/widgets/UserList/styles/user_item.ts +++ b/src/widgets/UserList/styles/user_item.ts @@ -7,7 +7,11 @@ import Img from '@/Img' export const Wrapper = styled.div` ${css.row('align-start')}; - width: 350px; + width: 100%; + + &:last-child { + margin-bottom: 50px; + } ` export const Avatar = styled(Img)<{ $avatarLayout: TAvatarLayout }>` ${css.size(32)}; @@ -34,6 +38,7 @@ export const Login = styled.div` &:before { content: '@'; font-size: 11px; + margin-right: 1px; } ` export const Bio = styled.div` diff --git a/src/widgets/UserListModal/index.tsx b/src/widgets/UserListModal/index.tsx new file mode 100644 index 000000000..f6919248c --- /dev/null +++ b/src/widgets/UserListModal/index.tsx @@ -0,0 +1,27 @@ +import { FC } from 'react' +import { observer } from 'mobx-react-lite' + +import useUserListModal from '@/hooks/useUserListModal' +import Modal from '@/widgets/Modal' +import CustomScroller from '@/widgets/CustomScroller' +import UserList from '@/widgets/UserList' + +import { Wrapper, ScrollWrapper } from './styles' + +const UserListModal: FC = () => { + const { show, onClose } = useUserListModal() + + return ( + + +

List Modal

+ + + + + + + ) +} + +export default observer(UserListModal) diff --git a/src/widgets/UserListModal/styles/index.ts b/src/widgets/UserListModal/styles/index.ts new file mode 100644 index 000000000..9fb7fea76 --- /dev/null +++ b/src/widgets/UserListModal/styles/index.ts @@ -0,0 +1,19 @@ +import styled from 'styled-components' + +import css, { theme } from '@/css' + +export const Wrapper = styled.div` + ${css.column('align-center')}; + width: 100%; + height: 480px; +` +export const ScrollWrapper = styled.div` + position: relative; + width: 100%; + height: 480px; + overflow-y: scroll; +` +export const Title = styled.div` + color: ${theme('article.title')}; + font-size: 13px; +` diff --git a/utils/constant/event.ts b/utils/constant/event.ts index dcb73052e..4099200b5 100755 --- a/utils/constant/event.ts +++ b/utils/constant/event.ts @@ -77,6 +77,9 @@ const EVENT = { // subscribe SUBSCRIBE: 'SUBSCRIBE', AUTH: 'AUTH', + + // + LIST_USER_MODAL: 'LIST_USER_MODAL', } export default EVENT diff --git a/utils/signal.ts b/utils/signal.ts index eebc0aa9e..7361da07b 100644 --- a/utils/signal.ts +++ b/utils/signal.ts @@ -110,9 +110,15 @@ export const setTag = (): void => { * list users * type: modal or drawer */ -export const listUsers = (): void => { - const type = TYPE.DRAWER.LIST_USERS - send(EVENT.DRAWER.OPEN, { type }) +export const listUsers = (type: 'modal' | 'drawer'): void => { + if (type === 'drawer') { + const type = TYPE.DRAWER.LIST_USERS + send(EVENT.DRAWER.OPEN, { type }) + + return + } + + send(EVENT.LIST_USER_MODAL, { type }) } export const callPassportEditor = (): void => {