@shakthillc/components/src/UserSelector/UserSelector.js

React generic components for shakthi products

import React from "react";
import PropTypes from "prop-types";
import style from "./UserSelector.module.css";
import Badge from "./Badge";
import { forEach } from "lodash";

export default class UserSelector extends React.Component {
  constructor(props) {
    super(props);
    this.onChange = this.onChange.bind(this);
    this.handleFocus = this.handleFocus.bind(this);
    this.handleBlur = this.handleBlur.bind(this);
    this.onKeyPress = this.onKeyPress.bind(this);
    this.onBadgeClick = this.onBadgeClick.bind(this);
    this.state = {
      value: "",
      details: this.props.details || [],
      helperText: false,
    };
  }

  componentDidMount() {
    let { selectedValue = [] } = this.props;
    if (selectedValue && selectedValue.length > 0) {
      let details = selectedValue.map((data) => {
        let mailFlag = this.mailValidator(data);
        return {
          email: data,
          isValid: mailFlag === "#FFD4D1" ? 0 : 1,
          color: mailFlag,
        };
      });
      this.setState({ details });
    }
  }
  componentDidUpdate(prevProps, prevState) {
    let { selectedValue } = this.props;
    if (
      selectedValue &&
      prevProps.selectedValue.length != selectedValue.length
    ) {
      let formattedDetails = selectedValue.map((data) => {
        let mailFlag = this.mailValidator(data);
        return {
          email: data,
          isValid: mailFlag === "#FFD4D1" ? 0 : 1,
          color: mailFlag,
        };
      });
      this.setState({ details: formattedDetails });
    }
  }
  onChange(e) {
    if (e.target.value !== ",") {
      this.setState({ value: e.target.value });
    }
  }
  handleFocus(e) {
    let { onFocus } = this.props;
    onFocus && onFocus(this.state.details);
  }
  mailValidator(value) {
    if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(value))
      return "#E5E9EC";
    return "#FFD4D1";
  }
  statusFlag(data) {
    let flag = true;
    data.forEach((data) => {
      if (data.color === "#FFD4D1") {
        flag = false;
        return flag;
      }
    });
    return flag;
  }
  onKeyPress(e) {
    let { onKeyup } = this.props;
    let { value, details } = this.state;
    let tempDetails = [...details];
    let mailFlag = "";
    let formattedResult = tempDetails.map((data) => {
      return data.email;
    });
    if (
      e.key === "Enter" ||
      e.key === "Tab" ||
      e.which === 32 ||
      (e.which === 44 && value.trim() != "")
    ) {
      if (!formattedResult.includes(value)) {
        mailFlag = this.mailValidator(value);
        tempDetails.push({
          email: value,
          color: mailFlag,
          isValid: mailFlag === "#FFD4D1" ? 0 : 1,
        });
        value = "";
        this.setState({ value, details: tempDetails, helperText: false });
        let formattedResult = tempDetails.map((data) => {
          return data.email;
        });

        onKeyup && onKeyup(formattedResult, this.statusFlag(tempDetails));
      } else {
        this.setState({ value: "", helperText: true });
      }
    }
  }
  onBadgeClick(text) {
    let { onKeyup } = this.props;
    var { value, details } = this.state;
    var tempDetails = details.filter((data) => data.email != text);
    this.setState({ details: tempDetails });
    let formattedResult = tempDetails.map((data) => {
      return data.email;
    });
    onKeyup && onKeyup(formattedResult, this.statusFlag(tempDetails));
  }
  handleBlur(e) {
    let { onBlur } = this.props;
    onBlur && onBlur(this.state.details);
  }

  render() {
    let {
      placeHolder = "Enter text",
      isMandatory = false,
      label,
      help,
      type = "text",
      onChange,
      onKeyPress,
      value,
      isPopupOpen,
    } = this.props;
    const { helperText } = this.state;

    return (
      <div className={style["input-holder"]}>
        {label && <p className={style["input-holder__header"]}>{label}</p>}
        <div
          className={style["input-div"]}
          style={isMandatory === true ? { border: "solid 1px #FA383E" } : {}}
        >
          {this.state.details.map((data, i) => (
            <Badge
              key={i}
              onClick={this.onBadgeClick}
              text={data.email}
              color={data.color}
            />
          ))}

          <input
            // type={type}
            onFocus={this.handleFocus}
            onBlur={this.handleBlur}
            onKeyPress={this.onKeyPress}
            onChange={onChange || this.onChange}
            className={style["input-area"]}
            placeholder={placeHolder}
            value={value || this.state.value}
          />
        </div>
        {(help || helperText) && (
          <div
            className={
              isMandatory === true
                ? style["input-holder__helper--red"]
                : style["input-holder__helper"]
            }
          >
            {(helperText && "The given email Id already exists") || help}
          </div>
        )}
      </div>
    );
  }
}

UserSelector.propTypes = {
  placeHolder: PropTypes.string,
  label: PropTypes.string,
  help: PropTypes.string,
  icon: PropTypes.string,
  value: PropTypes.string,
  onKeyup: PropTypes.func,
  isMandatory: PropTypes.bool,
};

UserSelector.defaultProps = {
  icon_position: "left",
  placeHolder: "Enter text",
  value: "",
  isMandatory: false,
  type: "text",
  onKeyup: function () {
    //console.log("keyup");
  },
};