From 1ff34c70022367506aada90cabaceaeedb593c3b Mon Sep 17 00:00:00 2001 From: mydearxym Date: Sun, 4 Jul 2021 14:20:24 +0800 Subject: [PATCH 1/4] refactor(sidebar): convert to TS --- src/components/Input/index.tsx | 4 ++ src/components/TabBar/spec.ts | 2 +- .../unit/Sidebar/{Footer.js => Footer.tsx} | 15 +++-- .../unit/Sidebar/{Header.js => Header.tsx} | 17 +++-- .../{LoadingBlocks.js => LoadingBlocks.tsx} | 6 +- .../MenuList/{MenuBar.js => MenuBar.tsx} | 42 ++++++------- .../{NormalMenuList.js => NormalMenuList.tsx} | 24 +++---- .../unit/Sidebar/MenuList/SortableMenuList.js | 43 ------------- .../Sidebar/MenuList/SortableMenuList.tsx | 62 +++++++++++++++++++ .../Sidebar/MenuList/{index.js => index.tsx} | 19 +++--- .../Sidebar/{PullButton.js => PullButton.tsx} | 11 +++- .../{RealSidebar.js => RealSidebar.tsx} | 23 ++++--- .../unit/Sidebar/{index.js => index.tsx} | 12 +++- .../unit/Sidebar/{logic.js => logic.ts} | 44 ++++++------- src/containers/unit/Sidebar/store.ts | 11 +--- src/containers/unit/Sidebar/styles/index.ts | 23 +++---- .../unit/Sidebar/styles/loading_blocks.ts | 5 +- .../unit/Sidebar/styles/menu_list/menu_bar.ts | 4 +- .../Sidebar/{Sidebar.js => styles/sidebar.ts} | 4 +- src/spec/account.ts | 1 + src/spec/community.ts | 4 +- src/spec/utils.ts | 2 +- utils/helper.ts | 2 +- 23 files changed, 212 insertions(+), 168 deletions(-) rename src/containers/unit/Sidebar/{Footer.js => Footer.tsx} (82%) rename src/containers/unit/Sidebar/{Header.js => Header.tsx} (78%) rename src/containers/unit/Sidebar/{LoadingBlocks.js => LoadingBlocks.tsx} (67%) rename src/containers/unit/Sidebar/MenuList/{MenuBar.js => MenuBar.tsx} (58%) rename src/containers/unit/Sidebar/MenuList/{NormalMenuList.js => NormalMenuList.tsx} (51%) delete mode 100755 src/containers/unit/Sidebar/MenuList/SortableMenuList.js create mode 100755 src/containers/unit/Sidebar/MenuList/SortableMenuList.tsx rename src/containers/unit/Sidebar/MenuList/{index.js => index.tsx} (69%) rename src/containers/unit/Sidebar/{PullButton.js => PullButton.tsx} (60%) rename src/containers/unit/Sidebar/{RealSidebar.js => RealSidebar.tsx} (76%) rename src/containers/unit/Sidebar/{index.js => index.tsx} (77%) rename src/containers/unit/Sidebar/{logic.js => logic.ts} (81%) rename src/containers/unit/Sidebar/{Sidebar.js => styles/sidebar.ts} (82%) diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx index 450ca4c26..deee57c6a 100755 --- a/src/components/Input/index.tsx +++ b/src/components/Input/index.tsx @@ -33,12 +33,14 @@ type TProps = { disabled?: boolean autoFocus?: boolean + onFocus?: (e) => void | null onChange?: (e) => void | null } const Input: FC = ({ behavior = 'default', onChange = null, + onFocus = null, prefixIcon = null, prefixActive = false, suffixIcon = null, @@ -47,6 +49,7 @@ const Input: FC = ({ ...restProps }) => { const handleOnChange = useCallback((e) => onChange && onChange(e), [onChange]) + const handleOnFocus = useCallback((e) => onFocus && onFocus(e), [onFocus]) const validProps = pickBy((v) => v !== null, restProps) return behavior === 'default' ? ( @@ -56,6 +59,7 @@ const Input: FC = ({ { +type TProps = { + pin: boolean + sortOptActive: boolean +} + +const Footer: FC = ({ pin, sortOptActive }) => { return ( - - + + sortBtnOnClick()}> @@ -42,4 +47,4 @@ const Footer = ({ pin, sortOptActive }) => { ) } -export default React.memo(Footer) +export default memo(Footer) diff --git a/src/containers/unit/Sidebar/Header.js b/src/containers/unit/Sidebar/Header.tsx similarity index 78% rename from src/containers/unit/Sidebar/Header.js rename to src/containers/unit/Sidebar/Header.tsx index 572126547..da12491cd 100755 --- a/src/containers/unit/Sidebar/Header.js +++ b/src/containers/unit/Sidebar/Header.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import { FC, memo } from 'react' import { ICON } from '@/config' @@ -15,12 +15,17 @@ import { } from './styles/header' import { searchOnFocus, searchCommunityValueOnChange, setPin } from './logic' -const Header = ({ pin, searchCommunityValue }) => ( - +type TProps = { + pin: boolean + searchCommunityValue: string +} + +const Header: FC = ({ pin, searchCommunityValue }) => ( + {!pin ? ( - + @@ -37,7 +42,7 @@ const Header = ({ pin, searchCommunityValue }) => ( /> - + @@ -46,4 +51,4 @@ const Header = ({ pin, searchCommunityValue }) => ( ) -export default React.memo(Header) +export default memo(Header) diff --git a/src/containers/unit/Sidebar/LoadingBlocks.js b/src/containers/unit/Sidebar/LoadingBlocks.tsx similarity index 67% rename from src/containers/unit/Sidebar/LoadingBlocks.js rename to src/containers/unit/Sidebar/LoadingBlocks.tsx index b5c26f849..4549ed821 100644 --- a/src/containers/unit/Sidebar/LoadingBlocks.js +++ b/src/containers/unit/Sidebar/LoadingBlocks.tsx @@ -1,9 +1,9 @@ -import React from 'react' +import { FC, memo } from 'react' import { range } from 'ramda' import { Wrapper, Block } from './styles/loading_blocks' -const LoadingBlocks = () => { +const LoadingBlocks: FC = () => { return ( {range(0, 14).map((num) => ( @@ -13,4 +13,4 @@ const LoadingBlocks = () => { ) } -export default React.memo(LoadingBlocks) +export default memo(LoadingBlocks) diff --git a/src/containers/unit/Sidebar/MenuList/MenuBar.js b/src/containers/unit/Sidebar/MenuList/MenuBar.tsx similarity index 58% rename from src/containers/unit/Sidebar/MenuList/MenuBar.js rename to src/containers/unit/Sidebar/MenuList/MenuBar.tsx index 219d4e49c..943feaa77 100755 --- a/src/containers/unit/Sidebar/MenuList/MenuBar.js +++ b/src/containers/unit/Sidebar/MenuList/MenuBar.tsx @@ -1,8 +1,8 @@ -import React, { useCallback } from 'react' +import { FC, memo, useCallback } from 'react' import { toLower } from 'ramda' +import type { TCommunity } from '@/spec' import { ICON_CMD } from '@/config' -// import { uid } from '@/utils' import TrendLine from '@/components/TrendLine' @@ -19,24 +19,27 @@ import { import { onCommunitySelect } from '../logic' -const MenuBar = ({ pin, sortOptActive, item, activeRaw, forceRerender }) => { - const handleSelect = useCallback(() => { - onCommunitySelect(item) - }, [item]) +type TProps = { + item: TCommunity + pin: boolean + sortOptActive?: boolean + activeRaw: string +} + +const MenuBar: FC = ({ + pin, + sortOptActive = false, + item, + activeRaw, +}) => { + const handleSelect = useCallback(() => onCommunitySelect(item), [item]) return ( - + - + { src={item.logo} /> {/* eslint-disable jsx-a11y/anchor-is-valid */} - + {item.title} @@ -56,7 +55,6 @@ const MenuBar = ({ pin, sortOptActive, item, activeRaw, forceRerender }) => { @@ -67,4 +65,4 @@ const MenuBar = ({ pin, sortOptActive, item, activeRaw, forceRerender }) => { ) } -export default React.memo(MenuBar) +export default memo(MenuBar) diff --git a/src/containers/unit/Sidebar/MenuList/NormalMenuList.js b/src/containers/unit/Sidebar/MenuList/NormalMenuList.tsx similarity index 51% rename from src/containers/unit/Sidebar/MenuList/NormalMenuList.js rename to src/containers/unit/Sidebar/MenuList/NormalMenuList.tsx index da6e34924..080cb63a4 100755 --- a/src/containers/unit/Sidebar/MenuList/NormalMenuList.js +++ b/src/containers/unit/Sidebar/MenuList/NormalMenuList.tsx @@ -1,29 +1,29 @@ -import React from 'react' +import { FC, memo } from 'react' +import type { TCommunity } from '@/spec' import CustomScroller from '@/components/CustomScroller' import MenuBar from './MenuBar' -const NormalMenuList = ({ communities, pin, activeRaw, forceRerender }) => { +type TProps = { + communities: TCommunity[] + pin: boolean + activeRaw: string +} + +const NormalMenuList: FC = ({ communities, pin, activeRaw }) => { const scrollHeight = !pin ? 'calc(100vh - 88px)' : 'calc(100vh - 140px)' - const barSize = !pin ? 'none' : 'small' return (
{communities.map((item) => ( - + ))}
@@ -31,4 +31,4 @@ const NormalMenuList = ({ communities, pin, activeRaw, forceRerender }) => { ) } -export default React.memo(NormalMenuList) +export default memo(NormalMenuList) diff --git a/src/containers/unit/Sidebar/MenuList/SortableMenuList.js b/src/containers/unit/Sidebar/MenuList/SortableMenuList.js deleted file mode 100755 index 935c6185b..000000000 --- a/src/containers/unit/Sidebar/MenuList/SortableMenuList.js +++ /dev/null @@ -1,43 +0,0 @@ -import React from 'react' -import { SortableContainer, SortableElement } from 'react-sortable-hoc' - -import CustomScroller from '@/components/CustomScroller' -import MenuBar from './MenuBar' - -const SortableMenuBar = SortableElement( - ({ pin, sortOptActive, item, activeRaw, forceRerender }) => ( - - ), -) - -const SortableMenuList = SortableContainer( - ({ communities, pin, sortOptActive, activeRaw, forceRerender }) => { - return ( - -
- {communities.map((item, index) => ( - - ))} - -
-
- - ) - }, -) - -export default React.memo(SortableMenuList) diff --git a/src/containers/unit/Sidebar/MenuList/SortableMenuList.tsx b/src/containers/unit/Sidebar/MenuList/SortableMenuList.tsx new file mode 100755 index 000000000..837ac8a41 --- /dev/null +++ b/src/containers/unit/Sidebar/MenuList/SortableMenuList.tsx @@ -0,0 +1,62 @@ +import { ComponentClass } from 'react' +import { + SortableContainer, + SortableElement, + SortableElementProps, + SortableContainerProps, +} from 'react-sortable-hoc' + +import type { TCommunity } from '@/spec' +import CustomScroller from '@/components/CustomScroller' +import MenuBar from './MenuBar' + +type TMenuBar = { + item: TCommunity + pin: boolean + activeRaw: string + sortOptActive: boolean +} & SortableElementProps + +const SortableMenuBar: ComponentClass = SortableElement( + ({ pin, sortOptActive, item, activeRaw }) => { + return ( + + ) + }, +) + +type TProps = { + communities: TCommunity[] + pin: boolean + activeRaw: string + sortOptActive: boolean +} & SortableContainerProps + +const SortableMenuList: ComponentClass = SortableContainer( + ({ communities, pin, sortOptActive, activeRaw }) => { + return ( + +
+ {communities.map((item: TCommunity, index: number) => ( + + ))} +
+
+ + ) + }, +) + +export default SortableMenuList diff --git a/src/containers/unit/Sidebar/MenuList/index.js b/src/containers/unit/Sidebar/MenuList/index.tsx similarity index 69% rename from src/containers/unit/Sidebar/MenuList/index.js rename to src/containers/unit/Sidebar/MenuList/index.tsx index 09d4c8f68..6a5d5983f 100644 --- a/src/containers/unit/Sidebar/MenuList/index.js +++ b/src/containers/unit/Sidebar/MenuList/index.tsx @@ -1,10 +1,10 @@ -import React from 'react' +import { FC, memo } from 'react' import dynamic from 'next/dynamic' import { reject, propEq } from 'ramda' +import type { TCommunity } from '@/spec' import { HCN } from '@/constant' import NormalMenuList from './NormalMenuList' -// import SortableMenuList from './SortableMenuList' import { Wrapper } from '../styles/menu_list/index' import { onSortMenuEnd } from '../logic' @@ -14,8 +14,15 @@ export const SortableMenuList = dynamic(() => import('./SortableMenuList'), { loading: () =>
..
, }) -const MenuList = ({ items, pin, sortOptActive, activeRaw, forceRerender }) => { - const sortableCommunities = reject(propEq('raw', HCN), items) +type TProps = { + items: TCommunity[] + pin: boolean + sortOptActive: boolean + activeRaw: string +} + +const MenuList: FC = ({ items, pin, sortOptActive, activeRaw }) => { + const sortableCommunities = reject(propEq('raw', HCN), items) as TCommunity[] return ( @@ -24,7 +31,6 @@ const MenuList = ({ items, pin, sortOptActive, activeRaw, forceRerender }) => { communities={sortableCommunities} pin={pin} activeRaw={activeRaw} - forceRerender={forceRerender} /> ) : ( { sortOptActive={sortOptActive} pin={pin} activeRaw={activeRaw} - forceRerender={forceRerender} onSortEnd={onSortMenuEnd} /> )} @@ -40,4 +45,4 @@ const MenuList = ({ items, pin, sortOptActive, activeRaw, forceRerender }) => { ) } -export default React.memo(MenuList) +export default memo(MenuList) diff --git a/src/containers/unit/Sidebar/PullButton.js b/src/containers/unit/Sidebar/PullButton.tsx similarity index 60% rename from src/containers/unit/Sidebar/PullButton.js rename to src/containers/unit/Sidebar/PullButton.tsx index f4f9e9776..12ac4a8be 100644 --- a/src/containers/unit/Sidebar/PullButton.js +++ b/src/containers/unit/Sidebar/PullButton.tsx @@ -1,9 +1,14 @@ -import React from 'react' +import { FC, memo } from 'react' import { ICON } from '@/config' import { Wrapper, Shape, ArrowIcon } from './styles/pull_button' -const PullButton = ({ onClick, isPulled }) => { +type TProps = { + isPulled: boolean + onClick: () => void +} + +const PullButton: FC = ({ onClick, isPulled }) => { return ( @@ -12,4 +17,4 @@ const PullButton = ({ onClick, isPulled }) => { ) } -export default React.memo(PullButton) +export default memo(PullButton) diff --git a/src/containers/unit/Sidebar/RealSidebar.js b/src/containers/unit/Sidebar/RealSidebar.tsx similarity index 76% rename from src/containers/unit/Sidebar/RealSidebar.js rename to src/containers/unit/Sidebar/RealSidebar.tsx index 8439f0294..68a78cb8f 100644 --- a/src/containers/unit/Sidebar/RealSidebar.js +++ b/src/containers/unit/Sidebar/RealSidebar.tsx @@ -4,9 +4,10 @@ * */ -import React from 'react' +import { FC } from 'react' import { filter, propEq } from 'ramda' +import type { TCommunity } from '@/spec' import { HCN, ANCHOR } from '@/constant' import { pluggedIn, buildLog } from '@/utils' @@ -15,13 +16,18 @@ import MenuList from './MenuList/index' import MenuBar from './MenuList/MenuBar' import Footer from './Footer' +import type { TStore } from './store' import { MainWrapper } from './styles' -import { useInit, onSortMenuEnd } from './logic' +import { useInit } from './logic' /* eslint-disable-next-line */ const log = buildLog('C:Sidebar:index') -const SidebarContainer = ({ sidebar: store }) => { +type TProps = { + sidebar: TStore +} + +const SidebarContainer: FC = ({ sidebar: store }) => { useInit(store) const { @@ -30,14 +36,16 @@ const SidebarContainer = ({ sidebar: store }) => { searchCommunityValue, sortOptActive, communitiesData, - forceRerender, isPulled, } = store // onMouseLeave={logic.leaveSidebar} // onMouseLeave is not unreliable in chrome: https://github.com/facebook/react/issues/4492 const activeRaw = curCommunity.raw - const homeCommunity = filter(propEq('raw', HCN), communitiesData)[0] + const homeCommunity = filter( + propEq('raw', HCN), + communitiesData, + )[0] as TCommunity return ( { items={communitiesData} pin={pin} sortOptActive={sortOptActive} - forceRerender={forceRerender} activeRaw={activeRaw} - onSortEnd={onSortMenuEnd} - distance={5} /> {pin &&