feat: Add AppBarButton support css-in-js

Author: myxvisual

src/AppBarButton/index.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as PropTypes from "prop-types";
 
-import ElementState from "../ElementState";
+import PseudoClassesComponent from "../PseudoClassesComponent";
 import Icon from "../Icon";
 
 export interface DataProps {
@@ -42,30 +42,37 @@ export class AppBarButtonButton extends React.Component<AppBarButtonButtonProps>
       iconStyle,
       hoverStyle,
       label,
+      className,
       labelPosition,
       ...attributes
     } = this.props;
     const { theme } = this.context;
-    const styles = getStyles(this);
 
-    return (
-      <ElementState
-        {...attributes as any}
-        style={styles.root}
-        hoverStyle={hoverStyle || {
-          background: theme.listAccentLow
-        }}
-      >
-        <div>
-          <Icon style={styles.icon}>
-            {icon}
-          </Icon>
-          {labelPosition !== "collapsed" && <p style={styles.label}>
-            {label}
-          </p>}
-        </div>
-      </ElementState>
+    const styles = theme.prepareStyles({
+      styles: getStyles(this),
+      className: "app-bar-button"
+    });
+
+    const rootProps = {
+      ...attributes,
+      style: styles.root.style,
+      className: theme.classNames(className, styles.root.className)
+    };
+    const normalRender = (
+      <div {...rootProps}>
+        <Icon {...styles.icon}>
+          {icon}
+        </Icon>
+        {labelPosition !== "collapsed" && <p {...styles.label}>
+          {label}
+        </p>}
+      </div>
     );
+    return theme.useInlineStyle ? (
+      <PseudoClassesComponent {...rootProps}>
+        {normalRender}
+      </PseudoClassesComponent>
+    ) : normalRender;
   }
 }
 
@@ -74,7 +81,15 @@ function getStyles(AppBarButtonButton: AppBarButtonButton): {
   icon?: React.CSSProperties;
   label?: React.CSSProperties;
 } {
-  const { context, props: { labelPosition, style, iconStyle } } = AppBarButtonButton;
+  const {
+    context,
+    props: {
+      labelPosition,
+      style,
+      iconStyle,
+      hoverStyle
+    }
+  } = AppBarButtonButton;
   const { theme } = context;
   const { prefixStyle } = theme;
   const flexDirection: any = {
@@ -99,6 +114,9 @@ function getStyles(AppBarButtonButton: AppBarButtonButton): {
       maxWidth: isRight ? 120 : 72,
       cursor: "default",
       transition: "all .25s",
+      "&:hover": hoverStyle || {
+        background: theme.listAccentLow
+      },
       ...style
     }),
     label: {

src/Button/index.tsx

@@ -64,6 +64,7 @@ export class Button extends React.Component<ButtonProps> {
     const {
       borderSize,
       style,
+      className,
       hoverStyle,
       children,
       icon,
@@ -77,9 +78,8 @@ export class Button extends React.Component<ButtonProps> {
     } = this.props;
     const { theme } = this.context;
 
-    const rootAttributes = theme.styleManager.setStyleToManager({
+    const rootAttributes = theme.prepareStyle({
       className: "button-root",
-      theme,
       style: {
         display: "inline-block",
         verticalAlign: "middle",
@@ -102,12 +102,12 @@ export class Button extends React.Component<ButtonProps> {
           cursor: "not-allowed",
           color: theme.baseMedium
         }
-      }
+      },
+      extendsClassName: className
     });
 
-    const iconAttributes = theme.styleManager.setStyleToManager({
+    const iconAttributes = theme.prepareStyle({
       className: "button-icon",
-      theme,
       style: {
         padding: "0 4px",
         display: "inline-block",

src/ElementState.tsx

@@ -156,8 +156,8 @@ export default class ElementState extends React.Component<ElementStateProps, {}>
       ...attributes,
       style: this.context.theme.prefixStyle({
         transition: "all .25s",
-        ...(disabled ? disabledStyle : void 0),
-        ...style
+        ...style,
+        ...(disabled ? disabledStyle : void 0)
       }),
       onMouseEnter: hoverStyle ? this.hover : onMouseEnter,
       onMouseLeave: hoverStyle ? this.unHover : onMouseLeave,

src/PseudoClassesComponent.tsx

@@ -14,7 +14,7 @@ export class PseudoClassesComponent extends React.Component<any> {
     const { style, children, ...attributes } = this.props;
 
     if (style) {
-      const { primaryObject, secondaryObject } = spreadObject(this.props, pseudoClassesNames);
+      const { primaryObject, secondaryObject } = spreadObject(style, pseudoClassesNames);
       return (
         <ElementState
           {...attributes}

src/common/spreadObject.ts

@@ -5,7 +5,7 @@ export function spreadObject(obj: any, keys: string[]) {
   const symbols = canCheckObjectSymbol ? Object.getOwnPropertySymbols(obj) : null;
   const symbolsSize = canCheckObjectSymbol ? symbols.length : 0;
 
-  for (let property of obj) {
+  for (let property in obj) {
     if (Object.prototype.hasOwnProperty.call(obj, property) && keys.indexOf(property) < 0) {
       primaryObject[property] = obj[property];
     } else {

src/styles/getTheme.ts

@@ -128,6 +128,32 @@ export default function getTheme(themeConfig?: ThemeConfig): ReactUWP.ThemeType
 
     isDarkTheme: isDark,
     prefixStyle: prefixAll(userAgent),
+    prepareStyle(config, callback) {
+      const { extendsClassName, ...managerConfig } = config;
+      if (this.useInlineStyle) {
+        managerConfig.className += extendsClassName ? ` ${extendsClassName}` : "";
+        return managerConfig;
+      } else {
+        const styleWithClasses = this.styleManager.setStyleToManager(managerConfig, callback);
+        styleWithClasses.className += extendsClassName ? ` ${extendsClassName}` : "";
+        return styleWithClasses;
+      }
+    },
+    prepareStyles(config, callback) {
+      if (this.useInlineStyle) {
+        const { styles } = config;
+        for (let key in styles) {
+          styles[key] = { style: styles[key] };
+        }
+        return config.styles;
+      } else {
+        const styleWithClasses = this.styleManager.setStylesToManager(config, callback);
+        return styleWithClasses;
+      }
+    },
+    classNames(...classNames) {
+      return classNames.reduce((prev, curr) => (prev || "") + curr ? ` ${curr}` : "");
+    },
 
     toasts: [],
 

typings/index.d.ts

@@ -9,6 +9,20 @@
 
 export as namespace ReactUWP;
 
+export interface CustomCSSProperties extends React.CSSProperties {
+  "&:hover"?: React.CSSProperties;
+  "&:active"?: React.CSSProperties;
+  "&:visited"?: React.CSSProperties;
+  "&:focus"?: React.CSSProperties;
+  "&:disabled"?: React.CSSProperties;
+  dynamicStyle?: React.CSSProperties;
+}
+
+export interface StyleWithClasses {
+  style?: CustomCSSProperties;
+  className?: string;
+}
+
 export interface ScrollReveal {
   rootElm?: HTMLElement;
   animated?: boolean;
@@ -97,6 +111,18 @@ export interface ThemeType {
   chromeWhite?: string;
 
   prefixStyle?: (style?: React.CSSProperties) => React.CSSProperties;
+  prepareStyle?: (config?: {
+    style?: CustomCSSProperties;
+    className?: string;
+    extendsClassName?: string;
+  }, callback?: (theme?: ReactUWP.ThemeType) => StyleWithClasses) => StyleWithClasses ;
+  prepareStyles?: (config?: {
+    styles: { [key: string]: StyleWithClasses | CustomCSSProperties };
+    className?: string;
+    extendsClassName?: string;
+  }, callback?: (theme?: ReactUWP.ThemeType) => { [key: string]: StyleWithClasses }) => { [key: string]: StyleWithClasses };
+  classNames?: (...classNames: string[]) => string;
+
   isDarkTheme?: boolean;
   updateTheme?: (theme: ThemeType) => void;
   forceUpdateTheme?: (theme: ThemeType) => void;