irisrad-ui/src/components/irisGroupedSelect/IrisGroupedSelect.js

UI elements developered for IRIS R&D Group Inc

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

function IrisGroupedSelect({
  className = "",
  label, //string value of the select element
  value, // string value of the selected option's value
  options, // array of object in shape {value: string, label: string}
  onChange, // onChange function when selection is changed
  groupedField,
  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 irisCustomSelectRef = useRef(null);
  const randomRef = useRef(null);
  const [groupedOptions, setGroupedOptions] = useState(null);

  useEffect(() => {
    const grouped = options.reduce((acc, ele) => {
      const key = ele[groupedField];
      const values = acc[key];
      if (values) {
        acc[key] = [...values, ele];
      } else {
        acc[key] = [ele];
      }
      return acc;
    }, {});
    setGroupedOptions(grouped);
  }, [options, groupedField]);

  useEffect(() => {
    let Element;
    if (groupedOptions && randomRef?.current?.childNodes) {
      const { current } = irisCustomSelectRef;
      current.onChange = onChange;
      Element = new GroupedSelect(current);
    }
    return () => {
      Element?.unregisterListeners();
    };
  }, [groupedOptions]);
  return (
    <div className="iris-input-wrapper" {...props}>
      <div
        ref={irisCustomSelectRef}
        className={[
          "iris-custom-select-wrapper",
          className ? className : "",
        ].join(" ")}
        // className="iris-custom-select-wrapper"
      >
        <div className="iris-custom-select-container  iris-input__input-field">
          {/* label shows the select label title */}
          <div className="iris-custom-select-label-wrapper">
            <h2 className="iris-custom-select-label"></h2>
            <div className="arrow-down"></div>
          </div>
          <ul className="iris-custom-select-list" ref={randomRef}>
            {groupedOptions &&
              Object.keys(groupedOptions).map((objectKey) => {
                const elements = groupedOptions[objectKey];
                return (
                  <div key={objectKey} className="grouped-list-container">
                    <label className="grouped-list-label">{objectKey}</label>
                    <ul>
                      {elements.map((ele) => (
                        <li
                          value={ele[valueField]}
                          key={ele[valueField]}
                          selected={ele[valueField] === value}
                        >
                          {ele[labelField]}
                        </li>
                      ))}
                    </ul>
                  </div>
                );
              })}
          </ul>
          {/* label for the element ie: please select a blablabla */}
          <label className="iris-input__label">{label}</label>
        </div>
      </div>
    </div>
  );
}

IrisGroupedSelect.propTypes = {
  className: PropTypes.string,
  label: PropTypes.string,
  groupedField: PropTypes.string.isRequired,
  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  options: PropTypes.arrayOf(PropTypes.object).isRequired,
  valueField: PropTypes.string.isRequired,
  labelField: PropTypes.string.isRequired,
};

export { IrisGroupedSelect };