Input experiments

index.pug

#root

input-experiments.markdown

Input experiments

Some input experiments

A Pen by Jakub on CodePen.

License.

script.babel

const INPUT_WIDTH = 330;

const CustomInputLengthContent = ({
  componentWidth,
  label,
  placeholder,
  typedTextLength,
  onChange,
  onFocus,
  onBlur,
  isBarVisible
}) => {
  return (
    <div
      className="customInputLength"
      style={{
        width: `${componentWidth}px`
      }}>
      <label
        htmlFor="custom-input-length__inp"
        className="customInputLengthLabel">
        {label}:
      </label>
      <input
        className="customInputLengthInput"
        type="text"
        maxLength={`${Math.round(componentWidth / 10)}`}
        onChange={onChange}
        onFocus={onFocus}
        onBlur={onBlur}
        placeholder={placeholder}
        style={{
          width: `${componentWidth}px`
        }}/>
      <span
        className="customInputLengthBar"
        style={{
          visibility: `${isBarVisible === true ? 'visible' : 'hidden'}`,
          width: `${typedTextLength === Math.round(componentWidth / 10) ?
                  componentWidth : typedTextLength * 10}px`,
          height: '4px',
          backgroundColor: `${
            typedTextLength === Math.round(componentWidth / 10) ?
            '#f47142' : 'cornflowerblue'
          }`,
          transition: '300ms all ease-in-out'
        }}></span>
      <span
        className="customInputLengthWarning"
        style={{
          color: `${
            typedTextLength === Math.round(componentWidth / 10) ?
            '#f47142' : 'cornflowerblue'
          }`
        }}>
        {
          typedTextLength === componentWidth / 10 ?
            `Limit of ${Math.round(componentWidth / 10)} letters reached` :
            `${Math.round((componentWidth / 10) - typedTextLength)} letters left`
        }
      </span>
    </div>
  )
}

class CustomInputLength extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isBarVisible: false,
      typedTextLength: 0,
    };
    this.componentWidth = Math.round((this.props.componentWidth / 10) * 10);
    this.changeHandler = this.changeHandler.bind(this);
    this.focusHandler = this.focusHandler.bind(this);
    this.blurHandler = this.blurHandler.bind(this);
  }
  render() {
    return (
      <CustomInputLengthContent
        componentWidth={this.componentWidth}
        label="Type something"
        placeholder={`${this.componentWidth}px = ${Math.round(this.componentWidth / 10)} letters`}
        typedTextLength={this.state.typedTextLength}
        isBarVisible={this.state.isBarVisible}
        onChange={this.changeHandler}
        onFocus={this.focusHandler}
        onBlur={this.blurHandler}
      />
    )
  }
  focusHandler(e) {
    this.setState({
      isBarVisible: true
    })
  }
  blurHandler(e) {
    this.setState({
      isBarVisible: false
    })
  }
  changeHandler(e) {
    this.setState({
      typedTextLength: e.target.value.length
    })
  }
}

ReactDOM.render(
   <CustomInputLength componentWidth={INPUT_WIDTH} />,
   document.getElementById('root')
);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>

style.scss

body {
   padding-top: 50px;
   display: flex;
   align-items: flex-start;
   justify-content: space-around;
   // flex-direction: column;
   flex-wrap: nowrap;
}

.customInputLength {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  font-family: 'Roboto', sans-serif;
  box-sizing: border-box;
}

.customInputLengthLabel {
  font-size: .8rem;
  color: black;
  margin-bottom: 5px;
}

.customInputLengthInput {
  height: 35px;
  background-color: #f5f5f5;
  border: none;
  outline: none !important;
  box-sizing: border-box;
  padding: 5px 10px;
}

.customInputLengthWarning {
  font-size: .8rem;
  align-self: flex-end;
  margin-top: 6px;
}