@olenbetong/data-binding/src/select.js

import React from "react";
import { useDataObject } from "./context";
import { useFetchData } from "@olenbetong/react-data-object-connect";
import setDataObjectField from "./setDataObjectField";

function BoundSelect(
  {
    as,
    children,
    dataObject,
    descriptionField,
    field,
    filter = "",
    nullable,
    option,
    optionComponent,
    valueField,
    ...other
  },
  forwardRef
) {
  const Component = as ? as : "select";
  const OptionComponent = optionComponent ? optionComponent : "option";
  const { currentRow: record, dataObject: targetDataObject } = useDataObject(targetDataObject);

  let isNullable = nullable;
  if (typeof nullable !== "boolean") {
    if (targetDataObject && targetDataObject.getFields) {
      let fieldDef = targetDataObject.getFields(field);
      isNullable = fieldDef.nullable;
    }
  }

  const { data } = useFetchData(dataObject, dataObject ? filter : false);

  return (
    <Component
      value={record[field] || ""}
      onChange={evt => setDataObjectField(targetDataObject, field, evt)}
      data-field={field}
      {...other}
      ref={forwardRef}
    >
      {isNullable && <OptionComponent value="" />}
      {children}
      {dataObject &&
        data.map(record =>
          option ? (
            option(record)
          ) : (
            <OptionComponent key={record[valueField]} value={record[valueField]}>
              {record[descriptionField || valueField]}
            </OptionComponent>
          )
        )}
    </Component>
  );
}

export default React.forwardRef(BoundSelect);