chore: merge branch 'dev'

Author: mydearxym

components/Navigator/index.js

@@ -16,14 +16,11 @@ import BriefView from './BriefView'
 const debug = makeDebugger('c:Navigator:index')
 
 const Navigator = ({ curCommunity, layout, curRoute }) => {
+  const { mainPath, subPath } = curRoute
+
   if (
-    R.contains(curRoute.mainPath, [ROUTE.USER, ROUTE.COMMUNITIES]) ||
-    R.contains(curRoute.subPath, [
-      ROUTE.POST,
-      ROUTE.JOB,
-      ROUTE.VIDEO,
-      ROUTE.REPO,
-    ])
+    R.contains(mainPath, [ROUTE.USER, ROUTE.COMMUNITIES]) ||
+    R.contains(subPath, [ROUTE.POST, ROUTE.JOB, ROUTE.VIDEO, ROUTE.REPO])
   ) {
     return <DigestView />
   }

components/Pagi/index.js

@@ -9,7 +9,7 @@ import { Pagination } from 'antd'
 import PropTypes from 'prop-types'
 
 import { makeDebugger } from 'utils'
-import { PagiWrapper, BottomMsg } from './styles'
+import { PagiWrapper, CustomText, BottomMsg } from './styles'
 
 /* eslint-disable-next-line */
 const debug = makeDebugger('c:Pagi:index')
@@ -19,9 +19,9 @@ const hasExtraPage = (totalCount, pageSize) => totalCount > pageSize
 export const PagiCustomRender = (current, type, originalElement) => {
   /* eslint-disable */
   if (type === 'prev') {
-    return <a>上一页</a>
+    return <CustomText>上一页</CustomText>
   } else if (type === 'next') {
-    return <a>下一页</a>
+    return <CustomText>下一页</CustomText>
   }
   /* eslint-enable */
   return originalElement

components/Pagi/styles/index.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components'
-import { theme } from 'utils'
+import { theme, cs } from 'utils'
 
 export const PagiWrapper = styled.div`
   text-align: center;
@@ -8,6 +8,10 @@ export const PagiWrapper = styled.div`
   margin-left: ${({ left }) => left};
 `
 
+export const CustomText = styled.a`
+  ${cs.media.tablet`display: none`};
+`
+
 export const BottomMsg = styled.div`
   font-size: 1.1rem;
   color: ${theme('thread.articleDigest')};

containers/BodyLayout/index.js

@@ -1,19 +1,20 @@
 /*
-*
-* BodyLayout
-*
-*/
+ *
+ * BodyLayout
+ *
+ */
 
 import React from 'react'
 import PropTypes from 'prop-types'
 import { inject, observer } from 'mobx-react'
 import keydown from 'react-keydown'
 
 // import Link from 'next/link'
+import { ICON_CMD } from 'config'
 
 import { storePlug } from 'utils'
 
-import Wrapper from './styles'
+import { Wrapper, SubCommunitiesExpander, ExpanderIcon } from './styles'
 import * as logic from './logic'
 
 class BodyLayoutContainer extends React.Component {
@@ -38,6 +39,9 @@ class BodyLayoutContainer extends React.Component {
 
     return (
       <Wrapper sidebarPin={sidebarPin} noSidebar={noSidebar}>
+        <SubCommunitiesExpander onClick={logic.queryDoraemon.bind(this, '/')}>
+          <ExpanderIcon src={`${ICON_CMD}/expander_more.svg`} />
+        </SubCommunitiesExpander>
         {children}
       </Wrapper>
     )

containers/BodyLayout/logic.js

@@ -1,11 +1,13 @@
-import { makeDebugger } from 'utils'
+import { makeDebugger, dispatchEvent, EVENT } from 'utils'
 
 /* eslint-disable-next-line */
 const debug = makeDebugger('L:BodyLayout')
 
 let store = null
 
 export const openDoraemon = () => store.openDoraemon()
+export const queryDoraemon = data =>
+  dispatchEvent(EVENT.QUERY_DORAMON, { data })
 
 export const init = _store => {
   if (store) return false

containers/BodyLayout/styles/index.js

@@ -1,8 +1,10 @@
 import styled from 'styled-components'
 import { theme, cs } from 'utils'
 
+import Img from 'components/Img'
+
 // transition: background-color 0.2s;
-const Wrapper = styled.div`
+export const Wrapper = styled.div`
   ${cs.flexColumn()};
   padding-left: ${({ noSidebar }) => (noSidebar ? '0' : '56px')};
   position: relative;
@@ -12,8 +14,32 @@ const Wrapper = styled.div`
   margin-left: ${({ sidebarPin }) => (sidebarPin ? '180px' : '0')};
   transition: all 0.2s;
   overflow-x: ${({ sidebarPin }) => (sidebarPin ? 'hidden' : '')};
-  ${cs.media.tablet`padding-left: 0`};
+  ${cs.media.tablet`
+    position: relative;
+    padding-left: 0;
+  `};
+`
+export const SubCommunitiesExpander = styled.div`
+  display: none;
+  ${cs.media.tablet`
+    ${cs.flex('align-both')};
+    width: 30px;
+    position: fixed;
+    top: 10%;
+    left: 0;
+    z-index: 100;
+    border: 1px solid;
+    border-color: ${theme('content.cardBg')};
+    border-radius: 0 10px 10px 0;
+    height: 40px;
+    background-color: ${theme('banner.numberHoverBg')};
+    box-shadow: ${theme('preview.shadow')};
+  `};
 `
-/* overflow-x: hidden; */
 
-export default Wrapper
+// expander_more
+export const ExpanderIcon = styled(Img)`
+  fill ${theme('banner.desc')};
+  width: 18px;
+  height: 20px;
+`

containers/Doraemon/helper/swissArmyKnife.js

@@ -14,7 +14,7 @@ export const anyNil = R.any(R.isNil)
 export class SwissArmyKnife {
   constructor(store) {
     this.store = store
-    this.communities = R.keys(store.communities)
+    this.communities = R.pluck('raw', store.subscribedCommunities)
   }
 
   completeInput = (into = false) => {
@@ -71,8 +71,14 @@ export class SwissArmyKnife {
   }
 
   // TODO rename to linker
-  communityLinker = cmdpath =>
-    R.and(R.contains(R.head(cmdpath), this.communities), lengthE1(cmdpath))
+  communityLinker = cmdpath => {
+    // console.log('communityLinker: ', cmdpath)
+    // console.log('communityLinker this.communities: ', this.communities)
+    return R.and(
+      R.contains(R.head(cmdpath), this.communities),
+      lengthE1(cmdpath)
+    )
+  }
 
   communityInsideLinker = cmdpath =>
     R.and(R.contains(R.head(cmdpath), this.communities), lengthE2(cmdpath))

containers/Doraemon/logic.js

@@ -13,7 +13,9 @@ import {
   EVENT,
   TYPE,
   ERR,
+  ROUTE,
   prettyNum,
+  thread2Subpath,
   THREAD,
   cutFrom,
   errRescue,
@@ -180,17 +182,29 @@ const initSpecCmdResolver = () => {
     {
       match: SAK.communityLinker,
       action: cmdpath => {
-        debug('communityLinker: ', cmdpath)
+        const community = cmdpath[0]
+        const { mainPath, subPath } = store.curRoute
+
+        if (
+          R.contains(mainPath, [ROUTE.USER, ROUTE.COMMUNITIES]) ||
+          R.contains(subPath, [ROUTE.POST, ROUTE.JOB, ROUTE.VIDEO, ROUTE.REPO])
+        ) {
+          Global.location.href = `/${community}/posts`
+          return hidePanel()
+        }
 
-        // Router.push(url, as)
-        // TODO: use route store  method
-        Router.push(
-          {
-            pathname: '/',
-            query: { main: cmdpath[0] },
-          },
-          cmdpath[0]
-        )
+        store.setViewing({
+          community: { raw: community },
+          activeThread: THREAD.POST,
+          post: {},
+        })
+
+        store.markRoute({
+          mainPath: community,
+          subPath: thread2Subpath(THREAD.POST),
+        })
+
+        dispatchEvent(EVENT.COMMUNITY_CHANGE)
         hidePanel()
       },
     },
@@ -207,6 +221,8 @@ const doSpecCmd = () => {
   const cmd = store.curCmdChain
   if (!cmd) return
 
+  debug('doSpecCmd cmd: ', cmd)
+
   /* Do not use forEach, cause forEach will not break */
   for (let i = 0; i < cmdResolver.length; i += 1) {
     if (cmdResolver[i].match(cmd)) {
@@ -434,7 +450,11 @@ const DataSolver = [
     match: asyncRes(EVENT.QUERY_DORAMON),
     action: res => {
       const { data } = res[EVENT.QUERY_DORAMON]
-      store.open()
+      const forcus = false
+      store.open(forcus)
+
+      /* "doraemonInputbar" */
+
       store.markState({ inputValue: data })
       queryPocket()
     },

containers/Doraemon/store.js

@@ -76,6 +76,9 @@ const DoraemonStore = t
     get root() {
       return getParent(self)
     },
+    get curRoute() {
+      return self.root.curRoute
+    },
     get curCmdChain() {
       if (!self.cmdChain && self.activeRaw) {
         return [self.activeRaw]
@@ -126,6 +129,9 @@ const DoraemonStore = t
     },
   }))
   .actions(self => ({
+    markRoute(query) {
+      self.root.markRoute(query)
+    },
     toast(type, options) {
       self.root.toast(type, options)
     },
@@ -184,14 +190,12 @@ const DoraemonStore = t
         activeRaw: nextActiveRaw,
       })
     },
-    activeTo(raw) {
-      self.markState({
-        activeRaw: raw,
-      })
+    activeTo(activeRaw) {
+      self.markState({ activeRaw })
     },
-    open() {
+    open(forcus = true) {
       self.visible = true
-      focusDoraemonBar()
+      if (forcus) focusDoraemonBar()
     },
     handleLogin() {
       self.open()
@@ -205,6 +209,9 @@ const DoraemonStore = t
       self.clearSuggestions()
       hideDoraemonBarRecover()
     },
+    setViewing(sobj) {
+      self.root.setViewing(sobj)
+    },
     markState(sobj) {
       markStates(sobj, self)
     },

containers/Footer/MobilBottomInfo.js

@@ -13,7 +13,7 @@ import {
   ThxTitle,
 } from './styles/mobile_bottom_info'
 
-import { toggleBusBanner, openDoraemon } from './logic'
+import { toggleBusBanner, queryDoraemon } from './logic'
 
 const MobileBottomInfo = () => (
   <React.Fragment>
@@ -22,9 +22,7 @@ const MobileBottomInfo = () => (
         所有社区
       </ItemBtn>
       <DotDivider radius="4px" />
-      <ItemBtn onClick={openDoraemon.bind(this, '/')}>我的关注</ItemBtn>
-      <DotDivider radius="4px" />
-      <ItemBtn onClick={openDoraemon.bind(this, '/theme/')}>切换主题</ItemBtn>
+      <ItemBtn onClick={queryDoraemon.bind(this, '/theme/')}>切换主题</ItemBtn>
     </LinkInfoWrapper>
 
     <SiteInfoWrapper>