feat(hippy-vue): export parseColor api for HippyVue

Tencent · Jul 2, 2020 · a354c94 · a354c94
1 parent ad5af63
commit a354c94
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 4 deletions.
diff --git a/packages/hippy-vue/src/renderer/element-node.js b/packages/hippy-vue/src/renderer/element-node.js
@@ -1,7 +1,6 @@
 /* eslint-disable no-underscore-dangle */
 /* eslint-disable no-param-reassign */
 
-import colorParser from '@css-loader/color-parser';
 import ViewNode from './view-node';
 import { updateChild, updateWithChildren } from './native';
 import { getViewMeta, normalizeElementName } from '../elements';
@@ -132,7 +131,7 @@ class ElementNode extends ViewNode {
           break;
         case 'caretColor':
         case 'caret-color':
-          this.attributes['caret-color'] = colorParser(value);
+          this.attributes['caret-color'] = Native.parseColor(value);
           break;
         default:
           this.attributes[key] = tryConvertNumber(value);
@@ -171,14 +170,14 @@ class ElementNode extends ViewNode {
         }
         break;
       case 'caretColor':
-        this.attributes['caret-color'] = colorParser(value);
+        this.attributes['caret-color'] = Native.parseColor(value);
         break;
       default: {
         if (typeof v === 'string') {
           v = value.trim();
           // Convert inline color style to int
           if (property.toLowerCase().indexOf('color') >= 0) {
-            v = colorParser(v, Native.Platform);
+            v = Native.parseColor(v);
           // Convert inline length style, drop the px unit
           } else if (endsWith(v, 'px')) {
             v = parseFloat(value.slice(0, value.length - 2));

diff --git a/packages/hippy-vue/src/runtime/native.js b/packages/hippy-vue/src/runtime/native.js
@@ -1,4 +1,7 @@
+import colorParser from '@css-loader/color-parser';
+
 import { isDef } from 'shared/util';
+
 import {
   HIPPY_VUE_VERSION,
   warn,
@@ -327,6 +330,22 @@ const Native = {
     }));
     return Promise.race([timeout, measure]);
   },
+
+  /**
+   * parse the color to int32Color which native can understand.
+   * @param { String | Number } color
+   * @param { {platform: "ios" | "android"} } options
+   * @returns { Number } int32Color
+   */
+  parseColor(color, options = { platform: Native.Platform }) {
+    const cache = CACHE.COLOR_PARSER || (CACHE.COLOR_PARSER = Object.create(null));
+    if (!cache[color]) {
+      const int32Color = colorParser(color, options);
+      // cache the calculation result
+      cache[color] = int32Color;
+    }
+    return cache[color];
+  },
 };
 
 // Public export