feat(sidebar): replace exploreAll with search function in header

Author: mydearxym

src/containers/Sidebar/Header.js

@@ -1,6 +1,5 @@
 import React from 'react'
-import { Button } from 'antd'
-
+// eslint-disable-next-line import/named
 import { ICON_CMD, ICON_BASE } from '@config'
 
 import PinButton from './PinButton'
@@ -10,30 +9,37 @@ import {
   InnerWrapper,
   HeaderFuncs,
   SiteLogoWrapper,
-  ExploreWrapper,
-  ExploreContent,
-  ExploreIcon,
-  ExploreText,
+  SearchWrapper,
+  SearchContent,
+  SearchInput,
+  SearchIcon,
   SiteLogo,
 } from './styles/header'
+import {
+  searchOnBlur,
+  searchOnFocus,
+  searchCommunityValueOnChange,
+} from './logic'
 
-const Header = ({ pin }) => (
+const Header = ({ pin, searchCommunityValue }) => (
   <Wrapper pin={pin}>
     <InnerWrapper>
       <HeaderFuncs>
         <SiteLogoWrapper pin={pin}>
           <SiteLogo src={`${ICON_BASE}/sidebar/everyday.svg`} />
         </SiteLogoWrapper>
-        <ExploreWrapper pin={pin}>
-          <a href="/communities" rel="noopener noreferrer" target="_blank">
-            <Button size="small" type="primary" ghost>
-              <ExploreContent>
-                <ExploreIcon src={`${ICON_CMD}/telescope.svg`} />
-                <ExploreText>Explore All</ExploreText>
-              </ExploreContent>
-            </Button>
-          </a>
-        </ExploreWrapper>
+        <SearchWrapper pin={pin}>
+          <SearchContent>
+            <SearchIcon src={`${ICON_CMD}/search.svg`} />
+            <SearchInput
+              value={searchCommunityValue}
+              onChange={e => searchCommunityValueOnChange(e)}
+              placeholder="订阅的社区"
+              onBlur={searchOnBlur}
+              onFocus={searchOnFocus}
+            />
+          </SearchContent>
+        </SearchWrapper>
       </HeaderFuncs>
       <PinButton pin={pin} />
     </InnerWrapper>

src/containers/Sidebar/index.js

@@ -23,6 +23,7 @@ const SidebarContainer = ({ sidebar }) => {
   const {
     curCommunity,
     pin,
+    searchCommunityValue,
     showHomeBarShadow,
     communitiesData,
     forceRerender,
@@ -34,7 +35,7 @@ const SidebarContainer = ({ sidebar }) => {
 
   return (
     <Wrapper pin={pin} testid="sidebar">
-      <Header pin={pin} />
+      <Header pin={pin} searchCommunityValue={searchCommunityValue} />
       <MenuList
         items={communitiesData}
         pin={pin}

src/containers/Sidebar/logic.js

@@ -35,6 +35,17 @@ export const scrollOffTop = () => {
   if (store) store.mark({ showHomeBarShadow: true })
 }
 
+export const searchOnBlur = () => {
+  log('searchOnBlur')
+}
+
+export const searchOnFocus = () => {
+  store.mark({ pin: true })
+}
+
+export const searchCommunityValueOnChange = e =>
+  store.mark({ searchCommunityValue: e.target.value })
+
 export const onCommunitySelect = community => {
   // NOTE: check page, if current it's from communities then redirect whole page
   const { mainPath } = store.curRoute

src/containers/Sidebar/store.js

@@ -5,8 +5,7 @@
 
 import { types as t, getParent } from 'mobx-state-tree'
 import R from 'ramda'
-import { buildLog, markStates, stripMobx, sortByIndex } from '@utils'
-/* import MenuItem from './MenuItemStore' */
+import { buildLog, markStates, stripMobx, sortByIndex, notEmpty } from '@utils'
 
 /* eslint-disable-next-line */
 const log = buildLog('S:SidebarStore')
@@ -17,6 +16,7 @@ const SidebarStore = t
     pin: t.optional(t.boolean, false),
     // add shadow effect when user scroll the communities list
     showHomeBarShadow: t.optional(t.boolean, false),
+    searchCommunityValue: t.optional(t.string, ''),
 
     /*
        this is a fix for wired svg icon in sidebar
@@ -56,7 +56,16 @@ const SidebarStore = t
       return self.root.langMessages
     },
     get communitiesData() {
+      const { searchCommunityValue } = self
       const { subscribedCommunities } = self.root.account
+
+      if (notEmpty(R.trim(searchCommunityValue))) {
+        return R.filter(
+          item => R.contains(searchCommunityValue, R.prop('title', item)),
+          subscribedCommunities.entries
+        )
+      }
+
       return subscribedCommunities
         ? sortByIndex(subscribedCommunities.entries)
         : []

src/containers/Sidebar/styles/header.js

@@ -1,4 +1,5 @@
 import styled from 'styled-components'
+import { Input } from 'antd'
 
 import Img from '@components/Img'
 import { theme, cs } from '@utils'
@@ -16,6 +17,7 @@ export const InnerWrapper = styled.div`
 `
 export const HeaderFuncs = styled.div`
   ${cs.flexGrow()};
+  margin-top: -5px;
 `
 export const PinIconWrapper = styled.div`
   &:hover {
@@ -58,7 +60,7 @@ export const PinIcon = styled(Img)`
     opacity: 1;
   }
 `
-export const ExploreWrapper = styled.div`
+export const SearchWrapper = styled.div`
   padding-left: 16px;
   visibility: ${({ pin }) => (pin ? 'visible' : 'hidden')};
   opacity: ${({ pin }) => (pin ? 1 : 0)};
@@ -68,17 +70,46 @@ export const ExploreWrapper = styled.div`
     opacity: 1;
   }
 `
-export const ExploreContent = styled.div`
-  ${cs.flex('align-center')};
-`
-export const ExploreText = styled.div`
-  letter-spacing: 1.5px;
-  ${ExploreContent}:hover & {
-    letter-spacing: 3px;
+export const SearchInput = styled(Input)`
+  border: 1px solid;
+  border-color: ${theme('sidebar.bg')};
+  border-bottom-color: ${theme('sidebar.searchInputBottom')};
+  height: 28px;
+  margin-top: -4px;
+  border-radius: 0px;
+  margin-left: 5px;
+  line-height: 20px;
+
+  width: 50%;
+  font-size: 1rem;
+  background: ${theme('sidebar.bg')};
+  padding-left: 5px;
+  color: ${theme('sidebar.menuLink')};
+  text-align: left;
+
+  ::placeholder {
+    color: ${theme('sidebar.searchInputHolder')};
   }
-  transition: letter-spacing 0.3s;
+
+  &:hover {
+    color: ${theme('sidebar.menuLink')};
+    border-color: ${theme('sidebar.bg')};
+    border-bottom: 1px solid;
+    border-bottom-color: ${theme('sidebar.searchInputBottom')};
+  }
+  &:focus {
+    border-color: ${theme('sidebar.bg')};
+    box-shadow: none;
+    border-bottom: 1px solid;
+    border-bottom-color: ${theme('sidebar.searchInputBottomActive')};
+    color: ${theme('sidebar.menuLink')};
+    text-align: left;
+  }
+`
+export const SearchContent = styled.div`
+  ${cs.flex('align-center')};
 `
-export const ExploreIcon = styled(Img)`
+export const SearchIcon = styled(Img)`
   fill: ${theme('button.primary')};
   width: 16px;
   height: 16px;

utils/themes/skins/solarized_dark.js

@@ -113,6 +113,9 @@ const solarizedDark = {
     borderColor: '#14363E',
     topShadow: '-2px 1px 6px 0px rgb(1,21,25)',
     topShadowBorderBottom: '1px solid #06495a',
+    searchInputBottom: '#154964',
+    searchInputBottomActive: '#2e78a4',
+    searchInputHolder: '#17414E',
   },
   preview: {
     title: primaryColor,