Skip to content

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+
})

0 commit comments

Comments
 (0)