feat: Add scrollBar style selector to theme

Close #21
myxvisual · Sep 26, 2017 · 20a4c7b · 20a4c7b
1 parent f83bc5e
commit 20a4c7b
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 17 deletions.
diff --git a/src/Theme/getBaseCSSText.tsx b/src/Theme/getBaseCSSText.tsx
@@ -1,5 +1,5 @@
 
-const getBaseCSS = (theme: ReactUWP.ThemeType, themeClassName = "uwp-base") => `* {
+const getBaseCSS = (theme: ReactUWP.ThemeType, themeClassName = "uwp-base", scrollBarStyleSelector = "*") => `* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
@@ -13,23 +13,23 @@ body {
   margin: 0;
 }
 
-*::-webkit-scrollbar-track {
+${scrollBarStyleSelector}::-webkit-scrollbar-track {
   background-color: ${theme.chromeLow};
 }
 
-*::-webkit-scrollbar-thumb {
+${scrollBarStyleSelector}::-webkit-scrollbar-thumb {
   background-color: ${theme.useFluentDesign ? theme.baseLow : theme.baseMediumLow};
 }
 
-*::-webkit-scrollbar:vertical {
+${scrollBarStyleSelector}::-webkit-scrollbar:vertical {
   width: 6px;
 }
 
-*::-webkit-scrollbar:horizontal {
+${scrollBarStyleSelector}::-webkit-scrollbar:horizontal {
   height: 6px
 }
 
-*::-webkit-scrollbar {
+${scrollBarStyleSelector}::-webkit-scrollbar {
   -webkit-appearance: none
 }
 

diff --git a/src/Theme/index.doc.json b/src/Theme/index.doc.json
@@ -30,31 +30,37 @@
           "name": "theme",
           "documentation": "Set theme object. [ThemeType](https://github.com/myxvisual/react-uwp/blob/master/typings/index.d.ts#L43), Usually use [getTheme](https://github.com/myxvisual/react-uwp/blob/master/src/styles/getTheme.ts#L28) function to get it.",
           "isRequired": false,
-          "type": "any"
+          "type": "prototype"
         },
         {
           "name": "autoSaveTheme",
           "documentation": "For simple development, autoSaveTheme can read and save theme to `localStorage`. use global context `theme.saveTheme` method to save.",
           "isRequired": false,
-          "type": "boolean"
+          "type": "prototype"
         },
         {
           "name": "themeWillUpdate",
           "documentation": "set theme will update callback.",
           "isRequired": false,
-          "type": "(theme?: any) => void"
+          "type": "prototype"
         },
         {
           "name": "onGeneratedAcrylic",
           "documentation": "onGeneratedAcrylic callback, base acrylic textures is base64 url image, for production, you can set this callback, post image to your server, and update theme(use this callback will not auto update theme).",
           "isRequired": false,
-          "type": "(theme?: any) => void"
+          "type": "prototype"
         },
         {
           "name": "needGenerateAcrylic",
           "documentation": "for production if you have generated acrylic textures, you can disabled generation acrylic textures.",
           "isRequired": false,
-          "type": "boolean"
+          "type": "prototype"
+        },
+        {
+          "name": "scrollBarStyleSelector",
+          "documentation": "default is \"*\", set all element scroll bar style to uwp style.",
+          "isRequired": false,
+          "type": "prototype"
         }
       ]
     },
@@ -71,7 +77,7 @@
         {
           "name": "currTheme",
           "isRequired": false,
-          "type": "any"
+          "type": "prototype"
         }
       ]
     },
@@ -107,11 +113,11 @@
       "exports": [
         {
           "name": "prototype",
-          "type": "prototype"
+          "type": "any"
         },
         {
           "name": "defaultProps",
-          "initializerText": " {\n    needGenerateAcrylic: true,\n    onGeneratedAcrylic: themeCallback,\n    themeWillUpdate: themeCallback\n  }",
+          "initializerText": " {\n    needGenerateAcrylic: true,\n    onGeneratedAcrylic: themeCallback,\n    themeWillUpdate: themeCallback,\n    scrollBarStyleSelector: \"*\"\n  }",
           "type": "ThemeProps"
         },
         {
@@ -165,7 +171,7 @@
         },
         {
           "name": "bindNewThemeMethods",
-          "initializerText": " (theme: ReactUWP.ThemeType) => {\n    const styleManager =  new StyleManager({ theme });\n    styleManager.addCSSTextWithUpdate(getBaseCSSText(theme));\n    Object.assign(theme, {\n      desktopBackground: `url(${theme.desktopBackgroundImage}) no-repeat fixed top left / cover`,\n      updateTheme: this.updateTheme,\n      saveTheme: this.saveTheme,\n      addToast: this.addToast,\n      updateToast: this.updateToast,\n      deleteToast: this.deleteToast,\n      scrollRevealListener: this.handleScrollReveal,\n      generateAcrylicTextures: this.generateAcrylicTextures,\n      forceUpdateTheme: this.forceUpdateTheme,\n      styleManager\n    } as ReactUWP.ThemeType);\n  }",
+          "initializerText": " (theme: ReactUWP.ThemeType) => {\n    const { scrollBarStyleSelector } = this.props;\n    const styleManager =  new StyleManager({ theme });\n    styleManager.addCSSTextWithUpdate(getBaseCSSText(theme, \"uwp-base\", scrollBarStyleSelector));\n    Object.assign(theme, {\n      desktopBackground: `url(${theme.desktopBackgroundImage}) no-repeat fixed top left / cover`,\n      updateTheme: this.updateTheme,\n      saveTheme: this.saveTheme,\n      addToast: this.addToast,\n      updateToast: this.updateToast,\n      deleteToast: this.deleteToast,\n      scrollRevealListener: this.handleScrollReveal,\n      generateAcrylicTextures: this.generateAcrylicTextures,\n      forceUpdateTheme: this.forceUpdateTheme,\n      styleManager\n    } as ReactUWP.ThemeType);\n  }",
           "type": "(theme: any) => void"
         },
         {

diff --git a/src/Theme/index.tsx b/src/Theme/index.tsx
@@ -33,6 +33,10 @@ export interface DataProps {
    * for production if you have generated acrylic textures, you can disabled generation acrylic textures.
    */
   needGenerateAcrylic?: boolean;
+  /**
+   * default is "*", set all element scroll bar style to uwp style.
+   */
+  scrollBarStyleSelector?: string;
 }
 
 export interface ThemeProps extends DataProps, React.HTMLAttributes<HTMLDivElement> {}
@@ -49,7 +53,8 @@ export class Theme extends React.Component<ThemeProps, ThemeState> {
   static defaultProps: ThemeProps = {
     needGenerateAcrylic: true,
     onGeneratedAcrylic: themeCallback,
-    themeWillUpdate: themeCallback
+    themeWillUpdate: themeCallback,
+    scrollBarStyleSelector: "*"
   };
   static childContextTypes = {
     theme: PropTypes.object
@@ -185,8 +190,9 @@ export class Theme extends React.Component<ThemeProps, ThemeState> {
   }
 
   bindNewThemeMethods = (theme: ReactUWP.ThemeType) => {
+    const { scrollBarStyleSelector } = this.props;
     const styleManager =  new StyleManager({ theme });
-    styleManager.addCSSTextWithUpdate(getBaseCSSText(theme));
+    styleManager.addCSSTextWithUpdate(getBaseCSSText(theme, "uwp-base", scrollBarStyleSelector));
     Object.assign(theme, {
       desktopBackground: `url(${theme.desktopBackgroundImage}) no-repeat fixed top left / cover`,
       updateTheme: this.updateTheme,
@@ -424,6 +430,7 @@ export class Theme extends React.Component<ThemeProps, ThemeState> {
       className,
       needGenerateAcrylic,
       themeWillUpdate,
+      scrollBarStyleSelector,
       ...attributes
     } = this.props;
     const { currTheme } = this.state;