feat:update toolbar interface

antvis · Jan 28, 2021 · 650e9f9 · 650e9f9
1 parent 82e284f
commit 650e9f9
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 26 deletions.
diff --git a/packages/graphin-components/src/Toolbar/demos/custom.tsx b/packages/graphin-components/src/Toolbar/demos/custom.tsx
@@ -1,15 +1,14 @@
-import React, { useState } from 'react';
-import { Toolbar, Type } from '@antv/graphin-components';
+import React from 'react';
+import { Toolbar } from '@antv/graphin-components';
 import Graphin, { GraphinContext, Utils } from '@antv/graphin';
-
+import { Tooltip, Button } from 'antd';
 import {
   ZoomOutOutlined,
   ZoomInOutlined,
   PieChartOutlined,
   DeleteOutlined,
   VideoCameraAddOutlined,
 } from '@ant-design/icons';
-import { Tooltip, Button } from 'antd';
 
 const CustomContent = () => {
   const { apis } = React.useContext(GraphinContext);
@@ -51,12 +50,10 @@ const CustomContent = () => {
 
   return (
     <div>
-      {options.map((item, index) => {
+      {options.map((item) => {
         return (
           <Tooltip title={item.description} key={item.key}>
-            <span onClick={item.action} onKeyDown={item.action} role="menuitem" tabIndex={index}>
-              {item.name}
-            </span>
+            <Button onClick={item.action}>{item.name}</Button>
           </Tooltip>
         );
       })}
@@ -65,23 +62,9 @@ const CustomContent = () => {
 };
 
 const AntdDemo = () => {
-  const [direction, setDirection] = useState<Type.ToolbarDirectionType>('horizontal');
-
-  const handleToggle = () => {
-    if (direction === 'horizontal') {
-      setDirection('vertical');
-    } else if (direction === 'vertical') {
-      setDirection('horizontal');
-    }
-  };
-
   return (
     <Graphin data={Utils.mock(5).circle().graphin()}>
-      <Button onClick={handleToggle} style={{ position: 'absolute', top: 0 }}>
-        切换 ToolBar 排布
-      </Button>
-
-      <Toolbar direction={direction}>
+      <Toolbar direction="horizontal" style={{ position: 'absolute', right: '250px' }}>
         <CustomContent />
       </Toolbar>
     </Graphin>

diff --git a/packages/graphin-components/src/Toolbar/interface.ts b/packages/graphin-components/src/Toolbar/interface.ts
@@ -1,5 +1,11 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import { ToolBarProps, IToolBarItem } from './index';
+import { ToolBarProps as Props, ToolBarItemType as item, ToolbarDirectionType as direction } from './index';
 
-const toolBarProp = (props: ToolBarProps) => {};
-const ToolBarItemProp = (props: IToolBarItem) => {};
+export type ToolBarProps = Props;
+export const ToolBarProps = (props: ToolBarProps) => {};
+
+export type ToolBarItemType = item;
+export const ToolBarItemType = (props: ToolBarItemType) => {};
+
+export type ToolbarDirectionType = direction;
+export const ToolbarDirectionType = (props: ToolbarDirectionType) => {};