From 4fe21ed0fcf607fa8734b2c01d490db40e1847ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=B6=E9=9B=85=E9=98=81?=
 <taoyage@taoyages-MacBook-Pro.local>
Date: Wed, 13 Jul 2022 16:24:27 +0800
Subject: [PATCH] feat: add sidebar

---
 packages/sidebar/index.tsx         | 18 +++++++++-
 packages/sidebar/sidebar-item.tsx  | 16 +++++++++
 packages/sidebar/sidebar.tsx       | 58 ++++++++++++++++++++++++++++++
 packages/sidebar/styles/index.scss | 10 ++++++
 packages/tabs/index.tsx            | 12 +++----
 packages/tabs/styles/index.scss    | 12 +++----
 packages/tabs/tab.tsx              |  2 +-
 7 files changed, 114 insertions(+), 14 deletions(-)
 create mode 100644 packages/sidebar/sidebar-item.tsx
 create mode 100644 packages/sidebar/sidebar.tsx

diff --git a/packages/sidebar/index.tsx b/packages/sidebar/index.tsx
index aaf4046..1108e6d 100644
--- a/packages/sidebar/index.tsx
+++ b/packages/sidebar/index.tsx
@@ -1 +1,17 @@
-import React from 'react';
+import InternalSidebar from '@/sidebar/sidebar';
+import SidebarItem from '@/sidebar/sidebar-item';
+
+export type { SidebarProps } from '@/sidebar/sidebar';
+export type { SidebarItemProps } from '@/sidebar/sidebar-item';
+
+type InternalSidebarType = typeof InternalSidebar;
+
+export interface SidebarInterface extends InternalSidebarType {
+  Item: typeof SidebarItem;
+}
+
+const Sidebar = InternalSidebar as SidebarInterface;
+
+Sidebar.Item = SidebarItem;
+
+export default Sidebar;
diff --git a/packages/sidebar/sidebar-item.tsx b/packages/sidebar/sidebar-item.tsx
new file mode 100644
index 0000000..2a2ccfe
--- /dev/null
+++ b/packages/sidebar/sidebar-item.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+export interface SidebarItemProps {
+  key: string;
+  title: React.ReactNode;
+  className?: string;
+  children: React.ReactNode;
+}
+
+const SidebarItem: React.FC<SidebarItemProps> = React.memo((props) => {
+  return props.children as React.ReactElement;
+});
+
+SidebarItem.displayName = 'SidebarItem';
+
+export default SidebarItem;
diff --git a/packages/sidebar/sidebar.tsx b/packages/sidebar/sidebar.tsx
new file mode 100644
index 0000000..be7b9ff
--- /dev/null
+++ b/packages/sidebar/sidebar.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import cx from 'classnames';
+
+import SidebarItem from '@/sidebar/sidebar-item';
+
+export interface SidebarProps {
+  activeKey: string;
+  onChange?: (key: string) => void;
+  children?: React.ReactNode;
+}
+
+const classPrefix = `ygm-sidebar`;
+
+const Sidebar: React.FC<SidebarProps> = React.memo((props) => {
+  const [activeKey, setActiveKey] = React.useState<string>(props.activeKey);
+
+  const items: React.ReactElement<React.ComponentProps<typeof SidebarItem>>[] = [];
+
+  React.Children.forEach(props.children, (child) => {
+    if (!React.isValidElement(child)) return;
+    if (!child.key) return;
+    items.push(child);
+  });
+
+  const onItem = React.useCallback(() => {}, []);
+
+  return (
+    <div className={classPrefix}>
+      <div className={`${classPrefix}-items`}>
+        {items.map((item) => {
+          const active = item.key === activeKey;
+
+          return (
+            <div
+              className={cx(`${classPrefix}-item`, {
+                [`${classPrefix}-item-active`]: active,
+              })}
+              key={item.key}
+              onClick={onItem}
+            >
+              <div className={`${classPrefix}-item-title`}>{item.props.title}</div>
+            </div>
+          );
+        })}
+      </div>
+
+      {items.map((item) => (
+        <div key={item.key} className={`${classPrefix}-content`}>
+          {item.props.children}
+        </div>
+      ))}
+    </div>
+  );
+});
+
+Sidebar.displayName = 'Sidebar';
+
+export default Sidebar;
diff --git a/packages/sidebar/styles/index.scss b/packages/sidebar/styles/index.scss
index e69de29..9edfb43 100644
--- a/packages/sidebar/styles/index.scss
+++ b/packages/sidebar/styles/index.scss
@@ -0,0 +1,10 @@
+@import '../../styles/variable.scss';
+
+$class-prefix-space: 'ygm-sidebar';
+
+.#{$class-prefix-tabs} {
+  --height: 100%;
+  --width: 105px;
+  --item-border-radius: 8px;
+  --background-color: ;
+}
diff --git a/packages/tabs/index.tsx b/packages/tabs/index.tsx
index a3a301b..043bb8e 100644
--- a/packages/tabs/index.tsx
+++ b/packages/tabs/index.tsx
@@ -1,17 +1,17 @@
-import Tabs from '@/tabs/tabs';
+import InternalTabs from '@/tabs/tabs';
 import Tab from '@/tabs/tab';
 
 export type { TabsProps } from '@/tabs/tabs';
 export type { TabProps } from '@/tabs/tab';
 
-type TTabs = typeof Tabs;
+type InternalTabsType = typeof InternalTabs;
 
-export interface ITabs extends TTabs {
+export interface TabsInterface extends InternalTabsType {
   Tab: typeof Tab;
 }
 
-const MyTabs: ITabs = Tabs as ITabs;
+const Tabs = InternalTabs as TabsInterface;
 
-MyTabs.Tab = Tab;
+Tabs.Tab = Tab;
 
-export default MyTabs;
+export default Tabs;
diff --git a/packages/tabs/styles/index.scss b/packages/tabs/styles/index.scss
index 19bb9dc..b896725 100644
--- a/packages/tabs/styles/index.scss
+++ b/packages/tabs/styles/index.scss
@@ -1,8 +1,8 @@
 @import '../../styles/variable.scss';
 
-$class-prefix-space: 'ygm-tabs';
+$class-prefix-tabs: 'ygm-tabs';
 
-.#{$class-prefix-space} {
+.#{$class-prefix-tabs} {
   position: relative;
   user-select: none;
 
@@ -19,10 +19,10 @@ $class-prefix-space: 'ygm-tabs';
     }
 
     &-card {
-      .#{$class-prefix-space}-tab-active {
+      .#{$class-prefix-tabs}-tab-active {
         background: $ygm-color-primary;
 
-        .#{$class-prefix-space}-tab-title {
+        .#{$class-prefix-tabs}-tab-title {
           color: $ygm-color-white;
         }
       }
@@ -30,7 +30,7 @@ $class-prefix-space: 'ygm-tabs';
 
     &-card {
       background-color: $ygm-border-color;
-      .#{$class-prefix-space}-tab-title {
+      .#{$class-prefix-tabs}-tab-title {
         color: #838a96;
       }
     }
@@ -51,7 +51,7 @@ $class-prefix-space: 'ygm-tabs';
     }
 
     &-active {
-      .#{$class-prefix-space}-tab-title {
+      .#{$class-prefix-tabs}-tab-title {
         color: $ygm-color-primary;
       }
     }
diff --git a/packages/tabs/tab.tsx b/packages/tabs/tab.tsx
index 4162baa..60df46e 100644
--- a/packages/tabs/tab.tsx
+++ b/packages/tabs/tab.tsx
@@ -8,7 +8,7 @@ export interface TabProps {
 }
 
 const Tab: React.FC<TabProps> = React.memo((props) => {
-  return <div>{props.children}</div>;
+  return props.children as React.ReactElement;
 });
 
 Tab.displayName = 'Tab';