feat: 调整部分代码

antvis · Jan 15, 2021 · 5dc4296 · 5dc4296
1 parent 9db06b4
commit 5dc4296
Show file tree

Hide file tree

Showing 9 changed files with 40 additions and 212 deletions.
diff --git a/packages/components/src/chart/index---.ts b/packages/components/src/chart/index---.ts
diff --git a/packages/components/src/chart/index.ts b/packages/components/src/chart/index.ts
@@ -1,5 +1,4 @@
 import F2 from '@antv/f2';
-import ComponentFactory from './componentFactory';
 import { render } from '@ali/f2-jsx';
 
 // @ts-ignore
@@ -137,36 +136,6 @@ class Chart {
     const { chart } = this;
     chart.render();
   }
-
-  // createComponents(componentsSchema: any) {
-  //   const { chart } = this;
-  //   const components = ComponentFactory.create(chart, componentsSchema);
-  //   components.forEach(component => {
-  //     component.setState = (state: any) => {
-  //       component.state = {
-  //         ...component.state,
-  //         ...state,
-  //       };
-  //       this.renderComponent(component);
-  //       // TODO 避免每次的绘制
-  //       chart.get('canvas').draw();
-  //     }
-  //   })
-  //   this.components = components;
-  // }
-
-  // renderComponents() {
-  //   const { components } = this;
-  //   const elements = components.map((component: any) => {
-  //     return this.renderComponent(component);
-  //   });
-  //   return elements;
-  // }
-
-
-  // source(data: any) {
-  //   this.chart.source(data);
-  // }
 }
 
 export default Chart;
diff --git a/packages/jsx/src/jsx.ts b/packages/jsx/src/jsx.ts
@@ -1,15 +1,7 @@
-import { batch2hd, isArray, isFunction } from './util';
+import { batch2hd, extendArray, isFunction } from './util';
 
 // 实现jsx-runtime 入口
 export default function(type: string | Function, props: any, key?: string) {
-  const { style, attrs, children: nodeChildren } = props;
-
-  // 要转成array
-  const children = nodeChildren && !isArray(nodeChildren) ? [ nodeChildren ] : nodeChildren;
-
-  // 清理为空的子元素
-  props.children = children && children.filter((child: any) => !!child);
-
   if (isFunction(type)) {
     // f2组件，需要在外部实例化
     // @ts-ignore
@@ -20,16 +12,19 @@ export default function(type: string | Function, props: any, key?: string) {
         key,
       };
     }
+    // 如果是方法，直接执行，生成G的定义树
     // @ts-ignore
     return type(props);
   }
 
+  const { style, attrs, children } = props;
+
   return {
     type,
     props,
+    key,
     style: batch2hd(style) || {},
     attrs: batch2hd(attrs),
-    children: props.children,
-    key,
+    children: extendArray(children),
   };
 };
diff --git a/packages/jsx/src/render.ts b/packages/jsx/src/render.ts
@@ -1,25 +1,4 @@
 import computeLayout from './css-layout';
-import { isArray } from './util';
-
-// 展开数组
-function extendArray(arr: any[]) {
-  if (!arr) {
-    return arr;
-  }
-  if (!isArray(arr)) {
-    return [ arr ];
-  }
-  let newArray: any = [];
-  for (let i = 0; i < arr.length; i++) {
-    const element = arr[i];
-    if (isArray(element)) {
-      newArray = newArray.concat(extendArray(element));
-    } else {
-      newArray.push(element);
-    }
-  }
-  return newArray;
-}
 
 function mergeLayout(parent: any, layout: any) {
   if (!parent) return layout;
@@ -78,7 +57,6 @@ export default (node: any, container: any) => {
   if (!node) {
     return;
   }
-  node.children = extendArray(node.children);
   computeLayout(node);
   return createElement(node, container, null);
 }
diff --git a/packages/jsx/src/util.ts b/packages/jsx/src/util.ts
@@ -77,5 +77,25 @@ function batch2hd(value: any) {
   return value;
 }
 
+// 展开数组
+function extendArray(arr: any[]) {
+  if (!arr) {
+    return arr;
+  }
+  if (!isArray(arr)) {
+    return [ arr ];
+  }
+  let newArray: any = [];
+  for (let i = 0; i < arr.length; i++) {
+    const element = arr[i];
+    if (isArray(element)) {
+      newArray = newArray.concat(extendArray(element));
+    } else if (element) {
+      newArray.push(element);
+    }
+  }
+  return newArray;
+}
+
 
-export { isString, isArray, isObject, isFunction, batch2hd };
+export { isString, isArray, isObject, isFunction, batch2hd, extendArray };
diff --git a/packages/react/src/chart.ts b/packages/react/src/chart.ts
diff --git a/packages/react/src/index.tsx b/packages/react/src/index.tsx
@@ -2,15 +2,6 @@
 
 import { Component, createRef } from 'react';
 import Chart from '@ali/f2-components';
-// import useModel from './model';
-
-// export default (props: any) => {
-//   const { pixelRatio, data, children } = props;
-//   const canvasRef = useRef(null);
-//   useModel({ canvasRef, data, pixelRatio, children });
-
-//   return (<canvas className="chart-canvas" ref={ canvasRef } />);
-// }
 
 class ReactChart extends Component {
   canvasRef: any;
@@ -39,7 +30,6 @@ class ReactChart extends Component {
     this.chart = chart;
   }
   componentDidUpdate() {
-    console.log('update');
     const { chart, props } = this;
     chart.update(props);
   }

diff --git a/packages/react/src/model.ts b/packages/react/src/model.ts
diff --git a/packages/react/test/chart.test.tsx b/packages/react/test/chart.test.tsx
@@ -1,15 +1,15 @@
 /** @jsxImportSource react */
 
 // @ts-nocheck
-import { useRef, useState, Component } from 'react';
+import { Component } from 'react';
 import ReactDOM from 'react-dom';
 import Chart from '../src';
 
 import result from './managerData';
 
 // 引入组件
 // import { Line } from '../../components/src/index';
-import { Axis, Line, Guide } from '../../fund-components/src/index';
+import { Axis, Line, Guide, WeaverLine } from '../../fund-components/src/index';
 
 const style = document.createElement('style');
 style.setAttribute('rel', 'text/css');
@@ -41,7 +41,10 @@ class App extends Component {
     activeIndex: 0,
   }
   guideClick = (index) => {
-    // console.log('click', index);
+    const { activeIndex } = this.state;
+    if (activeIndex === index) {
+      return;
+    }
     this.setState({
       activeIndex: index,
     });
@@ -53,7 +56,7 @@ class App extends Component {
         pixelRatio={ window.devicePixelRatio }
         data={ data }
       >
-        <Axis visible={false} field="reportDateTimestamp" type="timeCat" tickCount={ 3 } range={ [ 0, 1 ] }/>
+        <Axis field="reportDateTimestamp" type="timeCat" tickCount={ 3 } range={ [ 0, 1 ] }/>
         <Axis field="rate" dimType="y" tickCount={ 5 } range={ [ 0, 1 ] }/>
         <Line position="reportDateTimestamp*rate" color="codeType" />
         {
@@ -66,48 +69,16 @@ class App extends Component {
             />
           })
         }
-        {
-          true ? null : <Line />
-        }
+        <WeaverLine position="reportDateTimestamp*rate"/>
       </Chart>
     );
   }
 }
 
-
-// const App = () => {
-//   const [activeIndex, setActiveIndex] = useState(0);
-
-//   const guideClick = (index) => {
-//     setActiveIndex(index)
-//   }
-
-//   return (
-//     <Chart
-//       pixelRatio={ window.devicePixelRatio }
-//       data={ data }
-//     >
-//       <Axis visible={false} field="reportDateTimestamp" type="timeCat" tickCount={ 3 } range={ [ 0, 1 ] }/>
-//       <Axis field="rate" dimType="y" tickCount={ 5 } range={ [ 0, 1 ] }/>
-//       <Line position="reportDateTimestamp*rate" color="codeType" />
-//       {
-//         eventData.map((records, index) => {
-//           return <Guide
-//             key={ index }
-//             active={ activeIndex === index }
-//             records={ records }
-//             onClick={ () => guideClick(index) }
-//           />
-//         })
-//       }
-//     </Chart>
-//   );
-// }
-
-// describe('test', () => {
-//   it('test', () => {
-//     expect(true).toBe(true);
-//   });
-// });
+describe('test', () => {
+  it('test', () => {
+    expect(true).toBe(true);
+  });
+});
 
 ReactDOM.render(<App />, root);