Merge branch 'btzr/enter-key'

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

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 { Form, FormRow, Submit } from "component/form.js";
-import { FormRow } from "component/form.js";
 
 class FormInviteNew extends React.PureComponent {
   constructor(props) {
@@ -18,16 +17,16 @@ class FormInviteNew extends React.PureComponent {
     });
   }
 
-  handleSubmit(event) {
+  handleSubmit() {
-    event.preventDefault();
+    const { email } = this.state;
-    this.props.inviteNew(this.state.email);
+    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
+          <Submit label={__("Send Invite")} disabled={isPending} />
-            button="primary"
-            label={__("Send Invite")}
-            disabled={isPending}
-            onClick={event => {
-              this.handleSubmit(event);
-            }}
-          />
         </div>
-      </form>
+      </Form>
     );
   }
 }

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) {
+  handleSubmit() {
-    if (typeof event !== "undefined") {
-      event.preventDefault();
-    }
-
     this.setState({
       submitting: true,
     });
@@ -534,11 +530,7 @@ class PublishForm extends React.PureComponent {
 
     return (
       <main className="main--single-column">
-        <form
+        <Form onSubmit={this.handleSubmit.bind(this)}>
-          onSubmit={event => {
-            this.handleSubmit(event);
-          }}
-        >
           <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
+            <Submit
-              button="primary"
+              label={
-              label={submitLabel}
+                !this.state.submitting ? __("Publish") : __("Publishing...")
-              onClick={event => {
+              }
-                this.handleSubmit(event);
-              }}
               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"}

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) {
+  handleSubmit() {
-    event.preventDefault();
+    const { email } = this.state;
-    this.props.addUserEmail(this.state.email);
+    this.props.addUserEmail(email);
   }
 
   render() {
     const { errorMessage, isPending } = this.props;
 
     return (
-      <form
+      <Form onSubmit={this.handleSubmit.bind(this)}>
-        onSubmit={event => {
-          this.handleSubmit(event);
-        }}
-      >
         <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
+          <Submit label="Next" disabled={isPending} />
-            button="primary"
-            label="Next"
-            disabled={isPending}
-            onClick={event => {
-              this.handleSubmit(event);
-            }}
-          />
         </div>
-      </form>
+      </Form>
     );
   }
 }

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) {
+  handleSubmit() {
-    event.preventDefault();
+    const { code } = this.state;
-    this.props.verifyUserEmail(this.state.code);
+    this.props.verifyUserEmail(code);
   }
 
   render() {
     const { errorMessage, isPending } = this.props;
     return (
-      <form
+      <Form onSubmit={this.handleSubmit.bind(this)}>
-        onSubmit={event => {
-          this.handleSubmit(event);
-        }}
-      >
         <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
+          <Submit label={__("Verify")} disabled={this.state.submitting} />
-            button="primary"
-            label={__("Verify")}
-            disabled={this.state.submitting}
-            onClick={event => {
-              this.handleSubmit(event);
-            }}
-          />
         </div>
-      </form>
+      </Form>
     );
   }
 }

ui/js/component/walletSend/view.jsx

@@ -1,14 +1,31 @@
 import React from "react";
-import Link from "component/link";
+import { Form, FormRow, Submit } from "component/form";
-import { FormRow } from "component/form";
 import lbryuri from "lbryuri";
 
-const WalletSend = props => {
+class WalletSend extends React.PureComponent {
-  const { sendToAddress, setAmount, setAddress, amount, address } = props;
+  handleSubmit() {
+    const { amount, address, sendToAddress } = this.props;
+    const validSubmit = parseFloat(amount) > 0.0 && address;
+
+    if (validSubmit) {
+      sendToAddress();
+    }
+  }
+
+  render() {
+    const {
+      closeModal,
+      modal,
+      setAmount,
+      setAddress,
+      amount,
+      address,
+      error,
+    } = this.props;
 
     return (
       <section className="card">
-      <form onSubmit={sendToAddress}>
+        <Form onSubmit={this.handleSubmit.bind(this)}>
           <div className="card__title-primary">
             <h3>{__("Send Credits")}</h3>
           </div>
@@ -37,18 +54,16 @@ const WalletSend = props => {
               trim={true}
             />
             <div className="form-row-submit">
-            <Link
+              <Submit
-              button="primary"
                 label={__("Send")}
-              onClick={sendToAddress}
                 disabled={!(parseFloat(amount) > 0.0) || !address}
               />
-            <input type="submit" className="hidden" />
             </div>
           </div>
-      </form>
+        </Form>
       </section>
     );
-};
+  }
+}
 
 export default WalletSend;

ui/scss/_gui.scss

@@ -3,6 +3,7 @@ html
   height: 100%;
   font-size: var(--font-size);
 }
+
 body
 {
   color: var(--text-color);

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