!1 Merge back to master

Merge pull request !1 from dev branch

client/components/control/button.jsx

@@ -0,0 +1,102 @@
+import React from "react";
+
+const buttonClassName = "btn";
+
+const styleContainer = {
+  display: "inline-block",
+  height: "2.5rem"
+};
+
+const styleIcon = {
+  lineHeight: "2.5rem",
+  height: "2.5rem",
+  margin: "0 -0.25rem 0 0.5rem"
+};
+
+const styleBase = {
+  background: "transparent",
+  lineHeight: "2.5rem",
+  fontSize: "0.875rem",
+  border: "none",
+  outline: "none",
+  padding: "0 0.75rem",
+  textAlign: "center"
+};
+
+const styleDefault = {
+  ...styleBase
+};
+
+const styleStr = `
+  .${buttonClassName}:hover {
+    opacity: 0.7;
+    transition: opacity 0.25s;
+  }
+
+  .${buttonClassName}:active {
+    opacity: 0.7;
+    transition: opacity 0.25s;
+  }
+
+  .${buttonClassName}:disabled {
+    opacity: 0.2;
+    transition: opacity 0.25s;
+  }
+
+  button::-moz-focus-inner {
+    border: 0;
+  }
+`;
+
+export class Button extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.styleDefault = { ...styleDefault, ...this.props.styleDefault };
+    this.styleStr = this.props.styleStr ? this.props.styleStr : styleStr;
+  }
+
+  onClick = e => {
+    if (this.props.onClick && this.props.isEnabled) {
+      this.props.onClick(e);
+    }
+  };
+
+  render() {
+    const style = this.props.isEnabled ? this.styleDefault : this.styleDisabled;
+    const icon =
+      this.props.icon != null ? (
+        <span style={{ ...styleIcon, ...this.props.styleIcon }}>
+          {this.props.icon}
+        </span>
+      ) : (
+        <span />
+      );
+
+    return (
+      <div
+        style={{ ...styleContainer, ...this.props.styleContainer }}
+        className={`${buttonClassName} ${this.props.className}`}
+        onClick={this.onClick}
+      >
+        {icon}
+        <button style={style}>
+          <span style={this.props.styleLabel}>{this.props.label}</span>
+          <style>{this.styleStr}</style>
+        </button>
+      </div>
+    );
+  }
+}
+
+Button.defaultProps = {
+  className: "btn",
+  isEnabled: true,
+  icon: null,
+  onClick: () => true,
+  styleContainer: {},
+  styleDefault: {},
+  styleDisabled: {},
+  styleLabel: {},
+  styleIcon: {},
+  styleStr: undefined
+};