79 lines
2.0 KiB
TypeScript
79 lines
2.0 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { IPropMeta } from "../types";
|
|
|
|
interface IProps {
|
|
propList: IPropMeta[];
|
|
}
|
|
|
|
type IHeader = {
|
|
[key: string]: string;
|
|
};
|
|
|
|
/**
|
|
* 可以拓展更多的annotation tag
|
|
*/
|
|
const tableHeader: IHeader = {
|
|
name: "参数名",
|
|
description: "说明",
|
|
type: "类型",
|
|
default: "默认值",
|
|
required: "必须",
|
|
version: "版本",
|
|
};
|
|
|
|
export default function ApiTable(props: IProps) {
|
|
const [propList, setPropList] = useState<IPropMeta[]>([]);
|
|
|
|
useEffect(() => {
|
|
props.propList?.length > 0 ? setPropList(props.propList) : setPropList([]);
|
|
}, [props.propList]);
|
|
|
|
const format = (prop: string, v: any) => {
|
|
if (prop === "version") return !v ? "" : "v" + v;
|
|
if (typeof v === "boolean") return !v ? "" : "" + v;
|
|
return v;
|
|
};
|
|
|
|
return (
|
|
<div className="anchor-api-table api-table-container">
|
|
<h1>API</h1>
|
|
<table className="api-table">
|
|
<thead>
|
|
<tr>
|
|
{Object.keys(tableHeader).map((prop) => {
|
|
return (
|
|
<th key={prop}>
|
|
<div>{tableHeader[prop]}</div>
|
|
{/* <div className="annotation-prop">@{prop}</div> */}
|
|
</th>
|
|
);
|
|
})}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{propList?.length > 0 ? (
|
|
propList.map((m) => {
|
|
return (
|
|
<tr key={m.name}>
|
|
{Object.keys(tableHeader).map((prop) => {
|
|
return <td key={prop}>{format(prop, (m as any)[prop])}</td>;
|
|
})}
|
|
</tr>
|
|
);
|
|
})
|
|
) : (
|
|
<tr key={"without-data"}>
|
|
<td
|
|
style={{ textAlign: "center", fontWeight: "normal" }}
|
|
colSpan={Object.keys(tableHeader).length}
|
|
>
|
|
该组件 props.ts 缺失, 或未定义任何 interface
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
}
|