Skip to content

Commit 7f7b5d2

Browse files
TranceverTrancever
authored
feat: implements dropdown menu for changing docs version. (#1376)
1 parent edfc64a commit 7f7b5d2

4 files changed

Lines changed: 229 additions & 73 deletions

File tree

‎docs/assets/version.js‎

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
/* eslint-disable strict, no-var, vars-on-top, prefer-template */
2+
3+
'use strict';
4+
5+
const url = window.location.pathname;
6+
7+
function createUrlForVersion(version) {
8+
return url.replace(/react-native-paper\//, `react-native-paper/${version}/`);
9+
}
10+
11+
function appendVersionBanner() {
12+
const html = `
13+
<style>
14+
.banner {
15+
margin: 0;
16+
padding: 12px;
17+
margin: 24px;
18+
border-radius: 3px;
19+
text-align: center;
20+
background-color: #f8f9fa;
21+
margin-right: 70px;
22+
23+
@media (max-width: 640px) {
24+
margin-top: 72px;
25+
}
26+
}
27+
28+
.menu-button {
29+
position: relative;
30+
font-size: 14px;
31+
padding: 3px 4px 4px 4px;
32+
margin-left: 2px;
33+
border-radius: 4px;
34+
color: #6200ee;
35+
transition: background-color 200ms;
36+
border: 1px solid #6200ee;
37+
display: inline-block;
38+
cursor: default;
39+
}
40+
41+
.menu-button:hover {
42+
background-color: #efefef;
43+
}
44+
45+
.menu-button:focus {
46+
outline-offset: -3px;
47+
}
48+
49+
.menu-button:focus > ul {
50+
opacity: 1;
51+
pointer-events: auto;
52+
}
53+
54+
.menu-wrapper {
55+
position: relative;
56+
display: inline-block;
57+
width: 0;
58+
height: 0;
59+
}
60+
61+
.list {
62+
min-width: 110px;
63+
display: flex;
64+
position: absolute;
65+
z-index: 2;
66+
margin: 0;
67+
padding: 0;
68+
left: 0;
69+
top: 30px;
70+
list-style: none;
71+
flex-direction: column;
72+
background-color: #f8f9fa;
73+
box-shadow: 0px 2px 5px -1px #dedede;
74+
border-radius: 5px;
75+
overflow: hidden;
76+
opacity: 0;
77+
transition: opacity 150ms;
78+
pointer-events: none;
79+
}
80+
81+
.list:focus-within {
82+
opacity: 1;
83+
pointer-events: auto;
84+
}
85+
86+
.list:hover {
87+
opacity: 1;
88+
}
89+
90+
.list-item {
91+
flex: 1;
92+
margin: 0;
93+
box-shadow: inset 0 1px 0 0 #efefef;
94+
text-align: left;
95+
display: flex;
96+
}
97+
98+
.link {
99+
flex: 1;
100+
padding: 10px 5px;
101+
transition: background-color 250ms;
102+
}
103+
104+
.link:hover {
105+
background-color: #efefef;
106+
}
107+
108+
.link:focus {
109+
background-color: #efefef;
110+
outline-offset: -3px;
111+
outline-width: 3px;
112+
}
113+
</style>
114+
<div class="banner">
115+
Looking for the documentation for previous version? You can find it
116+
<div tabindex="0" class="menu-button" role="button" aria-haspopup="true">
117+
here
118+
<ul class="list" role="menu">
119+
<li class="list-item">
120+
<a class="link" href="${createUrlForVersion(
121+
'1.0'
122+
)}" role="menuitem">v1.x</a>
123+
</li>
124+
<li class="list-item">
125+
<a class="link" href="${createUrlForVersion(
126+
'2.0'
127+
)}" role="menuitem">v2.x</a>
128+
</li>
129+
</ul>
130+
</div>
131+
</div>
132+
`;
133+
134+
if (document.getElementById('version-banner')) return;
135+
136+
const div = document.createElement('div');
137+
div.innerHTML = html;
138+
div.id = 'version-banner';
139+
140+
const root = document.getElementById('root');
141+
142+
if (root) {
143+
if (root.childNodes.length === 1) {
144+
const wrappingDiv = root.childNodes[0];
145+
if (wrappingDiv.childNodes.length === 2) {
146+
const targetDiv = wrappingDiv.childNodes[1];
147+
targetDiv.insertBefore(div, targetDiv.childNodes[0]);
148+
}
149+
}
150+
}
151+
}
152+
153+
appendVersionBanner();
154+
155+
var mutationObserver = new MutationObserver(mutations => {
156+
mutations.forEach(appendVersionBanner);
157+
});
158+
159+
mutationObserver.observe(document.documentElement, {
160+
childList: true,
161+
subtree: true,
162+
});

‎docs/component-docs.config.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,10 @@ const assets = [
1212
path.join(__dirname, 'assets', 'images'),
1313
];
1414
const styles = [path.join(__dirname, 'assets', 'styles.css')];
15-
const scripts = [path.join(__dirname, 'assets', 'snack.js')];
15+
const scripts = [
16+
path.join(__dirname, 'assets', 'snack.js'),
17+
path.join(__dirname, 'assets', 'version.js'),
18+
];
1619
const github = 'https://github.com/callstack/react-native-paper/edit/master/';
1720

1821
if (!fs.existsSync(dist)) {

‎docs/pages/src/Home.js‎

Lines changed: 0 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,6 @@ export default class Home extends React.Component<{}> {
1717
const { isDark } = this.state;
1818
return (
1919
<Container>
20-
<Banner>
21-
Looking for the documentation for version 1.0? You can find it{' '}
22-
<a href="1.0">here</a>.
23-
</Banner>
2420
<Content>
2521
<h1>
2622
Cross-platform{' '}
@@ -96,19 +92,6 @@ export default class Home extends React.Component<{}> {
9692
const PRIMARY_COLOR = '#6200ee';
9793
const RESTING_SHADOW = '0 1px 3px rgba(0, 0, 0, 0.12)';
9894

99-
const Banner = styled.p`
100-
margin: 0;
101-
padding: 12px;
102-
margin: 24px;
103-
border-radius: 3px;
104-
text-align: center;
105-
background-color: #f8f9fa;
106-
107-
@media (max-width: 640px) {
108-
margin-top: 72px;
109-
}
110-
`;
111-
11295
const Highlighted = styled.a`
11396
color: ${PRIMARY_COLOR};
11497

‎docs/pages/src/Showcase.js‎

Lines changed: 63 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -41,66 +41,74 @@ const data: Data[] = [
4141
export default class Showcase extends React.Component<{}> {
4242
render() {
4343
return (
44-
<Content>
45-
<h1>Who&apos;s using Paper?</h1>
46-
<p>
47-
Check out these apps built using Paper. Send us a{' '}
48-
<a
49-
href="https://github.com/callstack/react-native-paper/pulls"
50-
target="_blank"
51-
rel="noopener noreferrer"
52-
>
53-
pull request
54-
</a>{' '}
55-
to add your app to this list.
56-
</p>
57-
<Gallery>
58-
{data.map(item => {
59-
const tintColor = color(item.color).isLight()
60-
? '#000000'
61-
: '#FFFFFF';
62-
return (
63-
<div key={item.image}>
64-
<ImageContainer>
65-
<Image src={item.image} alt="" />
66-
<Info style={{ backgroundColor: item.color }}>
67-
<AppName
68-
style={{
69-
color: tintColor,
70-
}}
71-
>
72-
{item.name}
73-
</AppName>
74-
<BadgeContainer>
75-
<a
76-
href={item.android || null}
77-
target="_blank"
78-
rel="noopener noreferrer"
79-
style={{ opacity: item.android ? 1 : 0.4 }}
44+
<Container>
45+
<Content>
46+
<h1>Who&apos;s using Paper?</h1>
47+
<p>
48+
Check out these apps built using Paper. Send us a{' '}
49+
<a
50+
href="https://github.com/callstack/react-native-paper/pulls"
51+
target="_blank"
52+
rel="noopener noreferrer"
53+
>
54+
pull request
55+
</a>{' '}
56+
to add your app to this list.
57+
</p>
58+
<Gallery>
59+
{data.map(item => {
60+
const tintColor = color(item.color).isLight()
61+
? '#000000'
62+
: '#FFFFFF';
63+
return (
64+
<div key={item.image}>
65+
<ImageContainer>
66+
<Image src={item.image} alt="" />
67+
<Info style={{ backgroundColor: item.color }}>
68+
<AppName
69+
style={{
70+
color: tintColor,
71+
}}
8072
>
81-
<GooglePlayIcon color={tintColor} />
82-
</a>
83-
<Separation />
84-
<a
85-
href={item.ios || null}
86-
target="_blank"
87-
rel="noopener noreferrer"
88-
style={{ opacity: item.ios ? 1 : 0.4 }}
89-
>
90-
<IphoneIcon color={tintColor} />
91-
</a>
92-
</BadgeContainer>
93-
</Info>
94-
</ImageContainer>
95-
</div>
96-
);
97-
})}
98-
</Gallery>
99-
</Content>
73+
{item.name}
74+
</AppName>
75+
<BadgeContainer>
76+
<a
77+
href={item.android || null}
78+
target="_blank"
79+
rel="noopener noreferrer"
80+
style={{ opacity: item.android ? 1 : 0.4 }}
81+
>
82+
<GooglePlayIcon color={tintColor} />
83+
</a>
84+
<Separation />
85+
<a
86+
href={item.ios || null}
87+
target="_blank"
88+
rel="noopener noreferrer"
89+
style={{ opacity: item.ios ? 1 : 0.4 }}
90+
>
91+
<IphoneIcon color={tintColor} />
92+
</a>
93+
</BadgeContainer>
94+
</Info>
95+
</ImageContainer>
96+
</div>
97+
);
98+
})}
99+
</Gallery>
100+
</Content>
101+
</Container>
100102
);
101103
}
102104
}
103105

106+
const Container = styled.div`
107+
width: 100%;
108+
overflow-y: auto;
109+
-webkit-overflow-scrolling: touch;
110+
`;
111+
104112
const AppName = styled.h3`
105113
font-size: 16px;
106114
margin-top: 0;

0 commit comments

Comments
 (0)