feat: Add Link support css-in-js

myxvisual · Aug 8, 2017 · 83e579e · 83e579e
1 parent 012d46d
commit 83e579e
Showing 1 changed file with 21 additions and 46 deletions.
diff --git a/src/Link/index.tsx b/src/Link/index.tsx
@@ -1,17 +1,14 @@
 import * as React from "react";
 import * as PropTypes from "prop-types";
+import PseudoClasses from "../PseudoClasses";
 
 export interface DataProps {
   href?: string;
 }
 export interface LinkProps extends React.HTMLAttributes<HTMLAnchorElement>, DataProps {}
 
-export interface LinkState {
-  hover?: boolean;
-}
-
 const emptyFunc = () => {};
-export default class Link extends React.Component<LinkProps, LinkState> {
+export default class Link extends React.Component<LinkProps> {
   static defaultProps: LinkProps = {
     onMouseEnter: emptyFunc,
     onMouseLeave: emptyFunc
@@ -20,53 +17,31 @@ export default class Link extends React.Component<LinkProps, LinkState> {
   static contextTypes = { theme: PropTypes.object };
   context: { theme: ReactUWP.ThemeType };
 
-  state: LinkState = {};
-  shouldComponentUpdate(nextProps: LinkProps, nextState: LinkState, nextContext: any) {
-    return nextProps !== this.props || nextState !== this.state || nextContext.theme !== this.context;
-  }
-
-  mouseEnterHandler = (e: React.MouseEvent<HTMLAnchorElement>) => {
-    this.setState({ hover: true });
-    this.props.onMouseEnter(e);
-  }
-
-  mouseLeaveHandler = (e: React.MouseEvent<HTMLAnchorElement>) => {
-    this.setState({ hover: false });
-    this.props.onMouseLeave(e);
-  }
-
   render() {
-    const { onMouseEnter, onMouseLeave, ...attributes } = this.props;
+    const { style, className, ...attributes } = this.props;
     const { theme } = this.context;
-    const styles = getStyles(this);
-
-    return (
-      <a
-        {...attributes}
-        onMouseEnter={this.mouseEnterHandler}
-        onMouseLeave={this.mouseLeaveHandler}
-        style={styles.root}
-      />
-    );
-  }
-}
-
-function getStyles(link: Link): {
-  root?: React.CSSProperties;
-} {
-  const { context, props: { style }, state: { hover } } = link;
-  const { theme } = context;
-  const { prefixStyle } = theme;
-
-  return {
-    root: theme.prefixStyle({
+    const inlineStyle = theme.prefixStyle({
       fontSize: 14,
-      color: hover ? theme.baseMedium : theme.accent,
+      color: theme.accent,
       cursor: "pointer",
       textDecoration: "none",
       transition: "all .25s 0s ease-in-out",
       background: "none",
+      "&:hover": {
+        color: theme.baseMedium
+      },
       ...style
-    })
-  };
+    });
+    const styleClasses = theme.prepareStyle({
+      className: "link",
+      style: inlineStyle,
+      extendsClassName: className
+    });
+
+    return (
+      <PseudoClasses {...styleClasses}>
+        <a {...attributes} />
+      </PseudoClasses>
+    );
+  }
 }