From 664409c0262d5be3eb2644ba89a9147f9f372eaa Mon Sep 17 00:00:00 2001 From: xmcp Date: Fri, 24 Aug 2018 17:28:45 +0800 Subject: [PATCH] refactor --- src/App.js | 14 ++++++++------ src/Common.js | 4 ++-- src/Flows.js | 14 +++++--------- src/Title.js | 21 ++++++++++++--------- 4 files changed, 27 insertions(+), 26 deletions(-) diff --git a/src/App.js b/src/App.js index 2ea9012..f695096 100644 --- a/src/App.js +++ b/src/App.js @@ -9,11 +9,12 @@ class App extends Component { this.state={ sidebar_title: null, sidebar_content: null, + mode: 'list', // list, single, search search_text: null, flow_render_key: +new Date(), }; this.show_sidebar_bound=this.show_sidebar.bind(this); - this.set_search_text_bound=this.set_search_text.bind(this); + this.set_mode_bound=this.set_mode.bind(this); } show_sidebar(title,content) { @@ -23,9 +24,10 @@ class App extends Component { }); } - set_search_text(text) { + set_mode(mode,search_text) { this.setState({ - search_text: text, + mode: mode, + search_text: search_text, flow_render_key: +new Date(), }); } @@ -36,10 +38,10 @@ class App extends Component {
- + <Title show_sidebar={this.show_sidebar_bound} set_mode={this.set_mode_bound} /> <div className="left-container"> - <Flow key={this.state.flow_render_key} - callback={this.show_sidebar_bound} search_text={this.state.search_text} + <Flow key={this.state.flow_render_key} show_sidebar={this.show_sidebar_bound} + mode={this.state.mode} search_text={this.state.search_text} /> <br /> </div> diff --git a/src/Common.js b/src/Common.js index eab7a54..ddd0a38 100644 --- a/src/Common.js +++ b/src/Common.js @@ -38,14 +38,14 @@ export function TitleLine(props) { export class HighlightedText extends PureComponent { render() { - let parts=[].concat.apply([], props.text.split(PID_RE).map((p)=>p.split(NICKNAME_RE))); + let parts=[].concat.apply([], this.props.text.split(PID_RE).map((p)=>p.split(NICKNAME_RE))); return ( <Linkify properties={{target: '_blank'}}> <pre> {parts.map((p,idx)=>( <span key={idx}>{ PID_RE.test(p) ? <a href={'##'+p} target="_blank">{p}</a> : - NICKNAME_RE.test(p) ? <span style={{backgroundColor: props.color_picker.get(p)}}>{p}</span> : + NICKNAME_RE.test(p) ? <span style={{backgroundColor: this.props.color_picker.get(p)}}>{p}</span> : p }</span> ))} diff --git a/src/Flows.js b/src/Flows.js index e2b71cc..446dc15 100644 --- a/src/Flows.js +++ b/src/Flows.js @@ -99,12 +99,12 @@ class FlowItemRow extends PureComponent { } show_sidebar() { - this.props.callback( + this.props.show_sidebar( '帖子详情', <div className="flow-item-row sidebar-flow-item"> <div className="box box-tip"> <a onClick={()=>{ - this.props.callback('帖子详情',<p className="box box-tip">加载中……</p>); + this.props.show_sidebar('帖子详情',<p className="box box-tip">加载中……</p>); this.load_replies(this.show_sidebar); }}>更新回复</a> </div> @@ -149,7 +149,7 @@ function FlowChunk(props) { <TitleLine text={props.title} /> {props.list.map((info)=>( <LazyLoad key={info.pid} offset={500} height="15em" once={true} > - <FlowItemRow info={info} callback={props.callback} /> + <FlowItemRow info={info} show_sidebar={props.show_sidebar} /> </LazyLoad> ))} </div> @@ -160,11 +160,7 @@ export class Flow extends PureComponent { constructor(props) { super(props); this.state={ - mode: ( - props.search_text===null ? 'list' : - props.search_text.charAt(0)==='#' ? 'single' : - 'search' - ), + mode: props.mode, search_param: props.search_text, loaded_pages: 0, chunks: [], @@ -294,7 +290,7 @@ export class Flow extends PureComponent { return ( <div className="flow-container"> {this.state.chunks.map((chunk)=>( - <FlowChunk title={chunk.title} list={chunk.data} key={chunk.title} callback={this.props.callback} /> + <FlowChunk title={chunk.title} list={chunk.data} key={chunk.title} show_sidebar={this.props.show_sidebar} /> ))} {this.state.loading_status==='failed' && <div className="box box-tip"> diff --git a/src/Title.js b/src/Title.js index 1a6a22d..9a19646 100644 --- a/src/Title.js +++ b/src/Title.js @@ -45,7 +45,11 @@ class ControlBar extends PureComponent { this.state={ search_text: '', }; - this.set_search_text=props.set_search_text; + this.set_mode=props.set_mode; + + this.on_change_bound=this.on_change.bind(this); + this.on_keypress_bound=this.on_keypress.bind(this); + this.do_refresh_bound=this.do_refresh.bind(this); } componentDidMount() { @@ -54,7 +58,7 @@ class ControlBar extends PureComponent { this.setState({ search_text: text, }); - this.set_search_text(text); + this.set_mode(text); } } @@ -66,7 +70,7 @@ class ControlBar extends PureComponent { on_keypress(event) { if(event.key==='Enter') - this.set_search_text(this.state.search_text||null); + this.set_mode('search',this.state.search_text||null); } do_refresh() { @@ -74,20 +78,19 @@ class ControlBar extends PureComponent { this.setState({ search_text: '', }); - this.set_search_text(null); - + this.set_mode('list',null); } render() { return ( <div className="control-bar"> - <a className="refresh-btn" onClick={this.do_refresh.bind(this)}>最新树洞</a> + <a className="refresh-btn" onClick={this.do_refresh_bound}>最新树洞</a>   <input value={this.state.search_text} placeholder="搜索 或 #PID" - onChange={this.on_change.bind(this)} onKeyPress={this.on_keypress.bind(this)} + onChange={this.on_change_bound} onKeyPress={this.on_keypress_bound} />   - <a onClick={()=>{this.props.callback( + <a onClick={()=>{this.props.show_sidebar( '关于 P大树洞（非官方） 网页版', HELP_TEXT )}}>Help</a> @@ -101,7 +104,7 @@ export function Title(props) { <div className="title-bar"> <div className="aux-margin"> <p className="title centered-line">P大树洞</p> - <ControlBar callback={props.callback} set_search_text={props.set_search_text} /> + <ControlBar show_sidebar={props.show_sidebar} set_mode={props.set_mode} /> </div> </div> )