irisrad-ui/src/components/irisMultiSelect/IrisMultiSelect.js

UI elements developered for IRIS R&D Group Inc

import React, { useEffect, useRef } from "react";
import "../../style/styles.css";
import PropTypes, { number, string } from "prop-types";
import MultiSelect from "./MultiSelect";

function IrisMultiSelect({
  className = "",
  label, //string value of the select element
  values = [], // string values of the selected option's value
  options = [], // array of object in shape {value: string, label: string}
  onChange, // onChange function when selection is changed
  valueField, // the property name whose value is the value that would be send to server
  labelField, // the property name whose value would be displayed to the user
  ...props
}) {
  const irisMultiSelectRef = useRef(null);
  useEffect(() => {
    let Element;
    if (irisMultiSelectRef && irisMultiSelectRef.current) {
      const { current } = irisMultiSelectRef;
      current.values = JSON.parse(JSON.stringify(values));
      current.onChange = onChange;
      Element = new MultiSelect(current);
    }
    return () => {
      Element?.unRegisterEventListeners();
    };
  }, [options]);

  let wrapperClassName = "iris-input-wrapper";
  if (typeof className === "string" && className !== "") {
    wrapperClassName += " " + className;
  }
  return (
    <div className={wrapperClassName} {...props}>
      <div
        ref={irisMultiSelectRef}
        // className="iris-multi-select-wrapper"
        className="iris-custom-select-container iris-multi-select-wrapper"
        iris-multi-select-element="iris-multi-select-element"
      >
        <textarea
          rows="1"
          className="iris-multi-select-text-area iris-input__input-field"
          disabled
          value={values.join(", ")}
        />
        <label className="iris-input__label">{label}</label>

        <ul
          iris-multi-select-list="iris-multi-select-list"
          className="iris-custom-select-list"
        >
          {options.map((option) => (
            <li key={option[valueField]} className="iris-custom-select-option">
              <input
                className="iris-multi-select-checkbox"
                type="checkbox"
                id={option[valueField]}
                name={option[labelField]}
                value={option[valueField]}
              />
              <span>{option[valueField]}</span>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

IrisMultiSelect.propTypes = {
  className: PropTypes.string,
  label: PropTypes.string,
  // values: PropTypes.arrayOf(PropTypes.oneOf(["number", "string"])),
  values: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.number),
    PropTypes.arrayOf(PropTypes.string),
  ]),
  options: PropTypes.arrayOf(PropTypes.object).isRequired,
  valueField: PropTypes.string.isRequired,
  labelField: PropTypes.string.isRequired,
};

export { IrisMultiSelect };