@hsu-react/ui 0.0.2 → 0.0.4

package/src/components/Switch/index.tsx

@@ -1,6 +1,7 @@
 import { SwitchProps as AntSwitchProps, Switch as AntSwitch } from "antd";
 import React from "react";
 import { SelectOption } from "../Select";
+import styles from "./index.module.less";
 
 export interface SwitchProps extends AntSwitchProps {
   options?: SelectOption[];
@@ -19,17 +20,19 @@ const Switch: React.FC<SwitchProps> = (props) => {
   } = props;
 
   return (
-    <AntSwitch
-      {...rest}
-      checkedChildren={
-        checkedChildren ||
-        options?.find((item) => item.value === trueValue)?.label
-      }
-      unCheckedChildren={
-        unCheckedChildren ||
-        options?.find((item) => item.value === falseValue)?.label
-      }
-    />
+    <span className={styles.SwitchWrapper}>
+      <AntSwitch
+        {...rest}
+        checkedChildren={
+          checkedChildren ||
+          options?.find((item) => item.value === trueValue)?.label
+        }
+        unCheckedChildren={
+          unCheckedChildren ||
+          options?.find((item) => item.value === falseValue)?.label
+        }
+      />
+    </span>
   );
 };
 

package/src/components/TabBar/index.md

@@ -16,7 +16,7 @@ title: TabBar 标签栏
 import { TabBar } from "@hsu-react/ui";
 ```
 
-## 基础用法
+## 默认样式
 
 通过 `tabGroup` 配置页签，`onTabChange` 监听切换。
 
@@ -24,6 +24,27 @@ import { TabBar } from "@hsu-react/ui";
 import React, { useState } from "react";
 import { TabBar } from "@hsu-react/ui";
 
+export default () => {
+  const [tab, setTab] = useState<string | number>("1");
+
+  const tabGroup = [
+    { title: "全部", key: "1" },
+    { title: "进行中", key: "2" },
+    { title: "已完成", key: "3" },
+  ];
+
+  return <TabBar tabGroup={tabGroup} tab={tab} onTabChange={setTab} />;
+};
+```
+
+## 描边样式
+
+`variant="outline"` 渲染为描边胶囊样式。
+
+```tsx
+import React, { useState } from "react";
+import { TabBar } from "@hsu-react/ui";
+
 export default () => {
   const [tab, setTab] = useState<string | number>("1");
 
@@ -34,16 +55,12 @@ export default () => {
   ];
 
   return (
-    <div>
-      <TabBar tabGroup={tabGroup} tab={tab} onTabChange={setTab} />
-      <TabBar
-        variant="outline"
-        tabGroup={tabGroup}
-        defaultTab="1"
-        className="demo-tabbar-outline"
-      />
-      <p style={{ marginTop: 12 }}>当前选中：{tab}</p>
-    </div>
+    <TabBar
+      variant="outline"
+      tabGroup={tabGroup}
+      tab={tab}
+      onTabChange={setTab}
+    />
   );
 };
 ```

package/src/components/Table/index.md

@@ -16,7 +16,7 @@ title: Table 表格
 import { Table } from "@hsu-react/ui";
 ```
 
-## 基础用法
+## 表格
 
 ```tsx
 import React from "react";

package/src/components/Tags/index.md

@@ -16,7 +16,7 @@ title: Tags 标签
 import { Tags } from "@hsu-react/ui";
 ```
 
-## 基础用法
+## 标签
 
 ```tsx
 import React from "react";

package/src/components/TextEllipsis/index.md

@@ -16,7 +16,7 @@ title: TextEllipsis 文本省略
 import { TextEllipsis } from "@hsu-react/ui";
 ```
 
-## 基础用法
+## 文本省略
 
 ```tsx
 import React from "react";

package/src/components/Tree/index.md

@@ -16,7 +16,7 @@ title: Tree 树形控件
 import { Tree } from "@hsu-react/ui";
 ```
 
-## 基础用法
+## 树形控件
 
 通过 `treeData` 传入树数据，开启 `search` 即可在标题栏内搜索过滤节点。
 

package/src/components/Upload/index.md

@@ -16,7 +16,7 @@ title: Upload 上传
 import { Upload } from "@hsu-react/ui";
 ```
 
-## 基础用法
+## 上传
 
 > 演示用的 `action` 为占位地址，真实使用时需替换为可用的上传接口（普通上传用 `action`，分片上传用 `chunkAction` / `mergeChunkAction`）。