Merge branch 'btzr/enter-key'

2017-09-18 18:16:18 -04:00 · 2017-09-18 18:16:18 -04:00 · c9d5e248aa
parent abb83c17ed cfcdbd48f1
commit c9d5e248aa
8 changed files with 146 additions and 117 deletions
--- a/ui/js/component/form.js
+++ b/ui/js/component/form.js
@ -1,5 +1,6 @@
 import React from "react";
 import FormField from "component/formField";
+import { Icon } from "component/common.js";

 let formFieldCounter = 0;

@ -9,6 +10,29 @@ export function formFieldId() {
  return "form-field-" + ++formFieldCounter;
 }

+export class Form extends React.PureComponent {
+  static propTypes = {
+    onSubmit: React.PropTypes.func.isRequired,
+  };
+
+  constructor(props) {
+    super(props);
+  }
+
+  handleSubmit(event) {
+    event.preventDefault();
+    this.props.onSubmit();
+  }
+
+  render() {
+    return (
+      <form onSubmit={event => this.handleSubmit(event)}>
+        {this.props.children}
+      </form>
+    );
+  }
+}
+
 export class FormRow extends React.PureComponent {
  static propTypes = {
    label: React.PropTypes.oneOfType([
@ -131,3 +155,27 @@ export class FormRow extends React.PureComponent {
    );
  }
 }
+
+export const Submit = props => {
+  const { title, label, icon, disabled } = props;
+
+  const className =
+    "button-block" +
+    " button-primary" +
+    " button-set-item" +
+    " button--submit" +
+    (disabled ? " disabled" : "");
+
+  const content = (
+    <span className="button__content">
+      {"icon" in props ? <Icon icon={icon} fixed={true} /> : null}
+      {label ? <span className="button-label">{label}</span> : null}
+    </span>
+  );
+
+  return (
+    <button type="submit" className={className} title={title}>
+      {content}
+    </button>
+  );
+};
--- a/ui/js/component/inviteNew/view.jsx
+++ b/ui/js/component/inviteNew/view.jsx
@ -1,7 +1,6 @@
 import React from "react";
 import { BusyMessage, CreditAmount } from "component/common";
-import Link from "component/link";
-import { FormRow } from "component/form.js";
+import { Form, FormRow, Submit } from "component/form.js";

 class FormInviteNew extends React.PureComponent {
  constructor(props) {
@ -18,16 +17,16 @@ class FormInviteNew extends React.PureComponent {
    });
  }

-  handleSubmit(event) {
-    event.preventDefault();
-    this.props.inviteNew(this.state.email);
+  handleSubmit() {
+    const { email } = this.state;
+    this.props.inviteNew(email);
  }

  render() {
    const { errorMessage, isPending } = this.props;

    return (
-      <form>
+      <Form onSubmit={this.handleSubmit.bind(this)}>
        <FormRow
          type="text"
          label="Email"
@ -40,16 +39,9 @@ class FormInviteNew extends React.PureComponent {
          }}
        />
        <div className="form-row-submit">
-          <Link
-            button="primary"
-            label={__("Send Invite")}
-            disabled={isPending}
-            onClick={event => {
-              this.handleSubmit(event);
-            }}
-          />
+          <Submit label={__("Send Invite")} disabled={isPending} />
        </div>
-      </form>
+      </Form>
    );
  }
 }
--- a/ui/js/component/publishForm/view.jsx
+++ b/ui/js/component/publishForm/view.jsx
@ -2,7 +2,7 @@ import React from "react";
 import lbry from "lbry";
 import lbryuri from "lbryuri";
 import FormField from "component/formField";
-import { FormRow } from "component/form.js";
+import { Form, FormRow, Submit } from "component/form.js";
 import Link from "component/link";
 import FormFieldPrice from "component/formFieldPrice";
 import Modal from "modal/modal";
@ -59,11 +59,7 @@ class PublishForm extends React.PureComponent {
    if (!fetchingChannels) fetchChannelListMine();
  }

-  handleSubmit(event) {
-    if (typeof event !== "undefined") {
-      event.preventDefault();
-    }
-
+  handleSubmit() {
    this.setState({
      submitting: true,
    });
@ -534,11 +530,7 @@ class PublishForm extends React.PureComponent {

    return (
      <main className="main--single-column">
-        <form
-          onSubmit={event => {
-            this.handleSubmit(event);
-          }}
-        >
+        <Form onSubmit={this.handleSubmit.bind(this)}>
          <section className="card">
            <div className="card__title-primary">
              <h4>{__("Content")}</h4>
@ -872,12 +864,10 @@ class PublishForm extends React.PureComponent {
          </section>

          <div className="card-series-submit">
-            <Link
-              button="primary"
-              label={submitLabel}
-              onClick={event => {
-                this.handleSubmit(event);
-              }}
+            <Submit
+              label={
+                !this.state.submitting ? __("Publish") : __("Publishing...")
+              }
              disabled={
                this.state.submitting ||
                (this.state.uri &&
@ -892,9 +882,8 @@ class PublishForm extends React.PureComponent {
              onClick={this.props.back}
              label={__("Cancel")}
            />
-            <input type="submit" className="hidden" />
          </div>
-        </form>
+        </Form>

        <Modal
          isOpen={this.state.modal == "publishStarted"}
--- a/ui/js/component/userEmailNew/view.jsx
+++ b/ui/js/component/userEmailNew/view.jsx
@ -1,6 +1,6 @@
 import React from "react";
 import Link from "component/link";
-import { FormRow } from "component/form.js";
+import { Form, FormRow, Submit } from "component/form.js";

 class UserEmailNew extends React.PureComponent {
  constructor(props) {
@ -17,20 +17,16 @@ class UserEmailNew extends React.PureComponent {
    });
  }

-  handleSubmit(event) {
-    event.preventDefault();
-    this.props.addUserEmail(this.state.email);
+  handleSubmit() {
+    const { email } = this.state;
+    this.props.addUserEmail(email);
  }

  render() {
    const { errorMessage, isPending } = this.props;

    return (
-      <form
-        onSubmit={event => {
-          this.handleSubmit(event);
-        }}
-      >
+      <Form onSubmit={this.handleSubmit.bind(this)}>
        <p>
          {__(
            "This process is required to prevent abuse of the rewards program."
@ -53,16 +49,9 @@ class UserEmailNew extends React.PureComponent {
          }}
        />
        <div className="form-row-submit">
-          <Link
-            button="primary"
-            label="Next"
-            disabled={isPending}
-            onClick={event => {
-              this.handleSubmit(event);
-            }}
-          />
+          <Submit label="Next" disabled={isPending} />
        </div>
-      </form>
+      </Form>
    );
  }
 }
--- a/ui/js/component/userEmailVerify/view.jsx
+++ b/ui/js/component/userEmailVerify/view.jsx
@ -1,6 +1,6 @@
 import React from "react";
 import Link from "component/link";
-import { FormRow } from "component/form.js";
+import { Form, FormRow, Submit } from "component/form.js";

 class UserEmailVerify extends React.PureComponent {
  constructor(props) {
@ -17,19 +17,15 @@ class UserEmailVerify extends React.PureComponent {
    });
  }

-  handleSubmit(event) {
-    event.preventDefault();
-    this.props.verifyUserEmail(this.state.code);
+  handleSubmit() {
+    const { code } = this.state;
+    this.props.verifyUserEmail(code);
  }

  render() {
    const { errorMessage, isPending } = this.props;
    return (
-      <form
-        onSubmit={event => {
-          this.handleSubmit(event);
-        }}
-      >
+      <Form onSubmit={this.handleSubmit.bind(this)}>
        <p>{__("Please enter the verification code emailed to you.")}</p>
        <FormRow
          type="text"
@ -50,16 +46,9 @@ class UserEmailVerify extends React.PureComponent {
          </p>
        </div>
        <div className="form-row-submit form-row-submit--with-footer">
-          <Link
-            button="primary"
-            label={__("Verify")}
-            disabled={this.state.submitting}
-            onClick={event => {
-              this.handleSubmit(event);
-            }}
-          />
+          <Submit label={__("Verify")} disabled={this.state.submitting} />
        </div>
-      </form>
+      </Form>
    );
  }
 }
--- a/ui/js/component/walletSend/view.jsx
+++ b/ui/js/component/walletSend/view.jsx
@ -1,54 +1,69 @@
 import React from "react";
-import Link from "component/link";
-import { FormRow } from "component/form";
+import { Form, FormRow, Submit } from "component/form";
 import lbryuri from "lbryuri";

-const WalletSend = props => {
-  const { sendToAddress, setAmount, setAddress, amount, address } = props;
+class WalletSend extends React.PureComponent {
+  handleSubmit() {
+    const { amount, address, sendToAddress } = this.props;
+    const validSubmit = parseFloat(amount) > 0.0 && address;

-  return (
-    <section className="card">
-      <form onSubmit={sendToAddress}>
-        <div className="card__title-primary">
-          <h3>{__("Send Credits")}</h3>
-        </div>
-        <div className="card__content">
-          <FormRow
-            label={__("Amount")}
-            postfix={__("LBC")}
-            step="0.01"
-            min="0"
-            type="number"
-            placeholder="1.23"
-            size="10"
-            onChange={setAmount}
-            value={amount}
-          />
-        </div>
-        <div className="card__content">
-          <FormRow
-            label={__("Recipient Address")}
-            placeholder="bbFxRyXXXXXXXXXXXZD8nE7XTLUxYnddTs"
-            type="text"
-            size="60"
-            onChange={setAddress}
-            value={address}
-            regexp={lbryuri.REGEXP_ADDRESS}
-            trim={true}
-          />
-          <div className="form-row-submit">
-            <Link
-              button="primary"
-              label={__("Send")}
-              onClick={sendToAddress}
-              disabled={!(parseFloat(amount) > 0.0) || !address}
-            />
-            <input type="submit" className="hidden" />
+    if (validSubmit) {
+      sendToAddress();
+    }
+  }
+
+  render() {
+    const {
+      closeModal,
+      modal,
+      setAmount,
+      setAddress,
+      amount,
+      address,
+      error,
+    } = this.props;
+
+    return (
+      <section className="card">
+        <Form onSubmit={this.handleSubmit.bind(this)}>
+          <div className="card__title-primary">
+            <h3>{__("Send Credits")}</h3>
          </div>
-        </div>
-      </form>
-    </section>
-  );
-};
+          <div className="card__content">
+            <FormRow
+              label={__("Amount")}
+              postfix={__("LBC")}
+              step="0.01"
+              min="0"
+              type="number"
+              placeholder="1.23"
+              size="10"
+              onChange={setAmount}
+              value={amount}
+            />
+          </div>
+          <div className="card__content">
+            <FormRow
+              label={__("Recipient Address")}
+              placeholder="bbFxRyXXXXXXXXXXXZD8nE7XTLUxYnddTs"
+              type="text"
+              size="60"
+              onChange={setAddress}
+              value={address}
+              regexp={lbryuri.REGEXP_ADDRESS}
+              trim={true}
+            />
+            <div className="form-row-submit">
+              <Submit
+                label={__("Send")}
+                disabled={!(parseFloat(amount) > 0.0) || !address}
+              />
+            </div>
+          </div>
+        </Form>
+      </section>
+    );
+  }
+}

 export default WalletSend;
--- a/ui/scss/_gui.scss
+++ b/ui/scss/_gui.scss
@ -3,6 +3,7 @@ html
  height: 100%;
  font-size: var(--font-size);
 }
+
 body
 {
  color: var(--text-color);
--- a/ui/scss/component/_button.scss
+++ b/ui/scss/component/_button.scss
@ -86,3 +86,9 @@ $button-focus-shift: 12%;
 {
  box-shadow: none !important;
 }
+
+.button--submit {
+    font-family: inherit;
+    font-size: inherit;
+    line-height: 0;
+}