@rsdoctor/components 0.4.13 → 1.0.0-alpha.0

package/dist/components/Loader/Analysis/files.js

@@ -12,10 +12,13 @@ import {
   Space,
   Table,
   Tooltip,
-  Typography
+  Typography,
+  List,
+  Popover
 } from "antd";
 import { CloseCircleOutlined } from "@ant-design/icons";
 import { SDK } from "@rsdoctor/types";
+import styles from "./style.module";
 import { ServerAPIProvider } from "../../Manifest";
 import { drawerWidth, Size } from "../../../constants";
 import {
@@ -28,6 +31,8 @@ import {
 import { LoaderExecutions } from "../executions";
 import { FileTree } from "../../FileTree";
 import { Keyword } from "../../Keyword";
+const ADDITION_LOADER_NUMBER = 3;
+const { innerWidth } = window;
 const LoaderFiles = (props) => {
   const { cwd, filetree } = props;
   const [drawerVisible, setDrawerVisible] = useState(false);
@@ -62,53 +67,105 @@ const LoaderFiles = (props) => {
       cwd,
       fileTitle(file, basename) {
         const { loaders, layer } = filetree.find((e) => e.path === file);
+        const additionalLoaders = [];
+        loaders.forEach(
+          (l, i) => i > ADDITION_LOADER_NUMBER && additionalLoaders.push(l)
+        );
         return /* @__PURE__ */ jsxs(
           Space,
           {
-            style: { wordBreak: "break-all" },
+            style: { wordBreak: "break-all", height: 40 },
             onClick: () => {
               setLoaderIndex(0);
               setResourcePath(file);
               setDrawerVisible(true);
             },
             children: [
-              /* @__PURE__ */ jsx(
-                Keyword,
+              /* @__PURE__ */ jsxs(
+                "div",
                 {
-                  text: basename.replace(/\[.*?\]/g, ""),
-                  keyword: props.filename
+                  className: styles.box,
+                  style: {
+                    width: innerWidth < 1500 ? innerWidth * 0.3 : innerWidth * 0.5
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx("div", { className: styles.keywords, children: /* @__PURE__ */ jsx(
+                      Keyword,
+                      {
+                        text: basename.replace(/\[.*?\]/g, ""),
+                        keyword: props.filename
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx("div", { className: styles.dividerDiv, children: /* @__PURE__ */ jsx(Divider, { className: styles.divider, dashed: true }) })
+                  ]
                 }
               ),
               layer ? /* @__PURE__ */ jsx(Tag, { color: "cyan", bordered: false, children: layer }) : /* @__PURE__ */ jsx(Fragment, {}),
-              loaders.map((e, i) => {
+              loaders.slice(0, ADDITION_LOADER_NUMBER).map((e, i) => {
                 const isError = e.errors && e.errors.length;
                 const key = `${file}_${e.loader}_${i}`;
-                return /* @__PURE__ */ jsx(Tooltip, { title: e.path, children: /* @__PURE__ */ jsxs(
-                  Typography.Text,
-                  {
-                    code: true,
-                    style: { color: isError ? "#f50" : "inherit" },
-                    onClick: (ev) => {
-                      ev.stopPropagation();
-                      setResourcePath(file);
-                      setLoaderIndex(i);
-                      setDrawerVisible(true);
-                    },
-                    children: [
-                      /* @__PURE__ */ jsx(
-                        Typography.Text,
-                        {
-                          style: { maxWidth: 135, color: "inherit" },
-                          ellipsis: true,
-                          children: e.loader
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(Divider, { type: "vertical" }),
-                      isError ? /* @__PURE__ */ jsx(CloseCircleOutlined, {}) : /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: formatCosts(e.costs) })
-                    ]
-                  }
-                ) }, key);
-              })
+                if (i <= ADDITION_LOADER_NUMBER) {
+                  return /* @__PURE__ */ jsx(Tooltip, { title: e.path, children: /* @__PURE__ */ jsx("div", { style: { paddingBottom: 5 }, children: /* @__PURE__ */ jsxs(
+                    Typography.Text,
+                    {
+                      className: styles.textBox,
+                      style: { color: isError ? "#f50" : "inherit" },
+                      onClick: (ev) => {
+                        ev.stopPropagation();
+                        setResourcePath(file);
+                        setLoaderIndex(i);
+                        setDrawerVisible(true);
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(Typography.Text, { className: styles.text, ellipsis: true, children: e.loader.match(/([^/]+-loader)/g)?.[0] || e.loader }),
+                        /* @__PURE__ */ jsx(Divider, { type: "vertical" }),
+                        isError ? /* @__PURE__ */ jsx(CloseCircleOutlined, {}) : /* @__PURE__ */ jsx(Typography.Text, { className: styles.text, children: formatCosts(e.costs) })
+                      ]
+                    }
+                  ) }) }, key);
+                }
+              }),
+              additionalLoaders?.length ? /* @__PURE__ */ jsx(
+                Popover,
+                {
+                  content: /* @__PURE__ */ jsx(
+                    List,
+                    {
+                      dataSource: additionalLoaders,
+                      renderItem: (e, i) => {
+                        const isError = e.errors && e.errors.length;
+                        const key = `${file}_${e.loader}_${i + ADDITION_LOADER_NUMBER}`;
+                        return /* @__PURE__ */ jsx(List.Item, { children: /* @__PURE__ */ jsx(Tooltip, { title: e.path, children: /* @__PURE__ */ jsx("div", { style: { paddingBottom: 5 }, children: /* @__PURE__ */ jsxs(
+                          Typography.Text,
+                          {
+                            className: styles.textBox,
+                            style: { color: isError ? "#f50" : "inherit" },
+                            onClick: (ev) => {
+                              ev.stopPropagation();
+                              setResourcePath(file);
+                              setLoaderIndex(i);
+                              setDrawerVisible(true);
+                            },
+                            children: [
+                              /* @__PURE__ */ jsx(
+                                Typography.Text,
+                                {
+                                  className: styles.text,
+                                  ellipsis: true,
+                                  children: e.loader.match(/([^/]+-loader)/g)?.[0] || e.loader
+                                }
+                              ),
+                              /* @__PURE__ */ jsx(Divider, { type: "vertical" }),
+                              /* @__PURE__ */ jsx(Typography.Text, { className: styles.text, children: formatCosts(e.costs) })
+                            ]
+                          }
+                        ) }) }, key) });
+                      }
+                    }
+                  ),
+                  children: /* @__PURE__ */ jsx("div", { className: styles.textBox, children: /* @__PURE__ */ jsx(Typography.Text, { children: "···" }) })
+                }
+              ) : /* @__PURE__ */ jsx(Fragment, {})
             ]
           }
         );
@@ -118,15 +175,34 @@ const LoaderFiles = (props) => {
       }
     });
   }, [filteredFiles]);
-  return /* @__PURE__ */ jsxs(Row, { style: { width: "100%" }, gutter: Size.BasePadding, children: [
-    /* @__PURE__ */ jsx(Col, { span: 14, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs(Row, { style: { width: "100%", marginLeft: 0 }, gutter: Size.BasePadding, children: [
+    /* @__PURE__ */ jsx(Col, { span: 24, children: /* @__PURE__ */ jsxs(
       Card,
       {
-        title: /* @__PURE__ */ jsxs(Typography.Text, { strong: true, children: [
-          "Total Files: ",
-          filteredFiles.length
+        title: /* @__PURE__ */ jsxs(Space, { children: [
+          /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: "Files" }),
+          /* @__PURE__ */ jsxs(
+            Typography.Text,
+            {
+              style: {
+                fontSize: 12,
+                fontWeight: 400,
+                color: "#1C1F2399",
+                opacity: 0.6
+              },
+              children: [
+                "Total Files: ",
+                filteredFiles.length
+              ]
+            }
+          )
         ] }),
-        bodyStyle: { overflow: "scroll", maxHeight, height: "40rem" },
+        bodyStyle: {
+          overflow: "scroll",
+          maxHeight,
+          height: "40rem",
+          padding: 14
+        },
         children: [
           /* @__PURE__ */ jsx(
             FileTree,
@@ -174,80 +250,90 @@ const LoaderFiles = (props) => {
         ]
       }
     ) }),
-    selectedNode ? /* @__PURE__ */ jsx(Col, { span: 10, children: /* @__PURE__ */ jsx(
-      Card,
+    /* @__PURE__ */ jsx(
+      Drawer,
       {
-        title: /* @__PURE__ */ jsx(
-          Tooltip,
+        open: !!selectedNode,
+        onClose: () => setSelectedNode(null),
+        maskClosable: true,
+        width: drawerWidth,
+        zIndex: 999,
+        bodyStyle: { padding: 0 },
+        children: selectedNode && /* @__PURE__ */ jsx(Row, { children: /* @__PURE__ */ jsx(Col, { span: 24, children: /* @__PURE__ */ jsx(
+          Card,
           {
-            title: React.cloneElement(
-              selectedNode.title,
-              { style: { color: "#fff" } }
+            title: /* @__PURE__ */ jsx(
+              Tooltip,
+              {
+                title: React.cloneElement(
+                  selectedNode.title,
+                  { style: { color: "#fff" } }
+                ),
+                children: /* @__PURE__ */ jsxs(Typography.Text, { children: [
+                  `Statistics of`,
+                  selectedNode.title
+                ] })
+              }
             ),
-            children: /* @__PURE__ */ jsxs(Typography.Text, { children: [
-              'Statistics of "',
-              selectedNode.title,
-              '"'
-            ] })
-          }
-        ),
-        children: /* @__PURE__ */ jsx(
-          ServerAPIProvider,
-          {
-            api: SDK.ServerAPI.API.GetLoaderFolderStatistics,
-            body: { folder: selectedNode[inlinedResourcePathKey] },
-            children: (tableData) => /* @__PURE__ */ jsx(
-              Table,
+            children: /* @__PURE__ */ jsx(
+              ServerAPIProvider,
               {
-                style: {
-                  width: "100%",
-                  maxHeight,
-                  height: "40rem",
-                  overflowY: "scroll",
-                  wordBreak: "break-all"
-                },
-                pagination: false,
-                bordered: true,
-                rowKey: (e) => e.loader,
-                columns: [
-                  {
-                    title: "Loader Name",
-                    dataIndex: "loader"
-                  },
+                api: SDK.ServerAPI.API.GetLoaderFolderStatistics,
+                body: { folder: selectedNode[inlinedResourcePathKey] },
+                children: (tableData) => /* @__PURE__ */ jsx(
+                  Table,
                   {
-                    title: "Files",
-                    dataIndex: "files"
-                  },
-                  {
-                    title: "Total Duration",
-                    dataIndex: "costs",
-                    render: (v) => /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: formatCosts(v) }),
-                    sorter: (a, b) => a.costs - b.costs,
-                    defaultSortOrder: "descend",
-                    sortDirections: ["descend", "ascend"]
-                  }
-                ],
-                dataSource: tableData,
-                footer: () => /* @__PURE__ */ jsxs(
-                  Descriptions,
-                  {
-                    title: "Total",
+                    style: {
+                      width: "100%",
+                      maxHeight,
+                      height: "40rem",
+                      overflowY: "scroll",
+                      wordBreak: "break-all"
+                    },
+                    pagination: false,
                     bordered: true,
-                    layout: "vertical",
-                    size: "small",
-                    children: [
-                      /* @__PURE__ */ jsx(Descriptions.Item, { label: "loaders", children: tableData.length }),
-                      /* @__PURE__ */ jsx(Descriptions.Item, { label: "files", children: sumBy(tableData, (e) => e.files) }),
-                      /* @__PURE__ */ jsx(Descriptions.Item, { label: "duration", children: /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: formatCosts(sumBy(tableData, (e) => e.costs)) }) })
-                    ]
+                    rowKey: (e) => e.loader,
+                    columns: [
+                      {
+                        title: "Loader Name",
+                        dataIndex: "loader"
+                      },
+                      {
+                        title: "Files",
+                        dataIndex: "files"
+                      },
+                      {
+                        title: "Total Duration",
+                        dataIndex: "costs",
+                        render: (v) => /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: formatCosts(v) }),
+                        sorter: (a, b) => a.costs - b.costs,
+                        defaultSortOrder: "descend",
+                        sortDirections: ["descend", "ascend"]
+                      }
+                    ],
+                    dataSource: tableData,
+                    footer: () => /* @__PURE__ */ jsxs(
+                      Descriptions,
+                      {
+                        title: "Total",
+                        bordered: true,
+                        layout: "vertical",
+                        size: "small",
+                        children: [
+                          /* @__PURE__ */ jsx(Descriptions.Item, { label: "loaders", children: tableData.length }),
+                          /* @__PURE__ */ jsx(Descriptions.Item, { label: "files", children: sumBy(tableData, (e) => e.files) }),
+                          /* @__PURE__ */ jsx(Descriptions.Item, { label: "duration", children: /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: formatCosts(sumBy(tableData, (e) => e.costs)) }) })
+                        ]
+                      }
+                    )
                   }
                 )
               }
             )
           }
-        )
+        ) }) })
       }
-    ) }) : null
+    )
   ] });
 };
 export {

package/dist/components/Loader/Analysis/index.js

@@ -4,31 +4,48 @@ import { SDK } from "@rsdoctor/types";
 import { ServerAPIProvider, withServerAPI } from "../../Manifest";
 import { LoaderFiles } from "./files";
 import { LoaderCommonSelect } from "../../Select";
+import { ConfigContext } from "../../../config";
+import { ConfigProvider } from "antd";
+import { getLocale } from "../../../utils";
 const LoaderAnalysisBase = ({ cwd }) => {
   const [store, setStore] = useState({
     filename: "",
     loaders: [],
     layer: ""
   });
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx(ServerAPIProvider, { api: SDK.ServerAPI.API.GetLoaderNames, children: (loaderNames) => /* @__PURE__ */ jsx(
-      LoaderCommonSelect,
+  return /* @__PURE__ */ jsx(ConfigContext.Consumer, { children: (v) => {
+    return /* @__PURE__ */ jsx(
+      ConfigProvider,
       {
-        onChange: (e) => setStore(e),
-        loaderNames
+        locale: getLocale(v.locale),
+        theme: {
+          token: {
+            padding: 16,
+            fontSize: 14
+          }
+        },
+        children: /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(ServerAPIProvider, { api: SDK.ServerAPI.API.GetLoaderNames, children: (loaderNames) => /* @__PURE__ */ jsx(
+            LoaderCommonSelect,
+            {
+              onChange: (e) => setStore(e),
+              loaderNames
+            }
+          ) }),
+          /* @__PURE__ */ jsx(ServerAPIProvider, { api: SDK.ServerAPI.API.GetLoaderFileTree, children: (filetree) => /* @__PURE__ */ jsx(
+            LoaderFiles,
+            {
+              filename: store.filename,
+              filetree,
+              loaders: store.loaders,
+              layer: store.layer,
+              cwd
+            }
+          ) })
+        ] })
       }
-    ) }),
-    /* @__PURE__ */ jsx(ServerAPIProvider, { api: SDK.ServerAPI.API.GetLoaderFileTree, children: (filetree) => /* @__PURE__ */ jsx(
-      LoaderFiles,
-      {
-        filename: store.filename,
-        filetree,
-        loaders: store.loaders,
-        layer: store.layer,
-        cwd
-      }
-    ) })
-  ] });
+    );
+  } });
 };
 const LoaderAnalysis = withServerAPI({
   api: SDK.ServerAPI.API.LoadDataByKey,

package/dist/components/Loader/Analysis/input.js

@@ -0,0 +1,11 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+const SvgInput = (props) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: 10, height: 12, fill: "none", viewBox: "0 0 10 12", ...props, children: [
+  /* @__PURE__ */ jsx("path", { fill: "#FAAD14", fillRule: "evenodd", d: "M3.151 7.98h-1.85a.925.925 0 0 1-.924-.925V1.508c0-.511.414-.925.925-.925h7.396c.511 0 .925.414.925.925v5.547c0 .51-.414.924-.925.924H6.85V6.13a1.85 1.85 0 0 0-3.698 0v1.85Z", clipRule: "evenodd" }),
+  /* @__PURE__ */ jsx("path", { fill: "#FAAD14", d: "M4.076 9.829a.925.925 0 0 0 1.849 0V6.13a.925.925 0 0 0-1.85 0V9.83Z" }),
+  /* @__PURE__ */ jsx("path", { fill: "#FAAD14", d: "M5 11.416 7.402 8.92H2.598L5 11.416Z" })
+] });
+var input_default = SvgInput;
+export {
+  input_default as default
+};

package/dist/components/Loader/Analysis/output.js

@@ -0,0 +1,12 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+const SvgOutput = (props) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, fill: "none", viewBox: "0 0 16 16", ...props, children: [
+  /* @__PURE__ */ jsx("rect", { width: 16, height: 16, fill: "#F6FFED", rx: 2 }),
+  /* @__PURE__ */ jsx("path", { fill: "#52C41A", fillRule: "evenodd", d: "M4.302 6.02a.925.925 0 0 0-.925.925v5.547c0 .51.414.925.925.925h7.396c.511 0 .925-.414.925-.925V6.945a.925.925 0 0 0-.925-.925H4.302Zm5.547 0H6.151v1.85a1.85 1.85 0 0 0 3.698 0V6.02Z", clipRule: "evenodd" }),
+  /* @__PURE__ */ jsx("path", { fill: "#52C41A", d: "M7.076 4.171a.925.925 0 0 1 1.849 0V7.87a.925.925 0 0 1-1.85 0V4.171Z" }),
+  /* @__PURE__ */ jsx("path", { fill: "#52C41A", d: "m8 2.583 2.402 2.497H5.598L8 2.583Z" })
+] });
+var output_default = SvgOutput;
+export {
+  output_default as default
+};

package/dist/components/Loader/Analysis/style.module.js

@@ -0,0 +1,5 @@
+import "./style_module.css";
+var style_module_default = { "loaderAnalysis": "loaderAnalysis_85b73", "divider": "divider_85b73", "dividerDiv": "dividerDiv_85b73", "box": "box_85b73", "keyword": "keyword_85b73", "textBox": "textBox_85b73", "text": "text_85b73", "space": "space_85b73", "executions": "executions_85b73", "timeline": "timeline_85b73", "loader": "loader_85b73", "selected": "selected_85b73" };
+export {
+  style_module_default as default
+};

package/dist/components/Loader/Analysis/style_module.css

@@ -0,0 +1,73 @@
+.loaderAnalysis_85b73 .rc-tree-treenode {
+  line-height: 30px;
+}
+
+.divider_85b73 {
+  border-color: rgba(0, 0, 0, 0.12);
+  position: relative;
+  bottom: 20%;
+}
+
+.dividerDiv_85b73 {
+  flex-grow: 1;
+  margin-left: 10px;
+}
+
+.box_85b73 {
+  display: flex;
+  height: 40px;
+}
+.box_85b73 .keyword_85b73 {
+  flex: 0 0 auto;
+  padding-right: 5;
+}
+
+.textBox_85b73 {
+  max-width: 220px;
+  color: rgba(0, 0, 0, 0.85);
+  height: 22px;
+  border: 1px #d9d9d9 solid;
+  justify-content: center;
+  display: flex;
+  padding: 1px 8px 1px 8px;
+  align-items: center;
+  border-radius: 2px;
+  background-color: #fafafa;
+}
+.textBox_85b73 .text_85b73 {
+  font-size: 12px;
+  font-weight: 400;
+  font-family: "Roboto";
+}
+
+.space_85b73 .ant-space-item {
+  display: flex;
+}
+
+.executions_85b73 .timeline_85b73 .box_85b73 {
+  border: 1px solid #eaedf1;
+  border-radius: 8px;
+  width: 80%;
+  height: 74px;
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+}
+.executions_85b73 .timeline_85b73 .box_85b73:active {
+  background-color: #f2f8ff;
+  border: 1px solid #0079ff;
+}
+.executions_85b73 .timeline_85b73 .box_85b73 .ant-typography {
+  color: rgba(0, 0, 0, 0.65);
+  font-size: 14px;
+}
+.executions_85b73 .timeline_85b73 .box_85b73 .loader_85b73 {
+  color: inherit;
+  font-size: 14px;
+  height: 72px;
+  align-content: center;
+}
+.executions_85b73 .timeline_85b73 .selected_85b73 {
+  background-color: #f2f8ff;
+  border: 1px solid #0079ff;
+}