feat(react): improve panels styles

alibaba · Aug 19, 2021 · f78898e · f78898e
1 parent fd915cf
commit f78898e
Show file tree

Hide file tree

Showing 8 changed files with 112 additions and 69 deletions.
diff --git a/packages/react/src/panels/CompositePanel.tsx b/packages/react/src/panels/CompositePanel.tsx
@@ -1,12 +1,23 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
+import { isValid } from '@designable/shared'
 import cls from 'classnames'
 import { IconWidget, TextWidget } from '../widgets'
 import { usePrefix } from '../hooks'
 
+export interface ICompositePanelProps {
+  direction?: 'left' | 'right'
+  defaultOpen?: boolean
+  defaultPinning?: boolean
+  defaultActiveKey?: number
+  activeKey?: number
+  onChange?: (activeKey: number) => void
+}
 export interface ICompositePanelItemProps {
+  shape?: 'tab' | 'button' | 'link'
   title?: React.ReactNode
   icon?: React.ReactNode
   href?: string
+  onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
   extra?: React.ReactNode
 }
 
@@ -22,21 +33,33 @@ const parseItems = (
   return items
 }
 
-export const CompositePanel: React.FC & {
+export const CompositePanel: React.FC<ICompositePanelProps> & {
   Item?: React.FC<ICompositePanelItemProps>
 } = (props) => {
   const prefix = usePrefix('composite-panel')
-  const [activeKey, setActiveKey] = useState(0)
-  const [pinning, setPinning] = useState(false)
-  const [visible, setVisible] = useState(true)
+  const [activeKey, setActiveKey] = useState(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 content = currentItem?.children
 
+  useEffect(() => {
+    if (isValid(props.activeKey)) {
+      if (props.activeKey !== activeKey) {
+        setActiveKey(props.activeKey)
+      }
+    }
+  }, [props.activeKey, activeKey])
+
   const renderContent = () => {
     if (!content || !visible) return
     return (
-      <div className={cls(prefix + '-tabs-content', { pinning })}>
+      <div
+        className={cls(prefix + '-tabs-content', {
+          pinning,
+        })}
+      >
         <div className={prefix + '-tabs-header'}>
           <div className={prefix + '-tabs-header-title'}>
             <TextWidget>{currentItem.title}</TextWidget>
@@ -78,7 +101,11 @@ export const CompositePanel: React.FC & {
   }
 
   return (
-    <div className={prefix}>
+    <div
+      className={cls(prefix, {
+        [`direction-${props.direction}`]: !!props.direction,
+      })}
+    >
       <div className={prefix + '-tabs'}>
         {items.map((item, index) => {
           const takeTab = () => {
@@ -87,23 +114,29 @@ export const CompositePanel: React.FC & {
             }
             return <IconWidget infer={item.icon} />
           }
+          const shape = item.shape ?? 'tab'
+          const Comp = shape === 'link' ? 'a' : 'div'
           return (
-            <div
+            <Comp
               className={cls(prefix + '-tabs-pane', {
                 active: activeKey === index,
               })}
               key={index}
-              onClick={() => {
-                if (index === activeKey) {
-                  setVisible(!visible)
-                } else {
-                  setVisible(true)
+              href={item.href}
+              onClick={(e: any) => {
+                if (shape === 'tab') {
+                  if (index === activeKey) {
+                    setVisible(!visible)
+                  } else {
+                    setVisible(true)
+                  }
+                  setActiveKey(index)
                 }
-                setActiveKey(index)
+                item.onClick?.(e)
               }}
             >
               {takeTab()}
-            </div>
+            </Comp>
           )
         })}
       </div>

diff --git a/packages/react/src/panels/styles.less b/packages/react/src/panels/styles.less
@@ -30,7 +30,7 @@
     flex-shrink: 0;
     justify-content: space-between;
     background: var(--dn-main-panel-header-bg-color);
-    border-bottom: 1px solid var(--dn-main-panel-header-border-color);
+    border-bottom: 1px solid var(--dn-panel-border-color);
     padding: 4px;
 
     &-logo {
@@ -66,7 +66,7 @@
     display: flex;
     flex-direction: column;
     background-color: var(--dn-composite-panel-tabs-bg-color);
-    border-right: 1px solid var(--dn-composite-panel-tabs-content-border-color);
+    border-right: 1px solid var(--dn-panel-border-color);
     z-index: 2;
     position: relative;
 
@@ -103,7 +103,7 @@
 
     &-content {
       width: 300px;
-      border-right: 1px solid var(--dn-composite-panel-tabs-content-border-color);
+      border-right: 1px solid var(--dn-panel-border-color);
       background: var(--dn-composite-panel-tabs-content-bg-color);
       display: flex;
       flex-direction: column;
@@ -125,15 +125,15 @@
       color: var(--dn-composite-panel-tabs-header-color);
       line-height: 18px;
       font-size: 16px;
-      border-bottom: 1px solid var(--dn-composite-panel-tabs-content-border-color);
+      border-bottom: 1px solid var(--dn-panel-border-color);
       display: flex;
       justify-content: space-between;
 
       &-actions {
         display: flex;
         align-items: center;
 
-        &>* {
+        & > * {
           margin-right: 8px;
 
           &:last-child {
@@ -170,6 +170,21 @@
       height: 100%;
     }
   }
+
+  &.direction-right {
+    flex-direction: row-reverse;
+
+    .@{prefix-cls}-composite-panel-tabs-pane.active:after {
+      left: auto;
+      right: -1px;
+    }
+
+    .@{prefix-cls}-composite-panel-tabs-content.pinning {
+      left: auto;
+      right: 100%;
+      top: 0;
+    }
+  }
 }
 
 .@{prefix-cls}-workspace-panel {
@@ -201,7 +216,7 @@
   z-index: 2;
   width: 300px;
   background: var(--dn-composite-panel-tabs-content-bg-color);
-  border-left: 1px solid var(--dn-composite-panel-tabs-content-border-color);
+  border-left: 1px solid var(--dn-panel-border-color);
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -223,15 +238,15 @@
     color: var(--dn-composite-panel-tabs-header-color);
     line-height: 18px;
     font-size: 16px;
-    border-bottom: 1px solid var(--dn-composite-panel-tabs-content-border-color);
+    border-bottom: 1px solid var(--dn-panel-border-color);
     display: flex;
     justify-content: space-between;
 
     &-actions {
       display: flex;
       align-items: center;
 
-      &>* {
+      & > * {
         margin-right: 8px;
 
         &:last-child {
@@ -275,7 +290,7 @@
     transform: translateY(-50%);
     z-index: 2;
     background: var(--dn-composite-panel-tabs-content-bg-color);
-    border: 1px solid var(--dn-composite-panel-tabs-content-border-color);
+    border: 1px solid var(--dn-panel-border-color);
     color: var(--dn-composite-panel-tabs-color);
     box-shadow: 0 0 6px rgb(0 0 0 / 10%);
     border-radius: 3px;
@@ -294,4 +309,4 @@
       transform: rotate(45deg);
     }
   }
-}
+}
diff --git a/packages/react/src/theme.less b/packages/react/src/theme.less
@@ -16,7 +16,6 @@
   --dn-outline-tree-header-border-color: #eee;
   --dn-outline-tree-color: #333;
   --dn-outline-tree-insertion-bg-color: #1890ff;
-  --dn-outline-tree-node-selected-color: #f3f3f3;
   --dn-outline-tree-node-header-color: #333;
   --dn-outline-tree-node-hover-color: #1890ff;
 
@@ -47,25 +46,25 @@
   --dn-aux-selector-btn-active-bg-color: #096dd9;
   --dn-aux-selector-btn-active-border-color: #096dd9;
 
+  --dn-panel-border-color: #ddd;
+  --dn-panel-active-bg-color: #efefef;
+  --dn-drag-source-content-bg-color: #fff;
+
   --dn-composite-panel-tabs-bg-color: #fff;
   --dn-composite-panel-tabs-active-bg-color: #fff;
   --dn-composite-panel-highlight-bg-color: #f0f0f0;
   --dn-composite-panel-tabs-color: #666;
   --dn-composite-panel-tabs-hover-color: #1890ff;
-  --dn-composite-panel-tabs-content-border-color: #eee;
   --dn-composite-panel-tabs-content-bg-color: #fff;
   --dn-composite-panel-tabs-header-color: #666;
 
-  --dn-drag-source-header-border-color: #eee;
   --dn-drag-source-header-color: #888;
   --dn-drag-source-header-hover-color: #333;
-  --dn-drag-source-item-border-color: #aaa;
   --dn-drag-source-item-color: #333;
   --dn-drag-source-item-hover-border-color: #40a9ff;
   --dn-drag-source-item-hover-color: #40a9ff;
 
   --dn-main-panel-header-bg-color: #fff;
-  --dn-main-panel-header-border-color: #eee;
   --dn-workspace-panel-bg-color: #eee;
 
   --dn-scrollbar-color: rgba(0, 0, 0, 0.2);
@@ -124,7 +123,6 @@
   --dn-outline-tree-header-border-color: #333;
   --dn-outline-tree-color: #c7c7c7;
   --dn-outline-tree-insertion-bg-color: #188ffff3;
-  --dn-outline-tree-node-selected-color: #3a3a3a;
   --dn-outline-tree-node-header-color: #ccc;
   --dn-outline-tree-node-hover-color: #c7c7c7;
 
@@ -154,25 +152,24 @@
   --dn-aux-selector-btn-active-bg-color: #096dd9;
   --dn-aux-selector-btn-active-border-color: #096dd9;
 
+  --dn-panel-border-color: #222;
+  --dn-panel-active-bg-color: #3a3a3a;
+  --dn-drag-source-content-bg-color: #2a2a2a;
+
   --dn-composite-panel-tabs-bg-color: #2f2f2f;
   --dn-composite-panel-tabs-active-bg-color: #222;
   --dn-composite-panel-highlight-bg-color: #181818;
   --dn-composite-panel-tabs-color: #aaa;
   --dn-composite-panel-tabs-hover-color: #1890ff;
-  --dn-composite-panel-tabs-content-border-color: #333;
   --dn-composite-panel-tabs-content-bg-color: #222;
   --dn-composite-panel-tabs-header-color: #c7c7c7;
 
-  --dn-drag-source-header-border-color: #333;
   --dn-drag-source-header-color: #aaa;
   --dn-drag-source-header-hover-color: #c7c7c7;
-  --dn-drag-source-item-border-color: #555;
   --dn-drag-source-item-color: #c7c7c7;
-  --dn-drag-source-item-hover-border-color: #1890ff;
   --dn-drag-source-item-hover-color: #1890ff;
 
   --dn-main-panel-header-bg-color: #2f2f2f;
-  --dn-main-panel-header-border-color: #444;
   --dn-workspace-panel-bg-color: #2f2f2f;
 
   --dn-scrollbar-color: #a0a0a054;
@@ -234,23 +231,14 @@
 
   color: rgba(0, 0, 0, 0.85);
   font-size: 14px;
-  font-family: -apple-system,
-  BlinkMacSystemFont,
-  'Segoe UI',
-  Roboto,
-  'Helvetica Neue',
-  Arial,
-  'Noto Sans',
-  sans-serif,
-  'Apple Color Emoji',
-  'Segoe UI Emoji',
-  'Segoe UI Symbol',
-  'Noto Color Emoji';
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
+    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
   font-variant: tabular-nums;
   line-height: 1.5715;
   font-feature-settings: 'tnum';
 
   * {
     box-sizing: border-box;
   }
-}
+}