Merge branch 'reintegrate-styled-classes'

1 files changed, 74 insertions, 0 deletions

diff --git a/app/components/AppButton.js b/app/components/AppButton.js
new file mode 100644
index 0000000000..1b8f50cad2
--- /dev/null
+++ b/app/components/AppButton.js
@@ -0,0 +1,74 @@
+// @flow
+import * as React from 'react';
+import { Button, Text, Component } from 'reactxp';
+import styles from './AppButtonStyles';
+import blurStyles from './BlurAppButtonStyles';
+import Img from './Img';
+
+export class Label extends Text {}
+
+class BaseButton extends Component {
+  props: {
+    children?: React.Node,
+    disabled: boolean,
+  };
+
+  state = { hovered: false };
+
+  textStyle = () => styles.white;
+  iconStyle = () => styles.white;
+  backgroundStyle = () => (this.state.hovered ? styles.white80 : styles.white);
+
+  onHoverStart = () => (!this.props.disabled ? this.setState({ hovered: true }) : null);
+  onHoverEnd = () => (!this.props.disabled ? this.setState({ hovered: false }) : null);
+  render() {
+    const { children, ...otherProps } = this.props;
+    return (
+      <Button
+        style={[styles.common, this.backgroundStyle()]}
+        onHoverStart={this.onHoverStart}
+        onHoverEnd={this.onHoverEnd}
+        {...otherProps}>
+        {React.Children.map(children, (node) => {
+          if (React.isValidElement(node)) {
+            let updatedProps = {};
+
+            if (node.type === Label) {
+              updatedProps = { style: [styles.label, this.textStyle()] };
+            }
+
+            if (node.type === Img) {
+              updatedProps = { tintColor: 'currentColor', style: [styles.icon, this.iconStyle()] };
+            }
+
+            return React.cloneElement(node, updatedProps);
+          } else {
+            return <Label style={[styles.label, this.textStyle()]}>{children}</Label>;
+          }
+        })}
+      </Button>
+    );
+  }
+}
+
+export class RedButton extends BaseButton {
+  backgroundStyle = () => (this.state.hovered ? styles.redHover : styles.red);
+}
+
+export class GreenButton extends BaseButton {
+  backgroundStyle = () => (this.state.hovered ? styles.greenHover : styles.green);
+}
+
+export class BlueButton extends BaseButton {
+  backgroundStyle = () => (this.state.hovered ? styles.blueHover : styles.blue);
+}
+
+export class TransparentButton extends BaseButton {
+  backgroundStyle = () =>
+    this.state.hovered ? blurStyles.transparentHover : blurStyles.transparent;
+}
+
+export class RedTransparentButton extends BaseButton {
+  backgroundStyle = () =>
+    this.state.hovered ? blurStyles.redTransparentHover : blurStyles.redTransparent;
+}