fix(react): fix CompositePanel

alibaba · Oct 8, 2021 · f64a5aa · f64a5aa
1 parent 06f1299
commit f64a5aa
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 7 deletions.
diff --git a/packages/react/src/panels/CompositePanel.tsx b/packages/react/src/panels/CompositePanel.tsx
@@ -11,7 +11,7 @@ export interface ICompositePanelProps {
   defaultPinning?: boolean
   defaultActiveKey?: number
   activeKey?: number | string
-  onChange?: (activeKey: number) => void
+  onChange?: (activeKey: number | string) => void
 }
 export interface ICompositePanelItemProps {
   shape?: 'tab' | 'button' | 'link'
@@ -27,9 +27,9 @@ const parseItems = (
   children: React.ReactNode
 ): React.PropsWithChildren<ICompositePanelItemProps>[] => {
   const items = []
-  React.Children.forEach(children, (child) => {
+  React.Children.forEach(children, (child, index) => {
     if (child?.['type'] === CompositePanel.Item) {
-      items.push({ key: child['key'], ...child['props'] })
+      items.push({ key: child['key'] ?? index, ...child['props'] })
     }
   })
   return items
@@ -161,7 +161,7 @@ export const CompositePanel: React.FC<ICompositePanelProps> & {
                   setActiveKey(index)
                 }
                 item.onClick?.(e)
-                props.onChange?.(index)
+                props.onChange?.(item.key ?? index)
               }}
             >
               {takeTab()}

diff --git a/packages/react/src/panels/styles.less b/packages/react/src/panels/styles.less
@@ -66,7 +66,6 @@
     display: flex;
     flex-direction: column;
     background-color: var(--dn-composite-panel-tabs-bg-color);
-    border-right: 1px solid var(--dn-panel-border-color);
     z-index: 2;
     position: relative;
 
@@ -99,7 +98,7 @@
           left: 0;
           display: block;
           content: '';
-          width: 2px;
+          width: 3px;
           height: 100%;
           background-color: var(--dn-composite-panel-tabs-hover-color);
         }
@@ -182,7 +181,7 @@
 
     .@{prefix-cls}-composite-panel-tabs-pane.active:after {
       left: auto;
-      right: -1px;
+      right: 0px;
     }
 
     .@{prefix-cls}-composite-panel-tabs-content.pinning {