Source: input/DrawControlResetOqt.js

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

/**
 * Contexto para boton de reset, al presionarlo se borra todo el contenido del DrawOqt
 * @name Reactor.Components.Input.DrawControlResetOqt
 * @param {JsonString?} div_options
 *    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, si no se pasa un cuerpo se muestra un icono predeterminado
 * @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_reset>resetear</draw_control_reset>
  </draw_control>
</draw>
*/

export const DrawControlResetOqt = ({div_options, debug = "false", children}) => {

  const { props, reset } = useContext(DrawOqtContext);

  const handleClick = (event) => {
    debug === "true" && console.log({event: "DrawControlUndo click"});
    reset();
    //event.preventDefault();
    event.stopPropagation();
  }

  const options = useMemo(()=>{
    return processOptions(div_options);
  }, [div_options]);

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

const Icon = () => {
  return <svg className="draw-control-reset" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m2.586 15.408 4.299 4.299a.996.996 0 0 0 .707.293h12.001v-2h-6.958l7.222-7.222c.78-.779.78-2.049 0-2.828L14.906 3a2.003 2.003 0 0 0-2.828 0l-4.75 4.749-4.754 4.843a2.007 2.007 0 0 0 .012 2.816zM13.492 4.414l4.95 4.95-2.586 2.586L10.906 7l2.586-2.586zM8.749 9.156l.743-.742 4.95 4.95-4.557 4.557a1.026 1.026 0 0 0-.069.079h-1.81l-4.005-4.007 4.748-4.837z"></path></svg>
}