test-crud/components/forms/AppSelectInput.jsx

es una prueba acerca de como publicar un package name

import React, { useEffect, useState } from "react";
import { useFormikContext } from "formik";
// import SelectInput from "../controls/selectInput/selectInput";
import Select from "@mui/material/Select";
import { FormControl, InputLabel, MenuItem } from "@mui/material";

function AppSelectInput({
  name,
  label,
  items,
  valueProperty = "id",
  labelProperty,
  onSelect,
  value = null,
  ...rest
}) {
  const { setFieldValue, setFieldTouched, errors, touched, values } =
    useFormikContext();
  const [select, setSelect] = useState("");

  const handleSelect = (item) => {
    if (!item) return setFieldValue(name, "");
    const target = item.target.value;
    setFieldValue(name, target);
    setSelect(item.target.value);
    onSelect && onSelect(item.target.value);
  };

  useEffect(() => {
    value && setFieldTouched(name);
  }, []);

  return (
    <div>
      <FormControl fullWidth>
        <InputLabel id="demo-simple-select-label">{label}</InputLabel>
        <Select
          name={name}
          labelId="demo-simple-select-standard-label"
          id="demo-simple-select-standard"
          value={value || select}
          onChange={handleSelect}
          label={label}
          touched={touched[name]}
          errorMessage={errors[name]}
          onBlur={() => setFieldTouched(name)}
          {...rest}
          // rightIcon={
          //   touched[name] && !errors[name] && "fa-solid fa-circle-check"
          // }
        >
          {items.map((item) => (
            <MenuItem key={item[valueProperty]} value={item[valueProperty]}>
              {item[labelProperty]}
            </MenuItem>
          ))}
        </Select>
      </FormControl>
    </div>
  );
}

export default AppSelectInput;