Add event handlers to props

yuanqing · Jul 30, 2023 · 98e3f49 · 98e3f49
1 parent 2ec0596
commit 98e3f49
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 10 deletions.
diff --git a/packages/ui/src/components/search-textbox/search-textbox.tsx b/packages/ui/src/components/search-textbox/search-textbox.tsx
@@ -14,7 +14,9 @@ export type SearchTextboxProps<Name extends string> = {
   clearOnEscapeKeyDown?: boolean
   disabled?: boolean
   name?: Name
+  onFocus?: OmitThisParameter<JSX.FocusEventHandler<HTMLInputElement>>
   onInput?: OmitThisParameter<JSX.GenericEventHandler<HTMLInputElement>>
+  onKeyDown?: OmitThisParameter<JSX.KeyboardEventHandler<HTMLInputElement>>
   onValueInput?: OnValueChange<string, Name>
   placeholder?: string
   propagateEscapeKeyDown?: boolean
@@ -26,7 +28,9 @@ export function SearchTextbox<Name extends string>({
   clearOnEscapeKeyDown = false,
   disabled = false,
   name,
+  onFocus = function () {},
   onInput = function () {},
+  onKeyDown = function () {},
   onValueInput = function () {},
   placeholder,
   propagateEscapeKeyDown = true,
@@ -45,12 +49,13 @@ export function SearchTextbox<Name extends string>({
     inputElement.focus()
   }, [])
 
-  const handleFocus = useCallback(function (
-    event: JSX.TargetedFocusEvent<HTMLInputElement>
-  ): void {
-    event.currentTarget.select()
-  },
-  [])
+  const handleFocus = useCallback(
+    function (event: JSX.TargetedFocusEvent<HTMLInputElement>): void {
+      onFocus(event)
+      event.currentTarget.select()
+    },
+    [onFocus]
+  )
 
   const handleInput = useCallback(
     function (event: JSX.TargetedEvent<HTMLInputElement>): void {
@@ -62,6 +67,7 @@ export function SearchTextbox<Name extends string>({
 
   const handleKeyDown = useCallback(
     function (event: JSX.TargetedKeyboardEvent<HTMLInputElement>): void {
+      onKeyDown(event)
       if (event.key !== 'Escape') {
         return
       }
@@ -82,6 +88,7 @@ export function SearchTextbox<Name extends string>({
     [
       clearOnEscapeKeyDown,
       handleClearButtonClick,
+      onKeyDown,
       propagateEscapeKeyDown,
       value
     ]

diff --git a/packages/ui/src/components/textbox/textbox/private/raw-textbox.tsx b/packages/ui/src/components/textbox/textbox/private/raw-textbox.tsx
@@ -11,6 +11,10 @@ const EMPTY_STRING = ''
 export type RawTextboxProps<Name extends string> = {
   disabled?: boolean
   name?: Name
+  onBlur?: OmitThisParameter<JSX.FocusEventHandler<HTMLInputElement>>
+  onFocus?: OmitThisParameter<JSX.FocusEventHandler<HTMLInputElement>>
+  onKeyDown?: OmitThisParameter<JSX.KeyboardEventHandler<HTMLInputElement>>
+  onMouseUp?: OmitThisParameter<JSX.MouseEventHandler<HTMLInputElement>>
   onInput?: OmitThisParameter<JSX.GenericEventHandler<HTMLInputElement>>
   onValueInput?: OnValueChange<string, Name>
   password?: boolean
@@ -25,7 +29,11 @@ export type RawTextboxProps<Name extends string> = {
 export function RawTextbox<Name extends string>({
   disabled = false,
   name,
+  onBlur = function () {},
+  onFocus = function () {},
   onInput = function () {},
+  onKeyDown = function () {},
+  onMouseUp = function () {},
   onValueInput = function () {},
   password = false,
   placeholder,
@@ -50,11 +58,12 @@ export function RawTextbox<Name extends string>({
   }, [])
 
   const handleBlur = useCallback(
-    function (): void {
+    function (event: JSX.TargetedFocusEvent<HTMLInputElement>): void {
       if (revertOnEscapeKeyDownRef.current === true) {
         revertOnEscapeKeyDownRef.current = false
         return
       }
+      onBlur(event)
       if (typeof validateOnBlur !== 'undefined') {
         const result = validateOnBlur(value)
         if (typeof result === 'string') {
@@ -74,15 +83,16 @@ export function RawTextbox<Name extends string>({
       }
       setOriginalValue(EMPTY_STRING)
     },
-    [originalValue, setInputElementValue, validateOnBlur, value]
+    [onBlur, originalValue, setInputElementValue, validateOnBlur, value]
   )
 
   const handleFocus = useCallback(
     function (event: JSX.TargetedFocusEvent<HTMLInputElement>): void {
+      onFocus(event)
       setOriginalValue(value)
       event.currentTarget.select()
     },
-    [value]
+    [onFocus, value]
   )
 
   const handleInput = useCallback(
@@ -95,6 +105,7 @@ export function RawTextbox<Name extends string>({
 
   const handleKeyDown = useCallback(
     function (event: JSX.TargetedKeyboardEvent<HTMLInputElement>): void {
+      onKeyDown(event)
       const key = event.key
       if (key === 'Escape') {
         if (propagateEscapeKeyDown === false) {
@@ -122,6 +133,7 @@ export function RawTextbox<Name extends string>({
       }
     },
     [
+      onKeyDown,
       originalValue,
       propagateEscapeKeyDown,
       revertOnEscapeKeyDown,
@@ -132,12 +144,13 @@ export function RawTextbox<Name extends string>({
 
   const handleMouseUp = useCallback(
     function (event: JSX.TargetedMouseEvent<HTMLInputElement>): void {
+      onMouseUp(event)
       if (value === MIXED_STRING) {
         // Prevent changing the selection if `value` is `MIXED_STRING`
         event.preventDefault()
       }
     },
-    [value]
+    [onMouseUp, value]
   )
 
   return (