Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings
This repository was archived by the owner on Nov 8, 2022. It is now read-only.

Commit408eec3

Browse files
committed
fix(sidebar): community logo jump when svg load
1 parent3096456 commit408eec3

File tree

6 files changed

+62
-43
lines changed

6 files changed

+62
-43
lines changed

‎containers/Sidebar/MenuBar.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import {
1515

1616
import{onCommunitySelect}from'./logic'
1717

18-
constMenuBar=({ pin, item, activeRaw})=>(
18+
constMenuBar=({ pin, item, activeRaw, forceRerender})=>(
1919
<WrapperonClick={onCommunitySelect.bind(this,item)}>
2020
<MenuItemBar>
2121
<MenuRowpin={pin}active={activeRaw===R.toLower(item.raw)}>
@@ -26,7 +26,11 @@ const MenuBar = ({ pin, item, activeRaw }) => (
2626
src={item.logo}
2727
/>
2828
{/* eslint-disable jsx-a11y/anchor-is-valid */}
29-
<MenuItemTitlepin={pin}active={activeRaw===R.toLower(item.raw)}>
29+
<MenuItemTitle
30+
pin={pin}
31+
active={activeRaw===R.toLower(item.raw)}
32+
forceRerender={forceRerender}
33+
>
3034
{item.title}
3135
</MenuItemTitle>
3236

‎containers/Sidebar/MenuList.js‎

Lines changed: 33 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -5,30 +5,40 @@ import { SortableContainer, SortableElement } from 'react-sortable-hoc'
55
importMenuBarfrom'./MenuBar'
66
import{Wrapper}from'./styles/menu_list'
77

8-
constSortableMenuBar=SortableElement(({ pin, item, activeRaw})=>(
9-
<MenuBarpin={pin}item={item}activeRaw={activeRaw}/>
10-
))
8+
constSortableMenuBar=SortableElement(
9+
({ pin, item, activeRaw, forceRerender})=>(
10+
<MenuBar
11+
pin={pin}
12+
item={item}
13+
activeRaw={activeRaw}
14+
forceRerender={forceRerender}
15+
/>
16+
)
17+
)
1118

12-
constMenuList=SortableContainer(({ items, pin, activeRaw})=>{
13-
consthomeCommunities=R.filter(R.propEq('raw','home'),items)
14-
constsortableCommunities=R.reject(R.propEq('raw','home'),items)
19+
constMenuList=SortableContainer(
20+
({ items, pin, activeRaw, forceRerender})=>{
21+
consthomeCommunities=R.filter(R.propEq('raw','home'),items)
22+
constsortableCommunities=R.reject(R.propEq('raw','home'),items)
1523

16-
return(
17-
<Wrapper>
18-
{homeCommunities.map(item=>(
19-
<MenuBarkey={item.raw}pin={pin}item={item}activeRaw={activeRaw}/>
20-
))}
21-
{sortableCommunities.map((item,index)=>(
22-
<SortableMenuBar
23-
index={index}
24-
key={item.raw}
25-
pin={pin}
26-
item={item}
27-
activeRaw={activeRaw}
28-
/>
29-
))}
30-
</Wrapper>
31-
)
32-
})
24+
return(
25+
<Wrapper>
26+
{homeCommunities.map(item=>(
27+
<MenuBarkey={item.raw}pin={pin}item={item}activeRaw={activeRaw}/>
28+
))}
29+
{sortableCommunities.map((item,index)=>(
30+
<SortableMenuBar
31+
index={index}
32+
key={item.raw}
33+
pin={pin}
34+
item={item}
35+
activeRaw={activeRaw}
36+
forceRerender={forceRerender}
37+
/>
38+
))}
39+
</Wrapper>
40+
)
41+
}
42+
)
3343

3444
exportdefaultMenuList

‎containers/Sidebar/index.js‎

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -19,22 +19,14 @@ import * as logic from './logic'
1919
constdebug=makeDebugger('C:Sidebar:index')
2020

2121
classSidebarContainerextendsReact.Component{
22-
constructor(props){
23-
super(props)
24-
25-
/* NOTE: this foreceReload state has no use, just forece community icons rerender */
26-
/* otherwise some community logo will be misorder, reazon unknown ... */
27-
/* eslint-disable-next-line */
28-
this.state={foreceReload:false}
29-
}
30-
3122
componentDidMount(){
3223
const{ sidebar}=this.props
3324
logic.init(sidebar)
25+
3426
setTimeout(()=>{
3527
/* eslint-disable-next-line */
36-
this.setState({foreceReload:true})
37-
},100)
28+
logic.toggleForeceRerender(true)
29+
},1000)
3830
}
3931

4032
componentWillUnmount(){
@@ -43,11 +35,15 @@ class SidebarContainer extends React.Component {
4335

4436
render(){
4537
const{ sidebar}=this.props
46-
const{ curCommunity, pin, communitiesData}=sidebar
38+
const{ curCommunity, pin, communitiesData, forceRerender}=sidebar
4739
// onMouseLeave={logic.leaveSidebar}
4840
// onMouseLeave is not unreliable in chrome: https://github.com/facebook/react/issues/4492
4941
constactiveRaw=curCommunity.raw
50-
// console.log('foreceReload: ', this.state.foreceReload)
42+
/*
43+
const { forceRerender } = this.state
44+
console.log('forceRerender: ', forceRerender)
45+
*/
46+
console.log('forceRerender: ',forceRerender)
5147

5248
// debug('communitiesData ', communitiesData)
5349

@@ -57,6 +53,7 @@ class SidebarContainer extends React.Component {
5753
<MenuList
5854
items={communitiesData}
5955
pin={pin}
56+
forceRerender={forceRerender}
6057
activeRaw={activeRaw}
6158
onSortEnd={logic.onSortMenuEnd}
6259
distance={5}

‎containers/Sidebar/logic.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,9 @@ const refreshSubedCommunitiesIfNeed = () => {
108108
}
109109
}
110110

111+
exportconsttoggleForeceRerender=(forceRerender=true)=>
112+
store.markState({ forceRerender})
113+
111114
constDataSolver=[
112115
{
113116
match:asyncRes('subscribedCommunities'),

‎containers/Sidebar/store.js‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,15 @@ const SidebarStore = t
1515
.model('SidebarStore',{
1616
// open: t.optional(t.boolean, false),
1717
pin:t.optional(t.boolean,false),
18-
// theme: t.string, // view staff
19-
// curSelectItem: t.string, // view staff
20-
// searchBox: t.string, // complex data
21-
// loading: t.optional(t.boolean, false),
18+
19+
/*
20+
this is a fix for wired svg icon in sidebar
21+
when community icon is svg format, the svg loader only do it:s work
22+
on client-side, which will case MenuBar UI choas
23+
24+
manulay force mobx rerender will tmp fix this, heck later
25+
*/
26+
forceRerender:t.optional(t.boolean,false),
2227
})
2328
.views(self=>({
2429
getroot(){

‎containers/Sidebar/styles/menu_bar.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ export const MenuItemTitle = styled.div`
4444
display:${({ pin})=>(pin ?'block' :'none')};
4545
color:${theme('sidebar.menuLink')};
4646
opacity:${({ active})=>(active ?1 :0.7)};
47-
letter-spacing: 1.3px;
47+
letter-spacing:${({ forceRerender})=>(forceRerender ?'1.3px' :'1.2px')};
4848
transition: opacity 0.2s;
4949
margin-right: 10px;
5050

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp