Skip to content
This repository was archived by the owner on Nov 8, 2022. It is now read-only.

Commit d851c19

Browse files
mydearxymmydearxym
committed
layout wip
1 parent 01206f7 commit d851c19

File tree

12 files changed

+289
-6
lines changed

12 files changed

+289
-6
lines changed

‎components/BodyLayout/index.js‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
/*
2+
*
3+
* BodyLayout
4+
*
5+
*/
6+
7+
import React from 'react'
8+
import PropTypes from 'prop-types'
9+
10+
import styled from 'styled-components'
11+
12+
import { makeDebugger } from '../../utils/functions'
13+
import { theme } from '../../utils/themes'
14+
15+
/* eslint-disable no-unused-vars */
16+
const debug = makeDebugger('c:BodyLayout:index')
17+
/* eslint-enable no-unused-vars */
18+
19+
export const Body = styled.div`
20+
padding-left: 56px;
21+
position: relative;
22+
height: 100vh;
23+
background: ${theme('body_bg')};
24+
transition: background-color 0.3s;
25+
display: flex;
26+
flex-direction: column;
27+
`
28+
29+
const BodyLayout = ({ children }) => {
30+
return <Body>{children}</Body>
31+
}
32+
33+
BodyLayout.propTypes = {
34+
children: PropTypes.arrayOf(PropTypes.element),
35+
}
36+
37+
BodyLayout.defaultProps = {
38+
children: <div />,
39+
}
40+
41+
export default BodyLayout

‎components/BodyLayout/tests/index.test.js‎

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 BodyLayout from '../index'
5+
6+
describe('<BodyLayout />', () => {
7+
it('Expect to have unit tests specified', () => {
8+
expect(true).toEqual(false)
9+
})
10+
})

‎containers/Header/index.js‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
/*
2+
*
3+
* Header
4+
*
5+
*/
6+
7+
import React from 'react'
8+
import { inject, observer } from 'mobx-react'
9+
import keydown from 'react-keydown'
10+
11+
// import Link from 'next/link'
12+
import { Button } from '../../components'
13+
14+
import {
15+
makeDebugger,
16+
storeSelector,
17+
getSVGIconPath,
18+
} from '../../utils/functions'
19+
20+
import {
21+
Header,
22+
Router,
23+
Admin,
24+
Search,
25+
Notification,
26+
HeaderIcon,
27+
User,
28+
} from './styles'
29+
30+
import * as logic from './logic'
31+
32+
const debug = makeDebugger('C:Header')
33+
34+
class HeaderContainer extends React.Component {
35+
componentWillMount() {
36+
debug('mount')
37+
logic.init(this.props.header)
38+
}
39+
40+
/* eslint-disable class-methods-use-this */
41+
@keydown(['ctrl+p'])
42+
openDoraemon() {
43+
// debug('openDoraemon')
44+
logic.openDoraemon()
45+
}
46+
/* eslint-enable class-methods-use-this */
47+
48+
render() {
49+
return (
50+
<Header id="whereCallShowDoraemon">
51+
<Router>Javascript / Elixir / go</Router>
52+
<Admin>
53+
<Button>管理页</Button>
54+
</Admin>
55+
<Search onClick={logic.openDoraemon}>
56+
<HeaderIcon path={getSVGIconPath('header_search')} />
57+
</Search>
58+
<Notification onClick={logic.openPreview}>
59+
<HeaderIcon path={getSVGIconPath('notification')} />
60+
</Notification>
61+
<User onClick={logic.openPreview.bind(this, 'user')}>
62+
<HeaderIcon path={getSVGIconPath('header_user')} />
63+
</User>
64+
</Header>
65+
)
66+
}
67+
}
68+
69+
export default inject(storeSelector('header'))(observer(HeaderContainer))

‎containers/Header/lang.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/*
2+
* Header Langs
3+
*
4+
* This contains all the text for the Header component.
5+
*/
6+
import { defineMessages } from 'react-intl'
7+
8+
export default defineMessages({
9+
header: {
10+
id: 'containers.Header.header',
11+
defaultMessage: 'This is the Header component !',
12+
},
13+
})

‎containers/Header/logic.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
// import R from 'ramda'
2+
3+
import { makeDebugger } from '../../utils/functions'
4+
5+
/* eslint-disable no-unused-vars */
6+
const debug = makeDebugger('L:Header')
7+
/* eslint-enable no-unused-vars */
8+
9+
let header = null
10+
11+
export function openPreview(type) {
12+
header.openPreview(type)
13+
}
14+
15+
export function openDoraemon() {
16+
header.openDoraemon()
17+
}
18+
19+
export function init(selectedStore) {
20+
header = selectedStore
21+
}

‎containers/Header/styles/index.js‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import styled from 'styled-components'
2+
3+
import ReactSVG from 'react-svg'
4+
5+
// import { theme } from '../../../utils/themes'
6+
export const Header = styled.div`
7+
padding: 5px;
8+
padding-top: 8px;
9+
line-height: 2vh;
10+
border-bottom: 1px solid tomato;
11+
display: flex;
12+
flex-direction: row;
13+
`
14+
15+
export const Router = styled.div`flex-grow: 1;`
16+
17+
export const Admin = styled.div`
18+
margin-right: 10px;
19+
font-size: xx-small;
20+
`
21+
22+
export const Search = styled.div`
23+
color: grey;
24+
margin-right: 10px;
25+
`
26+
27+
export const Notification = styled.div`
28+
color: grey;
29+
margin-right: 10px;
30+
`
31+
export const HeaderIcon = styled(ReactSVG)`
32+
fill: grey;
33+
width: 22px;
34+
height: 22px;
35+
cursor: pointer;
36+
`
37+
export const User = styled.div`
38+
color: grey;
39+
margin-right: 20px;
40+
`
41+
42+
export const Button = styled.button`
43+
font-size: 1em;
44+
margin: 1em;
45+
padding: 0.25em 1em;
46+
border-radius: 3px;
47+
background: transparent;
48+
cursor: pointer;
49+
50+
/* Color the border and text with theme.main */
51+
color: ${props => props.theme.main};
52+
border: 2px solid ${props => props.theme.main};
53+
&:focus {
54+
outline: 0;
55+
}
56+
`

‎containers/Header/tests/index.test.js‎

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 Header from '../index'
5+
6+
describe('<Header />', () => {
7+
it('Expect to have unit tests specified', () => {
8+
expect(true).toEqual(false)
9+
})
10+
})

‎pages/index.js‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,12 @@ import initRootStore from '../stores'
55
import ThemeWrapper from '../containers/ThemeWrapper'
66
import MultiLanguage from '../containers/MultiLanguage'
77
import Sidebar from '../containers/Sidebar'
8-
import Body from '../containers/Body'
8+
// import Body from '../containers/Body'
99
import Preview from '../containers/Preview'
1010
import Doraemon from '../containers/Doraemon'
11+
import Header from '../containers/Header'
1112
import Route from '../containers/Route'
13+
import BodyLayout from '../components/BodyLayout'
1214

1315
// try to fix safari bug
1416
// see https://github.com/yahoo/react-intl/issues/422
@@ -39,13 +41,25 @@ export default class Index extends React.Component {
3941
<ThemeWrapper>
4042
<Route />
4143
<MultiLanguage>
42-
<Preview />
43-
<Body />
4444
<Sidebar />
45+
<Preview />
4546
<Doraemon />
47+
<BodyLayout>
48+
<Header />
49+
<h2>hehe</h2>
50+
<h2>hehe</h2>
51+
</BodyLayout>
4652
</MultiLanguage>
4753
</ThemeWrapper>
4854
</Provider>
4955
)
5056
}
5157
}
58+
59+
/*
60+
<Preview />
61+
<Doraemon />
62+
63+
<Body />
64+
<Sidebar />
65+
*/

‎stores/HeaderStore/index.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
/*
2+
* HeaderStore store
3+
*
4+
*/
5+
6+
import { types as t, getParent } from 'mobx-state-tree'
7+
// import R from 'ramda'
8+
9+
import { markStates, makeDebugger } from '../../utils/functions'
10+
/* eslint-disable no-unused-vars */
11+
const debug = makeDebugger('S:HeaderStore')
12+
/* eslint-enable no-unused-vars */
13+
14+
const HeaderStore = t
15+
.model('HeaderStore', {
16+
hehe: t.optional(t.string, ''),
17+
})
18+
.views(self => ({
19+
get root() {
20+
return getParent(self)
21+
},
22+
}))
23+
.actions(self => ({
24+
openDoraemon() {
25+
self.root.openDoraemon()
26+
},
27+
openPreview(type) {
28+
self.root.openPreview(type)
29+
},
30+
31+
markState(sobj) {
32+
markStates(sobj, self)
33+
},
34+
}))
35+
36+
export default HeaderStore

‎stores/HeaderStore/test/index.test.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/*
2+
* HeaderStore store test
3+
*
4+
*/
5+
6+
// import R from 'ramda'
7+
// import HeaderStore from '../index'
8+
9+
it('HeaderStore todo: 1 + 1 = 2', () => {
10+
expect(1 + 1).toBe(2)
11+
})

0 commit comments

Comments
 (0)