prepare for protype

Author: mydearxym

components/Navigator/index.js

@@ -0,0 +1,53 @@
+/*
+ *
+ * Navigator
+ *
+ */
+
+import React from 'react'
+// import PropTypes from 'prop-types'
+
+import { makeDebugger } from '../../utils/functions'
+import { Breadcrumbs, UL, LI, A } from './style'
+/* eslint-disable no-unused-vars */
+const debug = makeDebugger('c:Navigator:index')
+/* eslint-enable no-unused-vars */
+
+const Navigator = () => {
+  return (
+    <Breadcrumbs>
+      <UL>
+        <LI>
+          <A>
+            <span>Coder-Club</span>
+          </A>
+        </LI>
+        <LI>
+          <A>
+            <span>Js</span>
+          </A>
+        </LI>
+        <LI active>
+          <A>
+            <span>帖子：我是一个人哈哈</span>
+          </A>
+        </LI>
+        <LI>
+          <A>
+            <span>Checkout</span>
+          </A>
+        </LI>
+      </UL>
+    </Breadcrumbs>
+  )
+}
+
+/*
+Navigator.propTypes = {
+  // https://www.npmjs.com/package/prop-types
+}
+
+Navigator.defaultProps = {}
+*/
+
+export default Navigator

components/Navigator/style/index.js

@@ -0,0 +1,44 @@
+import styled from 'styled-components'
+
+import { theme } from '../../../utils/themes'
+
+export const Breadcrumbs = styled.div`
+  max-width: 520px;
+  margin-left: 3vw;
+  height: 100%;
+`
+
+export const UL = styled.ul`
+  &:before {
+    content: ' ';
+    display: table;
+  }
+  &:after {
+    content: ' ';
+    display: table;
+    clear: both;
+  }
+`
+export const LI = styled.li`
+  float: left;
+  padding: 0 5px;
+  min-width: 15%;
+  max-width: 30%;
+  border-bottom: ${props =>
+    props.active ? theme('navigator.activeBottom', props) : ''};
+  border-right: ${theme('navigator.borderRight')};
+  &:hover {
+    background: ${theme('navigator.hoverBg')};
+  }
+`
+
+export const A = styled.a`
+  position: relative;
+  display: block;
+  padding: 10px;
+  padding-right: 0 !important;
+  font-size: 1em;
+  text-align: center;
+  color: #aaa;
+  cursor: pointer;
+`

components/Navigator/tests/index.test.js

@@ -0,0 +1,10 @@
+// import React from 'react'
+// import { shallow } from 'enzyme'
+
+// import Navigator from '../index'
+
+describe('<Navigator />', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(false)
+  })
+})

components/Tabber/index.js

@@ -0,0 +1,48 @@
+/*
+ *
+ * Tabber
+ *
+ */
+
+import React from 'react'
+import PropTypes from 'prop-types'
+import R from 'ramda'
+import { Tabs } from 'antd'
+
+import { makeDebugger } from '../../utils/functions'
+/* eslint-disable no-unused-vars */
+const debug = makeDebugger('c:Tabber:index')
+/* eslint-enable no-unused-vars */
+
+const { TabPane } = Tabs
+
+const translator = {
+  map: '地图',
+  posts: '帖子',
+  news: '动态',
+  meetups: 'meetups',
+  users: '用户',
+  videos: '视频',
+  tuts: '教程',
+  jobs: '招聘',
+}
+
+const Tabber = ({ source, onChange }) => {
+  const tabitems = R.values(source)
+  return (
+    <Tabs onChange={onChange}>
+      {tabitems.map(item => (
+        <TabPane tab={translator[item.title] || '??'} key={item.raw} />
+      ))}
+    </Tabs>
+  )
+}
+
+Tabber.propTypes = {
+  // https://www.npmjs.com/package/prop-types
+  onChange: PropTypes.func.isRequired,
+}
+
+Tabber.defaultProps = {}
+
+export default Tabber

components/Tabber/tests/index.test.js

@@ -0,0 +1,10 @@
+// import React from 'react'
+// import { shallow } from 'enzyme'
+
+// import Tabber from '../index'
+
+describe('<Tabber />', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(false)
+  })
+})

containers/Banner/index.js

@@ -6,10 +6,8 @@
 
 import React from 'react'
 import { inject, observer } from 'mobx-react'
-import { Tabs } from 'antd'
 
-import styled from 'styled-components'
-// import Link from 'next/link'
+import Tabber from '../../components/Tabber'
 
 import {
   makeDebugger,
@@ -19,20 +17,12 @@ import {
 
 import * as logic from './logic'
 
-import { Banner, BannerLogo } from './styles'
+import { Banner, BannerLogo, TabberWrapper } from './styles'
 
 const debug = makeDebugger('C:Banner')
 
-const { TabPane } = Tabs
-
-const MTabs = styled(Tabs)`
-  position: absolute;
-  bottom: -17px;
-  width: 80vw;
-`
-
-function callback(key) {
-  console.log('callback: ', key)
+const onChange = e => {
+  console.log('callback: ', e)
 }
 
 class BannerContainer extends React.Component {
@@ -43,19 +33,17 @@ class BannerContainer extends React.Component {
 
   render() {
     const { banner } = this.props
-    const { curUrlPath } = banner
+    const { curUrlPath, curCommunity } = banner
 
     const defaultIcon = 'js'
     const iconKey = curUrlPath === '/' ? defaultIcon : curUrlPath
 
     return (
       <Banner>
         <BannerLogo path={getSVGIconPath(iconKey)} />
-        <MTabs onChange={callback}>
-          <TabPane tab="帖子" key="1" />
-          <TabPane tab="教程" key="2" />
-          <TabPane tab="用户" key="3" />
-        </MTabs>
+        <TabberWrapper>
+          <Tabber source={curCommunity} onChange={onChange} />
+        </TabberWrapper>
       </Banner>
     )
   }

containers/Banner/styles/index.js

@@ -15,7 +15,13 @@ export const Banner = styled.div`
 `
 
 export const BannerLogo = styled(ReactSVG)`
-  margin-top: 2em;
+  margin-top: 1em;
   width: 80px;
   height: 80px;
 `
+
+export const TabberWrapper = styled.div`
+  position: absolute;
+  bottom: -17px;
+  width: 80vw;
+`

containers/Content/index.js

@@ -0,0 +1,45 @@
+/*
+*
+* Content
+*
+*/
+
+import React from 'react'
+import { inject, observer } from 'mobx-react'
+import styled from 'styled-components'
+
+// import Link from 'next/link'
+
+import { makeDebugger, storeSelector } from '../../utils/functions'
+import { theme } from '../../utils/themes'
+
+import * as logic from './logic'
+
+const debug = makeDebugger('C:Content')
+
+const Tmp = styled.div`
+  margin: 30px;
+  width: 95%;
+  height: 70%;
+  background: ${theme('content.bg')};
+  border-radius: 10px;
+  padding: 30px;
+`
+
+class ContentContainer extends React.Component {
+  componentWillMount() {
+    debug('mount')
+    logic.init(this.props.content)
+  }
+
+  render() {
+    return (
+      <Tmp>
+        <br />
+        Content container!
+      </Tmp>
+    )
+  }
+}
+
+export default inject(storeSelector('content'))(observer(ContentContainer))

containers/Content/lang.js

@@ -0,0 +1,13 @@
+/*
+ * Content Langs
+ *
+ * This contains all the text for the Content component.
+ */
+import { defineMessages } from 'react-intl'
+
+export default defineMessages({
+  header: {
+    id: 'containers.Content.header',
+    defaultMessage: 'This is the Content component !',
+  },
+})

containers/Content/logic.js

@@ -0,0 +1,16 @@
+// import R from 'ramda'
+
+import { makeDebugger } from '../../utils/functions'
+
+/* eslint-disable no-unused-vars */
+const debug = makeDebugger('L:Content')
+/* eslint-enable no-unused-vars */
+
+let content = null
+
+export function someMethod() {}
+
+export function init(selectedStore) {
+  content = selectedStore
+  debug('content', content)
+}