112 lines
4.4 KiB
JavaScript
112 lines
4.4 KiB
JavaScript
import React, { Component } from 'react'
|
|
import styled from 'styled-components'
|
|
import { withTheme } from 'styled-components';
|
|
export class TextInput extends Component {
|
|
|
|
render() {
|
|
const InputWrapper = styled.div`
|
|
font-size: 1.1em;
|
|
overflow: hidden;
|
|
position: relative;
|
|
margin: 0.2em 0;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-orient: horizontal;
|
|
-webkit-box-direction: normal;
|
|
-ms-flex-direction: row;
|
|
flex-direction: row;
|
|
-webkit-box-align: stretch;
|
|
-ms-flex-align: stretch;
|
|
align-items: stretch;
|
|
background: ${this.props.disabled===undefined ? this.props.theme.colours.color6 : this.props.theme.colours.color7};
|
|
border-bottom: 0.3em solid ${this.props.disabled===undefined ? this.props.theme.colours.color5 : this.props.theme.colours.color8};
|
|
:hover {
|
|
${this.props.disabled===undefined ? "outline: solid "+ this.props.theme.colours.color3 +";\nborder-bottom: 0.3em solid" + this.props.theme.colours.color3 + ";" : null};
|
|
button:hover{
|
|
${this.props.btndisabled===undefined ?"background: "+ this.props.theme.colours.color3:""};
|
|
&::before{
|
|
${this.props.btndisabled===undefined ?"background: "+ this.props.theme.colours.color3:""};
|
|
-webkit-transform: translateX(-90%) rotate(45deg) scale(1.2);
|
|
transform: translateX(-90%) rotate(45deg) scale(1.2);
|
|
}
|
|
}
|
|
}
|
|
input{
|
|
padding: 1em .2em .1em 0.2em;
|
|
display: inline-block;
|
|
-webkit-box-flex: 1;
|
|
-ms-flex-positive: 1;
|
|
flex-grow: 1;
|
|
z-index: 1;
|
|
border: none;
|
|
background: none;
|
|
outline: none;
|
|
font-size: 1em;
|
|
${this.props.disabled!==undefined ? "user-select: none;" : null};
|
|
&:focus + label, &:not(:placeholder-shown) + label {
|
|
color: ${this.props.theme.colours.color5};
|
|
font-size: 0.7em;
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
bottom: 50%;
|
|
font-weight: bold;
|
|
}
|
|
:disabled{
|
|
color: ${this.props.theme.colours.color1};
|
|
&:focus + label, &:not(:placeholder-shown) + label{
|
|
|
|
}
|
|
}
|
|
}
|
|
label{
|
|
padding: 0;
|
|
color: ${this.props.theme.colours.color2};
|
|
z-index: 0;
|
|
position: absolute;
|
|
left: 0.2em;
|
|
padding-bottom: 0.2em;
|
|
bottom: 0;
|
|
-webkit-transition: all ease-in-out 350ms;
|
|
transition: all ease-in-out 350ms;
|
|
}
|
|
button{
|
|
position: relative;
|
|
background: ${this.props.theme.colours.color2};
|
|
color: ${this.props.theme.colours.color6};
|
|
border: none;
|
|
font-size: 0.8em;
|
|
font-weight: bold;
|
|
padding: 0 .5em;
|
|
-webkit-transition: ease all 300ms;
|
|
transition: ease all 300ms;
|
|
z-index: 1;
|
|
::before {
|
|
position: absolute;
|
|
display: block;
|
|
content: '';
|
|
-webkit-clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
|
|
clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
|
|
-webkit-transform: translateX(-90%) rotate(45deg);
|
|
transform: translateX(-90%) rotate(45deg);
|
|
height: 1em;
|
|
width: 1em;
|
|
background: ${this.props.theme.colours.color2};
|
|
-webkit-transition: ease all 300ms;
|
|
transition: ease all 300ms;
|
|
}
|
|
}
|
|
`;
|
|
return (
|
|
<InputWrapper>
|
|
<input id={this.props.id} placeholder="" type={this.props.type ? this.props.type : "text"} value={this.props.value} disabled={this.props.disabled} />
|
|
{this.props.label != null ? <label htmlFor={this.props.id}>{this.props.label}</label> : ""}
|
|
{this.props.button != null ? <button onClick={this.props.onClick}>{this.props.button}</button> : ""}
|
|
</InputWrapper>
|
|
|
|
)
|
|
}
|
|
}
|
|
|
|
export default withTheme(TextInput)
|