SHARE
TWEET

TextBox React.js

a guest Apr 18th, 2019 65 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React from 'react';
  2. import './TextBox.scss'
  3. import {Row} from "../../layout/Row";
  4. import '../../layout/Layout.scss';
  5.  
  6. export class TextBox extends React.Component {
  7.  
  8.     constructor(props) {
  9.  
  10.         super(props);
  11.  
  12.         this.state = {isActive: false, isNotEmpty: false, value: ''};
  13.  
  14.         this.onFocus = this.onFocus.bind(this);
  15.         this.onLostFocus = this.onLostFocus.bind(this);
  16.     }
  17.  
  18.     onFocus(e) {
  19.  
  20.         e.preventDefault();
  21.         console.log('The input has clicked !');
  22.  
  23.         this.setState(state => ({
  24.             isActive: true,
  25.             isNotEmpty: state.isNotEmpty,
  26.             value: state.value
  27.         }));
  28.     }
  29.  
  30.     onLostFocus(e) {
  31.  
  32.         e.preventDefault();
  33.  
  34.         this.setState(state => ({
  35.             isActive: false,
  36.             isNotEmpty: (state.value !== undefined) && (state.value.length > 0),
  37.             value: state.value
  38.         }));
  39.     }
  40.  
  41.     render() {
  42.         return (
  43.             <Row className={this.className()} pos="center">
  44.                 {this.iconElement()}
  45.  
  46.                 <input type={this.props.type}
  47.                        value={this.state.value}
  48.                        onFocus={this.onFocus}
  49.                        onBlur={this.onLostFocus}
  50.                        onChange={el => this.setState({value: el.target.value})}/>
  51.  
  52.                 <label>{this.props.label}</label>
  53.             </Row>
  54.         );
  55.     }
  56.  
  57.     iconElement() {
  58.  
  59.         if (this.props.icon !== undefined) {
  60.             return <i className={"fa " + this.props.icon}></i>;
  61.         }
  62.  
  63.         return;
  64.     }
  65.  
  66.     className() {
  67.  
  68.         let className = "textbox";
  69.  
  70.         if (this.state.isActive) {
  71.             className = "textbox-active";
  72.         } else if (this.state.isNotEmpty) {
  73.             className = "textbox-not-empty";
  74.         }
  75.  
  76.         return className + this.noEmpty(this.props.className) + this.noEmpty(this.props.class);
  77.     }
  78.  
  79.     noEmpty(className) {
  80.         return className !== undefined ? ' ' + className : '';
  81.     }
  82. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top