fix: 修复 react theme 取不到的问题 (#1650)

antvis · Nov 17, 2022 · ef95569 · ef95569
1 parent fdf22dc
commit ef95569
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 34 deletions.
diff --git a/packages/f2/src/chart/index.ts b/packages/f2/src/chart/index.ts
@@ -1,10 +1,11 @@
-import { JSX, isEqual, GroupStyleProps } from '@antv/f-engine';
+import { JSX, isEqual, GroupStyleProps, IContext } from '@antv/f-engine';
 import { ScaleConfig } from '../deps/f2-scale/src';
-import { each, findIndex, isArray } from '@antv/util';
+import { each, findIndex, isArray, deepMix } from '@antv/util';
 import { Component } from '../index';
 import { Children } from '../index';
 import CoordController from '../controller/coord';
 import ScaleController from '../controller/scale';
+import Theme from '../theme';
 
 export interface Point {
   x: number;
@@ -54,9 +55,14 @@ class Chart extends Component<ChartProps, ChartState> {
   public coord: CoordController;
   public scale: ScaleController;
 
-  constructor(props: ChartProps) {
+  constructor(props: ChartProps, context: IContext) {
     super(props);
 
+    const { theme, px2hd } = context;
+    // hack 处理，设置默认的主题样式
+    // 目前没想到其他更合适的方式，只能先这样处理
+    deepMix(theme, px2hd(Theme));
+
     const { data } = props;
 
     this.coord = new CoordController();

diff --git a/packages/f2/src/components/sunburst/withSunburst.tsx b/packages/f2/src/components/sunburst/withSunburst.tsx
@@ -4,6 +4,7 @@ import { Category } from '../../attr';
 import { isInBBox } from '../../util';
 import CoordController from '../../controller/coord';
 import { mix, isFunction } from '@antv/util';
+import Theme from '../../theme';
 
 function rootParent(data) {
   let d = data;
@@ -22,12 +23,11 @@ export default (View): ClassComponent<any> => {
     constructor(props, context) {
       super(props, context);
       const { color, data } = props;
-      const { theme } = context;
 
       this.coord = new CoordController();
 
       this.color = new Category({
-        range: theme.colors,
+        range: Theme.colors,
         ...color,
         data,
       });

diff --git a/packages/f2/src/components/treemap/withTreemap.tsx b/packages/f2/src/components/treemap/withTreemap.tsx
@@ -2,6 +2,7 @@ import { jsx, ClassComponent, Ref, Component } from '@antv/f-engine';
 import { Category } from '../../attr';
 import CoordController from '../../controller/coord';
 import { hierarchy, treemap, treemapBinary } from '../../deps/d3-hierarchy/src';
+import Theme from '../../theme';
 
 export default (View): ClassComponent<any> => {
   return class Treemap extends Component {
@@ -12,10 +13,9 @@ export default (View): ClassComponent<any> => {
     constructor(props, context) {
       super(props, context);
       const { color, data } = props;
-      const { theme } = context;
       this.coord = new CoordController();
       this.color = new Category({
-        range: theme.colors,
+        range: Theme.colors,
         ...color,
         data,
       });

diff --git a/packages/f2/src/index.ts b/packages/f2/src/index.ts
@@ -1,4 +1,4 @@
-import {
+export {
   JSX,
   jsx,
   createElement,
@@ -10,27 +10,7 @@ import {
   Component,
   Children,
   computeLayout,
-  Theme,
 } from '@antv/f-engine';
 
-import Chart from './chart';
-import theme from './theme';
-Theme.setTheme(theme);
-
-export {
-  JSX,
-  jsx,
-  createElement,
-  createRef,
-  Fragment,
-  Theme,
-  Canvas,
-  Children,
-  Component,
-  Timeline,
-  Chart,
-  computeLayout,
-  CanvasRenderer,
-};
-
+export { default as Chart } from './chart';
 export * from './components';
diff --git a/packages/f2/src/theme.ts b/packages/f2/src/theme.ts
@@ -82,11 +82,6 @@ const chart = {
 };
 
 export default {
-  fontSize: '24px',
-  fontFamily:
-    '"Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif',
-  pixelRatio: 1,
-  padding: [0, 0, 0, 0],
   chart,
   colors: ['#1890FF', '#2FC25B', '#FACC14', '#223273', '#8543E0', '#13C2C2', '#3436C7', '#F04864'],
   shapes: {