refactor(sidebar-footer): badic scroll shadow ux

Author: mydearxym

src/containers/Sidebar/Footer.js

@@ -4,8 +4,8 @@ import { ICON_CMD } from '@config'
 
 import { Wrapper, InnerWrapper, SettingIcon } from './styles/footer'
 
-const Footer = ({ pin }) => (
-  <Wrapper pin={pin}>
+const Footer = ({ pin, showFooterBarShadow }) => (
+  <Wrapper pin={pin} dropShadow={showFooterBarShadow}>
     <InnerWrapper pin={pin}>
       <SettingIcon src={`${ICON_CMD}/setting.svg`} />
     </InnerWrapper>

src/containers/Sidebar/Header.js

@@ -15,11 +15,7 @@ import {
   SearchIcon,
   SiteLogo,
 } from './styles/header'
-import {
-  searchOnBlur,
-  searchOnFocus,
-  searchCommunityValueOnChange,
-} from './logic'
+import { searchOnFocus, searchCommunityValueOnChange } from './logic'
 
 const Header = ({ pin, searchCommunityValue }) => (
   <Wrapper pin={pin}>
@@ -35,7 +31,6 @@ const Header = ({ pin, searchCommunityValue }) => (
               value={searchCommunityValue}
               onChange={e => searchCommunityValueOnChange(e)}
               placeholder="订阅的社区"
-              onBlur={searchOnBlur}
               onFocus={searchOnFocus}
             />
           </SearchContent>

src/containers/Sidebar/MenuList.js

@@ -5,7 +5,7 @@ import { SortableContainer, SortableElement } from 'react-sortable-hoc'
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'
 
 import MenuBar from './MenuBar'
-import { scrollOnTop, scrollOffTop } from './logic'
+import { anchorTop, anchorOffTop, anchorBottom, anchorOffBottom } from './logic'
 import { Wrapper, ScrollWrapper } from './styles/menu_list'
 
 const SortableMenuBar = SortableElement(
@@ -41,7 +41,7 @@ const MenuList = SortableContainer(
         >
           <ScrollWrapper>
             <React.Fragment>
-              <Waypoint onEnter={scrollOnTop} onLeave={scrollOffTop} />
+              <Waypoint onEnter={anchorTop} onLeave={anchorOffTop} />
               {sortableCommunities.map((item, index) => (
                 <SortableMenuBar
                   index={index}
@@ -52,6 +52,7 @@ const MenuList = SortableContainer(
                   forceRerender={forceRerender}
                 />
               ))}
+              <Waypoint onEnter={anchorBottom} onLeave={anchorOffBottom} />
             </React.Fragment>
           </ScrollWrapper>
         </OverlayScrollbarsComponent>

src/containers/Sidebar/index.js

@@ -26,6 +26,7 @@ const SidebarContainer = ({ sidebar }) => {
     pin,
     searchCommunityValue,
     showHomeBarShadow,
+    showFooterBarShadow,
     communitiesData,
     forceRerender,
   } = sidebar
@@ -46,7 +47,7 @@ const SidebarContainer = ({ sidebar }) => {
         onSortEnd={onSortMenuEnd}
         distance={5}
       />
-      <Footer pin={pin} />
+      <Footer pin={pin} showFooterBarShadow={showFooterBarShadow} />
     </Wrapper>
   )
 }

src/containers/Sidebar/logic.js

@@ -27,22 +27,24 @@ let sub$ = null
 
 export const setPin = () => store.mark({ pin: !store.pin })
 
-export const scrollOnTop = () => {
+export const anchorTop = () => {
   if (store) store.mark({ showHomeBarShadow: false })
 }
 
-export const scrollOffTop = () => {
+export const anchorOffTop = () => {
   if (store) store.mark({ showHomeBarShadow: true })
 }
 
-export const searchOnBlur = () => {
-  log('searchOnBlur')
+export const anchorBottom = () => {
+  if (store) store.mark({ showFooterBarShadow: false })
 }
 
-export const searchOnFocus = () => {
-  store.mark({ pin: true })
+export const anchorOffBottom = () => {
+  if (store) store.mark({ showFooterBarShadow: true })
 }
 
+export const searchOnFocus = () => store.mark({ pin: true })
+
 export const searchCommunityValueOnChange = e =>
   store.mark({ searchCommunityValue: e.target.value })
 

src/containers/Sidebar/store.js

@@ -14,8 +14,10 @@ const SidebarStore = t
   .model('SidebarStore', {
     // open: t.optional(t.boolean, false),
     pin: t.optional(t.boolean, false),
-    // add shadow effect when user scroll the communities list
+    // add shadow effect to homebar when user scroll the communities list
     showHomeBarShadow: t.optional(t.boolean, false),
+    // add shadow effect to footer when user scroll the communities list
+    showFooterBarShadow: t.optional(t.boolean, false),
     searchCommunityValue: t.optional(t.string, ''),
 
     /*

src/containers/Sidebar/styles/footer.js

@@ -7,8 +7,12 @@ export const Wrapper = styled.div`
   // margin-bottom: ${({ pin }) => (pin ? '0' : '20px')};
   margin-top: -20px;
   background: ${theme('sidebar.bg')};
-  box-shadow: -1px -4px 4px 0px rgba(0,0,0,0.2);
-  border-top: 1px dashed #316d7b;
+
+  box-shadow: ${({ dropShadow }) =>
+    dropShadow ? theme('sidebar.bottomShadow') : 'none'};
+  border-bottom: ${({ dropShadow }) =>
+    dropShadow ? theme('sidebar.bottomShadowBorderBottom') : ''};
+
   z-index: 1;
 `
 export const InnerWrapper = styled.div`

utils/themes/skins/cyan.js

@@ -111,6 +111,9 @@ const cyan = {
     borderColor: '#14363E',
     topShadow: '0px 6px 4px 0px rgba(0,0,0,0.2)',
     topShadowBorderBottom: '1px dashed #316d7b',
+    bottomShadow: '-1px -4px 4px 0px rgba(0,0,0,0.2)',
+    bottomShadowBorderBottom: '1px dashed #316d7b',
+
     searchInputBottom: '#2b6775',
     searchInputBottomActive: '#61ABB2',
     searchInputHolder: '#3a7786',