davidl/userjs-jop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add key to skip the unnecessary render of SiteBtn

Browse Source
This commit is contained in:
mrbunker
2023-03-11 13:44:51 +08:00
parent db1f5d22b8
commit 6d87fbc0a4
3 changed files with 154 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/App.tsx
View File

@@ -26,7 +26,7 @@ const App = memo(function ({ current, CODE }: { current: Current; CODE: string }
<>
<div class="jop-list">
{filter.map((item) => (
<SiteBtn siteItem={item} CODE={CODE} />
<SiteBtn siteItem={item} CODE={CODE} key={item.name} />
))}
</div>
<div>

2
src/components/SiteBtn.tsx
View File

@@ -1,5 +1,5 @@
import { SiteItem } from "@/utils/siteList";
import xhr from "@/utils/xhr";
import { SiteItem } from "@/utils/siteList";
import { memo, useEffect, useState } from "preact/compat";
interface Status {

301
src/style.css
View File

@@ -1,149 +1,152 @@
/* */
.jop-list {
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 10px;
width: 100%;
height: 100%;
z-index: 1;
background-color: white;
transition: right 200ms ease-in-out;
font-family: Roboto, Helvetica, Arial, sans-serif;
color: black;
}
/* */
.jop-button,
.jop-button_def {
position: relative;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
/* min-width: 50px; */
padding: 3px 10px;
border-radius: 4px;
font-weight: 500;
font-size: 14px;
border: 1px solid #dcdfe6;
color: #606266;
cursor: pointer;
}
.jop-button_def {
margin: 10px 0;
width: 50px;
}
.jop-button:visited {
color: #606266;
}
.jop-button:hover {
text-decoration: none;
color: #409eff;
border: 1px solid #c6e2ff;
background-color: #ecf5ff;
}
.jop-button_label {
position: absolute;
font-size: 10px;
padding: 4px;
border-radius: 4px;
top: -13px;
right: -10px;
line-height: 0.75;
color: #67c23a;
border: 1px solid #e1f3d8;
background: white;
}
.jop-button_green {
color: white !important;
background-color: #67c23a;
/* border: 1px solid #b3e19d; */
}
.jop-button_green:hover {
color: white !important;
background-color: #95d475;
}
.jop-button_red {
color: white !important;
background-color: #f56c6c;
/* border: 1px solid #fab6b6; */
}
.jop-button_red:hover {
color: white !important;
background-color: #f89898;
}
.jop-loading {
display: inline-block;
width: 14px;
height: 14px;
margin-right: 10px;
border: 2px dashed #dcdfe6;
border-top-color: transparent;
border-radius: 100%;
animation: btnLoading infinite 1s linear;
}
@keyframes btnLoading {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
/* */
.jop-tag {
padding: 3px 6px;
color: #409eff !important;
background: #ecf5ff;
border: 1px solid #d9ecff;
border-radius: 4px;
}
/* */
.jop-setting-list {
display: flex;
flex-wrap: wrap;
background-color: white;
}
.jop-setting-title {
margin: 10px 0 5px 0;
}
.jop-setting-item {
display: flex;
height: 20px;
justify-content: center;
align-items: center;
margin-right: 15px;
}
/* */
/* db */
.db-panel .movie-panel-info div.panel-block {
padding: 5.5px 12px;
}
.db-panel .jop-app {
padding: 15px 12px;
}
/* */
/* lib */
.lib-panel .jop-app {
padding: 20px 30px;
margin-top: 10px;
}
/* */
/* */
input[type="checkbox"],
input[type="radio"] {
margin: 0 0 0 5px;
}
/* */
/* */
.jop-list {
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 10px;
width: 100%;
height: 100%;
z-index: 1;
background-color: white;
transition: right 200ms ease-in-out;
font-family: Roboto, Helvetica, Arial, sans-serif;
color: black;
}
/* */
.jop-button,
.jop-button_def {
position: relative;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
/* min-width: 50px; */
padding: 3px 10px;
border-radius: 4px;
font-weight: 500;
font-size: 14px;
border: 1px solid #dcdfe6;
color: #606266;
cursor: pointer;
}
.jop-button_def {
margin: 10px 0;
width: 50px;
}
.jop-button:visited {
color: #606266;
}
.jop-button:hover {
text-decoration: none;
color: #409eff;
border: 1px solid #c6e2ff;
background-color: #ecf5ff;
}
.jop-button_label {
position: absolute;
font-size: 10px;
padding: 4px;
border-radius: 4px;
top: -13px;
right: -10px;
line-height: 0.75;
color: #67c23a;
border: 1px solid #e1f3d8;
background: white;
}
.jop-button_green {
color: white !important;
background-color: #67c23a;
/* border: 1px solid #b3e19d; */
}
.jop-button_green:hover {
color: white !important;
background-color: #95d475;
}
.jop-button_red {
color: white !important;
background-color: #f56c6c;
/* border: 1px solid #fab6b6; */
}
.jop-button_red:hover {
color: white !important;
background-color: #f89898;
}
.jop-loading {
display: inline-block;
width: 14px;
height: 14px;
margin-right: 10px;
border: 2px dashed #dcdfe6;
border-top-color: transparent;
border-radius: 100%;
animation: btnLoading infinite 1s linear;
}
@keyframes btnLoading {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
/* */
.jop-tag {
padding: 3px 6px;
color: #409eff !important;
background: #ecf5ff;
border: 1px solid #d9ecff;
border-radius: 4px;
}
/* */
.jop-setting-list {
display: flex;
flex-wrap: wrap;
background-color: white;
}
.jop-setting-title {
margin: 10px 0 5px 0;
}
.jop-setting-item {
display: flex;
height: 20px;
justify-content: center;
align-items: center;
margin-right: 15px;
user-select: none;
cursor: pointer;
}
/* */
/* db */
.db-panel .movie-panel-info div.panel-block {
padding: 5.5px 12px;
}
.db-panel .jop-app {
padding: 15px 12px;
}
/* */
/* lib */
.lib-panel .jop-app {
padding: 20px 30px;
margin-top: 10px;
}
/* */
/* */
input[type="checkbox"],
input[type="radio"] {
margin: 0 0 0 5px;
cursor: pointer;
}
/* */