Search results

Sizing in React TextBox component

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.
Source
Preview
index.tsx
index.css
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'));
#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}
#input-container {
  width: 240px;
  margin: 0 auto;
  padding: 20px 0px;
}

.e-input-group-icon:before {
  font-family: e-icons;
}

.e-input-group .e-input-group-icon.e-input-popup-date {
  font-size:16px;
}

.e-input-group-icon.e-input-popup-date:before {
  content: "\e901";
}

#input-container .e-input-group {
  margin: 26px 0;
}

#input-container .e-float-input {
  margin: 26px 0;
}

.wrap label {
font-weight:bold;
}