From 7c3ffc488b5d82b40e664d6d6dde88710111f1dd Mon Sep 17 00:00:00 2001
From: Greg Fodor <gfodor@gmail.com>
Date: Mon, 14 May 2018 14:28:00 -0700
Subject: [PATCH] Switch to number input
---
src/assets/stylesheets/link.scss | 21 +++++++++++++++++++++
src/react-components/link-root.js | 24 ++++++++++++++----------
2 files changed, 35 insertions(+), 10 deletions(-)
diff --git a/src/assets/stylesheets/link.scss b/src/assets/stylesheets/link.scss
index 28f206568..3dd21bf0d 100644
--- a/src/assets/stylesheets/link.scss
+++ b/src/assets/stylesheets/link.scss
@@ -114,8 +114,29 @@ a {
text-align: center;
font-size: 3.0em;
color: white;
+ display: flex;
+ justify-content: center;
}
:local(.digit) {
margin: 8px;
}
+
+:local(.digit-input) {
+ outline-style: none;
+ appearance:textfield;
+ -moz-appearance:textfield;
+ -webkit-appearance:textfield;
+ background: transparent;
+ color: white;
+ margin: 0;
+ font-size: 64pt;
+ border: 0;
+ width: 225px;
+ letter-spacing: 0.08em;
+ text-align: center;
+}
+
+:local(.digit-input::placeholder) {
+ letter-spacing: 0;
+}
diff --git a/src/react-components/link-root.js b/src/react-components/link-root.js
index 92126c32b..30e3d1e5b 100644
--- a/src/react-components/link-root.js
+++ b/src/react-components/link-root.js
@@ -19,16 +19,16 @@ class LinkRoot extends Component {
};
state = {
- enteredDigits: [],
+ enteredDigits: "",
failedAtLeastOnce: false
};
addDigit = digit => {
if (this.state.enteredDigits.length >= MAX_DIGITS) return;
- const newDigits = [...this.state.enteredDigits, digit];
+ const newDigits = `${this.state.enteredDigits}${digit}`;
if (newDigits.length === MAX_DIGITS) {
- this.attemptLink(newDigits.join(""));
+ this.attemptLink(newDigits);
}
this.setState({ enteredDigits: newDigits });
@@ -36,7 +36,7 @@ class LinkRoot extends Component {
removeDigit = () => {
if (this.state.enteredDigits.length === 0) return;
- this.setState({ enteredDigits: [...this.state.enteredDigits.slice(0, -1)] });
+ this.setState({ enteredDigits: this.state.enteredDigits.substring(0, -1) });
};
attemptLink = code => {
@@ -58,7 +58,7 @@ class LinkRoot extends Component {
})
.catch(e => {
console.error(e);
- this.setState({ failedAtLeastOnce: true, enteredDigits: [] });
+ this.setState({ failedAtLeastOnce: true, enteredDigits: "" });
});
};
@@ -82,11 +82,15 @@ class LinkRoot extends Component {
</div>
<div className={styles.enteredDigits}>
- {[0, 1, 2, 3].map(d => (
- <span className={styles.digit} key={`digit_${d}`}>
- {this.state.enteredDigits.length > d ? this.state.enteredDigits[d] : "-"}
- </span>
- ))}
+ <input
+ className={styles.digitInput}
+ type="number"
+ value={this.state.enteredDigits}
+ onChange={ev => {
+ this.setState({ enteredDigits: ev.target.value });
+ }}
+ placeholder="- - - -"
+ />
</div>
<div className={styles.keypad}>
--
GitLab