Antecedentes (Background)

En el desarrollo de Mendix, cuando los usuarios realizan operaciones sensibles como "Eliminar" o "Enviar", generalmente se requiere una confirmación secundaria. El enfoque nativo de Mendix es abrir un modal global o usar el window.confirm() del navegador.

Para proporcionar una interacción contra toques accidentales más ligera y elegante, introdujimos el componente Popconfirm de Ant Design en Mendix.

El Desafío (The Challenge)

Las dificultades principales en el desarrollo de este componente radican en "Widgets dentro de Widgets" e "Intercepción de Eventos":

1. Envoltura de Contenido: Popconfirm necesita envolver un elemento disparador (generalmente un botón).
2. Control de Flujo de Eventos: Cuando el usuario hace clic en el botón envuelto, la Acción original del botón no se puede activar directamente; en su lugar, el popconfirm debe aparecer primero.

Nuestra Solución (Our Solution)

Resolvimos perfectamente los problemas anteriores utilizando cloneElement de React y la API ActionValue de Mendix.

1. Experiencia de Ranura Perfecta

Los desarrolladores pueden arrastrar y soltar cualquier componente de Mendix en la DropZone del Popconfirm en Studio Pro. El componente se hará cargo automáticamente del evento de clic del elemento secundario.

2. Rica Personalización

• Personalización de Texto: Admite la personalización del Título principal y la Descripción detallada.
• Control de Posición: Admite 12 direcciones emergentes (por ejemplo, TopLeft, BottomRight, etc.).

3. Soporte de Operación Asíncrona

El botón "Confirmar" del popconfirm se integra perfectamente con el mecanismo de Acción de Mendix.

Impacto del Código Abierto (Open Source Impact)

• 🎨 Actualización de la Experiencia: Brinda experiencias de interacción delicadas comparables a los mejores productos SaaS.
• ⏱️ Carga de Desarrollo Reducida: Los desarrolladores ya no necesitan dibujar una página Popup dedicada para un mensaje de confirmación simple.
• 🤝 Devolución de Código Abierto: Este componente es completamente gratuito y abierto.

Pruébalo (Try it out)

Demo en Línea: Mendix Antd Widget Demo

Código Fuente (GitHub): GavinCnod/mendix-antd-popconfirm