refactor(theme): 移除注册样式表机制，只提供根据样式表生成主题的方法

antvis · Apr 3, 2020 · 9b0020a · 9b0020a
1 parent 9b59a19
commit 9b0020a
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 46 deletions.
diff --git a/src/core.ts b/src/core.ts
@@ -35,7 +35,7 @@ export { getInteraction, registerInteraction, registerAction, getActionClass } f
 export { getFacet, registerFacet } from './facet';
 
 // 注册主题
-export { getTheme, registerTheme, getStyleSheet, registerStyleSheet } from './theme';
+export { getTheme, registerTheme, getThemeByStylesheet } from './theme';
 
 // G engine 管理相关
 export { registerEngine, getEngine } from './engine';

diff --git a/src/index.ts b/src/index.ts
@@ -2,11 +2,10 @@ import { GeometryCfg } from './geometry/base';
 import { PathCfg } from './geometry/path';
 import { IInteractionContext } from './interface';
 
-// 注册主题
-import { registerStyleSheet, registerTheme } from './core';
+// 注册黑暗主题
+import { getThemeByStylesheet, registerTheme } from './core';
 import { antvDark } from './theme/style-sheet/dark';
-registerStyleSheet('dark', antvDark);
-registerTheme('dark', 'dark');
+registerTheme('dark', getThemeByStylesheet(antvDark));
 
 // 注册 G 渲染引擎
 import * as CanvasEngine from '@antv/g-canvas';

diff --git a/src/theme/default.ts → src/theme/get-theme-by-style-sheet.ts b/src/theme/default.ts → src/theme/get-theme-by-style-sheet.ts
@@ -2,10 +2,14 @@ import * as TOOLTIP_CSS_CONST from '@antv/component/lib/tooltip/css-const';
 import { transform } from '@antv/matrix-util';
 import { deepMix } from '@antv/util';
 import Element from '../geometry/element';
-import { StyleSheet } from '../interface';
+import { LooseObject, StyleSheet } from '../interface';
 import { getAngle } from '../util/graphics';
 
-export function getThemeByStylesheet(styleSheet: StyleSheet) {
+/**
+ * 根据主题样式表生成主题结构
+ * @param styleSheet 主题样式表
+ */
+export function getThemeByStylesheet(styleSheet: StyleSheet): LooseObject {
   const shapeStyles = {
     point: {
       default: {

diff --git a/src/theme/index.ts b/src/theme/index.ts
@@ -1,7 +1,7 @@
-import { get, isString, lowerCase } from '@antv/util';
+import { get, lowerCase } from '@antv/util';
 import { LooseObject, StyleSheet } from '../interface';
 
-import { getThemeByStylesheet } from './default';
+import { getThemeByStylesheet } from './get-theme-by-style-sheet';
 import { antvLight as DefaultStyleSheet } from './style-sheet/light';
 
 const defaultTheme = getThemeByStylesheet(DefaultStyleSheet as StyleSheet);
@@ -24,33 +24,8 @@ export function getTheme(theme?: string): LooseObject {
  * @param theme 主题名。
  * @param value 具体的主题配置。
  */
-export function registerTheme(theme: string, value: LooseObject | string) {
-  if (isString(value)) {
-    // 在默认样式的基础上，修改主题样式表
-    const styleSheet = getStyleSheet(value);
-    Themes[lowerCase(theme)] = getThemeByStylesheet(styleSheet);
-  } else {
-    Themes[lowerCase(theme)] = value;
-  }
+export function registerTheme(theme: string, value: LooseObject) {
+  Themes[lowerCase(theme)] = value;
 }
 
-const StyleSheets: Record<string, StyleSheet> = {
-  default: DefaultStyleSheet,
-};
-
-/**
- * 获取对应主题样式表
- * @param name 样式表名
- */
-export function getStyleSheet(name?: string): StyleSheet {
-  return get(StyleSheets, lowerCase(name), StyleSheets.default);
-};
-
-/**
- * 注册主题样式表
- * @param name 样式表名
- * @param styleSheet 样式表定义
- */
-export function registerStyleSheet(name: string, styleSheet: StyleSheet) {
-  StyleSheets[lowerCase(name)] = styleSheet;
-};
+export { getThemeByStylesheet };
diff --git a/tests/unit/theme/index-spec.ts b/tests/unit/theme/index-spec.ts
@@ -1,4 +1,4 @@
-import { getStyleSheet, getTheme, registerStyleSheet, registerTheme } from '../../../src';
+import { getTheme, registerTheme } from '../../../src';
 
 describe('theme', () => {
   test('theme API', () => {
@@ -12,13 +12,5 @@ describe('theme', () => {
 
     expect(getTheme('a')).toEqual({ a: 1 });
     expect(getTheme('default')).toEqual({});
-
-    expect(getStyleSheet()).toEqual(getStyleSheet('default'));
-    expect(getStyleSheet('xxxxx')).toEqual(getStyleSheet('yyyyy'));
-    registerStyleSheet('default', {});
-    registerStyleSheet('a', { brandColor: 'red' });
-
-    expect(getStyleSheet('a')).toEqual({ brandColor: 'red' });
-    expect(getStyleSheet('default')).toEqual({});
   });
 });