-
Notifications
You must be signed in to change notification settings - Fork 811
/
tab.js
112 lines (100 loc) · 2.74 KB
/
tab.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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
import React from 'react';
import PropTypes from 'prop-types';
import Plugin from './plugin';
export const EmptyTab = ({title, subtitle, link, onClick, showIcon, image}) => {
return (
<div className="container">
<div className="content">
{ showIcon && <div className="icon">📦</div> }
<div className="title">{title}</div>
<div className="subtitle">{subtitle}</div>
<div className="link" onClick={onClick}>{link}</div>
</div>
<footer/>
<style jsx>{`
.container {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.content {
display: flex;
flex-direction: column;
align-items: center;
}
.title {
height: 24px;
color: #111111;
font-size: 1.6rem;
font-weight: 500;
margin-top: 36px;
}
.subtitle {
color: #808080;
font-size: 1.4rem;
font-weight: normal;
margin-bottom: 16px;
}
.link {
color: #007AFF;
font-size: 1.2rem;
font-weight: 500;
}
.icon {
font-size: 126px;
height: 20rem;
line-height: 20rem;
margin-bottom: -32px;
}
footer {
display: flex;
width: 100%;
${image ? `background-image: url(${image});` : ''}
background-size: contain;
background-repeat: no-repeat;
background-position: center bottom;
height: 180px;
}
`}</style>
</div>
);
};
EmptyTab.propTypes = {
title: PropTypes.string,
subtitle: PropTypes.string,
link: PropTypes.string,
onClick: PropTypes.elementType.isRequired,
showIcon: PropTypes.bool,
image: PropTypes.string
};
const Tab = ({checked, current, plugins, disabled, onClick, onTransitionEnd, openConfig, tabIndex}) => {
return plugins.map(plugin => {
return (
<Plugin
key={plugin.name}
tabIndex={tabIndex}
plugin={plugin}
disabled={disabled}
loading={current === plugin.name}
checked={current === plugin.name ? !checked : checked}
openConfig={plugin.hasConfig ? (() => openConfig(plugin.name)) : undefined}
onClick={() => onClick(plugin.name)}
onTransitionEnd={onTransitionEnd}
/>
);
});
};
Tab.propTypes = {
checked: PropTypes.bool,
current: PropTypes.string,
plugins: PropTypes.array,
disabled: PropTypes.bool,
onClick: PropTypes.func.isRequired,
onTransitionEnd: PropTypes.func,
openConfig: PropTypes.func,
tabIndex: PropTypes.number.isRequired
};
export default Tab;