Skip to content

Commit 1642b79

Browse files
mydearxymmydearxym
committed
Permission Editor UX
1 parent ffffeaf commit 1642b79

File tree

35 files changed

+827
-71
lines changed

35 files changed

+827
-71
lines changed

‎components/MaybeCell/index.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
/*
2+
*
3+
* MaybeCell
4+
*
5+
*/
6+
7+
import React from 'react'
8+
import PropTypes from 'prop-types'
9+
import styled from 'styled-components'
10+
11+
import { makeDebugger, isEmptyNil } from '../../utils'
12+
/* eslint-disable no-unused-vars */
13+
const debug = makeDebugger('c:MaybeCell:index')
14+
/* eslint-enable no-unused-vars */
15+
16+
export const NoneText = styled.div`
17+
text-align: center;
18+
font-size: 0.8rem;
19+
color: lightgrey;
20+
font-style: italic;
21+
`
22+
const MaybeCell = ({ text }) => {
23+
if (isEmptyNil(text)) {
24+
return <NoneText>暂无</NoneText>
25+
}
26+
return <div>{text}</div>
27+
}
28+
29+
MaybeCell.propTypes = {
30+
text: PropTypes.string,
31+
}
32+
33+
MaybeCell.defaultProps = {
34+
text: '',
35+
}
36+
37+
export default MaybeCell

‎components/MaybeCell/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 MaybeCell from '../index'
5+
6+
describe('TODO <MaybeCell />', () => {
7+
it('Expect to have unit tests specified', () => {
8+
expect(true).toEqual(true)
9+
})
10+
})

‎components/PermissionCell/index.js‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
/*
2+
*
3+
* PermissionCell
4+
*
5+
*/
6+
7+
import React from 'react'
8+
import R from 'ramda'
9+
import PropTypes from 'prop-types'
10+
import shortid from 'shortid'
11+
12+
import { makeDebugger, isEmptyNil, isObject } from '../../utils'
13+
import {
14+
Wrapper,
15+
Number,
16+
RootNumber,
17+
NoneText,
18+
Label,
19+
UnitText,
20+
NumberInfo,
21+
PermissionWrapper,
22+
} from './styles'
23+
/* eslint-disable no-unused-vars */
24+
const debug = makeDebugger('c:PermissionCell:index')
25+
/* eslint-enable no-unused-vars */
26+
27+
const valueIsObj = v => isObject(v)
28+
const valueIsNotObj = R.complement(valueIsObj)
29+
30+
const objToArray = input =>
31+
Object.keys(input).map(key => {
32+
return { [key]: input[key] }
33+
})
34+
35+
const key = R.compose(R.head, R.keys)
36+
const value = R.compose(R.head, R.values)
37+
38+
const CommunityPermissions = ({ data }) => {
39+
if (!data) return <div />
40+
const dataArray = objToArray(data)
41+
42+
return (
43+
<React.Fragment>
44+
{dataArray.map(v => (
45+
<PermissionWrapper key={shortid.generate()}>
46+
<Label>{key(v)}: </Label>
47+
<NumberInfo>
48+
<Number>{R.length(R.keys(value(v)))}</Number>
49+
<UnitText>项</UnitText>
50+
</NumberInfo>
51+
</PermissionWrapper>
52+
))}
53+
</React.Fragment>
54+
)
55+
}
56+
57+
const RootPermissions = ({ data }) => {
58+
if (isEmptyNil(data)) return <div />
59+
const plength = R.keys(data)
60+
61+
return (
62+
<PermissionWrapper>
63+
<Label>system: </Label>
64+
<NumberInfo>
65+
<RootNumber>{plength.length}</RootNumber>
66+
<UnitText>项</UnitText>
67+
</NumberInfo>
68+
</PermissionWrapper>
69+
)
70+
}
71+
72+
const PermissionCell = ({ source, onClick }) => {
73+
const cmsps = source.cmsPassportString
74+
if (isEmptyNil(cmsps)) {
75+
return <NoneText>暂无</NoneText>
76+
}
77+
const pjson = JSON.parse(cmsps)
78+
const cdata = R.pickBy(valueIsObj, pjson)
79+
const rdata = R.pickBy(valueIsNotObj, pjson)
80+
81+
return (
82+
<Wrapper onClick={onClick.bind(this, source)}>
83+
<CommunityPermissions data={cdata} />
84+
<RootPermissions data={rdata} />
85+
</Wrapper>
86+
)
87+
}
88+
89+
PermissionCell.propTypes = {
90+
// https://www.npmjs.com/package/prop-types
91+
onClick: PropTypes.func.isRequired,
92+
source: PropTypes.object.isRequired,
93+
}
94+
95+
PermissionCell.defaultProps = {}
96+
97+
export default PermissionCell

‎components/PermissionCell/styles/index.js‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import styled from 'styled-components'
2+
3+
export const Wrapper = styled.div`
4+
display: flex;
5+
flex-direction: column;
6+
align-items: start;
7+
margin-left: 10px;
8+
color: grey;
9+
font-size: 0.8rem;
10+
padding: 5px 10px;
11+
background: #fff6cf;
12+
border-radius: 4px;
13+
&:hover {
14+
cursor: pointer;
15+
}
16+
`
17+
18+
export const NumberInfo = styled.div`
19+
display: flex;
20+
align-items: center;
21+
justify-content: flex-end;
22+
text-align: right;
23+
`
24+
25+
export const Number = styled.span`
26+
color: yellowgreen;
27+
padding: 0 5px;
28+
border-radius: 100%;
29+
font-size: 0.9rem;
30+
`
31+
export const RootNumber = Number.extend`
32+
color: orange;
33+
`
34+
export const NoneText = styled.div`
35+
text-align: center;
36+
font-size: 0.8rem;
37+
color: lightgrey;
38+
font-style: italic;
39+
`
40+
41+
export const Label = styled.div`
42+
flex-grow: 1;
43+
text-align: left;
44+
`
45+
46+
export const UnitText = styled.div`
47+
font-size: 0.7rem;
48+
color: #a7a4a4;
49+
font-style: italic;
50+
`
51+
52+
export const PermissionWrapper = styled.div`
53+
display: flex;
54+
align-items: center;
55+
width: 100%;
56+
`

‎components/PermissionCell/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 PermissionCell from '../index'
5+
6+
describe('TODO <PermissionCell />', () => {
7+
it('Expect to have unit tests specified', () => {
8+
expect(true).toEqual(true)
9+
})
10+
})

‎components/UserCell/index.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,10 @@ import { makeDebugger } from '../../utils'
1414
const debug = makeDebugger('c:UserCell:index')
1515
/* eslint-enable no-unused-vars */
1616

17-
const UserCell = ({ user, align, left }) => {
17+
const UserCell = ({ user, align, left, small }) => {
1818
return (
1919
<UserCellWrapper align={align} left={left}>
20-
<Avatar src={user.avatar} alt={user.nickname} />
20+
<Avatar src={user.avatar} alt={user.nickname} small={small} />
2121
<NickName>{user.nickname}</NickName>
2222
</UserCellWrapper>
2323
)
@@ -32,11 +32,13 @@ UserCell.propTypes = {
3232
}).isRequired,
3333
align: PropTypes.string,
3434
left: PropTypes.string,
35+
small: PropTypes.bool,
3536
}
3637

3738
UserCell.defaultProps = {
3839
align: 'left',
3940
left: '10px',
41+
small: false,
4042
}
4143

4244
export default UserCell

‎components/UserCell/styles/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ export const UserCellWrapper = styled.div`
99
margin-left: ${props => props.left};
1010
`
1111
export const Avatar = styled(Img)`
12-
width: 25px;
13-
height: 25px;
12+
width: ${props => (props.small ? '18px' : '25px')};
13+
height: ${props => (props.small ? '18px' : '25px')};
1414
border-radius: 100%;
1515
`
1616
export const NickName = styled.div`

‎components/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ export { default as Navigator } from './Navigator'
2121
export { default as ThemeSelector } from './ThemeSelector'
2222

2323
// Table cell
24+
export { default as MaybeCell } from './MaybeCell'
2425
export { default as CommunityCell } from './CommunityCell'
2526
export { default as UserCell } from './UserCell'
2627
export { default as ColorCell } from './ColorCell'
@@ -30,6 +31,7 @@ export { default as FormSelector } from './FormSelector'
3031
export { default as TagColorSelector } from './TagColorSelector'
3132
export { default as CategoriesCell } from './CategoriesCell'
3233
export { default as TagsCell } from './TagsCell'
34+
export { default as PermissionCell } from './PermissionCell'
3335

3436
// loading component
3537
export {

0 commit comments

Comments
 (0)