feat: replace radio with segmented

canyon-project · Sep 16, 2024 · 2fe0908 · 2fe0908
1 parent 76b6c44
commit 2fe0908
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 16 deletions.
diff --git a/packages/canyon-platform/src/auto-imports.d.ts b/packages/canyon-platform/src/auto-imports.d.ts
@@ -34,6 +34,7 @@ declare global {
   const Result: (typeof import("antd"))["Result"]
   const Route: typeof import('react-router-dom')['Route']
   const Routes: typeof import('react-router-dom')['Routes']
+  const Segmented: typeof import('antd')['Segmented']
   const Select: typeof import('antd')['Select']
   const Space: typeof import('antd')['Space']
   const Spin: typeof import('antd')['Spin']

diff --git a/packages/canyon-platform/src/components/CanyonReport/Control.tsx b/packages/canyon-platform/src/components/CanyonReport/Control.tsx
@@ -1,6 +1,6 @@
-import { SearchOutlined } from "@ant-design/icons";
-import { useParams } from "react-router-dom";
+import Icon, { BarsOutlined, SearchOutlined } from "@ant-design/icons";
 import PrepareProdFn from "@/components/CanyonReport/PrepareProdFn.tsx";
+import PhTreeView from "@/components/CanyonReport/PhTreeView.tsx";
 
 const { useToken } = theme;
 
@@ -13,29 +13,32 @@ const CanyonReportControl = ({
   onChangeShowMode,
   showMode,
 }) => {
-  const { token } = useToken();
-  const prm = useParams();
   const { t } = useTranslation();
   return (
     <>
       <div className={"flex mb-2 justify-between"}>
         <div className={"flex gap-2 flex-col"}>
           <Space>
-            <Radio.Group
-              size={"small"}
+            <Segmented
+              value={showMode}
               defaultValue={showMode}
-              buttonStyle="solid"
               onChange={(v) => {
-                onChangeShowMode(v.target.value);
+                onChangeShowMode(v);
               }}
-            >
-              <Radio.Button value="tree">
-                {t("projects.detail.code.tree")}
-              </Radio.Button>
-              <Radio.Button value="list">
-                {t("projects.detail.file.list")}
-              </Radio.Button>
-            </Radio.Group>
+              options={[
+                {
+                  label: t("projects.detail.code.tree"),
+                  value: "tree",
+                  icon: <Icon component={PhTreeView} />,
+                },
+                {
+                  label: t("projects.detail.file.list"),
+                  value: "list",
+                  icon: <BarsOutlined />,
+                },
+              ]}
+            />
+
             <span style={{ fontSize: "14px" }}>
               {/*<span className={'mr-2'}>{numberFiles}</span>*/}
               {t("projects.detail.total.files", { msg: numberFiles })}

diff --git a/packages/canyon-platform/src/components/CanyonReport/PhTreeView.tsx b/packages/canyon-platform/src/components/CanyonReport/PhTreeView.tsx
@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+
+export default function PhTreeView(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 256 256"
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        d="M176 152h32a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-32a16 16 0 0 0-16 16v8H88V80h8a16 16 0 0 0 16-16V32a16 16 0 0 0-16-16H64a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h8v112a24 24 0 0 0 24 24h64v8a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-32a16 16 0 0 0-16 16v8H96a8 8 0 0 1-8-8v-64h72v8a16 16 0 0 0 16 16M64 32h32v32H64Zm112 160h32v32h-32Zm0-88h32v32h-32Z"
+      ></path>
+    </svg>
+  );
+}