feat: Update StyleManager support dynamic style

myxvisual · Aug 8, 2017 · 496ed42 · 496ed42
1 parent 6335111
commit 496ed42
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 10 deletions.
diff --git a/src/styles/StyleManager.ts b/src/styles/StyleManager.ts
@@ -1,17 +1,18 @@
 import * as createHash from "murmurhash-js/murmurhash3_gc";
 import isUnitlessNumber from "../common/react/isUnitlessNumber";
 
-const replace2Dashes = (key: string) => key.replace(/[A-Z]/g, $1 => `-${$1.toLowerCase()}`);
-const getStyleValue = (key: string, value: string) => ((typeof value === "number" && !(isUnitlessNumber as any)[key]) ? `${value}px` : value);
+export const replace2Dashes = (key: string) => key.replace(/[A-Z]/g, $1 => `-${$1.toLowerCase()}`);
+export const getStyleValue = (key: string, value: string) => ((typeof value === "number" && !(isUnitlessNumber as any)[key]) ? `${value}px` : value);
 
 export interface CustomCSSProperties extends React.CSSProperties {
   "&:hover"?: React.CSSProperties;
   "&:active"?: React.CSSProperties;
   "&:focus"?: React.CSSProperties;
   "&:disabled"?: React.CSSProperties;
+  dynamicStyle?: React.CSSProperties;
 }
 
-const extendsStyleKeys: any = {
+export const extendsStyleKeys: any = {
   "&:hover": true,
   "&:active": true,
   "&:focus": true,

diff --git a/src/styles/setStylesToManager.ts b/src/styles/setStylesToManager.ts
@@ -2,7 +2,6 @@ import { CustomCSSProperties } from "./StyleManager";
 
 export interface StyleWithClass {
   style?: CustomCSSProperties;
-  dynamicStyle?: React.CSSProperties;
   className?: string;
 }
 
@@ -26,7 +25,7 @@ export function setStylesToManager(config?: {
   let CSSText = "";
   for (const key of keys) {
     let styleItem: StyleWithClass = styles[key] as StyleWithClass;
-    const isStyleWithClass = styleItem.className || styleItem.style || styleItem.dynamicStyle;
+    const isStyleWithClass = styleItem.className || styleItem.style;
     let secondClassName: string = `-${key}`;
 
     if (isStyleWithClass) {
@@ -35,13 +34,14 @@ export function setStylesToManager(config?: {
       secondClassName = `-${key}${secondClassName}`;
     }
 
+    const { dynamicStyle, ...styleProperties } = isStyleWithClass ? styleItem.style : styleItem;
     const sheet = theme.styleManager.addSheetWithUpdate(
-      isStyleWithClass ? styleItem.style : styleItem,
+      styleProperties,
       `${className}${secondClassName}`
     );
     newStyles[key] = {
       className: sheet.classNameWithHash,
-      style: isStyleWithClass ? styleItem.dynamicStyle : void 0
+      style: dynamicStyle
     };
     CSSText += `${sheet.CSSText}\n`;
   }
@@ -54,15 +54,15 @@ export function setStyleToManager(config?: {
   theme?: ReactUWP.ThemeType;
   style: CustomCSSProperties;
   className: string;
-  dynamicStyle?: React.CSSProperties;
 }, callback: (CSSText?: string) => void = emptyFunc) {
   let newStyles:  {
     className?: string;
     style?: CustomCSSProperties;
   } = {};
-  let { style, dynamicStyle, className, theme } = config;
+  let { style, className, theme } = config;
+  const { dynamicStyle, ...styleProperties } = style;
   className = className || "";
-  const sheet = theme.styleManager.addSheetWithUpdate(style, className);
+  const sheet = theme.styleManager.addSheetWithUpdate(styleProperties, className);
   newStyles = {
     className: sheet.classNameWithHash,
     style: dynamicStyle