test-crud/components/forms/AppMultiSearchClientes.jsx

es una prueba acerca de como publicar un package name

import React, { useState, useEffect } from "react";
import { useFormikContext } from "formik";
import MultiSearchInput from "../inputs/searchInput/MultiSearchInput";

function AppMultiSearchClientes({
  name,
  label,
  valueProperty = "id",
  labelProperty,
  asyncData,
  asyncParameters,
  onSelect,
  data = null,
  renderTags = null,
  onChangeInput = null,
  endAdornment = null,
  startAdornment = null,
  defaultValues = null,
  ...rest
}) {
  const [open, setOpen] = useState(false);
  const [options, setOptions] = useState([]);
  const [inputValue, setInputValue] = useState("");

  const loading = open && options.length === 0;

  const {
    setFieldValue,
    setFieldTouched,
    errors,
    touched,
    values,
    initialValues,
  } = useFormikContext();

  useEffect(() => {
    let active = true;
    if (!loading) return undefined;

    asyncData(asyncParameters).then((res) => {
      if (res.data) {
        if (active) setOptions(res.data);
      }
    });

    return () => {
      active = false;
    };
  }, [loading]);

  useEffect(() => {
    if (!open) {
      setOptions([]);
    }
  }, [open]);

  useEffect(() => {
    let selectedItems = [];
    if (values?.[name] && Array.isArray(values[name])) {
      asyncData(asyncParameters).then((res) => {
        if (res.data) {
          selectedItems = getSelectedItems(res.data);

          if (selectedItems.length > 0) {
            setFieldValue(name, selectedItems);
            onSelect && onSelect([...selectedItems]);
          }
        }
      });
    }
  }, [initialValues]);

  useEffect(() => {
    asyncData(asyncParameters).then((res) => {
      if (res && res.data) {
        setOptions(res.data);
        // setFieldValue(name, selectedItems);
        onSelect && onSelect([...selectedItems]);
      }
    });
  }, [asyncParameters]);

  const getSelectedItems = (listItems) => {
    const selectedItems = [];
    listItems.map((listItem) => {
      if (
        values?.[name]?.find(
          (propertyItem) =>
            propertyItem?.[valueProperty] === listItem[valueProperty] ||
            propertyItem?.[valueProperty] === listItem["id"]
        )
      ) {
        selectedItems.push(listItem);
      }
    });
    return selectedItems;
  };

  const handleSelect = (items) => {
    if (!items) return;
    setFieldValue(name, [...items]);
    onSelect && onSelect([...items]);
  };

  return (
    <div>
      <MultiSearchInput
        multiple={true}
        name={name}
        label={label}
        value={values?.[name] || []}
        options={options}
        inputValue={inputValue}
        renderTags={renderTags && renderTags}
        getOptionLabel={(option) => option?.[labelProperty]}
        isOptionEqualToValue={(option, value) =>
          option?.[valueProperty] === value
        }
        onInputChange={(event, newValue) => {
          event && onChangeInput && onChangeInput(newValue.toString());
          event && setInputValue(newValue.toString());
        }}
        open={open}
        onOpen={() => setOpen(true)}
        onClose={() => setOpen(false)}
        loading={loading}
        onBlur={() => setFieldTouched(name)}
        onChange={(event, newValue) => handleSelect(newValue)}
        touched={touched[name]}
        errorMessage={errors[name]}
        startAdornment={startAdornment}
        endAdornment={endAdornment}
        {...rest}
      />
    </div>
  );
}

export default AppMultiSearchClientes;