@nomios/web-uikit/dist/components/text-input/TextInput.js

Nomios' living web UIKit

import _pick from "lodash/pick";

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import FeedbackMessage from '../feedback-message';
import StrengthIndicator from './strength-indicator';
import { EyeIcon, EyeOffIcon } from '../icon';
import styles from './TextInput.css';
const LEVELS_NAME = ['poor', 'weak', 'fair', 'strong'];
const INPUT_PROPS = ['id', 'name', 'value', 'disabled', 'defaultValue', 'placeholder', 'autoComplete', 'onKeyDown', 'onKeyUp', 'onKeyPress', 'onChange', 'onInput', 'onFocus', 'onBlur', 'onCut', 'onCopy', 'onPaste'];

class TextInput extends Component {
  constructor(...args) {
    super(...args);

    _defineProperty(this, "state", {
      showPassword: false,
      feedbackMessageColor: undefined
    });

    _defineProperty(this, "handleToggleShowPassword", () => this.setState(({
      showPassword
    }) => ({
      showPassword: !showPassword
    })));

    _defineProperty(this, "handleStrengthColorChange", color => this.setState({
      feedbackMessageColor: color
    }));
  }

  render() {
    const {
      label,
      className
    } = this.props;
    const finalClassNames = classNames(styles.wrapper, className);
    return React.createElement("div", {
      className: finalClassNames
    }, label && React.createElement("label", {
      className: styles.label
    }, label), this.renderInput(), this.renderHelperContainer());
  }

  renderInput() {
    const {
      type,
      lineType,
      lineStrength,
      showPasswordAdornment
    } = this.props;

    const inputProps = _pick(this.props, INPUT_PROPS);

    const currentLevel = lineStrength >= 0 && lineStrength <= 1 ? this.computeLevel() : undefined;
    const {
      showPassword
    } = this.state;
    const inputClass = lineType === 'normal' ? styles[currentLevel] : styles.noBorderBottom;
    const eyeOffClasses = classNames(styles.eyeIcon, {
      [styles.hidden]: !showPassword,
      [styles.eyeOff]: showPassword
    });
    return React.createElement("div", {
      className: styles.inputWrapper
    }, React.createElement("input", Object.assign({
      type: showPassword ? 'text' : type,
      className: inputClass
    }, inputProps)), lineType === 'dashed' && React.createElement(StrengthIndicator, {
      className: styles.strengthIndicator,
      levelName: currentLevel,
      strength: lineStrength,
      onColorChange: this.handleStrengthColorChange
    }), type === 'password' && showPasswordAdornment && React.createElement(Fragment, null, React.createElement(EyeIcon, {
      className: classNames(styles.eyeIcon, showPassword && styles.hidden),
      onClick: this.handleToggleShowPassword
    }), React.createElement(EyeOffIcon, {
      className: eyeOffClasses,
      onClick: this.handleToggleShowPassword
    })));
  }

  renderHelperContainer() {
    const {
      helperText,
      feedback
    } = this.props;

    if (!helperText && !feedback) {
      return;
    }

    const finalClassNames = classNames(styles.feedbackMessage, feedback && feedback.className);
    return React.createElement("div", {
      className: styles.helperContainer
    }, helperText && React.createElement("span", {
      className: styles.helperText
    }, helperText), feedback && React.createElement(FeedbackMessage, {
      textColor: this.state.feedbackMessageColor,
      type: feedback.type,
      iconPosition: "right",
      tooltip: feedback.tooltip,
      className: finalClassNames
    }, feedback.message));
  }

  computeLevel() {
    const {
      lineStrength
    } = this.props;
    const normalizedStrengthValue = Math.ceil(LEVELS_NAME.length * lineStrength);
    return normalizedStrengthValue > 0 ? LEVELS_NAME[normalizedStrengthValue - 1] : LEVELS_NAME[0];
  }

}

TextInput.propTypes = {
  label: PropTypes.string,
  type: PropTypes.oneOf(['text', 'password']),
  helperText: PropTypes.string,
  lineType: PropTypes.oneOf(['normal', 'dashed']),
  lineStrength: PropTypes.number,
  showPasswordAdornment: PropTypes.bool,
  feedback: PropTypes.shape({
    message: PropTypes.string.isRequired,
    type: PropTypes.string,
    tooltip: PropTypes.node,
    className: PropTypes.string
  }),
  className: PropTypes.string
};
TextInput.defaultProps = {
  showPasswordAdornment: true,
  lineType: 'normal',
  type: 'text'
};
export default TextInput;