Source: input/DrawControlOqt.js

import React, { useMemo } from "react";
import { DrawControlColorOqt, DrawControlResetOqt, DrawControlUndoOqt, processOptions } from "../..";
/**
 * Panel de controles del componente DrawOqt, que se mostrara debajo de la pizarra
 * 
 * @name Reactor.Components.Input.DrawControlOqt
 * @param {string} [colors = ""] 
 *    Lista de colores disponibles, separados por espacio, Ej.: "black red yellow blue green"
 * @param {BooleanString} [undo = "false"] 
 *    Determina si se permite utilizar undo
 * @param {BooleanString} [reset = "false"] 
 *    Determina si se permite utilizar un reseteo del lienzo 
 * @param {JsonString?} div_options
 *    Propiedades del div raiz
 * @param {BooleanString} [debug = "false"] 
 *    Determina si se enviaran a la consola datos de depuración
 * @param {HTMLElement?} children
 *    Body del componente, si no se pasa cuerpo, 
 *    el componente genera un children a partir de las propiedades pasadas en colors, undo y reset
 * @class 
 * @example 
<draw name="firma" options='{"brushColor": "blue"}'>
  <draw_control colors="#ffffff blue red black" undo="true" reset="true"></draw_control>
</draw>
*/
export const DrawControlOqt = ({colors = "", undo = "false", reset = "false", div_options, children}) => {
  const colorList = useMemo(() => colors.split(" "), [colors]);
  const options = useMemo(()=>{
    return processOptions(div_options);
  }, [div_options]);
  return (
    <>
      <div className="draw-control" {...options}>
        {(!children || children.length === 0) && 
          <>
            <div className="draw-control-color">
              {
                colorList.map(color => <DrawControlColorOqt color={color} div_options={{style: {backgroundColor: color}}}/>)
              }
            </div>
            {undo === "true" && <DrawControlUndoOqt div_options={{className: "draw-control-button"}}/>}
            {reset === "true" && <DrawControlResetOqt div_options={{className: "draw-control-button"}}/>}
          </>
        }
        {children}
      </div>
    </>
  )
}