Skip to content
This repository was archived by the owner on Nov 1, 2021. It is now read-only.

Commit 9af0a26

Browse files
mydearxymmydearxym
committed
refactor(wip): up to date
1 parent b4e1630 commit 9af0a26

File tree

206 files changed

+9170
-4011
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

206 files changed

+9170
-4011
lines changed

‎.babelrc

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
{
22
"plugins": [
3-
"transform-decorators-legacy",
3+
["@babel/plugin-proposal-decorators", { "legacy": true }],
4+
"transform-inline-environment-variables",
45
[
5-
"styled-components",
6+
"babel-plugin-styled-components",
67
{
78
"ssr": true,
89
"displayName": true,
@@ -25,13 +26,18 @@
2526
],
2627
"env": {
2728
"development": {
28-
"presets": ["next/babel"]
29+
"presets": ["next/babel"],
30+
"plugins": ["inline-dotenv"]
31+
},
32+
"local": {
33+
"presets": ["next/babel"],
2934
},
3035
"production": {
3136
"presets": ["next/babel"]
3237
},
3338
"test": {
34-
"presets": [["next/babel", { "preset-env": { "modules": "commonjs" } }]]
39+
"presets": [["next/babel", { "preset-env": { "modules": "commonjs" } }]],
40+
"plugins": ["inline-dotenv"]
3541
}
3642
}
3743
}

‎components/AdderCell/styles/index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import styled from 'styled-components'
22

33
import Img from '../../Img'
4-
import { Animate } from '../../../utils'
4+
import { animate } from '../../../utils'
55

66
export const AddWrapper = styled.div`
77
display: flex;
@@ -20,7 +20,7 @@ export const AddIcon = styled(Img)`
2020
${AddWrapper}:hover & {
2121
cursor: pointer;
2222
fill: #646479;
23-
animation: ${Animate.pulse} 0.3s linear;
23+
animation: ${animate.pulseRule};
2424
}
2525
`
2626

‎components/AvatarsRow/index.js

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,15 @@
77
import React from 'react'
88
import PropTypes from 'prop-types'
99
import R from 'ramda'
10-
1110
import { Tooltip } from 'antd'
11+
1212
import { ATATARS_LIST_LENGTH } from '../../config/general'
1313

1414
import { Avatars, AvatarsItem, AvatarsImg, AvatarsMore } from './styles'
1515

16-
/* eslint-disable no-unused-vars */
17-
import { makeDebugger, prettyNum, uid } from '../../utils'
16+
import { makeDebugger, prettyNum } from '../../utils'
1817

18+
/* eslint-disable no-unused-vars */
1919
const debug = makeDebugger('c:AvatarsRow:index')
2020
/* eslint-enable no-unused-vars */
2121

@@ -37,18 +37,21 @@ const AvatarsRow = ({
3737
}
3838

3939
users = R.filter(validUser, users)
40+
4041
return (
4142
<Avatars height={height}>
42-
{total <= users.length ? (
43+
{total <= 1 ? (
4344
<span />
4445
) : (
4546
<AvatarsItem onClick={onTotalSelect.bind(this, { users, total })}>
46-
<AvatarsMore>{prettyNum(total)}</AvatarsMore>
47+
<Tooltip title={`所有评论共 ${total} 条`}>
48+
<AvatarsMore total={total}>{prettyNum(total)}</AvatarsMore>
49+
</Tooltip>
4750
</AvatarsItem>
4851
)}
4952

50-
{R.slice(0, limit, R.reverse(users)).map(user => (
51-
<AvatarsItem key={uid.gen()} onClick={onUserSelect.bind(this, user)}>
53+
{R.slice(0, limit, users).map(user => (
54+
<AvatarsItem key={user.id} onClick={onUserSelect.bind(this, user)}>
5255
<Tooltip title={user.nickname}>
5356
<AvatarsImg src={user.avatar} />
5457
</Tooltip>

‎components/AvatarsRow/styles/index.js

Lines changed: 24 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
11
import styled from 'styled-components'
22

3-
import { theme, Animate } from '../../../utils'
3+
import { theme, cs } from '../../../utils'
44

55
export const Avatars = styled.ul`
6-
display: flex;
6+
${cs.flex()};
7+
flex-direction: row-reverse;
78
list-style-type: none;
89
margin: auto;
9-
height: ${props => props.height};
10+
height: ${({ height }) => height};
1011
padding: 0px 8px 0px 0px;
11-
flex-direction: row-reverse;
1212
`
13-
1413
// height: 49px;
1514
export const AvatarsItem = styled.li`
1615
margin: 0px 0px 0px 0px;
@@ -20,13 +19,15 @@ export const AvatarsItem = styled.li`
2019
opacity: 0.75;
2120
&:hover {
2221
opacity: 1;
23-
animation: ${Animate.pulse} 0.3s linear;
2422
}
23+
${Avatars}:hover & {
24+
margin-left: 5px;
25+
}
26+
transition: all 0.3s;
2527
`
26-
2728
export const AvatarsImg = styled.img`
2829
border: 2px solid;
29-
border-color: ${theme('paper.comments_user_border')};
30+
border-color: ${theme('thread.commentsUserBorder')};
3031
border-radius: 100px 100px 100px 100px;
3132
color: #ffffff;
3233
display: block;
@@ -39,18 +40,24 @@ export const AvatarsImg = styled.img`
3940
text-align: center;
4041
`
4142

43+
const moreTextSize = total => {
44+
if (total < 99) return '14px'
45+
if (total >= 100 && total <= 999) return '12px'
46+
return '10px'
47+
}
48+
4249
export const AvatarsMore = styled.span`
43-
background-color: #e6edf3;
44-
font-size: 11px;
45-
border: 2px solid #f9fcfc;
50+
${cs.flex('align-center')};
51+
justify-content: center;
52+
font-size: ${({ total }) => moreTextSize(total)};
53+
54+
border-color: ${theme('thread.articleHover')};
55+
color: ${theme('thread.articleTitle')};
56+
background-color: ${theme('thread.articleHover')};
4657
border-radius: 100px 100px 100px 100px;
47-
color: grey;
48-
display: block;
4958
font-family: sans-serif;
50-
font-weight: 100;
59+
font-weight: ${({ total }) => (total >= 1000 ? 600 : 200)};
5160
height: 30px;
5261
width: 30px;
53-
padding-top: 7px;
54-
padding-left: 2px;
55-
text-align: center;
62+
padding-left: ${({ total }) => (total >= 1000 ? '5px' : '3px')};
5663
`

‎components/CategoriesCell/styles/index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import styled from 'styled-components'
22

33
import Img from '../../Img'
4-
import { Animate } from '../../../utils'
4+
import { animate } from '../../../utils'
55

66
export const UnsetText = styled.div`
77
color: tomato;
@@ -33,7 +33,7 @@ export const DeleteCross = styled.div`
3333
margin-left: 8px;
3434
&:hover {
3535
cursor: pointer;
36-
animation: ${Animate.pulse} 0.3s linear;
36+
animation: ${animate.pulse} 0.3s linear;
3737
}
3838
`
3939

‎components/CommunityCell/styles/index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import styled from 'styled-components'
22

33
import Img from '../../Img'
4-
import { Animate } from '../../../utils'
4+
import { animate } from '../../../utils'
55

66
export const Wrapper = styled.div`
77
display: flex;
@@ -35,7 +35,7 @@ export const DeleteCross = styled.div`
3535
margin-left: 8px;
3636
&:hover {
3737
cursor: pointer;
38-
animation: ${Animate.pulse} 0.3s linear;
38+
animation: ${animate.pulseRule};
3939
}
4040
`
4141

‎components/CommunityMatrix/styles/index.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import styled from 'styled-components'
22

33
import Img from '../../Img'
4-
import { smokey } from '../../../utils'
4+
import { cs } from '../../../utils'
55

66
export const MatrixWrapper = styled.div`
77
display: flex;
@@ -17,10 +17,10 @@ export const CommunityLogo = styled(Img)`
1717
padding-bottom: 3px;
1818
border-bottom: 2px solid;
1919
border-bottom-color: ${props => (props.active ? 'grey' : 'white')};
20-
${smokey};
20+
${cs.smokey};
2121
opacity: ${props => (props.len ? 1 : 0.5)};
2222
`
23-
export const GeneralPLogo = CommunityLogo.extend`
23+
export const GeneralPLogo = styled(CommunityLogo)`
2424
margin-top: 2px;
2525
width: 22px;
2626
height: 22px;

‎components/FocusLine/index.js

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
/*
2+
*
3+
* FocusLine
4+
*
5+
*/
6+
7+
import React from 'react'
8+
import R from 'ramda'
9+
import PropTypes from 'prop-types'
10+
11+
import { Wrapper, Icon, TextWrapper, Text, Focus } from './styles'
12+
13+
import { makeDebugger } from '../../utils'
14+
/* eslint-disable no-unused-vars */
15+
const debug = makeDebugger('c:FocusLine:index')
16+
/* eslint-enable no-unused-vars */
17+
18+
const FocusLine = ({ iconSrc, before, focus, after }) => (
19+
<Wrapper>
20+
<Icon src={iconSrc} show={!R.isEmpty(iconSrc)} />
21+
<TextWrapper>
22+
<Text>{before}</Text> <Focus>{focus}</Focus> <Text>{after}</Text>
23+
</TextWrapper>
24+
</Wrapper>
25+
)
26+
27+
FocusLine.propTypes = {
28+
iconSrc: PropTypes.string,
29+
before: PropTypes.string.isRequired,
30+
focus: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
31+
after: PropTypes.string.isRequired,
32+
}
33+
34+
FocusLine.defaultProps = {
35+
iconSrc: '',
36+
}
37+
38+
export default FocusLine

‎components/FocusLine/styles/index.js

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import styled from 'styled-components'
2+
3+
import Img from '../../Img'
4+
import { theme, cs } from '../../../utils'
5+
6+
export const Wrapper = styled.div`
7+
${cs.flex('align-end')};
8+
color: ${theme('banner.desc')};
9+
`
10+
export const TextWrapper = styled.div`
11+
${cs.flex()};
12+
font-size: 0.9rem;
13+
align-items: baseline;
14+
`
15+
export const Text = styled.div``
16+
export const Icon = styled(Img)`
17+
fill: ${theme('banner.desc')};
18+
width: 16px;
19+
height: 16px;
20+
margin-right: 3px;
21+
display: ${({ show }) => (show ? '' : 'none')};
22+
`
23+
export const Focus = styled.div`
24+
font-size: 1.1rem;
25+
color: ${theme('contrastFg')};
26+
margin-left: 3px;
27+
margin-right: 3px;
28+
`

‎components/FocusLine/tests/index.test.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
// import React from 'react'
2+
// import { shallow } from 'enzyme'
3+
4+
// import FocusLine from '../index'
5+
6+
describe('TODO <FocusLine />', () => {
7+
it('Expect to have unit tests specified', () => {
8+
expect(true).toEqual(true)
9+
})
10+
})

‎components/Footer/styles/index.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import styled from 'styled-components'
2-
import { smokey } from '../../../utils'
2+
import { cs } from '../../../utils'
33

4-
const link = styled.a`
4+
const Link = styled.a`
55
text-decoration: none;
66
font-weight: bolder;
77
color: #9fc0c5;
@@ -32,12 +32,12 @@ export const Divider = styled.div`
3232

3333
export const GitSource = styled.div`
3434
margin-top: 2px;
35-
${smokey};
35+
${cs.smokey};
3636
`
3737
export const Powerby = styled.div`
3838
color: #b7c6d0;
3939
`
4040

41-
export const PowerbyLink = link.extend``
42-
export const About = link.extend``
43-
export const Beian = link.extend``
41+
export const PowerbyLink = styled(Link)``
42+
export const About = styled(Link)``
43+
export const Beian = styled(Link)``

‎components/FormInputer/styles/index.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import styled from 'styled-components'
22
// import { Img } from '../../../components'
3-
// import { Animate } from '../../../utils'
43

54
export const FormInput = styled.div`
65
width: 250px;

‎components/FormItem/styles/index.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import styled from 'styled-components'
22
// import { Img } from '../../../components'
3-
// import { Animate } from '../../../utils'
43

54
export const FormItemWrapper = styled.div`
65
display: flex;

‎components/FormSelector/styles/index.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import styled from 'styled-components'
22
// import { Img } from '../../../components'
3-
// import { Animate } from '../../../utils'
43

54
export const SelectorWrapper = styled.div`
65
display: flex;

‎components/Img/index.js

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,15 @@ const NormalImg = ({ className, src, alt }) => (
1313
<img className={className} src={src} alt={alt} />
1414
)
1515

16-
const Img = ({ className, src, alt }) => {
16+
const Img = ({ className, src, alt, loading }) => {
1717
if (/\.(svg)$/i.test(src)) {
18-
return <ReactSVG svgClassName={className} path={src} />
18+
return (
19+
<ReactSVG
20+
svgClassName={className}
21+
src={src}
22+
loading={() => <React.Fragment>{loading}</React.Fragment>}
23+
/>
24+
)
1925
}
2026
return <NormalImg className={className} src={src} alt={alt} />
2127
}
@@ -24,11 +30,13 @@ Img.propTypes = {
2430
src: PropTypes.string.isRequired,
2531
alt: PropTypes.string,
2632
className: PropTypes.string,
33+
loading: PropTypes.any,
2734
}
2835

2936
Img.defaultProps = {
30-
alt: 'cps image',
37+
alt: 'image',
3138
className: 'img-class',
39+
loading: null,
3240
}
3341

3442
export default Img

0 commit comments

Comments
 (0)