fix: issue with typings for react

db-ui · Mar 28, 2024 · e37f7d6 · e37f7d6
1 parent c8cf524
commit e37f7d6
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 10 deletions.
diff --git a/packages/components/scripts/post-build/react.js b/packages/components/scripts/post-build/react.js
@@ -16,6 +16,10 @@ const overwriteEvents = (tmp) => {
 		'export type ChangeEvent<T> = Event;',
 		'export type ChangeEvent<T> = React.ChangeEvent<T>;'
 	);
+	modelFileContent = modelFileContent.replace(
+		'export type InputEvent<T> = Event;',
+		'export type InputEvent<T> = React.FormEvent<T>;'
+	);
 	modelFileContent = modelFileContent.replace(
 		'export type InteractionEvent<T> = FocusEvent;',
 		'export type InteractionEvent<T> = React.FocusEvent<T>;'
@@ -46,6 +50,10 @@ module.exports = (tmp) => {
 					from: /= useState/g,
 					to: '= useState<any>'
 				},
+				{
+					from: `handleFrameworkEvent(this`,
+					to: `// handleFrameworkEvent(this`
+				},
 				{
 					from: ` } from "react"`,
 					to: `, forwardRef, HTMLProps } from "react"`

diff --git a/packages/components/src/components/input/input.lite.tsx b/packages/components/src/components/input/input.lite.tsx
@@ -14,6 +14,7 @@ import {
 	DEFAULT_MESSAGE_ID_SUFFIX
 } from '../../shared/constants';
 import {
+	InputEvent,
 	ChangeEvent,
 	InteractionEvent,
 	KeyValueType
@@ -36,7 +37,7 @@ export default function DBInput(props: DBInputProps) {
 			label: DEFAULT_LABEL,
 			placeholder: ' '
 		},
-		handleInput: (event: ChangeEvent<HTMLInputElement>) => {
+		handleInput: (event: InputEvent<HTMLInputElement>) => {
 			if (props.onInput) {
 				props.onInput(event);
 			}

diff --git a/packages/components/src/components/textarea/model.ts b/packages/components/src/components/textarea/model.ts
@@ -41,7 +41,7 @@ export interface DBTextareaDefaultProps {
 export type DBTextareaProps = DBTextareaDefaultProps &
 	ChangeEventProps<HTMLTextAreaElement> &
 	DefaultVariantProps &
-	InputEventProps<HTMLInputElement> &
+	InputEventProps<HTMLTextAreaElement> &
 	FocusEventProps<HTMLTextAreaElement> &
 	FormProps &
 	GlobalProps &
@@ -52,7 +52,7 @@ export interface DBTextareaDefaultState {}
 
 export type DBTextareaState = DBTextareaDefaultState &
 	ChangeEventState<HTMLTextAreaElement> &
-	InputEventState<HTMLInputElement> &
+	InputEventState<HTMLTextAreaElement> &
 	FocusEventState<HTMLTextAreaElement> &
 	FormState &
 	GlobalState;
diff --git a/packages/components/src/components/textarea/textarea.lite.tsx b/packages/components/src/components/textarea/textarea.lite.tsx
@@ -13,7 +13,7 @@ import {
 	DEFAULT_LABEL,
 	DEFAULT_MESSAGE_ID_SUFFIX
 } from '../../shared/constants';
-import { ChangeEvent, InteractionEvent } from '../../shared/model';
+import { ChangeEvent, InputEvent, InteractionEvent } from '../../shared/model';
 import { handleFrameworkEvent } from '../../utils/form-components';
 
 useMetadata({
@@ -31,7 +31,7 @@ export default function DBTextarea(props: DBTextareaProps) {
 			placeholder: ' ',
 			rows: '4'
 		},
-		handleInput: (event: ChangeEvent<HTMLInputElement>) => {
+		handleInput: (event: InputEvent<HTMLTextAreaElement>) => {
 			if (props.onInput) {
 				props.onInput(event);
 			}
@@ -40,7 +40,7 @@ export default function DBTextarea(props: DBTextareaProps) {
 				props.input(event);
 			}
 		},
-		handleChange: (event: ChangeEvent<HTMLInputElement>) => {
+		handleChange: (event: ChangeEvent<HTMLTextAreaElement>) => {
 			if (props.onChange) {
 				props.onChange(event);
 			}

diff --git a/packages/components/src/shared/model.ts b/packages/components/src/shared/model.ts
@@ -408,16 +408,17 @@ export type ItemClickState = {
 	handleItemClick: (id: string) => void;
 };
 
-export type ChangeEvent<T> = Event;
+export type InputEvent<T> = Event;
 export type InputEventProps<T> = {
-	input?: (event: ChangeEvent<T>) => void;
-	onInput?: (event: ChangeEvent<T>) => void;
+	input?: (event: InputEvent<T>) => void;
+	onInput?: (event: InputEvent<T>) => void;
 };
 
 export type InputEventState<T> = {
-	handleInput: (event: ChangeEvent<T>) => void;
+	handleInput: (event: InputEvent<T>) => void;
 };
 
+export type ChangeEvent<T> = Event;
 export type ChangeEventProps<T> = {
 	change?: (event: ChangeEvent<T>) => void;
 	onChange?: (event: ChangeEvent<T>) => void;