Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings
This repository was archived by the owner on Nov 8, 2022. It is now read-only.

Commit2b0fa1d

Browse files
authored
refactor(sidebar): convert to TS (#1106)
* refactor(sidebar): convert to TS* refactor(sidebar): missing opt* refactor(sidebar): missing doc* chore(sidebar): clean up unused code
1 parent97b24b7 commit2b0fa1d

23 files changed

+212
-189
lines changed

‎src/components/Input/index.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,12 +33,14 @@ type TProps = {
3333
disabled?:boolean
3434
autoFocus?:boolean
3535

36+
onFocus?:(e)=>void|null
3637
onChange?:(e)=>void|null
3738
}
3839

3940
constInput:FC<TProps>=({
4041
behavior='default',
4142
onChange=null,
43+
onFocus=null,
4244
prefixIcon=null,
4345
prefixActive=false,
4446
suffixIcon=null,
@@ -47,6 +49,7 @@ const Input: FC<TProps> = ({
4749
...restProps
4850
})=>{
4951
consthandleOnChange=useCallback((e)=>onChange&&onChange(e),[onChange])
52+
consthandleOnFocus=useCallback((e)=>onFocus&&onFocus(e),[onFocus])
5053
constvalidProps=pickBy((v)=>v!==null,restProps)
5154

5255
returnbehavior==='default' ?(
@@ -56,6 +59,7 @@ const Input: FC<TProps> = ({
5659
</PrefixWrapper>
5760
<InputWrapper
5861
onChange={handleOnChange}
62+
onFocus={handleOnFocus}
5963
spellcheck="false"
6064
// prefix={false}
6165
hasPrefix={!nilOrEmpty(prefixIcon)}

‎src/components/TabBar/spec.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { ReactNode } from 'react'
22

33
exporttypeTTabItem={
44
title?:string
5-
raw?:string
5+
raw:string
66
alias?:string
77
icon?:string|ReactNode
88
localIcon?:string

‎src/containers/unit/Sidebar/Footer.js‎renamed to ‎src/containers/unit/Sidebar/Footer.tsx‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
importReactfrom'react'
1+
import{FC,memo}from'react'
22

33
import{ICON_CMD,ISSUE_ADDR}from'@/config'
44

@@ -17,10 +17,15 @@ import {
1717

1818
import{sortBtnOnClick}from'./logic'
1919

20-
constFooter=({ pin, sortOptActive})=>{
20+
typeTProps={
21+
pin:boolean
22+
sortOptActive:boolean
23+
}
24+
25+
constFooter:FC<TProps>=({ pin, sortOptActive})=>{
2126
return(
22-
<Wrapperpin={pin}>
23-
<InnerWrapperpin={pin}>
27+
<Wrapper>
28+
<InnerWrapper>
2429
<OptionWrapperpin={pin}>
2530
<OptionItemactive={sortOptActive}onClick={()=>sortBtnOnClick()}>
2631
<OptionIconsrc={`${ICON_CMD}/sidebar_drag.svg`}/>
@@ -42,4 +47,4 @@ const Footer = ({ pin, sortOptActive }) => {
4247
)
4348
}
4449

45-
exportdefaultReact.memo(Footer)
50+
exportdefaultmemo(Footer)

‎src/containers/unit/Sidebar/Header.js‎renamed to ‎src/containers/unit/Sidebar/Header.tsx‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
importReactfrom'react'
1+
import{FC,memo}from'react'
22

33
import{ICON}from'@/config'
44

@@ -15,12 +15,17 @@ import {
1515
}from'./styles/header'
1616
import{searchOnFocus,searchCommunityValueOnChange,setPin}from'./logic'
1717

18-
constHeader=({ pin, searchCommunityValue})=>(
19-
<Wrapperpin={pin}>
18+
typeTProps={
19+
pin:boolean
20+
searchCommunityValue:string
21+
}
22+
23+
constHeader:FC<TProps>=({ pin, searchCommunityValue})=>(
24+
<Wrapper>
2025
<InnerWrapper>
2126
{!pin ?(
2227
<HeaderFuncs>
23-
<MenuWrapperpin={pin}onClick={setPin}>
28+
<MenuWrapperonClick={setPin}>
2429
<MenuLogosrc={`${ICON}/sidebar-menu.svg`}pin={pin}/>
2530
</MenuWrapper>
2631
</HeaderFuncs>
@@ -37,7 +42,7 @@ const Header = ({ pin, searchCommunityValue }) => (
3742
/>
3843
</SearchContent>
3944
</SearchWrapper>
40-
<MenuWrapperpin={pin}onClick={setPin}>
45+
<MenuWrapperonClick={setPin}>
4146
<MenuLogosrc={`${ICON}/sidebar-menu.svg`}pin={pin}/>
4247
</MenuWrapper>
4348
</HeaderFuncs>
@@ -46,4 +51,4 @@ const Header = ({ pin, searchCommunityValue }) => (
4651
</Wrapper>
4752
)
4853

49-
exportdefaultReact.memo(Header)
54+
exportdefaultmemo(Header)
Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
importReactfrom'react'
1+
import{FC,memo}from'react'
22

33
import{range}from'ramda'
44
import{Wrapper,Block}from'./styles/loading_blocks'
55

6-
constLoadingBlocks=()=>{
6+
constLoadingBlocks:FC=()=>{
77
return(
88
<Wrapper>
99
{range(0,14).map((num)=>(
@@ -13,4 +13,4 @@ const LoadingBlocks = () => {
1313
)
1414
}
1515

16-
exportdefaultReact.memo(LoadingBlocks)
16+
exportdefaultmemo(LoadingBlocks)
Lines changed: 20 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
importReact,{useCallback}from'react'
1+
import{FC,memo,useCallback}from'react'
22
import{toLower}from'ramda'
33

4+
importtype{TCommunity}from'@/spec'
45
import{ICON_CMD}from'@/config'
5-
// import { uid } from '@/utils'
66

77
importTrendLinefrom'@/components/TrendLine'
88

@@ -19,44 +19,42 @@ import {
1919

2020
import{onCommunitySelect}from'../logic'
2121

22-
constMenuBar=({ pin, sortOptActive, item, activeRaw, forceRerender})=>{
23-
consthandleSelect=useCallback(()=>{
24-
onCommunitySelect(item)
25-
},[item])
22+
typeTProps={
23+
item:TCommunity
24+
pin:boolean
25+
sortOptActive?:boolean
26+
activeRaw:string
27+
}
28+
29+
constMenuBar:FC<TProps>=({
30+
pin,
31+
sortOptActive=false,
32+
item,
33+
activeRaw,
34+
})=>{
35+
consthandleSelect=useCallback(()=>onCommunitySelect(item),[item])
2636

2737
return(
2838
<WrapperonClick={handleSelect}>
29-
<ActiveBar
30-
pin={pin}
31-
active={!sortOptActive&&activeRaw===toLower(item.raw)}
32-
/>
39+
<ActiveBaractive={!sortOptActive&&activeRaw===toLower(item.raw)}/>
3340
<DragIconsrc={`${ICON_CMD}/drag.svg`}show={sortOptActive}/>
3441
<MenuItemBar>
35-
<MenuRow
36-
pin={pin}
37-
sortOptActive={sortOptActive}
38-
active={!sortOptActive&&activeRaw===toLower(item.raw)}
39-
>
42+
<MenuRowsortOptActive={sortOptActive}>
4043
<MenuItemIcon
4144
key={item.raw}
4245
active={activeRaw===toLower(item.raw)}
4346
raw={item.raw}
4447
src={item.logo}
4548
/>
4649
{/* eslint-disable jsx-a11y/anchor-is-valid */}
47-
<MenuItemTitle
48-
pin={pin}
49-
active={activeRaw===toLower(item.raw)}
50-
forceRerender={forceRerender}
51-
>
50+
<MenuItemTitlepin={pin}active={activeRaw===toLower(item.raw)}>
5251
{item.title}
5352
</MenuItemTitle>
5453

5554
<MiniChartWrapperpin={pin}>
5655
<TrendLine
5756
key={item.raw}
5857
data={item.contributesDigest}
59-
duration={300}
6058
radius={15}
6159
width={7}
6260
/>
@@ -67,4 +65,4 @@ const MenuBar = ({ pin, sortOptActive, item, activeRaw, forceRerender }) => {
6765
)
6866
}
6967

70-
exportdefaultReact.memo(MenuBar)
68+
exportdefaultmemo(MenuBar)
Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,34 @@
1-
importReactfrom'react'
1+
import{FC,memo}from'react'
22

3+
importtype{TCommunity}from'@/spec'
34
importCustomScrollerfrom'@/components/CustomScroller'
45
importMenuBarfrom'./MenuBar'
56

6-
constNormalMenuList=({ communities, pin, activeRaw, forceRerender})=>{
7+
typeTProps={
8+
communities:TCommunity[]
9+
pin:boolean
10+
activeRaw:string
11+
}
12+
13+
constNormalMenuList:FC<TProps>=({ communities, pin, activeRaw})=>{
714
constscrollHeight=!pin ?'calc(100vh - 88px)' :'calc(100vh - 140px)'
8-
constbarSize=!pin ?'none' :'small'
915

1016
return(
1117
<CustomScroller
1218
direction="vertical"
1319
height={scrollHeight}
14-
barSize={barSize}
20+
barSize="small"
1521
withBorder
1622
autoHide
1723
>
1824
<div>
1925
{communities.map((item)=>(
20-
<MenuBar
21-
key={item.raw}
22-
pin={pin}
23-
item={item}
24-
activeRaw={activeRaw}
25-
forceRerender={forceRerender}
26-
/>
26+
<MenuBarkey={item.raw}pin={pin}item={item}activeRaw={activeRaw}/>
2727
))}
2828
<br/>
2929
</div>
3030
</CustomScroller>
3131
)
3232
}
3333

34-
exportdefaultReact.memo(NormalMenuList)
34+
exportdefaultmemo(NormalMenuList)

‎src/containers/unit/Sidebar/MenuList/SortableMenuList.js‎

Lines changed: 0 additions & 43 deletions
This file was deleted.
Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import{ComponentClass}from'react'
2+
import{
3+
SortableContainer,
4+
SortableElement,
5+
SortableElementProps,
6+
SortableContainerProps,
7+
}from'react-sortable-hoc'
8+
9+
importtype{TCommunity}from'@/spec'
10+
importCustomScrollerfrom'@/components/CustomScroller'
11+
importMenuBarfrom'./MenuBar'
12+
13+
typeTMenuBar={
14+
item:TCommunity
15+
pin:boolean
16+
activeRaw:string
17+
sortOptActive:boolean
18+
}&SortableElementProps
19+
20+
constSortableMenuBar:ComponentClass<TMenuBar>=SortableElement(
21+
({ pin, sortOptActive, item, activeRaw})=>{
22+
return(
23+
<MenuBar
24+
pin={pin}
25+
sortOptActive={sortOptActive}
26+
item={item}
27+
activeRaw={activeRaw}
28+
/>
29+
)
30+
},
31+
)
32+
33+
typeTProps={
34+
communities:TCommunity[]
35+
pin:boolean
36+
activeRaw:string
37+
sortOptActive:boolean
38+
// see: https://github.com/clauderic/react-sortable-hoc/blob/master/types/index.d.ts
39+
}&SortableContainerProps
40+
41+
constSortableMenuList:ComponentClass<TProps>=SortableContainer(
42+
({ communities, pin, sortOptActive, activeRaw})=>{
43+
return(
44+
<CustomScrollerdirection="vertical"height="84vh"withBorderautoHide>
45+
<div>
46+
{communities.map((item:TCommunity,index:number)=>(
47+
<SortableMenuBar
48+
index={index}
49+
key={item.raw}
50+
pin={pin}
51+
sortOptActive={sortOptActive}
52+
item={item}
53+
activeRaw={activeRaw}
54+
/>
55+
))}
56+
<br/>
57+
</div>
58+
</CustomScroller>
59+
)
60+
},
61+
)
62+
63+
exportdefaultSortableMenuList

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp