Skip to content

Commit baa5ec1

Browse files
shadeofgodbooxood
shadeofgod
authored and
booxood
committed
refactor: functional components (gitalk#74)
1 parent 1143d41 commit baa5ec1

File tree

5 files changed

+88
-79
lines changed

5 files changed

+88
-79
lines changed

‎src/component/action.jsx‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,7 @@
11
import React from 'react'
22

3-
export default function Action (props) {
4-
let className = 'gt-action '
5-
props.className && (className += props.className)
6-
return (
7-
<a className={className} onClick={props.onClick}>
8-
<span className="gt-action-text">{props.text}</span>
9-
</a>
10-
)
11-
}
3+
export default ({ className, onClick, text }) => (
4+
<a className={`gt-action ${className}`} onClick={onClick}>
5+
<span className="gt-action-text">{text}</span>
6+
</a>
7+
)

‎src/component/avatar.jsx‎

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,7 @@
11
import React from 'react'
22

3-
export default function Avatar (props) {
4-
const src = props.src
5-
let className = 'gt-avatar '
6-
props.className && (className += props.className)
7-
return (
8-
<div className={className}>
9-
<img src={src} alt="头像"/>
10-
</div>
11-
)
12-
}
3+
export default ({ src, className }) => (
4+
<div className={`gt-avatar ${className}`}>
5+
<img src={src} alt="头像"/>
6+
</div>
7+
)

‎src/component/button.jsx‎

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,22 @@
11
import React from 'react'
22

3-
export default function Button (props) {
4-
let className = 'gt-btn '
5-
props.className && (className+=props.className)
6-
return (
7-
<button ref={el => (props.getRef && props.getRef(el))} className={className} onClick={props.onClick} onMouseDown={props.onMouseDown}>
8-
<span className="gt-btn-text">{props.text}</span>
9-
{props.isLoading && <span className="gt-btn-loading gt-spinner"></span>}
10-
</button>
11-
)
12-
}
3+
export default ({
4+
className,
5+
getRef,
6+
onClick,
7+
onMouseDown,
8+
text,
9+
isLoading
10+
}) => (
11+
<button
12+
ref={el => getRef && getRef(el)}
13+
className={`gt-btn ${className}`}
14+
onClick={onClick}
15+
onMouseDown={onMouseDown}>
16+
<span className="gt-btn-text">{text}</span>
17+
{
18+
isLoading && <span className="gt-btn-loading gt-spinner"></span>
19+
}
20+
</button>
21+
)
1322

‎src/component/comment.jsx‎

Lines changed: 49 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -20,42 +20,55 @@ window.GT_i18n_distanceInWordsLocaleMap = {
2020
'fr': FR,
2121
}
2222

23-
export default class Comment extends Component {
24-
render () {
25-
const { comment, user, language, commentedText = '', admin = [], replyCallback } = this.props
26-
const enableEdit = user && comment.user.login === user.login
27-
const isAdmin = ~admin.indexOf(comment.user.login)
28-
return (
29-
<div className={`gt-comment ${isAdmin ? 'gt-comment-admin' : ''}`}>
30-
<Avatar className="gt-comment-avatar" src={comment.user && comment.user.avatar_url} />
31-
<div className="gt-comment-content">
32-
<div className="gt-comment-header">
33-
<a className="gt-comment-username" href={comment.user && comment.user.html_url}>{comment.user && comment.user.login}</a>
34-
<span className="gt-comment-text">
35-
{commentedText}
36-
</span>
37-
<span className="gt-comment-date">
38-
{distanceInWordsToNow(comment.created_at, {
39-
addSuffix: true,
40-
locale: {
41-
distanceInWords: window.GT_i18n_distanceInWordsLocaleMap[language]
42-
}
43-
})}
44-
</span>
45-
{enableEdit ?
46-
<a href={comment.html_url} className="gt-comment-edit" target="_blank">
47-
<Svg className="gt-ico-edit" name="edit"/>
48-
</a> :
49-
<a className="gt-comment-reply" onClick={replyCallback}>
50-
<Svg className="gt-ico-reply" name="reply"/>
51-
</a>
52-
}
53-
</div>
54-
<div className="gt-comment-body markdown-body" dangerouslySetInnerHTML={{
55-
__html: comment.body_html
56-
}} />
23+
export default ({
24+
comment,
25+
user,
26+
language,
27+
commentedText = '',
28+
admin = [],
29+
replyCallback
30+
}) => {
31+
const enableEdit = user && comment.user.login === user.login
32+
const isAdmin = ~admin.indexOf(comment.user.login)
33+
34+
return (
35+
<div className={`gt-comment ${isAdmin ? 'gt-comment-admin' : ''}`}>
36+
<Avatar
37+
className="gt-comment-avatar"
38+
src={comment.user && comment.user.avatar_url}
39+
/>
40+
41+
<div className="gt-comment-content">
42+
<div className="gt-comment-header">
43+
<a
44+
className="gt-comment-username"
45+
href={comment.user && comment.user.html_url}>
46+
{comment.user && comment.user.login}
47+
</a>
48+
<span className="gt-comment-text">
49+
{commentedText}
50+
</span>
51+
<span className="gt-comment-date">
52+
{distanceInWordsToNow(comment.created_at, {
53+
addSuffix: true,
54+
locale: {
55+
distanceInWords: window.GT_i18n_distanceInWordsLocaleMap[language]
56+
}
57+
})}
58+
</span>
59+
{enableEdit ?
60+
<a href={comment.html_url} className="gt-comment-edit" target="_blank">
61+
<Svg className="gt-ico-edit" name="edit"/>
62+
</a> :
63+
<a className="gt-comment-reply" onClick={replyCallback}>
64+
<Svg className="gt-ico-reply" name="reply"/>
65+
</a>
66+
}
5767
</div>
68+
<div className="gt-comment-body markdown-body" dangerouslySetInnerHTML={{
69+
__html: comment.body_html
70+
}} />
5871
</div>
59-
)
60-
}
72+
</div>
73+
)
6174
}

‎src/component/svg.jsx‎

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,12 @@
11
import React from 'react'
22

3-
export default function Svg (props) {
4-
let className = 'gt-ico '
5-
props.className && (className += props.className)
6-
return (
7-
<span className={className}>
8-
<span className="gt-svg" dangerouslySetInnerHTML={{
9-
__html: require(`!!raw-loader!../assets/icon/${props.name}.svg`)
10-
}}/>
11-
{props.text &&
12-
<span className="gt-ico-text">{props.text}</span>
13-
}
14-
</span>
15-
)
16-
}
3+
export default ({ className, text, name }) => (
4+
<span className={`gt-ico ${className}`}>
5+
<span className="gt-svg" dangerouslySetInnerHTML={{
6+
__html: require(`!!raw-loader!../assets/icon/${name}.svg`)
7+
}}/>
8+
{
9+
text && <span className="gt-ico-text">{text}</span>
10+
}
11+
</span>
12+
)

0 commit comments

Comments
 (0)