format code
This commit is contained in:
thuhole
291
src/Title.js
291
src/Title.js
@@ -1,143 +1,186 @@
|
||||
import React, {Component, PureComponent} from 'react';
|
||||
import React, { Component, PureComponent } from 'react';
|
||||
// import {AppSwitcher} from './infrastructure/widgets';
|
||||
import {InfoSidebar, PostForm} from './UserAction';
|
||||
import {TokenCtx} from './UserAction';
|
||||
import { InfoSidebar, PostForm } from './UserAction';
|
||||
import { TokenCtx } from './UserAction';
|
||||
|
||||
import './Title.css';
|
||||
|
||||
const flag_re=/^\/\/setflag ([a-zA-Z0-9_]+)=(.*)$/;
|
||||
const flag_re = /^\/\/setflag ([a-zA-Z0-9_]+)=(.*)$/;
|
||||
|
||||
class ControlBar extends PureComponent {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state={
|
||||
search_text: '',
|
||||
};
|
||||
this.set_mode=props.set_mode;
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
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);
|
||||
this.do_attention_bound=this.do_attention.bind(this);
|
||||
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);
|
||||
this.do_attention_bound = this.do_attention.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
if (window.location.hash) {
|
||||
let text = decodeURIComponent(window.location.hash).substr(1);
|
||||
if (text.lastIndexOf('?') !== -1)
|
||||
text = text.substr(0, text.lastIndexOf('?')); // fuck wechat '#param?nsukey=...'
|
||||
this.setState(
|
||||
{
|
||||
search_text: text,
|
||||
},
|
||||
() => {
|
||||
this.on_keypress({ key: 'Enter' });
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
if(window.location.hash) {
|
||||
let text=decodeURIComponent(window.location.hash).substr(1);
|
||||
if(text.lastIndexOf('?')!==-1)
|
||||
text=text.substr(0,text.lastIndexOf('?')); // fuck wechat '#param?nsukey=...'
|
||||
this.setState({
|
||||
search_text: text,
|
||||
}, ()=>{
|
||||
this.on_keypress({key: 'Enter'});
|
||||
});
|
||||
on_change(event) {
|
||||
this.setState({
|
||||
search_text: event.target.value,
|
||||
});
|
||||
}
|
||||
|
||||
on_keypress(event) {
|
||||
if (event.key === 'Enter') {
|
||||
let flag_res = flag_re.exec(this.state.search_text);
|
||||
if (flag_res) {
|
||||
if (flag_res[2]) {
|
||||
localStorage[flag_res[1]] = flag_res[2];
|
||||
alert(
|
||||
'Set Flag ' +
|
||||
flag_res[1] +
|
||||
'=' +
|
||||
flag_res[2] +
|
||||
'\nYou may need to refresh this webpage.',
|
||||
);
|
||||
} else {
|
||||
delete localStorage[flag_res[1]];
|
||||
alert(
|
||||
'Clear Flag ' +
|
||||
flag_res[1] +
|
||||
'\nYou may need to refresh this webpage.',
|
||||
);
|
||||
}
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
on_change(event) {
|
||||
this.setState({
|
||||
search_text: event.target.value,
|
||||
});
|
||||
const mode = this.state.search_text.startsWith('#') ? 'single' : 'search';
|
||||
this.set_mode(mode, this.state.search_text || '');
|
||||
}
|
||||
}
|
||||
|
||||
on_keypress(event) {
|
||||
if(event.key==='Enter') {
|
||||
let flag_res=flag_re.exec(this.state.search_text);
|
||||
if(flag_res) {
|
||||
if(flag_res[2]) {
|
||||
localStorage[flag_res[1]]=flag_res[2];
|
||||
alert('Set Flag '+flag_res[1]+'='+flag_res[2]+'\nYou may need to refresh this webpage.');
|
||||
} else {
|
||||
delete localStorage[flag_res[1]];
|
||||
alert('Clear Flag '+flag_res[1]+'\nYou may need to refresh this webpage.');
|
||||
}
|
||||
return;
|
||||
}
|
||||
do_refresh() {
|
||||
window.scrollTo(0, 0);
|
||||
this.setState({
|
||||
search_text: '',
|
||||
});
|
||||
this.set_mode('list', null);
|
||||
}
|
||||
|
||||
const mode=this.state.search_text.startsWith('#') ? 'single' : 'search';
|
||||
this.set_mode(mode,this.state.search_text||'');
|
||||
}
|
||||
}
|
||||
do_attention() {
|
||||
window.scrollTo(0, 0);
|
||||
this.setState({
|
||||
search_text: '',
|
||||
});
|
||||
this.set_mode('attention', null);
|
||||
}
|
||||
|
||||
do_refresh() {
|
||||
window.scrollTo(0,0);
|
||||
this.setState({
|
||||
search_text: '',
|
||||
});
|
||||
this.set_mode('list',null);
|
||||
}
|
||||
|
||||
do_attention() {
|
||||
window.scrollTo(0,0);
|
||||
this.setState({
|
||||
search_text: '',
|
||||
});
|
||||
this.set_mode('attention',null);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<TokenCtx.Consumer>{({value: token})=>(
|
||||
<div className="control-bar">
|
||||
<a className="no-underline control-btn" onClick={this.do_refresh_bound}>
|
||||
<span className="icon icon-refresh" />
|
||||
<span className="control-btn-label">最新</span>
|
||||
</a>
|
||||
{!!token &&
|
||||
<a className="no-underline control-btn" onClick={this.do_attention_bound}>
|
||||
<span className="icon icon-attention" />
|
||||
<span className="control-btn-label">关注</span>
|
||||
</a>
|
||||
}
|
||||
<input className="control-search" value={this.state.search_text} placeholder="搜索 或 #树洞号"
|
||||
onChange={this.on_change_bound} onKeyPress={this.on_keypress_bound}
|
||||
/>
|
||||
<a className="no-underline control-btn" onClick={()=>{
|
||||
this.props.show_sidebar(
|
||||
'T大树洞',
|
||||
<InfoSidebar show_sidebar={this.props.show_sidebar} />
|
||||
)
|
||||
}}>
|
||||
<span className={'icon icon-'+(token ? 'about' : 'login')} />
|
||||
<span className="control-btn-label">{token ? '账户' : '登录'}</span>
|
||||
</a>
|
||||
{!!token &&
|
||||
<a className="no-underline control-btn" onClick={()=>{
|
||||
this.props.show_sidebar(
|
||||
'发表树洞',
|
||||
<PostForm token={token} on_complete={()=>{
|
||||
this.props.show_sidebar(null,null);
|
||||
this.do_refresh();
|
||||
}} />
|
||||
)
|
||||
}}>
|
||||
<span className="icon icon-plus" />
|
||||
<span className="control-btn-label">发表</span>
|
||||
</a>
|
||||
}
|
||||
</div>
|
||||
)}</TokenCtx.Consumer>
|
||||
)
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<TokenCtx.Consumer>
|
||||
{({ value: token }) => (
|
||||
<div className="control-bar">
|
||||
<a
|
||||
className="no-underline control-btn"
|
||||
onClick={this.do_refresh_bound}
|
||||
>
|
||||
<span className="icon icon-refresh" />
|
||||
<span className="control-btn-label">最新</span>
|
||||
</a>
|
||||
{!!token && (
|
||||
<a
|
||||
className="no-underline control-btn"
|
||||
onClick={this.do_attention_bound}
|
||||
>
|
||||
<span className="icon icon-attention" />
|
||||
<span className="control-btn-label">关注</span>
|
||||
</a>
|
||||
)}
|
||||
<input
|
||||
className="control-search"
|
||||
value={this.state.search_text}
|
||||
placeholder="搜索 或 #树洞号"
|
||||
onChange={this.on_change_bound}
|
||||
onKeyPress={this.on_keypress_bound}
|
||||
/>
|
||||
<a
|
||||
className="no-underline control-btn"
|
||||
onClick={() => {
|
||||
this.props.show_sidebar(
|
||||
'T大树洞',
|
||||
<InfoSidebar show_sidebar={this.props.show_sidebar} />,
|
||||
);
|
||||
}}
|
||||
>
|
||||
<span className={'icon icon-' + (token ? 'about' : 'login')} />
|
||||
<span className="control-btn-label">
|
||||
{token ? '账户' : '登录'}
|
||||
</span>
|
||||
</a>
|
||||
{!!token && (
|
||||
<a
|
||||
className="no-underline control-btn"
|
||||
onClick={() => {
|
||||
this.props.show_sidebar(
|
||||
'发表树洞',
|
||||
<PostForm
|
||||
token={token}
|
||||
on_complete={() => {
|
||||
this.props.show_sidebar(null, null);
|
||||
this.do_refresh();
|
||||
}}
|
||||
/>,
|
||||
);
|
||||
}}
|
||||
>
|
||||
<span className="icon icon-plus" />
|
||||
<span className="control-btn-label">发表</span>
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</TokenCtx.Consumer>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export function Title(props) {
|
||||
return (
|
||||
<div className="title-bar">
|
||||
{/* <AppSwitcher appid="hole" /> */}
|
||||
<div className="aux-margin">
|
||||
<div className="title">
|
||||
<p className="centered-line">
|
||||
<span onClick={()=>props.show_sidebar(
|
||||
'T大树洞',
|
||||
<InfoSidebar show_sidebar={props.show_sidebar} />
|
||||
)}>
|
||||
T大树洞
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<ControlBar show_sidebar={props.show_sidebar} set_mode={props.set_mode} />
|
||||
</div>
|
||||
return (
|
||||
<div className="title-bar">
|
||||
{/* <AppSwitcher appid="hole" /> */}
|
||||
<div className="aux-margin">
|
||||
<div className="title">
|
||||
<p className="centered-line">
|
||||
<span
|
||||
onClick={() =>
|
||||
props.show_sidebar(
|
||||
'T大树洞',
|
||||
<InfoSidebar show_sidebar={props.show_sidebar} />,
|
||||
)
|
||||
}
|
||||
>
|
||||
T大树洞
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
<ControlBar
|
||||
show_sidebar={props.show_sidebar}
|
||||
set_mode={props.set_mode}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user