!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
+};

client/components/control/input.jsx

@@ -0,0 +1,128 @@
+import React from "react";
+
+const styleContainer = {
+  backgroundColor: "#ccc",
+  display: "inline-block",
+  height: "2.5rem"
+};
+
+const styleIcon = {
+  lineHeight: "2.5rem",
+  height: "2.5rem",
+  margin: "0 0.25rem 0 0.5rem"
+};
+
+const styleInputBase = {
+  backgroundColor: "transparent",
+  border: "none",
+  display: "inline-block",
+  fontSize: "0.875rem",
+  height: "2.5rem",
+  lineHeight: "2.5rem",
+  outline: "none",
+  overflowY: "hidden",
+  padding: "0 0.75rem",
+  verticalAlign: "middle"
+};
+
+const styleDefault = {
+  ...styleInputBase,
+  color: "#333"
+};
+
+const styleInvalid = {
+  ...styleInputBase,
+  color: "#e74c3c"
+};
+
+const inputClassName = "qs-input";
+const styleStr = `
+.${inputClassName}:hover {
+  // box-shadow: 0px 0px -5px rgba(0, 0, 0, 1);
+  opacity: 0.7;
+  transition: opacity 0.25s;
+}
+
+.${inputClassName}:active {
+  // box-shadow: 0px 0px -5px rgba(0, 0, 0, 1);
+  opacity: 0.7;
+  transition: opacity 0.25s;
+}
+
+.${inputClassName}:disabled {
+  color: #ccc;
+}
+`;
+
+export class Input extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = { isValid: true };
+    this.inputRef = undefined;
+  }
+
+  onChange = e => {
+    this.props.onChange(e.target.value);
+    this.props.onChangeEvent(e);
+    this.props.onChangeTarget(e.target);
+    this.setState({ isValid: this.props.validate(e.target.value) });
+  };
+
+  getRef = input => {
+    this.inputRef = input;
+    this.props.inputRef(this.inputRef);
+  };
+
+  render() {
+    const style = this.state.isValid ? styleDefault : styleInvalid;
+    const icon =
+      this.props.icon != null ? (
+        <span style={styleIcon}>{this.props.icon}</span>
+      ) : (
+        <span />
+      );
+
+    return (
+      <div style={{ ...styleContainer, ...this.props.styleContainer }}>
+        {icon}
+        <input
+          style={{
+            ...styleDefault,
+            ...this.props.style,
+            width: this.props.width
+          }}
+          className={`${inputClassName} ${this.props.className}`}
+          disabled={this.props.disabled}
+          readOnly={this.props.readOnly}
+          maxLength={this.props.maxLength}
+          placeholder={this.props.placeholder}
+          type={this.props.type}
+          onChange={this.onChange}
+          value={this.props.value}
+          ref={this.getRef}
+        />
+        <style>{styleStr}</style>
+      </div>
+    );
+  }
+}
+
+Input.defaultProps = {
+  className: "input",
+  maxLength: "32",
+  placeholder: "placeholder",
+  readOnly: false,
+  style: {},
+  styleContainer: {},
+  styleInvalid: {},
+  type: "text",
+  disabled: false,
+  width: "auto",
+  value: "",
+  icon: null,
+  onChange: () => true,
+  onChangeEvent: () => true,
+  onChangeTarget: () => true,
+  validate: () => true,
+  inputRef: () => true
+};