fix(panel): show divider (#1788)

Co-authored-by: maxin <maxin@growingio.com>
growingio · Jan 12, 2022 · 4fdfab8 · 4fdfab8
1 parent 5632662
commit 4fdfab8
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 18 deletions.
diff --git a/src/panel/Panel.tsx b/src/panel/Panel.tsx
@@ -4,7 +4,6 @@ import { difference } from 'lodash';
 import { useControlledState, usePrefixCls } from '@gio-design/utils';
 import Typography from '../typography';
 import Tabs, { Tab } from '../tabs';
-import Divider from '../divider';
 import { PanelProps, TabPaneProps } from './interfaces';
 import TabPanel from './TabPanel';
 import { Avatar } from '..';
@@ -97,7 +96,6 @@ const InnerPanel: React.ForwardRefRenderFunction<HTMLDivElement, PanelProps> = (
                 );
               })}
             </Tabs>
-            <Divider className={prefix('__tabs__divider')} />
           </div>
           {panelTabs[currentTabIndex]}
         </>

diff --git a/src/panel/TabPanel.tsx b/src/panel/TabPanel.tsx
@@ -5,6 +5,7 @@ import { difference } from 'lodash';
 import { TabsProps } from '../tabs';
 import { TabPaneProps } from './interfaces';
 import ToolBar from './ToolBar';
+import Divider from '../divider';
 
 const TabPanel: React.FC<TabPaneProps> = (props) => {
   const { className, style, children } = props;
@@ -19,13 +20,16 @@ const TabPanel: React.FC<TabPaneProps> = (props) => {
 
   const showToolBars = toolBars.length > 0;
 
-  const prefixCls = usePrefixCls('panel__tab-panel');
+  const prefixCls = usePrefixCls('panel');
 
   return (
-    <div className={classNames(prefixCls, className)} style={style}>
-      {showToolBars ? <div className={`${prefixCls}__container`}>{toolBars}</div> : null}
-      {otherChildren}
-    </div>
+    <>
+      {showToolBars ? <Divider className={`${prefixCls}__divider`} /> : null}
+      <div className={classNames(`${prefixCls}__tab-panel`, className)} style={style}>
+        {showToolBars ? <div className={`${prefixCls}__tab-panel__container`}>{toolBars}</div> : null}
+        {otherChildren}
+      </div>
+    </>
   );
 };
 

diff --git a/src/panel/demos/Panel.stories.tsx b/src/panel/demos/Panel.stories.tsx
@@ -142,14 +142,6 @@ const MultiplePanel: Story<PanelProps> = (args) => {
         />
       </TabPanel>
       <TabPanel key="2" name="权限">
-        <ToolBar>
-          <SearchBar style={{ width: 360 }} />
-        </ToolBar>
-        <ToolBar float="right">
-          <Button prefix={<PlusOutlined />}>新建账号</Button>
-          <Button type="secondary">次要按钮</Button>
-          <Button type="secondary">次要按钮</Button>
-        </ToolBar>
         {/** Table高度自适应通过 scroll.y 实现 */}
         <Table dataSource={dataSource2} columns={columns2} scroll={{ y: 'calc(100vh - 359px)' as any }} />
       </TabPanel>

diff --git a/src/panel/style/index.less b/src/panel/style/index.less
@@ -62,9 +62,10 @@
       width: auto;
       margin: 0 20px;
     }
-    &__divider {
-      margin: 0;
-    }
+  }
+
+  &__divider {
+    margin: 0;
   }
 
   &__content {

diff --git a/src/panel/style/tabPanel.less b/src/panel/style/tabPanel.less
@@ -3,6 +3,7 @@
 @panel-tab-panelprefix-cls: ~'@{component-prefix}-panel__tab-panel';
 
 .@{panel-tab-panelprefix-cls} {
+  display: flow-root;
   &__container {
     margin: 20px 14px;
     overflow: hidden;