refactor(ui): use FC instead of useFocusVisible

Author: xiejay97

packages/ui/src/hooks/useFocusVisible.ts …mponents/_focus-visible/FocusVisible.tsxpackages/ui/src/hooks/useFocusVisible.ts renamed to packages/ui/src/components/_focus-visible/FocusVisible.tsx packages/ui/src/hooks/useFocusVisible.ts renamed to packages/ui/src/components/_focus-visible/FocusVisible.tsx

@@ -1,23 +1,31 @@
-import type { DCloneHTMLElement } from '../utils/types';
+import type { DCloneHTMLElement } from '../../utils/types';
 
 import { isUndefined } from 'lodash';
-import { useRef, useState } from 'react';
+import { useRef } from 'react';
 
 import { useAsync, useEvent, useRefExtra } from '@react-devui/hooks';
 
-import { cloneHTMLElement } from '../utils';
+import { cloneHTMLElement } from '../../utils';
 
 const FOCUS_KEY = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End', 'Enter', 'Space'];
 
-export function useFocusVisible(disabled = false): [boolean, DCloneHTMLElement] {
+export interface DFocusVisibleProps {
+  children: (props: { render: DCloneHTMLElement }) => JSX.Element | null;
+  dDisabled?: boolean;
+  onFocusVisibleChange: (focus: boolean) => void;
+}
+
+export function DFocusVisible(props: DFocusVisibleProps): JSX.Element | null {
+  const { children, dDisabled = false, onFocusVisibleChange } = props;
+
+  //#region Ref
   const windowRef = useRefExtra(() => window);
+  //#endregion
 
   const dataRef = useRef<{
     clearTid?: () => void;
   }>({});
 
-  const [focusVisible, setFocusVisible] = useState(false);
-
   const async = useAsync();
   useEvent(
     windowRef,
@@ -29,34 +37,33 @@ export function useFocusVisible(disabled = false): [boolean, DCloneHTMLElement]
       }, 20);
     },
     {},
-    disabled
+    dDisabled
   );
 
-  return [
-    focusVisible,
-    (el) =>
-      disabled
+  return children({
+    render: (el) =>
+      dDisabled
         ? el
         : cloneHTMLElement(el, {
             onFocus: (e) => {
               el.props.onFocus?.(e);
 
               if (!isUndefined(dataRef.current.clearTid)) {
-                setFocusVisible(true);
+                onFocusVisibleChange(true);
               }
             },
             onBlur: (e) => {
               el.props.onBlur?.(e);
 
-              setFocusVisible(false);
+              onFocusVisibleChange(false);
             },
             onKeyDown: (e) => {
               el.props.onKeyDown?.(e);
 
               if (FOCUS_KEY.includes(e.code)) {
-                setFocusVisible(true);
+                onFocusVisibleChange(true);
               }
             },
           }),
-  ];
+  });
 }

packages/ui/src/components/_focus-visible/index.ts

@@ -0,0 +1 @@
+export * from './FocusVisible';

packages/ui/src/components/_selectbox/Selectbox.tsx

@@ -9,10 +9,11 @@ import { useForkRef, useRefExtra, useResize } from '@react-devui/hooks';
 import { CloseCircleFilled, DownOutlined, LoadingOutlined, SearchOutlined } from '@react-devui/icons';
 import { checkNodeExist, getClassName } from '@react-devui/utils';
 
-import { useMaxIndex, useFocusVisible } from '../../hooks';
+import { useMaxIndex } from '../../hooks';
 import { cloneHTMLElement } from '../../utils';
 import { DBaseDesign } from '../_base-design';
 import { DBaseInput } from '../_base-input';
+import { DFocusVisible } from '../_focus-visible';
 import { useGlobalScroll, useLayout, usePrefixConfig, useTranslation } from '../root';
 
 export interface DSelectboxProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
@@ -94,12 +95,6 @@ export function DSelectbox(props: DSelectboxProps): JSX.Element | null {
 
   const [isFocus, setIsFocus] = useState(false);
 
-  const [focusVisible, renderFocusVisible] = useFocusVisible();
-  useEffect(() => {
-    onFocusVisibleChange(focusVisible);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [focusVisible]);
-
   const inputable = dSearchable && dVisible;
   const clearable = dClearable && dContent && !dVisible && !dLoading && !dDisabled;
 
@@ -172,36 +167,40 @@ export function DSelectbox(props: DSelectboxProps): JSX.Element | null {
               }}
             >
               <div className={`${prefix}__container`} title={dContentTitle}>
-                <DBaseInput dFormControl={dFormControl} dLabelFor>
-                  {({ render: renderBaseInput }) => {
-                    return renderFocusVisible(
-                      dInputRender(
-                        renderBaseInput(
-                          <input
-                            ref={combineInputRef}
-                            className={`${prefix}__search`}
-                            style={{
-                              opacity: inputable ? undefined : 0,
-                              zIndex: inputable ? undefined : -1,
-                            }}
-                            type="text"
-                            autoComplete="off"
-                            disabled={dDisabled}
-                            role="combobox"
-                            aria-haspopup="listbox"
-                            aria-expanded={dVisible}
-                            onFocus={() => {
-                              setIsFocus(true);
-                            }}
-                            onBlur={() => {
-                              setIsFocus(false);
-                            }}
-                          />
-                        )
-                      )
-                    );
-                  }}
-                </DBaseInput>
+                <DFocusVisible onFocusVisibleChange={onFocusVisibleChange}>
+                  {({ render: renderFocusVisible }) => (
+                    <DBaseInput dFormControl={dFormControl} dLabelFor>
+                      {({ render: renderBaseInput }) => {
+                        return dInputRender(
+                          renderFocusVisible(
+                            renderBaseInput(
+                              <input
+                                ref={combineInputRef}
+                                className={`${prefix}__search`}
+                                style={{
+                                  opacity: inputable ? undefined : 0,
+                                  zIndex: inputable ? undefined : -1,
+                                }}
+                                type="text"
+                                autoComplete="off"
+                                disabled={dDisabled}
+                                role="combobox"
+                                aria-haspopup="listbox"
+                                aria-expanded={dVisible}
+                                onFocus={() => {
+                                  setIsFocus(true);
+                                }}
+                                onBlur={() => {
+                                  setIsFocus(false);
+                                }}
+                              />
+                            )
+                          )
+                        );
+                      }}
+                    </DBaseInput>
+                  )}
+                </DFocusVisible>
                 {!inputable &&
                   (dContent ? (
                     <div className={`${prefix}__content`}>{dContent}</div>

packages/ui/src/components/auto-complete/AutoComplete.tsx

@@ -9,8 +9,9 @@ import { useEvent, useEventCallback, useId, useRefExtra, useResize } from '@reac
 import { LoadingOutlined } from '@react-devui/icons';
 import { findNested, getClassName, getOriginalSize, getVerticalSidePosition } from '@react-devui/utils';
 
-import { useMaxIndex, useDValue, useFocusVisible } from '../../hooks';
+import { useMaxIndex, useDValue } from '../../hooks';
 import { cloneHTMLElement, registerComponentMate, TTANSITION_DURING_POPUP, WINDOW_SPACE } from '../../utils';
+import { DFocusVisible } from '../_focus-visible';
 import { DComboboxKeyboard } from '../_keyboard';
 import { DTransition } from '../_transition';
 import { DInput } from '../input';
@@ -88,7 +89,7 @@ function AutoComplete<T extends DAutoCompleteItem>(
 
   const [visible, changeVisible] = useDValue<boolean>(false, dVisible, onVisibleChange);
 
-  const [focusVisible, renderFocusVisible] = useFocusVisible();
+  const [focusVisible, setFocusVisible] = useState(false);
 
   const maxZIndex = useMaxIndex(visible);
 
@@ -177,77 +178,81 @@ function AutoComplete<T extends DAutoCompleteItem>(
 
   return (
     <>
-      <DComboboxKeyboard
-        dVisible={visible}
-        dEditable
-        dHasSub={false}
-        onVisibleChange={changeVisible}
-        onFocusChange={(key) => {
-          switch (key) {
-            case 'next':
-              changeFocusItem(vsRef.current?.scrollByStep(1));
-              break;
-
-            case 'prev':
-              changeFocusItem(vsRef.current?.scrollByStep(-1));
-              break;
-
-            case 'first':
-              changeFocusItem(vsRef.current?.scrollToStart());
-              break;
-
-            case 'last':
-              changeFocusItem(vsRef.current?.scrollToEnd());
-              break;
-
-            default:
-              break;
-          }
-        }}
-      >
-        {({ render: renderComboboxKeyboard }) => {
-          const renderInput = (el: React.ReactElement<React.HTMLAttributes<HTMLElement>>, props?: React.HTMLAttributes<HTMLElement>) =>
-            renderFocusVisible(
-              renderComboboxKeyboard(
-                cloneHTMLElement(el, {
-                  ...props,
-                  role: 'combobox',
-                  'aria-autocomplete': 'list',
-                  'aria-expanded': visible,
-                  'aria-controls': listId,
-                  onBlur: (e) => {
-                    el.props.onBlur?.(e);
-
-                    changeVisible(false);
-                  },
-                  onClick: (e) => {
-                    el.props.onClick?.(e);
-
-                    changeVisible(true);
-                  },
-                  onKeyDown: (e) => {
-                    el.props.onKeyDown?.(e);
-
-                    if (e.code === 'Enter' && visible && focusItem) {
-                      changeVisible(false);
-                      onItemClick?.(focusItem.value, focusItem);
-                    }
-                  },
-                })
-              )
-            );
-
-          const boxSelector = { ['data-auto-complete-box' as string]: uniqueId };
-          if (child.type === DInput) {
-            return React.cloneElement<DInputProps>(child, {
-              ...boxSelector,
-              dInputRender: renderInput,
-            });
-          } else {
-            return renderInput(child, boxSelector);
-          }
-        }}
-      </DComboboxKeyboard>
+      <DFocusVisible onFocusVisibleChange={setFocusVisible}>
+        {({ render: renderFocusVisible }) => (
+          <DComboboxKeyboard
+            dVisible={visible}
+            dEditable
+            dHasSub={false}
+            onVisibleChange={changeVisible}
+            onFocusChange={(key) => {
+              switch (key) {
+                case 'next':
+                  changeFocusItem(vsRef.current?.scrollByStep(1));
+                  break;
+
+                case 'prev':
+                  changeFocusItem(vsRef.current?.scrollByStep(-1));
+                  break;
+
+                case 'first':
+                  changeFocusItem(vsRef.current?.scrollToStart());
+                  break;
+
+                case 'last':
+                  changeFocusItem(vsRef.current?.scrollToEnd());
+                  break;
+
+                default:
+                  break;
+              }
+            }}
+          >
+            {({ render: renderComboboxKeyboard }) => {
+              const renderInput = (el: React.ReactElement<React.HTMLAttributes<HTMLElement>>, props?: React.HTMLAttributes<HTMLElement>) =>
+                renderFocusVisible(
+                  renderComboboxKeyboard(
+                    cloneHTMLElement(el, {
+                      ...props,
+                      role: 'combobox',
+                      'aria-autocomplete': 'list',
+                      'aria-expanded': visible,
+                      'aria-controls': listId,
+                      onBlur: (e) => {
+                        el.props.onBlur?.(e);
+
+                        changeVisible(false);
+                      },
+                      onClick: (e) => {
+                        el.props.onClick?.(e);
+
+                        changeVisible(true);
+                      },
+                      onKeyDown: (e) => {
+                        el.props.onKeyDown?.(e);
+
+                        if (e.code === 'Enter' && visible && focusItem) {
+                          changeVisible(false);
+                          onItemClick?.(focusItem.value, focusItem);
+                        }
+                      },
+                    })
+                  )
+                );
+
+              const boxSelector = { ['data-auto-complete-box' as string]: uniqueId };
+              if (child.type === DInput) {
+                return React.cloneElement<DInputProps>(child, {
+                  ...boxSelector,
+                  dInputRender: renderInput,
+                });
+              } else {
+                return renderInput(child, boxSelector);
+              }
+            }}
+          </DComboboxKeyboard>
+        )}
+      </DFocusVisible>
       {containerRef.current &&
         ReactDOM.createPortal(
           <DTransition