refactor: use change event type

swordev · Apr 27, 2022 · e7246bc · e7246bc
1 parent 162ad2a
commit e7246bc
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 20 deletions.
diff --git a/.changeset/four-rules-pretend.md b/.changeset/four-rules-pretend.md
@@ -0,0 +1,6 @@
+---
+"@suid/material": patch
+"@suid/types": patch
+---
+
+Use change event type
diff --git a/packages/material/src/FormControlLabel/FormControlLabelContext.ts b/packages/material/src/FormControlLabel/FormControlLabelContext.ts
@@ -1,14 +1,11 @@
 import { RefProp } from "@suid/system/createRef";
-import { EventParam } from "@suid/types";
+import { ChangeEvent } from "@suid/types";
 import { createContext } from "solid-js";
 
 export interface FormControlLabelState {
   checked?: boolean;
   name?: string;
-  onChange?: (
-    event: EventParam<HTMLInputElement, MouseEvent>,
-    checked: boolean
-  ) => void;
+  onChange?: (event: ChangeEvent<HTMLInputElement>, checked: boolean) => void;
   value?: any;
   inputRef?: RefProp;
   disabled?: boolean;

diff --git a/packages/material/src/FormControlLabel/FormControlLabelProps.tsx b/packages/material/src/FormControlLabel/FormControlLabelProps.tsx
@@ -3,7 +3,7 @@ import { TypographyProps } from "../Typography";
 import { FormControlLabelClasses } from "./formControlLabelClasses";
 import { SxProps } from "@suid/system";
 import { RefProp } from "@suid/system/createRef";
-import { ElementType, EventParam, OverrideProps } from "@suid/types";
+import { ChangeEvent, ElementType, OverrideProps } from "@suid/types";
 import { JSXElement } from "solid-js";
 
 export interface FormControlLabelTypeMap<
@@ -62,13 +62,10 @@ export interface FormControlLabelTypeMap<
     /**
      * Callback fired when the state is changed.
      *
-     * @param {EventParam<HTMLElement, MouseEvent>} event The event source of the callback.
+     * @param {ChangeEvent<HTMLElement>} event The event source of the callback.
      * You can pull out the new checked state by accessing `event.target.checked` (boolean).
      */
-    onChange?: (
-      event: EventParam<HTMLElement, MouseEvent>,
-      checked: boolean
-    ) => void;
+    onChange?: (event: ChangeEvent<HTMLElement>, checked: boolean) => void;
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */

diff --git a/packages/material/src/internal/SwitchBase.tsx b/packages/material/src/internal/SwitchBase.tsx
@@ -191,9 +191,9 @@ const SwitchBase = $.component(function SwitchBase({
 
           if (typeof props.onChange === "function") {
             // TODO v6: remove the second argument.
-            props.onChange(event, newChecked);
+            props.onChange(event as any, newChecked);
           } else {
-            formControlLabel?.onChange?.(event, newChecked);
+            formControlLabel?.onChange?.(event as any, newChecked);
           }
 
           if (typeof otherProps.onClick === "function")

diff --git a/packages/material/src/internal/SwitchBaseProps.ts b/packages/material/src/internal/SwitchBaseProps.ts
@@ -1,6 +1,6 @@
 import { OverrideProps } from "../OverridableComponent";
 import { SwitchBaseClasses } from "./switchBaseClasses";
-import { ElementType, EventParam, Ref } from "@suid/types";
+import { ElementType, Ref, ChangeEvent } from "@suid/types";
 import { JSX, JSXElement } from "solid-js";
 
 export interface SwitchBasePropsVariantOverrides {}
@@ -61,14 +61,11 @@ export interface SwitchBaseTypeMap<P = {}, D extends ElementType = "div"> {
     /**
      * Callback fired when the state is changed.
      *
-     * @param {EventParam<HTMLInputElement, MouseEvent>} event The event source of the callback.
+     * @param {ChangeEvent<HTMLInputElement>} event The event source of the callback.
      * You can pull out the new value by accessing `event.target.value` (string).
      * You can pull out the new checked state by accessing `event.target.checked` (boolean).
      */
-    onChange?: (
-      event: EventParam<HTMLInputElement, MouseEvent>,
-      checked: boolean
-    ) => void;
+    onChange?: (event: ChangeEvent<HTMLInputElement>, checked: boolean) => void;
     readOnly?: boolean;
     /**
      * If `true`, the `input` element is required.

diff --git a/packages/types/src/events.ts b/packages/types/src/events.ts
@@ -7,9 +7,13 @@ export type EventParam<T = HTMLElement, E extends Event = Event> = E & {
 
 type EH<T, E extends Event> = JSX.EventHandler<T, E>;
 
+export type ChangeEvent<T = Element> = EventParam<T, Event> & {
+  target: EventTarget & T;
+};
+
 export type AnimationEventHandler<T = Element> = EH<T, AnimationEvent>;
 export type ChangeEventHandler<T = Element, V = string> = (
-  event: Parameters<EH<T, KeyboardEvent>>[0],
+  event: ChangeEvent<T>,
   value: V
 ) => void;
 export type ClipboardEventHandler<T = Element> = EH<T, ClipboardEvent>;