fix: inputValidator + input: 'file' (#2686)

sweetalert2 · Nov 14, 2023 · 25197ec · 25197ec
1 parent 1c04cda
commit 25197ec
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 30 deletions.
diff --git a/.github/workflows/chrome.yml b/.github/workflows/chrome.yml
@@ -39,9 +39,10 @@ jobs:
         if: github.ref_name == 'main'
         run: |
           ln -s ../../ test/ts/node_modules
-          tsc --lib dom,es6 --noEmit test/ts/simple-usage.ts
-          tsc --lib dom,es6 --noEmit test/ts/dist-sweetalert2.ts sweetalert2.d.ts
-          tsc --lib dom,es6 --noEmit test/ts/src-sweetalert2.ts sweetalert2.d.ts
+          tsc --lib dom,es6 --noEmit --strict test/ts/simple-usage.ts
+          tsc --lib dom,es6 --noEmit --strict test/ts/inputValidator.ts
+          tsc --lib dom,es6 --noEmit --strict test/ts/dist-sweetalert2.ts sweetalert2.d.ts
+          tsc --lib dom,es6 --noEmit --strict test/ts/src-sweetalert2.ts sweetalert2.d.ts
 
       - name: Run automated release process with semantic-release
         if: github.ref_name == 'main'

diff --git a/sweetalert2.d.ts b/sweetalert2.d.ts
@@ -180,7 +180,7 @@ declare module 'sweetalert2' {
      * Swal.showLoading(Swal.getDenyButton())
      * ```
      */
-    function showLoading(buttonToReplace?: HTMLButtonElement): void
+    function showLoading(buttonToReplace?: HTMLButtonElement | null): void
 
     /**
      * Hides loader and shows back the button which was hidden by .showLoading()
@@ -380,6 +380,46 @@ declare module 'sweetalert2' {
     | 'week'
     | 'month'
 
+  type SweetAlertStringInput = Exclude<SweetAlertInput, 'file'>
+
+  type SweetAlertFileInput = 'file'
+
+  type SweetAlertInputValidator =
+    | {
+        input?: SweetAlertStringInput
+        /**
+         * Validator for input field, may be async (Promise-returning) or sync.
+         *
+         * Example:
+         * ```
+         * Swal.fire({
+         *   input: 'radio',
+         *   inputValidator: result => !result && 'You need to select something!'
+         * })
+         * ```
+         *
+         * @default undefined
+         */
+        inputValidator?: (value: string) => SyncOrAsync<string | null | false | void>
+      }
+    | {
+        input: SweetAlertFileInput
+        /**
+         * Validator for input field, may be async (Promise-returning) or sync.
+         *
+         * Example:
+         * ```
+         * Swal.fire({
+         *   input: 'file',
+         *   inputValidator: result => !result && 'You need to select something!'
+         * })
+         * ```
+         *
+         * @default undefined
+         */
+        inputValidator?: (file: File | FileList | null) => SyncOrAsync<string | null | false | void>
+      }
+
   export type SweetAlertPosition =
     | 'top'
     | 'top-start'
@@ -467,7 +507,7 @@ declare module 'sweetalert2' {
     readonly dismiss?: Swal.DismissReason
   }
 
-  export interface SweetAlertOptions {
+  export type SweetAlertOptions = SweetAlertInputValidator & {
     /**
      * The title of the popup, as HTML.
      * It can either be added to the object under the key `title` or passed as the first parameter of `Swal.fire()`.
@@ -611,15 +651,6 @@ declare module 'sweetalert2' {
      */
     target?: string | HTMLElement | null
 
-    /**
-     * Input field type, can be `'text'`, `'email'`, `'password'`, `'number'`, `'tel'`, `'search'`, `'range'`,
-     * `'textarea'`, `'select'`, `'radio'`, `'checkbox'`, `'file'`, `'url'`, `'date'`, `'datetime-local'`,
-     * `'time'`, `'week'`, `'month'`.
-     *
-     * @default undefined
-     */
-    input?: SweetAlertInput
-
     /**
      * Popup width, including paddings (`box-sizing: border-box`).
      *
@@ -1078,22 +1109,6 @@ declare module 'sweetalert2' {
      */
     inputAttributes?: Record<string, string>
 
-    /**
-     * Validator for input field, may be async (Promise-returning) or sync.
-     *
-     * Example:
-     * ```
-     * Swal.fire({
-     *   title: 'Select color',
-     *   input: 'radio',
-     *   inputValidator: result => !result && 'You need to select something!'
-     * })
-     * ```
-     *
-     * @default undefined
-     */
-    inputValidator?(inputValue: string, validationMessage?: string): SyncOrAsync<string | null | false | void>
-
     /**
      * If you want to return the input value as `result.value` when denying the popup, set to `true`.
      * Otherwise, the denying will set `result.value` to `false`.

diff --git a/test/ts/inputValidator.ts b/test/ts/inputValidator.ts
@@ -0,0 +1,19 @@
+import Swal from 'sweetalert2'
+
+// https://www.totaltypescript.com/how-to-test-your-types
+type Expect<T extends true> = T
+type Equal<X, Y> = (<T>() => T extends X ? 1 : 2) extends <T>() => T extends Y ? 1 : 2 ? true : false
+
+Swal.fire({
+  input: 'text',
+  inputValidator: (inputValue) => {
+    type test = Expect<Equal<typeof inputValue, string>>
+  },
+})
+
+Swal.fire({
+  input: 'file',
+  inputValidator: (inputValue) => {
+    type test = Expect<Equal<typeof inputValue, File | FileList | null>>
+  },
+})