Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit253eb39

Browse files
committed
refactor: added FlexLayout for flex layouts
1 parent06f0021 commit253eb39

File tree

6 files changed

+122
-42
lines changed

6 files changed

+122
-42
lines changed

‎src/renderRepoCard.js‎

Lines changed: 35 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1-
const{ kFormatter, encodeHTML, fallbackColor}=require("../src/utils");
1+
const{
2+
kFormatter,
3+
encodeHTML,
4+
fallbackColor,
5+
FlexLayout,
6+
}=require("../src/utils");
27
consticons=require("./icons");
38

49
constrenderRepoCard=(repo,options={})=>{
@@ -42,6 +47,31 @@ const renderRepoCard = (repo, options = {}) => {
4247
`
4348
:"";
4449

50+
constsvgLanguage=`
51+
<g transform="translate(30, 100)">
52+
<circle data-testid="lang-color" cx="0" cy="-5" r="6" fill="${langColor}" />
53+
<text data-testid="lang" class="gray" x="15">${langName}</text>
54+
</g>
55+
`;
56+
57+
constsvgStars=
58+
stargazers.totalCount>0&&
59+
`
60+
<svg class="icon" y="-12" viewBox="0 0 16 16" version="1.1" width="16" height="16">
61+
${icons.star}
62+
</svg>
63+
<text data-testid="stargazers" class="gray" x="25">${totalStars}</text>
64+
`;
65+
66+
constsvgForks=
67+
totalForks>0&&
68+
`
69+
<svg class="icon" y="-12" viewBox="0 0 16 16" version="1.1" width="16" height="16">
70+
${icons.fork}
71+
</svg>
72+
<text data-testid="forkcount" class="gray" x="25">${totalForks}</text>
73+
`;
74+
4575
return`
4676
<svg version="1.1" width="400" height="${height}" viewBox="0 0 400${height}" fill="none" xmlns="http://www.w3.org/2000/svg">
4777
<style>
@@ -62,28 +92,12 @@ const renderRepoCard = (repo, options = {}) => {
6292
<text x="50" y="38" class="header">${header}</text>
6393
<text class="description" x="25" y="70">${encodeHTML(desc)}</text>
6494
65-
<g transform="translate(30, 100)">
66-
<circle data-testid="lang-color" cx="0" cy="-5" r="6" fill="${langColor}" />
67-
<text data-testid="lang" class="gray" x="15">${langName}</text>
95+
${svgLanguage}
96+
97+
<g transform="translate(${155-shiftText}, 100)">
98+
${FlexLayout({items:[svgStars,svgForks],gap:65}).join("")}
6899
</g>
69100
70-
${(stargazers.totalCount>0) ?`
71-
<g transform="translate(${155-shiftText}, 100)">
72-
<svg class="icon" y="-12" viewBox="0 0 16 16" version="1.1" width="16" height="16">
73-
${icons.star}
74-
</svg>
75-
<text data-testid="stargazers" class="gray" x="25">${totalStars}</text>
76-
</g>
77-
` :''}
78-
79-
${(totalForks>0) ?`
80-
<g transform="translate(${stargazers.totalCount===0 ?155-shiftText :220-shiftText}, 100)">
81-
<svg class="icon" y="-12" viewBox="0 0 16 16" version="1.1" width="16" height="16">
82-
${icons.fork}
83-
</svg>
84-
<text data-testid="forkcount" class="gray" x="25">${totalForks}</text>
85-
</g>
86-
` :''}
87101
</svg>
88102
`;
89103
};

‎src/renderStatsCard.js‎

Lines changed: 10 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,11 @@
1-
const{ kFormatter, fallbackColor}=require("../src/utils");
1+
const{ kFormatter, fallbackColor, FlexLayout}=require("../src/utils");
22
constgetStyles=require("./getStyles");
33
consticons=require("./icons");
44

5-
constcreateTextNode=({
6-
icon,
7-
label,
8-
value,
9-
id,
10-
index,
11-
lineHeight,
12-
showIcons,
13-
})=>{
5+
constcreateTextNode=({ icon, label, value, id, index, showIcons})=>{
146
constkValue=kFormatter(value);
157
conststaggerDelay=(index+3)*150;
16-
// manually calculating lineHeight based on index instead of using <tspan dy="" />
17-
// to fix firefox layout bug
18-
constlheight=lineHeight*(index+1);
19-
consttranslateY=lheight-lineHeight/2;
8+
209
constlabelOffset=showIcons ?`x="25"` :"";
2110
consticonSvg=showIcons
2211
?`
@@ -26,7 +15,7 @@ const createTextNode = ({
2615
`
2716
:"";
2817
return`
29-
<g transform="translate(25,${translateY})">
18+
<g transform="translate(25,0)">
3019
${iconSvg}
3120
<text class="stat bold"${labelOffset} y="12.5">${label}:</text>
3221
<text class="stat" x="135" y="12.5" data-testid="${id}">${kValue}</text>
@@ -106,7 +95,6 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
10695
createTextNode({
10796
...STATS[key],
10897
index,
109-
lineHeight:lheight,
11098
showIcons:show_icons,
11199
})
112100
);
@@ -188,8 +176,12 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
188176
})">
189177
${rankCircle}
190178
191-
<svg x="0" y="45">
192-
${statItems.toString().replace(/\,/gm,"")}
179+
<svg x="0" y="55">
180+
${FlexLayout({
181+
items:statItems,
182+
gap:lheight,
183+
direction:"column",
184+
}).join("")}
193185
</svg>
194186
</g>
195187
</svg>

‎src/utils.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,27 @@ function request(data, headers) {
5656
});
5757
}
5858

59+
/**
60+
*
61+
*@param {String[]} items
62+
*@param {Number} gap
63+
*@param {string} direction
64+
*
65+
*@description
66+
* Auto layout utility, allows us to layout things
67+
* vertically or horizontally with proper gaping
68+
*/
69+
functionFlexLayout({ items, gap, direction}){
70+
// filter() for filtering out empty strings
71+
returnitems.filter(Boolean).map((item,i)=>{
72+
lettransform=`translate(${gap*i}, 0)`;
73+
if(direction==="column"){
74+
transform=`translate(0,${gap*i})`;
75+
}
76+
return`<g transform="${transform}">${item}</g>`;
77+
});
78+
}
79+
5980
module.exports={
6081
renderError,
6182
kFormatter,
@@ -64,4 +85,5 @@ module.exports = {
6485
request,
6586
parseBoolean,
6687
fallbackColor,
88+
FlexLayout,
6789
};

‎tests/renderRepoCard.test.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -158,4 +158,32 @@ describe("Test renderRepoCard", () => {
158158
"Archived"
159159
);
160160
});
161+
162+
it("should not render star count or fork count if either of the are zero",()=>{
163+
document.body.innerHTML=renderRepoCard({
164+
...data_repo.repository,
165+
stargazers:{totalCount:0},
166+
});
167+
168+
expect(queryByTestId(document.body,"stargazers")).toBeNull();
169+
expect(queryByTestId(document.body,"forkcount")).toBeDefined();
170+
171+
document.body.innerHTML=renderRepoCard({
172+
...data_repo.repository,
173+
stargazers:{totalCount:1},
174+
forkCount:0,
175+
});
176+
177+
expect(queryByTestId(document.body,"stargazers")).toBeDefined();
178+
expect(queryByTestId(document.body,"forkcount")).toBeNull();
179+
180+
document.body.innerHTML=renderRepoCard({
181+
...data_repo.repository,
182+
stargazers:{totalCount:0},
183+
forkCount:0,
184+
});
185+
186+
expect(queryByTestId(document.body,"stargazers")).toBeNull();
187+
expect(queryByTestId(document.body,"forkcount")).toBeNull();
188+
});
161189
});

‎tests/renderStatsCard.test.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,6 @@ describe("Test renderStatsCard", () => {
7070
document.body.innerHTML=renderStatsCard(stats);
7171

7272
conststyleTag=document.querySelector("style");
73-
console.log(styleTag.textContent);
7473
conststylesObject=cssToObject(styleTag.textContent);
7574

7675
constheaderClassStyles=stylesObject[".header"];
@@ -157,7 +156,6 @@ describe("Test renderStatsCard", () => {
157156
it("should not have icons if show_icons is false",()=>{
158157
document.body.innerHTML=renderStatsCard(stats,{show_icons:false});
159158

160-
console.log(queryAllByTestId(document.body,"icon"));
161159
expect(queryAllByTestId(document.body,"icon")[0]).not.toBeDefined();
162160
expect(queryByTestId(document.body,"stars")).toBeDefined();
163161
expect(

‎tests/utils.test.js‎

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1-
const{ kFormatter, encodeHTML, renderError}=require("../src/utils");
1+
const{
2+
kFormatter,
3+
encodeHTML,
4+
renderError,
5+
FlexLayout,
6+
}=require("../src/utils");
27

38
describe("Test utils.js",()=>{
49
it("should test kFormatter",()=>{
@@ -23,4 +28,25 @@ describe("Test utils.js", () => {
2328
"Something went wrong"
2429
);
2530
});
31+
32+
it("should test FlexLayout",()=>{
33+
constlayout=FlexLayout({
34+
items:["<text>1</text>","<text>2</text>"],
35+
gap:60,
36+
}).join("");
37+
38+
expect(layout).toBe(
39+
`<g transform=\"translate(0, 0)\"><text>1</text></g><g transform=\"translate(60, 0)\"><text>2</text></g>`
40+
);
41+
42+
constcolumns=FlexLayout({
43+
items:["<text>1</text>","<text>2</text>"],
44+
gap:60,
45+
direction:"column",
46+
}).join("");
47+
48+
expect(columns).toBe(
49+
`<g transform=\"translate(0, 0)\"><text>1</text></g><g transform=\"translate(0, 60)\"><text>2</text></g>`
50+
);
51+
});
2652
});

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp