🐛 demand loading antd for components

antvis · Mar 22, 2020 · 5098991 · 5098991
1 parent 84bbd9d
commit 5098991
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 42 deletions.
diff --git a/packages/graphin-components/src/components/context-menu/Container.tsx b/packages/graphin-components/src/components/context-menu/Container.tsx
@@ -1,5 +1,6 @@
 import React, { ReactElement } from 'react';
-import { Menu, Icon } from 'antd';
+import { Menu, Icon } from '../ui'; // 'antd';
+
 import { Graph } from '@antv/g6';
 
 const MenuItem = Menu.Item;

diff --git a/packages/graphin-components/src/components/context-menu/getPosition.ts b/packages/graphin-components/src/components/context-menu/getPosition.ts
@@ -22,7 +22,9 @@ const calculate = (
   { canvasBox, menuBox }: { canvasBox: CanvasBox; menuBox: MenuBox },
 ): Position => {
   const { menuWidth, menuHeight } = menuBox;
+
   const { canvasWidth, canvasHeight } = canvasBox;
+
   let { x, y } = position;
   if (menuHeight + y > canvasHeight) {
     y -= menuHeight;

diff --git a/packages/graphin-components/src/components/toolbar/__tests__/index.test.tsx b/packages/graphin-components/src/components/toolbar/__tests__/index.test.tsx
@@ -17,7 +17,7 @@ describe('<Toolbar />', () => {
 
     const { asFragment, queryAllByTestId } = render(
       <Graphin data={data} layout={layout}>
-        <Toolbar />
+        <Toolbar style={{ position: 'fixed', right: 68, top: 68 }} />
       </Graphin>,
     );
   });

diff --git a/packages/graphin-components/src/components/toolbar/index.less b/packages/graphin-components/src/components/toolbar/index.less
@@ -1,11 +1,6 @@
-
-.zoom-toolbar.vertical{
-  position: absolute;
-  left: 20px;
-  // bottom: 10px;
-  bottom: 66px;
-  background: #FFF;
-  box-shadow: 0 0 11px 0 rgba(0,0,0,0.10);
+.zoom-toolbar.vertical {
+  background: #fff;
+  box-shadow: 0 0 11px 0 rgba(0, 0, 0, 0.1);
   width: 32px;
   border-radius: 4px;
   z-index: 10;
@@ -17,25 +12,19 @@
     border: none;
     margin: 10px auto;
     display: block;
-    // .anticon {
-    //   font-size: 22px;
-    // }
 
     &[disabled] {
-      background-color: #FFF;
+      background-color: #fff;
     }
   }
 }
 
-.zoom-toolbar.horizontal{
-  position: absolute;
-  left: 0px;
-  top: 0px;
+.zoom-toolbar.horizontal {
   width: 100%;
   height: 36px;
   line-height: 36px;
-  background: #FFF;
-  box-shadow: 0 0 11px 0 rgba(0,0,0,0.10);
+  background: #fff;
+  box-shadow: 0 0 11px 0 rgba(0, 0, 0, 0.1);
   border-radius: 4px;
   z-index: 10;
 
@@ -48,7 +37,7 @@
     display: inline-block;
 
     &[disabled] {
-      background-color: #FFF;
+      background-color: #fff;
     }
   }
-}
+}
diff --git a/packages/graphin-components/src/components/toolbar/index.tsx b/packages/graphin-components/src/components/toolbar/index.tsx
@@ -1,6 +1,6 @@
 import React, { ReactElement, CSSProperties } from 'react';
 import { Graph } from '@antv/g6';
-import { Tooltip, Button, Icon, Popover, Progress } from 'antd';
+import { Tooltip, Button, Icon, Popover, Progress } from '../ui'; // 'antd';
 
 import useFullscreen from './useFullscreen';
 import useZoom from './useZoom';
@@ -35,6 +35,7 @@ export interface RenderProps {
 
 export type Tdirection = 'horizontal' | 'vertical';
 export interface ToolbarProps {
+  style?: CSSProperties;
   graphDOM?: HTMLElement;
   graph?: Graph;
   apis?: any; // eslint-disable-line
@@ -47,23 +48,14 @@ export interface ToolbarProps {
   render?(props: RenderProps): MenuItem[];
 }
 
-const getToolbarPosition = (graphDOM: HTMLElement, direction: Tdirection): CSSProperties => {
-  const { top, left, bottom } = graphDOM.getBoundingClientRect();
-  if (direction === 'horizontal') {
-    return {
-      position: 'fixed',
-      left,
-      top,
-    };
-  }
-  return {
-    position: 'fixed',
-    left: left + 30,
-    bottom: window.innerHeight - bottom + 30,
-  };
+const defaultStyle: CSSProperties = {
+  position: 'absolute',
+  top: '48px',
+  left: '48px',
 };
+
 const Toolbar: React.FC<ToolbarProps> = props => {
-  const { graphDOM, graph, className = '', render, graphVars = {}, apis, direction = 'vertical' } = props;
+  const { graphDOM, graph, className = '', render, graphVars = {}, apis, direction = 'vertical', style } = props;
   const { history } = apis;
   const { width = 0, height = 0 } = graphVars;
   const [fullscreen, toggleFullscreen] = useFullscreen(graphDOM);
@@ -152,10 +144,10 @@ const Toolbar: React.FC<ToolbarProps> = props => {
   }
 
   const placement = direction === 'vertical' ? 'right' : 'bottom';
-  const style = getToolbarPosition(graphDOM!, direction);
+
   return (
     <div>
-      <div className={`zoom-toolbar ${direction} ${className}`} style={style}>
+      <div className={`zoom-toolbar ${direction} ${className}`} style={style || defaultStyle}>
         {buttonCfg.map(item => {
           /** 需要自定义渲染 */
           if (item.renderTooltip) {

diff --git a/packages/graphin-components/src/components/ui/index.ts b/packages/graphin-components/src/components/ui/index.ts
@@ -0,0 +1,15 @@
+import Button from 'antd/es/button';
+import 'antd/es/button/style';
+import Tooltip from 'antd/es/tooltip';
+import 'antd/es/tooltip/style';
+import Icon from 'antd/es/icon';
+import 'antd/es/icon/style';
+import Popover from 'antd/es/popover';
+import 'antd/es/popover/style';
+import Progress from 'antd/es/progress';
+import 'antd/es/progress/style';
+
+import Menu from 'antd/es/menu';
+import 'antd/es/menu/style';
+
+export { Button, Tooltip, Icon, Popover, Progress, Menu };
diff --git a/packages/graphin-site/examples/components/toolbar/demo/Simple.jsx b/packages/graphin-site/examples/components/toolbar/demo/Simple.jsx
@@ -2,7 +2,7 @@
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Card } from 'antd';
+
 import Graphin, { Utils } from '@antv/graphin';
 import '@antv/graphin/dist/index.css'; // 引入Graphin CSS
 import { Toolbar, ContextMenu } from '@antv/graphin-components';
@@ -19,7 +19,11 @@ const App = () => {
         <Toolbar />
         <ContextMenu
           render={() => {
-            return <Card title="Card title">Card content</Card>;
+            return (
+              <div style={{ height: 60, width: 150, background: '#fff', border: '1px solid #ddd' }}>
+                custom ContextMenu
+              </div>
+            );
           }}
         />
       </Graphin>