UNPKG

irisrad-ui

Version:

UI elements developered for IRIS R&D Group Inc

103 lines (97 loc) 3.61 kB
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 };