Source: input/SelectExt.js

import React, { useEffect, useMemo, useState } from "react";
import { emptyObject, processOptions, useVariables } from "../..";

/**
 * Componente que renderiza un select con opciones extendidas
 * @name Reactor.Components.Input.SelectExt
 * @param {string} [options = {}] Json string con las propiedades React que se quieran asignar al componente
 * @param {string} name 
 *  name del control
 * @param {BooleanString} [use_change = "false"] 
 *  establece si envia el evento change al cambiar el archivo
 * @param {string?} storage_name El nombre que usara para guardar el dato en el storage, si no se pasa este parámetro se usara el name del input
 * @param {string?} change_var Variable que tomará el valor del control cuando se modifique
 * @param {string} [context = "global"] Contexto donde se encuentra la variable
 * @class 
 * @example 

<select_ext name="nombre_control" options='{"className": "clase1", "style": {"width": 120}}' var-value="nombreVariable" context="nombreContexto" change_var="nombreVariable">
  <option value="opcion1">opcion1</option>
  <option value="opcion2">opcion2</option>
</select_ext>
*/

export const SelectExt = ({defaultValue, value, options = "{}", context, change_var, children, storage_name, ...props}) => {

  const [ controlValue, setControlValue ] = useState(defaultValue)
  const variables = useVariables({variable: change_var, context, storage: storage_name});

  const handleChange = (event) => {
    variables.setData(event.target.value);
    setControlValue(event.target.value);
  }

  const optionsObj = useMemo(()=>processOptions(options), [options]);

  useEffect(()=>{
    //console.log({value})
    setControlValue(value || "");
    //variables.setData(value || "");
  }, [value])

  return (
    <select {...props} {...optionsObj} value={controlValue} onChange={handleChange}>
      {children}
    </select>
  )

}