input component (bukinoshita#10)

xpert98 · Nov 23, 2017 · d3922be · d3922be
1 parent 3dd6d65
commit d3922be
Show file tree

Hide file tree

Showing 4 changed files with 146 additions and 124 deletions.
diff --git a/components/button.js b/components/button.js
@@ -2,7 +2,7 @@
 
 import React from 'react'
 
-import { colors, typography } from './../theme'
+import { colors, typography, phone } from './../theme'
 
 const Button = ({ children, type, onClick, disabled }) => {
   return (
@@ -37,6 +37,13 @@ const Button = ({ children, type, onClick, disabled }) => {
           background-color: ${colors.gray};
           cursor: default;
         }
+
+        @media ${phone} {
+          button {
+            display: block;
+            width: 100%;
+          }
+        }
       `}</style>
     </button>
   )

diff --git a/components/input.js b/components/input.js
@@ -0,0 +1,123 @@
+'use strict'
+
+import React from 'react'
+
+import { colors, typography } from './../theme'
+
+const Input = ({
+  name,
+  type,
+  placeholder,
+  value,
+  onChange,
+  autoFocus,
+  multiline,
+  customStyle
+}) => {
+  return (
+    <div>
+      {multiline ? (
+        <textarea
+          name={name}
+          rows="1"
+          placeholder={placeholder}
+          value={value}
+          onChange={onChange}
+          autoFocus={autoFocus}
+        />
+      ) : (
+        <input
+          name={name}
+          type={type}
+          placeholder={placeholder}
+          value={value}
+          onChange={onChange}
+          autoFocus={autoFocus}
+          style={customStyle}
+        />
+      )}
+
+      <style jsx>{`
+        input {
+          width: 100%;
+          resize: none;
+          background-color: transparent;
+          border: 1px solid ${colors.gray};
+          padding: 15px;
+          font-size: ${typography.f12};
+          color: ${colors.white};
+          margin-top: 15px;
+          outline: none;
+          font-weight: ${typography.semibold};
+          transition: all 200ms;
+          max-width: 500px;
+        }
+
+        input::-webkit-input-placeholder {
+          color: ${colors.gray};
+        }
+
+        input::-moz-placeholder {
+          color: ${colors.gray};
+        }
+
+        input:-ms-input-placeholder {
+          color: ${colors.gray};
+        }
+
+        input:-moz-placeholder {
+          color: ${colors.gray};
+        }
+
+        input:focus {
+          border-color: ${colors.white};
+        }
+
+        textarea {
+          width: 100%;
+          resize: none;
+          min-height: 100px;
+          background-color: transparent;
+          border: 1px solid ${colors.gray};
+          padding: 15px;
+          font-size: ${typography.f12};
+          color: ${colors.white};
+          outline: none;
+          font-weight: ${typography.semibold};
+          transition: all 200ms;
+          max-width: 500px;
+        }
+
+        textarea::-webkit-input-placeholder {
+          color: ${colors.gray};
+        }
+
+        textarea::-moz-placeholder {
+          color: ${colors.gray};
+        }
+
+        textarea:-ms-input-placeholder {
+          color: ${colors.gray};
+        }
+
+        textarea:-moz-placeholder {
+          color: ${colors.gray};
+        }
+
+        textarea:focus {
+          border-color: ${colors.white};
+        }
+      `}</style>
+    </div>
+  )
+}
+
+Input.defaultProps = {
+  type: 'text',
+  placeholder: '',
+  value: '',
+  multiline: false,
+  autoFocus: false
+}
+
+export default Input
diff --git a/pages/index.js b/pages/index.js
@@ -6,6 +6,7 @@ import Router from 'next/router'
 import Page from './../layouts/page'
 
 import Button from './../components/button'
+import Input from './../components/input'
 
 import { colors, typography, phone } from './../theme'
 
@@ -63,56 +64,14 @@ class Home extends Component {
   render() {
     const { message, hasPassphrase, passphrase, requesting } = this.state
     const passphraseInput = hasPassphrase ? (
-      <fieldset>
-        <input
-          type="text"
-          placeholder="Your passphrase"
-          name="passphrase"
-          value={passphrase}
-          onChange={this.onInputChange}
-          autoFocus={true}
-        />
-
-        <style jsx>{`
-          fieldset {
-            border: 0;
-          }
-
-          input {
-            width: 100%;
-            resize: none;
-            background-color: transparent;
-            border: 1px solid ${colors.gray};
-            padding: 15px;
-            font-size: ${typography.f12};
-            color: ${colors.white};
-            margin-top: 15px;
-            outline: none;
-            font-weight: ${typography.semibold};
-            transition: all 200ms;
-          }
-
-          input::-webkit-input-placeholder {
-            color: ${colors.gray};
-          }
-
-          input::-moz-placeholder {
-            color: ${colors.gray};
-          }
-
-          input:-ms-input-placeholder {
-            color: ${colors.gray};
-          }
-
-          input:-moz-placeholder {
-            color: ${colors.gray};
-          }
-
-          input:focus {
-            border-color: ${colors.white};
-          }
-        `}</style>
-      </fieldset>
+      <Input
+        type="text"
+        placeholder="Your passphrase"
+        name="passphrase"
+        value={passphrase}
+        onChange={this.onInputChange}
+        autoFocus={true}
+      />
     ) : (
       <span onClick={this.addPassphrase}>
         + add passphrase
@@ -138,12 +97,13 @@ class Home extends Component {
     return (
       <Page>
         <form onSubmit={this.onSubmit}>
-          <textarea
+          <Input
             placeholder="Your secret..."
             name="message"
             value={message}
             onChange={this.onInputChange}
             autoFocus={true}
+            multiline={true}
           />
 
           {passphraseInput}
@@ -162,40 +122,6 @@ class Home extends Component {
             text-align: center;
           }
 
-          textarea {
-            width: 100%;
-            resize: none;
-            min-height: 100px;
-            background-color: transparent;
-            border: 1px solid ${colors.gray};
-            padding: 15px;
-            font-size: ${typography.f12};
-            color: ${colors.white};
-            outline: none;
-            font-weight: ${typography.semibold};
-            transition: all 200ms;
-          }
-
-          textarea::-webkit-input-placeholder {
-            color: ${colors.gray};
-          }
-
-          textarea::-moz-placeholder {
-            color: ${colors.gray};
-          }
-
-          textarea:-ms-input-placeholder {
-            color: ${colors.gray};
-          }
-
-          textarea:-moz-placeholder {
-            color: ${colors.gray};
-          }
-
-          textarea:focus {
-            border-color: ${colors.white};
-          }
-
           @media ${phone} {
             form {
               max-width: 100%;

diff --git a/pages/s/index.js b/pages/s/index.js
@@ -7,6 +7,8 @@ import parser from 'ua-parser-js'
 import Page from './../../layouts/page'
 
 import Button from './../../components/button'
+import Input from './../../components/input'
+
 import { colors, typography } from './../../theme'
 
 import api from './../../services/api'
@@ -80,21 +82,20 @@ class S extends Component {
 
   render() {
     const { hasPassphrase, passphrase, message, fetched, fetching } = this.state
-
     const styles = this.state.sFetched ? { borderColor: 'red' } : null
 
     const passphraseInput = hasPassphrase ? (
       <div>
         <p>Shh... we cannot tell you the secret without the passphrase.</p>
         <form onSubmit={this.revealSecret}>
-          <input
+          <Input
             type="text"
             placeholder="Your passphrase"
             name="passphrase"
             value={passphrase}
             onChange={this.onInputChange}
-            style={styles}
             autoFocus={true}
+            customStyle={styles}
           />
           <div>
             <Button type="submit" disabled={fetching}>
@@ -109,41 +110,6 @@ class S extends Component {
             font-weight: ${typography.semibold};
             margin-top: 10px;
           }
-
-          input {
-            width: 100%;
-            resize: none;
-            background-color: transparent;
-            border: 1px solid ${colors.gray};
-            padding: 15px;
-            font-size: ${typography.f12};
-            color: ${colors.white};
-            margin-top: 15px;
-            outline: none;
-            font-weight: ${typography.semibold};
-            transition: all 200ms;
-            max-width: 500px;
-          }
-
-          input::-webkit-input-placeholder {
-            color: ${colors.gray};
-          }
-
-          input::-moz-placeholder {
-            color: ${colors.gray};
-          }
-
-          input:-ms-input-placeholder {
-            color: ${colors.gray};
-          }
-
-          input:-moz-placeholder {
-            color: ${colors.gray};
-          }
-
-          input:focus {
-            border-color: ${colors.white};
-          }
         `}</style>
       </div>
     ) : (