feat: Update Acrylic and StyleManager

Author: myxvisual

docs/src/components/CodeExample.tsx

@@ -14,6 +14,7 @@ export interface DataProps {
   doubleThemeStyle?: React.CSSProperties;
   useChromeColor?: boolean;
   direction?: "row" | "column";
+  newTheme?: ReactUWP.ThemeType;
 }
 
 export interface CodeExampleProps extends DataProps, React.HTMLAttributes<HTMLDivElement> {}
@@ -50,6 +51,7 @@ export default class CodeExample extends React.Component<CodeExampleProps, CodeE
       useChromeColor,
       direction,
       useSingleTheme,
+      newTheme,
       ...attributes
     } = this.props;
     const { theme } = this.context;
@@ -87,6 +89,7 @@ ${code}
             }}
             useSingleTheme={useSingleTheme}
             direction={direction}
+            newTheme={newTheme}
           >
             {children}
           </DoubleThemeRender>

docs/src/components/DoubleThemeRender.tsx

@@ -10,14 +10,15 @@ export interface DoubleThemeRenderProps extends React.HTMLAttributes<HTMLDivElem
   useBorder?: boolean;
   useChromeColor?: boolean;
   useSingleTheme?: boolean;
+  newTheme?: ReactUWP.ThemeType;
 }
 
 export default class DoubleThemeRender extends React.Component<DoubleThemeRenderProps> {
   static contextTypes = { theme: PropTypes.object };
   context: { theme: ReactUWP.ThemeType };
 
   render() {
-    const { children, direction, themeStyle, useBorder, useChromeColor, useSingleTheme, ...attributes } = this.props;
+    const { children, direction, themeStyle, useBorder, useChromeColor, useSingleTheme, newTheme, ...attributes } = this.props;
     const darkTheme = getTheme({ themeName: "dark", accent: this.context.theme.accent });
     const { prefixStyle } = darkTheme;
     const lightTheme = getTheme({ themeName: "light", accent: this.context.theme.accent });
@@ -33,7 +34,7 @@ export default class DoubleThemeRender extends React.Component<DoubleThemeRender
 
     const { theme } = this.context;
 
-    return  useSingleTheme || theme.useFluentDesign ? (
+    return useSingleTheme || theme.useFluentDesign ? (
       <div
         style={prefixStyle({
           width: "100%",
@@ -43,7 +44,15 @@ export default class DoubleThemeRender extends React.Component<DoubleThemeRender
           justifyContent: "center"
         })}
       >
-        {children}
+        {newTheme ? <Theme
+          desktopBackgroundConfig={{
+            renderToScreen: false,
+            enableRender: true
+          }}
+          theme={newTheme}
+        >
+          {children}
+        </Theme> : children}
       </div>
     ) : (
       <div

docs/src/components/Wrapper/components/Footer.tsx

@@ -89,7 +89,7 @@ function getStyles(footer: Footer): {
 
   return {
     root: prefixStyle({
-      ...theme.acrylicTexture40.style,
+      ...theme.acrylicTexture20.style,
       zIndex: theme.zIndex.header,
       fontSize: 14,
       color: theme.baseHigh,

docs/src/components/Wrapper/components/Header.tsx

@@ -216,7 +216,7 @@ function getStyles(header: Header): {
 
   return {
     root: prefixStyle({
-      ...theme.acrylicTexture40.style,
+      ...theme.acrylicTexture20.style,
       fontSize: 14,
       color: theme.baseHigh,
       boxShadow: theme.isDarkTheme ? void 0 : `0 2px 8px ${theme.listLow}`,

docs/src/routes/Styles/Acrylic/SimpleExample.tsx

@@ -12,8 +12,8 @@ export default class SimpleExample extends React.Component {
       fontSize: 14,
       fontWeight: "lighter",
       textAlign: "center",
-      width: 320,
-      height: 320,
+      width: 200,
+      height: 200,
       lineHeight: "320px",
       margin: 10,
       outline: "none",
@@ -33,14 +33,20 @@ export default class SimpleExample extends React.Component {
           background: theme.desktopBackground
         })}
       >
+        <span style={{ ...itemStyle, ...theme.acrylicTexture20.style }}>
+          theme.acrylicTexture20.style
+        </span>
         <span style={{ ...itemStyle, ...theme.acrylicTexture40.style }}>
-          theme.acrylicTexture40.background
+          theme.acrylicTexture40.style
         </span>
         <span style={{ ...itemStyle, ...theme.acrylicTexture60.style }}>
-          theme.acrylicTexture60.background
+          theme.acrylicTexture60.style
         </span>
         <span style={{ ...itemStyle, ...theme.acrylicTexture80.style }}>
-          theme.acrylicTexture80.background
+          theme.acrylicTexture80.style
+        </span>
+        <span style={{ ...itemStyle, ...theme.acrylicTexture100.style }}>
+          theme.acrylicTexture100.style
         </span>
       </div>
     );

docs/src/routes/Styles/Acrylic/index.tsx

@@ -8,6 +8,7 @@ import * as readmeDoc1 from "!raw!./README1.md";
 import * as readmeDoc2 from "!raw!./README2.md";
 import SimpleExample from "./SimpleExample";
 import * as SimpleExampleCode from "!raw!./SimpleExample";
+import { getTheme } from "react-uwp";
 
 export interface DataProps {}
 
@@ -36,6 +37,11 @@ export default class Acrylic extends React.Component<AcrylicProps> {
           title="Simple Examples"
           code={SimpleExampleCode as any}
           useSingleTheme
+          newTheme={getTheme({
+            themeName: theme.themeName,
+            useFluentDesign: true,
+            desktopBackgroundImage: require("assets/images/blurBackground/viktor-jakovlev-LL4gcqlNvPU-unsplash.jpg")
+          })}
         >
           <SimpleExample />
         </CodeExample>

src/Theme/index.tsx

@@ -17,7 +17,10 @@ export interface DataProps {
   /**
    * toogle desktopBackground show.
    */
-  enableDesktopBackground?: boolean;
+  desktopBackgroundConfig?: {
+    enableRender?: boolean;
+    renderToScreen?: boolean;
+  };
   /**
    * set theme will update callback.
    */
@@ -30,11 +33,15 @@ export interface ThemeState {
   currTheme?: ThemeType;
 }
 
+const desktopBgDefaultConfig = {
+  enableRender: true,
+  renderToScreen: true
+}
 const themeCallback: (theme?: ThemeType) => void = () => {};
 
 export class Theme extends React.Component<ThemeProps, ThemeState> {
   static defaultProps: ThemeProps = {
-    enableDesktopBackground: true,
+    desktopBackgroundConfig: desktopBgDefaultConfig,
     themeWillUpdate: themeCallback
   };
   static childContextTypes = {
@@ -149,32 +156,32 @@ export class Theme extends React.Component<ThemeProps, ThemeState> {
   }
 
   render() {
-    const {
+    let {
       theme,
-      enableDesktopBackground,
+      desktopBackgroundConfig,
       children,
       style,
       className,
       themeWillUpdate,
       ...attributes
     } = this.props;
     const { currTheme } = this.state;
+    desktopBackgroundConfig = desktopBackgroundConfig || desktopBgDefaultConfig;
+    const { enableRender, renderToScreen } = desktopBackgroundConfig
 
     const styles = getStyles(this);
     const classes = currTheme.prepareStyles({
       className: "theme",
       styles
     });
 
-    // if (this.styleEl) {
-    //   console.log("rule length: ", this.styleEl.sheet["rules"].length);
-    // }
-
     return (
       <div {...attributes} {...classes.root}>
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/react-uwp/1.1.0/css/segoe-mdl2-assets.css" />
         <style type="text/css" scoped ref={styleEl => this.styleEl = styleEl} />
-        {enableDesktopBackground && <RenderToBody {...classes.desktopBackground} />}
+        {enableRender && (
+           renderToScreen ? <RenderToBody {...classes.desktopBackground} /> : <div {...classes.desktopBackground} />
+        )}
         <RenderToBody>
           <ToastWrapper
             toastEls={Array.from(currTheme.toasts.keys()).map(toast => toast.virtualRender())}
@@ -189,9 +196,15 @@ export class Theme extends React.Component<ThemeProps, ThemeState> {
 
 function getStyles(context: Theme) {
   const { currTheme } = context.state;
-  const { style } = context.props;
+  let { style, desktopBackgroundConfig } = context.props;
+  desktopBackgroundConfig = desktopBackgroundConfig || desktopBgDefaultConfig;
+  const { enableRender, renderToScreen } = desktopBackgroundConfig
+  const isInsideBg = enableRender && !renderToScreen;
+
   return {
     root: {
+      position: "relative",
+      overflow: isInsideBg ? "hidden" : void 0,
       fontSize: 14,
       fontFamily: currTheme.fonts.sansSerifFonts,
       color: currTheme.baseHigh,
@@ -203,7 +216,7 @@ function getStyles(context: Theme) {
       ...style
     } as React.CSSProperties,
     desktopBackground: {
-      position: "fixed",
+      position: isInsideBg ? "absolute" : "fixed",
       zIndex: -1,
       top: 0,
       left: 0,

src/styles/StyleManager.ts

@@ -135,30 +135,40 @@ export class StyleManager {
     const shouldUpdate = !this.addedCSSText[hash];
     if (shouldUpdate) {
       this.resultCSSText += CSSText;
-      const textSize = CSSText.length;
-      let currRule = "";
-      let leftBraces = 0;
       const rules = new Map<string, boolean>();
-      for (let i = 0; i < textSize; i ++) {
-        const char = CSSText[i];
-        currRule += char;
-        if (char === "{") {
-          leftBraces += 1;
-        }
-        if (char === "}") {
-          leftBraces -= 1;
-          if (leftBraces === 0) {
-            this.setRules2allRules(rules, currRule);
-            currRule = "";
-          }
-        }
-      }
+      this.cssText2rules(CSSText, currRule => {
+        this.setRules2allRules(rules, currRule);
+      });
       this.addedCSSText[hash] = { CSSText, rules };
       this.onAddCSSText(CSSText);
       this.onAddRules(rules);
     }
   }
 
+  cssText2rules(cssText: string, onNewReule?: (rule?: string) => void) {
+    let currRule = "";
+    const rules: string[] = [];
+    let leftBraces = 0;
+    const textSize = cssText.length;
+    for (let i = 0; i < textSize; i ++) {
+      const char = cssText[i];
+      currRule += char;
+      if (char === "{") {
+        leftBraces += 1;
+      }
+      if (char === "}") {
+        leftBraces -= 1;
+        if (leftBraces === 0) {
+          if (onNewReule) onNewReule(currRule);
+          rules.push(currRule);
+          currRule = "";
+        }
+      }
+    }
+
+    return rules;
+  }
+
   removeCSSText = (CSSText: string) => {
     const hash = createHash(CSSText);
     delete this.addedCSSText[hash];