feat: Add setStylesToManager function

myxvisual · Aug 8, 2017 · e0330e3 · e0330e3
1 parent 70c0380
commit e0330e3
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 10 deletions.
diff --git a/src/styles/StyleManager.ts b/src/styles/StyleManager.ts
@@ -12,8 +12,7 @@ export class StyleManager {
 
   constructor(theme: ReactUWP.ThemeType) {
     this.setupTheme(theme);
-    this.addSheet({}, "text");
-    this.renderToDOM();
+    this.updateSheetsToDOM();
   }
 
   setupTheme = (theme: ReactUWP.ThemeType) => {
@@ -28,15 +27,12 @@ export class StyleManager {
   updateTheme = () => {};
 
   addSheet = (style: React.CSSProperties, className = "") => {
-    style = {
-      borderTop: 2,
-      fontSize: 12,
-      lineHeight: 2
-    };
     let CSSText = Object.keys(style).map(key => `  ${replace2Dashes(key)}: ${getStyleValue(key, style[key])};`).join("\n");
     const id = createHash(`.${className} {\n${CSSText}\n}`);
-    CSSText = `.${className}-${id} {\n${CSSText}\n}`;
-    this.sheets[id] = { CSSText };
+    const classNameWithHash = `${className}-${id}`;
+    CSSText = `.${classNameWithHash} {\n${CSSText}\n}`;
+    this.sheets[id] = { CSSText, classNameWithHash, id, className };
+    return this.sheets[id];
   }
 
   updateSheetByID = () => {};
@@ -45,7 +41,7 @@ export class StyleManager {
 
   removeSheetByID = () => {};
 
-  renderToDOM = () => {
+  updateSheetsToDOM = () => {
     this.styleElement = document.querySelector("[data-uwp-jss]") as HTMLStyleElement;
     const textContent = `\n${Object.keys(this.sheets).map(id => this.sheets[id].CSSText).join("\n")}\n`;
     if (!this.styleElement) {

diff --git a/src/styles/addComponentStyles.ts b/src/styles/addComponentStyles.ts
@@ -0,0 +1,30 @@
+export interface StyleWithClassName {
+  style?: React.CSSProperties;
+  inlineStyle?: React.CSSProperties;
+  className?: string;
+}
+
+export default function setStylesToManager(config?: {
+  baseClassName?: string;
+  styles?: { [key: string]: StyleWithClassName };
+  theme?: ReactUWP.ThemeType;
+}) {
+  const newStyles: {
+    [key: string]: {
+      className?: string;
+      style?: React.CSSProperties;
+    }
+  } = {};
+  let { baseClassName, styles, theme } = config;
+  baseClassName = baseClassName || "";
+  const keys = Object.keys(styles);
+  for (const key of keys) {
+    let className = styles[key].className;
+    className = className ? `-${className}` : "";
+    newStyles[key] = {
+      className: theme.styleManager.addSheet(styles[key].style, `${baseClassName}${className}`).classNameWithHash,
+      style: styles[key].inlineStyle
+    };
+  }
+  return newStyles;
+}