背景 (Background)

Mendix開発において、ユーザーが「削除」や「送信」などの機密性の高い操作を実行する場合、通常は二次確認が必要です。Mendixのネイティブなアプローチは、グローバルモーダルを開くか、ブラウザの組み込みのwindow.confirm()を使用することです。

誤操作に対するより軽量でエレガントなインタラクションを提供するために、Ant DesignのPopconfirmコンポーネントをMendixに導入しました。

---

課題 (The Challenge)

このコンポーネントを開発する際の主な困難は、**「Widget内のWidget」と「イベントのインターセプト」**にあります：

1. コンテンツのラッピング：Popconfirmはトリガー要素（通常はボタン）をラップする必要があります。
2. イベントフロー制御：ユーザーがラップされたボタンをクリックしたとき、ボタンの元のActionを直接トリガーすることはできません。代わりに、最初にpopconfirmがポップアップする必要があります。

---

私たちのソリューション (Our Solution)

ReactのcloneElementとMendixのActionValue APIを使用して、上記の問題を完全に解決しました。

1. シームレスなスロット体験

開発者は、MendixのコンポーネントをStudio ProのPopconfirmのDropZoneにドラッグアンドドロップできます。コンポーネントは自動的に子要素のクリックイベントを引き継ぎます。

2. 豊富なカスタマイズ性

• テキストのカスタマイズ：メインタイトルと詳細な説明のカスタマイズをサポートします。
• 位置制御：12のポップアップ方向（TopLeft、BottomRightなど）をサポートします。

3. 非同期操作のサポート

popconfirmの「確認」ボタンは、MendixのActionメカニズムと完全に統合されています。

---

オープンソースの影響 (Open Source Impact)

• 🎨 インタラクション体験のアップグレード：トップのSaaS製品に匹敵する繊細なインタラクション体験をMendixアプリケーションにもたらします。
• ⏱️ 開発負担の軽減：開発者は、単純な確認プロンプトのために専用のポップアップページを描画する必要がなくなりました。
• 🤝 オープンソースの還元：このコンポーネントは完全に無料でオープンです。

---

お試しください (Try it out)

オンラインデモ: Mendix Antd Widget Demo

ソースコード (GitHub): GavinCnod/mendix-antd-popconfirm