Fix #1610: Add react-scroll on account create form (#1645)

bitshares · Jul 6, 2018 · ef3d9be · ef3d9be
1 parent 2f8274e
commit ef3d9be
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 3 deletions.
diff --git a/app/components/Account/CreateAccount.jsx b/app/components/Account/CreateAccount.jsx
@@ -21,6 +21,7 @@ import utils from "common/utils";
 import SettingsActions from "actions/SettingsActions";
 import counterpart from "counterpart";
 import {withRouter} from "react-router-dom";
+import {scroller} from "react-scroll";
 import {getWalletName} from "branding";
 
 class CreateAccount extends React.Component {
@@ -39,6 +40,8 @@ class CreateAccount extends React.Component {
         this.onFinishConfirm = this.onFinishConfirm.bind(this);
 
         this.accountNameInput = null;
+
+        this.scrollToInput = this.scrollToInput.bind(this);
     }
 
     componentWillMount() {
@@ -50,6 +53,7 @@ class CreateAccount extends React.Component {
 
     componentDidMount() {
         ReactTooltip.rebuild();
+        this.scrollToInput();
     }
 
     shouldComponentUpdate(nextProps, nextState) {
@@ -99,6 +103,15 @@ class CreateAccount extends React.Component {
         }
     }
 
+    scrollToInput() {
+        scroller.scrollTo(`scrollToInput`, {
+            duration: 1500,
+            delay: 100,
+            smooth: true,
+            containerId: "accountForm"
+        });
+    }
+
     createAccount(name) {
         let refcode = this.refs.refcode ? this.refs.refcode.value() : null;
         let referralAccount = AccountStore.getState().referralAccount;
@@ -533,7 +546,7 @@ class CreateAccount extends React.Component {
         let {step} = this.state;
 
         return (
-            <div className="sub-content">
+            <div className="sub-content" id="scrollToInput" name="scrollToInput">
                 <div style={{maxWidth: "95vw"}}>
                     {step !== 1 ? (
                         <p

diff --git a/app/components/Account/CreateAccountPassword.jsx b/app/components/Account/CreateAccountPassword.jsx
@@ -20,6 +20,7 @@ import WalletUnlockActions from "actions/WalletUnlockActions";
 import Icon from "../Icon/Icon";
 import CopyButton from "../Utility/CopyButton";
 import {withRouter} from "react-router-dom";
+import {scroller} from "react-scroll";
 
 class CreateAccountPassword extends React.Component {
     constructor() {
@@ -46,6 +47,8 @@ class CreateAccountPassword extends React.Component {
         this.onFinishConfirm = this.onFinishConfirm.bind(this);
 
         this.accountNameInput = null;
+
+        this.scrollToInput = this.scrollToInput.bind(this);
     }
 
     componentWillMount() {
@@ -59,12 +62,22 @@ class CreateAccountPassword extends React.Component {
 
     componentDidMount() {
         ReactTooltip.rebuild();
+        this.scrollToInput();
     }
 
     shouldComponentUpdate(nextProps, nextState) {
         return !utils.are_equal_shallow(nextState, this.state);
     }
 
+    scrollToInput() {
+        scroller.scrollTo(`scrollToInput`, {
+            duration: 1500,
+            delay: 100,
+            smooth: true,
+            containerId: "accountForm"
+        });
+    }
+
     isValid() {
         let firstAccount = AccountStore.getMyAccounts().length === 0;
         let valid = this.state.validAccountName;
@@ -643,7 +656,7 @@ class CreateAccountPassword extends React.Component {
         // let my_accounts = AccountStore.getMyAccounts();
         // let firstAccount = my_accounts.length === 0;
         return (
-            <div className="sub-content">
+            <div className="sub-content" id="scrollToInput" name="scrollToInput">
                 <div>
                     {step === 2 ? (
                         <p

diff --git a/app/components/LoginSelector.jsx b/app/components/LoginSelector.jsx
@@ -116,7 +116,7 @@ class LoginSelector extends React.Component {
         );
 
         return (
-            <div className="grid-block align-center">
+            <div className="grid-block align-center" id="accountForm">
                 <div className="grid-block shrink vertical">
                     <div className="grid-content shrink text-center account-creation">
                         <div>