newthuhole/hole_thu_frontend
4
6
Fork 2
Code Issues 8 Pull Requests Projects Releases Wiki Activity

add auto link

Browse Source
This commit is contained in:
xmcp
2018-08-21 13:03:58 +08:00
parent 35e6a08ec9
commit 3497c664d5
8 changed files with 78 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
package-lock.json generated
View File

@@ -6305,6 +6305,14 @@
"type-check": "0.3.2"
}
},
"linkify-it": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-2.0.3.tgz",
"integrity": "sha1-2UpGSPmxwXnWT6lykSaL22zpQ08=",
"requires": {
"uc.micro": "1.0.5"
}
},
"load-json-file": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
@@ -8788,6 +8796,16 @@
"resolved": "https://registry.npmjs.org/react-lazyload/-/react-lazyload-2.3.0.tgz",
"integrity": "sha512-0z3qmL+qtSERdfKFpn0yKXm+1Gg1ZLZBXnCzHhSGiu1L8iDARuCkbOypxEx9+ETxZvMnXj98xvWCs5jyXTuM2w=="
},
"react-linkify": {
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/react-linkify/-/react-linkify-0.2.2.tgz",
"integrity": "sha512-0S8cvUNtEgfJpIGDPKklyrnrTffJ63WuJAc4KaYLBihl5TjgH5cHUmYD+AXLpsV+CVmfoo/56SUNfrZcY4zYMQ==",
"requires": {
"linkify-it": "2.0.3",
"prop-types": "15.6.2",
"tlds": "1.203.1"
}
},
"react-scripts": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-1.1.4.tgz",
@@ -10091,6 +10109,11 @@
"setimmediate": "1.0.5"
}
},
"tlds": {
"version": "1.203.1",
"resolved": "https://registry.npmjs.org/tlds/-/tlds-1.203.1.tgz",
"integrity": "sha512-7MUlYyGJ6rSitEZ3r1Q1QNV8uSIzapS8SmmhSusBuIc7uIxPPwsKllEP0GRp1NS6Ik6F+fRZvnjDWm3ecv2hDw=="
},
"tmp": {
"version": "0.0.33",
"resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
@@ -10234,6 +10257,11 @@
"resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.18.tgz",
"integrity": "sha512-LtzwHlVHwFGTptfNSgezHp7WUlwiqb0gA9AALRbKaERfxwJoiX0A73QbTToxteIAuIaFshhgIZfqK8s7clqgnA=="
},
"uc.micro": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.5.tgz",
"integrity": "sha512-JoLI4g5zv5qNyT09f4YAvEZIIV1oOjqnewYg5D38dkQljIzpPT296dbIGvKro3digYI1bkb7W6EP1y4uDlmzLg=="
},
"uglify-js": {
"version": "3.4.7",
"resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.7.tgz",

3
package.json
View File

@@ -6,8 +6,9 @@
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-lazyload": "^2.3.0",
"react-linkify": "^0.2.2",
"react-scripts": "1.1.4",
"react-timeago": "^4.1.9"
"react-timeago": "^4.1.9",
},
"scripts": {
"start": "react-scripts start",

19
src/Common.js
View File

@@ -1,10 +1,21 @@
import React, {Component} from 'react';
import TimeAgo from 'react-timeago';
import Linkify, {linkify} from 'react-linkify';
import chineseStrings from 'react-timeago/lib/language-strings/zh-CN';
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;
},
});
function pad2(x) {
return x<10 ? '0'+x : ''+x;
@@ -29,3 +40,11 @@ export function TitleLine(props) {
</p>
)
}
export function AutoLink(props) {
return (
<Linkify properties={{target: '_blank'}}>
<pre>{props.text.replace(new RegExp(PID_RE_TEXT,'g'),' #$1 ')}</pre>
</Linkify>
)
}

2
src/Flows.css
View File

@@ -35,7 +35,7 @@
}
.left-container .flow-item-row {
cursor: pointer;
cursor: default;
transition: margin-left 200ms ease-out;
}
.left-container .flow-item-row:hover {

15
src/Flows.js
View File

@@ -1,5 +1,5 @@
import React, {Component} from 'react';
import {Time, TitleLine} from './Common.js';
import {Time, TitleLine, AutoLink} from './Common.js';
import './Flows.css';
import LazyLoad from 'react-lazyload';
@@ -14,7 +14,7 @@ function Reply(props) {
<span className="box-id">#{props.info.cid}</span>&nbsp;
<Time stamp={props.info.timestamp} />
</div>
<pre>{props.info.text}</pre>
<AutoLink text={props.info.text} />
</div>
);
}
@@ -36,7 +36,7 @@ function FlowItem(props) {
<span className="box-id">#{props.info.pid}</span>&nbsp;
<Time stamp={props.info.timestamp} />
</div>
<pre>{props.info.text}</pre>
<AutoLink text={props.info.text} />
{props.info.type==='image' ? <img src={IMAGE_BASE+props.info.url} /> : null}
{props.info.type==='audio' ? <audio src={AUDIO_BASE+props.info.url} /> : null}
</div>
@@ -79,13 +79,16 @@ class FlowItemRow extends Component {
render() {
// props.do_show_details
return (
<div className="flow-item-row" onClick={()=>{this.props.callback(
<div className="flow-item-row" onClick={(event)=>{
if(event.target.tagName.toLowerCase()!=='a')
this.props.callback(
'帖子详情',
<div className="flow-item-row sidebar-flow-item">
<FlowItem info={this.info} />
{this.state.replies.map((reply)=><Reply info={reply} key={reply.cid} />)}
</div>
)}}>
);
}}>
<FlowItem info={this.info} />
{!!this.state.reply_loading && <ReplyPlaceholder count={this.info.reply} />}
{this.state.replies.map((reply)=><Reply info={reply} key={reply.cid} />)}
@@ -121,7 +124,6 @@ export class Flow extends Component {
chunks: [],
loading: false,
};
setTimeout(this.load_page.bind(this,1), 0);
}
load_page(page) {
@@ -212,6 +214,7 @@ export class Flow extends Component {
}
componentDidMount() {
this.load_page(1);
window.addEventListener('scroll',this.on_scroll.bind(this));
window.addEventListener('resize',this.on_scroll.bind(this));
}

4
src/Title.css
View File

@@ -10,6 +10,10 @@
margin-bottom: 1em;
}
.title-bar a {
padding: 0 .5em;
}
.title {
font-size: 2em;
line-height: 3em;

10
src/Title.js
View File

@@ -42,6 +42,16 @@ class ControlBar extends Component {
this.set_search_text=props.set_search_text;
}
componentDidMount() {
if(window.location.hash) {
const text=window.location.hash.substr(1);
this.setState({
search_text: text,
});
this.set_search_text(text);
}
}
on_change(event) {
this.setState({
search_text: event.target.value,

1
src/index.css
View File

@@ -22,7 +22,6 @@ a {
text-decoration: none;
color: #00c;
cursor: pointer;
padding: 0 .5em;
}
input {