Source: input/DrawControlUndoOqt.js

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

/**
 * Contexto para boton de undo, al presionarlo se deshace la última escritura sobre el DrawOqt
 * @name Reactor.Components.Input.DrawControlUndoOqt
 * @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_undo>deshacer</draw_control_undo>
  </draw_control>
</draw>
*/

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

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

  const handleClick = (event) => {
    debug === "true" && console.log({event: "DrawControlUndo click"});
    undo();
    //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-undo" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M9 10h6c1.654 0 3 1.346 3 3s-1.346 3-3 3h-3v2h3c2.757 0 5-2.243 5-5s-2.243-5-5-5H9V5L4 9l5 4v-3z"></path></svg>
}