Sizing in React Textbox component

30 Jan 202319 minutes to read

You can render the TextBox in two different sizes.

Property Description
Normal By default, the TextBox is rendered with normal size.
Small You need to add e-small class to the input element, or else add to the input container.

[Class-component]

import * as React from "react";
import * as ReactDOM from "react-dom";
export default class Default extends React.Component {
    render() {
        return (<div>
    <h4> Normal Size </h4>

    <div className="e-input-group">
      <input className="e-input" type="text" placeholder="Enter Name" onFocus={this.onInputFocus} onBlur={this.onInputBlur}/>
    </div>

    <div className="e-float-input">
      <input type='text' required={true} onFocus={this.onInputFocus} onBlur={this.onInputBlur}/>
      <span className="e-float-line"/>
      <label className="e-float-text">Enter Name</label>
    </div>

    <div className="e-input-group">
      <input className="e-input" type="text" placeholder="Enter Date" onFocus={this.onInputFocus} onBlur={this.onInputBlur}/>
      <span className="e-input-group-icon e-input-popup-date" onMouseDown={this.onIconMouseDown} onMouseUp={this.onIconMouseUp}/>
    </div>

    <h4> Small Size </h4>

    <div className="e-input-group e-small">
      <input className="e-input" type="text" placeholder="Enter Name" onFocus={this.onInputFocus} onBlur={this.onInputBlur}/>
    </div>

    <div className="e-float-input e-small">
      <input type='text' required={true} onFocus={this.onInputFocus} onBlur={this.onInputBlur}/>
      <span className="e-float-line"/>
      <label className="e-float-text">Enter Name</label>
    </div>

    <div className="e-input-group e-small">
      <input className="e-input" type="text" placeholder="Enter Date" onFocus={this.onInputFocus} onBlur={this.onInputBlur}/>
      <span className="e-input-group-icon e-input-popup-date" onMouseDown={this.onIconMouseDown} onMouseUp={this.onIconMouseUp}/>
    </div>
        </div>);
    }
    onInputFocus(args) {
        if (!args.target.parentElement.classList.contains('e-input-in-wrap')) {
            args.target.parentElement.classList.add('e-input-focus');
        }
        else {
            args.target.parentElement.parentElement.classList.add('e-input-focus');
        }
    }
    onInputBlur(args) {
        if (!args.target.parentElement.classList.contains('e-input-in-wrap')) {
            args.target.parentElement.classList.remove('e-input-focus');
        }
        else {
            args.target.parentElement.parentElement.classList.remove('e-input-focus');
        }
    }
    onIconMouseDown(args) {
        args.persist();
        setTimeout(() => {
            args.target.classList.add('e-input-btn-ripple');
        }, 300);
    }
    onIconMouseUp(args) {
        args.target.classList.remove('e-input-btn-ripple');
    }
}
ReactDOM.render(<Default />, document.getElementById('input-container'));
import * as React from "react";
import * as ReactDOM from "react-dom";

export default class Default extends React.Component {
  public render() {
   return (
    <div>
    <h4> Normal Size </h4>

    <div className="e-input-group">
      <input className="e-input" type="text" placeholder="Enter Name" onFocus = {this.onInputFocus} onBlur = {this.onInputBlur} />
    </div>

    <div className="e-float-input">
      <input type='text' required = {true} onFocus = {this.onInputFocus} onBlur = {this.onInputBlur}/>
      <span className="e-float-line"/>
      <label className="e-float-text">Enter Name</label>
    </div>

    <div className="e-input-group">
      <input className="e-input" type="text" placeholder="Enter Date" onFocus = {this.onInputFocus} onBlur = {this.onInputBlur}/>
      <span className="e-input-group-icon e-input-popup-date" onMouseDown = {this.onIconMouseDown} onMouseUp = {this.onIconMouseUp}/>
    </div>

    <h4> Small Size </h4>

    <div className="e-input-group e-small">
      <input className="e-input" type="text" placeholder="Enter Name" onFocus = {this.onInputFocus} onBlur = {this.onInputBlur}/>
    </div>

    <div className="e-float-input e-small">
      <input type='text' required = {true} onFocus = {this.onInputFocus} onBlur = {this.onInputBlur} />
      <span className="e-float-line"/>
      <label className="e-float-text">Enter Name</label>
    </div>

    <div className="e-input-group e-small">
      <input className="e-input" type="text" placeholder="Enter Date" onFocus = {this.onInputFocus} onBlur = {this.onInputBlur} />
      <span className="e-input-group-icon e-input-popup-date" onMouseDown = {this.onIconMouseDown} onMouseUp = {this.onIconMouseUp}/>
    </div>
</div>
  );
  }

  public onInputFocus(args: React.FocusEvent) {
      if (!((args.target as HTMLElement).parentElement as HTMLElement).classList.contains('e-input-in-wrap')) {
        ((args.target as HTMLElement).parentElement as HTMLElement).classList.add('e-input-focus');
      } else {
        (((args.target as HTMLElement).parentElement as HTMLElement).parentElement as HTMLElement).classList.add('e-input-focus')
      }
  }

  public onInputBlur(args: React.FocusEvent) {
      if (!((args.target as HTMLElement).parentElement as HTMLElement).classList.contains('e-input-in-wrap')) {
        ((args.target as HTMLElement).parentElement as HTMLElement).classList.remove('e-input-focus');
      } else {
        (((args.target as HTMLElement).parentElement as HTMLElement).parentElement as HTMLElement).classList.remove('e-input-focus');
      }
  }

  public onIconMouseDown(args: React.MouseEvent) {
      args.persist();
      setTimeout(
          () => {
              (args.target as HTMLElement).classList.add('e-input-btn-ripple');
          },
      300);
  }

  public onIconMouseUp(args: React.MouseEvent) {
      (args.target as HTMLElement).classList.remove('e-input-btn-ripple');
  }
}

ReactDOM.render(<Default />, document.getElementById('input-container'));

[Functional-component]

import * as React from "react";
import * as ReactDOM from "react-dom";
function Default() {
    return (<div>
    <h4> Normal Size </h4>

    <div className="e-input-group">
      <input className="e-input" type="text" placeholder="Enter Name" onFocus={onInputFocus} onBlur={onInputBlur}/>
    </div>

    <div className="e-float-input">
      <input type='text' required={true} onFocus={onInputFocus} onBlur={onInputBlur}/>
      <span className="e-float-line"/>
      <label className="e-float-text">Enter Name</label>
    </div>

    <div className="e-input-group">
      <input className="e-input" type="text" placeholder="Enter Date" onFocus={onInputFocus} onBlur={onInputBlur}/>
      <span className="e-input-group-icon e-input-popup-date" onMouseDown={onIconMouseDown} onMouseUp={onIconMouseUp}/>
    </div>

    <h4> Small Size </h4>

    <div className="e-input-group e-small">
      <input className="e-input" type="text" placeholder="Enter Name" onFocus={onInputFocus} onBlur={onInputBlur}/>
    </div>

    <div className="e-float-input e-small">
      <input type='text' required={true} onFocus={onInputFocus} onBlur={onInputBlur}/>
      <span className="e-float-line"/>
      <label className="e-float-text">Enter Name</label>
    </div>

    <div className="e-input-group e-small">
      <input className="e-input" type="text" placeholder="Enter Date" onFocus={onInputFocus} onBlur={onInputBlur}/>
      <span className="e-input-group-icon e-input-popup-date" onMouseDown={onIconMouseDown} onMouseUp={onIconMouseUp}/>
    </div>
    </div>);
    function onInputFocus(args) {
        if (!args.target.parentElement.classList.contains('e-input-in-wrap')) {
            args.target.parentElement.classList.add('e-input-focus');
        }
        else {
            args.target.parentElement.parentElement.classList.add('e-input-focus');
        }
    }
    function onInputBlur(args) {
        if (!args.target.parentElement.classList.contains('e-input-in-wrap')) {
            args.target.parentElement.classList.remove('e-input-focus');
        }
        else {
            args.target.parentElement.parentElement.classList.remove('e-input-focus');
        }
    }
    function onIconMouseDown(args) {
        args.persist();
        setTimeout(() => {
            args.target.classList.add('e-input-btn-ripple');
        }, 300);
    }
    function onIconMouseUp(args) {
        args.target.classList.remove('e-input-btn-ripple');
    }
}
ReactDOM.render(<Default />, document.getElementById('input-container'));
import * as React from "react";
import * as ReactDOM from "react-dom";

function Default() {
   return (
    <div>
    <h4> Normal Size </h4>

    <div className="e-input-group">
      <input className="e-input" type="text" placeholder="Enter Name" onFocus = {onInputFocus} onBlur = {onInputBlur} />
    </div>

    <div className="e-float-input">
      <input type='text' required = {true} onFocus = {onInputFocus} onBlur = {onInputBlur}/>
      <span className="e-float-line"/>
      <label className="e-float-text">Enter Name</label>
    </div>

    <div className="e-input-group">
      <input className="e-input" type="text" placeholder="Enter Date" onFocus = {onInputFocus} onBlur = {onInputBlur}/>
      <span className="e-input-group-icon e-input-popup-date" onMouseDown = {onIconMouseDown} onMouseUp = {onIconMouseUp}/>
    </div>

    <h4> Small Size </h4>

    <div className="e-input-group e-small">
      <input className="e-input" type="text" placeholder="Enter Name" onFocus = {onInputFocus} onBlur = {onInputBlur}/>
    </div>

    <div className="e-float-input e-small">
      <input type='text' required = {true} onFocus = {onInputFocus} onBlur = {onInputBlur} />
      <span className="e-float-line"/>
      <label className="e-float-text">Enter Name</label>
    </div>

    <div className="e-input-group e-small">
      <input className="e-input" type="text" placeholder="Enter Date" onFocus = {onInputFocus} onBlur = {onInputBlur} />
      <span className="e-input-group-icon e-input-popup-date" onMouseDown = {onIconMouseDown} onMouseUp = {onIconMouseUp}/>
    </div>
</div>
  );

  function onInputFocus(args: React.FocusEvent) {
      if (!((args.target as HTMLElement).parentElement as HTMLElement).classList.contains('e-input-in-wrap')) {
        ((args.target as HTMLElement).parentElement as HTMLElement).classList.add('e-input-focus');
      } else {
        (((args.target as HTMLElement).parentElement as HTMLElement).parentElement as HTMLElement).classList.add('e-input-focus')
      }
  }

  function onInputBlur(args: React.FocusEvent) {
      if (!((args.target as HTMLElement).parentElement as HTMLElement).classList.contains('e-input-in-wrap')) {
        ((args.target as HTMLElement).parentElement as HTMLElement).classList.remove('e-input-focus');
      } else {
        (((args.target as HTMLElement).parentElement as HTMLElement).parentElement as HTMLElement).classList.remove('e-input-focus');
      }
  }

  function onIconMouseDown(args: React.MouseEvent) {
      args.persist();
      setTimeout(
          () => {
              (args.target as HTMLElement).classList.add('e-input-btn-ripple');
          },
      300);
  }

  function onIconMouseUp(args: React.MouseEvent) {
      (args.target as HTMLElement).classList.remove('e-input-btn-ripple');
  }
}

ReactDOM.render(<Default />, document.getElementById('input-container'));