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.

Commitc898531

Browse files
committed
use route store to handle route info
1 parent9d44fa1 commitc898531

File tree

14 files changed

+163
-41
lines changed

14 files changed

+163
-41
lines changed

‎containers/Body/index.js‎

Lines changed: 10 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,11 @@
77
importReactfrom'react'
88
import{inject,observer}from'mobx-react'
99
importkeydownfrom'react-keydown'
10-
importRfrom'ramda'
1110

1211
// import Link from 'next/link'
1312
import{Button}from'../../components'
1413

15-
import{makeDebugger,storeSelector}from'../../utils/functions'
14+
import{storeSelector}from'../../utils/functions'
1615

1716
import*asSuggestionIconsfrom'../Doraemon/styles/suggestionIcons'
1817
import*aslogicfrom'./logic'
@@ -32,10 +31,7 @@ import {
3231
AddonSVGIconWrapper,
3332
}from'./styles'
3433

35-
constdebug=makeDebugger('C:Body')
36-
3734
constIcons={ ...SuggestionIcons}
38-
constDefaultIcon=SuggestionIcons.js
3935

4036
constAppHeader=()=>{
4137
return(
@@ -57,18 +53,14 @@ const AppHeader = () => {
5753
)
5854
}
5955

60-
constAppBanner=({route})=>{
61-
leticonKey
62-
// console.log('AppBanner route: ', route.query)
56+
constAppBanner=({curUrlPath})=>{
57+
constdefaultIcon='js'
58+
consticonKey=curUrlPath==='/' ?defaultIcon :curUrlPath
6359

64-
if(R.isEmpty(route.query)){
65-
iconKey='js'
66-
}else{
67-
// getPath(route.asPath)
68-
iconKey=route.query.name
69-
}
60+
// debug('AppBanner curUrlPath: ', curUrlPath)
61+
// debug('iconKey: ', iconKey)
7062

71-
constIcon=Icons[iconKey] ?Icons[iconKey] :DefaultIcon
63+
constIcon=Icons[iconKey]
7264
return(
7365
<Banner>
7466
<AddonSVGIconWrapper>
@@ -81,7 +73,6 @@ const AppBanner = ({ route }) => {
8173
classContentContainerextendsReact.Component{
8274
componentWillMount(){
8375
logic.init(this.props.body)
84-
debug('init')
8576
}
8677

8778
/* eslint-disable class-methods-use-this */
@@ -93,12 +84,12 @@ class ContentContainer extends React.Component {
9384
/* eslint-enable class-methods-use-this */
9485

9586
render(){
96-
const{route}=this.props
97-
debug('route: ',route)
87+
const{body}=this.props
88+
//debug('route: ', route)
9889
return(
9990
<Bodyid="whereCallShowDoraemon">
10091
<AppHeader/>
101-
<AppBannerroute={route}/>
92+
<AppBannercurUrlPath={body.curUrlPath}/>
10293
<div>content</div>
10394
</Body>
10495
)

‎containers/Route/index.js‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
/*
2+
*
3+
* Route
4+
*
5+
*/
6+
7+
importReactfrom'react'
8+
import{inject,observer}from'mobx-react'
9+
importRouter,{withRouter}from'next/router'
10+
// import Router, { withRouter } from 'next/router'
11+
12+
// import Link from 'next/link'
13+
14+
import{makeDebugger,storeSelector}from'../../utils/functions'
15+
import{init,syncRoute}from'./logic'
16+
17+
constdebug=makeDebugger('C:Route')
18+
19+
classRouteContainerextendsReact.Component{
20+
componentWillMount(){
21+
debug('mount')
22+
init(this.props.route)
23+
syncRoute(this.props.router)
24+
Router.onRouteChangeStart=url=>{
25+
console.log('App is changing to: ',url)
26+
}
27+
}
28+
29+
componentWillReceiveProps(nextProps){
30+
syncRoute(nextProps.router)
31+
}
32+
33+
render(){
34+
return<div/>
35+
}
36+
}
37+
38+
exportdefaultinject(storeSelector('route'))(
39+
observer(withRouter(RouteContainer))
40+
)

‎containers/Route/logic.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import{makeDebugger}from'../../utils/functions'
2+
3+
/* eslint-disable no-unused-vars */
4+
constdebug=makeDebugger('L:Route')
5+
/* eslint-enable no-unused-vars */
6+
7+
letroute=null
8+
9+
exportfunctionsyncRoute(current){
10+
// const { query, asPath, pathname } = current
11+
const{ asPath, pathname}=current
12+
route.markState({
13+
pathname,
14+
// query,
15+
asPath,
16+
})
17+
}
18+
19+
exportfunctioninit(selectedStore){
20+
route=selectedStore
21+
}

‎containers/Route/styles/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
// import styled from 'styled-components'
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
// import React from 'react'
2+
// import { shallow } from 'enzyme'
3+
4+
// import Route from '../index'
5+
6+
describe('<Route />',()=>{
7+
it('Expect to have unit tests specified',()=>{
8+
expect(true).toEqual(false)
9+
})
10+
})

‎containers/Sidebar/index.js‎

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@
66

77
importReactfrom'react'
88
importLinkfrom'next/link'
9+
// import Router, { withRouter } from 'next/router'
910
importRfrom'ramda'
1011
import{inject,observer}from'mobx-react'
1112

1213
import*asSuggestionIconsfrom'../../containers/Doraemon/styles/suggestionIcons'
13-
// import { makeDebugger } from '../../utils/functions'
1414

1515
import{makeDebugger,storeSelector}from'../../utils/functions'
1616
importPinButtonfrom'./PinButton'
@@ -24,26 +24,29 @@ const DefaultIcon = SuggestionIcons.javascript
2424

2525
constgetIconKey=R.compose(R.last,R.split('--'),R.toLower)
2626

27-
constNodeIcon=({ raw})=>{
27+
constNodeIcon=({ raw, active})=>{
2828
constlowerRaw=R.toLower(raw)
2929
consticonKey=getIconKey(lowerRaw)
3030

3131
constIcon=Icons[iconKey] ?Icons[iconKey] :DefaultIcon
3232
return(
33-
<SVGIconWrapper>
33+
<SVGIconWrapperactive={active}>
3434
<Icon/>
3535
</SVGIconWrapper>
3636
)
3737
}
3838

39-
constMenuList=({ items, open})=>{
39+
constMenuList=({ items, open, curUrlPath})=>{
4040
constlistItems=items.map(item=>(
4141
<likey={item.name}>
4242
{open ?(
4343
<div>
4444
<Linkhref={item.target.href}as={item.target.as}>
45-
<Row>
46-
<NodeIconraw={item.name}/>
45+
<Rowactive={curUrlPath===R.toLower(item.name)}>
46+
<NodeIcon
47+
raw={item.name}
48+
active={curUrlPath===R.toLower(item.name)}
49+
/>
4750
{/* eslint-disable jsx-a11y/anchor-is-valid */}
4851
<divstyle={{marginRight:10}}/>
4952
<a>{item.name}</a>
@@ -52,7 +55,10 @@ const MenuList = ({ items, open }) => {
5255
</div>
5356
) :(
5457
<Row>
55-
<NodeIconraw={item.name}/>
58+
<NodeIcon
59+
raw={item.name}
60+
active={curUrlPath===R.toLower(item.name)}
61+
/>
5662
</Row>
5763
)}
5864
</li>
@@ -68,19 +74,20 @@ class SidebarContainer extends React.Component {
6874

6975
render(){
7076
const{ sidebar}=this.props
71-
/* debug('-----> menuItems2 --------> : ', sidebar.menuItems.toJSON()) */
77+
const{ curUrlPath, menuItems, open, pin}=sidebar
78+
// debug('-----> sidebar route --------> : ', this.props.router)
7279

7380
return(
7481
<Sidebar
7582
open={sidebar.open}
7683
onMouseEnter={logic.enterSidebar}
7784
onMouseLeave={logic.leaveSidebar}
7885
>
79-
<PinButtonopen={sidebar.open}pin={sidebar.pin}onClick={logic.pin}/>
86+
<PinButtonopen={open}pin={pin}onClick={logic.pin}/>
8087
<br/>
8188
<br/>
8289

83-
<MenuListitems={sidebar.menuItems}open={sidebar.open}/>
90+
<MenuListitems={menuItems}open={open}curUrlPath={curUrlPath}/>
8491
</Sidebar>
8592
)
8693
}

‎containers/Sidebar/logic.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ const debug = makeDebugger('L:sidebar')
66
letsidebar=null
77

88
exportfunctionpin(){
9-
debug('pin: ',!sidebar.pin)
109
sidebar.markState({pin:!sidebar.pin})
1110
}
1211

‎containers/Sidebar/styles/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,11 +57,13 @@ export const Row = styled.div`
5757
justify-content: left;
5858
> a {
5959
color:${theme('sidebar.menu_link')};
60+
opacity:${props=>(props.active ?1 :0.5)};
6061
}
6162
`
6263

6364
exportconstSVGIconWrapper=styled.div`
6465
margin-top: 5px;
66+
opacity:${props=>(props.active ?1 :0.5)};
6567
> svg {
6668
width: 22px;
6769
height: 22px;

‎pages/index.js‎

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,13 @@ import React from 'react'
22
import{Provider}from'mobx-react'
33

44
importinitRootStorefrom'../stores'
5-
65
importDecratorfrom'../containers/Decrator'
76
importMultiLanguagefrom'../containers/MultiLanguage'
8-
97
importSidebarfrom'../containers/Sidebar'
108
importBodyfrom'../containers/Body'
11-
129
importPreviewfrom'../containers/Preview'
1310
importDoraemonfrom'../containers/Doraemon'
11+
importRoutefrom'../containers/Route'
1412

1513
// try to fix safari bug
1614
// see https://github.com/yahoo/react-intl/issues/422
@@ -36,19 +34,14 @@ export default class Index extends React.Component {
3634
}
3735

3836
render(){
39-
constroute=this.props.url
40-
/*
41-
<Body route={route} />
42-
<Sidebar {...globalStatus} />
43-
*/
44-
4537
return(
4638
<Providerstore={this.store}>
4739
<Decrator>
40+
<Route/>
4841
<MultiLanguage>
4942
<Preview/>
50-
<Bodyroute={route}/>
51-
<Sidebarroute={route}/>
43+
<Body/>
44+
<Sidebar/>
5245
<Doraemon/>
5346
</MultiLanguage>
5447
</Decrator>

‎stores/BodyStore/index.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,9 @@ const BodyStore = t
2828
getdoraemonVisable(){
2929
returnself.root.doraemonVisable
3030
},
31+
getcurUrlPath(){
32+
returnself.root.curUrlPath
33+
},
3134
}))
3235
.actions(self=>({
3336
changeTheme(name){

0 commit comments

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