diff --git a/src/Common.js b/src/Common.js
index 54f5bffc..e3ad0d57 100644
--- a/src/Common.js
+++ b/src/Common.js
@@ -8,14 +8,9 @@ import buildFormatter from 'react-timeago/lib/formatters/buildFormatter';
import './Common.css';
const chinese_format=buildFormatter(chineseStrings);
-const PID_RE_TEXT=/(?:^|[^\d])(\d{5,6})(?!\d)/g;
-linkify.add('#', {
- validate: /^(\d{5,6})/,
- normalize: (match) => {
- match.url='#'+match.url;
- },
-});
+const PID_RE=/(^|[^\d])([1-9]\d{4,5})(?!\d)/g;
+const NICKNAME_RE=/((?:(?:Angry|Baby|Crazy|Diligent|Excited|Fat|Greedy|Hungry|Interesting|Japanese|Kind|Little|Magic|Naïve|Old|Powerful|Quiet|Rich|Superman|THU|Undefined|Valuable|Wifeless|Xiangbuchulai|Young|Zombie)\s)?(?:Alice|Bob|Carol|Dave|Eve|Francis|Grace|Hans|Isabella|Jason|Kate|Louis|Margaret|Nathan|Olivia|Paul|Queen|Richard|Susan|Thomas|Uma|Vivian|Winnie|Xander|Yasmine|Zach)|You Win|洞主)/gi;
function pad2(x) {
return x<10 ? '0'+x : ''+x;
@@ -41,10 +36,19 @@ export function TitleLine(props) {
)
}
-export function AutoLink(props) {
+export function HighlightedText(props) {
+ let parts=[].concat.apply([], props.text.split(PID_RE).map((p)=>p.split(NICKNAME_RE)));
return (
- {props.text.replace(new RegExp(PID_RE_TEXT,'g'),' #$1 ')}
+
+ {parts.map((p,idx)=>(
+ {
+ PID_RE.test(p) ? {p} :
+ NICKNAME_RE.test(p) ? {p} :
+ p
+ }
+ ))}
+
)
}
\ No newline at end of file
diff --git a/src/Flows.js b/src/Flows.js
index 0a3133f7..334b70f3 100644
--- a/src/Flows.js
+++ b/src/Flows.js
@@ -1,6 +1,6 @@
import React, {Component} from 'react';
import {ColorPicker} from './color_picker';
-import {Time, TitleLine, AutoLink} from './Common.js';
+import {Time, TitleLine, HighlightedText} from './Common.js';
import './Flows.css';
import LazyLoad from 'react-lazyload';
import {AudioWidget} from './AudioWidget.js';
@@ -22,7 +22,7 @@ function Reply(props) {
#{props.info.cid}
-
+
);
}
@@ -36,7 +36,7 @@ function FlowItem(props) {
#{props.info.pid}
-
+
{props.info.type==='image' ?
: null}
{props.info.type==='audio' ? : null}
@@ -49,38 +49,42 @@ class FlowItemRow extends Component {
this.state={
replies: [],
reply_status: 'done',
+ info: props.info,
};
- this.info=props.info;
this.color_picker=new ColorPicker();
}
componentDidMount() {
- if(parseInt(this.info.reply,10)) {
+ if(parseInt(this.state.info.reply,10)) {
this.load_replies();
}
}
load_replies(callback) {
- console.log('fetching reply',this.info.pid);
+ console.log('fetching reply',this.state.info.pid);
this.setState({
reply_status: 'loading',
});
- fetch(API_BASE+'/api.php?action=getcomment&pid='+this.info.pid)
+ fetch(API_BASE+'/api.php?action=getcomment&pid='+this.state.info.pid)
.then((res)=>res.json())
.then((json)=>{
if(json.code!==0)
throw new Error(json.code);
- this.setState({
- replies: json.data
- .sort((a,b)=>{
- return parseInt(a.timestamp,10)-parseInt(b.timestamp,10);
- })
- .map((info)=>{
- info._display_color=info.islz ? null : this.color_picker.get(info.name);
- return info;
- }),
+ const replies=json.data
+ .sort((a,b)=>{
+ return parseInt(a.timestamp,10)-parseInt(b.timestamp,10);
+ })
+ .map((info)=>{
+ info._display_color=this.color_picker.get(info.name);
+ return info;
+ });
+ this.setState((prev,props)=>({
+ replies: replies,
+ info: Object.assign({}, prev.info, {
+ reply: ''+replies.length,
+ }),
reply_status: 'done',
- },callback);
+ }),callback);
})
.catch((e)=>{
console.trace(e);
@@ -101,8 +105,10 @@ class FlowItemRow extends Component {
this.load_replies(this.show_sidebar);
}}>更新回复
-
- {this.state.replies.map((reply)=>)}
+
+ {this.state.replies.map((reply)=>(
+
+ ))}
);
}
@@ -114,13 +120,15 @@ class FlowItemRow extends Component {
if(!CLICKABLE_TAGS[event.target.tagName.toLowerCase()])
this.show_sidebar();
}}>
-
+
{this.state.reply_status==='loading' &&
加载中
}
{this.state.reply_status==='failed' &&
}
- {this.state.replies.slice(0,PREVIEW_REPLY_COUNT).map((reply)=>
)}
+ {this.state.replies.slice(0,PREVIEW_REPLY_COUNT).map((reply)=>(
+
+ ))}
{this.state.replies.length>PREVIEW_REPLY_COUNT &&
还有 {this.state.replies.length-PREVIEW_REPLY_COUNT} 条
}
diff --git a/src/color_picker.js b/src/color_picker.js
index 2c53b209..90f5a150 100644
--- a/src/color_picker.js
+++ b/src/color_picker.js
@@ -9,6 +9,9 @@ export class ColorPicker {
}
get(name) {
+ name=name.toLowerCase();
+ if(name==='洞主')
+ return 'hsl(0,0%,97%)';
if(!this.names[name]) {
this.current_h+=golden_ratio_conjugate;
this.current_h%=1;