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.

Commitcb7363e

Browse files
authored
Use theme hook (#763)
* chore(deps): upgrade styled-component to 5.1.1* refactor(theme): use hook for theme access
1 parentaf51d77 commitcb7363e

File tree

17 files changed

+130
-101
lines changed

17 files changed

+130
-101
lines changed

‎package.docker.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@
9797
"shortid":"^2.2.8",
9898
"store":"^2.0.12",
9999
"stringz":"^2.0.0",
100-
"styled-components":"5.1.0",
100+
"styled-components":"5.1.1",
101101
"timeago-react":"3.0.0",
102102
"uuid":"^3.3.2"
103103
},

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@
125125
"shortid":"^2.2.8",
126126
"store":"^2.0.12",
127127
"stringz":"^2.0.0",
128-
"styled-components":"5.1.0",
128+
"styled-components":"5.1.1",
129129
"timeago-react":"3.0.0",
130130
"uuid":"^3.3.2"
131131
},
Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
importReactfrom'react'
2-
import{withTheme}from'styled-components'
2+
import{useTheme}from'styled-components'
33

44
import{ICON_BASE}from'@/config'
55

66
import{Logo}from'./styles'
77
// import { Wrapper } from './styles'
88

9-
constHomeLogo=({ theme, className})=>{
9+
constHomeLogo=({ className})=>{
10+
consttheme=useTheme()
1011
constsrc=`${ICON_BASE}/home/home-${theme.name}.png`
1112

1213
return<Logosrc={src}className={className}/>
1314
}
1415

15-
exportdefaultwithTheme(HomeLogo)
16+
exportdefaultHomeLogo

‎src/components/LoadingEffects/ArticleContentLoading.js‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
importReactfrom'react'
22
importTfrom'prop-types'
33
import{range}from'ramda'
4-
importstyled,{withTheme}from'styled-components'
4+
importstyled,{useTheme}from'styled-components'
55
importContentLoaderfrom'react-content-loader'
66

77
// Config-page: http://danilowoz.com/create-react-content-loader/
@@ -27,12 +27,15 @@ const LoadingItem = ({ theme }) => (
2727
</ContentLoader>
2828
)
2929

30-
constArticleContentLoading=({ num, theme})=>
31-
range(0,num).map((item)=>(
30+
constArticleContentLoading=({ num})=>{
31+
consttheme=useTheme()
32+
33+
returnrange(0,num).map((item)=>(
3234
<LoadingWrapperkey={item}>
3335
<LoadingItemtheme={theme}/>
3436
</LoadingWrapper>
3537
))
38+
}
3639

3740
ArticleContentLoading.propTypes={
3841
num:T.number,
@@ -42,4 +45,4 @@ ArticleContentLoading.defaultProps = {
4245
num:1,
4346
}
4447

45-
exportdefaultwithTheme(ArticleContentLoading)
48+
exportdefaultArticleContentLoading

‎src/components/LoadingEffects/CheatSheetLoading.js‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react'
22
importTfrom'prop-types'
33
import{range}from'ramda'
44
importContentLoaderfrom'react-content-loader'
5-
import{withTheme}from'styled-components'
5+
import{useTheme}from'styled-components'
66

77
import{buildLog}from'@/utils'
88
import{Wrapper,CheatsheetCard}from'./styles'
@@ -32,21 +32,24 @@ const LoadingBlock = ({ theme }) => (
3232
</CheatsheetCard>
3333
)
3434

35-
constCheatSheetLoading=({ column, theme})=>(
36-
<Wrapper>
37-
{range(0,column).map((item)=>(
38-
<LoadingBlockkey={item}theme={theme}/>
39-
))}
40-
</Wrapper>
41-
)
35+
constCheatSheetLoading=({ column})=>{
36+
consttheme=useTheme()
37+
38+
return(
39+
<Wrapper>
40+
{range(0,column).map((item)=>(
41+
<LoadingBlockkey={item}theme={theme}/>
42+
))}
43+
</Wrapper>
44+
)
45+
}
4246

4347
CheatSheetLoading.propTypes={
4448
column:T.number,
45-
theme:T.object.isRequired,
4649
}
4750

4851
CheatSheetLoading.defaultProps={
4952
column:4,
5053
}
5154

52-
exportdefaultwithTheme(CheatSheetLoading)
55+
exportdefaultCheatSheetLoading
Lines changed: 24 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
importReactfrom'react'
2-
importstyled,{withTheme}from'styled-components'
2+
importstyled,{useTheme}from'styled-components'
33
importContentLoaderfrom'react-content-loader'
44

55
// Config-page: http://danilowoz.com/create-react-content-loader/
@@ -8,23 +8,27 @@ const LoadingWrapper = styled.div`
88
overflow: hidden;
99
`
1010

11-
constCommentLoading=({ theme})=>(
12-
<LoadingWrapper>
13-
<ContentLoader
14-
height={60}
15-
width={400}
16-
speed={2}
17-
primaryColor={theme.loading.basic}
18-
secondaryColor={theme.loading.animate}
19-
>
20-
<rectx="35"y="6"rx="4"ry="4"width="117"height="5.25"/>
21-
<rectx="37"y="20"rx="3"ry="3"width="85"height="5.25"/>
22-
<rectx="37"y="37.68"rx="3"ry="3"width="318.5"height="4.6"/>
23-
<rectx="37"y="51"rx="3"ry="3"width="319.2"height="5.11"/>
24-
<rectx="71"y="104"rx="3"ry="3"width="201"height="6.4"/>
25-
<circlecx="14.0"cy="14.0"r="14.0"/>
26-
</ContentLoader>
27-
</LoadingWrapper>
28-
)
11+
constCommentLoading=()=>{
12+
consttheme=useTheme()
2913

30-
exportdefaultwithTheme(CommentLoading)
14+
return(
15+
<LoadingWrapper>
16+
<ContentLoader
17+
height={60}
18+
width={400}
19+
speed={2}
20+
primaryColor={theme.loading.basic}
21+
secondaryColor={theme.loading.animate}
22+
>
23+
<rectx="35"y="6"rx="4"ry="4"width="117"height="5.25"/>
24+
<rectx="37"y="20"rx="3"ry="3"width="85"height="5.25"/>
25+
<rectx="37"y="37.68"rx="3"ry="3"width="318.5"height="4.6"/>
26+
<rectx="37"y="51"rx="3"ry="3"width="319.2"height="5.11"/>
27+
<rectx="71"y="104"rx="3"ry="3"width="201"height="6.4"/>
28+
<circlecx="14.0"cy="14.0"r="14.0"/>
29+
</ContentLoader>
30+
</LoadingWrapper>
31+
)
32+
}
33+
34+
exportdefaultCommentLoading

‎src/components/LoadingEffects/EditorLoading.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
importReactfrom'react'
22
importTfrom'prop-types'
33
import{range}from'ramda'
4-
importstyled,{withTheme}from'styled-components'
4+
importstyled,{useTheme}from'styled-components'
55
importContentLoaderfrom'react-content-loader'
66

77
// Config-page: http://danilowoz.com/create-react-content-loader/
@@ -28,7 +28,9 @@ const Loading = ({ theme }) => (
2828
</ContentLoader>
2929
)
3030

31-
constEditorLoading=({ num, theme})=>{
31+
constEditorLoading=({ num})=>{
32+
consttheme=useTheme()
33+
3234
returnrange(0,num).map((item)=>(
3335
<LoadingWrapperkey={item}>
3436
<Loadingtheme={theme}/>
@@ -44,4 +46,4 @@ EditorLoading.defaultProps = {
4446
num:1,
4547
}
4648

47-
exportdefaultwithTheme(EditorLoading)
49+
exportdefaultEditorLoading

‎src/components/LoadingEffects/JobItemLoading.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
importReactfrom'react'
22
importTfrom'prop-types'
33
import{range}from'ramda'
4-
importstyled,{withTheme}from'styled-components'
4+
importstyled,{useTheme}from'styled-components'
55
importContentLoaderfrom'react-content-loader'
66

77
// Config-page: http://danilowoz.com/create-react-content-loader/
@@ -32,7 +32,9 @@ const LoadingItem = ({ theme }) => (
3232
</ContentLoader>
3333
)
3434

35-
constJobItemLoading=({ num, theme})=>{
35+
constJobItemLoading=({ num})=>{
36+
consttheme=useTheme()
37+
3638
returnrange(0,num).map((item)=>(
3739
<LoadingWrapperkey={item}>
3840
<LoadingItemtheme={theme}/>
@@ -48,4 +50,4 @@ JobItemLoading.defaultProps = {
4850
num:1,
4951
}
5052

51-
exportdefaultwithTheme(JobItemLoading)
53+
exportdefaultJobItemLoading

‎src/components/LoadingEffects/PostItemLoading.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
importReactfrom'react'
22
importTfrom'prop-types'
33
import{range}from'ramda'
4-
importstyled,{withTheme}from'styled-components'
4+
importstyled,{useTheme}from'styled-components'
55
importContentLoaderfrom'react-content-loader'
66

77
import{cs}from'@/utils'
@@ -36,7 +36,9 @@ const LoadingItem = ({ theme }) => (
3636
</ContentLoader>
3737
)
3838

39-
constPostItemLoading=({ num, theme})=>{
39+
constPostItemLoading=({ num})=>{
40+
consttheme=useTheme()
41+
4042
returnrange(0,num).map((item)=>(
4143
<LoadingWrapperkey={item}>
4244
<LoadingItemtheme={theme}/>
@@ -52,4 +54,4 @@ PostItemLoading.defaultProps = {
5254
num:1,
5355
}
5456

55-
exportdefaultwithTheme(PostItemLoading)
57+
exportdefaultPostItemLoading

‎src/components/LoadingEffects/RepoItemLoading.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
importReactfrom'react'
22
importTfrom'prop-types'
33
import{range}from'ramda'
4-
importstyled,{withTheme}from'styled-components'
4+
importstyled,{useTheme}from'styled-components'
55
importContentLoaderfrom'react-content-loader'
66

77
// Config-page: http://danilowoz.com/create-react-content-loader/
@@ -27,7 +27,9 @@ const LoadingItem = ({ theme }) => (
2727
</ContentLoader>
2828
)
2929

30-
constRepoItemLoading=({ num, theme})=>{
30+
constRepoItemLoading=({ num})=>{
31+
consttheme=useTheme()
32+
3133
returnrange(0,num).map((item)=>(
3234
<LoadingWrapperkey={item}>
3335
<LoadingItemtheme={theme}/>
@@ -43,4 +45,4 @@ RepoItemLoading.defaultProps = {
4345
num:1,
4446
}
4547

46-
exportdefaultwithTheme(RepoItemLoading)
48+
exportdefaultRepoItemLoading

0 commit comments

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