feat: add iconHtml mount (#147)

* feat: add iconHtml mount * do not create unnnecessary react elements * fix mount * require sweetalert2 ^10.14.1 in peerDeps
sweetalert2 · Feb 12, 2021 · 8dd92fa · 8dd92fa
1 parent 85205ac
commit 8dd92fa
Show file tree

Hide file tree

Showing 8 changed files with 839 additions and 843 deletions.
diff --git a/README.md b/README.md
@@ -19,6 +19,7 @@ The following options can be React elements:
  - cancelButtonText
  - footer
  - closeButtonHtml
+ - iconHtml
 
 ## Installation
 

diff --git a/package.json b/package.json
@@ -42,7 +42,7 @@
   "peerDependencies": {
     "react": "^16.0.0 || ^17.0.0",
     "react-dom": "^16.0.0 || ^17.0.0",
-    "sweetalert2": "^9.7.0 || ^10.0.0"
+    "sweetalert2": "^9.7.0 || ^10.14.1"
   },
   "devDependencies": {
     "@babel/core": "^7.2.2",

diff --git a/src/index.js b/src/index.js
@@ -35,7 +35,7 @@ export default function withReactContent (ParentSwal) {
           const superOpenHook = params[openHookName] || noop
           params[openHookName] = (element) => {
             domElement = getter(ParentSwal)
-            ReactDOM.render(reactElement, domElement)
+            domElement && ReactDOM.render(reactElement, domElement)
             superOpenHook(element)
           }
 

diff --git a/src/mounts.js b/src/mounts.js
@@ -27,4 +27,8 @@ export const mounts = [
     key: 'closeButtonHtml',
     getter: swal => swal.getCloseButton(),
   },
+  {
+    key: 'iconHtml',
+    getter: swal => swal.getIcon() ? swal.getIcon().querySelector('.swal2-icon-content') : null,
+  },
 ]
diff --git a/src/sweetalert2-react-content.d.ts b/src/sweetalert2-react-content.d.ts
@@ -40,8 +40,11 @@ interface ReactOptions {
   title?: ReactElementOr<'title'>;
   html?: ReactElementOr<'html'>;
   confirmButtonText?: ReactElementOr<'confirmButtonText'>;
+  denyButtonText?: ReactElementOr<'denyButtonText'>;
   cancelButtonText?: ReactElementOr<'cancelButtonText'>;
   footer?: ReactElementOr<'footer'>;
+  closeButtonHtml?: ReactElementOr<'closeButtonHtml'>;
+  iconHtml?: ReactElementOr<'iconHtml'>;
 }
 
 // Overwrite<T, U> will take the properties of U and add to it the properties of T that are not in U.

diff --git a/test/integration.test.js b/test/integration.test.js
@@ -21,6 +21,8 @@ describe('integration', () => {
     await MySwal.fire({
       title: <span>title</span>,
       html: <span>html</span>,
+      icon: 'success',
+      iconHtml: <span>@</span>,
       confirmButtonText: <span>confirmButtonText</span>,
       denyButtonText: <span>denyButtonText</span>,
       cancelButtonText: <span>cancelButtonText</span>,
@@ -38,6 +40,9 @@ describe('integration', () => {
         expect(MySwal.getCancelButton().innerHTML).toEqual(
           '<span>cancelButtonText</span>',
         )
+        expect(MySwal.getIcon().innerHTML).toEqual(
+          '<div class="swal2-icon-content"><span>@</span></div>',
+        )
         expect(MySwal.getFooter().innerHTML).toEqual('<span>footer</span>')
         expect(MySwal.getCloseButton().innerHTML).toEqual('<span>closeButtonHtml</span>')
         MySwal.clickConfirm()

diff --git a/test/test-build.html b/test/test-build.html
@@ -3,8 +3,8 @@
 <head>
   <meta charset="UTF-8">
   <script src="../node_modules/sweetalert2/dist/sweetalert2.all.min.js"></script>
-  <script src="../node_modules/react/umd/react.production.min.js"></script>
-  <script src="../node_modules/react-dom/umd/react-dom.production.min.js"></script>
+  <script src="../node_modules/react/umd/react.development.js"></script>
+  <script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
   <script src="../dist/sweetalert2-react-content.umd.js"></script>
 </head>
 <body>
@@ -13,7 +13,9 @@
   let MySwal = withReactContent(Swal)
   Promise.resolve().then(async () => {
     await MySwal.fire({
-      title: React.createElement('i', {}, ['Hello World']),
+      icon: 'success',
+      iconHtml: React.createElement('b', {key: 'iconHtml'}, ['P']),
+      title: React.createElement('i', {key: 'title'}, ['Hello World']),
       didOpen: (popup) => {
         console.log('didOpen', popup)
       },

diff --git a/yarn.lock b/yarn.lock