irisrad-ui
Version:
UI elements developered for IRIS R&D Group Inc
103 lines (97 loc) • 3.61 kB
JavaScript
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 };