Source: input/DrawControlColorOqt.js

import React, { useContext, useMemo } from "react";
import { DrawOqtContext, processOptions } from "../..";

/**
 * Contexto para boton de color, al presionarlo se selecciona el color en DrawOqt
 * @name Reactor.Components.Input.DrawControlColorOqt
 * @param {string} [color = ""] 
 *    Color que va a representar el control
 * @param {string} [selected_class = "selected"] 
 *    Clase que se agrega al componente cuando el color es seleccionado
 * @param {JsonString?} div_options
 *    Json string con las propiedades que se usaran para el div root del componente
 * @param {BooleanString} [debug = "false"]
 *    Determina si se mostrara en consola una salida de depuración
 * @param {HTMLElement?} children
 *    Cuerpo del componente
 * @class 
 * @example 
<draw name="firma" options='{"brushColor": "blue"}'>
  <draw_control>
    <draw_control_color color="red" selected_class="draw-control-color-custom selected" div_options='{"style": {"padding": 5}}'>
      <span>ROJO</span>
    </draw_control_color>
  </draw_control>
</draw>
*/

export const DrawControlColorOqt = ({color = "", selected_class = "selected", div_options, debug = "false", children}) => {

  const { props, setBrushColor } = useContext(DrawOqtContext);
  const { brushColor } = props;

  const handleClick = (event) => {
    debug === "true" && console.log({event: "DrawControlColor click", color, selected_class, div_options, brushColor})
    setBrushColor(color);
    //event.preventDefault();
    event.stopPropagation();
  }

  const options = useMemo(()=>{
    const tempOptions = {className: "draw-control-button", ...processOptions(div_options)};
    return {
      ...tempOptions,
      className: color === brushColor ?  `${tempOptions.className || "draw-control-button"} ${selected_class}` : tempOptions.className || "draw-control-color"
    }
  }, [brushColor, color, div_options]);

  return (
    <div {...options} onClick={handleClick}>
      {children}
    </div>
  )
}