fix(react): fix CompositePanel

alibaba · Oct 8, 2021 · 03eb84d · 03eb84d
1 parent b4056d2
commit 03eb84d
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 12 deletions.
diff --git a/packages/react/src/panels/CompositePanel.tsx b/packages/react/src/panels/CompositePanel.tsx
@@ -10,13 +10,14 @@ export interface ICompositePanelProps {
   defaultOpen?: boolean
   defaultPinning?: boolean
   defaultActiveKey?: number
-  activeKey?: number
+  activeKey?: number | string
   onChange?: (activeKey: number) => void
 }
 export interface ICompositePanelItemProps {
   shape?: 'tab' | 'button' | 'link'
   title?: React.ReactNode
   icon?: React.ReactNode
+  key?: number | string
   href?: string
   onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
   extra?: React.ReactNode
@@ -27,22 +28,35 @@ const parseItems = (
 ): React.PropsWithChildren<ICompositePanelItemProps>[] => {
   const items = []
   React.Children.forEach(children, (child) => {
-    if (child['type'] === CompositePanel.Item) {
-      items.push(child['props'])
+    if (child?.['type'] === CompositePanel.Item) {
+      items.push({ key: child['key'], ...child['props'] })
     }
   })
   return items
 }
 
+const findItem = (
+  items: React.PropsWithChildren<ICompositePanelItemProps>[],
+  key: string | number
+) => {
+  for (let index = 0; index < items.length; index++) {
+    const item = items[index]
+    if (key === index) return item
+    if (key === item.key) return item
+  }
+}
+
 export const CompositePanel: React.FC<ICompositePanelProps> & {
   Item?: React.FC<ICompositePanelItemProps>
 } = (props) => {
   const prefix = usePrefix('composite-panel')
-  const [activeKey, setActiveKey] = useState(props.defaultActiveKey ?? 0)
+  const [activeKey, setActiveKey] = useState<string | number>(
+    props.defaultActiveKey ?? 0
+  )
   const [pinning, setPinning] = useState(props.defaultPinning ?? false)
   const [visible, setVisible] = useState(props.defaultOpen ?? true)
   const items = parseItems(props.children)
-  const currentItem = items?.[activeKey]
+  const currentItem = findItem(items, activeKey)
   const content = currentItem?.children
 
   useEffect(() => {
@@ -133,7 +147,7 @@ export const CompositePanel: React.FC<ICompositePanelProps> & {
           return (
             <Comp
               className={cls(prefix + '-tabs-pane', {
-                active: activeKey === index,
+                active: activeKey === index || activeKey === item.key,
               })}
               key={index}
               href={item.href}

diff --git a/packages/react/src/widgets/ComponentTreeWidget/index.tsx b/packages/react/src/widgets/ComponentTreeWidget/index.tsx
@@ -30,13 +30,12 @@ export const TreeNodeWidget: React.FC<ITreeNodeWidgetProps> = observer(
       })
     }
     const renderProps = (extendsProps: any = {}) => {
-      if (node?.designerProps?.getComponentProps) {
-        return {
-          ...extendsProps,
-          ...node.designerProps.getComponentProps(node),
-        }
+      return {
+        ...node.designerProps?.defaultProps,
+        ...extendsProps,
+        ...node.props,
+        ...node.designerProps?.getComponentProps?.(node),
       }
-      return { ...extendsProps, ...node.props }
     }
     const renderComponent = () => {
       const componentName = node.componentName