📝 docs(code-reader): React 钩子卡片原型的作用图标按分类上色
This commit is contained in:
cruldra committed
1 parent
7570701bf4
commit
9fef9b36a9
4 files changed
+22
-21
No files matched your search
Binary file not shown.
|
Before Width: | Height: | Size: 514 KiB After Width: | Height: | Size: 514 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 1.3 MiB |
+9
-8
@@ -813,14 +813,15 @@ function hookCard(parent, w) {
|
|||||||
const HOOK = { label: "钩子", color: "#b180d7", icon: "fishing-hook" };
|
const HOOK = { label: "钩子", color: "#b180d7", icon: "fishing-hook" };
|
||||||
const ORIGIN = { react: "#61dafb", library: "#e5c07b", own: "#89d185" };
|
const ORIGIN = { react: "#61dafb", library: "#e5c07b", own: "#89d185" };
|
||||||
|
|
||||||
// React 自带钩子的作用，同 React 类型定义里钩子的分组：卡片左边第二个图标，中性灰，悬停显示名字
|
// React 自带钩子的作用，同 React 类型定义里钩子的分组：卡片左边第二个图标，悬停显示名字。
|
||||||
|
// 颜色借 Dark Modern 的语法色，和钩子紫分得开：状态同变量、引用同常量、性能同数字、上下文同类型、并发同字符串
|
||||||
const ROLE = {
|
const ROLE = {
|
||||||
state: { label: "状态", icon: "toggle-right" },
|
state: { label: "状态", icon: "toggle-right", color: "#9cdcfe" },
|
||||||
effect: { label: "副作用", icon: "zap" },
|
effect: { label: "副作用", icon: "zap", color: "#e5c07b" },
|
||||||
ref: { label: "引用", icon: "anchor" },
|
ref: { label: "引用", icon: "anchor", color: "#4fc1ff" },
|
||||||
perf: { label: "性能", icon: "sigma" },
|
perf: { label: "性能", icon: "sigma", color: "#b5cea8" },
|
||||||
context: { label: "上下文", icon: "share-2" },
|
context: { label: "上下文", icon: "share-2", color: "#4ec9b0" },
|
||||||
concurrent: { label: "并发", icon: "hourglass" },
|
concurrent: { label: "并发", icon: "hourglass", color: "#ce9178" },
|
||||||
};
|
};
|
||||||
|
|
||||||
// 所有钩子卡片同一个标签列宽，最长的标签是上下文的「没有外层提供时」
|
// 所有钩子卡片同一个标签列宽，最长的标签是上下文的「没有外层提供时」
|
||||||
@@ -879,7 +880,7 @@ function hookCall(parent, w, h) {
|
|||||||
const tint = h.own ? ORIGIN.own : h.lib ? ORIGIN.library : ORIGIN.react;
|
const tint = h.own ? ORIGIN.own : h.lib ? ORIGIN.library : ORIGIN.react;
|
||||||
const icons = [{ name: HOOK.icon, color: HOOK.color, tip: HOOK.label }];
|
const icons = [{ name: HOOK.icon, color: HOOK.color, tip: HOOK.label }];
|
||||||
if (h.role)
|
if (h.role)
|
||||||
icons.push({ name: h.role.icon, color: C.desc, tip: h.roleTip || h.role.label, bubble: h.bubble });
|
icons.push({ name: h.role.icon, color: h.role.color, tip: h.roleTip || h.role.label, bubble: h.bubble });
|
||||||
const ctx = card(parent, HOOK, w, { name: h.name + " · " + h.target, fold: h.fold ? "closed" : null, labelW: HOOK_LABEL_W, tint, icons });
|
const ctx = card(parent, HOOK, w, { name: h.name + " · " + h.target, fold: h.fold ? "closed" : null, labelW: HOOK_LABEL_W, tint, icons });
|
||||||
const line = row(ctx.content, "Prop / 钩子", { gap: 12, align: "start" });
|
const line = row(ctx.content, "Prop / 钩子", { gap: 12, align: "start" });
|
||||||
const key = row(line, "Key", { width: ctx.labelW, height: 20 });
|
const key = row(line, "Key", { width: ctx.labelW, height: 20 });
|
||||||
|
|||||||
@@ -6931,7 +6931,7 @@
|
|||||||
"fill": [
|
"fill": [
|
||||||
{
|
{
|
||||||
"type": "solid",
|
"type": "solid",
|
||||||
"color": "#9d9d9d"
|
"color": "#9cdcfe"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
@@ -9213,7 +9213,7 @@
|
|||||||
"fill": [
|
"fill": [
|
||||||
{
|
{
|
||||||
"type": "solid",
|
"type": "solid",
|
||||||
"color": "#9d9d9d"
|
"color": "#e5c07b"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
@@ -15066,7 +15066,7 @@
|
|||||||
"fill": [
|
"fill": [
|
||||||
{
|
{
|
||||||
"type": "solid",
|
"type": "solid",
|
||||||
"color": "#9d9d9d"
|
"color": "#4ec9b0"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
@@ -17497,7 +17497,7 @@
|
|||||||
"fill": [
|
"fill": [
|
||||||
{
|
{
|
||||||
"type": "solid",
|
"type": "solid",
|
||||||
"color": "#9d9d9d"
|
"color": "#9cdcfe"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
@@ -19331,7 +19331,7 @@
|
|||||||
"fill": [
|
"fill": [
|
||||||
{
|
{
|
||||||
"type": "solid",
|
"type": "solid",
|
||||||
"color": "#9d9d9d"
|
"color": "#9cdcfe"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
@@ -21549,7 +21549,7 @@
|
|||||||
"fill": [
|
"fill": [
|
||||||
{
|
{
|
||||||
"type": "solid",
|
"type": "solid",
|
||||||
"color": "#9d9d9d"
|
"color": "#ce9178"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
@@ -22501,7 +22501,7 @@
|
|||||||
"fill": [
|
"fill": [
|
||||||
{
|
{
|
||||||
"type": "solid",
|
"type": "solid",
|
||||||
"color": "#9d9d9d"
|
"color": "#4fc1ff"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
@@ -24316,7 +24316,7 @@
|
|||||||
"fill": [
|
"fill": [
|
||||||
{
|
{
|
||||||
"type": "solid",
|
"type": "solid",
|
||||||
"color": "#9d9d9d"
|
"color": "#4fc1ff"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
@@ -26384,7 +26384,7 @@
|
|||||||
"fill": [
|
"fill": [
|
||||||
{
|
{
|
||||||
"type": "solid",
|
"type": "solid",
|
||||||
"color": "#9d9d9d"
|
"color": "#b5cea8"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
@@ -28168,7 +28168,7 @@
|
|||||||
"fill": [
|
"fill": [
|
||||||
{
|
{
|
||||||
"type": "solid",
|
"type": "solid",
|
||||||
"color": "#9d9d9d"
|
"color": "#b5cea8"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
@@ -30266,7 +30266,7 @@
|
|||||||
"fill": [
|
"fill": [
|
||||||
{
|
{
|
||||||
"type": "solid",
|
"type": "solid",
|
||||||
"color": "#9d9d9d"
|
"color": "#e5c07b"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
@@ -32072,7 +32072,7 @@
|
|||||||
"fill": [
|
"fill": [
|
||||||
{
|
{
|
||||||
"type": "solid",
|
"type": "solid",
|
||||||
"color": "#9d9d9d"
|
"color": "#e5c07b"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
@@ -33656,7 +33656,7 @@
|
|||||||
"fill": [
|
"fill": [
|
||||||
{
|
{
|
||||||
"type": "solid",
|
"type": "solid",
|
||||||
"color": "#9d9d9d"
|
"color": "#e5c07b"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in new issue
Block a user