feat: Add PseudoClassesComponent

src/ElementState.tsx

@@ -51,8 +51,8 @@ export default class ElementState extends React.Component<ElementStateProps, {}>
   };
 
   static contextTypes = { theme: PropTypes.object };
-
   context: { theme: ReactUWP.ThemeType };
+
   rootElm: HTMLElement;
   originStyle: CSSStyleDeclaration;
   visitedStyle: React.CSSProperties = {};

src/PseudoClassesComponent.tsx

@@ -0,0 +1,43 @@
+import * as React from "react";
+import * as PropTypes from "prop-types";
+
+import ElementState, { ElementStateProps } from "./ElementState";
+import spreadObject from "./common/spreadObject";
+
+const pseudoClassesNames = ["&:hover", "&:active", "&:visited", "&:focus", "&:disabled"];
+
+export class PseudoClassesComponent extends React.Component<any> {
+  static contextTypes = { theme: PropTypes.object };
+  context: { theme: ReactUWP.ThemeType };
+
+  render () {
+    const { style, children, ...attributes } = this.props;
+
+    if (style) {
+      const { primaryObject, secondaryObject } = spreadObject(this.props, pseudoClassesNames);
+      return (
+        <ElementState
+          {...attributes}
+          style={primaryObject}
+          {...{
+            hoverStyle: secondaryObject["&:hover"],
+            activeStyle: secondaryObject["&:active"],
+            visitedStyle: secondaryObject["&:visited"],
+            focusStyle: secondaryObject["&:focus"],
+            disabledStyle: secondaryObject["&:disabled"]
+          }}
+        >
+          {children}
+        </ElementState>
+      );
+    } else {
+      return (
+        <ElementState {...attributes}>
+          {children}
+        </ElementState>
+      );
+    }
+  }
+}
+
+export default PseudoClassesComponent;

src/common/spreadObject.ts

@@ -1,4 +1,4 @@
-function spreadObject(obj: any, keys: string[]) {
+export function spreadObject(obj: any, keys: string[]) {
   const primaryObject: any = {};
   const secondaryObject: any = {};
   const canCheckObjectSymbol = obj !== null && typeof Object.getOwnPropertySymbols === "function";
@@ -24,3 +24,5 @@ function spreadObject(obj: any, keys: string[]) {
 
   return { primaryObject, secondaryObject };
 }
+
+export default spreadObject;