style:fix eslint error

antvis · Jan 28, 2021 · 88082fe · 88082fe
1 parent 33124d1
commit 88082fe
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 62 deletions.
diff --git a/packages/graphin-components/src/Toolbar/demos/custom.tsx b/packages/graphin-components/src/Toolbar/demos/custom.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
-import Toolbar from '../index';
+import { Toolbar, Type } from '@antv/graphin-components';
 import Graphin, { GraphinContext, Utils } from '@antv/graphin';
+
 import {
   ZoomOutOutlined,
   ZoomInOutlined,
@@ -50,10 +51,12 @@ const CustomContent = () => {
 
   return (
     <div>
-      {options.map(item => {
+      {options.map((item, index) => {
         return (
           <Tooltip title={item.description} key={item.key}>
-            <span onClick={item.action}>{item.name}</span>
+            <span onClick={item.action} onKeyDown={item.action} role="menuitem" tabIndex={index}>
+              {item.name}
+            </span>
           </Tooltip>
         );
       })}
@@ -62,7 +65,7 @@ const CustomContent = () => {
 };
 
 const AntdDemo = () => {
-  const [direction, setDirection] = useState('horizontal');
+  const [direction, setDirection] = useState<Type.ToolbarDirectionType>('horizontal');
 
   const handleToggle = () => {
     if (direction === 'horizontal') {
@@ -81,20 +84,16 @@ const AntdDemo = () => {
   };
 
   return (
-    <Graphin
-      data={Utils.mock(5)
-        .circle()
-        .graphin()}
-    >
+    <Graphin data={Utils.mock(5).circle().graphin()}>
       <Button onClick={handleToggle} style={{ position: 'absolute', top: 0 }}>
         切换 ToolBar 排布
       </Button>
 
-      <Toolbar direction={direction as any}>
+      <Toolbar direction={direction}>
         <CustomContent />
       </Toolbar>
 
-      <Toolbar direction={direction as any} y={100}>
+      <Toolbar direction={direction} y={100} style={{ position: 'fixed', left: '0px', top: '60px' }}>
         <Toolbar.Item onClick={handleTest}>tesst</Toolbar.Item>
         <Toolbar.Item>删除</Toolbar.Item>
         <Toolbar.Item onClick={handleAdd}>增加</Toolbar.Item>

diff --git a/packages/graphin-components/src/Toolbar/demos/item.tsx b/packages/graphin-components/src/Toolbar/demos/item.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import Toolbar from '../index';
+import { Toolbar, Type } from '@antv/graphin-components';
 import Graphin, { Utils } from '@antv/graphin';
 import {
   ZoomOutOutlined,
@@ -12,7 +12,7 @@ import { Tooltip, Button } from 'antd';
 
 const ItemDemo = () => {
   const graphinRef = React.useRef(null);
-  const [direction, setDirection] = useState('horizontal');
+  const [direction, setDirection] = useState<Type.ToolbarDirectionType>('horizontal');
 
   const options = [
     {
@@ -61,17 +61,12 @@ const ItemDemo = () => {
   };
 
   return (
-    <Graphin
-      ref={graphinRef}
-      data={Utils.mock(5)
-        .circle()
-        .graphin()}
-    >
+    <Graphin ref={graphinRef} data={Utils.mock(5).circle().graphin()}>
       <Button onClick={handleToggle} style={{ position: 'absolute', top: 0 }}>
         切换 ToolBar 排布
       </Button>
-      <Toolbar direction={direction as any}>
-        {options.map(item => {
+      <Toolbar direction={direction}>
+        {options.map((item) => {
           return (
             <Toolbar.Item>
               <Tooltip title={item.description} key={item.key}>

diff --git a/packages/graphin-components/src/Toolbar/demos/option.tsx b/packages/graphin-components/src/Toolbar/demos/option.tsx
@@ -61,16 +61,11 @@ const OptionToolbar = () => {
     }
   };
   return (
-    <Graphin
-      ref={graphinRef}
-      data={Utils.mock(5)
-        .circle()
-        .graphin()}
-    >
+    <Graphin ref={graphinRef} data={Utils.mock(5).circle().graphin()}>
       <Button onClick={handleToggle} style={{ position: 'absolute', top: 0 }}>
         切换 ToolBar 排布
       </Button>
-      <Toolbar options={options} onChange={handleClick} direction={direction as any} />
+      <Toolbar options={options} onChange={handleClick} direction={direction} />
     </Graphin>
   );
 };

diff --git a/packages/graphin-components/src/Toolbar/index.tsx b/packages/graphin-components/src/Toolbar/index.tsx
@@ -1,16 +1,10 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import * as Graphin from '@antv/graphin';
 import { isArray } from '@antv/util';
 import './index.less';
 
 const { GraphinContext } = Graphin;
 
-interface IG6GraphEvent {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  item: any;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  [key: string]: any;
-}
 const defaultStyle: React.CSSProperties = {
   // width: 200,
   background: '#fff',
@@ -23,6 +17,8 @@ export interface IToolBarItem {
   [key: string]: any;
 }
 
+export type ToolbarDirectionType = 'vertical' | 'horizontal';
+
 export interface ToolBarProps {
   children?: React.ReactChildren | JSX.Element | JSX.Element[];
   /**
@@ -32,31 +28,26 @@ export interface ToolBarProps {
   /**
    * @description 点击 toolbar 的回调函数
    */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   onChange?: (graph: Graphin.Graph, data: any) => void;
   style?: React.CSSProperties;
-  direction?: 'vertical' | 'horizontal';
+  direction?: ToolbarDirectionType;
   x?: number;
   y?: number;
 }
 
-interface State {
-  /** 当前状态 */
-  direction?: 'vertical' | 'horizontal';
-  x: number;
-  y: number;
-}
-
-const ToolBarItem = props => {
+const ToolBarItem = (props) => {
   const { children, onClick = () => {} } = props;
 
-  // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-  // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-  return <li onClick={onClick}>{children}</li>;
+  return (
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+    <li onClick={onClick} onKeyDown={onClick}>
+      {children}
+    </li>
+  );
 };
 
-let containerRef: HTMLDivElement | null;
-
-const ToolBar: React.FunctionComponent<ToolBarProps> & { Item: typeof ToolBarItem } = props => {
+const ToolBar: React.FunctionComponent<ToolBarProps> & { Item: typeof ToolBarItem } = (props) => {
   const { children, style = {}, direction = 'horizontal', x = 0, y = 0, options, onChange } = props;
   const graphin = React.useContext(GraphinContext);
 
@@ -67,14 +58,14 @@ const ToolBar: React.FunctionComponent<ToolBarProps> & { Item: typeof ToolBarIte
   // 水平方向，默认在右上角
   // right = 0  top = 0
   if (direction === 'horizontal') {
-    positionStyle['right'] = x;
-    positionStyle['top'] = y;
+    positionStyle.right = x;
+    positionStyle.top = y;
     // positionStyle['width'] = width || 200;
   } else if (direction === 'vertical') {
     // 垂直方向，默认在左下角
     // left = 0  bottom = 0
-    positionStyle['left'] = x;
-    positionStyle['bottom'] = y;
+    positionStyle.left = x;
+    positionStyle.bottom = y;
     // positionStyle['width'] = width || 50;
   }
 
@@ -83,7 +74,7 @@ const ToolBar: React.FunctionComponent<ToolBarProps> & { Item: typeof ToolBarIte
     ...graphin.toolbar,
   };
 
-  const handleClick = config => {
+  const handleClick = (config) => {
     try {
       const { graph } = graphin;
 
@@ -98,9 +89,6 @@ const ToolBar: React.FunctionComponent<ToolBarProps> & { Item: typeof ToolBarIte
   if (options) {
     return (
       <div
-        ref={node => {
-          containerRef = node;
-        }}
         className="graphin-components-toolbar"
         style={{ ...defaultStyle, ...style, ...positionStyle }}
         key="graphin-components-toolbar"
@@ -109,7 +97,7 @@ const ToolBar: React.FunctionComponent<ToolBarProps> & { Item: typeof ToolBarIte
           className="graphin-components-toolbar-content"
           style={{ display: direction === 'horizontal' ? 'flex' : '' }}
         >
-          {options.map(option => {
+          {options.map((option) => {
             const { key, name } = option;
             return (
               <ToolBarItem
@@ -129,9 +117,6 @@ const ToolBar: React.FunctionComponent<ToolBarProps> & { Item: typeof ToolBarIte
 
   return (
     <div
-      ref={node => {
-        containerRef = node;
-      }}
       style={{ ...defaultStyle, ...style, ...positionStyle }}
       key="graphin-components-toolbar"
       className="graphin-components-toolbar"

diff --git a/packages/graphin-components/src/Toolbar/interface.ts b/packages/graphin-components/src/Toolbar/interface.ts
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import { ToolBarProps, IToolBarItem } from './index';
 
 const toolBarProp = (props: ToolBarProps) => {};

diff --git a/packages/graphin-components/src/index.ts b/packages/graphin-components/src/index.ts
@@ -12,3 +12,5 @@ export { default as FishEye } from './FishEye';
 export { default as Toolbar } from './Toolbar';
 export { default as MiniMap } from './MiniMap';
 export { default as Legend } from './Legend';
+
+export * as Type from './typing';
diff --git a/packages/graphin-components/src/typing/index.ts b/packages/graphin-components/src/typing/index.ts
@@ -0,0 +1,3 @@
+import { ToolbarDirectionType, ToolBarProps } from '../Toolbar';
+
+export { ToolbarDirectionType, ToolBarProps };