diff options
| author | jackyzha0 <[email protected]> | 2020-05-10 00:25:31 -0700 |
|---|---|---|
| committer | jackyzha0 <[email protected]> | 2020-05-10 00:25:31 -0700 |
| commit | 22c58b4d7d864414c599761f92212a5825003950 (patch) | |
| tree | 8a89e71ebf8c3e549f1f22cda3180eb305f4b202 | |
| parent | add title component (diff) | |
| download | ctrl-v-22c58b4d7d864414c599761f92212a5825003950.tar.xz ctrl-v-22c58b4d7d864414c599761f92212a5825003950.zip | |
input length check and component splitting
| -rw-r--r-- | frontend/public/index.html | 2 | ||||
| -rw-r--r-- | frontend/src/components/CharLimit.js | 37 | ||||
| -rw-r--r-- | frontend/src/components/Inputs.js | 43 | ||||
| -rw-r--r-- | frontend/src/components/PasteArea.js | 14 | ||||
| -rw-r--r-- | frontend/src/css/index.css | 3 |
5 files changed, 82 insertions, 17 deletions
diff --git a/frontend/public/index.html b/frontend/public/index.html index 1e1d637..46d87ba 100644 --- a/frontend/public/index.html +++ b/frontend/public/index.html @@ -10,7 +10,7 @@ /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jackyzha0/lite.css@latest/src/lite.css"> <link href="https://fonts.googleapis.com/css2?family=Lora:wght@400;600&family=Roboto+Mono&display=swap" rel="stylesheet"> - <title>📋 ctrl-v</title> + <title>ctrl-v</title> </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> diff --git a/frontend/src/components/CharLimit.js b/frontend/src/components/CharLimit.js new file mode 100644 index 0000000..623b378 --- /dev/null +++ b/frontend/src/components/CharLimit.js @@ -0,0 +1,37 @@ +import React from 'react'; +import styled, { css } from 'styled-components' + +// show char limit if length > half of max +const Chars = styled.p` + color: #11111100; + font-family: 'Roboto Mono', monospace; + position: absolute; + font-size: 0.8em; + writing-mode: vertical-rl; + top: 50%; + transform: translate(5em, -50%); + right: 0; + transition: all 0.5s cubic-bezier(.25,.8,.25,1); + + ${props => + ((props.content.length / props.maxLength) > 0.5) && + css` + color: #111111; + `}; + + ${props => + ((props.content.length / props.maxLength) > 1) && + css` + color: #ee1111; + `}; +`; + +class CharLimit extends React.Component { + render() { + return ( + <Chars {...this.props} >{this.props.maxLength - this.props.content.length}/{this.props.maxLength}</Chars> + ); + } +} + +export default CharLimit
\ No newline at end of file diff --git a/frontend/src/components/Inputs.js b/frontend/src/components/Inputs.js index 777e3c6..d2238af 100644 --- a/frontend/src/components/Inputs.js +++ b/frontend/src/components/Inputs.js @@ -1,15 +1,27 @@ import React from 'react'; +import CharLimit from './CharLimit' +import styled from 'styled-components' + +const CharLimitContainer = styled.div` + position: relative; +` class TitleInput extends React.Component { render() { return ( - <input - name="title" - className="lt-shadow" - placeholder="Title" - type="text" - onChange={this.props.onChange} - value={this.props.title} /> + <CharLimitContainer> + <input + name="title" + className="lt-shadow" + placeholder="Title" + type="text" + autoComplete="off" + onChange={this.props.onChange} + value={this.props.value} /> + <CharLimit + content={this.props.value} + maxLength={this.props.maxLength} /> + </CharLimitContainer> ); } } @@ -17,12 +29,17 @@ class TitleInput extends React.Component { class PasteInput extends React.Component { render() { return ( - <textarea - name="content" - placeholder="Paste your text here" - value={this.props.content} - onChange={this.props.onChange} - className="lt-shadow" /> + <CharLimitContainer> + <textarea + name="content" + placeholder="Paste your text here" + value={this.props.content} + onChange={this.props.onChange} + className="lt-shadow" /> + <CharLimit + content={this.props.content} + maxLength={this.props.maxLength} /> + </CharLimitContainer> ); } } diff --git a/frontend/src/components/PasteArea.js b/frontend/src/components/PasteArea.js index fb3db64..f026ef9 100644 --- a/frontend/src/components/PasteArea.js +++ b/frontend/src/components/PasteArea.js @@ -13,6 +13,14 @@ class PasteArea extends React.Component { this.handleSubmit = this.handleSubmit.bind(this); } + componentDidUpdate() { + if (this.state.title === "") { + document.title = `ctrl-v`; + } else { + document.title = `ctrl-v | ${this.state.title}`; + } + } + handleChange(event) { const target = event.target; const name = target.name; @@ -33,10 +41,12 @@ class PasteArea extends React.Component { <form onSubmit={this.handleSubmit}> <TitleInput onChange={this.handleChange} - value={this.state.title} /> + value={this.state.title} + maxLength="100" /> <PasteInput onChange={this.handleChange} - content={this.state.content} /> + content={this.state.content} + maxLength="100000" /> <br /> <input className="lt-button lt-shadow lt-hover" type="submit" value="new paste" /> </form> diff --git a/frontend/src/css/index.css b/frontend/src/css/index.css index 9a5a149..902a096 100644 --- a/frontend/src/css/index.css +++ b/frontend/src/css/index.css @@ -22,7 +22,7 @@ textarea, input[type=text] { border-radius: 3px; border: 1px solid #565656; outline: none; - margin-bottom: 1.5em; + margin: 1.2em 0; } textarea { @@ -38,6 +38,7 @@ input[type=submit] { font-weight: 700; color: #faf9f5; background-color: #111111; + padding: 0.75em 2em; } input[type=submit]:focus { |