-
Notifications
You must be signed in to change notification settings - Fork 1
/
card.js
79 lines (74 loc) · 1.71 KB
/
card.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
import React from 'react';
import { Card } from 'antd';
import { Image } from 'olymp';
import { createComponent } from 'react-fela';
import tinycolor from 'tinycolor2';
const StyledCard = createComponent(
({ isActive, color }) => ({
cursor: 'pointer',
margin: '3px 10px 3px 0',
borderRight: color
? `3px solid ${tinycolor(color).setAlpha(1).toRgbString()}!important`
: null,
left: isActive ? '15px' : 0,
minHeight: '60px',
'> .ant-card-extra': {
top: '5px',
right: '5px',
},
'> .ant-card-body': {
padding: 0,
},
':hover': !isActive && {
left: '10px',
},
}),
props => <Card {...props} />,
['onClick', 'extra']
);
const StyledCardContent = createComponent(() => ({
padding: '8px',
marginLeft: '60px',
}));
const StyledCardTitle = createComponent(
() => ({
width: '200px',
ellipsis: true,
}),
'h6'
);
const StyledCardParagraph = createComponent(
() => ({
margin: 0,
ellipsis: true,
width: '200px',
// whiteSpace: 'nowrap',
display: '-webkit-box',
WebkitBoxOrient: 'vertical',
WebkitLineClamp: 3,
lineHeight: '18px',
maxHeight: '54px',
fontSize: 'small',
}),
'p'
);
export default ({ name, description, image, ...rest }) =>
(<StyledCard {...rest}>
{!!image &&
<Image
value={image}
width={60}
retina
mode="lpad"
style={{
position: 'absolute',
top: '50%',
transform: 'translateY(-50%)',
}}
/>}
<StyledCardContent>
<StyledCardTitle>{name}</StyledCardTitle>
{!!description &&
<StyledCardParagraph>{description}</StyledCardParagraph>}
</StyledCardContent>
</StyledCard>);