irisrad-ui/src/components/irisInput/IrisInput.js

UI elements developered for IRIS R&D Group Inc

import React from "react";
import "../../style/styles.css";
import PropTypes from "prop-types";

const WRAPPER_CLASS = "iris-input-wrapper";
function IrisInput({ className = "", label = "", dataList, ...props }) {
  let wrapperClassName = WRAPPER_CLASS;
  if (typeof className === "string" && className !== "") {
    wrapperClassName += " " + className;
  }
  return (
    <div className={wrapperClassName}>
      <input
        type="input"
        className="iris-input__input-field"
        placeholder={label}
        autoComplete={dataList && dataList.title ? "off" : "on"}
        required
        list={dataList && dataList.title ? dataList.title : ""}
        {...props}
      />
      {dataList?.title && dataList?.data && (
        <>
          <datalist id={dataList.title}>
            {dataList.data.map((data) => (
              <option key={data}>{data}</option>
            ))}
          </datalist>
        </>
      )}
      <label htmlFor="label" className="iris-input__label">
        {label}
      </label>
    </div>
  );
}

IrisInput.propTypes = {
  className: PropTypes.string,
  label: PropTypes.string.isRequired,
  dataList: PropTypes.shape({
    title: PropTypes.string.isRequired,
    data: PropTypes.arrayOf(PropTypes.string).isRequired,
  }),
};
export { IrisInput };