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

Commitd6e6dfa

Browse files
committed
#000 okan move top app bar to component
1 parent421a37b commitd6e6dfa

File tree

6 files changed

+158
-126
lines changed

6 files changed

+158
-126
lines changed

‎src/app/components/topBar.tsx‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
import*asReactfrom'react'
2+
3+
importTogglefrom'material-ui/Toggle';
4+
importDrawerfrom'material-ui/Drawer';
5+
importAppBarfrom'material-ui/AppBar';
6+
7+
importIconMenufrom'material-ui/IconMenu';
8+
importIconButtonfrom'material-ui/IconButton';
9+
importFontIconfrom'material-ui/FontIcon';
10+
importNavigationExpandMoreIconfrom'material-ui/svg-icons/navigation/expand-more';
11+
importMenuItemfrom'material-ui/MenuItem';
12+
importDropDownMenufrom'material-ui/DropDownMenu';
13+
importRaisedButtonfrom'material-ui/RaisedButton';
14+
importFlatButtonfrom'material-ui/FlatButton';
15+
import{Toolbar,ToolbarGroup,ToolbarSeparator,ToolbarTitle}from'material-ui/Toolbar';
16+
17+
interfaceTopBarProps{
18+
toggleTheme:()=>void;
19+
logout:()=>void;
20+
useDarkTheme:boolean;
21+
}
22+
23+
interfaceTopBarState{
24+
sideBarOpen?:boolean
25+
value?:any
26+
}
27+
28+
exportclassTopBarextendsReact.Component<TopBarProps,TopBarState>{
29+
30+
constructor(){
31+
super();
32+
33+
this.state={
34+
sideBarOpen:false
35+
}
36+
37+
this.toggleSideMenu=this.toggleSideMenu.bind(this);
38+
}
39+
40+
toggleSideMenu(open:boolean){
41+
this.setState({
42+
sideBarOpen:open
43+
});
44+
}
45+
46+
render(){
47+
consttoolbar=
48+
<Toolbar>
49+
<ToolbarGroupfirstChild={true}>
50+
<DropDownMenuvalue={this.state.value}>
51+
<MenuItemvalue={1}primaryText="All Broadcasts"/>
52+
<MenuItemvalue={2}primaryText="All Voice"/>
53+
<MenuItemvalue={3}primaryText="All Text"/>
54+
<MenuItemvalue={4}primaryText="Complete Voice"/>
55+
<MenuItemvalue={5}primaryText="Complete Text"/>
56+
<MenuItemvalue={6}primaryText="Active Voice"/>
57+
<MenuItemvalue={7}primaryText="Active Text"/>
58+
</DropDownMenu>
59+
</ToolbarGroup>
60+
<ToolbarGroup>
61+
<ToolbarTitletext="Options"/>
62+
<FontIconclassName="muidocs-icon-custom-sort"/>
63+
<ToolbarSeparator/>
64+
<RaisedButtonlabel="Create Broadcast"/>
65+
<IconMenu
66+
iconButtonElement={
67+
<IconButtontouch={true}>
68+
<NavigationExpandMoreIcon/>
69+
</IconButton>
70+
}
71+
>
72+
<MenuItemprimaryText="Download"/>
73+
<MenuItemprimaryText="More Info"/>
74+
</IconMenu>
75+
</ToolbarGroup>
76+
</Toolbar>;
77+
78+
constsideMenu=
79+
<Drawer
80+
docked={false}
81+
width={300}
82+
open={this.state.sideBarOpen}
83+
onRequestChange={this.toggleSideMenu}
84+
>
85+
<MenuItemonTouchTap={()=>this.toggleSideMenu(false)}>Menu Item</MenuItem>
86+
<MenuItemonTouchTap={()=>this.toggleSideMenu(false)}>Menu Item 2</MenuItem>
87+
</Drawer>
88+
89+
constthemeToggle=
90+
<Toggle
91+
onToggle={this.props.toggleTheme}
92+
label={"dark:"+this.props.useDarkTheme}
93+
toggled={this.props.useDarkTheme}
94+
/>;
95+
96+
constlogoutButton=
97+
<FlatButton
98+
onClick={this.props.logout}
99+
label="logout"
100+
/>
101+
102+
constappBarRightElement=
103+
<divstyle={{display:"inline-block"}}>
104+
{themeToggle}
105+
{logoutButton}
106+
</div>
107+
108+
109+
return(
110+
<div>
111+
{sideMenu}
112+
<AppBariconElementRight={appBarRightElement}onLeftIconButtonTouchTap={()=>this.toggleSideMenu(true)}zDepth={0}/>
113+
{toolbar}
114+
{themeToggle}
115+
</div>
116+
);
117+
}
118+
}

‎src/app/containers/Dashboard.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import*asReactfrom'react';
22
import*as_from"lodash";
33

4+
importNavigationfrom'../components/navigation'
45

56
interfaceDashboardProps{
67
}
@@ -62,11 +63,11 @@ export default class Dashboard extends React.Component<DashboardProps, Dashboard
6263
}
6364

6465
render(){
65-
//var navigation = <Navigation data={this.state.data} onRowSelection={this.handleDataSelection}/>
66+
varnavigation=<Navigationdata={this.state.data}onRowSelection={this.handleDataSelection}/>
6667

6768
return(
6869
<div>
69-
dasboard
70+
{navigation}
7071
</div>
7172
);
7273

‎src/app/containers/Main.tsx‎

Lines changed: 12 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -6,25 +6,7 @@ import { StoreState } from '../reducers'
66
import{ChangeTheme}from'../actions'
77
import{push}from'react-router-redux'
88

9-
importTogglefrom'material-ui/Toggle';
10-
importDrawerfrom'material-ui/Drawer';
11-
importAppBarfrom'material-ui/AppBar';
12-
13-
importIconMenufrom'material-ui/IconMenu';
14-
importIconButtonfrom'material-ui/IconButton';
15-
importFontIconfrom'material-ui/FontIcon';
16-
importNavigationExpandMoreIconfrom'material-ui/svg-icons/navigation/expand-more';
17-
importMenuItemfrom'material-ui/MenuItem';
18-
importDropDownMenufrom'material-ui/DropDownMenu';
19-
importRaisedButtonfrom'material-ui/RaisedButton';
20-
importFlatButtonfrom'material-ui/FlatButton';
21-
import{Toolbar,ToolbarGroup,ToolbarSeparator,ToolbarTitle}from'material-ui/Toolbar';
22-
23-
24-
interfaceMainState{
25-
sideBarOpen?:boolean
26-
value?:any
27-
}
9+
import{TopBar}from'../components/topBar'
2810

2911
interfaceMainProps{
3012
dispatch:Dispatch<any>;
@@ -37,104 +19,34 @@ function mapStateToProps(state: StoreState) {
3719
};
3820
}
3921

40-
classMainextendsReact.Component<MainProps,MainState>{
22+
classMainextendsReact.Component<MainProps,any>{
4123

4224
constructor(){
4325
super();
4426

45-
this.state={
46-
sideBarOpen:false
47-
}
48-
49-
this.handleToggleSideMenu=this.handleToggleSideMenu.bind(this);
27+
this.toggleTheme=this.toggleTheme.bind(this);
5028
this.logout=this.logout.bind(this);
5129
}
5230

53-
handleToggleSideMenu(open:boolean){
54-
this.setState({
55-
sideBarOpen:open
56-
});
57-
}
5831

5932
logout(){
6033
localStorage.removeItem("auth");
6134
this.props.dispatch(push("dashboard"));
6235
}
6336

64-
render(){
65-
vartoolbar=
66-
<Toolbar>
67-
<ToolbarGroupfirstChild={true}>
68-
<DropDownMenuvalue={this.state.value}>
69-
<MenuItemvalue={1}primaryText="All Broadcasts"/>
70-
<MenuItemvalue={2}primaryText="All Voice"/>
71-
<MenuItemvalue={3}primaryText="All Text"/>
72-
<MenuItemvalue={4}primaryText="Complete Voice"/>
73-
<MenuItemvalue={5}primaryText="Complete Text"/>
74-
<MenuItemvalue={6}primaryText="Active Voice"/>
75-
<MenuItemvalue={7}primaryText="Active Text"/>
76-
</DropDownMenu>
77-
</ToolbarGroup>
78-
<ToolbarGroup>
79-
<ToolbarTitletext="Options"/>
80-
<FontIconclassName="muidocs-icon-custom-sort"/>
81-
<ToolbarSeparator/>
82-
<RaisedButtonlabel="Create Broadcast"/>
83-
<IconMenu
84-
iconButtonElement={
85-
<IconButtontouch={true}>
86-
<NavigationExpandMoreIcon/>
87-
</IconButton>
88-
}
89-
>
90-
<MenuItemprimaryText="Download"/>
91-
<MenuItemprimaryText="More Info"/>
92-
</IconMenu>
93-
</ToolbarGroup>
94-
</Toolbar>;
95-
96-
varsideMenu=
97-
<Drawer
98-
docked={false}
99-
width={300}
100-
open={this.state.sideBarOpen}
101-
onRequestChange={this.handleToggleSideMenu}
102-
>
103-
<MenuItemonTouchTap={()=>this.handleToggleSideMenu(false)}>Menu Item</MenuItem>
104-
<MenuItemonTouchTap={()=>this.handleToggleSideMenu(false)}>Menu Item 2</MenuItem>
105-
</Drawer>
106-
107-
varswithTheme=
108-
<Toggle
109-
onToggle={()=>{this.props.dispatch(newChangeTheme())}}
110-
label={"dark:"+this.props.useDarkTheme}
111-
toggled={this.props.useDarkTheme}
112-
/>;
113-
114-
varlogoutButton=
115-
<FlatButton
116-
onClick={this.logout}
117-
label="logout"
118-
/>
119-
120-
varappBarRightElement=
121-
<divstyle={{display:"inline-block"}}>
122-
{swithTheme}
123-
{logoutButton}
124-
</div>
37+
toggleTheme(){
38+
this.props.dispatch(newChangeTheme());
39+
}
12540

126-
// var childProps = {
127-
// this.props.children && React.cloneElement(this.props.children, {
128-
// onToggleTheme: this.handleToggleTheme
129-
// })
130-
// };
41+
render(){
13142

13243
return(
13344
<div>
134-
{sideMenu}
135-
<AppBariconElementRight={appBarRightElement}onLeftIconButtonTouchTap={()=>this.handleToggleSideMenu(true)}zDepth={0}/>
136-
{toolbar}
137-
{swithTheme}
45+
<TopBar
46+
toggleTheme={this.toggleTheme}
47+
useDarkTheme={this.props.useDarkTheme}
48+
logout={this.logout}
49+
/>
13850
{this.props.children}
13951
</div>
14052
);

‎src/app/containers/Root.tsx‎

Lines changed: 2 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,9 @@ import thunk from 'redux-thunk';
88

99
import{reducers,StoreState}from"../reducers"
1010
import{StoreBuilder}from"../utils/storeBuilder"
11-
import{authChecker,goToPath}from'../utils/routeHelpers'
1211
import{typedToPlainMiddleware}from'../utils/actionHelpers'
1312

14-
importLayoutfrom'./Layout'
15-
importLoginfrom'./Login'
16-
importMainfrom'./Main'
17-
importDashboardfrom'./Dashboard'
13+
importroutesfrom'../routes'
1814

1915

2016
exportdefaultclassRootextendsReact.Component<any,any>{
@@ -35,22 +31,10 @@ export default class Root extends React.Component<any, any>{
3531
this.history=syncHistoryWithStore(hashHistory,this.store);
3632
}
3733

38-
routes=
39-
<Routecomponent={Layout}onChange={authChecker('login','dashboard','auth')}>
40-
<Routepath="login"component={Login}/>
41-
<Routecomponent={Main}>
42-
<Routepath="dashboard"component={Dashboard}/>
43-
</Route>
44-
<RouteonEnter={goToPath('dashboard')}path="*"/>
45-
</Route>
46-
4734
render(){
48-
4935
return(
5036
<Providerstore={this.store}>
51-
<Routerhistory={this.history}>
52-
{this.routes}
53-
</Router>
37+
<Routerhistory={this.history}routes={routes}/>
5438
</Provider>
5539
);
5640
}

‎src/app/reducers/layoutReducer.ts‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
1-
// import { fromJS } from 'immutable';
1+
import*as_from'lodash'
2+
23
import{Reducer}from'redux'
34
import{BaseAction,isType}from'../utils/actionHelpers'
45
import{ChangeTheme}from'../actions'
56

6-
// const INITIAL_STATE = fromJS({
7-
// useDarkTheme: false,
8-
// });
97

108
constINITIAL_STATE:LayoutState={
119
useDarkTheme:false
@@ -19,9 +17,9 @@ export interface LayoutState {
1917
exportconstlayoutReducer:Reducer<LayoutState>=(state=INITIAL_STATE,action:BaseAction)=>{
2018

2119
if(isType(action,ChangeTheme)){
22-
return{
20+
return_.merge({},state,{
2321
useDarkTheme:!state.useDarkTheme
24-
};
22+
});
2523
}
2624

2725
returnstate;

‎src/app/routes.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import*asReactfrom'react';
2+
import{Route}from'react-router'
3+
4+
import{authChecker,goToPath}from'./utils/routeHelpers'
5+
6+
importLayoutfrom'./containers/Layout'
7+
importLoginfrom'./containers/Login'
8+
importMainfrom'./containers/Main'
9+
importDashboardfrom'./containers/Dashboard'
10+
11+
12+
exportdefault
13+
<Routecomponent={Layout}onChange={authChecker('login','dashboard','auth')}>
14+
<Routepath="login"component={Login}/>
15+
<Routecomponent={Main}>
16+
<Routepath="dashboard"component={Dashboard}/>
17+
</Route>
18+
<RouteonEnter={goToPath('dashboard')}path="*"/>
19+
</Route>

0 commit comments

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